Laravel 12 CRUD ➕
#9 Membuat Halaman Tambah Siswa (Create)
📝 Form untuk memasukkan data siswa baru!
✏️ Sekarang kita bisa menambah data siswa! Di artikel sebelumnya kita sudah bisa melihat daftar siswa. Sekarang kita buat halaman form tambah siswa. Setelah mengisi form dan menekan tombol "Simpan", data akan tersimpan ke database. Ayo kita buat! 🚀
Langkah 1: Membuat View untuk Form Tambah
1 Buat file baru di resources/views/siswa/create.blade.php. File ini akan berisi form untuk input data siswa. Isi dengan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tambah Siswa</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f9f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #059669;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
color: #333;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
button {
background: #10b981;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
width: 100%;
}
button:hover {
background: #059669;
}
.back {
display: inline-block;
margin-top: 15px;
text-decoration: none;
color: #10b981;
}
</style>
</head>
<body>
<div class="container">
<h1>Tambah Siswa Baru</h1>
<form action="{{ route('siswa.store') }}" method="POST">
@csrf
<label for="nama">Nama Lengkap</label>
<input type="text" name="nama" id="nama" required>
<label for="kelas">Kelas</label>
<input type="text" name="kelas" id="kelas" required>
<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat" rows="3" required></textarea>
<button type="submit">Simpan Data</button>
</form>
<a href="{{ route('siswa.index') }}" class="back">← Kembali ke Daftar Siswa</a>
</div>
</body>
</html>
Penjelasan kode:
@csrf→ token keamanan Laravel agar form aman dari serangan.action="{{ route('siswa.store') }}"→ form akan dikirim ke rute store (method POST).method="POST"→ metode pengiriman data.- Input
name="nama",name="kelas",name="alamat"→ nama field yang akan diterima controller.
🔗 Langkah 2: Pastikan Rute Sudah Tersedia
2 Di artikel #7 kita sudah mendaftarkan rute resource. Rute siswa.create dan siswa.store sudah otomatis tersedia. Kamu bisa cek dengan perintah:
php artisan route:list | find "siswa"
Pastikan ada rute siswa.create (GET) dan siswa.store (POST). Jika belum, pastikan di routes/web.php ada baris:
Route::resource('siswa', SiswaController::class);
📌 Rute yang digunakan:
route('siswa.create')→ menuju halaman form tambah (GET /siswa/create)route('siswa.store')→ menyimpan data (POST /siswa)
Langkah 3: Isi Method create() dan store() di Controller
3 Buka app/Http/Controllers/SiswaController.php. Kita perlu mengisi dua method: create() untuk menampilkan form, dan store() untuk menyimpan data.
Method create() → cukup tampilkan view form:
public function create()
{
return view('siswa.create');
}
Method store() → terima data dari form, validasi, lalu simpan ke database:
use Illuminate\Http\Request; // pastikan sudah ada di atas
public function store(Request $request)
{
// Validasi input
$request->validate([
'nama' => 'required|string|max:255',
'kelas' => 'required|string|max:50',
'alamat' => 'required|string',
]);
// Simpan data ke database
Siswa::create([
'nama' => $request->nama,
'kelas' => $request->kelas,
'alamat' => $request->alamat,
]);
// Redirect ke halaman daftar siswa dengan pesan sukses
return redirect()->route('siswa.index')->with('success', 'Siswa berhasil ditambahkan!');
}
Penjelasan:
validate()→ memastikan semua field diisi dan sesuai aturan.Siswa::create([...])→ menyimpan data baru ke tabel siswa.redirect()->route('siswa.index')→ setelah simpan, kembali ke halaman daftar siswa.with('success', '...')→ mengirim pesan sukses (nanti bisa ditampilkan di halaman index).
💡 Penting: Pastikan di model
Siswa ada properti $fillable untuk kolom yang boleh diisi massal. Buka app/Models/Siswa.php dan tambahkan:
protected $fillable = ['nama', 'kelas', 'alamat'];
Langkah 4: Tampilkan Pesan Sukses di Halaman Index
4 Agar pengguna tahu data berhasil tersimpan, kita tampilkan pesan sukses di halaman daftar siswa. Buka resources/views/siswa/index.blade.php dan tambahkan kode berikut di atas tabel:
@if(session('success'))
<div style="background: #d4edda; color: #155724; padding: 10px; border-radius: 8px; margin-bottom: 15px;">
{{ session('success') }}
</div>
@endif
Juga perbaiki link "Tambah Siswa" agar mengarah ke form create:
<a href="{{ route('siswa.create') }}" class="btn btn-success">+ Tambah Siswa</a>
Langkah 5: Uji Coba Fitur Tambah Siswa
5 Sekarang waktunya uji coba!
- Jalankan server:
php artisan serve - Buka http://localhost:8000/siswa
- Klik tombol + Tambah Siswa → akan muncul form.
- Isi nama, kelas, alamat, lalu klik Simpan Data.
- Setelah submit, kamu akan kembali ke halaman daftar dan melihat pesan hijau "Siswa berhasil ditambahkan!". Data baru juga muncul di tabel.
🎉 Selamat! Fitur Create sudah berhasil! Kamu sekarang bisa menambahkan data siswa baru melalui website. Selanjutnya kita akan buat fitur Edit dan Hapus. Hebat sekali! 💪
Ringkasan Langkah
- ✅ Buat file view
create.blade.phpdengan form (gunakan @csrf). - ✅ Di controller, isi method
create()untuk menampilkan view. - ✅ Isi method
store()untuk validasi dan menyimpan data menggunakan model. - ✅ Tambahkan
$fillabledi model Siswa. - ✅ Tampilkan pesan sukses di halaman index.
- ✅ Uji coba dengan menambahkan data baru.
📌 Catatan: Validasi penting agar data yang masuk bersih dan tidak kosong. Laravel akan otomatis menampilkan error jika ada yang tidak sesuai.
⬅️ Kembali ke #8: Halaman Daftar Siswa (Read)
➡️ Lanjut ke #10: Membuat Halaman Edit dan Hapus Siswa (Update & Delete)
(Link akan aktif saat artikel sebelumnya dan selanjutnya terbit)