Yii2-Series

PHP, WEBPROGRAMMING, PROGRAMMING, Yii2
View Comments

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. Menggunakan Bootstrap4
  19. Widget Kartik dan Kartik Gridview
  20. Select2 dengan Kartik Ekstension
  21. Dependent Dropdown pada Yii2
  22. Bekerja dengan Modals
  23. Membuat Costum Template untuk Gii
  24. Mengupload File
  25. Mengupload File dengan Kartik Widget
  26. Gridview atau Datatables?
  27. Session dan Cookie pada Yii2
  28. Menggunakan AdminLTE pada Yii2
  29. Membuat Themes pada Yii2
  30. Menggunakan GoogleMaps API pada Yii2
  31. Menggunakan Socket.io pada Yii2
  32. Handling Error
  33. Bekerja dengan AuthClient
  34. Menggunakan Amazon S3 pada Yii2
  35. Mengirim Email dengan Swiftmailer pada Yii2
  36. Middleware pada Yii2
  37. Mengenal RBAC pada Yii2
  38. Implementasi RBAC pada Yii2
  39. 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

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!