Halo teman-teman semuanya, di artikel sebelumnya kita semua sudah belajar bagaiamana cara menampilkan data dari database, di artikel kali ini kita semua akan belajar bagaimana cara melakukan proses insert data atau memasukkan data ke dalam database.
Langkah 1 - Membuat Function Create dan Store
Pertama, kita akan membuat 2 method/function yaitu create dan store, untuk method create nantinya akan kita gunakan untuk menampilkan form dan method store akan kita gunakan untuk memproses data yang di kirim oleh form tersebut.
Sekarang, silahkan buka file app/Http/Controllers/PostController.php kemudian tambahkan kode berikut ini di bawah method index.
/**
* create
*
* @return void
*/
public function create()
{
return view('post.create');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
$this->validate($request, [
'image' => 'required|image|mimes:png,jpg,jpeg',
'title' => 'required',
'content' => 'required'
]);
//upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
$post = Post::create([
'image' => $image->hashName(),
'title' => $request->title,
'content' => $request->content
]);
if($post){
//redirect dengan pesan sukses
return redirect()->route('post.index')->with(['success' => 'Data Berhasil Disimpan!']);
}else{
//redirect dengan pesan error
return redirect()->route('post.index')->with(['error' => 'Data Gagal Disimpan!']);
}
}
Di atas kita menambahkan 2 function baru, yaitu :
function create
Function create akan kita gunakan untuk menampilkan form, dimana form ini akan digunakan oleh user untuk melakukan input data, seperti memasukkan data tiltle, content dan gambar.
function store
Function store akan digunakan untuk melakukan proses insert data ke dalam database, di dalam function store kita membuat sebuah validasi, dimana data akan di masukkan ke dalam database jika validasi tersebut sudah terpenuhi. Beirkut ini beberapa validasi yang akan digunakan saat menambahkan data ke dalam database.
$this->validate($request, [
'image' => 'required|image|mimes:png,jpg,jpeg',
'title' => 'required',
'content' => 'required'
]);
Di atas untuk filed image kita buat validasi dengan required, yang artinya filed image ini wajib diisi, kemudian diikuti dengan image yang artinya file yang di upload harus berupa gambar dan yang terakhir adalah mimes, dimana mimes ini adalah extension dari file gambar yang di upload, yaitu png, jpg dan jpeg.
Kemudian untuk field title kita hanya buat required, yang artinya harus wajiib diisi. Dan untuk content juga sama, kita menggunakan validasi required, yang artinya wajib diisi.
Jika validasi di atas terpenuhi, maka akan melakukan insert data ke dalam database dan melaukan upload gambar ke dalam server. Kurang lebih menggunakan kode seperti berikut ini :
//upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
$post = Post::create([
'image' => $image->hashName(),
'title' => $request->title,
'content' => $request->content
]);
Di atas untuk gambar yang akan diupload ke server, akan di letakkan di dalam folder storage/app/public/posts/ dan untuk nama file yang diupload akan otomatis direname menjadi random dengan method hashName().
Kemudian di bawahnya kita membuat sebuah kondisi dimana apabila variable $post bernilai true yang artinya data berhasil di insert ke database, maka akan membuat sebuah session dengan nama key success dan valuenya adalah data berhasil disimpan!.
Dan jika $post bernilai false atau data gagal di insert ke dalam database, maka akan membuat session dengan key error dan valuenya adalah data gagal disimpan!.
Kemudian akan di redirect ke sebuah route dengan nama post.index dengan membahwa session di atas. Kurang lebih seperti berikut ini :
if($post){
//redirect dengan pesan sukses
return redirect()->route('post.index')->with(['success' => 'Data Berhasil Disimpan!']);
}else{
//redirect dengan pesan error
return redirect()->route('post.index')->with(['error' => 'Data Gagal Disimpan!']);
}
Langkah 2 - Membuat View Create
Sekarang. kita lanjutkan untuk membuat view untuk menampilkan form post, silahkan buat file baru dengan nama create.blade.php di dalam folder resources/views/post dan masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Tambah Post'])
@section('content')
<div class="container mx-auto mt-10 mb-10">
<div class="bg-white p-5 rounded shadow-sm">
<form action="{{ route('post.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div>
<label>GAMBAR POST</label>
<input type="file" name="image"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white mt-2">
@error('image')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<label>JUDUL POST</label>
<input type="text" name="title" value="{{ old('title') }}"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white mt-2"
placeholder="judul post">
@error('title')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<label>KONTEN POST</label>
<textarea name="content">{{ old('content') }}</textarea>
@error('content')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<button type="submit"
class="bg-indigo-500 text-white p-2 rounded shadow-sm focus:outline-none hover:bg-indigo-700">SIMPAN POST</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
@endsection
Di atas untuk form akan kita arahkan ke sebuah route yang bernama post.store, dimana route ini akan menuju ke sebuah function store yang berada di dalam controller post.
<form action="{{ route('post.store') }}" method="POST" enctype="multipart/form-data">
Dan jangan lupa!, jika kita membuat sebuah form dengan upload sebuah berkas, entash itu file ataupun gambar, jangan lupa untuk menyertakan attribute enctype="multipart/form-data". Jika tidak, maka proses upload file tidak akan bekerja.
Kemudian untuk konten blog, kita akan replace textarea dengan nama content menggunakan CKEDITOR, kurang lebih seperti berikut ini :
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
Langkah 3 - Menjalankan Project
Sekarang kita bisa mencoba menjalankan projectnya di http://localhost:8000/post/create atau bisa dengan menekan tombol TOMBOL POST di atas table. Dan jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Sekarang kuta coba klik button SIMPAN POST tanpa mengisikan data apapun di dalam inputan, maka kurang lebih hasilnya akan seperti berikut ini :
Di atas akan menampilkan sebuah validasi error, karena diatas kita tidak memasukkan data apapaun saat proses SIMPAN POST data. Sekarang kita bisa coba untuk memasukkan data ke form tersebut dan klik SIMPAN POST. Jika berhasil kiita akan mendapatkan tampilan seperti berikut ini :
Sampai disini pembahasan bagaimana cara memasukkan atau insert data ke dalam database menggunakan Laravel dan Tailwind CSS, di artikel selanjutnya kita semua akan belajar bagaimana cara melakukan proses edit dan update data ke dalam database.
Terima Kasih
INFO :