Cara Singkat dalam Membangun CRUD Sederhana pada Laravel 8
Tutorial CRUD Sederhana dengan Laravel 8 dan Database MySQL
Pernahkah kamu merasa kesulitan dalam mempelajari sesuatu yang baru khususnya Programming? Jika iya, mungkin kamu akan familiar dengan topik yang akan dibahas berikut.
Umumnya tiap mempelajari suatu bahasa pemrograman yang baru, khususnya dalam bidang Web Programming. Maka kita diwajibkan setidaknya untuk memahami hal paling dasar, yaitu salah satunya CRUD (Create, Read, Update, Delete). CRUD merupakan inti dari proses pengelolaan suatu data dalam sebuah situs web.
Berikut ini merupakan salah satu penjelasan singkat mengenai CRUD sederhana pada Laravel 8, yang setidaknya menjadi langkah awal dalam memulai pemrograman yang jauh lebih rumit nantinya.
1. Menyiapkan Tools
Langkah awal yang dilakukan yaitu dengan menyiapkan dan melakukan instalasi tools yang diperlukan, seperti :
- XAMPP (mengakses phpMyAdmin)
- Laravel (framework yang digunakan)
- Composer (memudahkan instalasi package)
- Text Editor (contoh : Visual Studio Code, Atom, ataupun Sublime)
2. Membuat Business Rule
Langkah berikutnya yang dilakukan yaitu menentukan business rule apa saja yang akan dibangun oleh program nantinya.
Disini kita akan membangun program untuk menyimpan nilai Mata Kuliah tiap mahasiswa, serta menentukan indeks nilai yang didapat berdasarkan nilai yang dimiliki oleh mahasiswa tersebut.
Selain itu, kita juga dapat mengubah nilai maupun nama dari Mahasiswa apabila terdapat kesalahan, juga dapat menghapus data Mahasiswa tersebut apabila memang sudah tidak relevan dengan data yang seharusnya.
Untuk lebih lengkapnya dapat dilihat seperti pada Gambar dibawah berikut :
3. Merancang Database
Tahapan selanjutnya, kita akan membuat suatu database untuk menyimpan data dari tiap mahasiswa nantinya. Adapun atribut dan spesifikasi dari database tsb. dijelaskan seperti dibawah :
Database Name : mahasiswa
- id, INTEGER (Primary Key, Auto Increment)
- fullName, VARCHAR
- firstScore, INTEGER
- secondScore, INTEGER
- finalScore, VARCHARPembuatan database dilakukan dengan mengakses phpMyAdmin melalui XAMPP. Dalam mengakses phpMyAdmin, kita perlu mengaktifkan Apache Server serta MySQL pada XAMPP.
Apabila sudah berjalan (ditandai dengan warna hijau), maka langkah selanjutnya membuka alamat url berikut pada browser.
localhost/phpmyadmin
Gambar diatas merupakan tampilan dashboard dari phpMyAdmin. Proses selanjutnya yaitu mengklik tombol “Baru”, lalu mengisi nama database dengan nama “mahasiswa” seperti pada gambar berikut :
Setelah selesai mengisi nama database, maka berikutnya yaitu mengklik tombol “Buat”. Maka akan muncul tampilan seperti berikut :
Pada tahapan ini, kita akan membuat tabel “mahasiswa” dengan jumlah kolom sebanyak lima kolom dengan atribut : id, fullName, firstScore, secondScore dan finalScore. Proses yang dilakukan yaitu dengan mengklik “SQL”, lalu menuliskan query sesuai spesifikasi awal seperti dibawah berikut :
Setelah selesai ditulis, lalu dilanjutkan dengan mengklik tombol “Kirim”, maka akan terbentuk tabel baru bernama “mahasiswa” seperti pada gambar berikut :
Hingga tahapan diatas, kita telah berhasil merancang suatu database. Langkah berikutnya yang perlu dilakukan yaitu beralih menuju Teks Editor untuk menuliskan kode yang berguna untuk mengintegrasikan program kita dengan database yang telah dirancang diatas.
4. Membuat Controller
Berikutnya, langkah untuk membuat Controller dilakukan dengan cukup sederhana. Kita hanya perlu menuliskan baris perintah berikut pada command prompt :
php artisan make:controller MahasiswaController
Setelah perintah tersebut dieksekusi, maka akan terbuat file bernama “MahasiswaController.php” pada folder app\Http\Controllers, dengan boilerplate sebagai berikut :
Penulisan tiap function CRUD yang berada didalam class MahasiswaController akan dijelaskan berikutnya pada bagian ke 6. Membuat CRUD Function pada Controller.
5. Menyiapkan Routes File
Routing berfungsi dalam menentukan alur halaman yang akan muncul pada saat dikunjungi oleh user. Sebagai contoh, misalkan user mengunjungi halaman dashboard, maka kita sebagai pemrogram dapat mengarahkan alur (routes) seperti berupa halaman controller, halaman view, maupun halaman error.
Khusus untuk bagian edit dan hapus, diperlukan url tambahan berupa “id” yangmana berfungsi untuk menangkap informasi mengenai mahasiswa berdasarkan id-nya.
Sebagai Primary Key, id memiliki sifat yang unik, yang artinya tiap mahasiswa akan memiliki id yang berbeda.
6. Membuat CRUD Function pada Controller
Setelah pendefinisian tiap routes yang dijelaskan pada bagian sebelumnya. Maka pada bagian berikut, kita akan menguraikan informasi atau perintah apa saja yang terdapat pada tiap routes tersebut.
Function Index
Menampilkan halaman dashboard yang berisikan informasi data nilai mata kuliah tiap mahasiswa beserta dengan nilai akhir yang ditunjukkan dengan indeks “A”, “B”, dan “C”.
public function index()
{
$mahasiswa = DB::table('mahasiswa')->get();
return view('index', ['mahasiswa' => $mahasiswa]);
}Function Tambah
Menampilkan halaman “tambah data mahasiswa”.
public function tambah()
{
return view("tambah");
}Function Store
Menyimpan input data mahasiswa yang dilakukan pada Function Tambah sebelumnya. Halaman ini tidak menampilkan halaman baru, melainkan melakukan proses redirect menuju halaman dashboard (index).
public function store(Request $request)
{
$firstScore = $request->firstScore;
$secondScore = $request->secondScore;
$avgScore = ($firstScore + $secondScore) / 2;
if ($avgScore > 75) {
$finalScore = "A";
} else if ($avgScore > 65) {
$finalScore = "B";
} else {
$finalScore = "C";
}
DB::table("mahasiswa")->insert([
"fullName" => $request->fullName,
"firstScore" => $request->firstScore,
"secondScore" => $request->secondScore,
"finalScore" => $finalScore
]);
return redirect("/");
}Function Edit
Menampilkan halaman edit data mahasiswa dengan cara mengambil data id dari mahasiswa yang akan dilakukan proses pengeditan.
public function edit($id)
{
$mahasiswa = DB::table("mahasiswa")->where("id", $id)->get();
return view("edit", ['mahasiswa' => $mahasiswa]);
}Function Update
Menyimpan hasil perubahan pada edit data mahasiswa yang dilakukan pada Function Edit sebelumnya. Halaman ini tidak menampilkan halaman baru, melainkan melakukan proses redirect menuju halaman dashboard (index).
public function update(Request $request)
{
$firstScore = $request->firstScore;
$secondScore = $request->secondScore;
$avgScore = ($firstScore + $secondScore) / 2;
if ($avgScore > 75) {
$finalScore = "A";
} else if ($avgScore > 65) {
$finalScore = "B";
} else {
$finalScore = "C";
} DB::table("mahasiswa")->where("id", $request->id)->update([
"fullName" => $request->fullName,
"firstScore" => $request->firstScore,
"secondScore" => $request->secondScore,
"finalScore" => $finalScore
]);
return redirect("/");
}
Function Hapus
Menghapus data mahasiswa dari database berdasarkan id mahasiswa yang dipilih. Halaman ini tidak menampilkan halaman baru, melainkan melakukan proses redirect menuju halaman dashboard (index).
public function hapus($id)
{
DB::table("mahasiswa")->where("id", $id)->delete();
return redirect("/");
}Semua kode yang disebutkan diatas disisipkan didalam class MahasiswaController pada MahasiswaController.php
7. Membuat Halaman View
Pada tahap ini, kita akan berfokus dalam merancang tampilan yang akan dilihat oleh user saat berinteraksi dengan program yang dibangun. Terdapat empat jenis tampilan utama yang dijelaskan dibawah berikut :
Tampilan template.blade.php
Berfungsi untuk menyiapkan boilerplate yang dapat digunakan oleh seluruh file. Sehingga nantinya file lain tidak perlu menuliskan boilerplate secara berulang dari awal, cukup memanggil file berikut demi efektifitas dan efisiensi program.
Tampilan index.blade.php
Menampilkan halaman dashboard yang berisikan data tiap mahasiswa. Nantinya, tiap data mahasiswa yang berhasil ditambah, maupun diubah akan secara real-time ditampilkan pada halaman ini.
Tampilan tambah.blade.php
Menampilkan halaman pengisian form untuk menambahkan data mahasiswa, dengan tiga jenis input berupa : nama lengkap, nilai pertama dan nilai kedua.
Tampilan edit.blade.php
Sama seperti halaman sebelumnya, hanya saja pada halaman berikut berfungsi untuk mengubah data, alih-alih menambah data mahasiswa.
8. Running Program
Setelah seluruh kode berhasil berjalan dengan baik dan lancar. Maka, tibalah pada bagian terakhir yaitu mengeksekusi kode program yang ditulis. Pada Laravel, eksekusi program dijalankan dengan perintah berikut :
php artisan serve
Setelah berhasil berjalan tanpa gangguan seperti pada gambar diatas. Maka kita dapat membuka halaman url “http://127.0.0.1:8000” pada browser, dan menampilkan halaman dashboard (index) seperti gambar dibawah berikut :
Jika kita mengklik “Tambah Data”, maka akan beralih menuju halaman “tambah data” yang berisikan semacam form yang harus diisi.
Berikut merupakan hasil dari input data yang telah dilakukan pada proses sebelumnya. Data yang berhasil di-input akan ditampilkan pada halaman dashboard (index) secara real-time.
9. Penambahan Style CSS (Optional)
Hingga tahapan terakhir, sebenarnya kita telah berhasil membuat CRUD sederhana dengan menggunakan Laravel 8, serta berhasil mengintegrasikannya dengan MySQL. Namun, seperti terlihat pada hasil potongan gambar sebelumnya, terlihat program masih tidak cukup menarik untuk dilihat.
Oleh sebab itu, proses tambahan berikut berfungsi untuk memperindah tampilan program. Berikut ini merupakan hasil eksekusi setelah menggunakan style css custom.
Halaman Dashboard (index)
Halaman Tambah Data
Halaman Edit Data
Nah, demikian postingan pertama saya mengenai tutorial singkat mengenai CRUD pada Laravel yang dapat kamu coba ikuti. Semoga dengan adanya tutorial diatas, semakin meningkatkan niat kamu untuk belajar dan memahami Laravel dengan lebih baik dan lebih giat. Ingatlah selalu quote berikut :
“When people were sleeping, I was still training”
— Jackie Chan
Selamat mencoba!! 😃
