Pada tutorial sebelumnya kita berhasil membuat CRUD menampilkan data dari database dengan Laravel, maka kali ini tutorial Laravel 6x akan membahas membuat CRUD input data dengan Laravel.
Disini kita masih bermain-main dengan database dan table “kontaks” yang telah berhasil kita buat pada kasus sebelumnya. Dan berikut ini adalah langkah-langkahnya.
Menambahkan Tombol Tambah Pada File View
Untuk menginput data ke database MySQL dengan Laravel tidaklah terlalu sulit. Kebetulan pada tutorial sebelumnya kita telah berhasil membuat file controller pada folder “app/Http/Controllers/KontakController.php” dan kita telah membuat satu file view pada folder “respurces/views/kontak/index.blade.php”.
Nah, sekarang buka file index.blade.php pada folder “respurces/views/kontak/index.blade.php”, dan selanjutnya kita edit dan tambahkan kode sehingga isi dari file “respurces/views/kontak/index.blade.php” menjadi seperti berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Daftar Kontak</div>
@if($message = Session::get('status'))
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<p>{{$message}}</p>
</div>
@endif
<div class="card-body">
<a href="{{route('kontak.create')}}" class="btn btn-sm btn-success">Tambah</a>
<table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Email</th>
<th>Pekerjaan</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
?>
@foreach($kontak as $row)
<tr>
<td>{{$no++}}</td>
<td>{{$row->nama_lengkap}}</td>
<td>{{$row->email}}</td>
<td>{{$row->pekerjaan}}</td>
<td>{{$row->alamat}}</td>
<td>
<a href="{{route('kontak.edit',$row->id)}}" class="btn btn-sm btn-success">Edit</a>
<form action="{{route('kontak.destroy',$row->id)}}" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger">Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
Perhatikan pada file index.blade.php diatas, kita telah menambahkan sebuah tombol “Tambah”, serta melakukan beberapa perubahan pada tombol “Edit” dan tombol “Hapus”. Tombol tambah nantinya berguna untuk menampilkan form input data pada Laravel, tombol edit untuk melakukan edit data, sedangkan tombol hapus untuk menghapus data.
Dan mari kita coba jalankan project Laravel kita dengan perintah artisan berikut
php artisan serveKemudian buka web browser dan akses url berikut:
localhost:8000/kontakJika berjalan dengan baik maka akan ditampilkan halaman seperti berikut:
Menambahkan Method Create Pada Controller
Kemudian kita buka file controller pada folder “app/Http/Controllers/KontakController.php”, dan kita tambahkan potongan kode pada method create() seperti berikut.
public function create()
{
return view('kontak.create');
}Kode pada method create tersebut mengarahkan kita untuk membuka file view create.index.php pada folder “respurces/views/kontak/create.blade.php”. Nah selanjutnya kita buatkan file “create.blade.php” nya.
Membuat File View Tambah Data
Langkah selanjutnya adalah kita buatkan file view nya, yaitu create.blade.php pada folder “respurces/views/kontak/create.blade.php”.
Teman-teman buka jendela Terimanal/Command Proompt, kemudian gunakan perintah change directory (cd) dan arahkan project kerja ke folder “resources/views/kontak”, kemudian kita buatkan file view “create.blade.php” dengan perintah berikut:
touch create.blade.phpKemudian, kita buka file view yang telah kita buat dan tambahkan kode, sehinga menjadi seperti berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Tambah Data</div>
<div class="card-body">
<form method="POST" action="{{ route('kontak.store') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Nama Lengkap</label>
<div class="col-md-6">
<input id="nama_lengkap" type="text" class="form-control @error('nama_lengkap') is-invalid @enderror" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required autocomplete="nama_lengkap" autofocus>
@error('nama_lengkap')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Pekerjaan</label>
<div class="col-md-6">
<input id="pekerjaan" type="text" class="form-control @error('pekerjaan') is-invalid @enderror" name="pekerjaan" value="{{ old('pekerjaan') }}" required autocomplete="pekerjaan" autofocus>
@error('pekerjaan')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Alamat</label>
<div class="col-md-6">
<textarea id="alamat" class="form-control @error('alamat') is-invalid @enderror" name="alamat" value="{{ old('alamat') }}" required autocomplete="alamat" autofocus></textarea>
@error('alamat')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Simpan') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Dan mari kita coba apa yang sudah kita buat, sekarang jalankan project laravel dengan perintah artisan berikut:
php artisan serveDan kita coba akses tombol Tambah, jika berjalan dengan baik maka akan ditampilkan form input data seperti berikut.
Kemudian, perlu diperhatikan pada form tersebut kita mengarahkan action form nya menuju route(‘kontak.store’), sehingga kita perlu menambahkan method store() pada file controller “KontakController.php”.
Menambahkan Method Store Pada Controller
Mari kita buka kembali file controller “KontakController.php” pada folder “app/Http/Controllers/KontakController.php”, dan kita tambahkan beberapa potong kode pada method store() seperti berikut:
public function store(Request $request)
{
//pertama cek validasi
$this->validate($request,[
'nama_lengkap' => 'required',
'email' => 'required',
'pekerjaan' => 'required',
'alamat' => 'required'
]);
//selanjutnya insert ke database
DB::table('kontaks')->insert([
'nama_lengkap' => $request->nama_lengkap,
'email' => $request->email,
'pekerjaan' => $request->pekerjaan,
'alamat' => $request->alamat
]);
//setelah berhasil insert di redirect
return redirect('/kontak')->with('status','Data Kontak Berhasil Ditambahkan');
}Nah, sampai disini tahapan pembuatan CRUD Input Data Dengan Laravel sudah selesai, teman-teman bisa mencoba menambahkan satu record data seperti berikut:
Jika berjalan dengan baik maka record akan terinput kedatabase seperti berikut.
Akhirnya tutorial Laravel 6.x membuat CRUD input data dengan Laravel selesai sampai disini. Semoga tutorial kali ini dapat membantu dan memberi manfaat. Pada tutorial selanjutnya akan kita bahas bagaimana membuat CRUD dengan Laravel dengan pembahasan edit dan update data ke database dengan Laravel. Terimakasih…
Selesai.
