Membuat layout login YII2

Selamat Pagi... Sesuai janji saya kemarin, hari ini kita akan membuat layout. Tapi, walaupun saya bilang membuat layout, sepertinya apa yang akan saya buat ini lebih ke menambahkan css pada halaman login. Karena kalau di pikir-pikir, login itu layoutnya seperti apa ya?

Akan lebih baik kalau anda sudah membaca postingan sebelumnya mengenai layout dan asset. Kecuali anda sudah paham mengenai kedua hal tersebut.

1. Buka layoutLogin.php yang kemarin kita buat. Pada tag div dengan class wrap, hapus semuanya keduali div dengan class container. Kenapa kita hapus? Karena login tidak memiliki header ataupun footer.

2. Edit login.php menjadi seperti berikut:

<?php

/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model app\models\LoginForm */

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

//$this->title = 'Login';
//$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-login">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 form">
       
        <h1>Log<b>In</b></h1>

        <p>Please fill out the following fields to login:</p>

        <?php $form = ActiveForm::begin([
            'id' => 'login-form',
            'options' => ['class' => 'form-horizontal'],
            'fieldConfig' => [
                'template' => "{label}<div class=\"col-md-8\">{input}</div>\n<div>{error}</div>",
                'labelOptions' => ['class' => 'col-md-4 control-label'],
            ],
        ]); ?>

            <?= $form->field($model, 'username') ?>

            <?= $form->field($model, 'password')->passwordInput() ?>

            <?= $form->field($model, 'rememberMe')->checkbox([
                'template' => "<div class=\"col-md-4\"></div><div class=\"col-md-8\">{label} {input}</div>"
            ]) ?>

            <div class="form-group">
                <div class="col-md-4"></div>
                <div class="col-md-8">
                    <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
                </div>
            </div>

        <?php ActiveForm::end(); ?>

        </div>
        <div class="col-md-4"></div>
    </div>
    <!--div class="col-lg-offset-1" style="color:#999;">
        You may login with <strong>admin/admin</strong> or <strong>demo/demo</strong>.<br>
        To modify the username/password, please check out the code <code>app\models\User::$users</code>.
    </div-->
</div>
3. Buat file login.css pada direktori /web/css/.

4. Pada LoginAsset.php, tambahkan login.css ke dalam css yang akan digunakan. Atau pastikan public $css seperti berikut:

public $css = [
        'css/site.css',
        'css/login.css',
    ];
5. Isi login.css dengan script berikut:

.form h1, .form p{
    text-align: center;
}
form{
    background-color: #bbb;
    padding: 20px;
    margin-top: 20px;
}
.site-login{
    margin-top: -50px;
}
6. Refresh tampilah login anda, dan hasilnya akan seperti berikut:

Bila ada pertanyaan atau saran, silahkan berkomentar... Terima kasih