Show
Cara Mudah Memasang Template Bootstrap di Laravel. Assalamualaikum, halo semua, kembali lagi di sahretech. Laravel memiliki banyak sekali fitur yang mempermudah kita dalam membangun sebuah website, salah satu fitur yang akan kita bahas kali ini adalah fitur templating yang akan kita implementasikan untuk memasang template boostrap Penasaran?. Ayo ikuti tutorialnya berikut ini!. Sekarang membangun website semakin mudah dan menyenangkan, banyak sekali template gratis yang dapat diunduh dan dimanfaatkan untuk membangun berbagai macam jenis website. Mungkin sebagian dari kita sudah pernah menggunakan template-template tersebut dan dikombinasikan dengan project php native, tapi pertanyaannya sekarang, bagaimana jika template-template tersebut diimplementasikan di framework laravel?. Apakah sulit?. Jawabannnya mudah sekali, kita akan menggunakan fitur templating yang telah disediakan oleh laravel dan untuk templatenya sendiri, kita akan menggunakan AdminLTE 3 kali ini. Baca Juga:
Sebelum masuk ke pembahasan, disarankan kalian telah mengenal laravel terlebih dahulu. Sedangkan untuk editor yang saya pakai adalah visual studio code. Kalian juga dapat membaca dokumentasi tentang templating laravel di situs resminya, karena memang artikel kali ini akan membahas fitur templating laravel. Cara Pasang Template AdminLTE 3 di Laravel2. Download template AdminLTE 3 berikut ini download kemudian diekstrak. 3. Lalu Pindahkan folder AdminLTE 3 ke dalam folder public projek laravel, lalu ubah namanya menjadi admin.
4. Buka folder public/admin/pages/examples/blank.html lalu copy isinya. 5. Buat file baru dengan nama template.blade.php di dalam folder views, lalu paste script yang telah dicopy dari file blank.html sebelumnya. 6. Masih dalam file template.blade.php, tambahkan kode @yield('content) pada bagian yang ditandai dengan kotak merah, lalu cut bagian card pada bagian yang ditandai kotak merah pada gambar berikut ini. Sedikit penjelasan, @yield('content') adalah bagian yang akan diisi dengan konten dinamis di setiap halaman yang berbeda nantinya.
7. Kemudian kita perlu memperbaiki setiap path yang mengarah ke file lain. untuk itu kita perlu menambahkan {{ asset('...') }, bagaimana cara menggunakannya?. Lihat gambar berikut ini
8. Template bootstrap sudah berhasil dipasang di projek laravel kalian, langkah selanjutnya adalah menggunakan template tadi ke halaman atau file-file lainnya. Buka file welcome.blade.php lalu hapus isinya, kemudian tambahkan @extends('template') untuk menggunakan template yang telah kita buat sebelumnya, lalu tambahkan @section('content') dan jangan lupa juga untuk menambah @endsection. Langkah terakhir paste script yang telah kalian cut tadi di antara @section('content') dan @endsection.
9. Jika langkah-langkah di atas sudah benar, selanjutnya jalankan php artisan dan lihat hasilnya di browser kalian masing-masing. Hasilnya akan tampak seperti gambar di bawah ini.
Sekian tutorial cara memasang template bootstrap di laravel, semoga bermanfaat, dan bagi yang merasa kesulitan, ingin bertanya, atau punya kritik dan saran silahkan tinggalkan komentar di bawah ini. Sampai jumpa di tutorial pemrograman menarik lainnya.:) Laravel adalah salah satu framework terbaik untuk membuat blog. Dengan framework gratis ini, Anda bisa lebih mudah mengembangkan blog dengan performa terbaik. Sebab, Laravel memiliki layout yang ringan dan dibekali banyaknya library yang siap digunakan. Lalu, bagaimana cara membuat blog dengan Laravel? Di artikel ini, kami akan menjelaskan tahapan cara membuat blog Laravel. Mulai dari apa saja aplikasi yang diperlukan dan berbagai konfigurasi pada blog tersebut. Penasaran? Mari mulai dengan tahap persiapan. Cara Membuat Blog dengan LaravelUntuk membuat laravel blog, inilah beberapa langkah yang perlu Anda lakukan: 1. Melakukan Instalasi LaravelSebagai langkah awal, Anda perlu melakukan instalasi Laravel. Ada beberapa cara instalasi Laravel, bisa melalui VPS, cPanel, dan di komputer. Nah, di tutorial kali ini kami akan menggunakan Laravel di komputer menggunakan sistem operasi Windows. Setelah Laravel terinstal, coba buka foldernya dengan text editor favorit Anda. Di panduan ini, kami menggunakan Visual Studio Code. Pada terminal Visual Studio Code, ketikkan php artisan serve seperti contoh berikut: Anda akan mendapatkan alamat IP untuk Laravel blog Anda. Cobalah ketikkan pada browser untuk mendapatkan hasil seperti di bawah ini: 2. Melakukan Konfigurasi DatabaseSetelah berhasil menginstall Laravel, Anda perlu melakukan berbagai konfigurasi database. Namun, sebelumnya Anda perlu membuat database terlebih dahulu dengan mengetikkan localhost/phpmyadmin di web browser. Ketika melihat tampilan seperti di atas, isikan nama database yang diinginkan, contohnya belajar-laravel, lalu klik Create. Setelah berhasil, nama database akan muncul di daftar seperti contoh berikut: Selanjutnya, Anda bisa menghubungkan Laravel dengan database. Pertama, Anda bisa mencari file .env di dalam folder Laravel. Setelah menemukan file .env, Anda bisa mengubah kode:
Menjadi seperti ini:
Setelah itu simpan perubahan yang dilakukan. Laravel blog Anda sudah terhubung dengan database. Nah, kadang DB_USERNAME dan DB_PASSWORD memiliki konfigurasi yang berbeda. Jadi, sesuaikanlah dengan konfigurasi web server Anda 3. Menghubungkan Laravel dengan BootstrapLangkah selanjutnya adalah menyambungkan Laravel dengan Bootstrap. Sebagai sebuah framework CSS, Bootstrap dapat membantu Anda membuat tampilan website yang menarik dengan mudah. Secara default, Laravel telah memiliki file bootstrap di dalam folder public/css dan public/js. Jadi, tak perlu mendownloadnya secara khusus terlebih dahulu. Untuk membuat halaman Laravel blog Anda terhubung dengan bootstrap, Anda perlu membuat file bernama master.blade.php di dalam folder resources/view. Dengan begitu, strukturnya akan menjadi seperti ini: Setelah itu, Anda bisa isikan kode di bawah ini pada file master.blade.php:
Kemudian, Anda bisa masuk ke routes.php dan tambahkan perintah di bawah:
Dengan begitu, kode pada routes.php akan menjadi seperti ini:
Untuk menguji apakah Laravel blog Anda berhasil terhubung dengan Bootstrap, ketikkan perintah php artisan serve pada menu Terminal. Setelah itu, silakan mengakses 127.0.0.1:8000/test dan pastikan hasilnya seperti di bawah ini: 4. Membuat Tabel ArtikelBerikutnya, Anda bisa membuat tabel bernama artikel yang berfungsi untuk menyimpan data artikel blog Anda. Caranya, ketikkan perintah di bawah ini pada terminal:
Hasilnya, file create_artikel_table.php akan ditemukan di dalam folder database/migrations. Bukalah file tersebut dan isi dengan kode di bawah:
Setelah itu, Anda bisa ketikkan kode berikut pada terminal untuk membuat tabel artikel:
Tabel artikel yang baru dibuat akan terdapat pada localhost/phpmyadmin. 5. Membuat Halaman Tambah ArtikelSetelah membuat tabel artikel, saatnya membuat halaman form untuk menambahkan artikel Laravel blog Anda. Caranya, buatlah file bernama add.blade.php pada folder resources/view.
Setelah itu, Anda bisa mencari file master.blade.php pada folder resources/views dan ubah kode menjadi seperti ini:
Jangan lupa atur routingnya supaya form yang baru saja Anda buat dapat diakses. Caranya adalah dengan membuka file web.php yang ada di dalam folder routes dan mengubah kodenya menjadi seperti ini:
Untuk melihat tampilan halaman tambah artikel, Anda bisa membuka 127.0.0.1:8000/add. Halaman blog Anda akan terlihat seperti gambar di bawah: Namun, Anda belum bisa mengirim artikel ke database karena masih perlu melakukan pengaturan pada controller. Sebelum membuat controller, Anda perlu mengatur routing untuk mengarahkan data artikel yang dikirimkan. Silakan untuk membuka file web.php pada folder routes. Kemudian, tambahkan kode di bawah ini:
Setelah itu, Anda bisa membuat controller dengan mengetikkan perintah php artisan make:controller ArtikelController pada Terminal. Jika berhasil, file ArtikelController.php akan berada pada folder app/Http/Controller. Selanjutnya, bukalah file ArtikelController.php dan ubah kode menjadi seperti ini:
Setelah itu, silakan buat routing untuk mengarahkan pengguna setelah berhasil memasukkan data. Anda bisa membuka file web.php pada folder routes. Kemudian, ubah kode menjadi seperti ini:
Selanjutnya, Anda bisa membuka 127.0.0.1:8000/add dan mencoba memasukkan artikel blog. Jika artikel berhasil tersimpan, akan muncul tampilan berikut: Untuk memastikannya, Anda bisa membuka localhost/phpmyadmin pada tabel artikel. Artikel blog Anda sudah ada dalam daftar, bukan? 6. Menampilkan Seluruh ArtikelBagaimana cara menampilkan artikel yang sudah dibuat? Anda bisa membuka file ArtikelController.php pada folder app/Http/Controller kemudian ganti kode menjadi seperti di bawah:
Setelah itu, Anda bisa membuat file bernama show.blade.php pada folder resources/views dan isikan kode di bawah:
Kemudian, Anda bisa membuka file master.blade.php pada folder resources/views dan letakkan kode @yield(‘header’) sebelum kode <div class=”row”>. Setelah itu, buka halaman 127.0.0.1/8000 untuk mendapatkan tampilan sebagai berikut: 7. Menampilkan Detail ArtikelDi blog Laravel tersebut, Anda sudah memiliki opsi Tambah Artikel tapi belum bisa untuk klik Baca Artikel. Jadi, Anda perlu membuat fitur untuk membaca artikel terlebih dahulu. Caranya, bukalah file ArtikelController.php dan ubah kode di dalamnya menjadi seperti ini:
Langkah di atas adalah untuk membuat controller agar dapat mengambil data artikel dari model berdasarkan ID pada URL. Nah, untuk bisa membuat tampilan untuk detail artikelnya, buatlah file bernama detail.blade.php di dalam folder resources/views dan masukkan kode di bawah:
Langkah di atas adalah untuk membuat tampilan yang akan menampilkan detail artikel dari database. Selanjutnya, Anda perlu mengatur routing untuk dapat mengakses halaman tersebut. Caranya adalah dengan membuka file web.php pada folder routes dan ubahlah kode di dalam web.php menjadi seperti ini:
Anda bisa mencoba klik Baca Artikel untuk mendapatkan tampilan seperti di bawah ini: 8. Membuat Halaman AdminUntuk dapat mengatur hak akses di blog Laravel tersebut, Anda perlu membuat halaman admin. Hal ini untuk mencegah pengguna yang tidak berhak menghapus atau mengedit artikel blog Anda. Langkah pertama, bukalah file ArtikelController.php pada folder app/Http/Controllers dan ubah kode menjadi seperti ini:
Setelah itu, Anda bisa membuat file bernama adminshow.blade.php yang akan menampilkan seluruh artikel dari sisi admin. Ubah kodenya menjadi sebagai berikut:
Jangan lupa, Anda perlu membuat routing supaya halaman dapat ditampilkan dengan cara membuka file web.php pada folder routes dan mengubah kodenya menjadi seperti ini:
Selanjutnya akses 127.0.0.1:8000/admin untuk membuka halaman admin Anda: Meskipun sudah memiliki halaman admin, mengedit dan menghapus artikel masih belum dapat dilakukan. Jadi, Anda perlu menambahkan fiturnya terlebih dahulu. 9. Membuat Fitur Edit ArtikelUntuk dapat membuat fitur edit, Anda perlu menambahkan kode berikut pada file web.php yang ada di dalam folder routes.
Setelah itu, tambahkan kode di bawah pada ArtikelController.php di dalam folder app/Http/Controller:
Setelah berhasil mengambil data artikel dari model, Anda bisa buat file edit.blade.php pada folder resources/views dan isikan kode ini:
Selanjutnya, bukalah file ArtikelController.php dan ubahlah kode di dalamnya menjadi:
Jangan lupa untuk mengatur routingnya pada file web.php dengan mengubah kodenya menjadi:
Cobalah untuk mengedit salah satu artikel dan simpan perubahannya. Jika berhasil, Anda akan mendapatkan notifikasi seperti contoh berikut: 10. Membuat Fitur Hapus ArtikelUntuk membuat fitur hapus artikel di blog Laravel, inilah langkah yang perlu dilakukan. Pertama, bukalah file ArtikelController.php pada folder app/Http/Controllers dan tambahkan potongan kode di bawah ini:
Selanjutnya, silakan menambahkan potongan kode di bawah pada file web.php yang ada di folder routes.
Setelah langkah di atas, cobalah menghapus salah satu artikel yang Anda inginkan. Jika berhasil, inilah tampilannya: 11. Membuat Halaman Register dan LoginAnda tentu tidak ingin siapapun dapat mengakses halaman admin, bukan? Untuk itu, Anda perlu membuat halaman register dan login untuk mengakses halaman admin. Pada localhost/phpmyadmin sudah terdapat tabel users. Jadi, Anda bisa memanfaatkan tabel tersebut untuk menampung data user yang dapat mengelola artikel. Langkah berikutnya adalah membuat halaman register untuk mendaftarkan admin yang akan mengelola artikel. Caranya, ketikkan perintah php artisan make:auth pada menu Terminal. Lalu, ketikkan juga php artisan serve. Setelah itu, Anda bisa mengakses 127.0.0.1:8000/login sebagai halaman login: Akses juga 127.0.0.1:8000/register sebagai halaman register blog Laravel Anda: Anda juga bisa langsung mendaftar dan login tanpa perlu mengatur controller lagi. Selain itu, Anda juga telah memiliki fitur logout secara default dengan menggunakan auth. 12. Mengarahkan Halaman Setelah LoginSetelah login, tentunya akan lebih baik jika Anda diarahkan ke halaman admin. Nah, untuk mengaturnya, Anda bisa membuka file LoginController.php pada folder app/Http/Controllers/Auth dan gantilah dengan kode di bawah:
Cobalah melakukan login dan Anda akan diarahkan ke halaman seperti di bawah ini: 13. Membatasi Akses Halaman AdminMeskipun telah memiliki halaman login untuk admin, sebenarnya Anda masih bisa mengaksesnya tanpa harus login. Oleh karena itu, penting untuk membatasi hak akses halaman admin agar pengguna yang belum login akan diarahkan ke halaman login. Langkah yang perlu dilakukan adalah membuka file ArtikelController.php pada folder app/Http/Controller dan mengganti kode menjadi:
Setelah itu, cobalah mengakses halaman 127.0.0.1:8000/admin tanpa login. Anda tentu akan diarahkan ke halaman login terlebih dahulu. Dengan begitu, blog Anda menjadi lebih aman, bukan? 14. Mempermudah NavigasiPenting untuk mempermudah navigasi pada blog Laravel Anda. Mulai dari navigasi logout hingga melihat blog. Tanpa bantuan navigasi, admin harus mengakses 127.0.0.1:8000 melalui URL untuk melihat blog. Apa yang perlu dilakukan? Pertama, Anda bisa membuat navigasi dari sisi admin dan sisi pengunjung supaya dapat login dengan mudah. Caranya, bukalah file master.blade.php pada folder resources/views dan ubahlah kode di dalamnya menjadi seperti ini:
Setelah itu, Anda bisa mencoba mengakses halaman admin dan akan melihat tampilan seperti ini: Sedangkan pada halaman pengunjung, Anda akan melihat tampilan sebagai berikut: 15. Mengonlinekan BlogNah, blog Anda sudah jadi nih. Sekarang saatnya mengonlinekan blog tersebut. Untuk melakukannya, Anda bisa beli domain dengan harga murah dan juga memanfaatkan layanan web hosting Niagahoster. Setelah keduanya aktif, Anda bisa memulai beberapa pengaturan dasar. Pertama, Anda bisa menambahkan file index.php di dalam folder laravel Anda. Kemudian, isikan dengan kode di bawah ini:
Berikut struktur foldernya: Setelah itu, compress folder yang berisi projek laravel blog. Kemudian, Anda bisa membuka halaman cPanel hosting Anda. Setelah berhasil login, Anda bisa mencari menu File Manager pada tab Files. Setelah itu, Anda bisa cari folder bernama public_html dan upload projek laravel blog Anda yang telah dikompres di dalamnya. Jangan lupa untuk mengekstraknya setelah mengupload. Kemudian, Anda bisa mencari menu MySQL Database Wizard pada tab Databases. Di situ, Anda bisa membuat database dan username untuk database tersebut. Setelah itu, Anda akan mendapatkan nama database, username, dan password. Data tersebut akan digunakan untuk menghubungkan database dengan website Anda. Selanjutnya, silakan untuk masuk ke dalam folder projek tersebut dan cari file bernama .env. Setelah itu, Anda bisa mengubah konfigurasi database seperti username, password, maupun nama database pada file .env. Sampai sini, Anda telah berhasil mengonlinekan Laravel blog Anda. Dengan demikian, blog Anda dapat diakses oleh jutaan orang. Anda bisa mengeceknya dengan mengetikkan domain Anda pada web browser. Baca Juga: 13+ CMS Laravel Terbaik untuk Developer Siap Go Online dengan Laravel Blog Anda?Membuat blog dengan Laravel ternyata tidak sesulit yang Anda bayangkan, bukan? Meskipun tahapannya cukup banyak, Anda telah belajar cara membuat blog Laravel secara benar. Di artikel ini, kami sudah memberikan contoh kode yang bisa digunakan. Namun, Anda bisa mengubahnya sesuai dengan kebutuhan Anda. Selain itu, jangan lupa untuk mengonlinekan blog Anda, ya. Jadi, akan banyak orang yang mengetahuinya dan mengaksesnya dari berbagai penjuru dunia. Semoga informasi kami bermanfaat dan jika masih ada pertanyaan, Anda bisa bertanya di kolom komentar. Baca Juga: Benarkah PHP Laravel Framework Kian Diminati? |