Proyek kecil: aplikasi catatan · Lesson 14 of 16

Form tambah catatan dan validasi

Formulir pertama: dikirim dengan POST, diperiksa dengan validasi, disimpan dengan satu baris, dan diakhiri pesan sukses.

3 min 0 comments

Contents

Menambah catatan butuh dua route: satu untuk menampilkan formulir (GET), satu untuk menerima kirimannya (POST). Tambahkan di routes/web.php, dan letakkan di atas route /catatan/{note}, supaya alamat /catatan/baru tidak dikira id catatan bernama "baru":

Route::get('/catatan/baru', [NoteController::class, 'create'])->name('catatan.create');
Route::post('/catatan', [NoteController::class, 'store'])->name('catatan.store');

Formulirnya

Method create di controller cukup mengembalikan view:

public function create()
{
    return view('notes.create');
}

Lalu resources/views/notes/create.blade.php:

<x-layout title="Catatan baru">
    <h1>Catatan baru</h1>

    <form method="post" action="{{ route('catatan.store') }}">
        @csrf

        <label>Judul
            <input type="text" name="title" value="{{ old('title') }}">
        </label>
        @error('title') <p>{{ $message }}</p> @enderror

        <label>Isi
            <textarea name="body">{{ old('body') }}</textarea>
        </label>
        @error('body') <p>{{ $message }}</p> @enderror

        <button>Simpan</button>
    </form>
</x-layout>

Tiga hal yang wajib ada di setiap formulir Laravel:

  • @csrf menyisipkan token rahasia. Tanpa ini, Laravel menolak kiriman dengan halaman 419 Page Expired. Ini perlindungan dari situs lain yang mencoba mengirim formulir atas namamu.
  • old('title') mengisi kembali isian yang tadi diketik kalau formulir ditolak validasi, supaya pengguna tidak mengetik ulang.
  • @error('title') menampilkan pesan kesalahan untuk kolom itu, kalau ada.

Menerima dan memvalidasi

use Illuminate\Http\Request;

public function store(Request $request)
{
    $data = $request->validate([
        'title' => ['required', 'max:100'],
        'body' => ['required'],
    ]);

    Note::create($data);

    return redirect()->route('catatan.index')->with('status', 'Catatan tersimpan.');
}

Baca pelan-pelan, karena pola ini akan kamu pakai terus:

  1. $request->validate([...]) memeriksa kiriman. Kalau ada yang tidak lolos, Laravel otomatis mengembalikan pengguna ke formulir, lengkap dengan pesan error dan isian lamanya. Kalau lolos, ia mengembalikan hanya kolom-kolom yang kamu sebut, jadi aman dipakai langsung.
  2. Note::create($data) menyimpan catatan baru. Ini yang tadi kita izinkan lewat $fillable.
  3. redirect()->route(...) mengarahkan ke halaman daftar, dan with('status', ...) menitipkan pesan untuk satu kali tampil.

Menampilkan pesan sukses

Di components/layout.blade.php, tepat di atas {{ $slot }}, tambahkan:

@if (session('status'))
    <p>{{ session('status') }}</p>
@endif

Dan di halaman daftar, tambahkan tautan <a href="{{ route('catatan.create') }}">Tulis catatan</a>. Sekarang coba alurnya: buka formulir, kirim dalam keadaan kosong (lihat pesan errornya), isi dengan benar, dan lihat catatanmu muncul di daftar dengan pesan "Catatan tersimpan."

Aturan validasi yang tersedia sangat banyak: email, min:8, numeric, unique:notes,title, dan ratusan lainnya. Daftarnya ada di dokumentasi; tidak perlu dihafal.

Discussion

Log in to join the conversation. Log in

No discussion here yet. Be the first to ask.