Tutorial Laravel 9 #4 : Insert Data ke Database


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel 9 #4 : Insert Data ke Database

Halo teman-teman semuanya, pada ksempatan kali ini kita semua akan belajar bagaimana cara melakukan proses insert data ke dalam database di Laravel 9. Kita juga akan belajar melakukan proses upload gambar di dalam Laravel 9.

Langkah 1 - Menambahkan Method Create dan Store

Karena sebelumnya kita sudah membuat controller, maka sekarang kita tinggal menambahkan 2 method baru untuk proses insert data. Yaitu create yang digunakan untuk menampilkan halaman / form dan store untuk memproses data yang dikirimkan.

Silahkan buka file app/Http/Controllers/PostController.php, kemudian ubah kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{    
    /**
     * index
     *
     * @return void
     */
    public function index()
    {
        //get posts
        $posts = Post::latest()->paginate(5);

        //render view with posts
        return view('posts.index', compact('posts'));
    }
    
    /**
     * create
     *
     * @return void
     */
    public function create()
    {
        return view('posts.create');
    }

    /**
     * store
     *
     * @param Request $request
     * @return void
     */
    public function store(Request $request)
    {
        //validate form
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);

        //upload image
        $image = $request->file('image');
        $image->storeAs('public/posts', $image->hashName());

        //create post
        Post::create([
            'image'     => $image->hashName(),
            'title'     => $request->title,
            'content'   => $request->content
        ]);

        //redirect to index
        return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }
}

Dari perubahan kode di atas, kita menambahkan 2 method baru. Yaitu create dan store.

Untuk method create akan kita gunakan untuk menampilkan halaman form yaang nantinya kita gunakan untuk melakukan input data. Disini kita return ke dalam sebuah view yang bernama create.blade.php yang berada di dalam folder resources/views/posts.

return view('posts.create');

Dan method store kita gunakan untuk memproses data yang akan disimpan ke dalam database. Sebelum itu, kita akan buat sebuah validasi terlebih dahulu. Validasi ini digunakan untuk memeriksa apakah data yang akan disimpan sudah sesuai dengan yang diharapkan.

//validate form
$this->validate($request, [
   'image'     => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
   'title'     => 'required|min:5',
   'content'   => 'required|min:10'
]);

Dari validasi di atas, kita membuat beberapa rule atau aturan. Kurang lebih seperti berikut ini :

KEY VALIDATION KETERANGAN
image required field wajib diisi.
image field harus berupa gambar
mimes:jpeg,png,jpg,gif,svg filed harus memiliki extensi jpeg, png, jpg, gif dan svg.
max:2048 field maksimal berukuran 2048 Mb / 2Mb.
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 di atas, maka pertama kita akan melakukan proses upload gambar terlebih dahulu.

//upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());

Di atas, kita buat variable baru dengan nama $image yang berisi request yang bernama image. Kemudian kita upload gambar tersebut dengan method storeAs ke dalam folder storage/app/public/posts. Dan kita akan random nama gambarnya menggunakan method hashName.

Setelah gambar berhasil diupload, selanjutnya kita insert data baru ke dalam table posts menggunakan Eloquent.

//create post
Post::create([
   'image'     => $image->hashName(),
   'title'     => $request->title,
   'content'   => $request->content
]);

Setelah itu, kita redirect ke dalam route yang bernama posts.index dengan memberikan pesan Data Berhasil Disimpan!.

//redirect to index
return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Disimpan!']);

Langkah 2 - Membuat Halaman View / Form Create

Kita lanjutkan untuk membuat view untuk menampilkan halaman tambah data post. Silahkan buat file baru dengan nama create.blade.php di dalam folder resources/views/posts, kemudian masukkan kode berikut ini di dalamnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tambah Data Post - SantriKoding.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: lightgray">

    <div class="container mt-5 mb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card border-0 shadow rounded">
                    <div class="card-body">
                        <form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
                        
                            @csrf

                            <div class="form-group">
                                <label class="font-weight-bold">GAMBAR</label>
                                <input type="file" class="form-control @error('image') is-invalid @enderror" name="image">
                            
                                <!-- error message untuk title -->
                                @error('image')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">JUDUL</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" placeholder="Masukkan Judul Post">
                            
                                <!-- error message untuk title -->
                                @error('title')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">KONTEN</label>
                                <textarea class="form-control @error('content') is-invalid @enderror" name="content" rows="5" placeholder="Masukkan Konten Post">{{ old('content') }}</textarea>
                            
                                <!-- error message untuk content -->
                                @error('content')
                                    <div class="alert alert-danger mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-md btn-primary">SIMPAN</button>
                            <button type="reset" class="btn btn-md btn-warning">RESET</button>

                        </form> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'content' );
</script>
</body>
</html>

Jika kita perhatikan kode di atas, pada bagian form action, kita arahkan ke dalam route yang bernama posts.store dengan method POST.

<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">

Dan kita juga menambahkan attribute enctype="multipart/form-data", yang bertujuan agar form ini dapat mengirimkaan sebuah file/gambar ke dalam server.

Dan untuk content, kita akan menggunakan library tambahan yaitu CKEDITOR, dengan tujuan agar penulisan konten-nya lebih baik dan bagus.

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'content' );
</script>

Langkah 3 - Uji Coba Insert Data Post

Sekarang kita akan lakukan proses insert data post baru. Silahkan klik button TAMBAH POST atau bisa ke URL http://localhost:8000/posts/create, jika berhasil, maka akan menampilkan halaman seperti berikut ini :

Silahkan klik button SIMPAN tanpa mengisi data apapun, maka akan menampilkan validasi yang dikirimkan oleh controller. Kurang lebih seperti berikut ini :

Dan sekarang, silahkan masukkan data yang diinginkan, kemudian klik button SIMPAN. Jika berhasil maka akan mendapatkan hasil seperti berikut ini :

Sampai disini pembahasan bagaimana cara melakukan proses insert data di Laravel 9. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses edit dan update data ke dalam database di Laravel 9.

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami