Laravel 7 Tutorial Membuat Blog Lengkap CMS Part #4 – Setup Menu CMS in Backend Application Layout

0
229

Hello Laravel lover’s, after making tutorial setup dynamic blade templating for backend application layout in tutorial Laravel 7 part #3, now we will guide creating menu for CMS Laravel backend, this simple and easy way tutorial will guve you a simple step to create menu in backend Laravel application.

Halo Laravel lover’s, setelah dalam tutorial sebelumnya kita menerapkan teknik blade templating pada backend Laravel, sekarang tutorial Laravel 7 ini akan mencoba berbagi bagaimana membuat menu sederhana dengan cara yang sederhana (for beginner) pada backend aplikasi untuk kebutuhan manajemen konten (CMS) untuk blog dengan framework Laravel 7.

Adapun pembahasannya akan saya bagi menjadi kedalam beberapa point seperti berikut :

1. Modifikasi File Blade Menu
2. Menambahkan file blade modul berita dan kategori berita
3. Menambahkan Controller Berita dan Kategori Berita
4. Menambahkan Routing

Oke langsung saja kita kupas step step nya seperti berikut, lanjut scroll nya ya sobat.

1. Modifikasi File Blade Menu
Pertama buka file blade “menu.blade.php” yang telah dibuat pada folder “resources /views/backend/menu.blade.php”, lalu lakukan modifikasi dengan membuang tag-tag html yang tidak dibutuhkan dan menyisakan untuk membuat menu. Pada contoh ini saya akan membuat menu berita dan kategori berita, sehingga menjadi seperti berikut :

<ul class="sidebar-menu">
  <li class="header">MAIN NAVIGATION</li>
  <li class="treeview">
    <a href="#">
      <i class="fa fa-laptop"></i>
      <span>Berita</span>
      <i class="fa fa-angle-left pull-right"></i>
    </a>
    <ul class="treeview-menu">
      <li><a href="{{route('berita.index')}}"><i class="fa fa-circle-o"></i> Berita</a></li>
      <li><a href="{{route('kategori.index')}}"><i class="fa fa-circle-o"></i> Kategori</a></li>
    </ul>
  </li>
</ul>

2. Menambahkan file blade modul berita dan kategori berita
Setelah melakukan modifikasi file blade menu, tahap selanjutnya adalah kita membuat modul berita dan kategori berita, untuk kebutuhan ini saya menambahkan folder berita dan folder kategori pada folder “resources/views/”, lalu saya menambahkan beberapa file blade untuk kebutuhan CRUD CMS Laravel 7 ini, sehingga setelah semua dibuat strukturnya akan menjadi seperti berikut :

Laravel 7 CRUD modul berita kategori
Laravel 7 CRUD modul berita kategori

Dan berikut adalah proses yang saya lakukan melalui jendela Terminal/ Command Prompt :

Langkah berikutnya adalah kita lakukan modifikasi file blade “index.blade.php” pada folder berita dan juga pada folder kategori, sehingga seperti berikut :

resources/views/berita/index.blade.php

@extends('backend.layout')
@section('content')
<section class="content">
    <div class="box">
                <div class="box-header">
                  <h3 class="box-title">{{!empty($title)?$title:''}}</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>No</th>
                        <th>Judul Berita</th>
                        <th>Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>Judul berita</td>
                        <td>
                            <form action="#" method="POST">
                                <a href="#" class="btn btn-sm btn-primary">Edit</a>
                                <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                @csrf 
                                @method('DELETE')
                            </form>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                    </tfoot>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
</section>
@endsection

resources/views/kategori/index.blade.php

@extends('backend.layout')
@section('content')
<section class="content">
    <div class="box">
                <div class="box-header">
                  <h3 class="box-title">{{!empty($title)?$title:''}}</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>No</th>
                        <th>Judul Kategori</th>
                        <th>Aksi</th>
                      </tr>
                    </thead>
                    <tbody>  
                      <tr>
                        <td>1</td>
                        <td>Judul kategori</td>
                        <td>
                            <form action="#" method="POST">
                                <a href="#" class="btn btn-sm btn-primary">Edit</a>
                                <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                @csrf 
                                @method('DELETE')
                           </form>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                    </tfoot>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
</section>
@endsection

3. Menambahkan Controller Berita dan Kategori Berita
Pada tahap ketiga saya menambahkan controller berita dan kategori berita, disini saya memanfaatkan controller resource, sehingga tekniknya akan terlihat seperti berikut.

Buka jendela Terminal/ Command Prompt lalu jalankan perintah artisan berikut untuk membuat controller berita :

php artisan make:controller BeritaController --resource

Kemudian buka file controller “app\Http\BeritaController.php” lalu modifikasi pada method index() sehingga menjadi seperti berikut :

public function index()
    {
        $title ='Data Berita';
        return view('berita.index',compact('title'));
    }

Masih aktif pada jendela Terminal/ Command Prompt lalu jalankan perintah artisan berikut untuk membuat controller kategori:

php artisan make:controller KategoriController --resource

Lanjutkan dengan langkah yang sama seperti pada controller “app\Http\BeritaController.php”, yaitu kita modifikasi file controller “app\Http\KategoriController.php” lalu lakukan modifikasi pada method index() sehingga menjadi seperti berikut :

public function index()
    {
        $title ='Data Kategori';
        return view('kategori.index',compact('title'));
    }

4. Menambahkan Routing
Untuk kebutuhan routing disini saya menambahkan 2 buah route resource untuk kebutuhan CRUD pada modul berita dan modul kategori, sehingga menjadi seperti berikut :

Route::resource('berita','BeritaController');
Route::resource('kategori','KategoriController');

Setelah semua langkah diatas telah dilakukan mari kita buka kembali jendela Terminal/ Command Prompt, masih aktif pada root project Laravel 7 blogcms Anda lalu jalankan perintah artisan berikut :

php artisan serve

Apabila server project telah berjalan maka kita bisa akses project Laravel 7 melalui web browser. Untuk mengakses menu berita bisa klik pada menu atau akses langsung dengan url localhost:8000/berita, dan juga untuk mengakses menu kategori berita, apabila semua berjalan dengan baik maka akan ditampilkan halaman menu masing-masing, sehingga untuk berita akan terlihat seperti berikut ini :

Lalu untuk kategori akan terlihat seperti berikut :

Oke, sampai disini maka kita telah berhasil melakukan setup menu untuk kebutuhan manajemen konten pada backend project Laravel. Akhir kata semoga tutorial kali ini dapat membantu dan memberi manfaat bagi siapa saja yang membutuhkan, mohon maaf jika terdapat kekurangan dan terimakasih telah berkunjung di Jogjatech.com. 🙂