Setelah berhasil menampilkan data pada view sekarang kita akan belajar bersama-sama bagaimana caranya melakukan insert data ke dalam database.
Langkah - 1 Menambahkan Method Create dan Store
Sekarang, silahkan teman-teman buka file app/Http/Controllers/PostController.php, kemudian ubah kode-nya sampai berikut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use ProtoneMedia\Splade\SpladeTable;
class PostController extends Controller
{
/**
* display all post data
*/
public function index()
{
// get all post data
$posts = Post::latest()->paginate(7);
// render view
return view('posts.index', [
'posts' => SpladeTable::for($posts)
->column('image')
->column('title')
->column('content')
->column('action')
]);
}
/**
* display form create
*/
public function create()
{
// render view
return view('posts.create');
}
/**
* insert new post data
*/
public function store(Request $request)
{
// validate request
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,jpg,png',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);
// upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
// insert new post to db
Post::create([
'title' => $request->title,
'content' => $request->content,
'image' => $image->hashName(),
]);
// render view
return redirect(route('posts.index'));
}
}
Dari perubahan kode di atas, pertama kita menambahkan sebuah method baru dengan nama create.
/**
* display form create
*/
public function create()
{
// masukan kode disini...
}
Di dalam method tersebut kita melakukan sebuah render view yang nanti akan di buat yaitu : resource/views/posts/create.blade.php. Jika teman-teman cari file tersebut, maka tidak akan menemukannya karena disini kita akan membuatnya nanti.
// render view
return view('posts.create');
Setelah itu, kita juga membuat sebuah method baru dengan nama store. Method ini kita gunakan untuk melakukan proses insert data kedalam database kita.
/**
* insert new post data
*/
public function store(Request $request)
{
// masukan kode disini...
}
Di dalam method tersebut, pertama-tama kita membuat sebuah validasi terlebih dahulu, fungsinya untuk memastikan data yang dikirimkan sudah sesuai.
// validate request
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,jpg,png',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);
Dari validasi di atas, kurang lebih penjelasannya seperti berikut ini :
| KEY |
VALIDATION |
KETERANGAN |
image |
required |
field wajib diisi |
|
image |
fied harus berupa gambar |
|
mimes:jpeg, jpg, png |
field harus memiliki ekstensi jpeg, jpg dan png |
title |
required |
field wajib diisi |
|
min:5 |
field minimal memiliki 5 karakter/huruf. |
content |
required |
field wajib diisi |
|
min:10 |
field minimal memiliki 10 karakter/huruf. |
Jika data yang dikirimkan sudah sesuai dengan validasi diatas, maka langkah selanjutnya adalah melakukan upload gambar.
// upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
Di atas, kita membuat variable baru dengan nama $image dan berisi request dengan jenis file yang bernama image. Request tersebut merupakan file yang dikirimkan oleh form kita.
Setelah itu, kita upload gambar tersebut menggunakan method storeAs dan kita simpan file tersebut ke dalam folder storage/app/public/posts dan nama file gambar tersebut akan di generate secara acak menggunakan method hashName().
Jika gambar tersebut berhasil di upload, langkah selanjutnya adalah melakukan insert data baru kedalam database, yaitu kedalam tabel Posts dan disini kita memanfaatkan fitur Eloquent dan Model untuk proses insert data ke dalam database kita.
// inser new post to db
Post::create([
'title' => $request->title,
'content' => $request->content,
'image' => $image->hashName(),
]);
Jika proses insert data berhasil dilakukan, maka kita akan melakukan render sebuah view dengan nama posts.index.
// render view
return redirect(route('posts.index'));
Langkah - 2 Membuat View Create
Setelah berhasil membuat 2 method baru di dalam controller, maka kita bisa lanjutkan dengan membuat sebuah view untuk menampilkan halaman tambah data posts kita.
Silahkan teman-teman buat file baru dengan nama create.blade.php di dalam folder resource/views/posts, kemudian masukan kode berikut ini :
<x-layout>
<x-slot name="header">
{{ __('Posts Create') }}
</x-slot>
<x-panel>
<x-splade-form action="/posts" class="flex flex-col gap-4" enctype='multipart/form-data'>
<div class="flex gap-4">
{{-- form input --}}
<div class="w-1/2 flex flex-col gap-4">
<div class="border-b p-2">
<h1 class="text-lg text-gray-700 font-semibold">CREATE NEW POST</h1>
</div>
<x-splade-file name="image" :show-filename="true" label="Image" />
<x-splade-input name="title" type="text" label="Title" placeholder="Input your title post" />
<x-splade-textarea name="content" autosize label="Content" />
<div class="flex gap-2 items-center">
<button type="submit"
class="bg-gray-700 p-2 text-white rounded-md text-sm flex items-center gap-1 hover:bg-gray-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-device-floppy w-4 h-4" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
<path d="M14 4l0 4l-6 0l0 -4"></path>
</svg>
Save
</button>
<Link href="/posts"
class="bg-rose-700 p-2 text-white rounded-md text-sm flex items-center gap-1 hover:bg-rose-800">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrow-narrow-left w-4 h-4" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l14 0"></path>
<path d="M5 12l4 4"></path>
<path d="M5 12l4 -4"></path>
</svg>
Back
</Link>
</div>
</div>
{{-- preview image --}}
<div class="w-1/2">
<div class="flex flex-col gap-4" v-if="form.image">
<div class="border-b p-2">
<h1 class="text-lg text-gray-700 font-semibold">PREVIEW IMAGE</h1>
</div>
<img v-if="form.image" :src="form.$fileAsUrl('image')" class="rounded-md" />
</div>
</div>
</div>
</x-splade-form>
</x-panel>
</x-layout>
Dari penambahan kode diatas, pertama-tama kita gunakan sebuah component layout yang telah disedikan oleh splade.
<x-layout>
// masukan kode disini...
</x-layout>
Kemudian kita set nama header pada component layout kita dengan nama Posts Create.
<x-slot name="header">
{{ __('Posts Create') }}
</x-slot>
Selanjutnya kita membuat sebuah form dari component splade form yang d mana action-nya kita arahkan ke dalam route yang bernama posts.store dan kemudian route tersebut akan memanggil sebuah method store yang berada pada PostController kita.
<x-splade-form action="/posts" class="flex flex-col gap-4">
// masukan kode disini...
</x-splade-form>
Disini kita juga memanggil beberapa component splade yang telah disediakan diantaranya :
-
<x-splade-file/>
Pada component ini kita gunakan untuk melakukan proses upload gambar kedalam form kita, kemudian kita juga mendefinisikan beberapa attribute diantaranya name, show-filename, dan label.
-
<x-spade-input/>
Pada component ini kita gunakan untuk melakukan proses input title dari posts kita, disini kita juga mendefinisikan beberapa attribute diantaranya name, type, label, dan placeholder.
-
<x-splade-textarea/>
Pada component ini kita gunakan untuk melakukan proses input content dari posts kita, disni kita juga mendefinisikan beberapa props diantaranya name dan content.
Langkah - 3 Uji Coba Insert Data Post
Silahkan teman-teman klik button Add New Post pada halaman posts.index atau bisa juga ke URL berikut ini http://localhost:8000/posts/create, jika berhasil maka akan menampilkan hasil seperti berikut ini :
Silahkan masukan data-data yang diinginkan, kemudian klik button Save. Jika berhasil maka kita akan di arahkan ke halaman posts.index.
Membangun Aplikasi Inventory Dengan Laravel & Tailwind CSS: https://santrikoding.com/ebook/membangun-aplikasi-inventory-dengan-laravel-tailwind-css?ref=8659VS4962
Membangun Website Online Course Dengan Laravel, Alpine.js dan Tailwind CSS: https://santrikoding.com/ebook/membangun-website-online-course-dengan-laravel-alpinejs-dan-tailwind-css?ref=8659VS4962