Assalamualaikum wr.wb
Ini adalah seri lanjutan dari Belajar membuat CRUD dengan Laravel 7. Sesuai list kali ini kita akan belajar bagaimana cara integrasi template pada laravel.
Disini saya menggunakan ela-Admin untuk templatenya, teman-teman juga bebas mau menggunakan template apa saja mau Admin LTE atau Klorofil itu terserah teman-teman saja.
Struktur folder template ela-Admin kurang lebih seperti ini.
Karena disini kita akan membutuhkan css dan jsnya jadi kita copy saja folder assets dan juga images mungkin kita akan membutuhkannya nanti.
Paste-kan pada projek kita di folder public.
Kita jalankan laravelnya dan buka halaman peserta.
Kita akan membuat 1 buah file yang mana file ini adalah master untuk halaman kita nantinya, buat folder layouts dan file master.blade.php teman-teman bebas mau menamakan folder atau file nya apa cuma kalau menurut saya ikuti saja terlebih dahulu untuk penamaannya.
Buka file index.html dari template yang akan kita gunakan, kalau ada mending pakai yang blank-pages.html cuma dalam template ini tidak ada jadi kita gunakan yang index.html saja.
Paste-kan di file master.blade.php nah disini kita perlu memanggil file css dan jsnya, gimana cara manggilnya? teman-teman cukup tambahkan {{asset('nama_folder/file_yang_akan_di_panggil') }} kalau di framework codeigniter biasanya kita gunakan <?= base_url()/nama_folder/file ?>.
Untuk mengecek apakah templatenya sudah berhasil di pasang atau ada error kita gunakan saja routing localhost:8000 atau halaman awal aplikasi kita dan tentunya kita ubah terlebih dahulu routingnya.
Nah disini kita telah berhasil integrasi templatenya.
Kita akan coba integrasikan ke halaman peserta yang kita buat sebelumnya, kita hapus saja terlebih dahulu semua kodingan yang ada pada file index.blade.php-nya.
Kemudian kita panggil saja file masternya dengan menggunakan @extends('nama_folder.nama_file')
Kita coba buka halaman pesertanya.
*Halaman peserta sudah berubah menjadi halaman index dari template ela-Admin.
Untuk mempermudah templating kedepannya kita akan membagi lagi kodingan diantaranya navbar/header, sidebar dan content.
Pertama kita akan membagi halaman untuk sidebar teman-teman bisa cut saja tag left-panel/sidebarnya.
Pada laravel 7 terdapat fitur baru yang bernama components kalau teman-teman sudah belajar VueJs teman-teman pasti sudah familiar dengan fitur yang satu ini.
Kita buat folder baru di views dengan nama components kemudian buat file baru yang bernama sidebar.blade.php yang mana file ini kita akan isikan kodingan dari tag sidebar yang kita cut tadi, begitu pula cut bagian headernya dan buat file baru yang bernama header.blade.php pada folder components.
Kita coba refresh halaman pesertanya, untuk melihat bagian mana saja yang hilang disini kita bisa melihat bahwa menu di sidebarnya tidak ada.
Note : Saya lupa ss bagian header yang hilang jadi saya ganti saja menjadi bagian sidebar, semoga teman-teman mengerti pada penjelasan ini.
Lalu bagaimana cara agar menampilkan kembali bagian yang kita hilangkan tadi? Nah disini teman-teman bisa menggunakan @include('nama_folder.nama_file') atau menggunakan components. Untuk menampilkannya lewat components teman-teman tinggal panggil saja dengan menggunakan tag <x-nama_file_yang_akan_di_panggil?</x-...> seperti gambar dibawah ini.
Note :
Jika menggunakan components masukkan file yang akan di panggil pada folder components.
Note :
Abaikan terlebih dahulu kodingan @yield('content').
Jika kita refresh halaman pesertanya maka header dan sidebar tadi akan muncul kembali, yang artinya kita telah berhasil memanggil file menggunakan components.
Nah untuk menjadikan konten-nya dinamis maka kita akan gunakan @yield('nama_yield') silahkan teman-teman hapus saja kodingan yang berada di tag contentnya dan ganti menjadi seperti ini.
Coba kita refresh kembali halaman pesertanya, Yups tampilan contentnya sudah kosong dan tidak ada error.
Teman-teman kembali lagi ke index.blade.phpnya dan tambahkan @section('nama_yield') kemudian jangan lupa untuk menutup @sectionnya menutup section bisa di gunakan dengan 2 cara yang pertama menggunakan @endsection dan yang kedua @stop teman-teman bebas bisa pakai yang mana saja namun saya selalu menggunakan @stop karena lebih pendek dalam penulisannya.
Kita coba tambahkan tag h1 di dalam section('content') kemudian refresh kembali halaman pesertanya.
Nah tulisan yang kita buat tadi telah tampil di dalam tag contentnya. Jadi jika kita ingin menambahkan fitur baru misal dan tampilannya semuanya sama maka kita tinggal pakai saja @extends dan @sectionnya dari master.
Sampai disini juga kita telah selesai mengintegrasikan template pada projek laravel kita. Namun saya akan mengedit beberapa halaman untuk projek kita kedepannya.
Untuk pertama saya akan hapus beberapa menu pada bagian menu, silahkan teman-teman buka sidebar.blade.php nya dan hapus beberapa menu seperti gambar di bawah ini.
Setelah dihapus tambahkan 2 menu yang mana tagnya hasil copy-an dari tag dashboard.
Refresh kembali halaman pesertanya.
Ubah ikon dari menu yang telah kita buat.
*Ikon telah berubah
Dan sekarang saya akan ubah tulisan pada footernya, untuk footer teman-teman bebas mau di pisahkan atau tidak sesuai kebutuhan saja.
Hapus 2 columnya dan tambahkan 1 colum dengan text tampil di tengah.
*{{ date('Y') }} menampilkan tahun saat ini, cara simple daripada pake js panjang UwU
* Tampilan setelah footernya di edit
Tambahkan routing peserta.index pada a href data peserta yang berada di sidebar.blade.php
Setelah di refresh teman-teman bisa melihat di pojok kiri bawah halaman "localhost:8000/peserta" yang mana menu data peserta telah terhubung ke routing peserta.index.
Setelah penyetingan templatenya selesai kita akan tampilkan kembali data pesertanya menggunakan data table yang sebelumnya kita menggunakan table biasa. Data table ini memiliki banyak kelebihan diantaranya paginate, realtime search dan show entris. Yang mana beberapa fitur ini sangat bermanfaat untuk kita, jadi kita tidak perlu lagi membuat pagination dan search pada tabel.
Untuk melihat seperti apa itu data table? teman-teman bisa buka saja halaman data table nya di template yang teman-teman pakai. (Menu data table biasanya terletak pada dropdown menu table)
Disini saya tambahkan yield lagi untuk menambahkan link css dari halaman tertentu.
*Tambahkanjuga untuk js nya.
Teman-teman bisa menambahkan @section('css') dan @section('footer') untuk menambahkan file css dan js yang berada di halaman peserta. Kenapa harus di buat seperti ini? Ya sebenarnya kita juga bisa menambahkan file css dan js data table di file master namun kalau ditambahkannya di file master file itu (css dan js data table) akan ke reload terus meskipun kita tidak mengakses halaman peserta dan akibatnya akan mempengaruhi kecepatan suatu website.Untuk cara ini css dan js data tablenya hanya akan direload saat kita mengakses halaman pesertanya saja. - Semoga teman-teman paham akan penjelasannya.
Untuk table datanya teman-teman bisa menuliskannya seperti ini.
Untuk melihat datanya teman-teman bisa mereload halaman pesertanya kembali, jika tampilan data tabel teman-teman seperti ini teman-teman bisa perbaiki sendiri tampilannya mungkin ada beberapa file css/js yang belum di panggil atau ada tag yang kelewat.
Sekian untuk tutorial kali ini, semoga bermanfaat untuk teman-teman umumnya dan semoga tutorialnya mudah untuk dipahami. Jika teman-teman mengalami error atau ada yang kurang paham bisa tanyakan di kolom komentar.
Apa selanjutnya?
- Membuat login ingat saya - (Coming Soon!)
Mimin lagi bagi-bagi source code gratis nih - Source Code Gratis!
Note :
Jika terdapat kesalahan dalam pengertian, silahkan teman-teman memberikan komentar yang membangun.
0 Komentar