Menbuat Create, Read, Update dan Delete (CRUD) di Laravel
pada tutorial kali ini kita akan membuat CRUD dilaravel jadi langsung saja
pertama buat project dengan perintah
composer create-project laravel/laravel crud-laravel
tunggu proses download sampai selesai.
buka file project di editor, disini Saya menggunkan VScode kemudian buat database dengan nama crud_laravel di phpmyadmin dan atur koneksi databsenya di file .env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud_laravel DB_USERNAME=root DB_PASSWORD=
selanjutnya kita buat struktur tabel dengan migrations dengan perintah di terminal/cmd
php artisan make:migration artikel
selanjutnya kita edit file migration yang behasil di generate dengan menambahkan field yang dibutuhkan di table terse but seperti berikut ini
crud-laravel/database/migrations/2021_09_04_050427_artikel.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class Artikel extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('artikel', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->mediumText('deskripsi');
$table->string('kategori');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('artikel');
}
}selanjutnya kembali lagi terminal/cmd kemudian kita generate tabelnya dengan perintah
php artisan migrate
Jika berhasil migrate maka di database crud_laravel ada tabel artikel.
selanjutnya kita akan buat model artikel dengan perintah
php artisan make:model Artikel
selanjutnya edit file model tersebut menjadi seperti berikut ini
crud-laravel/app/Models/Artikel.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Artikel extends Model
{
use HasFactory;
protected $table = 'artikel';
protected $fillable = [
'judul',
'deskripsi',
'kategori',
];
}selanjutnya kita buat controller artikel dengan perintah
php artisan make:controller ArtikelController
selanjutnya edit file controller artikel tersebut menjadi seperti berikut ini
crud-laravel/app/Http/Controllers/ArtikelController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Artikel;
class ArtikelController extends Controller
{
// untuk menampilkan list data
public function index()
{
$data = Artikel::paginate(5);
return view('artikel.index', compact('data'));
}
// untuk menampilkan form input
public function create()
{
return view('artikel.create');
}
// untuk menyimpan data
public function store(Request $request)
{
$model = $request->all();
Artikel::create($model);
return redirect('artikel');
}
// untuk menampilkanform edit
public function edit($id)
{
$data = Artikel::find($id);
return view('artikel.edit', compact('data'));
}
// untuk mengupdate data
public function update(Request $request)
{
$model = $request->all();
$data = Artikel::find($model['id']);
$data->update($model);
return redirect('artikel');
}
// untuk menhapus data
public function destroy($id)
{
$data = Artikel::find($id)->delete();
return redirect('artikel');
}
}selanjutnya kita akan membuat form until menampilkan dan menginput datanya. silahkan buat folder artikel di dalam folder resource/view/artikel dan dialam folder artikel buat 3 file dengan nama index.blade,php, create.blade.php dan edit.blade.php
selanjutnya kita kirtikkan sintax htmlnya untuk membuat tampilannya seperti berikut ini
file index.blade.php untuk menampilkan list data artikel
crud-laravel/resources/views/artikel/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Laravel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<h2>Artikel</h2>
<a href="{{route('artikel.create')}}" class="btn btn-success">Add New Data</a>
<br>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th width="6%">No</th>
<th width="17%">Judul</th>
<th width="*%">Deskripsi</th>
<th width="13%">Kategori</th>
<th width="12%">Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($data as $key => $d )
<tr>
<td>{{++$key}}</td>
<td>{{ $d->judul}}</td>
<td>{{ $d->deskripsi}}</td>
<td>{{ $d->kategori}}</td>
<td>
<a href="{{url('artikel/edit/'.$d->id)}}" class="btn btn-warning btn-sm">edit</a>
<a href="{{url('artikel/delete/'.$d->id)}}" class="btn btn-danger btn-sm">delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $data->links()}}
</div>
</body>
</html>file create.blade.php untuk menampilkan form input data artikel
crud-laravel/resources/views/artikel/create.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<h2>Form Artikel</h2>
<p>create new data</p>
<form action="{{ route('artikel.store') }}" method="POST">
@csrf
<div class="form-group">
<label for="judul">Judul:</label>
<input type="text" class="form-control" placeholder="Judul" name="judul" required>
</div>
<div class="form-group">
<label for="deskripsi">Deskripsi:</label>
<textarea class="form-control" rows="5" cols="5" name="deskripsi" placeholder="Deskripsi"></textarea>
</div>
<div class="form-group">
<label for="kategori">Kategori:</label>
<select name="kategori" class="form-control" required>
<option value="">-- pilih --</option>
<option>php</option>
<option>java</option>
<option>js</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</body>
</html>
file edit.blade.php untuk menampilkan form edit data artikel
crud-laravel/resources/views/artikel/edit.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<h2>Form Artikel</h2>
<p>create new data</p>
<form action="{{ route('artikel.update') }}" method="POST">
<input type="hidden" name="id" value="{{$data->id}}">
@csrf
<div class="form-group">
<label for="judul">Judul:</label>
<input type="text" class="form-control" placeholder="Judul" name="judul" required value="{{$data->judul}}">
</div>
<div class="form-group">
<label for="deskripsi">Deskripsi:</label>
<textarea class="form-control" rows="5" cols="5" name="deskripsi">{{$data->deskripsi}}</textarea>
</div>
<div class="form-group">
<label for="kategori">Kategori:</label>
<select name="kategori" class="form-control" >
<option {{$data->kategori == 'php' ? 'selected="selected"' : ''}}>php</option>
<option {{$data->kategori == 'java' ? 'selected="selected"' : ''}}>java</option>
<option {{$data->kategori == 'js' ? 'selected="selected"' : ''}}>js</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</body>
</html>
Jika Judah terakhir kita buatkan routenya agar data diakses melaui broser, edit file web.php
crud-laravel/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArtikelController as Artikel;
Route::get('/', function () {
return view('welcome');
});
# route artikel
Route::group(['prefix' => '/artikel'], function () {
Route::get('/', [Artikel::class, 'index'])->name('artikel');
Route::get('/create', [Artikel::class, 'create'])->name('artikel.create');
Route::post('/store', [Artikel::class, 'store'])->name('artikel.store');
Route::get('/edit/{id}', [Artikel::class, 'edit'])->name('artikel.edit');
Route::post('/update', [Artikel::class, 'update'])->name('artikel.update');
Route::get('/delete/{id}', [Artikel::class, 'destroy'])->name('artikel.delete');
});
php artisan serve
kemudian akses broser 127.0.0.1:8000/artikel
untuk source code lengkapnya bisa download di sini-->link GitHub
sekian dulu tutorial kali ini dan terima kasih.
Leave a Comment