Setelah sebelumnya kita telah belajar bagaimana cara kerja model pada laravel, Serta membuat fake data dengan model Factory, kini saat nya kita akan membuat sebuah fitur yang terdiri dari form yang akan digunakan untuk menyimpan data ke database sesuai dengan inputan yang kita masukkan.
Membuat Controller
Tentunya melanjutkan tutorial sebelumnya, kita masih akan menggunakan model Post, maka yang perlu kita lakukan selanjutnya adalah membuat PostController. Mungkin akan membenak pertanyaan, wajib nggak sih menggunakan nama PostController ? Jawabannya, nggak juga. Karena yang akan berperan nantinya adalah method yang terdapat didalamnya. Namun agar terlihat lebih rapi, maka setiap fitur utama yang akan kita buat di ikuti dengan controller tersendiri. Misal, untuk fitur Postingan, maka sebaiknya di handle oleh controller tersendiri, dalam hal ini PostController, agar kedepannya dapat lebih mudah di maintenance.
Ok, Silahkan buat PostController terlebih dahulu dengan command (buat yang masih bingung tentang controller, bisa merujuk ke artikel sebelumnya, Membuat Controller Pada Laravel) :
php artisan make:controller PostController
Buka file app/Http/Controllers/PostController.php maka anda akan mendapati potongan code berikut :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
//
}
Membuat Form Inputan
Sebelum menyimpan data kedatabase, tentunya kita membutuhkan sebuah form untuk menginput data. Langsung saja, silahkan buat add method terlebih dahulu didalam PostController :
public function add()
{
return view('post.add');
}
Sehingga PostController akan menjadi seperti ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function add()
{
return view('post.add');
}
}
Pada line ke 11, kita meminta view add yang terdapat didalam folder post dengan path : resources/views.
Maka silahkan folder post didalam path tersebut. Kemudian buat file add.blade.php didalam folder post. Kemudian tambahkan potongan code berikut :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Form Input Data</h3>
</div>
<div class="panel-body">
<form role="form" method="POST" action="{{ route('post.save') }}">
{{ csrf_field() }}
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" required="">
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger btn-sm">Kirim</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Langkah terakhir agar view diatas dapat kita akses, maka yang perlu kita lakukan adalah membuat route. Pada case kali ini kita bersepakat untuk menampilkan view diatas maka cukup mengakses url localhost/daengweb.id/public/post/add (Catatan: daengweb.id adalah folder project saya) atau localhost:8000/post/add. Tambahkan code berikut pada routes/web.php :
Route::get('/post/add', 'PostController@add')->name('post.add');
Jika kita mengakses url diatas, maka akan tampak seperti ini :
Menyimpan Data ke Database
Sampai disini, cukup mudah bukan ? Hebat, anda sudah bisa sejauh ini. Langkah terakhir adalah meminta data dari form kemudian menyimpannya ke database dengan model Post. Gimana caranya ? Buat save method terlebih dahulu dengan menambahkan potongan code berikut ;
public function save(Request $request)
{
//validasi data
$this->validate($request, [
'title' => 'required|max:255|unique:posts|string'
]);
//menyimpan ke table posts kemudian redirect page
$post = Post::create(['title' => $request->title]);
return redirect(route('post.add'));
}
Pada method diatas kita meminta untuk menggunakan model Post, maka tambahkan use statements berikut pada Top of PostController :
use App\Post;
Sehingga PostController selengkapnya akan menjadi seperti ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
public function add()
{
return view('post.add');
}
public function save(Request $request)
{
//validasi data
$this->validate($request, [
'title' => 'required|max:255|unique:posts|string'
]);
//menyimpan ke table posts kemudian redirect page
$post = Post::create(['title' => $request->title]);
return redirect(route('post.add'));
}
}
Ohya, jangan lupa, pada form view kita akan mengirim action dengan route post.save maka yang perlu kita lakukan adalah membuat route tersebut dengan name post.save. Buka routes/web.php kemudian tambahkan potongan code berikut :
Route::post('/post/add', 'PostController@save')->name('post.save');
Sampai disini sebenarnya sudah selesai untuk proses penyimpanan kedatabase sesuai dengan inputan yang anda masukkan pada form yang telah dibuat. Silahkan untuk melakukan testing input data kemudian cek table posts apakah berhasil menyimpan atau tidak.
Akan tetapi cukup repot rasanya setelah menginput kita harus mengecek database kembali untuk memastikan sudah tersimpan atau tidak, maka sedikit tambahan kita akan membuat fitur untuk menampilkan data.
Menampilkan data dari database
Modifikasi method add, dengan menambahkan beberapa potongan code sehingga akan menjadi seperti ini :
public function add()
{
$post = Post::all();
return view('post.add', compact('post'));
}
Kemudian pada view : resources/views/post/add.blade.php tambahkan baris berikut :
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Post Data</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
@if ($post->count() > 0)
@foreach ($post as $posts)
<tr>
<td>{{ $posts->title }}</td>
</tr>
@endforeach
@else
<tr>
<td>Tidak ada data</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
Sehingga full code dari add.blade.php akan menjadi seperti berikut ;
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Form Input Data</h3>
</div>
<div class="panel-body">
<form role="form" method="POST" action="{{ route('post.save') }}">
{{ csrf_field() }}
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" required="">
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger btn-sm">Kirim</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Post Data</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
@if ($post->count() > 0)
@foreach ($post as $posts)
<tr>
<td>{{ $posts->title }}</td>
</tr>
@endforeach
@else
<tr>
<td>Tidak ada data</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Mudah ? Atau jangan-jangan mudah banget ?!
Udah, udah, jangan terlalu lama pdktnya, jadi kita cukupkan sampai disini untuk artikel kali ini. Semoga bermanfaat dan selamat jatuh cinta!
Comments