Manage Category - Membuat Blog dengan Laravel 8 #Part2

Manage Category - Membuat Blog dengan Laravel 8 #Part2

...
Hilmi・ Created at 28 Februari 2021
14 min read ・ Updated at 28 Februari 2021
Series: Larablog

Blog Laravel - Di artikel panduan lengkap membuat blog dengan laravel part 1 kita sudah sampai mengatur tampilan front end untuk halaman depan blog dengan laravel yang kita buat ini, di artikel panduan lengkap membuat blog dengan laravel part 2 ini kita akan membuat managemen konten untuk mengelola konten blog yang dibuat dengan laravel ini agar konten yang ditampilkan bisa dinamis.

Baiklah kita mulai langkah-langkah membuat blog dengan laravel 8 part 2 ini dengan membuat managemen category.

1. Managemen Blog Category

Pertama kita perlu membuat view untuk tampilan index dari category, oleh karena itu silahkan membuat folder baru dengan nama category di dalam folder views, kemudian dilanjutkan dengan membuat file view dengan nama index.blade.php di dalam folder category. Copy kode di bawah ini dan paste di file index.blade.php yang baru dibuat.

resources>views>category>index.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Keyword</th>
                <th scope="col">Meta Desc</th>
                <th scope="col">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>lorem ipsum</td>
                <td>TA</td>
              </tr>
            </tbody>
          </table>
    </div>
</div>
@endsection

Kemudian buat controllernya dengan command php artisan make:controller CategoryController -r. Controller ini digunakan untuk memanage data category. Buka CategoryController.php, pada function index() masukkan kode return view ('category.index');

Di routes>web.php kita perlu membuat route baru untuk manage category. Tambahkan kode di bawah ini pada file web.php.

Route::resource('category', CategoryController::class);

Jangan lupa juga untuk mengimport CategoryController dengan menambahkan use App\Http\Controllers\CategoryController; pada web.php.

Sekarang kita perlu membuat navigasi untuk bisa mengarahkan kita ke masing-masing data. Buka file resources>views>layouts>app.blade.php, kemudian tambahkan kode di bawah ini.

<li class="nav-item">
    <a class="nav-link active" href="/">Blog</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="{{ route('category.index') }}">Category</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Tag</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Trash</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Setting</a>
</li>

Sehingga secara keseluruhan, kode di file resources>views>layouts>app.blade.php sekarang menjadi seperti di bawah ini.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="/">Blog</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="{{ route('category.index') }}">Category</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Tag</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Trash</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Setting</a>
                          </li>
                    </ul>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif
                            
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
        
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Membuat blog dengan laravel 8

Gambar di atas merupakan tampilan halaman category atau bisa dilihat dengan klik menu category. Data yang ditampilkan masih statis, maka dari itu kita perlu membuat button create dan halaman form create tapi sebelumnya kita perlu membuat model sekaligus migration untuk membuat table category. Jalankan command php artisan make:model Category -m untuk membuat file category sekaligus file migration.

Buka file di database>migrations>[timestamp]_create_categories_table.php kemudian ubah kode di dalamnya menjadi seperti di bawah ini.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->string('slug');
            $table->string('keyword');
            $table->string('meta_desc');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

Kemudian jalankan php artisan migrate. Jika sudah, artinya kita sudah mempunyai table category, selanjutnya kita bisa create data category.

Buat button create di file index.blade.php dengan menambahkan kode di bawah ini 

<div class="row mb-1">
        <a href="{{ route('category.create') }}" class="btn btn-primary">Create</a>
</div>

Tambahkan kode tersebut di bawah <div class="container">

Kemudian buat file view baru dengan nama create.blade.php di dalam folder resources>views>category. Copy kode di bawah ini dan paste pada file create.blade.php yang baru saja dibuat.

resources>views>category>create.

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="{{ route('category.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                      <label for="name" class="form-label">Category Name</label>
                      <input type="text" name="name" class="form-control" id="name" >
                    </div>
                    <div class="mb-3">
                      <label for="keyword" class="form-label">Keyword</label>
                      <input type="text"  name="keyword" class="form-control" id="keyword">
                    </div>
                    <div class="mb-3">
                        <label for="meta_desc" class="form-label">Meta Desc</label>
                        <textarea name="meta_desc" class="form-control" id="" cols="30" rows="10"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
        </div>
    </div>
@endsection

Sekarang buka file CategoryController.php, di function create, tambahkan return view ('category.create');

tutorial Membuat blog dengan laravel 8

Sekarang, jika kita coba akses ke menu category dan menekan button create maka tampilannya akan seperti gambar di atas. Namun kita masih belum bisa menambahkan data karena kita belum membuat function untuk tambah data atau store. Oleh karena itu kita perlu membuka file CategoryController.php dan di bagian function store(), ubah menjadi seperti kode di bawah ini.

public function store(Request $request)
    {
        $data = new Category();
        $data->name = $request->name;
        $data->slug = \Str::slug($request->name);
        $data->keyword = $request->keyword;
        $data->meta_desc = $request->meta_desc;
        if ( $data->save()) {
            return redirect()->route('category.index');
    
           } else {
               
            return redirect()->route('category.create');
    
           }
    }

Jangan lupa untuk mengimport model category dengan use app\Models\Category;

Sekarang jika kita coba input data di halaman create dan klik submit, maka data sudah berhasil di tambahkan ke database, namun di halaman category index data yang ditampilkan masih statis. Solusinya dengan mengubah sedikit kode yg ada di CategoryController atau lebih tepatnya di function index(). Ubah kode di function index() menjadi seperti di bawah ini.

public function index()
    {
        $data = Category::all();
        return view('category.index',['data' => $data]);
    }

Selanjutnya buka file di resources>views>category>index.blade.php dan ubah semua kodenya menjadi seperti di bawah ini.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row mb-1">
        <a href="{{ route('category.create') }}" class="btn btn-primary">Create</a>
    </div>
    <div class="row justify-content-center">
        <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Keyword</th>
                <th scope="col">Meta Desc</th>
                <th scope="col">Action</th>
              </tr>
            </thead>
            <tbody>
                @php
                    $no = 0;
                @endphp
             @foreach ($data as $item)
             <tr>
                <th scope="row">{{ ++$no }}</th>
                <td>{{ $item->name }}</td>
                <td>{{ $item->keyword }}</td>
                <td>{{ substr($item->meta_desc,0,100) }}</td>
                <td>TA</td>
              </tr>
             @endforeach
            </tbody>
          </table>
    </div>
</div>
@endsection

OKE, sekarang data di halaman index category sudah bisa menampilkan data dinamis. Kemudian, bagaimana kalau kita buat fitur edit untuk mengubah data category yang sudah ada. 

Buka file di resources>views>category>index.blade.php, cari kode <td>TA</td> kemudian ganti kode tersebut dengan kode di bawah ini.

<td>
  <a href="{{route('category.edit', [$item->id])}}" class="btn btn-info btn-sm"> Edit </a>
</td>

Kemudian, buka file CategoryController.php pada function edit($id) tambahkan kode di bawah ini.

$data = Category::findOrFail($id);
        return view('category.edit',['data' => $data]);

Sehingga secara keseluruhan, pada function edit akan menjadi seperti di bawah ini.

public function edit($id)
    {
        $data = Category::findOrFail($id);
        return view('category.edit',['data' => $data]);
    }

Sekarang kita akan membuat file view baru untuk tampilan edit category. Buka folder resources>views>category tambahkan file dengan nama edit.blade.php dan tambahkan kode di bawah ini.

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="{{ route('category.update',$data->id) }}" method="POST">
                    @csrf
                    <input type="hidden" value="PUT" name="_method">
                    <div class="mb-3">
                      <label for="name" class="form-label">Category Name</label>
                      <input type="text" name="name" class="form-control" id="name" value="{{old('name') ? old('name') : $data->name}}" required>
                    </div>
                    <div class="mb-3">
                      <label for="keyword" class="form-label">Keyword</label>
                      <input type="text"  name="keyword" class="form-control" id="keyword" value="{{old('keyword') ? old('keyword') : $data->keyword}}" required>
                    </div>
                    <div class="mb-3">
                        <label for="meta_desc" class="form-label">Meta Desc</label>
                        <textarea name="meta_desc" class="form-control" id="" cols="30" rows="10" required>{{old('meta_desc') ? old('meta_desc') : $data->meta_desc}}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Update</button>
                  </form>
            </div>
        </div>
    </div>
@endsection

OK kita sekarang sudah mempunya button edit dan ketika button edit tersebut kita klik akan mengarahkan ke halaman edit category, tapi kita masih belum bisa update data, oleh karena itu kita perlu menambahkan kode di function update. Buka file CategoryController.php pada function update tambahkan kode di bawah ini.

$data = Category::findOrFail($id);
        $data->name = $request->name;
        $data->slug = \Str::slug($request->name);
        $data->keyword = $request->keyword;
        $data->meta_desc = $request->meta_desc;
        if ( $data->save()) {
            return redirect()->route('category.index')->with('success', 'Data updated successfully');
    
           } else {
               
            return redirect()->route('category.edit')->with('error', 'Data failed to update');
    
           }

Nah, sekarang kita sudah bisa update data category blog. Kemudian kita akan membuat fitur delete atau hapus data category blog. 

Buka file resources>views>category>index.blade.php kemudian tambahkan button hapus atau delete di bawah kode button edit. Kode untuk membuat button hapus, seperti di bawah ini.

<form method="POST" action="{{route('category.destroy', [$item->id])}}" class="d-inline" onsubmit="return confirm('Delete this category permanently?')">
    @csrf
    <input type="hidden" name="_method" value="DELETE">
    <input type="submit" value="Delete" class="btn btn-danger btn-sm">
</form>

Selanjutnya buka lagi file CategoryController.php, tambahkan kode di bawah ini pada function destroy.

$data = Category::findOrFail($id);
        $data->delete();
        return redirect()->back();

Sampai disini kita sudah berhasil membuat fitur manage (CRUD) data category blog. Selanjutnya kita akan membuat manage data tag untuk project percobaan membuat blog dengan laravel. Namun untuk bagaimana langkah-langkah membuat manage tag akan dibahas di artikel berikutnya.

Sekian artikel kali ini yang membahas bagaimana cara membuat blog sederhana dengan laravel 8 part 2. Jika ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis di form komentar di bawah ini.

Daftar Isi Panduan Lengkap Membuat Blog dengan Laravel 8:

1. Bagian 1 (Klik disini)

Affiliate Banner Unlimited Hosting Indonesia