1. Pertama – tama tools yang perlu disiapkan adalah
Text Editor (Sublime atau VisualCode Studio)
Composer
Local Server (Xampp)
Postman
2. Apabila semua tools sudah siap, langkah pertama yang akan dilakukan adalah mengaktifkan Local Server (Xampp)
3. Klik Start pada Apache serta MySQL
3. Kemudian buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/dashboard/ pada link URL anda.
4. Lalu kita install laravel dengan menggunakan cmd tunggu sampai proses instalasi selesai .. 5. Kemudian buka salah satu text editor anda, lalu File -> open folder ->RestApi 6. Lalu buka file .env , pada bagian DB isikan seperti gambar di bawah kemudian save 7. Kemudian buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/phpmyadmin/. Klik new Lalu buatlah sebuah database dengan nama rest_api. Kemudian klik Create 8. Kemudian kita buat model, migration dan controller untuk Siswa 9. Buka file seperti gambar dibawah, lalu ubah isi pada bagian function up ( ) 10. Kita akan membuat tabel id (primary key) , nama (string) , alamat (string) lalu setelah itu kita akan memigrate nya , sebelum itu kita atur pada app/providers/AppServiceProvider.php kita tambahkan kode seperti di bawah ini : 11. Lalu kita eksekusi pembuatan tabel Siswa 12. Masuk ke app/Http/Controllers/SiswaController.php , isi source code seperti berikut : 13. pada bagian route/api.php tambahkkan source code berikut : 14. Ok, sekarang kita testing REST API nya , buka aplikasi POSTMAN anda . kita akan mencoba Create Data, 15. kita akan mencoba Read Data, 16. kita akan mencoba Update Data, 17. kita akan mencoba Detail Data, 18. kita akan mencoba Hapus Data,
5. Kemudian login dengan Login : bee, Password : bug
6. Untuk serangan SQL Injection terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba SQL Injection (GET/Search) kemudian pilih Hack
7. Lalu isi form seperti gambar di bawah, klik Search
8. Sekarang kita coba SQL Injection (GET/Select) kemudian pilih Hack
9. Kemudian pilih salah satu judul film selain yang pertama, lalu klik Go
10. Sekarang masukkan script modifikasi pada url seperti gambar dibawah, kemudian tekan enter pada url tersebut
B. Solution
Untuk mengatasi serangan SQL Injection (GET/Search) & SQL Injection (GET/Select) , buatlah fungsi berikut
4. Kemudian login dengan Login : bee, Password : bug
5. Untuk serangan HTML terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba HTML Injection – Reflected (GET) kemudian pilih Hack
6. Lalu isi form seperti gambar di bawah, klik Go
7. Sekarang kita coba HTML Injection – Reflected (POST), kemudian pilih Hack
8. Kemudian isi form seperti gambar di bawah, klik Go
9. Sekarang kita coba HTML Injection – Stored (Blog), kemudian pilih Hack
10. Kemudian isi form seperti gambar di bawah, klik Submit
11. Lakukan cara no 9, akan muncul pop up baru
B. Solution
Untuk mengatasi serangan HTML Injection – Reflected , buatlah fungsi seperti gambar dibawah
Aktifkan xampp anda terlebih dahulu. Tekan tombol window pada keyboard anda, lalu ketik xampp .
2. Klik Start pada Apache serta MySQL
3. Kemudian buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/dashboard/ pada link URL anda.
4. Kemudian buatlah sebuah folder dengan nama sip-native dalam directory htdocs anda , secara default ada di C:\xampp2\htdocs 6. Sekarang kita download Admin LTE template di https://github.com/almasaeed2010/AdminLTE/releases . Scroll ke bawah, seperti gambar dibawah, lalu pilih Source code (zip) .
7. Setelah file berhasil di download, extract file tersebut.
8. Kemudian copy folder AdminLTE-3.0.0-alpha ke dalam folder C:\xampp2\htdocs\sip-native .
9. Lalu rename folder AdminLTE-3.0.0-alpha menjadi lte.
10. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/lte pada link URL anda.
11. tambahkan 3 folder baru di dalam direktori C:\xampp2\htdocs\sip-native .
12. Sekarang buat sebuah file admin_view.php di dalam C:\xampp2\htdocs\sip-native\view, kemudian buatlah class dengan fungsi seperti gambar dibawah .
13. kemudian copy isi dari starter.html yang ada dalam folder lte ke dalam file admin_view.php didalam echo “<disini> “. buka link berikut https://pastebin.com/WuEUrRC2
14. Kemudian isikan code di bawah pada file index.php .
<!DOCTYPE html> <!– This is a starter template page. Use this page to start your new project from scratch. This page gets rid of all links and provides the needed markup only. –> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>AdminLTE 3 | Starter</title>
<!– Font Awesome Icons –> <link rel=”stylesheet” href=”lte/plugins/font-awesome/css/font-awesome.min.css”> <!– Theme style –> <link rel=”stylesheet” href=”lte/dist/css/adminlte.min.css”> <!– Google Font: Source Sans Pro –> <link href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700″ rel=”stylesheet”> </head> <body class=”hold-transition sidebar-mini”> <div class=”wrapper”>
9. Kemudian buka folder project BookStoreApp menggunakan IDE anda, masuk ke dalam src/app/app.module.ts untuk import plugin SQLite. Tambahkan import { SQLite } from ‘@ionic-native/sqlite’; serta SQLite seperti gambar di bawah.
10. Lalu kita akan membuat provider untuk database, ketik ionic generate provider database
11. Ubah code yang ada dalam src/provider/database/database.ts. Masukkan code di bawah
import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
@Injectable()
export class DatabaseProvider {
db:SQLiteObject = null;
constructor(private sqlite: SQLite) { }
getOrGenerateDB() {
// Generate DB adalah proses asynchronus, jadi bagusnya kita pakai promise
// Walaupun prosesnya hanya sepersekian detik, tetap saja harus di tunggu.
return new Promise((resolve, reject) => {
if (this.db != null) {
resolve(this.db)
} else {
this.sqlite.create({
name : 'myDatabase.db',
location : 'default'
}).then((db: SQLiteObject) => {
this.db = db;
resolve(this.db)
}).catch((e) => {
console.log(e);
reject(e);
});
}
});
}
createTable() {
this.getOrGenerateDB().then((db: SQLiteObject) => {
var sql = 'create table IF NOT EXISTS buku (' +
'id INTEGER PRIMARY KEY AUTOINCREMENT, '+
'judul VARCHAR(255), '+
'penerbit VARCHAR(50), '+
'pengarang VARCHAR(50))';
db.executeSql(sql, {})
.then(() => console.log('tabel buku berhasil di create'))
.catch(e => console.log(e));
// db.executeSql('DELETE FROM buku', {})
// .then(() => console.log('tabel buku berhasil di delete'))
// .catch(e => console.log(e));
// db.executeSql('INSERT INTO buku values (?, ?,?,?)',
// [null, "judullll", "penerbittt", "ppengarang OKEOKE"])
// .then(() => console.log('tabel buku berhasil di tambah'))
// .catch(e => console.log(e));
// Untuk create table lainnya bisa ditambahkan di sini
// contoh
// var sql = 'create Tabel 2 IF NOT EXISTS delivery_form (' +
// 'number VARCHAR(255) PRIMARY KEY, '+
// 'round_id VARCHAR(255), '+
// 'state VARCHAR(50), '+
// 'has_returns INTEGER(2), '+
// 'has_annotations INTEGER(2))';
// db.executeSql(sql, {})
// .then(() => console.log('delivery_form table has created'))
// .catch(e => console.log(e));
})
}
}
12. Ubah code yang ada dalam src/app/pages/home/home.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk menampilkan semua data pada database.
import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../../providers/database/database';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
data:any=[];
constructor(public navCtrl: NavController, public zone: NgZone,
public db: DatabaseProvider) { }
ionViewDidEnter() {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('SELECT * FROM buku', {}).then(res => {
this.data = [];
this.zone.run(() => {
for (var i = 0; i < res.rows.length; i++) {
this.data.push({
id: res.rows.item(i).id,
judul: res.rows.item(i).judul
})
}
})
}).catch(e => console.log(e));
});
}
edit(id) {
this.navCtrl.push("BookformPage", {bookID: id})
}
add() {
this.navCtrl.push("BookformPage")
}
}
13. Ubah code yang ada dalam src/app/pages/home/home.html. Masukkan code di bawah . Disini kita akan membuat halaman untuk menampilkan semua data pada database.
14. Sekarang kita akan membuat sebuah halaman input data buku, ketik ionic generate page bookform
15. Ubah code yang ada dalam src/app/pages/bookform/bookform.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk tambah data, ubah, serta hapus.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../../providers/database/database';
@IonicPage()
@Component({
selector: 'page-bookform',
templateUrl: 'bookform.html',
})
export class BookformPage {
book: any = {
judul: '',
penerbit: '',
pengarang: ''
}
title = '';
bookID = '';
toaster: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
public toastCtrl: ToastController, public db: DatabaseProvider) {
this.title = 'Tambah Buku';
this.bookID = navParams.get("bookID");
if (this.bookID != null || this.bookID != undefined) {
this.title = 'Edit Buku';
}
this.toaster = this.toastCtrl.create({
duration: 3000,
position: 'bottom'
});
}
ionViewDidLoad() {
if (this.bookID != '') {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('SELECT * FROM buku where id = ?', [this.bookID]).then(res => {
this.book = {
id: res.rows.item(0).id,
judul: res.rows.item(0).judul,
penerbit: res.rows.item(0).penerbit,
pengarang: res.rows.item(0).pengarang
}
}).catch(e => console.log(e));
});
}
}
save() {
if (this.book.judul == '' || this.book.penerbit == '' || this.book.pengarang == '') {
this.toaster.setMessage('All fields are required');
this.toaster.present();
} else {
// Jika edit
if (this.bookID) {
var sql = 'UPDATE buku SET judul=?, penerbit=?, pengarang=? where id = ?';
var param = [this.book.judul, this.book.penerbit, this.book.pengarang, this.book.id];
} else {
console.log(this.book);
param = [null, this.book.judul, this.book.penerbit, this.book.pengarang]
sql = 'INSERT INTO buku values (?,?,?,?)';
}
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql(sql, param).then(res => {
setTimeout(()=>{
this.navCtrl.pop();
}, 300)
}).catch(e => console.log(e));
});
}
}
deleteBook() {
this.db.getOrGenerateDB().then((db: SQLiteObject) => {
db.executeSql('DELETE FROM buku where id = ?', [this.bookID]).then(res => {
setTimeout(()=>{
this.navCtrl.pop();
}, 300)
}).catch(e => console.log(e));
});
}
}
16 . Ubah code yang ada dalam src/app/pages/bookform/bookform.html Masukkan code di bawah . Disini kita akan membuat tampilan input data buku.
Pastikan anda sudah menginstall serta konfigurasi NPM serta Node.js.
Pertama tama, ketik ionic start LoginApp
3. Pilih blank .
4. input y
5. input n
6. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd LoginApp
7. Untuk mengecek apakah sudah berhasil, ketik ionic serve -ctl
8. Sekarang kita akan membuat 2 buah halaman yaitu login dan home dengan megetik ionic generate page login untuk halaman login, serta ionic generate page home untuk halaman home.
9. Kemudian buka folder project LoginApp dengan IDE anda, pada tutorial ini menggunakan Visual Code.
10. Lalu masuk ke src/pages/login/login.html
11. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas
24. Tambahkan code berikut pada file create.blade.php
25. Aktifkan folder public untuk menyimpan gambar
26. Buka file ProductController.php tambahkan code seperti gambar di bawah
27. Buka file ProductController.php tambahkan code dalam method store( )
public function store(Request $request)
{
//
$rules =[
'name'=>'required',
'price'=>'required|integer',
'imageFile'=>'required|mimes:jpg,png,jpeg,JPG',
'description'=>'required'
];
$pesan=[
'name.required'=>'Nama Barang Tidak Boleh Kosong',
'price.required'=>'Harga Barang Tidak Boleh Kosong',
'imageFile.required'=>'Gambar Tidak Boleh Kosong',
'description.required'=>'Deskripsi Tidak Boleh Kosong'
];
$validator=Validator::make(Input::all(),$rules,$pesan);
//jika data ada yang kosong
if ($validator->fails()) {
//refresh halaman
return Redirect::to('admin/product/create')
->withErrors($validator);
}else{
$image=$request->file('imageFile')->store('productImages','public');
$product=new \App\Product;
$product->name=Input::get('name');
$product->condition=Input::get('condition');
$product->description=Input::get('description');
$product->price=Input::get('price');
$product->image=$image;
$product->save();
Session::flash('message','Product Stored');
return "Berhasil Input Barang";
}
}
28. Sekarang coba input data pada form tambah data, lihat apakah berhasil
29. Buatlah sebuah file index.blade.php dalam folder product
30. Masukkan code di bawah ini ke dalam index.blade.php
public function update(Request $request, $id)
{
//
$rules=[
'name'=>'required',
'price'=>'required|integer',
'description'=>'required',
];
$pesan=[
'name.required'=>'Nama Tidak Boleh Kosong!!',
'price.required'=>'Harga Tidak Boleh Kosong!!',
'description.required'=>'Deskripsi Barang Tidak Boleh Kosong!!',
];
$validator=Validator::make(Input::all(),$rules,$pesan);
if ($validator->fails()) {
return Redirect::to('admin/product/'.$id.'/edit')
->withErrors($validator);
}else{
$image="";
if (!$request->file('imageFile')) {
# code...
$image=Input::get('imagePath');
}else{
$image=$request->file('imageFile')->store('productImages','public');
}
$product=\App\Product::find($id);
$product->name=Input::get('name');
$product->condition=Input::get('condition');
$product->price=Input::get('price');
$product->description=Input::get('description');
$product->image=$image;
$product->save();
Session::flash('message','Data Barang Berhasil Diubah');
return Redirect::to('admin/product');
}
}
44. Sekarang coba anda ubah salah satu data barang
45. Terakhir kita aktifkan fungsi hapus, buka file ProductController.php tambahkan code dalam method delete ( )
46. Coba hapus salah satu data dengan klik simbol tong sampah
tunggu sampai proses instalasi selesai .. 5. Kemudian buka salah satu text editor anda, lalu File -> open folder -> RestApi 
6. Lalu buka file .env , pada bagian DB isikan seperti gambar di bawah kemudian save 
7. Kemudian buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/phpmyadmin/. Klik new Lalu buatlah sebuah database dengan nama rest_api. Kemudian klik Create 
8. Kemudian kita buat model, migration dan controller untuk Siswa 
9. Buka file seperti gambar dibawah, lalu ubah isi pada bagian function up ( ) 
10. Kita akan membuat tabel id (primary key) , nama (string) , alamat (string) lalu setelah itu kita akan memigrate nya , sebelum itu kita atur pada app/providers/AppServiceProvider.php kita tambahkan kode seperti di bawah ini : 
11. Lalu kita eksekusi pembuatan tabel Siswa 
12. Masuk ke app/Http/Controllers/SiswaController.php , isi source code seperti berikut : 
13. pada bagian route/api.php tambahkkan source code berikut : 
14. Ok, sekarang kita testing REST API nya , buka aplikasi POSTMAN anda . kita akan mencoba Create Data, 
15. kita akan mencoba Read Data, 
16. kita akan mencoba Update Data, 
17. kita akan mencoba Detail Data, 
18. kita akan mencoba Hapus Data, 
6. Sekarang kita download Admin LTE template di 
