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
Menampilkan Blogroll
Pada tulisan sebelum ini kita sudah banyak membedah tampilan manajemen blog kita yang hanya bisa diakses oleh akun yang sudah login. Namun kita belum mengubah tampilan blogroll untuk publik. Seperti website blog pada umumnya, tampilan homepage akan menampilkan blogroll daftar tulisan yang ada pada website tersebut.
Ubah Controller Untuk Gridview/Listview
Untuk membuat blogroll pada homepage kita, maka kita perlu memodifikasi SiteController kita untuk menampilkan daftar artikel yang ada. Kita akan mengambil sesuai dengan cara menampilkan data dari actionIndex pada BlogController. Modifikasi \app\controllers\SiteController.php
kita sehingga menjadi seperti di bawah ini.
<?php
// ....
use app\models\Blog;
use app\modules\administrator\models\BlogSearch;
// ......
public function actionIndex()
{
$searchModel = new BlogSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
$dataProvider->pagination->pageSize = 3;
$dataProvider->query->orderBy('created_at DESC');
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
Selain tambahan menampilkan blog dari BlogController kita juga menambahkan sorting data sehingga blogroll menampilkan artikel terbaru pada laman terdepan.
Membuat Gridview Menampilkan Blogroll
GridView adalah widget pada Yii2 yang digunakan untuk memudahkan menampilkan data dari sebuah DataProvider.Dapat dikatakan bahwa GridView merupakan widget paling powerfull di Yii2 untuk memudahkan menampilkan data secara cepat terutama bagi admin atau manajemen data berbentuk tabel. Kita akan memodifikasi file view pada file \app\views\site\index.php
kita sehingga menjadi seperti di bawah ini.
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
$this->title = 'My Yii Application';
?>
<div class="blog-index">
<h1><?= Html::encode($this->title) ?></h1>
<?php Pjax::begin(); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'slug',
'title',
'body:ntext',
'created_at',
//'updated_at',
//'created_by',
//'updated_by',
],
]); ?>
<?php Pjax::end(); ?>
</div>
Dengan tampilan tersebut kita telah membuat daftar artikel yang pernah kita buat dengan format tabel. Namun tentunya sebuah blogroll akan lebih baik ditampilkan dengan tampilan daftar dibandingkan dengan tampilan tabel. Untuk itu kita akan memodifikasi file \app\views\site\index.php
kita dengan format listview.
Membuat Listview Menampilkan Blogroll
ListView adalah widget pada Yii2 yang digunakan untuk memudahkan menampilkan data dari sebuah DataProvider. Berbeda dengan GridView yang menampilkan data dari kolom dalam bentuk tabel, Listview menampilkan data dalam bentuk itemView sehingga tampilan data dapat dibentuk sesuai dengan format html yang kita inginkan. Untuk menampilkan Listview kita akan memodifikasi file view pada file \app\views\site\index.php
kita sehingga menjadi seperti di bawah ini.
<?php
use yii\widgets\ListView;
$this->title = 'My Yii Application';
?>
<div class="site-index">
<div class="body-content">
<div class="row">
<div class="col-lg-10">
<?= Listview::widget([
'dataProvider' => $dataProvider,
'itemView' => '_blog',
'layout' => "{items}\n{summary}\n{pager}",
]) ?>
</div>
</div>
</div>
</div>
Pada bagian itemView kita melakukan renderPartial pada _blog
. Untuk hal tersebut kita butuh file _blog.php
yang akan merupakan format tampilan dari tiap item di DataProvider kita. Tambahkan file \app\views\site\_blog.php
pada folder yang sama seperti di bawah ini.
<?php
use yii\helpers\Html;
use yii\helpers\HtmlPurifier;
use yii\helpers\StringHelper;
?>
<div class="post">
<h2><?= Html::a(Html::encode($model->title), ['/blog', 'id' => $model->id]) ?></h2>
<div class="btn-group" role="group" aria-label="...">
<?php // Html::a("Username", false, ['class' => 'btn btn-default']) ?>
<?= Html::a('<i class="glyphicon glyphicon-calendar" ></i> '.Yii::$app->formatter->asDate($model->created_at), false, ['class' => 'btn btn-xs btn-default']) ?>
</div>
<?= StringHelper::truncateWords(HtmlPurifier::process($model->body), 30, Html::a("Read More »", ['/blog', 'id' => $model->id], [
'class' => 'btn btn-default'
]), true) ?>
</div>
Dengan tampilan tersebut tampilan blogroll kita sudah berformat daftar seperti blog pada umumnya. Namun jika kita lihat maka link dari tiap artikel masih menggunakan format id dari artikel, bukan judul artikel yang biasanya digunakan pada blog. Untuk itu pada tulisan berikutnya kita akan membahas mengenai pengaturan route agar menggunakan format slug pada view artikel.
Jika diperhatikan pada file _blog kita menampilkan field pada tabel blog dengan encode dan truncateWords. Encode merupakan salah satu method pada helpers Html yang akan menkonversi isi field menjadi format Html yang sudah difilter sehingga mengurangi risiko XSS attack. Pada bagian body kita menggunakan truncateWords yang merupakan salah satu method dalam StringHelper. Pada bagian ini kita akan memotong artikel yang ditampilkan pada blogroll sehingga hanya menampilkan 30 kata dengan diakhiri dengan tulisan read-more yang merupakan link yang mengarah pada artikel.
Terimakasih sudah membaca, semoga bermanfaat dan Happy Coding!