CRUD Insert merupakan salah satu fungsi yang sangat dibutuhkan dalam pengembangan situs web dinamis. Dengan menggunakan fungsi ini seorang pengguna web akan dapat memberikan data untuk disimpan dan ditampilkan bagi pengguna lain.
Laravel CRUD: Insert
CRUD merupakan singkatan dari Create, Read, Update, dan Delete. Fungsi untuk menambahkan sebuah data baru atau seringkali disebut dengan CRUD: Insert merupakan C (Create) dalam Create. Fitur ini artinya adalah fungsi untuk membuat sebuah data baru, misalnya pada untuk proses registrasi pada sebuah web, mengisikan komentar sebuah post, memberikan rating pada belanja online, dan sebagainya.
Pada situs web, untuk membuat sebuah fungsi yang memungkinkan penggunanya dapat memasukkan data adalah dengan terlebih dahulu membuat Form. Melalui form ini pengguna akan dapat mengetikkan kalimat, memilih dari pilihan yang disediakan, atau misalnya dengan menekan tombol tertentu.
Membuat Form CRUD Insert
- Form dapat dibuat di sebuah view yang dipanggil melalui function create pada controller. Contoh berikut potongan program pada PostsController.php adalah untuk view create.blade.php yang terdapat dalam folder posts:
- Edit /resources/views/posts/create.blade.php
Buatlah view berdasar template:
Penggunaan Bootstrap
- Form bisa dibuat dengan HTML + Bootstrap
- Hingga versi Laravel 4, disediakan fungsi-fungsi untuk menghasilkan form, namun kemudian dihilangkan karena dianggap harus dikembangkan secara terpisah.
- Komunitas mengembangkan Laravel Collective
https://laravelcollective.com/docs/6.0/html
Laravel Collective
- Menambahkan Laravel Collective untuk membuat Form dengan mudah dengan berbagai fungsi yang sudah disediakan. Ketikkan baris berikut di terminal/command prompt:
Petunjuk penggunaan Laravel Collective bisa dilihat pada halaman web resmi nya:
Menambah Form di View
- Menggunakan url dengan perintah open, default adalah menggunakan metode POST
{!! Form::open([‘url’ => ‘foo/bar’]) !!}
//
{!! Form::close() !!}
- Menggunakan url dengan perintah open
{!! Form::open([‘url’ => ‘foo/bar’]) !!}
//
{!! Form::close() !!}
- Menggunakan route
{!! Form::open([‘route’ => ‘route.name’]) !!}} - Menggunakan controller
{!! Form::open([‘action’ => ‘Controller@method’]) !!}} - Menggunakan route plus mengirimkan data
{!! Form::open([‘route’ => [‘route.name’, $user->id]]) !!}} - Menggunakan controller plus mengirimkan data
{!! Form::open([‘action’ => [‘Controller@method’, $user->id]]) !!}} - Form dengan file upload:
Form::open([‘url’ => ‘foo/bar’, ‘files’ => true]) - Berikut adalah contoh pembuatan form dengan text box dan dilengkapi dengan label:
Sebagai catatan: {!! !!} artinya akan dilakukan HTML Parse, misalnya teks akan membuat teks dicetak tebal
Berikut adalah contoh tampilan yang dihasilkan:
- Menambahkan Text Area dan dilengkapi dengan label:
- Apabila terjadi error, ada kemungkinan karena konflik di cache Bootstrap, silahkan dibersihkan dengan perintah Artisan di terminal:
$ php artisan cache:clear
- Contoh Tampilan Form setelah ditambah Text Area
- Menambah tombol Submit
Perintah berikut menambah tombol submit dengan tulisan Simpan dengan pengaturan tampilan menggunakan class btn dan btn-primary pada Bootstrap
{{Form::submit(‘Simpan’, [‘class’=>’btn btn-primary’])}}
Menangani PostsController@store
- Pada contoh sebelumnya apabila tombol form Simpan di diklik maka sesuai dengan setting data akan dikimkan ke PostsController@store.
- Silahkan menambahkan perintah di dalam controller PostsController untuk memvalidasi data dan menyimpannya dalam tabel database
Validasi Data
- Pada contoh ini validasi dilakukan dengan mewajibkan pengisian title dan description
- Apabila web dijalankan dengan validasi yang telah dilakukan, maka Form tidak berhasil dikirimkan, namun tidak tampak pesan kesalahan.
- Pesan kesalahan dari proses validasi akan dikirimkan ke Session Flash. Data ini hanya akan disimpan secara sementara ke session dan akan dihapus setelah pada request berikutnya ke server
- Menangani Error dan menampilkan Pesan Kesalahan. Buat file /resources/views/inc/messages.blade.php:
- Menampilkan pesan sukses:
Tambahkan /resources/views/inc/messages.blade.php:
- Menampilkan Message di View
File /resources/views/inc/messages.blade.php ditambahkan ke view dengan menggunakan perintah @include, bisa ditambahkan di template sebelum content
- Test the Validation
Pada saat form di submit dan Title tidak diisi akan tampil pesan kesalahan
Menyimpan Data di Database
- Kembali ke function store di PostsController, tambahkan perintah untuk menyimpan data:
- Kembalikan ke Halaman Post. Setelah proses menyimpan, maka perlu redirect untuk mengembalikan ke form atau ke halaman lain seperti misalnya daftar post
- Menampilkan pesan sukses. Setelah sukses menyimpan maka sesuai dengan redirect akan ditampilkan halaman daftar post dengan pesan sukses.
Memanfaatkan WYSIWYG di Text Area
Salah satu teks editor yang paling banyak dipergunakan adalah CKEditor, dimana untuk Laravel dapat diakses pada: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_package_managers.html#composer
- Berikut adalah perintah untuk menginstall CKEditor
- Menambahkan require dengan CKEditor pada file json:
“ckeditor/ckeditor”: “4.*”
- Menambahkan require dengan CKEditor pada file json:
-
- Mengupdate Composer melalui bash command:
composer update
- Mengupdate Composer melalui bash command:
- Menggunakan CKEditor
- Tambahkan CKEditor CDN terbaru di View template, sebelum </head>
<script src=”https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js”></script> - Mengganti class pada textarea dengan ckeditor
- Tambahkan CKEditor CDN terbaru di View template, sebelum </head>
-
- Berikut adalah tampilan Form yang sudah ditambah dengan CKEditor
-
- Silahkan mencoba Text Editor dengan CKEditor
-
- Pada saat dilihat hasilnya, maka di layar akan tampil source dari html, karena teks ditampilkan dengan menggunakan {{ $post->description }}, sehingga teks ditampilkan apa adanya, perlu diubah menjadi {!! $post->description !!} agar HTML di parse.