CRUD Laravel 10 dan Bootstrap 5 #3: Menambahkan Data
Tags: laravel, bootstrap, webdev
Published: 2024-04-30 12:00:00

**Hai, Sobat Risereaders!**

Pada artikel sebelumnya, kita telah membahas langkah-langkah untuk menampilkan data dalam aplikasi CRUD kita. Juga, sudah mempelajari cara mendefinisikan _route_, pembuatan _controller_ dan _method_, serta pembuatan tampilan untuk menampilkan data.CRUD Laravel 10 dan Bootstrap 5: Menampilkan Data

Sekarang, kita akan melanjutkan pembuatan aplikasi CRUD kita dengan aksi menambahkan data baru ke dalam _database_.

## Cara Menambahkan Data Aplikasi CRUD

Tutorial menambahkan data buku ke dalam database untuk aplikasi CRUD, beserta gambarnya:

### 1. Membuat Method Create dan Store

Langkah pertama yang perlu dilakukan adalah membuat _method_ `create` dan `store` di dalam _controller_ `BookController`.

_Method_ `create` akan menampilkan _form_ untuk menambahkan data, sedangkan _method_ `store` akan bertanggung jawab untuk menyimpan data baru ke dalam _database_.

```php
// app/Http/Controllers/BookController.php

public function create()
{
    // menampilkan halaman form tambah buku
    return view('books.create');
}

public function store(Request $request)
{
    // Validasi data input
    $validatedData = $request->validate([
        'cover' => 'required|image|mimes:jpg,png,jpeg,gif|max:2048',
        'title' => 'required|string|max:255',
        'description' => 'required|string',
    ]);

    // Upload file gambar cover
    $cover = $request->file('cover');
    $cover->storeAs('public/books', $cover->hashName());

    // Menambahkan data ke database, termasuk gambar cover
    $validatedData['cover'] = $cover->hashName();
    Book::create($validatedData);

    // Mengalihkan halaman ke index dengan pesan sukses
    return redirect()->route('books.index')->with('success', 'Data buku berhasil ditambahkan!');
}
```

Pada _method_ `store`, kita melakukan validasi terhadap data yang dikirimkan dari formulir untuk memastikan bahwa data yang masuk sesuai dengan yang diharapkan. Dokumentasi lengkap mengenai validasi bisa kamu baca [di sini](https://laravel.com/docs/10.x/validation).

### 2. Membuat View Tambah Data

Selanjutnya, mari kita buat tampilan untuk halaman tambah data. Buatlah file `create.blade.php` di dalam folder `resources/views/books/` dengan kode berikut:

```php
<!-- resources/views/books/create.blade.php -->

<!-- Meng-extend layout dari 'layouts.app' -->
@extends('layouts.app')

<!-- Judul halaman -->
@section('title', 'Tambah Buku')

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- Menampilkan judul halaman yang telah diset -->
            <h2>@yield('title')</h2>

            <div class="card mt-3">
                <div class="card-body">
                    <form action="{{ route('books.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label" for="cover">Cover</label>
                            <input type="file" class="form-control @error('cover') is-invalid @enderror" id="cover"
                                name="cover">
                            @error('cover')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="title">Judul</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                                name="title" value="{{ old('title') }}">
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="description">Deskripsi</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <a href="{{ route('books.index') }}" class="btn btn-outline-primary me-2">Kembali</a>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
```

Pada _form_ ini, kita menggunakan metode POST untuk mengirimkan data ke dalam _controller_ untuk diproses.

Kita juga menggunakan directive `@csrf` untuk melindungi formulir dari serangan CSRF (_Cross-Site Request Forgery_), yang merupakan tindakan keamanan yang penting untuk diterapkan dalam aplikasi web.

Selain itu, kita juga menambahkan pesan _error_ jika data yang kita input tidak valid dengan validasi di _controller_.

### 3. Membuat Storage Link

Langkah selanjutnya adalah memastikan file gambar dapat diakses secara publik. Untuk melakukannya, kita perlu membuat _symbolic link_ dari direktori `storage` ke direktori `public`.

Jalankan perintah berikut di dalam terminal Anda:

```
php artisan storage:link
```

Dengan langkah ini, file gambar yang diunggah ke dalam `storage/app/public` akan dapat diakses melalui URL dengan menggunakan path `storage/`.

Jika berhasil, setelah kamu membuka folder `public`, maka akan muncul folder `storage`.

![Berhasil membuat storage link](https://blog.riseku.com/content/images/2024/03/crud-laravel-10-dan-bootstrap-5-membuat-storage-link.webp)

### 4. Menjalankan Aplikasi

Setelah selesai menambahkan _method_ dan membuat halaman `books.create`, saatnya menjalankan aplikasi Laravel dengan perintah:

```
php artisan serve
```

Kunjungi [http://localhost:8000/books/create](http://localhost:8000/books/create) di browser untuk melihat tampilan _form_ tambah data.

- Tampilan halaman `books.create`.

![Tampilan halaman books.create](https://blog.riseku.com/content/images/size/w1000/2024/03/crud-laravel-10-dan-bootstrap-5-halaman-create.webp)

- Tampilan halaman `books.create` dengan pesan _error_.

![Tampilan halaman books.create dengan pesan error](https://blog.riseku.com/content/images/size/w1000/2024/03/crud-laravel-10-dan-bootstrap-5-halaman-create-pesan-error.webp)

## Penutup

Dengan demikian, kita sudah berhasil membuat aksi tambah data ke dalam aplikasi CRUD Laravel dan Bootstrap. Mulai dari membuat method untuk menangani tambah data dan membuat tampilan untuk halaman tambah data.

Di artikel berikutnya, kita akan mempelajari cara mengupdate data buku yang ada di database. Semoga tutorial ini memberikan manfaat!