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:
Copy to Clipboard
PostController untuk halaman form

PostController untuk halaman form

  • Edit /resources/views/posts/create.blade.php
    Buatlah view berdasar template:
Membuat View untuk Form berdasarkan template

Membuat View untuk Form berdasarkan 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:
Copy to Clipboard
Tampilan Terminal pada saat install Laravel Collective di Project

Tampilan Terminal pada saat install Laravel Collective di Project

Petunjuk penggunaan Laravel Collective bisa dilihat pada halaman web resmi nya:

https://laravelcollective.com/docs/6.0/html

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:
Copy to Clipboard

Sebagai catatan: {!!    !!} artinya akan dilakukan HTML Parse, misalnya  teks akan membuat teks dicetak tebal

Berikut adalah contoh tampilan yang dihasilkan:

Contoh form yang dihasilkan

Contoh form yang dihasilkan

  • Menambahkan Text Area dan dilengkapi dengan label:
Copy to Clipboard
  • Apabila terjadi error, ada kemungkinan karena konflik di cache Bootstrap, silahkan dibersihkan dengan perintah Artisan di terminal:
    $ php artisan cache:clear
Error yang kadang muncul pada saat membuat Form

Error yang kadang muncul pada saat membuat Form

  • Contoh Tampilan Form setelah ditambah Text Area
Tampilan Form setelah ditambah Text Area

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’])}}
Tampilan Form setelah ditambah tombol Submit

Tampilan Form setelah ditambah tombol Submit

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
Copy to Clipboard
PostController dengan Validasi Data

PostController dengan Validasi Data

  • 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:
Copy to Clipboard
  • Menampilkan pesan sukses:
    Tambahkan /resources/views/inc/messages.blade.php:
Copy to Clipboard
  • Menampilkan Message di View
    File /resources/views/inc/messages.blade.php ditambahkan ke view dengan menggunakan perintah @include, bisa ditambahkan di template sebelum content
Menampilkan Message di View

Menampilkan Message di View

  • Test the Validation
    Pada saat form di submit dan Title tidak diisi akan tampil pesan kesalahan
Tampilan Error Message di Halaman

Tampilan Error Message di Halaman

Menyimpan Data di Database

  • Kembali ke function store di PostsController, tambahkan perintah untuk menyimpan data:
Copy to Clipboard
  • Kembalikan ke Halaman Post. Setelah proses menyimpan, maka perlu redirect untuk mengembalikan ke form atau ke halaman lain seperti misalnya daftar post
Perintah Redirect untuk memindahkan ke halaman lain

Perintah Redirect untuk memindahkan ke halaman lain

  • Menampilkan pesan sukses. Setelah sukses menyimpan maka sesuai dengan redirect akan ditampilkan halaman daftar post dengan pesan sukses.
Menampilkan Pesan Sukses

Menampilkan 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.*”
Penambahan CKEditor di require

Penambahan CKEditor di require

    • Mengupdate Composer melalui bash command:
      composer update
Tampilan Update Composer

Tampilan Update Composer

  • 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
Mengganti class menjadi 'ckeditor'

Mengganti class menjadi ‘ckeditor’

    • Berikut adalah tampilan Form yang sudah ditambah dengan CKEditor
Tampilan Form yang sudah ditambah dengan CKEditor

Tampilan Form yang sudah ditambah dengan CKEditor

    • Silahkan mencoba Text Editor dengan CKEditor
Mencoba CK Editor di Form

Mencoba CK Editor di Form

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

Tampilan sebelum di parse

Tampilan sebelum di parse

Mengubah View

Mengubah View

Tampilan Setelah di Parse

Tampilan Setelah di Parse

Written by: SEW 20191105