Halo artisan lover’s, Laravel saat ini adalah merupakan salah satu framework yang banyak diminati, selain dokumentasi yang lengkap, perkembangan framework Laravel terlihat begitu cepat, inilah yang menjadi salah satu dari sekian banyak alasan mengapa banyak developer menyukai frmaework Laravel.
Ya, tutorial Laravel kali ini akan memberi Anda contoh bagaimana memulai membuat project CRUD sederhana menggunakan Laravel 7. Artikel ini cukup simpel dan pendek serta sederhana, ya karena artikel Laravel 7 CRUD Example ini ditujukan bagi kalangan pemula. Artikel ini membahas secara rinci tutorial laravel 7 untuk pemula. langkah demi langkah menjelaskan cara membuat crud di laravel 7. Disini Anda akan diberikan contoh operasi crud di laravel 7.
Saat artikel ini dibuat framework Laravel sudah mencapai versi Laravel 8, Laravel 7 memberikan beberapa fitur baru dan dukungan LTS. Jadi jika Anda baru mengenal laravel maka tutorial ini akan membantu Anda membuat aplikasi insert update delete di laravel 7.
Untuk memulainya Anda hanya perlu mengikuti beberapa langkah dan Anda akan mendapatkan dasar menggunakan controller, model, route, bootstrap 4 dan blade.
Dalam tutorial ini, Anda akan mempelajari operasi yang sangat mendasar dengan laravel versi 7. Dan berikut adalah langkah demi langkah dari awal sehingga, Anda akan lebih mudah memahami jika Anda baru dalam laravel.
- Intsall Laravel 7
Sebelum melakukan instalasi framework Laravel 7 pada project web server, tidak ada salahnya kalau kita terlebih dahulu sedikit mengulas kebutuhan Laravel 7 yang harus dipenuhi web server. Ya, Laravel 7 tidak seperti versi sebelumnya disini untuk menggunakan Laravel 7 maka web server harus memenuhi beberapa kriteria seperti; dibutuhkan minimal versi PHP 7.2* keatas, kemudian pastikan juga pada web server Anda telah mengaktifkan ekstensi seperti BCMath PHP Extension, Ctype PHP Extension, Fileinfo PHP extension, JSON PHP Extension, Mbstring PHP Extension, OpenSSL PHP Extension, PDO PHP Extension, Tokenizer PHP Extension, XML PHP Extension.
Melakukan instalasi project Laravel 7 pada project Anda dapat dilakukan melalui composer dengan mengetikan perintah berikut pada Terminal/ Command Prompt:
composer create-project --prefer-dist laravel/laravel namaprojectandaDan berikut ini adalah contoh berjalannya proses instalasi Laravel 7 pada jendela Terminal/ Command Prompt.
Setelah proses instalasi selesai, Anda perlu mencobanya apakah project Laravel 7 ter-install sempurna ada web server, Anda perlu menjalankan perintah php artisan serve pada project Laravel melalui jendela Terminal/Command Prompt, jalankan perintah berikut :
Lalu buka web browser dan jalankan URL localhost:8000, jika berjalan dengan baik maka Anda akan menjumpai halaman project Laravel 7 seperti berikut :
- Database Configuration
Menghubungkan project Laravel 7 Anda dengan databse MySQL dapat dilakukan dengan 2 cara yaitu; pertama Anda dapat menghubungkan project Laravel 7 ke database MySQL lewat file .env, kemudian cara kedua Anda dapat menghubungkan melalui file “config/database.php”.
Berikut adalah cara menghubungkan database Anda melalui file .env :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud_example //nama database
DB_USERNAME=root //user database
DB_PASSWORD= //password database jika anda- Membuat Tabel Pegawai dengan Migration
Pada artikel Laravel 7 CRUD Example with jQuery Datepicker ini kita akan membuat crud aplikasi data pegawai, dan disini kita akan membuat tabel “Pegawais” menggunakan Laravel 7 melalui perintah php artisan, sehingga perintah tersebut telihat seperti berikut ini :
php artisan make:migration create_pegawais_table –create=pegawaisSetelah menjalankan perintah artisan diatas, maka akan kita jumpai satu file tambahan pada folder “database/migrations” seperti ….create_pegawais_table.php, untuk menciptakan tabel pegawai pada database Anda perlu memodifikasi file migration dengan menambahkan beberapa potongan code, buka file migration tersebut dan lengkapi potongan code seperti berikut :
Sekarang jalankan file migration dengan mengetikkan perintah artisan seperti berikut :
Jika berjalan dengan baik, maka Anda akan menjumpai satu buah tabel tambahan “pegawais” pada database MySQL project Laravel 7 Anda.
- Menambahkan Route Resource
Disini dalam kebutuhan routing saya hanya menambahkan route resource untuk menghandel routing aplikasi CRUD Laravel 7 kali ini, cukup simpel bukan? satu buah routing route resource sudah menghandel kebutuhan insert, update, dan delete. Oke langsung saja, buka folder “routes/web.php” lalu tambahkan potongan code berikut :
Route:resource(‘pegawai’,’PegawaiController’);- Menambahkan Controller dan Model
Selanjutnya kita perlu menambahkan controller dan model pada project Laravel 7. Controller digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang dibutuhkan, mengambil respon dan mengirimkannya ke view.
Untuk membuat controller dapat dilakukan melalui jendela Terminal/ Command Prompt, ketikkan perintah artisan berikut :
php artisan make:controller PegawaiController –resource –model=PegawaiPerintah artisan diatas jika dijalankan akan meng-generate satu buah controller “PegawaiController.php” dan satu buah model “Pegawai.php”. Pada controller “PegawaiController.php” akan kita jumpai sebanyak 7 methods yang secara otomatis terbentuk ketika kita menjalankan perintah artisan controller diatas, diantaranya :
1)index()
2)create()
3)store()
4)show()
5)edit()
6)update()
7)destroy()
Dan berikut adalah kebutuhan lengkap controller pada contoh Laravel 7 CRUD kali ini :
<?php
namespace App\Http\Controllers;
use App\Pegawai;
use Illuminate\Http\Request;
class PegawaiController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$pegawai = Pegawai::all();
return view('pegawai.index',compact('pegawai'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('pegawai.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data=array(
'nama' => $request->input('nama'),
'tgl_lahir' => $request->post('tgl_lahir')
);
Pegawai::create($data);
return redirect()->route('pegawai.index');
}
/**
* Display the specified resource.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function show(Pegawai $pegawai)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function edit(Pegawai $pegawai)
{
return view('pegawai.edit',compact('pegawai'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Pegawai $pegawai)
{
$pegawai->update($request->all());
return redirect()->route('pegawai.index');
}
/**
* Remove the specified resource from storage.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function destroy(Pegawai $pegawai)
{
$pegawai->delete();
return redirect()->route('pegawai.index');
}
}
Kemudian berikut ini adalah kebutuhan model :
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Pegawai extends Model
{
protected $table="pegawais";
protected $fillable= [
'id','nama','tgl_lahir'
];
public $timestamps = false;
}
- Menambahkan Blade Files Untuk Kebutuhan CRUD
Tahap selanjutnya adalah kita perlu menambahkan beberapa file blade untuk mendukung kebutuhan tampilan aplikasi CRUD Laravel 7. Disini saya menambahkan file layour dan menambahkan folder “pegawai” dimana dalam tabel pegawai inilah saya meletakkan file-file blade untuk kebutuhan aplikasi CRUD. Sehingga jika memiliki file blade seperti berikut :
Pada folder “layouts” terdiri atas :
app.blade.php
Pada file app.blade.php saya memanggil library jQuery Datepicker, sehingga isi dari file app.blade.php adalah seperti berikut :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-red shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
Pada folder “pegawai” terdiri atas :
index.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai
<a href="{{route('pegawai.create')}}" class="btn btn-success btn-sm btn-flat pull-right"> Tambah</a>
</div>
<div class="card-body">
<table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Tanggal Lahir</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($pegawai as $row)
<tr>
<td>{{$row->id}}</td>
<td>{{$row->nama}}</td>
<td>{{$row->tgl_lahir}}</td>
<td><form action="{{route('pegawai.destroy',$row->id)}}" method="POST">
<a href="{{route('pegawai.edit',$row->id)}}" class="btn btn-sm btn-primary">Edit</a>
<button type="submit" class="btn btn-sm btn-danger">Hapus</button>
@csrf
@method('DELETE')
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
create.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai</div>
<div class="card-body">
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('pegawai.store')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Nama</label>
<div class="col-lg-12">
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Tanggal Lahir</label>
<div class="col-lg-12">
<input type="text" name="tgl_lahir" id="date" placeholder="Tanggal Lahir" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<a href="{{route('pegawai.index')}}" class="btn btn-danger" data-dismiss="modal">Back</a>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
});
});
</script>
@endsection
edit.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai</div>
<div class="card-body">
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('pegawai.update',$pegawai->id)}}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Nama</label>
<div class="col-lg-12">
<input type="text" name="nama" placeholder="Nama Lengkap" value="{{$pegawai->nama}}" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Tanggal Lahir</label>
<div class="col-lg-12">
<input type="text" name="tgl_lahir" id="date" value="{{$pegawai->tgl_lahir}}" placeholder="Tanggal Lahir" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<a href="{{route('pegawai.index')}}" class="btn btn-danger" data-dismiss="modal">Back</a>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
});
});
</script>
@endsection
Sehingga tampilan dari aplikasi CRUD Laravel 7 kali ini akan tampak seperti berikut :
Berikut ini adalah tampilan dari form tambah data.
Dan berikut ini adalah tampilan dari form edit data.
