DEV Community

Cover image for CRUD Laravel 10 dan Bootstrap 5 #1: Persiapan Awal
Shofi Setiawan for Riseku

Posted on • Originally published at blog.riseku.com

CRUD Laravel 10 dan Bootstrap 5 #1: Persiapan Awal

Hai, Sobat Risereaders!

Pada kesempatan kali ini, kita akan mempelajari bagaimana cara membuat sebuah aplikasi CRUD sederhana dengan Laravel 10 dan Bootstrap 5. Dalam proyek kita, kita akan fokus pada pengelolaan data buku dengan mudah.

Sebelum kita mulai, pastikan kamu telah menyiapkan PHP versi 8.1 atau yang lebih baru untuk menggunakan Laravel 10, serta dependency management tool yang diperlukan yaitu Composer.

Jika kamu belum memiliki PHP 8.1 atau Composer di perangkat kamu, jangan khawatir. Sudah ada postingan yang bisa kamu ikuti berikut:

Langkah-Langkah Cara Instal PHP 8.3 di Linux

Cara instal PHP di Linux dengan panduan langkah-langkah sederhana.

favicon blog.riseku.com

Tutorial Cara Instal Composer di Linux

Tutorial menginstal Composer di Linux, sebuah dependency management tool untuk PHP yang dikembangkan oleh oleh Nils Adermann dan Jordi Boggiano.

favicon blog.riseku.com

Persiapan Awal Membuat CRUD Laravel 10 dan Bootstrap 5

Berikut langkah-langkah yang perlu disiapkan untuk membuat sebuah aplikasi CRUD sederhana dengan Laravel 10 dan Bootstrap 5:

1. Instalasi Laravel

Langkah pertama yang perlu kita lakukan adalah menginstal framework Laravel. Untuk melakukan ini, jalankan perintah Composer berikut di terminal:

composer create-project laravel/laravel larabook --prefer-dist
Enter fullscreen mode Exit fullscreen mode

2. Konfigurasi Database

Setelah selesai menginstal Laravel, langkah berikutnya adalah mengkonfigurasi koneksi database.

Buka folder projek yang baru saja kamu buat, dan cari file bernama .env. Sesuaikan pengaturan koneksi database di .env dengan database kamu, seperti ini:

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=nama_database_kamu
DB_USERNAME=username_kamu
DB_PASSWORD=password_kamu
Enter fullscreen mode Exit fullscreen mode

Pastikan untuk mengganti nama_database_kamu, username_kamu, dan password_kamu dengan database kamu.

3. Membuat Model dan Migrasi

Setelah konfigurasi database selesai, langkah berikutnya adalah membuat model dan migrasi untuk proyek kita.

Dengan menggunakan perintah artisan, kita dapat membuat model dan migrasi sekaligus dengan menambahkan opsi -m, seperti ini:

php artisan make:model Book -m
Enter fullscreen mode Exit fullscreen mode

Perintah ini akan membuat model Book dalam direktori app/Models dan migrasi untuk tabel yang sesuai dalam direktori database/migrations.

Setelah model dan migrasi dibuat, kita dapat mengatur struktur tabel database kita dalam file migrasi yang baru saja dibuat.

3.1 Mengatur Migrasi

Buka file migrasi yang terletak di database/migrations dan tambahkan kolom-kolom yang diperlukan untuk tabel tersebut.

Di sini, kita hanya akan menambahkan kolom cover, title dan description untuk tabel books:

// database/migrations/2024_03_17_005738_create_books_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('books', function (Blueprint $table) {
            $table->id();
            $table->string('cover');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('books');
    }
};
Enter fullscreen mode Exit fullscreen mode

3.2 Mengatur Model

Setelah membuat migrasi, kita dapat membuat model Book di dalam direktori app/Models dengan mengedit file app/Models/Book.php:

// app/Models/Book.php

<?php

namespace App\Models;

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

class Book extends Model
{
    use HasFactory;

    protected $fillable = [
        'cover',
        'title',
        'description',
    ];
}
Enter fullscreen mode Exit fullscreen mode

Dalam model Book, kita menggunakan $fillable untuk menentukan kolom mana yang dapat diisi secara massal.

Seperti yang terlihat, kita mengizinkan pengisian massal untuk kolom cover, title dan description.

3.3 Menjalankan Migrasi

Setelah selesai mengatur model dan struktur tabel dalam migrasi, jalankan perintah migrasi untuk membuat tabel tersebut di database:

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Sekarang, jika kamu melihat database, muncul tabel books dan kolom-kolomnya sesuai dengan migrasi yang kita buat tadi, seperti berikut:

phpMyAdmin

Penutup

Dengan demikian, tahap awal dalam pembuatan aplikasi CRUD sederhana menggunakan Laravel 10 dan Bootstrap 5 telah selesai. Pada artikel ini, kita telah mempelajari langkah-langkah instalasi Laravel, konfigurasi database, serta pembuatan model dan migrasi untuk mempersiapkan proyek kita.

Selanjutnya, pada artikel berikutnya, kita akan melangkah lebih jauh dengan membahas cara menampilkan data buku dari tabel books. Semoga tutorial ini memberikan manfaat!

CRUD Laravel 10 dan Bootstrap 5: Menampilkan Data

Tutorial cara mudah membuat aplikasi CRUD untuk mengelola data buku dengan Laravel 10 dan Bootstrap 5 bagian kedua.

favicon blog.riseku.com

Top comments (0)