CRUD Laravel 10 dan Bootstrap 5 #3: Menambahkan Data

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.

// 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.

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:

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

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 di browser untuk melihat tampilan form tambah data.

• Tampilan halaman books.create.

• Tampilan halaman books.create dengan pesan error.

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!