Laravel Tutorial #8: Insert Data Laravel
Pada tutorial kali ini kita akan membahas Insert dan menampilkan Data Di Laravel sebagai tutorial kelanjutan dari tutorial sebelumnya. Karna laravel adalah sebuah framework dan didalamnya menggunakan library Eloquent untuk management database, sehingga tindakan insert dan show data di Laravel menjadi sangat lebih mudah daripada kita melakukannya manual menggunakan PHP procedural.
Membuat Model
Buatlah sebuah model beserta migration dengan perintah seperti dibawah ini.
php artisan make:model FAQ -m
Lalu pada migration buatlah beberapa field sederhana seperti dibawah ini.
Schema::create('f_a_q_s', function (Blueprint $table) {
$table->id();
$table->text('pertanyaan');
$table->text('jawaban');
$table->timestamps();
});Setelah itu silahkan jalankan migration agar table siswa beserta field-nya dibuat didatabase yang sudah anda buat dengan perintah dibawah ini.
php artisan migrate
Jika sudah maka otomatis database dan table sudah dibuat dengan perintah diatas sehingga kita bisa memulai tutorial insert dan show data di laravel ini.
Insert Data Di Laravel
Sebelum kita mulai melakukan insert data di laravel ada baiknya kita membuat tampilan form sederhana untuk menampilkan beberapa kolom input.
Sebelumnya kita akan membuat controller terlebih dahulu, jalankan command dibawah ini di terminal kamu.
php artisan make:controller FAQController -r
Perintah diatas akan membuat sebuah controller dengan nama FAQController beserta beberapa method seperti index(), create(), edit(), update(), dan destroy(). Sehingga kita tidak perlu membuat method-method CRUD lagi, karna sudah disediakan oleh perintah -r tersebut.
Lalu buka file route web.php yang berada di folder routes, jika sudah dibuka maka tambahkan kode dibawah ini.
Route::resource('faq', FAQController::class);Selanjutnya buatlah sebuah file dengan nama layout.blade.php di folder resources/views dan tambahkan seperti kode dibawah ini.
<html>
<head>
<title>Form Sederhana</title>
<style>
.container {
position: relative;
width: 80%;
margin: 0 auto;
}
form .group {
margin-bottom: 10px;
}
form .group input {
border: 1px solid #cccccc;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
}
form .group .error {
display: inline-block;
color: #ff0000;
margin-top: 5px;
}
form .group button.save {
background-color: #4169E1;
border: 1px solid #325cdb;
color: #ffffff;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
form .group button.cancel {
background-color: #4169E1;
border: 1px solid #325cdb;
color: #ffffff;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
table {
border: 1px solid #cccccc;
margin-top: 10px;
}
table tr td,
table tr th {
border-left: 1px solid #cccccc;
padding: 10px;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td {
border-top: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
Lalu pada file FAQController yang berada di folder app/Http/Controllers/FAQController.php di bagian method create() tambahkan kode dibawah ini.
return view('create');Jika sudah silahkan anda jalankan perintah dibawah ini.
php artisan server
Lalu buka di browser sesuai dengan IP yang tertera di terminal atau command promp kamu, kalau penulis menggunakan port 8000 lengkapnya http://127.0.0.1:8000. Lalu buka di browser dengan url http://127.0.0.1:8000/faq/create .
Selanjutnya adalah membuat proses insert data di laravel, proses insert ini berada di method store() didalam file FAQController, namun sebelum itu masukan model FAQ kedalam FAQController dengan cara menambahkan kode dibawah ini.
use App\Models\FAQ;
Tepat dibawah kode…
use Illuminate\Http\Request;
Sehingga menjadi seperti dibawah ini..
Setelah itu pada bagian method store() buatlah seperti dibawah ini…
Sedikit penjelasan kode diatas.
$request->validate() adalah untuk memvalidasi input form yang dikirim oleh user, dimana kedua form pertanyaan dan jawaban yang bersifat wajib, maka apabila tidak di isi dengan benar akan menampilkan pesan error sesuai yang sudah kita inginkan.
Jika sudah sesuai silahkan anda isi form sederhana tersebut,maka akan kembali halaman index faq dengan menampilkan alert dengan pesan Data Anda Berhasil di Tambahkan.
Menampilkan Data Di Laravel
Selanjutnya, kita harus menampilkan seluruh data yang telah di input oleh user melalui form yang sudah kita buat tadi.
Pertama buka file FAQController lalu pada bagian index() ubah menjadi seperti kode dibawah ini.
Selanjutnya adalah buat sebuah file index.php didalam folder resources/views/admin/faq/ lalu masukkan kode dibawah ini.
@extends('layout')
@section('content')
<h1 style="text-align: center">Daftar Data</h1>
@if(session()->has('pesan'))
<p>{{ session()->get('pesan') }}</p>
@endif
<a href="{{ route('faq.create') }}">Tambah Data</a>
<table width="100%" cellpading="0" cellspacing="0">
<thead>
<tr>
<th width="10%">No</th>
<th align="left" width="30%">Pertanyaan</th>
<th align="left" width="30%">Jawaban</th>
<th width="30%">Tindakan</th>
</tr>
</thead>
<tbody>
@if($faq->count())
@php($index = 1)
@foreach($faq as $faq)
<tr>
<td align="center">{{ $index++ }}</td>
<td>{{ $faq->nis }}</td>
<td>{{ $faq->nama }}</td>
<td align="center">
<a href="{{ route('faq.edit', $faq->id) }}">Edit</a> | <a onclick="document.getElementById('hapus-{{ $faq->id }}').submit()" style="color: #ff0000; cursor: pointer;">Hapus</a>
<form action="{{ route('faq.destroy', $faq->id) }}" id="hapus-{{ $faq->id }}" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="_method" value="delete">
</form>
</td>
</tr>
@endforeach
@else
<tr>
<td align="center" colspan="4">Data tidak tersedia</td>
</tr>
@endif
</tbody>
</table>
@endsection
Sehingga apabila anda sudah selesai membuat index tersebut lalu anda akses di url http://127.0.0.1:8000/faq.
Nah, itu dia tutorial bagaimana cara insert data dan menampilkan data FAQ pada laravel. Semoga tutorial ini bermanfaat untuk yang baru belajar Laravel, jika diperhatikan Laravel sangatlah mudah dan sangat mempercepat penulisan kode program yang akan kita buat.
Tags:
Populer
Ready to start?
Download our mobile app. for easy to start your course.
