Membuat Blog dengan Laravel 5.7 dan AdminLTE 3 (12) – Modifikasi Form

WordPress-Like Blog Laravel 5.7 and AdminLTE 3 (12) – Modifikasi Form

Pada bagian kedua belas ini, kita akan :

  1. Menggunakan jQuery untuk mengisi field slug post.
  2. Menggunakan library simplemde.com untuk field body dan excerpt.
  3. Menggunakan Jasny Bootstrap Plugin untuk Preview Image Upload.
  4. Memodifikasi Form supaya mirip WordPress (Sedikit)

Menggunakan jQuery untuk mengisi field slug post

Dari Form yang ada, kita akan menambahkan skrip jquery untuk mengisi field slug secara otomatis ketika field judul sudah diisi. Pertama-tama, buka resources/views/backend/blog/create.blade.php dan tambahkan skrip jquery pada bagian script :

Menggunakan Library simplemde.com Untuk Field Body dan Excerpt

Buka simplemde.com dan download file zip nya. Extract file zip, ubah folder dist menjadi ‘simplemde’, dan pindahkan ke direktori public/backend/plugin.

Buka main.blade.php yang berada di dalam resource/views/layouts/backend dan tambahkan simplemde css dan custom.css

dan juga javascript nya

Lalu, buka create.blade.php dan tambahkan kode berikut ke bagian script :

Buka formnya, kita akan melihat berbagai icon di atas field excerpt dan body :

Membuat Blog dengan Laravel 5.7 dan AdminLTE 3 (12) – Modifikasi Form

Kita akan mengurangi height dari excerpt field, dengan menambahkan kode css berikut di  backend/css/custom.css.

Tambahkan class excerpt ke excerpt field di dalam create.blade.php

Sekarang tinggi excerpt field sudah berubah.

Menggunakan Jasny Bootstrap Plugin untuk Preview Image Upload

Saat ini, ketika kita mengupload file, kita tidak bisa melihat previewnya. Dengan jasny plugin, kita akan menambahkan tampilan preview. Copy file css dan javascript dari plugin ini dan simpan di main.blade.php.

Modifikasi create.blade.php pada bagian file upload :

Membuat Blog dengan Laravel 5.7 dan AdminLTE 3 (12) – Modifikasi Form2

Memodifikasi Form

Supaya mirip sedikit dengan wordpress, kita akan memodifikasi form. Ganti code di create.blade.php menjadi seperti ini :

Hasil akhirnya akan jadi seperti ini :

Membuat Blog dengan Laravel 5.7 dan AdminLTE 3 (12) – Modifikasi Form 3

Github commit.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.