EBOOK Panduan Praktis Laravel 5 #Fundamental Disusun Oleh : Sugono Galih Aprianto Founder indosmartdigital.com indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental ii
Berkenalan dengan Framework Laravel Laravel merupakan framework open source yang cukup populer beberapa tahun belakangan. Sejak diluncurkan tahun 2011, membuat website dengan Laravel banyak digemari oleh berbagai komunitas programmer di Github, sebelum kemudian menyebar ke seluruh dunia. Gambar 1 : Logo Laravel Laravel sangat cocok digunakan untuk pengembangan sistem yang cukup kompleks. Jika hanya sistem sederhana dirasa tidak sebanding dengan proses pengembangannya. Cara Instalasi Laravel di Windows Laravel menggunakan Composer untuk mengelola dependensinya. Jadi, sebelum menggunakan Laravel, pastikan Kamu memiliki Composer yang terinstall di komputer Kamu. Apa itu Composer? Composer adalah dependensi manajer untuk library PHP. Kita menggunakan Composer untuk menginstal, menghapus dan memperbarui paket PHP. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 3
Gambar 2 : Composer Install Via LARAVEL Installer Buka Command Prompt lalu tujulah lokasi folder yang akan menampung folder kerja kita. Bagi pengguna XAMPP dapat menggunakan folder htdocs. Setelah berada di dalam folder, ketikkan perintah sebagai berikut: composer global require \"laravel/installer\" Tunggulah hingga proses penginstalan selesai. Setelah itu, Kita bisa mulai membuat project laravel dengan mengetikkan perintah: laravel new laravelapp laravelapp: merupakan folder kerja laravel, Kita dapat menggantinya sesuai dengan keinginan Install Via Composer Create-Project Selain menggunakan cara di atas, Kita dapat melakukan penginstalan laravel dengan mengetikkan perintah berikut pada command prompt: composer create-project --prefer-dist laravel/laravel laravelapp indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 4
Menguji Hasil Instalasi Laravel Setelah proses instalasi Laravel selesai, Kita perlu menguji apakah hasil instalasi tersebut berjalan dengan baik atau tidak. Aktifkan Apache server lewat XAMPP Control Panel Pada browser, ketik alamat http://localhost/laravelapp/public/ Atau Kita dapat menggunakan perintah: php artisan serve Kita dapat menjalankan aplikasi LARAVEL di folder manapun dengan menggunakan perintah di atas sehingga tidak harus selalu berada di dalam folder htdocs (XAMPP) Jalankan dengan localhost:8000 Dan pastikan tampilan di browser akan seperti berikut ini : Gambar 3 : Hasil Instalasi Laravel di Browser Routing dan View pada Framework Laravel Mengenal dan membuat route Setiap request yang datang pada laravel akan diarahkan melalui sebuah route. Route ini yang akan menentukan respon apa yang akan dikerjakan untuk membalas request tersebut. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 5
Halaman homepage default Laravel seperti yang ditampilkan pada Gambar 3 adalah hasil dari script yang terletak pada file laravelapp\\routes\\web.php Berikut ini adalah perintah route untuk menampilkan halaman default Laravel tersebut Gambar 4 : Perintah route untuk menampilkan halaman default Laravel Membuat Route Baru di Laravel Kita dapat menuliskan perintah baru untuk membuat route, selain mengembalikan file view sebagai response, Kita dapat mengembalikan response berupa string alias teks biasa. Buka file laravelapp\\routes\\web.php, tambahkan isinya dengan script di bawah ini : Route::get('hallo', function () { return \"Hallo, Anda sedang mengikuti ebook panduan Laravel Fundamental\"; }); Untuk melihat hasilnya, pada browser, ketikkan alamat http://localhost:8000/hallo Gambar 5 : Tampilan halaman di browser 6 indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Pada contoh berikutnya, kita akan mencoba membuat route baru dengan menampilkan halaman view. Tambahkan route baru untuk halaman “profil” dengan menambahkan script berikut: Route::get('profil', function () { return view('profil'); }); Buat file baru bernama profil.blade.php di dalam folder laravelapp\\resources\\views\\, ketikkan script berikut ini: <!DOCTYPE html> <html> <head> <title>Profil Saya</title> </head> <body> <h1>Profil Saya</h1> <p>Perkenalkan Nama saya Sugono Galih, saya seorang praktisi dibidang kreatif digital sejak tahun 2008 di Bandar Lampung, Indonesia.</p> <p>Saya memiliki pengalaman bekerja dibidang Web Development dan Digital Marketing dan saat ini aktif mengajar untuk berbagi pengalaman di beberapa program kursus, workshop dan pelatihan.</p> </body> </html> Untuk menampilkan hasilnya, ketikkan alamat http://localhost:8000/profil Gambar 6 : Tampilan halaman profil di browser Cara Menggunakan Controller pada Framework Laravel Pada pembahasan sebelumnya, Kita sudah bisa menampilkan file view langsung dari Routenya. Tetapi sebuah aplikasi tidaklah sesimpel itu, akan ada indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 7
logika dan data-data yang harus diolah terlebih dahulu. Caranya adalah dengan menggunakan Controller. Ada dua cara yang dapat digunakan untuk membuat Controller. Cara pertama, dengan membuat file controller secara manual dan tuliskan code untuk extends controller secara manual. Cara kedua, adalah dengan membuat file Controller lewat Artisan di Laravel. Kita gunakan cara yang kedua, pada latihan kali ini kita akan membuat Controller dengan nama CobaController dengan menuliskan di command prompt / terminal : php artisan make:controller CobaController Maka akan terbentuk sebuah file dengan nama CobaController.php pada folder laravelapp\\app\\Http\\Controllers\\ Gambar 7 : Isi file CobaController.php Ubah route halaman ‘profil’ pada latihan sebelumnya menjadi seperti berikut Route::get('profil', 'CobaController@profil'); Langkah selanjutnya, tambahkan fungsi / method profil() pada class CobaController seperti berikut ini: <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 8
class CobaController extends Controller { public function profil() { return view('profil'); } } Ketikkan alamat http://localhost:8000/profil, dan Kita akan mendapatkan hasil yang sama seperti pada latihan sebelumnya. Gambar 7 : Tampilan halaman profil di browser via CobaController.php Memberikan Data Controller kepada View Dalam sebuah aplikasi, sangat jarang Kita temukan isi dari file view yang bersifat statis. Pada umumnya, view dipakai untuk menampilkan data, contohnya adalah data yang berasal dari database. Namun, karena kita belum sampai pada pembahasan database, maka pada latihan kali ini kita akan mencoba menampilkan data dari variabel. Buat route baru untuk halaman biodata Route::get('biodata', 'BiodataController@index'); Buat controller baru dengan nama BiodataController.php php artisan make:controller BiodataController Ketikkan script berikut dengan memberikan method / fungsi index pada laravelapp\\app\\Http\\Controllers\\BiodataController.php <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; class BiodataController extends Controller { indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 9
public function index() { $nama = 'Sugono Galih Aprianto'; return view('biodata' , ['nama' => $nama]); } } Buat file view dengan nama biodata.blade.php pada laravelapp\\resources\\views\\ <!DOCTYPE html> <html> <head> <title>Biodata</title> </head> <body> <h1>Biodata</h1> <p>Nama : {{ $nama }}</p> </body> </html> Pada browser, ketik alamat http://localhost:8000/biodata, maka hasilnya akan seperti gambar berikut: Gambar 8 : Tampilan Halaman Biodata Memberikan Data Array Kepada View Pada contoh kali ini, Kita coba untuk memberikan data array kepada view. Tambahkan variabel data array pada BiodataController.php <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; class BiodataController extends Controller { public function index() { $nama = 'Sugono Galih Aprianto'; $materi = [\"Web Design\", \"Web Programming\", \"Digital Marketing\",\"Graphic Design\"]; return view('biodata' , ['nama' => $nama, 'materi' => $materi]); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 10
Tambahkan isi file view biodata.blade.php menjadi seperti berikut: <!DOCTYPE html> <html> <head> <title>Biodata</title> </head> <body> <h1>Biodata</h1> <p>Nama : {{ $nama }}</p> <p>Materi Mengajar</p> <ul> @foreach($materi as $datamateri) <li>{{ $datamateri }}</li> @endforeach </ul> </body> </html> Dan hasilnya akan seperti gambar berikut ini: Gambar 9 : Tampilan Halaman Biodata setelah diberi data array Sistem Templating Blade Pada Framework Laravel Sebelumnya, Kita sudah membuat view sebagai respon untuk menampilkan data. Sekarang saatnya untuk mengenal Blade. Pada latihan kali ini, Kita akan menggunakan Bootstrap untuk membuat tampilan website Kita terlihat lebih cantik. Langsung saja kita praktekkan. Persiapan Download Source Bootstrap dan Jquery di situs resminya. Mulai membuat template Buat assets template sederhana dengan bootstrap, persiapkan file bootstrap ke dalam folder Laravel. Copykan assets template yang sudah Kita siapkan ke dalam folder laravelapp\\public\\ indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 11
Gambar 10 : File bootstrap dan jquery di dalam folder public\\assets\\ Buat file Controller dengan nama BlogController pada folder laravelapp\\app\\Http\\Controllers menggunakan perintah artisan di command prompt php artisan make:controller BlogController Selanjutnya Kita ubah isi script web.php di dalam folder laravelapp\\routes\\ menjadi seperti berikut: // Sistem Template Blade Route::get('/blog', 'BlogController@home'); Route::get('/blog/tentang', 'BlogController@tentang'); Route::get('/blog/kontak', 'BlogController@kontak'); Ketikkan script pada file BlogController.php yang ada di dalam folder Laravelapp\\App\\Http\\Controllers menjadi seperti berikut: <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; class BlogController extends Controller { public function home() { return view('blog.home'); } public function tentang() { return view('blog.tentang'); } public function kontak() { return view('blog.kontak'); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 12
Menyiapkan File Master Template Buat file baru simpan dengan nama template.blade.php pada folder laravelapp\\resources\\views\\, ketikkan script berikut : @include('blog.header') @yield('intro-header') @yield('main') @include('blog.footer') Menyimpan view di dalam Sub-Folder Lokasi default untuk menyimpan file-file view adalah di dalam folder laravelapp\\resources\\views\\. Namun jika jumlah file view semakin banyak, maka akan cukup menyulitkan untuk mengaturnya. Supaya file-file view itu lebih terorganisir maka Kita dapat mengelompokkan ke dalam sub-folder khusus. Buat folder blog di dalam folder views, sehingga akan terbentuk path laravelapp\\resources\\views\\blog\\ Buat beberapa file baru dan simpan nama file blade seperti berikut: Gambar 11 : Nama file blade yang disimpan Ketikkan script berikut pada file header.blade.php <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> <meta name=\"description\" content=\"\"> <meta name=\"author\" content=\"\"> <title>@yield('title')</title> <!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> <!-- Custom styles --> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 13
<link href=\"{{ asset('assets/css/style.css') }}\" rel=\"stylesheet\"> </head> <body> <!-- Navigation --> <nav class=\"navbar navbar-expand-lg navbar-light bg-light fixed-top\" id=\"mainNav\"> <div class=\"container\"> <a class=\"navbar-brand js-scroll-trigger\" href=\"{{ url('/blog') }}\">Belajar Koding</a> <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarResponsive\" aria-controls=\"navbarResponsive\" aria- expanded=\"false\" aria-label=\"Toggle navigation\"> <span class=\"navbar-toggler-icon\"></span> </button> <div class=\"collapse navbar-collapse\" id=\"navbarResponsive\"> <ul class=\"navbar-nav ml-auto\"> <li class=\"nav-item\"> <a class=\"nav-link js-scroll-trigger\" href=\"{{ url('/blog') }}\">Home</a> </li> <li class=\"nav-item\"> <a class=\"nav-link js-scroll-trigger\" href=\"{{ url('/blog/tentang') }}\">Tentang</a> </li> <li class=\"nav-item\"> <a class=\"nav-link js-scroll-trigger\" href=\"{{ url('/blog/kontak') }}\">Kontak</a> </li> </ul> </div> </div> </nav> <!-- END : Navigation --> Ketikkan script berikut pada file footer.blade.php <!-- Footer --> <footer class=\"py-5 bg-info\"> <div class=\"container\"> <p class=\"m-0 text-center text-white\">Copyright © Belajar Koding 2019</p> </div> </footer> <!-- END : Footer --> <!-- Bootstrap core JavaScript --> <script src=\"{{ asset('assets/vendor/jquery/jquery.min.js') }}\"></script> <script src=\"{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}\"></script> </body> </html> Tuliskan script berikut pada file home.blade.php @extends('template') @section('title', 'Belajar Koding') @section('intro-header') indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 14
<!-- Header --> <header class=\"intro-header text-white\" style=\"background: url('{{ asset ('assets/images/home-bg.jpg') }}') no-repeat bottom center;\"> <div class=\"container text-center\"> <h1>Belajar Koding Mulai Dari Nol</h1> <p class=\"lead\">Bangun karir Kamu di bidang kreatif digital untuk menjadi seorang profesional</p> </div> </header> <!-- END : Header --> @endsection @section('main') <!-- Main --> <section class=\"main\"> <div class=\"container\"> <div class=\"row\"> <div class=\"col-lg-8 mx-auto\"> <h2>Halaman Home</h2> <p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </section> <!-- END : Main --> @endsection Tuliskan script berikut pada file tentang.blade.php @extends('template') @section('title', 'Tentang Kami') @section('intro-header') <!-- Header --> <header class=\"intro-header text-white\" style=\"background: url('{{ asset ('assets/images/about-bg.jpg') }}') no-repeat top center;\"> <div class=\"container text-center\"> <h1>Tentang Belajar Koding</h1> <p class=\"lead\">Contoh Halaman Tentang di Belajar Koding</p> </div> </header> <!-- END : Header --> @endsection @section('main') <!-- Main --> <section class=\"main\"> <div class=\"container\"> <div class=\"row\"> <div class=\"col-lg-8 mx-auto\"> <h2>Halaman Tentang Kami</h2> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 15
<p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </section> <!-- END : Main --> @endsection Tuliskan script berikut pada file kontak.blade.php @extends('template') @section('title', 'Kontak Kami') @section('intro-header') <!-- Header --> <header class=\"intro-header text-white\" style=\"background: url('{{ asset ('assets/images/contact-bg.jpg') }}') no-repeat center center;\"> <div class=\"container text-center\"> <h1>Kontak Belajar Koding</h1> <p class=\"lead\">Contoh Halaman Kontak di Belajar Koding</p> </div> </header> <!-- END : Header --> @endsection @section('main') <!-- Main --> <section class=\"main\"> <div class=\"container\"> <div class=\"row\"> <div class=\"col-lg-8 mx-auto\"> <h2>Kontak Kami</h2> <p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </section> <!-- END : Main --> @endsection indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 16
Untuk melihat hasil dari template yang telah kita buat, buka halaman http://localhost:8000/blog pada browser, maka akan tampil seperti gambar di bawah ini: Gambar 11 : Tampilan Halaman Home Hasil tampilan halaman http://localhost:8000/blog/tentang Gambar 12 : Tampilan Halaman Tentang 17 indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Hasil tampilan halaman http://localhost:8000/blog/kontak Gambar 13 : Tampilan Halaman Kontak Latihan CRUD (Create, Read, Update, Delete) pada Laravel dengan Query Builder Untuk memulai pembahasan CRUD di laravel, Kita akan mencoba menggunakan Query Builder. Langkah Pertama, siapkan database dan table lewat PHPMyAdmin Gambar 14 : Struktur table member dalam database dblaravel indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 18
Isikan sample data member Gambar 15 : Sample data member Buat file Controller dengan nama MemberController pada folder laravelapp\\app\\Http\\Controllers menggunakan perintah artisan di command prompt php artisan make:controller MemberController Langkah selanjutnya, Lakukan konfigurasi pada file .env. Silahkan buka file .env Bagi pengguna XAMPP, Isikan dblaravel untuk DB_DATABASE, root untuk DB_USER, dan kosongkan untuk DB_PASSWORD. Gambar 16 : Tampilan Konfigurasi file .env 19 Selanjutnya Kita tambahkan isi script web.php di dalam folder laravelapp\\routes\\ menjadi seperti berikut: // CRUD : Query Builder Route::get('/member', 'MemberController@index'); Route::get('/member/tambah', 'MemberController@tambah'); Route::post('/member/store', 'MemberController@store'); Route::get('/member/edit/{id}', 'MemberController@edit'); Route::post('/member/update', 'MemberController@update'); Route::get('/member/hapus/{id}', 'MemberController@hapus'); Route::get('/member/cari', 'MemberController@cari'); indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Tuliskan script pada file MemberController.php yang ada di dalam folder Laravelapp\\App\\Http\\Controllers menjadi seperti berikut: <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use Illuminate\\Support\\Facades\\DB; class MemberController extends Controller { public function index() { $member = DB::table('member')->paginate(10); return view('member.index', ['member' => $member]); } public function cari(Request $request) { $cari = $request->cari; $member = DB::table('member') ->where('nama', 'LIKE', \"%\".$cari.\"%\") ->paginate(); return view('member.index', ['member' => $member]); } public function tambah() { return view('member.tambah'); } public function store(Request $request) { $this->validate($request,[ 'nama' => 'required', 'pekerjaan' => 'required', 'umur' => 'required|numeric', 'alamat' => 'required' ]); DB::table('member')->insert([ 'nama' => $request->nama, 'pekerjaan' => $request->pekerjaan, 'umur' => $request->umur, 'alamat' => $request->alamat ]); return redirect('/member'); } public function edit($id) { $member = DB::table('member')->where('id', $id)->get(); return view('member.edit', ['member'=> $member]); } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 20
public function update(Request $request) { DB::table('member')->where('id', $request->id)->update([ 'nama' => $request->nama, 'pekerjaan' => $request->pekerjaan, 'umur' => $request->umur, 'alamat' => $request->alamat ]); return redirect('/member'); } public function hapus($id) { DB::table('member')->where('id', $id)->delete(); return redirect('/member'); } } Langkah berikutnya, buat sub-folder member di dalam folder laravelapp\\resources\\views Buat script halaman view berikut di dalam folder member. Halaman Tampil Data (index.blade.php) <!DOCTYPE html> <html> <head> <title>Data Member</title> <link rel=\"stylesheet\" href=\"{{ asset('/css/app.css') }}\"> <style> body { margin-top: 15px; } .pagination li { float:left; list-style-type: none; margin:5px; } </style> </head> <body> <div class=\"container\"> <div class=\"card\"> <div class=\"card-body\"> <h1>Data Member</h1> <p>Cari Data Member :</p> <form action=\"/member/cari\" mehod=\"GET\" class=\"form- inline\"> <input class=\"form-control\" type=\"text\" name=\"cari\" placeholder=\"Cari Member\" value=\"{{ old('cari') }}\"> <input class=\"btn btn-primary ml-3\" type=\"submit\" value=\"CARI\"> </form> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 21
<br> <a href=\"/member/tambah\" class=\"btn btn-primary\">+ Tambah Member Baru</a> <br> <br> <table class=\"table table-bordered table-striped\"> <tr> <th>Nama</th> <th>Pekerjaan</th> <th>Umur</th> <th>Alamat</th> <th>Opsi</th> </tr> @foreach($member as $m) <tr> <td>{{ $m->nama }}</td> <td>{{ $m->pekerjaan }}</td> <td>{{ $m->umur }}</td> <td>{{ $m->alamat }}</td> <td> <a class=\"btn btn-warning\" href=\"/member/edit/{{ $m->id }}\">Edit</a> <a class=\"btn btn-danger\" href=\"/member/hapus/{{ $m->id }}\">Hapus</a> </td> </tr> @endforeach </table> <br> Halaman : {{ $member->currentPage() }} <br> Jumlah Data : {{ $member->total() }} <br> Data per Halaman : {{ $member->perPage() }}<br> <br> {{ $member->links() }} </div> </div> </div> </body> </html> Halaman Form Tambah Data (tambah.blade.php) 22 <!DOCTYPE html> <html> <head> <title>Form Data Member</title> <link rel=\"stylesheet\" href=\"{{ asset('/css/app.css') }}\"> <style> body { margin-top: 15px; } </style> </head> <body> <div class=\"container\"> <div class=\"row\"> <div class=\"col-md-12\"> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
<div class=\"card\"> <div class=\"card-body\"> <h3>Tambah Data Member</h3> <a href=\"/member\" class=\"btn btn- primary\">Kembali</a> <br> <br> {{-- menampilkan error validasi --}} @if(count($errors) > 0) <div class=\"alert alert-danger\"> <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action=\"/member/store\" method=\"post\"> {{ csrf_field() }} <div class=\"form-group\"> <label>Nama</label> <input class=\"form-control\" type=\"text\" name=\"nama\"> </div> <div class=\"form-group\"> <label>Pekerjaan</label> <input class=\"form-control\" type=\"text\" name=\"pekerjaan\"> </div> <div class=\"form-group\"> <label>Umur</label> <input class=\"form-control\" type=\"text\" name=\"umur\"> </div> <div class=\"form-group\"> <label>Alamat</label> <textarea class=\"form-control\" name=\"alamat\"></textarea> </div> <div class=\"form-group\"> <input class=\"btn btn-primary\" type=\"submit\" value=\"Simpan\"> </div> </form> </div> </div> </div> </div> </div> </body> </html> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 23
Halaman Form Edit Data (edit.blade.php) <!DOCTYPE html> <html> <head> <title>Edit Data Member</title> <link rel=\"stylesheet\" href=\"{{ asset('/css/app.css') }}\"> <style> body { margin-top: 15px; } </style> </head> <body> <div class=\"container\"> <div class=\"row\"> <div class=\"col-md-12\"> <div class=\"card\"> <div class=\"card-body\"> <h3>Edit Member</h3> <a href=\"/member\" class=\"btn btn-primary\">Kembali</a> <br> <br> {{-- menampilkan error validasi --}} @if(count($errors) > 0) <div class=\"alert alert-danger\"> <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif @foreach($member as $m) <form action=\"/member/update\" method=\"post\"> {{ csrf_field() }} <input type=\"hidden\" name=\"id\" value=\"{{ $m- >id }}\"> <div class=\"form-group\"> <label>Nama</label> <input type=\"text\" class=\"form-control\" name=\"nama\" required=\"required\" value=\"{{ $m->nama }}\"> </div> <div class=\"form-group\"> <label>Pekerjaan</label> <input type=\"text\" class=\"form-control\" name=\"pekerjaan\" required=\"required\" value=\"{{ $m->pekerjaan }}\"> </div> <div class=\"form-group\"> <label>Umur</label> <input type=\"text\" class=\"form-control\" name=\"umur\" required=\"required\" value=\"{{ $m->umur }}\"> </div> <div class=\"form-group\"> <label>Alamat</label> <textarea class=\"form-control\" name=\"alamat\" required=\"required\">{{ $m->alamat }}</textarea> </div> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 24
<div class=\"form-group\"> <input type=\"submit\" value=\"Update\" class=\"btn btn-primary\"> </div> </form> @endforeach </div> </div> </div> </div> </div> </body> </html> Untuk melihat hasil dari script yang telah kita buat, buka halaman http://localhost:8000/member pada browser, maka akan tampil seperti gambar di bawah ini: Gambar 17 : Halaman Tampil Data Member indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 25
Hasil tampilan halaman http://localhost:8000/member/tambah Gambar 18 : Halaman Form Tambah Data Member Hasil tampilan halaman http://localhost:8000/member/edit Gambar 19 : Halaman Form Edit Data Member indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 26
Database Migration Migration merupakan fitur yang ada pada laravel yang berfungsi sebagai Version Control System untuk database. Dengan fungsi migration maka semua perubahan yang Kita lakukan database akan dicatat dalam suatu table tersendiri. Sehingga memudahkan Kita untuk dapat membatalkan / rollback perubahan pada suatu table apabila terdapat kesalahan ke kondisi semula. Langkah pertama, ketikkan perintah artisan berikut ini: php artisan make:migration create_mahasiswa_table --create=mahasiswa Buka folder laravelapp\\database\\migrations. Buka file yang namanya mengandung create_mahasiswa_table.php. Ubah script file create_mahasiswa_table tersebut menjadi seperti berikut: <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CreateMahasiswaTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('mahasiswa', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('nama'); $table->string('jurusan'); $table->text('alamat'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('mahasiswa'); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 27
Konfigurasi File AppServiceProvider.php Kita perlu melakukan sedikit perubahan pada file AppServiceProvider.php yang terletak di dalam folder laravelapp\\app\\Providers agar tidak terjadi error: Gambar 20 : Tampilan Error saat proses migration 28 Bagaimana cara untuk mengatasai jika terjadi error seperti di atas ? Lakukan perubahan pada AppServiceProvider.php, seperti berikut: <?php namespace App\\Providers; use Illuminate\\Support\\ServiceProvider; use Illuminate\\Support\\Facades\\Schema; class AppServiceProvider extends ServiceProvider { /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Schema::defaultStringLength(191); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Menjalankan Migration Pada command prompt, ketikkan perintah berikut: php artisan migrate Maka akan menghasilkan output sebagai berikut: Gambar 21 : Tampilan proses migration Gambar 22 : Tampilan Hasil migration lewat PHPMyAdmin Setelah menjalankan migration, di dalam database db laravel akan terbentuk 4 tabel, yaitu:migrations, users, password_resets dan mahasiswa Kita dapat membatalkan proses migration dengan mengetikkan perintah: php artisan migrate:rollback Maka table di dalam database akan kembali seperti kondisi semula. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 29
Memanfaatkan Seeder dan Faker di Laravel Untuk keperluan data sample pada table di dalam database, laravel menyediakan fitur yang cukup keren yaitu seeder dan faker. Untuk memulai menggunakan fitur ini, ketikkan perintah php artisan berikut pada command prompt: php artisan make:seeder MemberSeeder Maka akan terbentuk sebuah file seeder dengan nama MemberSeeder.php di dalam folder laravelapp\\database\\seeds\\MemberSeeder.php Pada contoh latihan ini, kita akan memanfaatkan Faker untuk mengisikan data Member sebanyak 50 data. Buka file MemberSeeder.php, ketikkan perintah seperti berikut: <?php use Illuminate\\Database\\Seeder; use Faker\\Factory as Faker; class MemberSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { $faker = Faker::create('id_ID'); for($i = 1; $i <= 50; $i++){ DB::table('member')->insert([ 'nama' => $faker->name, 'pekerjaan' => $faker->jobTitle, 'umur' => $faker->numberBetween(25,40), 'alamat' => $faker->address ]); } } } Jalankan perintah seeder pada command prompt seperti berikut: php artisan db:seed --class=MemberSeeder Maka data pada table member akan bertambah 50 data seperti ditampilkan pada halaman browser berikut: indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 30
Gambar 23 : Tampilan data member setelah menggunakan fungsi seeder dan faker Latihan CRUD (Create, Read, Update, Delete) pada Laravel dengan Eloquent Pada latihan kali ini, kita akan memanfaaktan fitur eloquent di laravel untuk menjalankan query-query database. Persiapkan table dengan nama pegawai. Langkah pertama, ketikkan perintah artisan berikut ini: php artisan make:migration create_pegawai_table --create=pegawai Buka folder laravelapp\\database\\migrations. Buka file yang namanya mengandung create_pegawai_table.php. Selanjutnya, ketikkan script berikut ini: <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 31
class CreatePegawaiTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('pegawai', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('nama'); $table->text('alamat'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('pegawai'); } } Jalankan migration Pada command prompt, ketikkan perintah berikut: php artisan migrate Maka akan terbentuk satu table baru bernama pegawai Gambar 24 : Struktur table pegawai Langkah selanjutnya, gunakan fitur seeder dan faker untuk membuat sample data pegawai sebanyak 50 data. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 32
Pada framework yang menganut konsep MVC, salah satu komponen yang sangat penting adalah model. Buka command prompt, ketikkan perintah berikut untuk membuat file model php artisan make:model Pegawai Buka class Model Siswa{} yaitu pada file laravelapp\\app\\Pegawai.php. Kemudian tambahkan property $table sehingga isi dari file Pegawai.php menjadi seperti berikut: <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Pegawai extends Model { protected $table = \"pegawai\"; protected $fillable = ['nama','alamat']; } Buat file Controller dengan nama MemberController pada folder laravelapp\\app\\Http\\Controllers menggunakan perintah artisan di command prompt php artisan make:controller PegawaiController Selanjutnya Kita tambahkan isi script web.php di dalam folder laravelapp\\routes\\ menjadi seperti berikut: // CRUD : Eloquent ORM Route::get('/pegawai', 'PegawaiController@index'); Route::get('/pegawai/tambah', 'PegawaiController@tambah'); Route::post('/pegawai/store', 'PegawaiController@store'); Route::get('/pegawai/edit/{id}','PegawaiController@edit'); Route::put('/pegawai/update/{id}', 'PegawaiController@update'); Route::get('/pegawai/hapus/{id}','PegawaiController@hapus'); Tuliskan script pada file PegawaiController.php yang ada di dalam folder Laravelapp\\App\\Http\\Controllers menjadi seperti berikut: <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use App\\Pegawai; class DatapegawaiController extends Controller { public function index() { indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 33
// $pegawai = Pegawai::all(); 34 $pegawai = Pegawai::paginate(5); return view('pegawai.index',['pegawai'=>$pegawai]); } public function tambah() { return view('pegawai.tambah'); } public function store(Request $request) { $this->validate($request,[ 'nama' => 'required', 'alamat' => 'required' ]); Pegawai::create([ 'nama' => $request->nama, 'alamat' => $request->alamat ]); return redirect('/pegawai'); } public function edit($id) { $pegawai = Pegawai::find($id); return view('pegawai.edit', ['pegawai'=>$pegawai]); } public function update($id, Request $request) { $this->validate($request,[ 'nama' => 'required', 'alamat' => 'required' ]); $pegawai = Pegawai::find($id); $pegawai->nama = $request->nama; $pegawai->alamat = $request->alamat; $pegawai->save(); return redirect('/pegawai'); } public function hapus($id) { $pegawai = Pegawai::find($id); $pegawai->delete(); return redirect('/pegawai'); } } Langkah berikutnya, buat sub-folder pegawai di dalam folder laravelapp\\resources\\views Buat script halaman view berikut di dalam folder pegawai. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Halaman Tampil Data (index.blade.php) <!doctype html> <html lang=\"en\"> <head> <!-- Required meta tags --> <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> <!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> <title>Tampil Data Pegawai</title> </head> <body> <div class=\"container\"> <div class=\"card mt-5\"> <div class=\"card-header text-center\"> Data Pegawai </div> <div class=\"card-body\"> <a href=\"/pegawai/tambah\" class=\"btn btn-primary\">Input Pegawai Baru</a> <br> <br> <table class=\"table table-bordered table-hover table- striped\"> <thead> <tr> <th>Nama</th> <th>Alamat</th> <th>Aksi</th> </tr> </thead> <tbody> @foreach($pegawai as $p) <tr> <td>{{ $p->nama }}</td> <td>{{ $p->alamat }}</td> <td> <a href=\"/pegawai/edit/{{ $p->id }}\" class=\"btn btn-warning\">Edit</a> <a href=\"/pegawai/hapus/{{ $p->id }}\" class=\"btn btn-danger\">Hapus</a> </td> </tr> @endforeach </tbody> </table> <br> {{ $pegawai->links() }} </div> </div> </div> <!-- Bootstrap core JavaScript --> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 35
<script src=\"{{ asset('assets/vendor/jquery/jquery.min.js') }}\"></script> <script src=\"{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}\"></script> </body> </html> Halaman Form Tambah Data (tambah.blade.php) <!doctype html> <html lang=\"en\"> <head> <!-- Required meta tags --> <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> <!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> <title>Tambah Data Pegawai</title> </head> <body> <div class=\"container\"> <div class=\"card mt-5\"> <div class=\"card-header text-center\"> Tambah Data Pegawai </div> <div class=\"card-body\"> <a href=\"/pegawai\" class=\"btn btn-primary\">Kembali</a> <br> <br> <form method=\"post\" action=\"/pegawai/store\"> {{ csrf_field() }} <div class=\"form-group\"> <label>Nama</label> <input class=\"form-control\" type=\"text\" name=\"nama\" placeholder=\"Nama Pegawai..\"> @if($errors->has('nama')) <div class=\"text-danger\"> {{ $error->first('nama') }} </div> @endif </div> <div class=\"form-group\"> <label>Alamat</label> <textarea name=\"alamat\" class=\"form-control\" placeholder=\"Alamat Pegawai..\"></textarea> @if($errors->has('alamat')) <div class=\"text-danger\"> {{ $errors->first('alamat') }} </div> @endif </div> success\"> <div class=\"form-group\"> <input type=\"submit\" value=\"Simpan\" class=\"btn btn- </div> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 36
</form> </div> </div> </div> <!-- Bootstrap core JavaScript --> <script src=\"{{ asset('assets/vendor/jquery/jquery.min.js') }}\"></script> <script src=\"{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}\"></script> </body> </html> Halaman Form Edit Data (edit.blade.php) <!doctype html> <html lang=\"en\"> <head> <!-- Required meta tags --> <meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> <!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> <title>Edit Data Pegawai</title> </head> <body> <div class=\"container\"> <div class=\"card mt-5\"> <div class=\"card-header text-center\"> Edit Data Pegawai </div> <div class=\"card-body\"> <a href=\"/pegawai\" class=\"btn btn-primary\">Kembali</a> <br> <br> <form method=\"post\" action=\"/pegawai/update/{{ $pegawai->id }}\"> {{ csrf_field() }} {{ method_field('PUT') }} <div class=\"form-group\"> <label>Nama</label> <input class=\"form-control\" type=\"text\" name=\"nama\" value=\"{{ $pegawai->nama }}\"> @if($errors->has('nama')) <div class=\"text-danger\"> {{ $error->first('nama') }} </div> @endif </div> <div class=\"form-group\"> <label>Alamat</label> <textarea name=\"alamat\" class=\"form-control\">{{ $pegawai- >alamat }}</textarea> @if($errors->has('alamat')) indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 37
<div class=\"text-danger\"> {{ $errors->first('alamat') }} </div> @endif </div> success\"> <div class=\"form-group\"> <input type=\"submit\" value=\"Update\" class=\"btn btn- </div> </form> </div> </div> </div> <!-- Bootstrap core JavaScript --> <script src=\"{{ asset('assets/vendor/jquery/jquery.min.js') }}\"></script> <script src=\"{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}\"></script> </body> </html> Untuk melihat hasil dari script yang telah kita buat, buka halaman http://localhost:8000/pegawai pada browser, maka akan tampil seperti gambar di bawah ini: Gambar 25 : Halaman Tampil Data Pegawai indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 38
Hasil tampilan halaman http://localhost:8000/pegawai/tambah Gambar 26 : Halaman Form Tambah Data Pegawai Hasil tampilan halaman http://localhost:8000/pegawai/edit Gambar 27 : Halaman Form Edit Data Pegawai indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 39
Eloquent: Relationship (One-to-One) Sejauh ini Kita hanya melakukan operasi database terbatas hanya pada satu table. Pada aplikasi sesungguhnya, tentu akan melibatkan banyak table. Table-table tersebut memiliki hubungan (relationship) satu sama lain. Hubungan itu bisa One-to-One, One-to-Many atau Many-to-Many. Pada pembahasan kali ini Kita akan fokus pada jenis hubungan yang pertama yaitu One-to-One. Contoh relasi One-to-One Buat dua buah table di dalam database dblaravel, yaitu table pengguna dan telepon Langkah pertama, ketikkan perintah artisan berikut ini: php artisan make:migration create_pengguna_table --create=pengguna Buka folder laravelapp\\database\\migrations. Buka file yang namanya mengandung create_pengguna_table.php. Selanjutnya, ketikkan script berikut ini: <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CreatePenggunaTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('pengguna', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('nama'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('pengguna'); } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 40
} Jalankan migration dengan mengetikkan perintah: php artisan migrate Langkah berikutnya, ketikkan perintah artisan berikut ini: php artisan make:migration create_telepon_table --create=telepon Lanjutkan dengan file yang namanya mengandung create_telepon_table.php. <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CreateTeleponTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('telepon', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('nomor_telepon'); $table->integer('pengguna_id'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('telepon'); } } Jalankan migration dengan mengetikkan perintah: php artisan migrate indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 41
Isikan data pengguna lewat PHPMyAdmin Gambar 28 : Sample data pengguna Isikan data telepon lewat PHPMyAdmin Gambar 29 : Sample data telepon Buat file model untuk pengguna php artisan make:model Pengguna Buka file laravelapp\\app\\Pengguna.php, tuliskan script berikut: <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Pengguna extends Model { protected $table = \"pengguna\"; public function telepon() { return $this->hasOne('App\\Telepon'); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 42
Buat file model untuk telepon php artisan make:model Telepon Buka file laravelapp\\app\\Telepon.php, tuliskan script berikut: <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Telepon extends Model { protected $table = \"telepon\"; public function pengguna() { return $this->belongsTo('App\\Pengguna'); } } Buat route baru untuk halaman pengguna Route::get('pengguna', 'PenggunaController@index'); Buat controller baru dengan nama PenggunaController.php php artisan make:controller PenggunaController Ketikkan script berikut dengan memberikan method / fungsi index pada laravelapp\\app\\Http\\Controllers\\PenggunaController.php <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use App\\Pengguna; class PenggunaController extends Controller { public function index() { // mengambil semua data pengguna $pengguna = Pengguna::all(); // return data ke view return view('pengguna.index', ['pengguna' => $pengguna]); } } Langkah berikutnya, buat sub-folder pengguna di dalam folder laravelapp\\resources\\views indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 43
Buat script halaman view berikut di dalam folder pengguna. Halaman Tampil Data (index.blade.php) <!DOCTYPE html> <html> <head> <title>Relasi One To One</title> <!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> </head> <body> <div class=\"container\"> <div class=\"card mt-5\"> <div class=\"card-body\"> <h1 class=\"text-center my-4\">Eloquent: One To One Relationship</h1> <table class=\"table table-bordered table-striped\"> <thead> <tr> <th>Pengguna</th> <th>Nomor Telepon</th> </tr> </thead> <tbody> @foreach($pengguna as $p) <tr> <td>{{ $p->nama }}</td> <td>{{ $p->telepon->nomor_telepon }}</td> </tr> @endforeach </tbody> </table> </div> </div> </div> </body> </html> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 44
Untuk melihat hasil dari script yang telah kita buat, buka halaman http://localhost:8000/pengguna pada browser, maka akan tampil seperti gambar di bawah ini: Gambar 30 : Halaman Tampil Data Pengguna Eloquent: Relationship (One-to-Many) Buat dua buah table di dalam database dblaravel, yaitu table posts dan tags Langkah pertama, ketikkan perintah artisan berikut ini: php artisan make:migration create_posts_table --create=posts Buka folder laravelapp\\database\\migrations. Buka file yang namanya mengandung create_posts_table.php. Selanjutnya, ketikkan script berikut ini: <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 45
{ 46 Schema::create('posts', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('judul'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } } Jalankan migration dengan mengetikkan perintah: php artisan migrate selanjutnya, ketikkan perintah pada command prompt php artisan make:migration create_tags_table --create=tags Lanjutkan dengan menulis script pada file yang namanya mengandung create_tags_table.php. <?php use Illuminate\\Support\\Facades\\Schema; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CreateTagsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('tags', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('tag'); $table->biginteger('post_id')->unsigned(); $table->foreign('post_id') ->references('id')->on('posts') ->onDelete('cascade'); $table->timestamps(); }); } /** * Reverse the migrations. indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
* * @return void */ public function down() { Schema::table('tags',function (Blueprint $table) { $table->dropForeign('tags_post_id_foreign'); }); Schema::dropIfExists('tags'); } } Jalankan kembali migration dengan mengetikkan perintah: php artisan migrate Isikan data posts lewat PHPMyAdmin Gambar 31 : Sample data posts indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 47
Isikan data tags lewat PHPMyAdmin Gambar 32 : Sample data tags 48 Buat file model untuk posts php artisan make:model Post Buka file laravelapp\\app\\Post.php, tuliskan script berikut: <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Post extends Model { public function tags(){ return $this->hasMany('App\\Tag'); } } indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
Buat file model untuk tags 49 php artisan make:model Tag Buka file laravelapp\\app\\Tag.php, tuliskan script berikut: <?php namespace App; use Illuminate\\Database\\Eloquent\\Model; class Tag extends Model { public function posts(){ return $this->belongsTo('App\\Post'); } } Buat route baru untuk halaman posts Route::get('posts', 'PostController@index'); Buat controller baru dengan nama PenggunaController.php php artisan make:controller PostController Ketikkan script berikut dengan memberikan method / fungsi index pada laravelapp\\app\\Http\\Controllers\\PostController.php <?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use App\\Post; class PostController extends Controller { public function index(){ $posts = Post::all(); return view('posts.index',['posts' => $posts]); } } Langkah berikutnya, buat sub-folder posts di dalam folder laravelapp\\resources\\views Buat script halaman view berikut di dalam folder posts. Halaman Tampil Data (index.blade.php) <!DOCTYPE html> <html> <head> <title>Relasi One To Many</title> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental
<!-- Bootstrap core CSS --> <link href=\"{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}\" rel=\"stylesheet\"> </head> <body> <div class=\"container\"> <div class=\"card mt-5\"> <div class=\"card-body\"> <h1 class=\"text-center my-4\">Eloquent: One To Many Relationship</h1> <table class=\"table table-bordered table-striped\"> <thead> <tr> <th>Judul Article</th> <th>Tag</th> <th width=\"15%\" class=\"text-center\">Jumlah Tag</th> </tr> </thead> <tbody> @foreach($posts as $post) <tr> <td>{{ $post->judul }}</td> <td> @foreach($post->tags as $tag) {{$tag->tag}}, @endforeach </td> <td class=\"text-center\">{{ $post->tags- >count() }}</td> </tr> @endforeach </tbody> </table> </div> </div> </div> </body> </html> indosmartdigital.com | Panduan Praktis Laravel 5 #Fundamental 50
Search
