Tutorial Laravel 13 #5: Insert Data ke Dalam Database

• Langkah 1 - Membuat Method Create dan Store di Controller
  • Function Create
  • Function Store
• Langkah 2 - Membuat Form Tambah Data
• Langkah 3 - Uji Coba Insert Data
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah belajar bagaimana cara menampilkan data dari database kepada pengguna menggunakan view di Laravel 13.

Sekarang, kita akan melangkah lebih jauh dengan mempelajari bagaimana cara menambahkan data (insert) ke dalam database, termasuk fitur upload gambar agar setiap produk yang dimasukkan dapat memiliki gambar yang ditampilkan di aplikasi kita.

Dengan memahami materi ini, teman-teman akan dapat membuat fitur form input, validasi data, dan penyimpanan file gambar di Laravel 13 secara optimal.

Langkah 1 - Membuat Method Create dan Store di Controller

Karena kita sudah memiliki controller untuk product, maka sekarang kita tinggal menambahkan 2 method saja di dalamnya, yaitu:

Silahkan teman-teman buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;

//import model product
use App\Models\Product; 

//import return type View
use Illuminate\View\View;

//import return type redirectResponse
use Illuminate\Http\RedirectResponse;

//import Http Request
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * index
     *
     * @return void
     */
    public function index() : View
    {
        //get all products
        $products = Product::latest()->paginate(10);

        //render view with products
        return view('products.index', compact('products'));
    }

    /**
     * create
     *
     * @return View
     */
    public function create(): View
    {
        return view('products.create');
    }

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $request->validate([
            'image'         => 'required|image|mimes:jpeg,jpg,png|max:2048',
            'title'         => 'required|min:5',
            'description'   => 'required|min:10',
            'price'         => 'required|numeric',
            'stock'         => 'required|numeric'
        ]);

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

        //create product
        Product::create([
            'image'         => $image->hashName(),
            'title'         => $request->title,
            'description'   => $request->description,
            'price'         => $request->price,
            'stock'         => $request->stock
        ]);

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

Dari perubahan kode di atas, pertama kita import return type RedirectResponse.

//import return type redirectResponse
use Illuminate\Http\RedirectResponse;

Kemudian kita import juga Request.

//import Http Request
use Illuminate\Http\Request;

Setelah itu, di dalam class ProductController kita menambahkan 2 method baru: create dan store.

• Function Create

  Method ini digunakan untuk menampilkan halaman form tambah data product. Pada method ini kita hanya melakukan return ke sebuah view.

  public function create(): View
  {
      return view('products.create');
  }
  

• Function Store

  Method ini digunakan untuk melakukan proses insert data ke dalam database dan juga upload gambar.

  public function store(Request $request): RedirectResponse
  {
      //...
  }
  

  Di dalam method tersebut, hal pertama yang kita lakukan adalah membuat validasi untuk memeriksa apakah data yang dikirimkan sudah sesuai atau belum.

  //validate form
  $request->validate([
      'image'         => 'required|image|mimes:jpeg,jpg,png|max:2048',
      'title'         => 'required|min:5',
      'description'   => 'required|min:10',
      'price'         => 'required|numeric',
      'stock'         => 'required|numeric'
  ]);
  

  Berikut penjelasan validasinya:

  FIELD	ATURAN VALIDASI	KETERANGAN
  image	required	Wajib diisi
  	image	Harus file gambar
  	mimes:jpeg,jpg,png	Format hanya jpeg, jpg, png
  	max:2048	Maksimal 2MB
  title	required	Wajib diisi
  	min:5	Minimal 5 karakter
  description	required	Wajib diisi
  	min:10	Minimal 10 karakter
  price	required	Wajib diisi
  	numeric	Harus angka
  stock	required	Wajib diisi
  	numeric	Harus angka

  Setelah itu, kita melakukan upload gambar menggunakan method storeAs.

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

  Jika proses upload gambar berhasil dilakukan, maka langkah selanjutnya adalah melakukan proses insert data ke dalam database menggunakan Model.

  //create product
  Product::create([
      'image'         => $image->hashName(),
      'title'         => $request->title,
      'description'   => $request->description,
      'price'         => $request->price,
      'stock'         => $request->stock
  ]);
  

  Berikut penjelasan proses insert di atas:

  FIELD	NILAI YANG DISIMPAN	KETERANGAN
  image	$image->hashName()	Nama file unik agar tidak bentrok
  title	$request->title	Judul produk dari form
  description	$request->description	Deskripsi produk dari form
  price	$request->price	Harga produk dari form
  stock	$request->stock	Stok produk dari form

  Jika proses insert data berhasil, maka kita akan redirect ke route products.index dan menambahkan flash session untuk notifikasi.

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

Langkah 2 - Membuat Form Tambah Data

Setelah kita menambahkan method create dan store di dalam ProductController, sekarang kita akan membuat tampilan untuk form tambah data produk.

Silakan teman-teman buat file baru di dalam folder resources/views/products/ dengan nama create.blade.php, kurang lebih struktur folder-nya seperti berikut:

resources
└── views
    └── products
        ├── index.blade.php
        └── create.blade.php

Selanjutnya, silahkan buka file resources/views/products/create.blade.php, kemudian tambahkan kode berikut ini.

NOTE: UI-nya kita samakan seperti halaman index sebelumnya dan menggunakan Tailwind CSS via CDN.

resources/views/products/create.blade.php

<!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>Add New Product - SantriKoding.com</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- CKEditor (opsional, untuk rich text description) -->
    <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
</head>
<body class="bg-gray-100">

    <div class="max-w-6xl mx-auto px-4 py-10">
        <div class="text-center">
            <h3 class="text-2xl font-bold mb-2">Tutorial Laravel 13 untuk Pemula</h3>
            <h5 class="text-sm">
                <a href="https://santrikoding.com" class="text-blue-600 hover:underline">www.santrikoding.com</a>
            </h5>
            <hr class="my-6 border-gray-200">
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
            <div class="p-6">

                <div class="flex items-center justify-between mb-6">
                    <h4 class="text-lg font-semibold text-gray-900">Tambah Product</h4>
                    <a href="{{ route('products.index') }}"
                       class="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition">
                        BACK
                    </a>
                </div>

                <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                    @csrf

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">IMAGE</label>
                        <input type="file" name="image"
                               class="block w-full text-sm
                                      file:mr-4 file:py-2 file:px-4
                                      file:rounded-lg file:border-0
                                      file:bg-gray-900 file:text-white
                                      hover:file:bg-gray-800
                                      border border-gray-200 rounded-lg bg-white">
                        @error('image')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">TITLE</label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               placeholder="Masukkan Title Product"
                               class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                        @error('title')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">DESCRIPTION</label>
                        <textarea name="description" id="description" rows="6"
                                  class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
                                  placeholder="Masukkan Description Product">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">PRICE</label>
                            <input type="number" name="price" value="{{ old('price') }}"
                                   placeholder="Masukkan Harga Product"
                                   class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                            @error('price')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">STOCK</label>
                            <input type="number" name="stock" value="{{ old('stock') }}"
                                   placeholder="Masukkan Stock Product"
                                   class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                            @error('stock')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="submit"
                            class="inline-flex items-center justify-center px-4 py-2 rounded-lg
                                   bg-emerald-600 text-white text-sm font-semibold hover:bg-emerald-700 transition">
                        SAVE
                    </button>
                </form>

            </div>
        </div>
    </div>

    <script>
        // inisialisasi rich text editor untuk textarea description (opsional)
        CKEDITOR.replace('description');
    </script>
</body>
</html>

Dari penambahan kode di atas, jika teman-teman perhatikan pada bagian action form, kita arahkan ke route products.store, artinya akan memanggil method store yang berada di controller.

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

	//...
	
</form>

Pada form tersebut, kita menambahkan enctype="multipart/form-data", ini wajib jika di dalam form ada proses upload file.

Kemudian di dalam JavaScript, teman-teman bisa perhatikan kita melakukan inisialisasi Rich Text Editor menggunakan CKEdtor. Dan kita akan terapkan ke dalam textarea yang memiliki name description.

<script>
    CKEDITOR.replace('description');
</script>

Langkah 3 - Uji Coba Insert Data

Setelah kita selesai membuat form tambah data pada langkah sebelumnya, sekarang saatnya melakukan uji coba insert data ke dalam database untuk memastikan semua proses berjalan dengan baik.

Silahkan teman-teman klik button ADD PRODUCT pada halaman products, maka akan diarahkan ke halaman tambah data.

Coba klik button SAVE tanpa mengisi data apapun, maka akan muncul pesan validasi.

Setelah itu, isi semua field dan klik SAVE, jika berhasil maka data akan tersimpan dan akan muncul notifikasi sukses (dari flash session success).

Catatan:

---

Jika gambar tidak tampil di halaman index, pastikan sudah menjalankan:

php artisan storage:link 

(karena gambar disimpan di storage dan perlu dibuatkan symlink ke public).

Kesimpulan

Pada artikel ini, kita telah berhasil melakukan insert data dan upload gambar ke dalam database di Laravel 13.

Pada artikel selanjutnya, kita akan belajar bagaimana cara Menampilkan Detail Produk Berdasarkan ID di Laravel 13.

Terima Kasih