Pada tulisan ini saya akan membuat series mengenai pemrograman dengan Yii Framework. Series ini akan disusun untuk membuat sebuah program sederhana yang memanfaatkan fitur-fitur umum yang sangat mungkin digunakan di banyak kasus. Tulisan ini akan menggunakan Basic Template Yii2 (yang menurut saya penggunaannya sedikit lebih sulit daripada advance template Yii2).
Secara garis besar (dan mungkin akan bertambah sesuai keperluan yang mungkin terjadi) outline dari seri tulisan ini akan terdiri dari hal berikut.
- Prainstalasi
- Instalasi YiiFramework 2.0
- Login
- Login dengan Database pada Yii2
- Bekerja dengan Gii
- Module pada Yii2
- Layout dasar dan Manipulasinya pada Yii2
- Costum Asset dan Asset Bundle pada Yii2
- Alias pada Yii2
- Bekerja dengan Form
- Timestamp, Blameable, dan Sluggable Behavior pada Yii2
- Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
- Gridview dan Listview
- SEO Friendly Url dengan slug
- Scenario pada Model Yii2
- Retrieve data pada Yii2
- Relasi Database pada Yii2
- Menggunakan Bootstrap4
- Widget Kartik dan Kartik Gridview
- Select2 dengan Kartik Ekstension
- Dependent Dropdown pada Yii2
- Bekerja dengan Modals
- Membuat Costum Template untuk Gii
- Mengupload File
- Mengupload File dengan Kartik Widget
- Gridview atau Datatables?
- Session dan Cookie pada Yii2
- Menggunakan AdminLTE pada Yii2
- Membuat Themes pada Yii2
- Menggunakan GoogleMaps API pada Yii2
- Menggunakan Socket.io pada Yii2
- Handling Error
- Bekerja dengan AuthClient
- Menggunakan Amazon S3 pada Yii2
- Mengirim Email dengan Swiftmailer pada Yii2
- Middleware pada Yii2
- Mengenal RBAC pada Yii2
- Implementasi RBAC pada Yii2
- Notifikasi Real Time dengan Socket.io pada Yii2
Anda dapat mengunduh dan memantau progress dari series ini lewat repositori Github belajararief-yii2series. Silahkan bintangi (star) untuk dapat lebih mudah memantau perkembangan repositori.
Requirement
Untuk memudahkan anda dalam memahami petunjuk ini, maka beberapa hal yang perlu diperhatikan diantaranya:
- Sistem Operasi yang saya gunakan adalah Windows 10 64bit dengan terminal menggunakan powershell terminal (beberapa command seperti cd dapat berbeda dengan command prompt biasa), namun saya akan berusaha sebisa mungkin mencontohkan perintah pada sistem operasi lain jika memunkinkan.
- Stack yang digunakan adalah Wamp Server (Apache 2.2, MySQL, PHP 7).
- Yii yang digunakan adalah Yii 2.0 dengan catatan jquery yang digunakan bukan jquery3. Beberapa perintah jquery akan berbeda pada jquery3, dan beberapa extensions yang saya gunakan sepertinya belum mendukung jquery3
Rich Text Input
Sebagai sebuah aplikasi yang akan membuat dan menampilkan artikel yang akan dibaca pengguna, maka input pada field Body seharusnya menggunakan rich text input. Dengan menggunakan rich text input maka proses input akan lebih mudah dan memudahkan pengguna dengan format WYSIWYG (What You See is What You Get).
Ada banyak rich text input yang dapat digunakan. Diantara yang paling banyak digunakan adalah CkEditor. Oleh karena itu kita akan menggunakan CkEditor sebagai contoh penggunaan CKEditor pada Yii2.
Instalasi yii2-ckeditor
Pada contoh kali ini kita tidak akan menggunakan library CKEditor secara langsung lewat Js, namun kita akan menggunakan library CKEditor yang sudah dirancang terintegrasi dengan yii2-activeform. Oleh karena itu pada contoh ini kita menggunakan package 2amigos/yii2-ckeditor-widget. Untuk menambahkan yii2-ckeditor pada aplikasi anda maka jalankan perintah berikut pada terminal.
$ composer require 2amigos/yii2-ckeditor-widget
Perintah tersebut akan menambahkan 2amigos/yii2-ckeditor-widget. Info lainnya mengenai ekstensi ini dapat dilihat pada laman 2amigos/yii2-ckeditor-widget.
Menggunakan CKEditor pada Form
Setelah proses instalasi selesai anda dapat menggunakan CKEditor pada form kita. Modifikasi file \app\modules\administrator\views\blog\_form.php
sehingga menjadi seperti di bawah ini.
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\ckeditor\CKEditor;
?>
<div class="blog-form">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'body')->widget(CKEditor::class, [
'options' => ['rows' => 6],
'preset' => 'basic'
]) ?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Dengan modifikasi di atas field blog akan menggunakan CKEditor sebagai form input yang lebih mudah digunakan dengan format WYSIWYG.
Modifikasi Tampilan Gridview dan DetailView
Jika kita lihat pada tampilan Gridview dan DetailView kita masih menampilkan raw html pada field blog. Agar field tersebut menjadi lebih enak dilihat maka kita konversi tampilan agar dapat menampilkan html sesuai dengan format input setelah CKEditor. Modifikasi file \app\modules\administrator\views\index.php
dengan mengubah body column dengan format html seperti di bawah ini.
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'slug',
'title',
'body:html',
'created_at:date',
//'updated_at',
//'created_by',
//'updated_by',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
Kemudian modifikasi juga file \app\modules\administrator\views\view.php
sehingga terlihat seperti di bawah ini.
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'slug',
'title',
'body:html',
'created_at:date',
'updated_at:date',
'created_by',
'updated_by',
],
]) ?>
Alternatif RTI Lainnya
CKEditor bukanlah satu-satunya RTI yang dapat digunakan. Saya pribadi lebih sering menggunakan Quill karena menurut saya terasa lebih ringan (walaupun CKEditor bisa di set ke basic untuk minimalis).
Yii2-Quill salah satunya adalah widget yang dibuat oleh bizley ( https://github.com/bizley/yii2-quill ). Selain itu salah satu RTI yang paling sering digunakan adalah TinyMCE. Widget yang dapat anda gunakan salah satunya adalah yang dibuat oleh 2amigos (sama dengan pembuat widget untuk CKEditor) yaitu yii2-tinymce ( https://github.com/2amigos/yii2-tinymce-widget )
Terimakasih sudah membaca. Semoga bermanfaat dan Happy Coding!