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 pada Yii2
  9. Mengenal AssetBundle
  10. Bekerja dengan Form
  11. Timestamp, Blameable, dan Sluggable Behavior pada Yii2
  12. Scenario pada Model Yii2
  13. Retrieve data pada Yii2
  14. Relasi Database pada Yii2
  15. Gridview dan Listview
  16. Widget Kartik
  17. Select2 dengan Kartik Ekstension
  18. Dependent Dropdown pada Yii2
  19. Bekerja dengan Modals
  20. Membuat Costum Template untuk Gii
  21. Mengupload File
  22. Mengupload File dengan Kartik Widget
  23. Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
  24. Gridview atau Datatables?
  25. Session dan Cookie pada Yii2
  26. Menggunakan AdminLTE pada Yii2
  27. Membuat Themes pada Yii2
  28. Menggunakan GoogleMaps API pada Yii2
  29. Menggunakan Socket.io pada Yii2
  30. Handling Error
  31. Bekerja dengan AuthClient
  32. Menggunakan Amazon S3 pada Yii2
  33. Mengirim Email dengan Swiftmailer pada Yii2
  34. Middleware pada Yii2
  35. Mengenal RBAC pada Yii2
  36. Implementasi RBAC pada Yii2
  37. Notifikasi Real Time dengan Socket.io pada Yii2

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

Authentication pada Yii2

Pada Yii2 Advance Template Login dengan database menjadi sangat mudah karena User Sign Up dan User Login sudah tersedia. Kita cukup memberikan perintah php init dan yii migrate dan user management sudah tersedia untuk kita. Namun hal ini berbeda dengan Yii2 Basic Template yang hanya menyertakan login procedure pada aplikasinya.

Sebenarnya ada banyak ekstension yang dapat anda gunakan untuk membuat login pada yii2-basic, seperti Yii2-User dan Yii2-Admin yang dapat anda gunakan. Namun pada tulisan ini saya akan membagikan cara membuat login dan signup sendiri berdasarkan cara signup dan login yang ada di Yii2 Advance Template.

Ubah Konfigurasi Aplikasi agar Mengarah ke Database

Buka file app\config\db.php kemudian lengkapi file tersebut dengan database yang anda buat untuk aplikasi anda.

Buat Tabel User dengan Migration

Kita akan menggunakan tabel user dari migration pada advance template. Sebelum itu kita buat terlebih dahulu migrations untuk Yii2 Basic kita dengan perintah berikut.

./yii migrate/create init_user

Kemudian kita isi migration tadi dengan file berikut.

/* \migrations\init_user.php */
<?php

use yii\db\Migration;

/**
* Class m180128_080943_init_user
*/
class m180128_080943_init_user extends Migration
{

public function safeUp()
{
$tableOptions = null;
if ($this->db->driverName === 'mysql') {
// http://stackoverflow.com/questions/766809/whats-the-difference-between-utf8-general-ci-and-utf8-unicode-ci
$tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB';
}

$this->createTable('{{%user}}', [
'id' => $this->primaryKey(),
'username' => $this->string()->notNull()->unique(),
'auth_key' => $this->string(32)->notNull(),
'password_hash' => $this->string()->notNull(),
'password_reset_token' => $this->string()->unique(),
'email' => $this->string()->notNull()->unique(),

'status' => $this->smallInteger()->notNull()->defaultValue(10),
'created_at' => $this->integer()->notNull(),
'updated_at' => $this->integer()->notNull(),
], $tableOptions);
}

public function safeDown()
{
echo "m180128_080943_init_user cannot be reverted.\n";

return false;
}

}

Kemudian kita lakukan perintah berikut untuk apply migration yang kita lakukan.

./yii migrate

Perintah tersebut akan membuat 2 tabel pada database anda yaitu tabel migration dan tabel user.

Membuat dan Memodifikasi Model

Berikutnya kita akan mengubah model User.php yang awalnya hanya digunakan untuk login sederhana sekarang kita gunakan untuk membuat login dengan database. Pertama buka terlebih dahulu file app\models\User.php kemudian ubah file tersebut menjadi seperti di bawah ini.

<?php
/* \models\User.php */
namespace app\models;

use Yii;
use yii\base\NotSupportedException;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\web\IdentityInterface;

/**
* User model
*
* @property integer $id
* @property string $username
* @property string $password_hash
* @property string $password_reset_token
* @property string $email
* @property string $auth_key
* @property integer $status
* @property integer $created_at
* @property integer $updated_at
* @property string $password write-only password
*/
class User extends ActiveRecord implements IdentityInterface
{
const STATUS_DELETED = 0;
const STATUS_ACTIVE = 10;

/**
* @inheritdoc
*/
public static function tableName()
{
return '{{%user}}';
}

/**
* @inheritdoc
*/
public function behaviors()
{
return [
TimestampBehavior::className(),
];
}

/**
* @inheritdoc
*/
public function rules()
{
return [
['status', 'default', 'value' => self::STATUS_ACTIVE],
['status', 'in', 'range' => [self::STATUS_ACTIVE, self::STATUS_DELETED]],
];
}

/**
* @inheritdoc
*/
public static function findIdentity($id)
{
return static::findOne(['id' => $id, 'status' => self::STATUS_ACTIVE]);
}

/**
* @inheritdoc
*/
public static function findIdentityByAccessToken($token, $type = null)
{
throw new NotSupportedException('"findIdentityByAccessToken" is not implemented.');
}

/**
* Finds user by username
*
* @param string $username
* @return static|null
*/
public static function findByUsername($username)
{
return static::findOne(['username' => $username, 'status' => self::STATUS_ACTIVE]);
}

/**
* @inheritdoc
*/
public function getId()
{
return $this->getPrimaryKey();
}

/**
* @inheritdoc
*/
public function getAuthKey()
{
return $this->auth_key;
}

/**
* @inheritdoc
*/
public function validateAuthKey($authKey)
{
return $this->getAuthKey() === $authKey;
}

/**
* Validates password
*
* @param string $password password to validate
* @return bool if password provided is valid for current user
*/
public function validatePassword($password)
{
return Yii::$app->security->validatePassword($password, $this->password_hash);
}

/**
* Generates password hash from password and sets it to the model
*
* @param string $password
*/
public function setPassword($password)
{
$this->password_hash = Yii::$app->security->generatePasswordHash($password);
}

/**
* Generates "remember me" authentication key
*/
public function generateAuthKey()
{
$this->auth_key = Yii::$app->security->generateRandomString();
}

}

Selain model User, kita juga perlu membuat satu model lagi yang akan menangani registrasi user baru. Kita buat model baru dengan nama SignupForm.php dengan isi seperti di bawah ini.

<?php
/* \models\SignupForm.php */

namespace app\models;

use Yii;
use yii\base\Model;

/**
* Signup form
*/
class SignupForm extends Model
{

public $username;
public $email;
public $password;

/**
* @inheritdoc
*/
public function rules()
{
return [
['username', 'trim'],
['username', 'required'],
['username', 'unique', 'targetClass' => '\app\models\User', 'message' => 'This username has already been taken.'],
['username', 'string', 'min' => 2, 'max' => 255],
['email', 'trim'],
['email', 'required'],
['email', 'email'],
['email', 'string', 'max' => 255],
['email', 'unique', 'targetClass' => '\app\models\User', 'message' => 'This email address has already been taken.'],
['password', 'required'],
['password', 'string', 'min' => 6],
];
}

/**
* Signs user up.
*
* @return User|null the saved model or null if saving fails
*/
public function signup()
{

if (!$this->validate()) {
return null;
}

$user = new User();
$user->username = $this->username;
$user->email = $this->email;
$user->setPassword($this->password);
$user->generateAuthKey();
return $user->save() ? $user : null;
}

}

Lalu bagaimana dengan loginform? Karena LoginForm.php sudah extends User.php maka kita tidak perlu melakukan perubahan pada LoginForm.php. Seperti yang anda lihat, model User dan SignupForm di atas sama seperti model User dan SignupForm pada Yii2 Advance Template.

Membuat dan Modifikasi Layout

Sebelum kita lebih jauh ke pembuatan Signup dan Login, maka kita modifikasi terlebih dahulu halaman Layout kita untuk menambahkan menu register. Buka app\views\layouts\main.php dan tambahkan menu register pada  Nav::widget anda dan tambahkan menu berikut sebelum bagian login.

['label' => 'Register', 'url' => ['/site/signup'], 'visible' => Yii::$app->user->isGuest],

Selanjutnya menu akan memunculkan register apabila user belum login. Dan seperti yang anda lihat, berikutnya kita akan memodifikasi SiteController.php untuk menambahkan signup.

Membuat Prosedur Register/Signup

Pertama tentunya kita akan terlebih dahulu menambahkan action signup pada controller Site yang ada pada file app\views\SiteController.php. Kemudian tambahkan bagian berikut.


//.....
use app\models\SignupForm;
//.....


class SiteController extends Controller
{

//...

public function actionSignup()
{
$model = new SignupForm();

if ($model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}

return $this->render('signup', [
'model' => $model,
]);
}

}

Kemudian tidak lupa kita tambahkan views signup pada \app\views\signup.php seperti di bawah ini.

<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-signup">
<h1><?= Html::encode($this->title) ?></h1>
<p>Please fill out the following fields to signup:</p>
<div class="row">
<div class="col-lg-5">

<?php $form = ActiveForm::begin(['id' => 'form-signup']); ?>
<?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?>
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<div class="form-group">
<?= Html::submitButton('Signup', ['class' => 'btn btn-primary', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end(); ?>

</div>
</div>
</div>

Kemudian anda dapat mencoba melakukan signup dengan klik menu register pada website anda.

Selanjutnya anda sudah bisa menggunakan registrasi user dengan login user seperti layaknya anda menggunakan Yii2 Advance Template. Semoga bermanfaat dan Happy Coding!