Laravel 7 Tutorial Membuat Blog Lengkap CMS Part #1 – Setup Frontend Application Layout

Hello, this tutorial will guide you a simple step Laravel 7 tutorial how to build complete blog with CMS, this Laravel 7 tutorial will cover step how to setup frontend application layout for Blog CMS.

0
436

Tutorial Setup Frontend Application Layout pada Laravel 7 untuk membuat blog komplete CMS – Halo teman-teman semua semoga sehat dan sukses selalu menyertai kita semua. Pada tutorial Laravel 7 kali ini saya akan mencoba berbagi bagaimana membuat blog dari tahap mengatur layout pada frontend hingga membangun backend untuk mengelola konten atau juga disebut dengan Content Managemen System (CMS). Tentu tutorial membuat blog komplet CMS dengan Laravel 7 disini akan kita sajikan secara tahap demi tahap supaya pembahasannya terkesan tidak terlalu panjang sehingga tidak membosankan.

Pada tutorial membuat blog komplet CMS dengan Laravel 7 dalam melakukan setup frontend application layout disini pembahasan akan saya bagi kedalam beberapa poin sehingga memudahkan dalam menguraikan tahapan-tahapan yang diperlukan dan kita bisa tetap fokus pada tujuan.

Adapun poin-poin untuk melakukan setup frontend application layout pada Laravel 7 untuk kepentingan membuat blog komplet CMS disini adalah sebagai berikut :

1. Install Framework Laravel 7
2. Mengatur Routing
3. Membuat Controller
4. Memasang Template Boostrap untuk Frontend Application Layout

Oke mari kita bahas stepnya, lanjut scroll yuk.

1. Install Framework Laravel 7
Untuk menginstall project Laravel 7 pada web server dapat dilakukan melalui composer dengan menjalankan perintah berikut berikut, buka jendela Terminal/ Command Prompt lalu jalankan perintah berikut :

composer create-project --prefer-dist laravel/laravel namaprojectanda "7.*"

Mengapa saya menambahkan “7.*” pada baris perintah diatas, alasannya adalah karena framework Laravel sekarang sudah pada versi Laravel 8.

Adapun jalannya instalasi framework Laravel 7 pada jendela Terminal/ Command Prompt dapat kita lihat pada gambar berikut :

Setelah proses instalasi selesai, maka selanjutnya menjalankan project Laravel 7 dengan mengetikkan perintah artisan pada jendela Terminal/ Command Prompt seperti berikut :

php artisan serve

Selanjutnya kita bisa mengakses url project Laravel 7 pada web server degan menjalankan url localhost:8000, sehingga jika berjalan dengan baik akan ditampilkan halaman Laravel seperti berikut :

2. Mengatur Routing
Selanjutnya yang perlu kita lakukan untuk melakukan setup frontend application layout pada Laravel 7 untuk kepentingan membuat blog komplete lengkap dengan CMS, adalah kita perlu mendefinisikan routing, nah untuk default routingnya kita bisa mendefinisikan pada folder “routes/web.php” dan kali ini akan saya buat seperti ini :

Route::get('/','PublikController@index')

3. Membuat Controller
Seperti kita ketahui bahwa controller digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang dibutuhkan, mengambil respon dan mengirimkannya ke view.

Untuk membuat controller dapat dilakukan melalui jendela Terminal/ Command Prompt, masih aktif pada folder project Laravel 8, lalu jalankan perintah artisan berikut :

php artisan make:controller PublikController --resource

Perintah artisan diatas akan meng-generate satu buah controller dengan nama “PublikController.php”, lalu kita lakukan modifikasi pada methodnya sehingga menjadi seperti berikut ini.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PublikController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('frontend.layout');
    }
}

4. Memasang Template Boostrap untuk Frontend Application Layout
Nah tahap selanjutnya yang perlu kita lakukan pada tutorial melakukan setup frontend application layout pada Laravel 7 untuk membuat blog komplet dengan CMS pada tahap ini adalah kita menginstall template bootstrap pada project kita, nah disini saya menggunakan template bootstrap 4.0 yang saya download dari website resminya pada url https://getbootstrap.com/docs/4.0/examples/ dan kali ini saya akan menggunakan template versi Blog sebagai frontend application layout pada project Laravel kali ini.

Selanjutnya yang perlu saya lakukan adalah menambahkan folder “frontend” pada “resources/views/frontend/layout.blade.php”, sehingga struktur pada folder resources akan terlihat seperti berikut :

Lalu membuat folder “assets” pada folder “public” sehingga struktur menjadi seperti ini :

Kemudian pada file blade “resources/views/frontend/layout.blade.php” saya lakukan sedikit modifikasi untuk memanggil library pendukung template seperti css dan js sehingga seperti ini.

Setelah semua terintegrasi sekarang kita re-fresh halaman project Laravel 7 blogcms, jika berjalan dengan baik maka akan ditampilkan halaman seperti berikut :

Selamat setup frontend application layout sudah terselesaikan, sehingga tutorial Part #1 Membuat Blog Komplet CMS dengan Laravel 7 – Setup Frontend Application Layout telah kita selesaikan.

Semoga tutorial kali ini dapat membantu dan memberi manfaat bagi siapa saja yang membutuhkan, akhir kata mohon maaf jika terdapat kekurangan dan terimakasih telah berkunjung di Jogjatech.com, terimakasih…