Tutorial Membuat Aplikasi CRUDS Sederhana Dengan Laravel

Setelah sebelumnya Kita menganal konsep CRUDS di Framework Laravel, sekarang mari Kita coba untuk praktek membuat aplikasi sederhana yang mengimplementasikan konsep CRUDS ini. Sebagai contoh, Kita akan membuat sebuah aplikasi kepegawaian sederhana yang menyimpan informasi profil yang setiap pegawai.

Yang perlu diingat saat kita membicarakan konsep CRUDS ini adalah memastikan aplikasi Kita telah terkoneksi kedalam database. Pastikan project Laravel yang akan kita kembangkan sudah di konfigurasi secara benar dan terhubung ke database. Adapun database yang Saya pakai adalah MySQL yang dapat di akses melalui PHPMyAdmin.

Konfigurasi database di Laravel

Saat pertama kali Anda membuat project Laravel baru, Anda akan menemukan file .env di root foldernya. File inilah yang akan menyimpan informasi tantang database yang akan Kita gunakan. Setelah dibuka abaikan seluruh baris yang lain dan perhatikan saja pada DB_DATABASE, DB_USERNAME dan DB_PASSWORD. isilah dengan informasi yang sesuai.

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:y1U+d7y5T/UYKmeqjnnGqIQurrXnAIKHVXqshNZ1ySA=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=localost
DB_PORT=3306
DB_DATABASE=db_kepegawaian
DB_USERNAME=root
DB_PASSWORD=test

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Mempersiapkan tabel

Karena kita akan membuat aplikasi kepegawaian, maka kita akan membuat tabel di database yang sesuai dengan informasi yang dibutuhkan.

Kolom	Type	Length
id	integer	5
nama	varchar	50
alamat	varchar	50
tanggal_lahir	date
jabatan	varchar	20
penghasilan	big integer	10

Struktur tabel tb_pegawai

Membuat Route

Sesuai dengan namanya, Route atau jalur adalah sekumpulan URL yang membagi antara satu modul dengan modul yang lainya.

Pada project Laravel Anda, pergilah ke folder routes kemudian cari file web.php. Didalamnya, tambahkan baris berikut ini:

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| 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');
})->name("welcome");

Route::get('kepegawaian/index', 'kepegawaian\KepegawaianController@index');
Route::get('kepegawaian/{id}/edit', 'kepegawaian\KepegawaianController@edit');
Route::put('kepegawaian/{id}/update', 'kepegawaian\KepegawaianController@update');
Route::get('kepegawaian/add', 'kepegawaian\KepegawaianController@add');
Route::post('kepegawaian/save', 'kepegawaian\KepegawaianController@save');
Route::get('kepegawaian/{id}/delete', 'kepegawaian\KepegawaianController@delete');
Route::get('kepegawaian/find', 'kepegawaian\KepegawaianController@find');

Masing-masing route memiliki tugas dan fungsinya tersendiri tergantung fungsi/method yang kita inginkan. Maka dari itu bila Anda perhatikan, ada Controller (KepegawaianController) yang berfungsi untuk mengolah logic pada aplikasi.

Membuat Controller

Logic dari aplikasi Laravel tersimpan didalam Controller. Controller ini juga yang berfugsi untuk mengarahkan user ke halaman tertentu pada aplikasi yang kita buat.

Untuk membuat Controller, bukalah command line kemudian masuk kedalam folder root aplikasi yang Anda buat. Lalu ketikan perintah berikut ini:

php artisan make:controller kepegawaian/KepegawaianController

Setelah berhasil, akan muncul satu fle KepegawaianController.php didalam project aplikasi. File tersebut tersimpan didalam folder app>Http>Controllers. Selanjutnnya tabahkan method berikut ini.

Method bisa saja diibaratkan sebagai eksekutor. Saat kita memasukan perintah/action kedalam aplikasi, maka tugas dari Controller ini yang akan menjalankan perintah berdasarkan instruksinya.

<?php

namespace App\Http\Controllers\kepegawaian;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;

class KepegawaianController extends Controller
{
    public function index(){
        //menampilakan halaman awal saat mengakses aplikasi
        //Menampilkan tabel data pegawai
        $table=DB::table("tb_pegawai")->get();
        return view("kepegawaian/index", compact("table"));
    }
    
    public function add(){
        //Menampilkan form tambah data pegawai
        return view("kepegawaian/add");
    }
    
    public function save(Request $request){
        //menambahkan data baru kedalam database
        DB::table("tb_pegawai")
        ->insert([
            "nama"=>$request["nama_lengkap"],
            "alamat"=>$request["alamat"],
            "tanggal_lahir"=>$request["tanggal_lahir"],
            "jabatan"=>$request["jabatan"],
            "penghasilan"=>$request["penghasilan"]
        ]);

        return redirect('kepegawaian/index');
    }
    
    public function edit($id){
        $table=DB::table("tb_pegawai")
        ->where("id", $id)
        ->first();

        return view("kepegawaian/edit", compact("table"));
    }
    
    public function update(Request $request, $id){
        DB::table("tb_pegawai")
        ->where("id",$id)
        ->update([
            "nama"=>$request["nama_lengkap"],
            "alamat"=>$request["alamat"],
            "tanggal_lahir"=>$request["tanggal_lahir"],
            "jabatan"=>$request["jabatan"],
            "penghasilan"=>$request["penghasilan"]
        ]);

        return redirect('kepegawaian/index');
    }
    
    public function delete($id){
        DB::table("tb_pegawai")
        ->where("id", $id)
        ->delete();

        return redirect('kepegawaian/index');
    }
    
    public function find(Request $request){
        $table = DB::table("tb_pegawai")
        ->where('nama','like',"%".$request->kata_kunci."%")
        ->get();

        return view("kepegawaian/index", compact("table"));
    }
}

Membuat Views

Views adalah antar muka/user interface dari aplikasi yang akan dibuat. Untuk membuat Views masuk kedalam project laravel kemudian masuk ke sub folder Resources->Views.

index.blade.php

File ini berisi daftar pegawai. Didalam file ini pula, berisi form untuk melakukan pencarian pegawai.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">Daftar pegawai </div>

        <div class="card-body">
            <a class="btn btn-primary btn-sm" href="add" style="margin-bottom:15px">Tambah</a>
            <form action="find" method="GET">
            <span>Pencarian pegawai</span>
                <div class="form-row">
                    <div class="col-10  ">
                        <input type="text" class="form-control form-control-sm" placeholder="Masukan nama pegawai" name="kata_kunci" style="margin-bottom:15px" >
                    </div>
                    <div class="col">
                        <button type="submit" class="btn btn-primary btn-sm btn-block">Cari</button>
                    </div>
                    <div class="col">
                        <a href="index" class="btn btn-danger btn-sm btn-block">Reset</a>
                    </div>
                </div>
            </form>

            <table class="table table-striped">
                <tr>
                    <th>Nama</th>
                    <th>Alamat</th>
                    <th>Tanggal lahir</th>
                    <th>Jabatan</th>
                    <th>Penghasilan</th>
                    <th>Action</th>
                </tr>
                @foreach($table as $row)
                <tr>
                    <td>{{$row->nama}}</td>
                    <td>{{$row->alamat}}</td>
                    <td>{{$row->tanggal_lahir}}</td>
                    <td>{{$row->jabatan}}</td>
                    <td>{{$row->penghasilan}}</td>
                    <td><a class="btn btn-success btn-sm" href="{{$row->id}}/edit">Edit</a> <a class="btn btn-danger btn-sm" href="{{$row->id}}/delete">Delete</a></td>
                </tr>
                @endforeach
            </table>
        </div>
    </div>
</div>
@endsection

add.blade.php

File ini berisi form yang digunakan untuk menambahkan data pegawai baru.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">Tambah data pegawai</div>

        <div class="card-body">
        <form action="save" method="POST">
            {{ csrf_field() }}            
            <div class="mb-3">
                <label class="form-label"><b>Nama lengkap</b></label>
                <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama lengkap" required>
            </div>
            <div class="mb-3">
                <label class="form-label"><b>Alamat</b></label>
                <input type="text" class="form-control" name="alamat" placeholder="Alamat" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label"><b>Tanggal lahir</b></label>
                <input type="text" class="form-control" name="tanggal_lahir" placeholder="Tanggal lahir" required>
            </div>
            <div class="mb-3">
                <label class="form-label"><b>Jabatan</b></label>
                <input type="text" class="form-control" name="jabatan" placeholder="Jabatan" required>
            </div>

            <div class="mb-3">
                <label class="form-label"><b>Penghasilan</b></label>
                <input type="number" class="form-control" name="penghasilan" placeholder="Penghasilan" required>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
        </form>
        </div>
    </div>
</div>
@endsection

edit.blade.php

File ini berisi form yang digunakan untuk mengedit pegawai jika ada perubahan data.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">Edit data pegawai</div>

        <div class="card-body">
        <form action="update" method="POST">
            {{ csrf_field() }} {{ method_field('PUT') }}   
            <div class="mb-3">
                <label class="form-label"><b>Nama lengkap</b></label>
                <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama lengkap" value="{{$table->nama}}" required>
            </div>
            <div class="mb-3">
                <label class="form-label"><b>Alamat</b></label>
                <input type="text" class="form-control" name="alamat" placeholder="Alamat" value="{{$table->alamat}}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label"><b>Tanggal lahir</b></label>
                <input type="text" class="form-control" name="tanggal_lahir" placeholder="Tanggal lahir" value="{{$table->tanggal_lahir}}" required>
            </div>
            <div class="mb-3">
                <label class="form-label"><b>Jabatan</b></label>
                <input type="text" class="form-control" name="jabatan" placeholder="Jabatan" value="{{$table->jabatan}}" required>
            </div>

            <div class="mb-3">
                <label class="form-label"><b>Penghasilan</b></label>
                <input type="number" class="form-control" name="penghasilan" placeholder="Penghasilan" value="{{$table->penghasilan}}" required>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Update</button>
        </form>
        </div>
    </div>
</div>
@endsection