Manage Tag - Membuat Blog dengan Laravel 8 #Part3

Written by Hilmi Hidayat, published on 04 May, 2021 Manage Tag - Membuat Blog dengan Laravel 8 #Part3

Blog Laravel - Setelah sekian lama tertunda, pada kesempatan kali ini saya akan melanjutkan artikel dari seri membuat blog dengan laravel. Pada kesempatan kali ini saya akan melanjutkan dengan membuat manage tag untuk data master tag yang nantinya bisa digunakan saat membuat artikel di manage blog yang akan buat pada artikel berikutnya.

Langkah-langkah bagaimana cara membuat blog dengan laravel 8 part 3.

Membuat Model & Migration Tag

php artisan make:model Tag -m

Di langkah pertama pada artikel ini, kita akan membuat model sekaligus file migration Tag dengan cara menjalankan command seperti di atas pada terminal. Dengan command di atas, akan membuatkan kita file Model Tag yang terdapat pada folder App\Models dan file migration tags_table yang terletak di folder databases\migrations.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTagsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tags', 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('tags');
    }
} 

Kemudian, silahkan buka file migration untuk tags_table yang terletak pada folder databases\migrations\ [timestamp]_create_tags_table.php. Sesuaikan kode yang ada dengan kode seperti di atas. Dengan kode di atas kita bermaksud untuk membuat tabel yang terdiri dari field name, slug, keyword dan meta_desc. Field keyword dan meta_desc akan membantu tag tersebut mudah ditemukan oleh mesin pencari seperti google.

php artisan migrate

Jika sudah, lanjutkan dengan menjalankan command php artisan migrate pada terminal. Dengan command di atas, file migration yang baru kita buat (tags table) akan dimigrasi menjadi tabel di database local kita (phpMyAdmin).

Menambahkan Route Tag

use App\Http\Controllers\TagController;
Route::resource('tag', TagController::class);

route list tag

Setelah membuat Model dan Migration Tag, selanjutnya kita akan menambahkan route untuk manage tag yaitu create, read, update dan delete (CRUD). Buka file routes\web.php kemudian tambahkan baris kode seperti di atas dan jangan lupa juga untuk import TagController dengan use App\Http\Controllers\TagController; seperti di atas. Disini kita menggunakan helper resource, dengan resource ini kita akan langsung mendaftarkan route untuk tag.index, tag.store, tag.create, tag.show, tag.update, tag.destroy, tag.edit seperti lampiran gambar route list di atas. Pada langkah ini kita mendaftarkan route tag yang akan mengarah ke TagController, namun kita belum mempunyai file TagController.php, untuk kita akan membuatnya pada langkah di bawah ini.

Membuat Tag Controller

php artisan make:controller TagController -r
public function index()
{
   return view ('tag.index');
}

Kita buat terlebih dahulu file TagController.php dengan command di atas. Dengan command di atas, kita akan membuat file TagController.php yang terletak pada folder App\Http\Controller. Lalu buka file TagController.php yang baru saja dibuat, dan pada function index tambahkan return view yang mengarah ke file view tag.index seperti kode di atas.

Membuat File View tag\index.php

Pada langkah sebelumnya yaitu membuat TagController, kita sudah menambahkan return view pada function index yang akan diarahkan ke file view tag\index.blade.php namun kita belum memiliki file view tersebut, untuk itu mari kita buat file view untuk index.blade.php.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-1">
        <a href="{{ route('tag.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">Name</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>Tag name</td>
                <td>Keyword</td>
                <td>Meta desc</td>
                <td>
                  Option
                </td>
              </tr>
            </tbody>
          </table>
    </div>
</div>
@endsection 

Pertama, buat folder tag terlebih dahulu di dalam folder resources\views kemudian masuk ke folder tag yang baru saja dibuat dan buat file dengan nama index.blade.php. Selanjutnya buka file index.blade.php, copy kode di atas dan paste di file index.blade.php tersebut. Dengan kode di atas, kita sudah berhasil membuat tampilan statis tag index. Agar tampilan tag index nantinya dapat menampilkan data dinamis yang artinya data yang telah kita buat, maka kita perlu membuat fitur create tag terlebih dahulu dan untuk langkah-langkah bagaimana cara membuat fitur create tag akan dibahas di bawah ini.

Menambahkan Fitur Create Tag

Kita sudah berhasil membuat tampilan data index statis, selanjutnya kita akan membuat fitur create tag yang nantinya data yang berhasil dibuat akan ditampilan pada tampilan index.

public function create()
    {
        return view ('tag.create');
    }

Buka file TagController.php, pada method public function create ubah menjadi seperti kode di atas. Jadi ketika kita memanggil route tag.create, akan menampilkan file view create yang ada di folder tag.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="{{ route('tag.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                      <label for="name" class="form-label">Tag 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

Oke, selanjutnya kita akan membuat file view untuk create. Buka folder resources\views\tag, kemudian buat file baru dengan nama create.blade.php dan copy kode di atas lalu paste di file create.blade.php yang baru saja dibuat.

public function store(Request $request)
    {
        $data = new Tag();
        $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('tag.index');
    
           } else {
               
            return redirect()->route('tag.create');
    
           }
    }

Sekarang kita perbarui method public function store di file TagController.php. Sesuaikan kode yang ada dengan kode seperti di atas. Dengan kode di atas, kita akan menyimpan hasil request dari name, slug, keyword dan meta_desc ke tabel tag.

Tabel tag blog laravel

Dan sekarang saat kita coba menambahkan tag baru di 127.0.0.1:8000/tag/create maka data sudah berhasil disimpan di tabel tag.

Menampilkan Data Dinamis Tag

public function index()
    {
        $tag = Tag::all();

        return view ('tag.index', ['tag' => $tag]);
    }

Sebelum lanjut ke membuat fitur edit, mari kita buat agar data yang tampil di manage tag bersifat dinamis atau artinya mengambil data dari tabel tags. Kita perbarui sedikit method public function index yang ada di file TagController.php, ubah menjadi seperti kode di atas.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row mb-1">
        <a href="{{ route('tag.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">Name</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 ($tag as $tag)
                <tr>
                    <th scope="row">{{ ++$no }}</th>
                    <td>{{ $tag->name }}</td>
                    <td>{{ $tag->keyword }}</td>
                    <td>{{ $tag->meta_desc }}</td>
                    <td>
                        <a href="{{route('tag.edit', [$tag->id])}}" class="btn btn-info btn-sm"> Edit </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

Kemudian pada file tag\index.blade.php, ubah menjadi seperti kode di atas. Disini kita akan memakai perulangan foreach untuk menampilkan data-data dari tabel tags di database. Dan juga kita tambahkan juga tombol edit yang nantinya akan mengarah ke route tag.edit, fitur edit ini akan kita buat di langkah selanjutnya.

manage tag blog laravel 8

Oke, sekarang jika kita cek di manage tag, sudah berhasil menampilkan data dinamis yang diambil dari tabel tags di database.

<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="{{ route('tag.index') }}">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>

Oiya, sebelum lanjut kita tambahkan atau edit menu navigasi di file layouts\app.blade.php terlebih dahulu. Cari kode <a class="nav-link" href="#">Tag</a> kemudian ubah menjadi <a class="nav-link" href="{{route('tag.index')}}">Tag</a> atau seperti kode di atas.

Membuat Fitur Edit Tag

Sebelumnya kita sudah berhasil membuat fitur create tag, menampilkan data dinamis dari tabel tags dan sekarang kita akan membuat fitur edit tag.

public function edit($id)
    {
        $tag = Tag::findOrFail($id);

        return view ('tag.edit', ['tag' => $tag]);
    }

Buka file TagController.php, kemudian sesuaikan kode yang ada dengan kode di atas. Saat kita memanggil route tag.edit, maka akan menampilkan view dari file tag\edit.blade.php dengan menyertakan juga data tag dengan id yang dipilih.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form action="{{ route('tag.update', $tag->id) }}" method="POST">
                @csrf
                <input type="hidden" value="PUT" name="_method">
                <div class="mb-3">
                    <label for="name" class="form-label">Tag Name</label>
                    <input type="text" name="name" value="{{ $tag->name }}" class="form-control" id="name" >
                </div>
                <div class="mb-3">
                    <label for="slug" class="form-label">Slug</label>
                    <input type="text" name="slug" value="{{ $tag->slug }}" class="form-control" id="name" >
                </div>
                <div class="mb-3">
                    <label for="keyword" class="form-label">Keyword</label>
                    <input type="text"  name="keyword" value="{{ $tag->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">{{ $tag->meta_desc }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div>
@endsection

Kemudian, kita akan membuat file view baru dengan nama edit.blade.php di folder tag. Copy kode di atas, lalu paste di file edit.blade.php yang baru saja dibuat. Di view edit ini kita akan menampilkan data slug (saat create tidak ditampilkan) yang dapat diubah.

public function update(Request $request, $id)
    {
        $data = Tag::findOrFail($id);
        $data->name = $request->name;
        $data->slug = $request->slug;
        $data->keyword = $request->keyword;
        $data->meta_desc = $request->meta_desc;
        if ( $data->save()) {

            return redirect()->route('tag.index');
    
           } else {
               
            return redirect()->route('tag.edit');
    
           }
    }

Kita lanjutkan dengan memperbarui method public function update di file TagController.php. Sesuaikan kode yang ada seperti dengan kode di atas. Dengan kode di atas, kita bisa mengubah data berdasarkan id data yang kita cari dengan findOrFail.

Jika sudah, sekarang kita coba untuk edit salah satu dari data yang ada, kemudian submit. Maka data sudah berhasil diedit atau diperbarui.

Membuat Fitur Delete Tag

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

Pada artikel ini kita sudah melalui langkah-langkah membuat manage tag yang antara lain membuat fitur create, read, updare dan sekarang kita akan membuat fitur delete. Untuk membuat fitur delete akan simpel sekali. Pertama kita akan menambahkan tombol delete pada file view tag\index.blade.php dengan kode di atas. Tambahkan kode di atas pada baris di bawah kode tombol edit. Dengan kode di atas, saat kita klik maka akan menampilkan confirm message terlebih dahulu, dan kalau kita klik OK maka akan memanggil route tag.destory.

 public function destroy($id)
    {
        $tag = Tag::findOrFail($id);
        $tag->delete();

        return redirect()->back();
    }

Kemudian mari kita ubah method public function destory yang sudah ada di TagController.php dengan kode di atas. Dengan kode di atas, akan menghapus data berdasarkan id data yang dipilih.

Baik, sampai disini kita sudah selesai dan berhasil membuat manage tag untuk seri artikel membuat blog dengan laravel 8. Manage tag yang sudah dibuat meliputi antara lain fitur create, read, update dan delete. Pada artikel berikutnya kita akan melanjutkannya dengan topik manage blog. 

Sekian artikel kali ini, jika teman-teman ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis komentar di bawah ini. See you

 

Daftar Isi Panduan Lengkap Membuat Blog dengan Laravel 8:

  1. Bagian 1 (Klik disini)
  2. Bagian 2 - Manage Category (Klik disini)

Affiliate Banner Unlimited Hosting Indonesia