Belajar Laravel 10 : A simple guide CRUD app - Menambah Data

​Assalamualaikum Warahmatullahi Wabarakatuh, Pada kesempatan kali ini saya akan membahas tutorial CRUD sederhana menggunakan Laravel 10 dengan database MySql. Artikel ini akan membantumu dalam membuat aplikasi CRUD pertama kali dengan Laravel 10. Jadi, jika kamu baru mengenal Laravel, artikel ini akan membantumu create, insert, update and delete melalui model dari database.

Artikel ini akan dibagi menjadi 4 bagian, dimana setiap bagian akan dijelaskan secara detail. Jadi diharapkan para kalian pembaca bisa menikmati dan mendapatkan ilmu dari tulisan ini yang saja jelaskan.

 

Ada beberapa hal yang perlu kalian miliki di sistem sebelum menginstal laravel 9, yaitu:

• Minimum PHP v8.1
• Composer
• Server (WAMP, LAMP, XAMPP dll)
• Database MySql/MariaDB

 

Setelah kalian sudah mempunyai keempat tersebut, lakukanlah step by step dibawah ini dengan seksama.

 

 

Menginstall Laravel 10

Untuk menginstal Laravel 10, kita memerlukan composer dan kita memastikan bahwa kita menentukan versi Laravel yang kita butuhkan, dalam kasus kita Laravel 9.

composer create-project laravel/laravel=10.0 crudapp --prefer-dist

Bisa kalian perhatikan perintah diatas, setelah kita run command, kita bisa melihat proses instalasi laravel 9. Setelah proses instalasi selesai kita bisa lihat folder project baru dengan nama crudapp. Kita masuk ke direktori project tersebut dengan menjalankan command.

cd crudapp

Selanjutnya bisa coba terlebih dahulu apakah proses instalasi project laravel 10 kita berhasil. Kita tes dengan menjalankan local development server menggunakan command serve punya Artisan CLI.

php artisan serve

Kalian bisa membuka http://127.0.0.1:8000 di browser untuk tes instalasi. Ketika kita buka url di browser, kita bisa lihat halaman awal laravel 10, tanda instalasi laravel 10 berhasil.

 

Konfigurasi Database

Langkah selanjutnya kita akan mengatur konfigurasi database dari project kita. Dalam project ini kita berinama databasenya yaitu crudapp , lalu credential mysql di server kita, kita punya username root dan passwordnya adalah password.

Kalian buat databasenya bisa melalui phpmyadmin maupun melalui command line.

Setelah database tersebuat, kita akan mengkoneksikan antara database dengan project kita, yaitu dengan cara ubah file .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crudapp
DB_USERNAME=root
DB_PASSWORD=password

*untuk host dan port adalah bydefault dari server, jika kalian merasa mengubahnya, silahkan sesuaikan ya.

Setelah itu jangan lupa disave perubahan tadi sebelum ke langkah selanjutnya.

 

Membuat model, migration, dan controller

Di langkah ini kita akan membuat model, migration, dan controller dengan satu artisan command. Kita buka kembali terminal atau cmd, kita jalankan artisan command di bawah ini. 

php artisan make:model Buku -m -c

Setelah menjalankan perintah tersebut, kita cek di folder project dibagian folder database/migration , app/Models, dan app/Http/Controllers apakah ada file baru disana yang bernama atau mengandung kata buku.

Jika ada maka kita berhasil membuat 3 sekaligus dengan hanya sekali command.

 

Migration

Selanjutnya kita akan mengubah file migration yang kita buat tadi melalui terminal. Buka file yang mengandung kata buku pada folder database/migration.

Loh nama tabelnya kok gak sama dengan apa yang saya minta? yap, itu sudah by default dari laravel, jika kita mengubahnya kita harus menambahkan suatu atribut $table pada model, jika kita biarin saja maka kita tidak usah menambah atribut $table tersebut pada model.

Kita biarkan saja by default nama tabelnya bukus.

Lalu kita akan menambahkan atribut-atribut / columns yang kita perlukan dalam project ini. Disini kita akan membuat schema sebagai berikut:

• judul_buku (varchar)
• deskripsi_buku (longtext)
• tahun_terbit (year)
• stok_buku (integer)
• gambar_buku (varchar)

Langsung kita akan mengubah pada file migration bukus tadi.

Setelah selesai, kita run migration menggunakan artisan command berikut ini.

php artisan migrate

Kita bisa lihat ada beberapa table baru di database project kita, termasuk table bukus yang baru saja kita definisikan di file migration.

 

Model

Setelah file migration sudah kalian rubah, selanjutkan kita akan menambahkan variable $fillable pada model Buku.

Sebelumnya apa sih dan kenapa harus ada variable $fillable di model kita?

Jadi fillable itu memungkinkan kamu bisa menentukan bidang mana yang dapat mass-assignable dalam model yang kamu buat. Maksudnya adalah bidang / column apa saja yang bisa kamu isi atau kamu ambil datanya.

Kita akan mengisi fillable pada model buku kita.

 

Controller

Setelah model terbuat, selanjutnya kita akan membuat controller yang dimana terdapat proses menampilkan form hingga proses insert data.

Silahkan copy kode dibawah ini pada app/Http/Controllers/BukuController.php

Penjelasan saya jelaskan dibawah kode ini.

 

Penjelasan kode diatas:

Pada kode diatas terdapat function bernama tambah dengan parameter Request yang memiliki variable $request. Function ini memiliki tugas yaitu menampilkan form inputan dan menyimpan ke dalam database.

Sebelum mengeksekusi kode dibawahnya, sistem akan mengecek apakah request bertipe post atau bukan.

Jika bukan bertipe post, maka akan menampilkan form inputan buku. Sistem akan menjalan kode dibawah ini untuk menampilkan fom inputan buku.

return view('crudapp.tambah');

 

Sedangkan jika request bertipe post, maka akan terjadi proses input ke database.

 

$this->validate($request, [
                'judul_buku' => 'required|string|max:200|min:3',
                'deskripsi_buku' => 'required|string|min:5',
                'tahun_terbit' => 'required|min:4|max:4',
                'stok_buku' => 'required|numeric',
                'gambar_buku' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:1024'
            ]);

Dalam kode diatas adalah proses validasi inputan, yang dimana kolom:

• judul_buku harus terisi, harus bertipe string/karakter, dan minimal 3 huruf maksimal 200 huruf/string
• deskripsi_buku harus terisi, harus bertipe string/karakter, dan minimal huruf maksimal 5
• tahun_terbit harus terisi, dan minimal huruf maksimal 4 minimal 4
• stok_buku harus terisi, dan harus bertipe integer/numeric
• gambar_buku harus terisi, harus berformat gambar, dan maksimal file 1 mb

 

Setelah proses validasi inputan selesai, sistem akan melanjutkan ke upload file gambar yang akan ditunjukkan pada kode dibawah;

$nama_gambar = time() . '_' . $request->file('gambar_buku')->getClientOriginalName();
$upload = $request->gambar_buku->storeAs('public/sampul_buku', $nama_gambar);
$path = Storage::url($upload);

Pada variable nama_gambar ialah menampung nama file gambar yang diubah menjadi format date-namafileori.ekstensifile, contohnya 1641170702_pwa.png.

Lalu pada variable upload ialah proses upload file ke dalam folder storage/public/sampul_buku.

Setelah upload selesai, kita membutuhkan url dari file tersebut untuk disimpan pada database, maka dari itu kita membutuhkan Facades\Storage::url() untuk mendapatkan alamat lokasi filenya. Contohnya akan seperti ini hasil yang disimpan ke database /storage/sampul_buku/1641170702_pwa.png .

 

Proses menyimpan file sampul gambar telah tersimpan ke server, selanjutnya kita akan menyimpan semua isian kedalam database.

Buku::create([
                'judul_buku' => $request->judul_buku,
                'deskripsi_buku' => $request->deskripsi_buku,
                'tahun_terbit' => $request->tahun_terbit,
                'stok_buku' => $request->stok_buku,
                'gambar_buku' => $path
            ]);

Pada kode diatas kita menyimpan semua isian inputan form yang disimpan di variable $request. Sedangkan pada kolom gambar buku kita isi url / alamat file gambar buku pada penjelasan sebelumnya.

return redirect('/tambah')->with('status', 'Data telah tersimpan di database');

Setelah semua selesai, maka akan redirect ke halaman /tambah dengan kondisi sukses data telah tersimpan di database.

 

Layouting

Jangan lupa untuk buat form inputan tambah buku, silahkan salin kode dibawah ini, letakkan pada folder resources/views/crudapp, berikan nama file tambah.blade.php.

 

Routes

Setelah itu kita definisikan routes /tambah kedalam routes/web.php, tambahkan kode dibawah ini.

Route::match(['get', 'post'],'/tambah',[ BukuController::class, "tambah" ]);

Pasti timbul pertanyaan, loh kenapa gk pake Route::resource aja?
yap, disini saya juga memberikan pembelajaran kepada kalian, jadi gak selalu menggunakan route resource melulu sama dengan tutorial pada umumnya. Untuk soal project realnya kalian sesuaikan dengan kompleksitas aplikasi kalian ya. Kapan harus menggunakan resource kapan menggunakan route get/post.

Tapi disini saya menggunakan route match, artinya?

Disini kalian bisa mendifinisikan hanya 1 line tanpa pelu membuat 2 line, misalnya seperti ini

Route::get('/tambah',[ BukuController::class, "tambah" ]);
Route::post('/tambah',[ BukuController::class, "tambah" ]);

Lebih ringkas 1 line bukan?

Jadi intinya Route::match ini kita bisa mendefinisikan uri itu memiliki beberapa method http, baik itu post,get,put,patch,dll. Lebih jelasnya kalian baca dokumentasi ini ya.

Jalankan Server

Akhir dari sesi ini, pastinya kalian harus cobain dong.

Jalankan server local kalian, bisa menggunakan perintah dibawah ini

php artisan serve

maupun jika menggunakan laragon atau apapun. setelah itu silahkan buka melalui browser lalu akses ke url domain-mu/tambah

 

Hasil Percobaan

Silahkan lihat video ini

Oke sampai sini kita telah berhasil melakukan tambah data ke database mysql dengan Laravel 9.

Wassalamualaikum Warahmatullahi Wabarakatuh.

 

Nah, bagaimana caranya agar data yang kita inputkan bisa ditampilkan?

Simak di artikel selanjutnya

Belajar Laravel 10 : A simple guide CRUD app - Menampilkan Data

Baca sesi lainnya:

Belajar Laravel 10 : A simple guide CRUD app - Menambah Data

Belajar Laravel 10 : A simple guide CRUD app - Menampilkan Data

Belajar Laravel 10 : A simple guide CRUD app - Mengubah Data

Belajar Laravel 10 : A simple guide CRUD app - Menghapus Data