Konsep dan implementasi LARAVEL 7 Edisi BEST PRACTICE · iii KATA PENGANTAR Sejak tahun 2016, buku...

LARAVEL 7 Edisi BEST PRACTICE

CV. LOKOMEDIA

Lukmanul Hakim

Ko n s e p d a n i m p l e m e n t a s i

ii

Konsep & implementasi Pemrograman LARAVEL 7 Edisi BEST PRACTICEPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Lukmanul HakimKonsep & implementasi Pemrograman Laravel 7 Edisi Best Practice- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2020 200 halaman; 14 x 21 cm ISBN : 978-602-6231-25-3

Penerbit Lokomedia, Cetakan Pertama : Juni 2020

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :CV. LOKOMEDIAJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2020

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

iii

KATA PENGANTAR

Sejak tahun 2016, buku Konsep dan Implementasi Pemrograman Laravel menjadi buku panduan terbaik (BEST SELLER) dalam mempelajari Laravel. Sehingga kami terbitkan kembali menggunakan Laravel versi terbaru, yaitu 7.

Dalam Edisi BEST PRACTICE ini tetap mempertahankan struktur dan sistematis buku pendahulunya. Tidak hanya penyesuaian koding agar dapat berjalan dengan baik di versi 7. Namun, kami tambahkan ide brilian dan materi baru seperti koding disederhanakan sedemikian rupa, sehingga lebih ringkas dan mudah dipahami.

Selain itu, disertakan alur/diagram, ilustrasi/visualisasi yang dapat memudahkan pemahaman setiap materi. Dan agar lebih fresh, kami berikan proyek baru, yaitu Admin Gallery System (Back-End/Admin dan Front-End/Pengunjung).

Oleh karena itu, buku iin dapat menjadi panduan yang tepat untuk menguasai Laravel dengan cepat. Disajikan dalam bentuk Langkah demi Langkah. Setiap materi disertai studi kasus. Bahkan, beberapa materi tidak ada dalam dokumentasi resmi Laravel.

Yogyakarta, Mei 2020

Penulis

[email protected]

iv

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

v

DAFTAR ISI

BAB 1. Mengenal Laravel ................................................................................1

1.1. Apa itu Laravel? ...........................................................................................2

1.2. Mengapa Menggunakan Laravel? ...............................................................2

1.3. Manfaat dan FItur-Fitur Laravel ..................................................................4

BAB 2. Instalasi Laravel ..................................................................................7

2.1. Kebutuhan Sistem ........................................................................................8

2.2. Install Xampp ...............................................................................................8

2.3. Install Composer ..........................................................................................9

2.4. Install Laravel .............................................................................................13

2.5. Text Editor ..................................................................................................16

BAB 3. Artisan (Command Line Interface) ................................................17

BAB 4. Routing dan View ..............................................................................21

4.1. Memahami Konsep Routing ......................................................................23

4.2. Membuat Route ..........................................................................................25

4.3. Mengarahkan Route ke Sub Folder ...........................................................27

4.4. Cara Kerja Routing ....................................................................................30

4.5. View (Menampilkan Data) ........................................................................30

BAB 5. Blade (Template Engine) ..................................................................31

5.1. Mengenal dan Membuat Blade .................................................................32

5.2. Sintaks Blade ..............................................................................................34

5.3. Menerapkan Bootstrap di Blade ................................................................36

vi

BAB 6. Penggunaan Controller .....................................................................39

6.1. Mengapa Perlu Controller? ........................................................................40

6.2. Membuat Route Controller ........................................................................40

6.3. Cara Kerja Controller .................................................................................43

6.4. Membuat Controller untuk Halaman Buku ..............................................44

BAB 7. Migration (Membuat Database) ......................................................47

7.1. Mengatur Setting Database ........................................................................48

7.2. Membuat Database dengan Konsep Migration.........................................48

7.3. Menjalankan Migration .............................................................................50

BAB 8. Eloquent: Model (Mengolah Database) ..........................................53

8.1. Model dan Eloquent ...................................................................................54

8.2. Membuat Model (Menampilkan Data Buku) ...........................................54

8.3. Menambah Data Buku ...............................................................................58

8.4. Mengurutkan Data Buku ...........................................................................59

8.5. Menghapus Data Buku ..............................................................................66

8.6. Edit dan Update Data Buku .......................................................................69

8.7. Memahami Route Lebih Lanjut ................................................................72

BAB 9. Fitur Pelengkap CRUD ....................................................................75

9.1. Format Tanggal dan Angka ........................................................................76

9.2. Menerapkan Datepicker untuk Tanggal ....................................................78

9.3. Flash Message ............................................................................................80

9.4. Validasi Input ..............................................................................................83

9.5. Pagination ...................................................................................................86

9.6. Searching ....................................................................................................90

vii

BAB 10. Proyek Admin Gallery System ......................................................95

10.1. Persiapan Proyek ......................................................................................96

10.2. Menggabungkan Template Admin dengan Laravel ................................97

10.3. Membuat Database (Eloquent One-to-Many) ......................................104

10.4. Membuat Modul Album ........................................................................107

10.4.1. Menampilkan Album .................................................................109

10.4.2. Menambah Album .....................................................................112

10.4.3. Menghapus Album .....................................................................116

10.4.4. Edit dan Update Album .............................................................117

BAB 11. Modul Galeri Foto .........................................................................121

11.1. Menampilkan Galeri Foto ......................................................................124

11.2. Menambah Galeri Foto ..........................................................................126

11.3. Menghapus Galeri Foto .........................................................................132

11.4. Edit dan Update Galeri Foto ..................................................................133

BAB 12. Authentication (Login) ..................................................................137

12.1. Membuat Autentikasi .............................................................................138

12.2. Ujicoba Autentikasi ................................................................................140

12.3. Mengganti Desain/Layout Admin .........................................................142

12.4. Menyesuaikan Fitur Login ....................................................................143

BAB 13. Modul Manajemen User ...............................................................147

13.1. Menambahkan Kolom level pada Tabel users ......................................148

13.2. Membuat Route untuk Manajemen User ..............................................149

13.3. Model dan Controller User ....................................................................150

13.4. Menampilkan User .................................................................................150

viii

13.5. Menambah User .....................................................................................153

13.6. Menghapus User ....................................................................................156

13.7. Edit dan Update User .............................................................................157

13.8. Merelasikan Tabel users dan Tabel galeri .............................................160

BAB 14. Proteksi Modul dengan Middleware ..........................................165

14.1. Proteksi Modul dengan Middleware Auth ............................................167

14.2. Proteksi Navigation Bar .........................................................................168

14.3. Membuat Middleware Admin ...............................................................170

BAB 15. Halaman Pengunjung (Front-End) .............................................173

15.1. Menampilkan Data Album Secara Horizontal ......................................174

15.2. Menampilkan Galeri Foto Berdasar Album (SEO URL Friendly) ......178

15.3. Menampilkan Detail Galeri Foto (Lightbox) ........................................180

15.4. Menambahkan Fitur Like pada Galeri Foto ..........................................182

BAB 16. Panduan Lengkap Upload Proyek Laravel ke Hosting ...........185

16.1. Persiapan File dan Database di Lokal ...................................................186

16.2. Upload ke Hosting .................................................................................188

16.2.1. Cara Mengecek Versi PHP di Hosting ......................................188

16.2.2. Membuat User dan Database di Hosting ..................................190

16.2.3. Upload Database ke Hosting .....................................................193

16.2.4. Upload File Proyek ke Hosting .................................................194

16.2.5. Setting File dan Database di Hosting ........................................196

16.3. Ujicoba Online Proyek Laravel .............................................................197

Daftar Pustaka ...............................................................................................200

Konsep & Implementasi Pemrograman Laravel 754

BAB 8

Eloquent: Model (Mengolah Database)

8.1 Model dan EloquentPada bab-bab sebelumnya, kita telah berkenalan dengan dua komponen dari konsep MVC (Model View Controller) yang dianut oleh Framework Laravel, yaitu View dan Controller. Sekarang kita akan membahas satu komponen lagi, yaitu Model.

Pada Laravel, kita akan membuat representasi Model dengan class Eloquent, dimana Eloquent adalah nama class di Laravel yang dapat kita gunakan untuk keperluan mengolah database atau yang populer dengan sebutan CRUD (Create Read Update Delete).

Untuk lebih mengenal Eloquent, misalkan untuk menampilkan data dari tabel buku, maka biasanya perintah query yang digunakan:

select * from buku;

Jika menggunakan Eloquent menjadi:Buku::all();

Oh ya, sebelumnya penulis beritahukan bahwa untuk efisiensi penulisan dan kerapian coding, maka di bagian coding nanti penulis tidak menyertakan coding/class Bootstrap, jadi yang terlihat hanya coding intinya saja (untuk melihat coding lengkapnya, silahkan download source code yang disertakan)

8.2 Membuat Model (Menampilkan Data Buku)Oke, langsung saja kita praktekkan cara pembuatan Model dengan kasus menampilkan data buku. Untuk membuat Eloquent Model, ikuti langkah berikut:

Langkah 1: Membuat Model

Buka Command Prompt, masuk ke folder perpustakaan, lalu ketik perintah:php artisan make:model Buku

Maka akan terbentuk file baru bernama Buku.php di folder perpustakaan/app/.

Bab 8. Model (Mengolah Database) 55

Langkah 2: Mendefinisikan Tabel di Model

Buka file Buku.php, pada file Model ini kita akan mendefinisikan tabel yang akan kita gunakan yaitu tabel buku. Untuk itu, tambahkan property $table di Baris 9:1. <?php2. 3. namespace App;4. 5. use Illuminate\Database\Eloquent\Model;6. 7. class Buku extends Model8. {9. protected $table = ‘buku’;10. }

Langkah 3: Membuat Route dan Controller

Pada sub-bab 6.3 kita telah membuat route controller buku di web.php:Route::get(‘/buku’, ‘BukuController@index’);

Begitu juga dengan file controllernya telah kita buat pada Bab 6, yaitu BukuController.php. Ada beberapa kode yang perlu kita ubah dan tambahkan di BukuController.php, perhatikan teks yang ditebalkan:1. <?php2. 3. namespace App\Http\Controllers;4. 5. use Illuminate\Http\Request;6. use App\Buku;7. 8. class BukuController extends Controller9. {10. public function index(){11. $data_buku = Buku::all();12. return view(‘buku.index’, compact(‘data_buku’));13. }14. }

Baris 6. use App\Buku untuk memuat/memanggil Model Buku.php, yang didalamnya ada definisi tabel yang digunakan, yaitu tabel buku.

Baris 11. Buku::all() untuk menampilkan semua (all) data pada tabel buku.

Baris 12. Fungsi compact() untuk mem-passing/mengirimkan variabel dari Controller (BukuController.php) ke View (index.blade.php yang terletak di folder views/buku/). Dalam kasus ini, yang dikirimkan adalah variabel data_buku.


Langkah 4: Membuat View

Pada Bab 5, kita telah membuat file view untuk halaman data buku, namanya index.blade.php yang tersimpan di folder views/buku/. Buka file tersebut dan ubah isi filenya menjadi:1. @extends(‘layouts.master’)2. 3. @section(‘content’)4. <div class=”container”>5. <h4>Data Buku</h4>6. 7. <table class=”table table-striped”>8. <thead>9. <tr>10. <th>No</th>11. <th>Judul Buku</th>12. <th>Penulis</th>13. <th>Harga</th>14. <th>Tgl. Terbit</th>15. </tr>16. </thead>17. <tbody>18. @foreach ($data_buku as $buku)19. <tr>20. <td>{{ $buku->id }}</td>21. <td>{{ $buku->judul }}</td>22. <td>{{ $buku->penulis }}</td>23. <td>{{ $buku->harga }}</td>24. <td>{{ $buku->tgl_terbit }}</td>25. </form>26. </tr>27. @endforeach28. </tbody>29. </table>30. </div>31. @endsection

Baris 18. Perulangan @foreach yang digunakan untuk menampilkan data array, dimana dalam hal ini adalah $data_buku untuk selanjutnya diganti penyebutannya (as) dengan $buku.

Baris 20-24. Menampilkan data pada masing-masing kolom sesuai dengan nama kolomnya di tabel, formatnya $nama_array->nama_kolom. Misalnya di tabel buku nama kolomnya judul, maka $buku->judul.

Untuk melihat hasilnya, silahkan akses http://localhost:8000/buku, maka akan tampil Data Buku yang diambil datanya dari tabel buku. Lihat gambar 8.1.


Gambar 8.1 Menampilkan Data Buku

Di komputer Anda hanya akan tampil header Aplikasi Perpustakaan dan judul Data Buku, karena di tabel buku memang belum ada data. Nanti, input data baru akan kita buat pada bab Menambah Data Buku.

Bagi Anda yang ingin mengetahui proses yang terjadi di balik layar dari Menampilkan Data Buku, silahkan lihat gambar 8.2.

Gambar 8.2 Proses di balik layar yang dilakukan Laravel untuk menampilkan data


8.3 Mengurutkan Data BukuDalam data yang ditampilkan, kita bisa mengurutkannya berdasarkan kolom tertentu pada tabel. Misalnya, kita akan mengurutkan berdasarkan judul, maka tambahkan kode sortBy(‘judul’).

Namun, dalam kasus ini kita akan mengurutkan buku berdasarkan buku yang terakhir di input (buku terbaru di perpustakaan tersebut). Itu artinya, kita akan mengurutkannya berdasarkan kolom id yg paling terakhir, maka kita menggunakan sortByDesc(‘id’). Untuk mempraktekkannya, ikuti langkah-langkah berikut:

Langkah 1:

Buka file BukuController.php, Anda cukup menambahkan kode pada Baris 11, yang semula:

$data_buku = Buku::all();

Ubah menjadi:$data_buku = Buku::all()->sortByDesc(‘id’);

Untuk melihat hasilnya akses di http://localhost:8000/buku, maka sekarang data buku yang tampil di urutkan berdasarkan id yang terakhir di input/id dengan angka tertinggi (perhatikan pada kolom No). Lihat gambar 8.3.

Gambar 8.3 Mengurutkan Data Buku berdasarkan id terakhir


Kalau Anda perhatikan pada Gambar 8.3, tepatnya pada kolom No, tentu tidak elok datanya, karena seharusnya yang tampil adalah nomor berurut dimulai dari 1,2, dan seterusnya.

Untuk mengatasi hal tersebut, kita akan membuat variabel nomor tersendiri yang berisi data nomor yang bertambah sesuai dengan data yang ditampilkan, kita akan bahas pada Langkah berikutnya.

Langkah 2:

Buka file BukuController.php, lalu pada function index(), tambahkan kode berikut, perhatikan teks yang ditebalkan:

public function index(){ $data_buku = Buku::all()->sortByDesc(‘id’); $no = 0; return view(‘buku.index’, compact(‘data_buku’, ‘no’));}

Perhatikan pada kode diatas, kita membuat variabel $no yang nilai awalnya di set 0, kemudian variabel no dikirimkan ke View melalui fungsi compact().

Langkah 3:

Selanjutnya, buka file index.blade.php, ubah kode pada Baris 20, yang semula:<td>{{ $buku->id }}</td>

Ubah menjadi:<td>{{ ++$no }}</td>

Setelah variabel $no sampai ke view (index.blade.php), maka akan ditambahkan 1 (++$no), jadi yang semula $no bernilai 0 ditambah 1 = 1, ketika perulangan berikutnya $no bernilai 1 akan ditambah 1 = 2, dan begitu seterusnya.

Untuk melihat hasilnya akses di http://localhost:8000/buku, maka sekarang penomoran di kolom No sudah terurut angkanya. Lihat gambar 8.4.

8.4 Menambah Data BukuTahap pertama dari pengolahan database sudah kita lewati, yaitu menampilkan data (Read), sekarang kita akan membuat form untuk menambah data (Create) ke dalam database.


Gambar 8.4 Hasil perbaikan nomor berurut di kolom No

Langkah 1: Membuat Route Tambah Buku

Buka file route web.php, lalu tambahkan 2 route untuk menangani tambah buku:Route::get(‘/buku’, ‘BukuController@index’);Route::get(‘/buku/create’, ‘BukuController@create’)->name(‘buku.create’);Route::post(‘/buku’, ‘BukuController@store’)->name(‘buku.store’);

Perhatikan pada dua route yang baru kita buat, di bagian akhirnya ada tambahan ->name(‘buku.create’) dan ->name(‘buku.store’), itu adalah named route (memberi nama suatu route atau alias-nya), sehingga nanti kita memanggil route cukup dengan nama alias-nya, yaitu buku.create.

Langkah 2: Membuat Tombol Tambah Buku

Tombol Tambah Buku yang akan kita buat berupa link yang apabila di klik akan mengarahkan kita ke form tambah buku. Untuk membuat tombolnya, buka file index.blade.php, lalu tambahkan kode pada Baris 6, lihat teks yang ditebalkan:1. @extends(‘layouts.master’)2. 3. @section(‘content’)4. <div class=”container”>


5. <h4>Data Buku</h4>6. <p align=”right”><a href=”{{ route(‘buku.create’) }}”>

Tambah Buku</a></p>7. <table class=”table table-striped”>

… kode dibawahnya tidak ada perubahan, jadi tidak ditampilkan …

Perhatikan pada Baris 6 untuk pembuatan link di tag <a href> kita mengisikan link alamat/halamannya sesuai dengan nama route yang telah kita definisikan named route-nya di Langkah 1, yaitu buku.create.

Kemudian buka file BukuController.php, tambahkan di bawah function index() sebuah function baru berikut:

public function create(){ return view(‘buku.create’);}

function create() akan mengarahkan ke tampilan view create.blade.php yang berada di folder views/buku/.

Untuk melihat hasilnya, silahkan akses http://localhost:8000/buku, maka di pojok kanan data buku sudah tampil tombol Tambah Buku. Lihat gambar 8.5.

Gambar 8.5 Membuat tombol Tambah Buku


Untuk sementara, jangan di klik dulu tombol Tambah Buku, karena kita belum membuat form-nya.

Langkah 3: Membuat Form Tambah Buku

Buat file baru dengan nama create.blade.php dan simpan di folder views/buku/. Adapun isi filenya sebagai berikut:1. @extends(‘layouts.master’)2. 3. @section(‘content’)4. <div class=”container”>5. <h4>Tambah Buku</h4>6. <form method=”post” action=”{{ route(‘buku.store’) }}”>7. @csrf8. <div>Judul <input type=”text” name=”judul”></div> 9. <div>Penulis <input type=”text” name=”penulis”></div>10. <div>Harga <input type=”text” name=”harga”></div>11. <div>Tgl. Terbit <input type=”text” name=”tgl_terbit”></div>12. <div><button type=”submit”>Simpan</button>13. <a href=”/buku”>Batal</a></div>14. </form>15. </div>16. @endsection

Baris 6. Pada action, kita mengisikan alamat/halaman tujuannya sesuai dengan nama route yang telah kita definisikan named route-nya di Langkah 1, yaitu buku.store.

Baris 7. @csrf merupakan proteksi dari serangan CSRF (Cross Site Request Forgery) yang mencegah penginputan data ilegal dari luar aplikasi/sistem.

Ya, cukup dengan menambahkan kode @csrf, maka Laravel akan membuat (generate) kode token otomatis, secara kasat mata kodenya tidak terlihat karena dalam bentuk hidden. Apabila Anda ingin melihat kodenya, nanti saat berada di halaman form tambah data buku, buka menu Developer Chrome, lalu lihat di tab Elements seperti pada gambar 8.6.

Sekarang kita coba lihat hasil tampilan form-nya dengan mengklik tombol Tambah Buku (lihat lagi gambar 8.5), maka akan tampil form Tambah Buku. Lihat gambar 8.7.

Untuk sementara, jangan di klik dulu tombol Simpan, karena kita baru akan membuat proses simpan data di langkah berikutnya.


Gambar 8.6 Kode token keamanan yang terbentuk dari perintah @csrf

Gambar 8.7 Form Tambah Buku


Langkah 4: Menangani Proses Simpan Data Buku

Buka file BukuController.php, tambahkan di bawah function create() sebuah function berikut:1. public function store(Request $request){2. $buku = new Buku;3. $buku->judul = $request->judul;4. $buku->penulis = $request->penulis;5. $buku->harga = $request->harga;6. $buku->tgl_terbit = $request->tgl_terbit;7. $buku->save();8. return redirect(‘/buku’);9. }

Baris 1. Membuat function store dengan Request/mengambil $request yang dikirimkan dari form.

Baris 2. Membuat variabel $buku yang nilainya diambil dari Model Buku (yang didalamnya berupa tabel buku).

Baris 3-6. Masukkan nilai input dari form ($request) ke masing-masing kolom di tabel buku ($buku).

Baris 7. Method save() adalah method untuk menyimpan data ke database.

Baris 8. Ketika proses penyimpanan data buku sudah selesai, arahkan (redirect) ke halaman data buku (/buku).

Sekarang silahkan isi data bukunya (khusus Tgl. Terbit, untuk sementara isikan menggunakan format yyyy/mm/dd), kemudian klik tombol Simpan (lihat lagi gambar 8.7), maka apabila proses simpan data berhasil akan ditampilkan hasilnya langsung di halaman data buku. Lihat gambar 8.8.

Bagi yang baru belajar Laravel, mungkin agak membingungkan mengenai alur routing dari proses menambah data ini, karena akan melewati dua kali route, yaitu route ke form tambah buku dan route ke penyimpanan data buku. Namun akan lebih mudah dipahami jika di ilustrasikan alurnya seperti pada gambar 8.9.

Pada Gambar 8.9, saat di klik tombol Tambah Buku (Request), maka Route (bukuController@create) akan mengarahkannya ke Controller (BukuController.php) pada bagian method / function create() untuk kemudian diteruskan ke View form tambah buku (create.blade.php).

Setelah form di isi datanya dan tombol Simpan di klik (Request), maka akan dikirim datanya melalui Route (bukuController@store) yang akan mengarahkannya ke Controller (BukuController.php) pada bagian method / function store() untuk


menyimpan data yang dikirimkan oleh form ke database, tepatnya tabel buku.

Ingat! Prinsip proses alur routing menambah data ini akan kita gunakan lagi saat proses mengedit data, meskipun prosesnya berbeda, namun alurnya sama.

Gambar 8.8 Hasil simpan data buku

Gambar 8.9 Alur routing proses menambah data buku


8.5 Menghapus Data BukuProses menghapus data termasuk paling mudah dibandingkan proses Read, Create dan Update. Jadi, langkah dan kodenya cukup sederhana.

Langkah 1: Membuat Route Hapus Buku

Buka file route web.php, lalu tambahkan 1 route untuk menangani hapus buku:Route::post(‘/buku/delete/{id}’, ‘BukuController@destroy’)->name(‘buku.destroy’);

Untuk route delete, kita menyertakan {id}, karena data dihapus berdasarkan id, misalnya id yang dihapus adalah 7, maka nanti alamatnya menjadi http://localhost:8000/buku/delete/7.

Langkah 2: Membuat Tombol Hapus

Tombol Hapus yang akan kita buat berupa button didalam form, karena sesuai dengan aturan di Laravel apabila kita menggunakan method delete untuk menghapus, maka kita harus menggunakan form.

Untuk membuat tombolnya, silahkan buka file index.blade.php, lalu tambahkan kolom Aksi pada Baris 15 dan tombol Hapus pada Baris 26-28, lihat teks yang ditebalkan:8. <thead>9. <tr>10. <th>No</th>11. <th>Judul Buku</th>12. <th>Penulis</th>13. <th>Harga</th>14. <th>Tgl. Terbit</th>15. <th>Aksi</th>16. </tr>17. </thead>18. <tbody>19. @foreach ($data_buku as $buku)20. <tr>21. <td>{{ ++$no }}</td>22. <td>{{ $buku->judul }}</td>23. <td>{{ $buku->penulis }}</td>24. <td>{{ $buku->harga }}</td>25. <td>{{ $buku->tgl_terbit }}</td>26. <td><form action=”{{ route(‘buku.destroy’, $buku->id) }}” method=”post”>@csrf27. <button onClick=”return confirm(‘Yakin mau dihapus?’)”>

Hapus</button></td>28. </form>


29. </tr>30. @endforeach31. </tbody>

Baris 26. Perhatikan bagian action berupa route buku.destroy (sesuai dengan nama route yang telah kita definisikan di Langkah 1. Kemudian $buku->id, artinya tombol Hapus ketika di klik juga akan mengirimkan id buku yang dihapus.

Untuk melihat hasilnya, silahkan akses http://localhost:8000/buku, maka di kolom Aksi sudah tampil tombol Hapus. Lihat gambar 8.10.

Gambar 8.10 Tombol Hapus

Untuk sementara, jangan di klik dulu tombol Hapus, karena kita belum membuat coding untuk menangani proses hapus data.

Langkah 3: Menangani Proses Hapus Data Buku

Buka file BukuController.php, tambahkan di bawah function store() sebuah function berikut:1. public function destroy($id) {


2. $buku = Buku::find($id);3. $buku->delete();4. return redirect(‘/buku’);5. }

Baris 1. destroy($id) akan menangkap id yang dikirimkan dari form, yaitu ketika tombol Hapus di klik.

Baris 2. Setelah itu, id dari form tersebut akan mencari id yang cocok di tabel buku, inilah maksud dari kode Buku::find($id).

Baris 3. Jika id yang akan dihapus ketemu di tabel buku, maka jalankan method delete() untuk menghapus datanya.

Baris 4. Ketika proses penghapusan data buku sudah selesai, arahkan (redirect) ke halaman data buku (/buku).

Sekarang coba klik tombol Hapus (lihat lagi gambar 8.10) pada salah satu data buku, misalnya Dilan, maka akan tampil kotak dialog Yakin mau dihapus? Jika di klik tombol OK, maka proses hapus data dijalankan dan akan ditampilkan hasilnya langsung di halaman data buku. Lihat gambar 8.11.

Gambar 8.11 Hasil hapus data buku


8.6 Edit dan Update Data BukuProses Edit / Update Data mirip dengan proses Tambah Data, perbedaannya terletak pada form yang sudah terisi data yang akan di edit.

Langkah 1: Membuat Route Edit dan Update Buku

Buka file route web.php, lalu tambahkan dua route untuk menangani edit dan update buku:

Route::get(‘/buku/edit/{id}’, ‘BukuController@edit’)->name(‘buku.edit’);Route::post(‘/buku/update/{id}’, ‘BukuController@update’)->name(‘buku.update’);

Penjelasannya sama dengan route menghapus buku di Langkah 1.

Langkah 2: Membuat Tombol Edit Buku

Tombol Edit Buku yang akan kita buat berupa link yang apabila di klik akan mengarahkan kita ke halaman form edit buku. Untuk membuat tombolnya, silahkan buka file index.blade.php, lalu tambahkan kode diatas tombol Hapus, lihat teks yang ditebalkan: 26. <td><form action=”{{ route(‘buku.destroy’, $buku->id) }}” method=”post”>@csrf27. <a href=”{{ route(‘buku.edit’, $buku->id) }}”>Edit</a>28. <button>Hapus</button></td>29. </form>30. </tr>31. @endforeach

Baris 27. Perhatikan bagian href berupa route buku.edit (sesuai dengan nama route yang telah kita definisikan di Langkah 1. Kemudian $buku->id, artinya tombol Edit ketika di klik juga akan mengirimkan id buku yang di edit.

Langkah 3: Membuat Form Edit Buku

Buat file baru dengan nama edit.blade.php dan simpan di folder views/buku/. Adapun isi filenya sebagai berikut:1. @extends(‘layouts.master’)2. 3. @section(‘content’)4. <div class=”container”>5. <h4>Tambah Buku</h4>6. <form method=”post”

action=”{{ route(‘buku.update’, $buku->id) }}”>7. @csrf


8. <div>Judul <input type=”text” name=”judul” value=”{{$buku->judul}}”></div>

9. <div>Penulis <input type=”text” name=”penulis”> value=”{{$buku->penulis}}”></div>

10. <div>Harga <input type=”text” name=”harga” value=”{{$buku->harga}}”></div>

11. <div>Tgl. Terbit <input type=”text” name=”tgl_terbit” value=”{{$buku->tgl_terbit}}”></div>

12. <div><button type=”submit”>Update</button>13. <a href=”/buku”>Batal</a></div>14. </form>15. </div>16. @endsection

Form edit buku hampir sama dengan form tambah buku, perbedaannya hanya pada action form (Baris 6), dimana disana ada pengiriman id buku yang di edit untuk keperluan update data di BukuController.php.

Selain itu, perhatikan Baris 8-11 ada tambahan atribut value yang berisi data dari tabel buku, dimana value yang tampil sesuai dengan data yang akan di edit.

Langkah 4: Menangani Proses Update Data Buku

Buka file BukuController.php, tambahkan di bawah function destroy() dua function berikut:1. public function edit($id){2. $buku = Buku::find($id);3. return view(‘buku.edit’, compact(‘buku’));4. }5. 6. public function update(Request $request, $id){7. $buku = Buku::find($id);8. $buku->judul = $request->judul;9. $buku->penulis = $request->penulis;10. $buku->harga = $request->harga;11. $buku->tgl_terbit = $request->tgl_terbit;12. $buku->update();13. return redirect(‘/buku’);14. }

Ada dua function yang ditambahkan, yaitu function edit() untuk mengarahkan ke view halaman form edit.blade.php jika tombol Edit di klik.

Kemudian function update(), dimana id buku yang di update di cari dulu (find), kalau sudah ketemu update sesuai dengan kolom yang ada di tabel dan terakhir jalankan fungsi update untuk mengupdate data buku ($buku->update()).

Untuk melihat hasilnya, akses http://localhost:8000/buku. Lihat gambar 8.12.


Gambar 8.12 Tombol Edit

Sekarang coba klik tombol Edit pada salah satu data buku, misalnya Bumi Manusia, maka akan tampil form edit buku seperti pada gambar 8.13.

Gambar 8.13 Form Edit Buku


Silahkan edit beberapa data, kemudian klik tombol Update. Jika proses edit/update berhasil, maka akan tampil hasilnya di halaman Data Buku. Lihat gambar 8.14.

Gambar 8.14 Hasil edit/update data buku

8.7 Memahami Route Lebih LanjutPada bagian akhir bab ini, penulis ingin memperlihatkan daftar route yang telah kita buat sepanjang pengolahan database. Caranya, buka Command Prompt, lalu masuk ke folder perpustakaan, kemudian ketikkan perintah:

php artisan route:list

Untuk lebih jelasnya, silahkan lihat gambar 8.15.


Gambar 8.15 Daftar route

Maka akan tampil daftar route yang telah dibuat di file route web.php. Dalam implementasinya, kita telah menerapkannya melalui alamat-alamat URL untuk menangani aplikasi buku. Untuk lebih jelasnya, silahkan lihat tabel berikut:

Method URL KeteranganGET http://localhost:8000/buku Menampilkan semua data bukuPOST http://localhost:8000/buku Menyimpan data buku (store)

GET http://localhost:8000/buku/create Menampilkan form untuk menambah data buku

POST http://localhost:8000/buku/delete/7 Menghapus data buku dgn id=7

GET http://localhost:8000/buku/edit/3 Menampilkan form untuk edit data buku dengan id = 3

PUT / PATCH http://localhost:8000/buku/5 Menyimpan (update) data buku

dengan id = 5

Itulah mengapa pada latihan di bab ini, kita membuat method index() untuk menampilkan data buku. Dan kita juga membuat method store() untuk menerima data dari form untuk disimpan ke database. Perhatikan pada tabel, maka URL-nya sama (http://localhost:8000/buku), namun yang membedakan adalah method-nya, yaitu GET dan POST.

Oke, pembahasan mengenai pengolahan database atau CRUD (Create Read Update Delete) di Laravel, penulis cukupkan sampai disini, dimana coding-nya masih terlihat sederhana, sehingga mudah dipelajari dan dipahami, karena ini sangat penting sebagai fondasi dasar dalam pengolahan data yang lebih kompleks. Maka di source code, penulis buat folder khusus untuk CRUD ini di folder perpustakaan.

Konsep dan implementasi LARAVEL 7 Edisi BEST PRACTICE · iii KATA PENGANTAR Sejak tahun 2016, buku...

Documents

Transcript of Konsep dan implementasi LARAVEL 7 Edisi BEST PRACTICE · iii KATA PENGANTAR Sejak tahun 2016, buku...