Tutorial CRUD dengan Laravel 8 Simple dan Mudah

Admin Idnblog
Posted by By Admin Idnblog 4 Februari 2021
Last Updated:7 Februari 2021

Laravel merupakan kerangka kerja web berbasis PHP dengan sintaks yang ekspresif dan elegan. Laravel bisa juga disebut kerangka kerja untuk pengembang web. Dengan menggunakan framework laravel tidak perlu susah payah untuk membangun sebuah web dari awal, Fondasi yang ada dilaravel memudahkan para development web. Laravel menggunakan struktur MVC (Model View Controller).

Create Read Update Delete atau bahasa singkatnya CRUD atau dalam bahasa awam,nya adalah membuat form, menginput data, merubah data dan menghapus data.

Laravel memiliki komunitas yang besar dan terus berkembang yang memudahkan bagi kita yang baru belajar untuk menemukan solusi dan membantu apabila terjadi error. Laravel merilis versi baru dua kali dalam setahun, dan versi terbaru yaitu Laravel 8 dirilis pada 8 Sept 2020.

Pada artikel kali ini kita kali ini kita akan membahas tentang bagaimana kita membuat menginput data, mengupdate atau mengubah data dan menghapus data dengan database MySQL.

Ada beberapa hal yang perlu kita miliki di sistem operasi kita sebelum menginstal laravel 8 diantaranya adalah

  • PHP
  • Komposer
  • Server (WAMP, LAMP, XAMPP dll) Saya menggunakan windows, jadi saya menggunakan WAMP, dan kita akan menggunakan MySQL sebagai database untuk menyimpan data. Pastikan paket yang terdaftar di atas diinstal pada sistem operasi Anda.

Langkah Pertama Install Laravel 8

Untuk menginstal Laravel 8, kita memerlukan komposer dan pastikan kita menentukan versi Laravel yang kita butuhkan, dalam tutorial kita kali ini adalah menggunakan Laravel 8.

Silahkan ketikan kode berikut ini pada komposer anda : 

Composer create-project laravel/laravel=8.0 projectapp --prefer-dist


kita dapat memilih dan menginstall opsi Laravel yang kita akan gunakan sesuai dengan kebutuhan, tetapi saya lebih suka metode pertama karena ini akan menginstal semua paket dan saya juga memiliki kebebasan untuk memilih versi yang saya inginkan.

Laravel new projectapp

Dengan Laravel 8, beberapa hal telah diatur, kita tidak perlu menyalin dan mengganti nama file env.example, Laravel 8 melakukannya secara otomatis.

Hal penting lainnya tentang Laravel 8, kita tidak perlu membuat APP_KEY, karena laravel juga sudah membuatnya secara otomatis.

Langkah Kedua Membuat Database di MySQL

Silahkan buka database mysql anda kemudian buat database dengan nama projectapp. Jika anda menggunakan aplikasi paket seperti XAMP, APPSERV, WAMP anda tinggal mengakses phpmyadmin kemudian membuat database di situ.

Baca Juga : Cara Membuat Database di MySQL

Langkah Kedua Membuat Koneksi Database MySQL

Setelah database sudah berhasil kita buat langkah selanjutnya adalah membuat koneksi database silahkan buka file env yang ada di folder root laravel anda kemudian sesuaikan dengan username, password dan database yang sudah dibuat.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=projrctapp
DB_USERNAME=root
DB_PASSWORD=

Langkah Ketiga Membuat Migrasi Laravel

Kita akan membuat aplikasi sederhana dengan project. Silahkan anda masuk ke folder root laravel anda. Setelah itu masukan kode berikut ini untuk migrasi membuat tabel baru dengan nama projects

php artisan make:migration create_projects_table --create=projects

File migrasi akan dibuat di folder database / migrasi, dan kita akan membuat atau menambahkan field skema dari database diantaranya
name (string), introduction (string), location (string), cost of the project (float), date created, and date updated.

Sebelum kita menjalankan perintah migrasi, kita perlu menentukan panjang string default, jika tidak, kita akan mengalami kesalahan. Jadi, buka app / Providers / AppServiceProvider.php dan tambahkan 

Schema::defaultstringLength(191);

kemudian tambahkan juga pada function boot kode dibawah ini :

use Illuminate\Support\Facades\Schema;

Setelah semua sudah benr silahkan klik migrasi pada 

Php artisan migrate

Langkah Keempat Membuat
Resource Route

Kita perlu menambahkan route untuk operasi CRUD kita, Laravel menyediakan route resource untuk kita yang akan membuat CRUD, yaitu route untuk Membuat, route lain untuk Menyimpan, route untuk edit, rute ke Hapus.
Silahkan akses ke folder routes\ web.php dan tambahkan route resource.

Route::resource(‘projects’, ProjectController::class);

Tambahkan Juga, kode berikut ini pada kelas ProjectController

use App\Http\Controllers\ProjectController;

Langkah Kelima Menambahkan Controller dan Model

Sebelumnya, pada langkah 4, parameter kedua untuk resource adalah ProjectController, jadi kita perlu membuat pengontrol dan menentukan model sumber daya dengan cara menambahkan model add –model 

Php artisan make:controller ProjectController --resource --model=Project

Nantinya akan ada pertanyaan, yang intinya models belum ada atau belum kita buat maka akan ada tawaran untuk generate models ketikan yes maka secara otomatis model akan dibuat

Buka file ProjectController.php yang terdapat di folder app/Http/Controllers/

Kemudian masukan kode berikut ini:

<?php
namespace App\Http\Controllers;

use App\Models\Project;
use Illuminate\Http\Request;

class ProjectController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $projects = Project::latest()->paginate(5);

        return view('projects.index', compact('projects'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('projects.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'introduction' => 'required',
            'location' => 'required',
            'cost' => 'required'
        ]);

        Project::create($request->all());

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

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Project  $project
     * @return \Illuminate\Http\Response
     */
    public function show(Project $project)
    {
        return view('projects.show', compact('project'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Project  $project
     * @return \Illuminate\Http\Response
     */
    public function edit(Project $project)
    {
        return view('projects.edit', compact('project'));
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Project  $project
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Project $project)
    {
        $request->validate([
            'name' => 'required',
            'introduction' => 'required',
            'location' => 'required',
            'cost' => 'required'
        ]);
        $project->update($request->all());

        return redirect()->route('projects.index')
            ->with('success', 'Project updated successfully');
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Project  $project
     * @return \Illuminate\Http\Response
     */
    public function destroy(Project $project)
    {
        $project->delete();

        return redirect()->route('projects.index')
            ->with('success', 'Project deleted successfully');
    }
}

Pada laravel 8 sudah terdapat folder Model, (app/model) yang tidak tersedia pada folder sebelumnya. Dalam folder model tersebut sudah terdapat file Project.php  kemudian  buka  dan  masukan  kode berikut ini :

<?php

namespace App\Models;

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

class Project extends Model
{
    use HasFactory;

    protected $table = 'projects';
    public $timestamps = true;

    protected $casts = [
        'cost' => 'float'
    ];

    protected $fillable = [
        'name',
        'introduction',
        'created_at',
        'location',
        'cost'
    ];
}

Langkah Keenam Membuat Tampilan

File tampilan Laravel disebut dengan file blade, kita akan menambahkan file blade tersebut, sehingga pengguna dapat berinteraksi dengan aplikasi yang kita buat.

tambahkan dua folder didalam folder resources/views

  1. Layouts
    • app.blade.php
  2. Projects
    • Index.blade.php
    • Create.blade.php
    • Edit.blade.php
    • show.blade.php

app.blade.php

<html>

<head>
    <title>App Name - @yield('title')</title>

    <!-- Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
    </script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
    </script>

    <style>
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #9C27B0;
            color: white;
            text-align: center;
        }

    </style>

</head>

<body>
    @section('sidebar')

    @show

    <div class="container">
        @yield('content')
    </div>
    <div class="text-center footer">

        <h4>The writer needs a job</h4>
        <h4>+234 806 605 6233</h4>
        <h4>kingsconsult001@gmail.com</h4>

    </div>
</body>

</html>

index.blade.php

@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 8 CRUD </h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-success" href="{{ route('projects.create') }}" title="Create a project"> <i class="fas fa-plus-circle"></i>
                    </a>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    <table class="table table-bordered table-responsive-lg">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Introduction</th>
            <th>Location</th>
            <th>Cost</th>
            <th>Date Created</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($projects as $project)
            <tr>
                <td>{{ ++$i }}</td>
                <td>{{ $project->name }}</td>
                <td>{{ $project->introduction }}</td>
                <td>{{ $project->location }}</td>
                <td>{{ $project->cost }}</td>
                <td>{{ date_format($project->created_at, 'jS M Y') }}</td>
                <td>
                    <form action="{{ route('projects.destroy', $project->id) }}" method="POST">

                        <a href="{{ route('projects.show', $project->id) }}" title="show">
                            <i class="fas fa-eye text-success  fa-lg"></i>
                        </a>

                        <a href="{{ route('projects.edit', $project->id) }}">
                            <i class="fas fa-edit  fa-lg"></i>

                        </a>

                        @csrf
                        @method('DELETE')

                        <button type="submit" title="delete" style="border: none; background-color:transparent;">
                            <i class="fas fa-trash fa-lg text-danger"></i>

                        </button>
                    </form>
                </td>
            </tr>
        @endforeach
    </table>

    {!! $projects->links() !!}

@endsection

create.blade.php

@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Add New Product</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('projects.index') }}" title="Go back"> <i class="fas fa-backward "></i> </a>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('projects.store') }}" method="POST" >
        @csrf

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    <input type="text" name="name" class="form-control" placeholder="Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Introduction:</strong>
                    <textarea class="form-control" style="height:50px" name="introduction"
                        placeholder="Introduction"></textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Location:</strong>
                    <input type="text" name="location" class="form-control" placeholder="Location">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Cost:</strong>
                    <input type="number" name="cost" class="form-control" placeholder="Cost">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>

    </form>
@endsection

edit.blade.php

@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Edit Product</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('projects.index') }}" title="Go back"> <i class="fas fa-backward "></i> </a>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('projects.update', $project->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    <input type="text" name="name" value="{{ $project->name }}" class="form-control" placeholder="Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Introduction:</strong>
                    <textarea class="form-control" style="height:50px" name="introduction"
                        placeholder="Introduction">{{ $project->introduction }}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Location:</strong>
                    <input type="text" name="location" class="form-control" placeholder="{{ $project->location }}"
                        value="{{ $project->location }}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Cost:</strong>
                    <input type="number" name="cost" class="form-control" placeholder="{{ $project->cost }}"
                        value="{{ $project->location }}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>

    </form>
@endsection

show.blade.php

@extends('layouts.app')


@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>  {{ $project->name }}</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('projects.index') }}" title="Go back"> <i class="fas fa-backward "></i> </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                {{ $project->name }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Introduction:</strong>
                {{ $project->introduction }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Location:</strong>
                {{ $project->location }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Cost:</strong>
                {{ $project->cost }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Date Created:</strong>
                {{ date_format($project->created_at, 'jS M Y') }}
            </div>
        </div>
    </div>
@endsection

jika semua sudah di buat dan diketik seperti diatas langkah trakhir silahkan buka composer kita kembali kemudian ketikan kode berikut kemudian enter 

php artisan serve

jika sudah buka web browser kalian kemudian ketikan http://127.0.0.1:8000/projects/ jika berhasil maka tampilannya akan seperti berikut ini

Sumber : Kingconsults

Download Sourcode Latihan CRUD dengan Laravel 8

Tags: