CRUD Laravel 10 dan Bootstrap 5 #1: Persiapan Awal
Tags: laravel, bootstrap, webdev
Published: 2024-04-23 00:00:00

**Hai, Sobat Risereaders!**

Pada kesempatan kali ini, kita akan mempelajari bagaimana cara membuat sebuah aplikasi CRUD sederhana dengan [Laravel](https://blog.riseku.com/mengenal-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:

{% embed https://blog.riseku.com/langkah-langkah-cara-instal-php-di-linux/ %}

{% embed https://blog.riseku.com/panduan-cara-install-composer-di-linux/ %}

## 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
```

### 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
```

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
```

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');
    }
};
```

#### 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',
    ];
}
```

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
```


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

![phpMyAdmin](https://blog.riseku.com/content/images/2024/03/crud-laravel-10-dan-bootstrap-5-menjalankan-migrasi-1.webp)

## 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!

{% embed https://blog.riseku.com/crud-laravel-10-dan-bootstrap-5-menampilkan-data/ %}