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.

  1. Prainstalasi
  2. Instalasi YiiFramework 2.0
  3. Login
  4. Login dengan Database pada Yii2
  5. Bekerja dengan Gii
  6. Module pada Yii2
  7. Layout dasar dan Manipulasinya pada Yii2
  8. Costum Asset dan Asset Bundle pada Yii2
  9. Alias pada Yii2
  10. Bekerja dengan Form
  11. Timestamp, Blameable, dan Sluggable Behavior pada Yii2
  12. Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
  13. Gridview dan Listview
  14. SEO Friendly Url dengan slug
  15. Scenario pada Model Yii2
  16. Retrieve data pada Yii2
  17. Relasi Database pada Yii2
  18. Widget Kartik
  19. Select2 dengan Kartik Ekstension
  20. Dependent Dropdown pada Yii2
  21. Bekerja dengan Modals
  22. Membuat Costum Template untuk Gii
  23. Mengupload File
  24. Mengupload File dengan Kartik Widget
  25. Gridview atau Datatables?
  26. Session dan Cookie pada Yii2
  27. Menggunakan AdminLTE pada Yii2
  28. Membuat Themes pada Yii2
  29. Menggunakan GoogleMaps API pada Yii2
  30. Menggunakan Socket.io pada Yii2
  31. Handling Error
  32. Bekerja dengan AuthClient
  33. Menggunakan Amazon S3 pada Yii2
  34. Mengirim Email dengan Swiftmailer pada Yii2
  35. Middleware pada Yii2
  36. Mengenal RBAC pada Yii2
  37. Implementasi RBAC pada Yii2
  38. 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:

  1. 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.
  2. Stack yang digunakan adalah Wamp Server (Apache 2.2, MySQL, PHP 7).
  3. 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

Url Manager pada Yii2

UrlManager menangani HTTP request parsing dan pembuatan url berdasarakan rules yang ada. Sebelumnya kita telah mengaktifkan urlManager dengan mengaktifkan pretty url pada series Bekerja Dengan Gii. Kita dapat memodifikasi routing pada Yii2 melalui Url Manager. Url Manager sendiri pada Yii2 terdapat pada file \app\config\web.php pada bagian urlManager.

Pada tutorial kali ini kita akan menambahkan rule baru dengan pola ketika pengguna melakukan klik pada sebuah artikel akan membuka actionView pada BlogController, namun url kita akan menampilkan judul artikel melalui field slug yang ada pada tabel blog kita.

Modifikasi Url Rules

Skenario kita pada modifikasi rules adalah blogroll akan menampilkan daftar artikel yang kita buat. Setiap artikel pada blogroll di-truncate dalam 30 kata, dan pada akhir kata ke 30 (dan pada judul artikel) terdapat link menuju detail artikel dengan format url http://hompage/judul-artikel sehingga lebih enak dibaca dan lebih SEO friendly.

Langkah pertama adalah kita membuat rule baru pada urlManager. Untuk itu kita modifikasi file \app\config\web.php dengan menambahkan pattern baru seperti di bawah ini.

'urlManager' => [
'enablePrettyUrl' => true,
'showScriptName' => false,
'rules' => [
['pattern' => '/<slug>', 'route' => 'blog/view']
],
],

Pattern di atas akan mengarahkan setiap http://homepage/judul-artikel ke actionView pada BlogController.

Modifikasi Link pada Blogroll

Selanjutnya kita akan memodifikasi link pada blogroll kita. Ubah file \app\views\_blog.php sehingga menjadi 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), ['/'.$model->slug]) ?></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 &raquo;", ['/'.$model->slug], [
'class' => 'btn btn-default'
]), true) ?>
</div>

Modifikasi Controller dan View pada BlogController

Selanjutnya kita bersihkan BlogController kita sehingga hanya akan ada actionView pada BlogController. Modifikasi \app\controllers\BlogController.php sehingga menjadi seperti di bawah ini.

<?php

namespace app\controllers;

use Yii;
use app\models\Blog;
use app\models\BlogSearch;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;

class BlogController extends Controller
{

public function behaviors()
{
return [
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'delete' => ['POST'],
],
],
];
}

public function actionView($slug)
{
return $this->render('view', [
'model' => $this->findModel($slug),
]);
}

protected function findModel($slug)
{
if (($model = Blog::find()->where(['slug' => $slug])->one()) !== null) {
return $model;
}

throw new NotFoundHttpException('The requested page does not exist.');
}
}

Kemudian modifikasi view dari actionView sehingga lebih menggambarkan flow dari blog kita. Ubah file \app\views\blog\view.php sehingga menjadi seperti di bawah ini.

<?php

use yii\helpers\Html;
use yii\helpers\HtmlPurifier;

$this->title = $model->title;
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="post">
<div class="row">
<div class="col-md-10">
<h2><?= Html::encode($model->title) ?></h2>
</div>
</div>

<div class="row">
<div class="col-md-10">
<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-default']) ?>
</div>
</div>
</div>

<div class="row">
<div class="col-md-10">
<?= HtmlPurifier::process($model->body) ?>
</div>
</div>
</div>

Terimakasih sudah membaca. Semoga bermanfaat dan Happy Coding!