Membuat E-commerce sederhana di Laravel #Part 3 - Membuat Modul CRUD Brands

Berikut ini adalah langkah-langkah membuat CRUD untuk entitas Brand. Tutorial ini meliputi pembuatan database migration, model, controller, serta views untuk halaman Brand.

Langkah 1: Membuat Database Migration untuk Brand

Buat Migration untuk tabel brands:

Jalankan perintah berikut untuk membuat migration baru:

php artisan make:migration create_brands_table

Tambahkan kolom di dalam migration:

Buka file create_brands_table.php di folder database/migrations, lalu tambahkan kolom-kolom yang dibutuhkan:

public function up()
{
    Schema::create('brands', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('slug')->unique();
        $table->string('logo')->nullable();
        $table->timestamps();
    });
}

Jalankan Migration:

Setelah selesai, jalankan perintah berikut untuk membuat tabel di database:

php artisan migrate

Langkah 2: Membuat Model Brand

Buat Model untuk Brand:

Jalankan perintah berikut untuk membuat model:

php artisan make:model Brand

Definisikan relasi (opsional):

Jika nantinya Brand memiliki relasi dengan produk, Anda bisa mendefinisikan relasi dalam model ini. Contoh:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;

class Brand extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'slug', 'logo'];

    public function setNameAttribute($value)
    {
        $this->attributes['name'] = $value;
        $this->attributes['slug'] = Str::slug($value);
    }// app/Models/Brand.php

    public function products()
    {
        return $this->hasMany(Product::class);
    }

}

Langkah 3: Membuat BrandController

Buat Controller untuk Brand:

Jalankan perintah berikut untuk membuat controller BrandController dengan metode CRUD otomatis:

php artisan make:controller BrandController --resource

Implementasikan Fungsi CRUD:

Buka BrandController.php di folder app/Http/Controllers/ dan tambahkan logika CRUD.

<?php

namespace App\Http\Controllers;

use App\Models\Brand;
use Illuminate\Http\Request;
use Illuminate\Support\Str;

class BrandController extends Controller
{
    public function index()
    {
        $brands = Brand::all();
        return view('admin.brands.index', compact('brands'));
    }

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

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255|unique:brands,name',
            'logo' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $brand = new Brand();
        $brand->name = $request->name;
        $brand->slug = Str::slug($request->name);

        if ($request->hasFile('logo')) {
            $imagePath = $request->file('logo')->store('logos', 'public');
            $brand->logo = $imagePath;
        }

        $brand->save();

        return redirect()->route('brands.index')->with('success', 'Brand created successfully');
    }

    public function edit(Brand $brand)
    {
        return view('admin.brands.edit', compact('brand'));
    }

    public function update(Request $request, Brand $brand)
    {
        $request->validate([
            'name' => 'required|string|max:255|unique:brands,name,' . $brand->id,
            'logo' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $brand->name = $request->name;
        $brand->slug = Str::slug($request->name);

        if ($request->hasFile('logo')) {
            $imagePath = $request->file('logo')->store('logos', 'public');
            $brand->logo = $imagePath;
        }

        $brand->save();

        return redirect()->route('brands.index')->with('success', 'Brand updated successfully');
    }

    public function destroy(Brand $brand)
    {
        $brand->delete();
        return redirect()->route('brands.index')->with('success', 'Brand deleted successfully');
    }
}

Langkah 4: Membuat Views untuk Brand

Membuat index.blade.php untuk List Brands:

Buat folder brands di dalam resources/views/admin, lalu buat file index.blade.php:

<!-- resources/views/admin/brands/index.blade.php -->

@extends('layouts.admin')

@section('content')
    <h1>Brands</h1>
    <a href="{{ route('brands.create') }}" class="btn btn-primary">Add Brand</a>

    <table class="table mt-3">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Slug</th>
                <th>Logo</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($brands as $brand)
                <tr>
                    <td>{{ $brand->id }}</td>
                    <td>{{ $brand->name }}</td>
                    <td>{{ $brand->slug }}</td>
                    <td>
                        @if($brand->logo)
                            <img src="{{ asset('storage/' . $brand->logo) }}" width="50" alt="{{ $brand->name }}">
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('brands.edit', $brand) }}" class="btn btn-warning">Edit</a>
                        <form action="{{ route('brands.destroy', $brand) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

Membuat create.blade.php untuk Menambah Brand:

<!-- resources/views/admin/brands/create.blade.php -->

@extends('layouts.admin')

@section('content')
    <h1>Add Brand</h1>

    <form action="{{ route('brands.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" name="name" required>
        </div>

        <div class="form-group mt-3">
            <label for="logo">Logo</label>
            <input type="file" class="form-control" name="logo">
        </div>

        <button type="submit" class="btn btn-success mt-3">Save</button>
    </form>
@endsection

Membuat edit.blade.php untuk Edit Brand:

<!-- resources/views/admin/brands/edit.blade.php -->

@extends('layouts.admin')

@section('content')
    <h1>Edit Brand</h1>

    <form action="{{ route('brands.update', $brand) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" name="name" value="{{ $brand->name }}" required>
        </div>

        <div class="form-group mt-3">
            <label for="logo">Logo</label>
            <input type="file" class="form-control" name="logo">
            @if($brand->logo)
                <img src="{{ asset('storage/' . $brand->logo) }}" width="100" class="mt-2" alt="{{ $brand->name }}">
            @endif
        </div>

        <button type="submit" class="btn btn-success mt-3">Update</button>
    </form>
@endsection

Langkah 5: Menambahkan Route

Tambahkan Route di web.php:

use App\Http\Controllers\BrandController;

Route::prefix('admin')->middleware('auth')->group(function () {
  Route::resource('brands', BrandController::class);
});

Langkah 6: Menambahkan Sidebar dan Layout

Buat file layouts/admin.blade.php untuk layout utama admin dengan sidebar dan navbar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="{{ asset('css/admin.css') }}" rel="stylesheet" type="text/css" >
    <!-- Tambahkan ini di head atau di bagian bawah file layout Anda -->
</head>
<body>
    <!-- Sidebar Toggle Button (visible on mobile) -->
    <button id="sidebarToggle" class="btn">
        <i class="fa fa-bars"></i>
    </button>

    <!-- Sidebar -->
    <div id="sidebar">
        <h4 class="text-center mt-3">Admin Panel</h4>
        <nav class="nav flex-column mt-4">
            <a class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
                <i class="fa fa-tachometer-alt"></i> Dashboard
            </a>
            <a class="nav-link {{ request()->is('brands*') ? 'active' : '' }}" href="{{ route('brands.index') }}">
                <i class="fa fa-tags"></i> Brands
            </a>
            <a class="nav-link" href="{{ route('logout') }}">
                <i class="fa fa-sign-out-alt"></i> Logout
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div id="contents">
        <div class="container-fluid">
            @yield('content')
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Toggle sidebar visibility on mobile
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('active');
            document.getElementById('contents').classList.toggle('active');
        });
    </script>
     @yield('script')
</body>
</html>

Sidebar dan Navbar Styling (CSS)

Buat file CSS di public/css/admin.css untuk styling sederhana admin panel:

#sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1e3d59;
    color: #fff;
    padding-top: 20px;
    z-index: 1000;
    transition: all 0.3s;
}
#sidebar .nav-link {
    color: #cdd3d8;
    font-size: 16px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
}
#sidebar .nav-link .fa {
    margin-right: 10px;
    font-size: 18px;
}
#sidebar .nav-link.active, #sidebar .nav-link:hover {
    background-color: #0b2638;
    color: #fff;
}
/* Content area */
#contents {
    margin-left: 250px;
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
    transition: margin-left 0.3s;
}
/* Sidebar toggle button for mobile */
#sidebarToggle {
    display: none;
}

@media (max-width: 768px) {
    #sidebar {
        left: -250px;
    }
    #sidebar.active {
        left: 0;
    }
    #contents {
        margin-left: 0;
    }
    #contents.active {
        margin-left: 250px;
    }
    #sidebarToggle {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1100;
        font-size: 24px;
        color: #1e3d59;
        background-color: #fff;
        border: none;
    }
}

Hasil akhir akan seperti berikut:

http://localhost:8000/admin/brands