Tutorial PHP Laravel 9 CRUD Web App dengan MySQL

Kali ini kita akan belajar cara membuat sistem aplikasi website CRUD (Create, Read, Update, Delete) dengan Laravel 9 langkah demi langkah dari awal.

Disini juga kita akan belajar cara menyimpan data di database MySQL dengan framework Laravel 9 PHP. saya menggunakan PHP versi 8.1.2 dan laravel 9

kita akan membuat aplikasi CRUD manajemen siswa menggunakan PHP 8.1.2 dan MySQL. Dalam aplikasi ini, pengguna dapat membuat, membaca, memperbarui, dan menghapus data siswa dari database MySQL menggunakan framework Laravel 9.

disini saya asumsikan anda sudah menginstal composer dan laravel 9, serta PHP versi 8.1.2 jika belum silahkan ikuti tutorial disini

DAFTAR ISI

Membuat Proyek Laravel 9
Database MySQL
Membuat Migration and Model
Membuat Controller dan Routes
Membuat Views di Laravel dengan Blade Templates
Pengujian Sistem CRUD
Penutup

1.MEMBUAT PROJECT DI LARAVEL 9

kalau anda menggunakan xampp, silahkan masuk ke direktori htdocs melalui command prompt seperti gambar dibawah ini

lalu jalankan code di bawah ini

composer create-project laravel/laravel --prefer-dist laravel-crud-app

setelah itu masuk ke directori project yang baru kita buat tadi dengan perintah “cd laravel-crud-app” seperti gambar dibawah ini

setelah itu verifikasi versi laravel yang diinstal dengan mengetikan kode “php artisan -V” seperti gambar dibawah ini

2. MEMBUAT DATABASE DI MySQL

Disini saya asumsikan anda sudah tahu cara mengkonfigurasi database dengan PHPMyAdmin., Buat database MySQL beri nama seperti db_laravel

Setelah kita selesai membuat databasenya, kita akan memasukkan detail MySQL db di file .env kita di dalam aplikasi Laravel 9 CRUD kita.

Proyek Laravel berisi file .env, seperti namanya, Ini adalah lokal tempat Anda menyimpan semua konfigurasi basis data Anda, seperti kredensial basis data, detail driver email, driver cache, dll.

catatan : Jika Anda membuat perubahan pada file konfigurasi .env, Anda harus memulai ulang server. dengan menggunakan perintah “php artisan config:clear” seperti gambar dibawah ini :

sekarang kita akan mengedit file .env yang berisi setingan database dan letakan kode berikut di dalamnya

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

disini yang perlu dirubah hanya nama databasenya di line ini “DB_DATABASE=db_laravel“, db_laravel merupakan nama database yg baru kita buat di MySQL, karena saya tidak memakai password jadi saya kosongkan untuk line DB_PASSWORD, tapi jika anda memakai password silahkan isi line “DB_PASSWORD”

3. MEMBUAT MIGRATION DAN MODEL DI LARAVEL 9

kita telah membuat database dan mengonfigurasi database dengan menambahkan kredensial di file env. Sekarang, kita akan mempelajari cara mengatur migrasi dengan menambahkan properti data di tabel MySQL.

sekarang kita akan membuat file Model and Migration untuk membuat Migration, jalankan perintah berikut :

“php artisan make:model Student -m”

Di dalam proyek Laravel kita, kita dapat memeriksa file migrasi di folder database/migrasi. Secara default Laravel menghasilkan file-file berikut:

timestamp__create_users_table.php
timestamp_create_password_resets_table.php
timestamp_create_failed_jobs_table.php

Selanjutnya kita akan menambahkan skema di dalam file migrasi kita, buka file migrasi masuk ke file database/migrations/ timestamp_create_students_table.php, dan tambahkan skema berikut di dalamnya.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->string('password');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

Seperti yang Anda lihat, ada dua jenis fungsi di dalam file migrasi / timestamp_create_students_table.php:

Fungsi up() memungkinkan creating/updating tabel, kolom, dan indeks.

Fungsi down() memungkinkan pembalikan operasi yang dilakukan dengan metode up.

Selanjutnya, kita akan menambahkan properti $fillable dalam model Student, buka file app/Models/Student.php dan tambahkan kode di bawah ini.

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
    use HasFactory;
    protected $fillable = ['name', 'email', 'phone', 'password'];
}

Properti yang dapat diisi digunakan di dalam model, dan menentukan tipe data atau bidang mana yang dapat ditetapkan secara massal dalam tabel database.

Selanjutnya, kita harus menjalankan perintah berikut untuk membuat tabel di database seperti gambar dibawah ini :

php artisan migrate

4. MEMBUAT CONTROLLER DAN ROUTES

Selanjutnya, kita akan membuat StudentController, jalankan perintah di bawah ini untuk membuat pengontrol baru untuk aplikasi PHP CRUD.

4.1 Membuat Controller

Jalankan kode berikut “php artisan make:controller StudentController –resource”

buka file app/Http/Controllers/StudentController.php lalu letakan kode dibawah ini

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $student = Student::all();
        return view('index', compact('student'));
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $storeData = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|max:255',
            'phone' => 'required|numeric',
            'password' => 'required|max:255',
        ]);
        $student = Student::create($storeData);
        return redirect('/students')->with('completed', 'Student has been saved!');
    }
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $student = Student::findOrFail($id);
        return view('edit', compact('student'));
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $updateData = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|max:255',
            'phone' => 'required|numeric',
            'password' => 'required|max:255',
        ]);
        Student::whereId($id)->update($updateData);
        return redirect('/students')->with('completed', 'Student has been updated');
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $student = Student::findOrFail($id);
        $student->delete();
        return redirect('/students')->with('completed', 'Student has been deleted');
    }
}

4.2 Membuat Routes

buka file routes/web.php lalu letakan kode dibawah ini dan simpan

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('welcome');
});
Route::resource('students', StudentController::class);

Jalankan perintah berikut untuk membuat berbagai routes untuk aplikasi CRUD kita.

“php artisan route:list” akan muncul seperti gambar dibawah ini

5. MEMBUAT VIEWS DI LARAVEL DENGAN BLADE TEMPLATES

Sekarang saatnya kita membuat tampilan untuk aplikasi CRUD siswa kita dengan file blade. Buka folder resources/views dan buat template blade berikut di proyek Laravel kita.

layout.blade.php
index.blade.php
create.blade.php
edit.blade.php

Buat file layout.blade.php (resources/views/layout.blade.php) lalu letakan kode berikut

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>SISTEM CRUD DENGAN LARAVEL 9 </title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         @yield('content')
      </div>
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/js"></script>
   </body>
</html>

Buat file create.blade.php (resources/views/create.blade.php) lalu letakan kode berikut

Pada langkah selanjutnya, kita juga akan mengonfigurasi template untuk tampilan Create, Store & Validate User Data in MySQL Database.
Kita harus membuat formulir untuk membuat, menyimpan, dan memvalidasi data pengguna menggunakan komponen Bootstrap Form dan Card UI.

Tambahkan kode berikut di file resources/views/create.blade.php

@extends('layout')
@section('content')
<style>
    .container {
      max-width: 450px;
    }
    .push-top {
      margin-top: 50px;
    }
</style>
<div class="card push-top">
  <div class="card-header">
    Add User
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('students.store') }}">
          <div class="form-group">
              @csrf
              <label for="name">Name</label>
              <input type="text" class="form-control" name="name"/>
          </div>
          <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" name="email"/>
          </div>
          <div class="form-group">
              <label for="phone">Phone</label>
              <input type="tel" class="form-control" name="phone"/>
          </div>
          <div class="form-group">
              <label for="password">Password</label>
              <input type="text" class="form-control" name="password"/>
          </div>
          <button type="submit" class="btn btn-block btn-danger">Create User</button>
      </form>
  </div>
</div>
@endsection

Kalau kode di atas dijalankan di browser dengan URL http://127.0.0.1:8000/students/create akan didapat tampilan seperti gambar dibawah ini

Buat file index.blade.php (resources/views/index.blade.php) lalu letakkan kode berikut

@extends('layout')
@section('content')
<style>
  .push-top {
    margin-top: 50px;
  }
</style>
<div class="push-top">
  @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
  <div style="margin-bottom:20px">SISTEM CRUD DENGAN LARAVEL 9 <div style="float:right"><a href="http://127.0.0.1:8000/students/create">CREATE</a> - <a href="http://127.0.0.1:8000/students">DATA LIST</a></div></div>

  <table class="table">
    <thead>
        <tr class="table-warning">
          <td>ID</td>
          <td>Name</td>
          <td>Email</td>
          <td>Phone</td>
          <td>Password</td>
          <td class="text-center">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($student as $students)
        <tr>
            <td>{{$students->id}}</td>
            <td>{{$students->name}}</td>
            <td>{{$students->email}}</td>
            <td>{{$students->phone}}</td>
            <td>{{$students->password}}</td>
            <td class="text-center">
                <a href="{{ route('students.edit', $students->id)}}" class="btn btn-primary btn-sm"">Edit</a>
                <form action="{{ route('students.destroy', $students->id)}}" method="post" style="display: inline-block">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger btn-sm"" type="submit">Delete</button>
                  </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
<div>
@endsection

Buat file edit.blade.php (resources/views/edit.blade.php) lalu letakkan kode berikut

@extends('layout')
@section('content')
<style>
    .container {
      max-width: 450px;
    }
    .push-top {
      margin-top: 50px;
    }
</style>
<div class="card push-top">
  <div class="card-header">
    Edit & Update
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('students.update', $student->id) }}">
          <div class="form-group">
              @csrf
              @method('PATCH')
              <label for="name">Name</label>
              <input type="text" class="form-control" name="name" value="{{ $student->name }}"/>
          </div>
          <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" name="email" value="{{ $student->email }}"/>
          </div>
          <div class="form-group">
              <label for="phone">Phone</label>
              <input type="tel" class="form-control" name="phone" value="{{ $student->phone }}"/>
          </div>
          <div class="form-group">
              <label for="password">Password</label>
              <input type="text" class="form-control" name="password" value="{{ $student->password }}"/>
          </div>
          <button type="submit" class="btn btn-block btn-danger">Update User</button>
      </form>
  </div>
</div>
@endsection

6. PENGUJIAN SISTEM CRUD

Ok, kita sudah selesai membuat 4 buah view yaitu layout.blade.php, index.blade.php, create.blade.php dan edit.blade.php selanjutnya kita akan mencoba menjalankan project kita di browser.

masuk ke directori project kita melalui command prompt (CMD) lalu ketikkan perintah berikut di “php artisan serve” seperti gambar dibawah ini

setelah itu kita buka browser dan ketikan url “http://127.0.0.1:8000/students/” maka kalau tidak ada error akan tampil seperti gambar dibawah ini

disini saya sudah memasukan 3 data user, jadi kalau teman-teman belum ada datanya bisa memasukan data user baru melalui URL “http://127.0.0.1:8000/students/create” dan akan muncul form seperti gambar dibawah ini

coba masukan data baru dan kemudian cek data yang kita masukan sudah masuk atau belum melalui URL “http://127.0.0.1:8000/students/” jika prosesnya berhasil maka akan tampil datanya seperti gambar dibawah ini

untuk edit data tekan tombol “Edit” yang ada dikolom “action” kalau tidak ada error akan tampil seperti gambar dibawah ini

lalu klik tombol “Update User” untuk menyimpan data yang baru diedit, untuk hapus data kita bisa menekan tombol “Delete” yang ada di kolom “Action”.

7. Penutup

Demikian Proses pembuatan sistem CRUD dengan menggunakan PHP versi 8.1.2, Laravel versi 9 dan database MySQL semoga bermanfaat.

Tutorial PHP Laravel 9 CRUD Web App dengan MySQL

Cara membuat login dan logout di flutter dengan PHP dan MySQL

Menghubungkan Flutter dengan MySQL di Localhost dan Online

Menghubungkan flutter dengan firebase

Program flutter yang populer saat ini