Insert atau Add Data pada Laravel dengan Ajax

Tutorial Sebelumnya:

Tutorial Laravel #10: Membuat Login pada Laravel
Tutorial Laravel #11: Membuat Register pada Laravel

Pada Tutorial Laravel kali ini kita akan Belajar CRUD pada Laravel Menggunakan Ajax.

CRUD adalah singkatan yang berasal dari Create, Read, Update, dan Delete, dimana keempat istilah tersebut merupakan fungsi utama yang nantinya diimplementasikan ke dalam database.

Fungsi create, read, update, dan delete merupakan fungsi yang secara konstan digunakan dan merupakan bagian yang tidak terpisahkan dari pekerjaan seorang programmer.

Tutorial CRUD Laravel Menggunakan Ajax yang pertama kita pelajari adalah Insert atau Add Data. Kita akan membahas cara Insert atau Add Data pada Laravel Menggunakan Ajax.

Baca Juga:
Tutorial Laravel #12: Insert atau Add Data pada Laravel (Tanpa Ajax)

Menginput Data ke Database di Laravel dengan Ajax

Tutorial ini adalah lanjutan dari tutorial sebelumnya Membuat Login dan Register pada Laravel.

Sebelumnya kita sudah membuat project laravel dengan nama ANISA (Aplikasi Nilai Santri), database yang digunakan dengan nama anisa_db.

Kita sudah mempunyai user dengan hak akses Administrator. Berikut tampilan jika administrator berhasil login.

Perhatikan gambar di atas pada Menu Santri, menu ini digunakan untuk melihat, menambahkan, mengubah dan menghapus data santri. Kita akan menyelesaikan CRUD pada menu santri ini terlebih dahulu.

1. Sekarang silahkan buat tabel baru dengan nama tabel santri.

Field-field dari table santri seperti berikut:

2. Selanjutnya kita membuat Model untuk tabel santri, jalankan perintah berikut:

php artisan make:model SantriModel

Maka model berhasil dibuat dengan nama SantriModel.php dalam direktori app/Models/SantriModel.php

Berikut kode full dari model SantriModel.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Santri extends Model
{
    use HasFactory;

    protected $table = 'santri';
    protected $primaryKey = 'id_santri';
    protected $fillable = ['nm_santri', 'tmp_lahir', 'tgl_lahir', 'alamat', 'no_hp'];
}

Perhatikan kode Model di atas, pada bagian kode program protected $table = 'santri' digunakan ketika penamaan tabel yang akan digunakan tidak sesuai dengan aturan baku penamaan tabel sesuai Eloquent. Jika kita mengikuti naming convention dari Laravel, umumnya properti ini tidak perlu didefinisikan. Sebagai contoh, kita punya model dengan nama class User, maka Eloquent menganggap nama tabelnya adalah users.

Pada bagian kode program protected $primaryKey = 'id_santri' Eloquent akan mengganggap atribut id dalam tabel sebagai primary key dan mengkonversinya (cast) menjadi tipe data integer. Jika selain itu, gunakan properti $primaryKey untuk menjelaskan kepada Eloquent kalau kita menggunakan nama atribut yang lain.

Pada bagian kode program protected $fillable Properti yang satu ini punya fungsi untuk mendaftarkan atribut apa saja yang sekiranya dapat disimpan atau dimanipulasi menggunakan create() atau insert().

3. Tahap selanjutnya adalah membuat Route. Buka file web.php pada folder routes/web.php, tambahkan kode route seperti di bawah ini:

use App\Http\Controllers\SantriController;

Route::get('santri/tampil', [SantriController::class, 'tampilsantri'])->name('tampilsantri')->middleware('auth');
Route::get('santri/tambah', [SantriController::class, 'tambahsantri'])->name('tambahsantri')->middleware('auth');
Route::post('santri/simpan', [SantriController::class, 'simpansantri'])->name('simpansantri')->middleware('auth');

Perhatikan kode Routes di atas, pada bagian kode program use App\Http\Controllers\SantriController agar SantriController dapat digunakan pada route kita.

Pada route yang pertama Route::get('santri/tampil'... digunakan untuk menampilkan view data santri dengan method get.

Kemudian pada route yang ke dua Route::get('santri/tambah'... untuk menampilkan view input santri dengan method get.

Terakhir pada route Route::post('santri/simpan'... adalah route untuk menyimpan data santri dengan method yang digunakan adalah post.

4. Berdasarkan route di atas kita akan membuat controller dengan nama SantriController.

Untuk membuat controller jalankan perintah berikut:

php artisan make:controller SantriController

Maka controller berhasil dibuat dengan nama file SantriController.php pada direktori app/Http/Controllers/SantriController.php

Isi dari SantriController.php adalah sebagai berikut:

Tutorial Selanjutnya:

Tutorial Laravel #14: Menampilkan Data pada Laravel
Tutorial Laravel #15: Menampilkan Data pada Laravel (Menggunakan Ajax)