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

Assets dan File External untuk YII2

Setelah sebelumnya kita sudah "mengenal fungsi yang bertanggung jawab pada layout YII2, dan bagaimana mengganti layout pada halaman tertentu". Hari ini kita lanjutkan menuju seri ke-dua, yaitu : "mengenal kegunaan folder assets pada YII2 serta bagaimana menambahkan file tambahan (css,js atau yang lain) pada layout kita".

Berhubung saya sudah terlanjur menuliskan tentang mengenal kegunaan folder assets, maka mari kita awali pembahasan kali ini dengan sebuah pertanyaan. Apa fungsi folder assets?
 
Sebelum menjawab pertanyaan itu, kita harus mengerti fungsi dari file yang ada di dalam folder tersebut. Di dalam folder assets terdapat sebuah file, yaitu AppAsset.php. Fungsi AppAsset.php itu apa coba? Kalau menurut saya, fungsi dari file tersebut adalah untuk meng-include atau memanggil file-file yang digunakan untuk halaman dan layout. Silahkan buka file main.php yang ada di dalam folder layout. Di sana ada satu baris script seperti ini:

AppAsset::register($this);

Yang maksudnya adalah menggunakan file-file yang di-include oleh file AppAsset.php untuk digunakan pada layout. Jadi, apa fungsi folder assets?

Ya! Fungsi folder assets adalah untuk menampung file-file asset yang akan digunakan untuk layout. Itu menurut saya, silahkan bila anda memiliki pendapat yang berbeda.

Sekarang timbul sebuah pertanyaan, di mana letak file-file yang digunakan untuk layout? Pada file AppAsset.php terdapat script seperti ini:

public $baseUrl = '@web';

Apakah file tersebut berada di folder web? Kita lanjutkan dengan melihat script berikut:

public $css = [
    'css/site.css',
];

Sekarang, coba lihat folder web. Apakah di sana ada folder css? Jika iya, silahkan buka. Apakah ada file site.css di dalamnya? Lalu bagaimana kesimpulan anda?

Maaf kalau ada yang merasa penjelasan saya terbelit-belit. Tapi, file yang digunakan memang diletakkan pada folder web. Itu intinya.

Apa saja yang harus kita perhatikan dalam file AppAsset.php atau jika kita ingin membuat file dengan fungsi yang sama? Sebagai contoh, kita akan membuat file LoginAsset.php pada folder assets. Copy script yang ada di dalam file AppAssets.php ke file LoginAsset.php. Lalu kita Edit file LoginAsset.php:

1. Ubah nama class yang sebelumnya AppAsset menjadi LoginAsset. Nama class disesuaikan dengan nama file, hanya saja tanpa ekstensi .php

2. Isi variabel public $css dan public $js dengan array tempat di mana file yang layout tersebut dibutuhkan. Root-nya adalah folder web.

Contoh, di dalam folder web terdapat folder js dan di dalam folder js tersebut terdapat file jquery.js. Bila kita ingin meng-include file jquery.js tersebut, maka pada variabel public $js kita isi arraynya dengan js/jquery.js,

3. Variabel public $depends berisi class YII yang ikut atau digunakan pada layout. Contohnya, script ini:

'yii\bootstrap\BootstrapAsset',

berfungsi untuk meng-include bootstrap ke dalam layout kita. Namun bila kita tidak menggunakan bootstrap, kita boleh menghapusnya. Tapi, kita juga boleh mengabaikannya. Karena yang paling penting adalah css dan javascriptnya.

Lalu, bagaimana agar LoginAsset.php digunakan oleh layoutLogin.php?

1. Buka file layoutLogin.php

2.  Ganti script:

AppAsset::register($this);

dengan script:

LoginAsset::register($this);

3. Selesai. Sekarang, LoginAsset telah digunakan oleh layoutLogin.

Kita sudah mengetahui tentang folder assets dan isinya, kemudian tempat untuk meletakkan file eksternal kita. Maka pembahasan hari ini sudah selesai. Besok, kita akan menggunakan apa yang telah kita ketahui untuk membuat sebuah layout buatan sendiri. Sekian dan terima kasih...

Mengganti Layout YII2

Selamat pagi... Layout. Jika kita berbicara tentang layout, maka hal pertama yang terpikirkan adalah sebuah tampilan yang enak dilihat. Atau mungkin yang tiba-tiba muncul dalam benak kita karena mendengar kata layout adalah "Bagaimana kita mengganti layout halaman ini?". Atau mungkin yang lain. Untuk beberapa hari ini kita akan membahas tentang layout YII2.

Tapi... Kita bagi menjadi beberapa bagian ya. Yaitu:

• - Mengenal fungsi yang bertanggung jawab pada layout YII2, dan bagaimana mengganti layout pada halaman tertentu.
• - Mengenal kegunaan folder assets pada YII2 serta bagaimana menambahkan file tambahan (css,js atau yang lain) pada layout kita.
• - Implementasi dari kedua hal di atas. Yaitu membuat layout sendiri.

Hari ini kita akan mengikuti bahasan yang pertama, yaitu mengenal fungsi yang bertanggung jawab pada layout YII2, dan bagaimana mengganti layout pada halaman tertentu.

Apa fungsi yang bertanggung jawab pada layout YII2? Sebenarnya, kita mungkin tidak menemukan sebuah fungsi yang spesifik mengubah layout. Tapi, ada beberapa hal yang berhubungan dengan hal tersebut.

Yang pertama adalah file main.php yang ada pada direktori /views/layout/. Jika kita perhatikan, script yang ada pada file main.php inilah yang dijadikan layout pada aplikasi YII2 kita. Coba deh, kita sedikit obrak-abrik file tersebut, pasti layout kita juga akan terkena dampaknya. Dari sini, kita bisa mengubah layout aplikasi YII2 kita hanya dengan mengubah isi dari file ini. Sayangnya, semua halaman akan terkena dampaknya, alias semua halaman layoutnya akan berubah mengikuti file main.php.

Lalu timbul sebuah pertanyaan, bagaimana kita  mengubah layout sebuah halaman tanpa mempengaruhi layout halaman yang lain? Misalnya, kita ingin layout untuk halaman login berbeda dengan halaman yang lain. Tidak mungkin kita hanya mengubah file main.php, karena perubahan tersebut akan berdampak pada layout halaman yang lain. Kita juga tidak mungkin hanya mengubah file login.php yang ada pada direktori /views/site/, karena file tersebut hanya berpengaruh pada isi-nya saja, bukan layoutnya. Bagaimana dong?

Untuk permasalahan seperti itu, kita bisa membuat sebuah layout khusus yang hanya digunakan halaman login. Caranya?

1. Buat sebuah file php pada direktori /views/layout/ misalnya layoutLogin.php

2. Kemudian kita copy script dari file main.php ke dalam file layoutLogin.php

3. Lalu buka file SiteController.php yang ada pada direktori controllers, dan...

4. Karena yang kita ubah layoutnya adalah halaman login, maka kita alihkan pandangan kita menuju fungsi yang mempunyai peran terhadap halaman login, yaitu public function actionLogin.

5. Setelah itu, kita sisipkan script berikut:

$this->layout = 'layoutLogin';

Kemudian save. Script tambahan tersebut berfungsi untuk mengatur layout halaman login sesuai dengan file layoutLogin.php yang ada pada folder layout. Dengan kata lain, dengan mengubah file layoutLogin.php, maka layout pada halaman login akan berubah.

6. Sekarang, silahkan edit file layoutLogin.php untuk menghasilkan layout pada halaman login sesuai keinginan kita.

Dengan cara di atas, seharusnya kita sudah mengerti layout YII2 dan mampu untuk mengubah layout. Karena YII2 menggunakan css framework Bootstrap, maka akan lebih baik jika kita menguasai bootstrap.

Namun, timbul sebuah permasalahan. Yaitu, bagaimana kita menambahkan file css, js dan sebagainya pada layout kita? Kita akan membahas hal tersebut besok. Selamat menikmati...

Mengaktifkan Pretty URL YII2

Jika kita sudah mengenal YII2, tentunya kita pernah melihat atau setidaknya tahu tentang Pretty Url. Ya! Pretty Url digunakan agar Url yang dihasilkan menjadi lebih mudah dibaca. Contoh, dari alamat:

http://localhost/basic/web/index.php?r=site/login

menjadi:

http://localhost/basic/web/site/login

Tentunya lebih mudah membaca url yang bawah kan? Nah, sekarang... Bagaimana kita melakukannya?

Pertama, kita buat sebuah file dengan nama .htaccess pada folder web. Jika kita menggunakan YII2 Advanced, kita membuat file .htaccess pada folder web di dalam backend dan juga frontend. Setelah kita membuat file-nya, kemudian kita isi file tersebut dengan script berikut:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . index.php
Jika sudah, kita buka file web.php yang ada pada folder config. Itu untuk YII2 Basic. Jika kita menggunakan YII2 Advanced, buka file common/config/main-local.php. Lalu pada array components, kita tambahkan script berikut:

'urlManager' => [
  'class' => 'yii\web\UrlManager',
  // Disable index.php
  'showScriptName' => false,
  // Disable r= routes
  'enablePrettyUrl' => true,
  'rules' => array(
    '<controller:\w+>/<id:\d+>' => '<controller>/view',
    '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
    '<controller:\w+>/<action:\w+>' => '<controller>/<action>',
  ),
],
Jika masih bingung meletakkan script di atas, mungkin bisa melihat gambar di bawah:

Setelah itu, simpan dan refresh halaman yii kita. Maka Pretty Url sudah aktif.

Sekian dan terima kasih...

referensi : http://stackoverflow.com/questions/26525320/enable-clean-url-in-yii2

Date Picker Widget Yii2 [part2]

Sebelumnya kita telah memasang widget date picker pada form. Sekarang kita akan menggunakan datepicker pada pencarian berdasarkan tanggal di gridview.

Permasalahannya adalah meskipun pencariannya berdasarkan tanggal, gridview hanya menyediakan inputan teks. Bisa dilihat seperti di bawah:

Untuk mengatasi hal tersebut, kita bisa menggunakan widget date picker yang telah kita pasang sebelumnya. Caranya:

1. Buka file index.php yang menampilkan gridview. Contohnya pada crud dengan gii, saya membuat folder artikel, jadi letak file index.php tersebut ada di dalam folder artikel.

2. Tambahkan use dosamigos\datepicker\DatePicker; di bawah kode:

use yii\helpers\Html;
use yii\grid\GridView;

sehingga menjadi:

use yii\helpers\Html;
use yii\grid\GridView;
use dosamigos\datepicker\DatePicker;

3. Dalam index.php pasti ada script seperti berikut :

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'user_id',
            'judul',
            'isi:ntext',
            'tanggal',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

Karena yang akan kita ubah adalah tanggal, maka hapus 'tanggal', dan ubah dengan script berikut :


            [
                'attribute'=>'tanggal',
                'value'=>'tanggal',
                'format'=>'raw',
                'filter'=>DatePicker::widget([
                    'model'=>$searchModel,
                    'attribute'=>'tanggal',
                    'clientOptions'=>[
                        'autoclose'=>true,
                        'format'=>'yyyy-mm-dd',
                    ],
                ]),
            ],

Sehingga menjadi seperti ini:

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'user_id',
            'judul',
            'isi:ntext',
            [
                'attribute'=>'tanggal',
                'value'=>'tanggal',
                'format'=>'raw',
                'filter'=>DatePicker::widget([
                    'model'=>$searchModel,
                    'attribute'=>'tanggal',
                    'clientOptions'=>[
                        'autoclose'=>true,
                        'format'=>'yyyy-mm-dd',
                    ],
                ]),
            ],

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>


Nilai attribute dan value di sana disesuaikan dengan database. Contohnya, 'tanggal' di sana sesuai dengan kolom yang berada pada tabel artikel.

Jika berhasil, nanti akan seperti ini jadinya:

Kalau terdapat error, coba perhatikan baik-baik script-nya. Kadang, error terjadi karena ada yang salah dengan penulisan script, meskipun cuma satu huruf. Perhatikan pesan errornya juga, karena biasanya pesan error akan memudahkan kita untuk mengatasi error yang terjadi.

Sekian tentang DatePicker dan sampai jumpa lagi...

Contoh Aplikasi E-commerce YII2 Shop Samdark

Bagi kita yang sedang mencari referensi atau contoh web e-commerce, saya rasa bisa melirik aplikasi web "yii2-shop" yang dibuat oleh samdark. Silahkan ikuti link berikut untuk menuju halaman aplikasi tersebut di situs github.com.

Di sana sudah ada petunjuk cara pemasangannya pada komputer kita. Setelah terpasang, cara instalasinya agar contoh projek tersebut bisa digunakan sama dengan cara instalasi yii2 advance template.

Jika belum mengerti bagaimana cara instalasi yii advance template, saya sarankan ikuti tutorial sebelumnya di http://byabdillah.blogspot.com/2015/09/cara-menginstall-yii2-advanced-template.html.

Tapi, entah kenapa saya gagal memasang yii2-shop milik samdark tersebut menggunakan cara yang telah ada pada README.md. Yaitu pada INSTALATION, Install via Composer. Maka dari itu, saya memasangnya secara asal-asalan. Sayangnya, sepertinya berhasil.

Pertama kita menuju halaman yii2-shop buatan samdark pada situs github.com. Ini linknya.

Kemudian kita download projek tersebut. Caranya, cari dan tekan tombol Download Zip yang berada di sebelah kanan halaman.

Kemudian ekstrak hasil file yang telah kita download tadi dan rename dari "yii2-shop-master" menjadi "yii2-shop".

Setelah itu, pindah ke folder htdocs atau var/www/html.

Buka terminal, dan masuk ke direktori yii2-shop tadi.

cd /opt/lampp/htdocs/yii2-shop

Coba masukkan perintah

php init

Jika yang muncul nanti seperti ini:

Maka kita tinggal melanjutkan instalasinya seperti instalasi yii2 advance template.

Tapi jika yang terlihat tidak seperti gambar di atas, berarti ada masalah. Yang paling sering terjadi adalah error akibat laptop/komputer kita belum terinstall mcrypt. Cirinya adalah pada pesan error ada kata-kata "require mcrypt". Maka silahkan install mcrypt terlebih dahulu dengan memasukkan perintah:

sudo apt-get install php5-mcrypt

Jika mcrypt sudah terinstall, masukkan perintah:

sudo php5enmod mcrypt

Setelah itu, mcrypt benar-benar sudah terinstall.

Kemudian lakukan instalasi "yii2-shop" seperti instalasi yii2 advance template.

Tapi, kok waktu buka http://localhost/yii2-shop/frontend/web/index.php atau http://localhost/yii2-shop/backend/web/index.php muncul error? Atau waktu yii migrate muncul error?

Coba lihat folder projek kita tadi, apakah ada folder vendor? Percobaan pertama saya, ada folder vendornya. Tapi, pada percobaan ke dua dan ke tiga, kok tidak ada folder vendor ya? Maka dari itu, saya copy folder vendor dari projek percobaan pertama ke dalam folder projek ke dua dan ke tiga. Aha! Berhasil!

Kalau ada butuh folder vendor-nya, silahkan download di sini.

Setelah mendownload folder vendornya, pindah hasil ekstrakan tersebut ke dalam folder yii2-shop. Jika sudah, coba buka:

http://localhost/yii2-shop/frontend/web/index.php

http://localhost/yii2-shop/backend/web/index.php

Di halaman frontend mungkin terlihat gitu-gitu aja, karena kita belum menambahkan kategori atau produk apapun. Kita dapat menambahkan kategori ataupun produk pada backend-nya.

Date Picker Widget Yii2

Ternyata yang di tips & trik memasang widget kemarin itu date time picker. Dan penggunaannya cukup merepotkan kalau yang dibutuhkan cuma tanggalnya saja. Jadi, kali ini kita akan memasang date picker pada form dan juga menggunakan date picker tersebut pada gridview.
Seperti biasa, pertama buka terminal dan buka direktori projek kita. Pastikan sudah menginstall composer. Jika belum, masukkan perintah:

curl -sS https://getcomposer.org/installer | php

Setelah itu install date picker widget dengan memasukkan perintah:

php composer.phar require "2amigos/yii2-date-picker-widget" "*"

Contohnya kita memiliki database seperti berikut:

Kemudian kita membuat Model dan CRUD menggunakan GII. Namun, pada form, inputan untuk tanggal berbentuk teks seperti biasa.

Jadi, kita buka file _form.php dan kita ubah script:

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

menjadi:

    <?= $form->field($model, 'tanggal')->widget(
        DatePicker::className(),[
            'inline' => true,
            'template' => '<div class="well well-sm" style="background-color:#fff;width:250px">{input}</div>',
            'clientOptions' => [
                'autoclose' => true,
                'format' => 'yyyy-m-d'
            ]
        ]
    ) ?>

Jangan lupa, dibawah script

use yii\helpers\Html;
use yii\widgets\ActiveForm;

harus kita isi dengan use dosamigos\datepicker\DatePicker;  sehingga nanti akan menjadi seperti ini:

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\datepicker\DatePicker;

Penjelasan:

use dosamigos\datepicker\DatePicker; kita tambahkan karena kita memang menggunakan datepicker. Singkatnya, perintah tersebut gunanya

Hasilnya nanti akan seperti ini:

Jika kita ingin datepicker yang lebih standar, cukup ubah 'inline'=>true, menjadi 'inline'=>false, dan hapus templatenya sehingga menjadi

    <?= $form->field($model, 'tanggal')->widget(ba
        DatePicker::className(),[
            'inline' => false,
            'clientOptions' => [
                'autoclose' => true,
                'format' => 'yyyy-m-d'
            ]
        ]
    ) ?>

Hasilnya nanti seperti ini:

Baiklah, silahkan lihat kelanjutannya tentang pencarian pada gridview dengan datepicker untuk pencarian berdasarkan tanggal di sini.
Jika ada yang kurang dipahami, silahkan bertanya.

DropdownList Berdasarkan Database Pada YII2

Selamat datang... Kali ini kita akan belajar membuat sebuah drop down list berdasarkan database pada YII2.

Mengapa kita perlu membuat sebuah drop down list pada form kita? Kan kita bisa membuat sebuah drop down secara manual. Um... kita buat sebuah studi kasus.

Kita mempunyai dua buah tabel seperti berikut:

Kemudian kita membuat CRUD tabel 'artikel' menggunakan GII dan hasilnya seperti ini:

Kalau belum tahu caranya membuat CRUD menggunakan GII, silahkan ikuti tutorial berikut terlebih dahulu.

Di sini kita anggap saja yang memasukkan data bukanlah penulis artikel itu sendiri. Melainkan orang lain yang tugasnya memang memasukkan data. Masalah yang muncul adalah, petugas tersebut tidak hafal id penulis dan ini membuat pekerjaannya menjadi kurang cepat. Karena itu, kita akan mengganti form input tersebut menjadi dropdown list yang berisi nama-nama penulis. Meskipun nanti, nilai yang disimpan di database adalah id sang penulis.

Baiklah, pertama yang perlu kita edit adalah _form.php yang ada di folder artikel.

Pada bagian atas(yang ada use), kita tambahkan arrayHelper dan models tabel User. Sehingga menjadi seperti ini:

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use common\models\User;

Di atas models User saya namespace-nya "common\models". Bisa disesuaikan dengan namespace dari model yang anda gunakan.

Lalu pada kita ubah :

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

Menjadi :

<?=
$form->field($model, 'user_id')->dropDownList(
        ArrayHelper::map(User::find()->all(),'id','username'),
        ['prompt'=>'Pilih User']
)
?>

Penjelasan step by step:
1. Kita ubah textInput() menjadi dropDownList() karena kita akan membuat sebuah dropdown. Tapi, bagaimana dengan isinya?
2. Untuk mengisi dropdown tersebut, kita menggunakan ArrayHelper yang di integrasikan dengan model User.
3. Pada sintaks di atas, User adalah nama class yang ada di dalam model. Sedangkan maksud dari sintak User::find()->all() adalah menemukan dan mengambil semua data yang ada pada tabel user (kan model User dibuat berdasarkan tabel user).
4. 'id' dan 'username' di sana adalah kolom yang ada pada tabel user. 'id' adalah apa yang akan dikirimkan ketika form di submit, sedangkan 'username' adalah apa yang akan muncul (menjadi isi) di dropdown.
5. ['prompt'=>'Pilih User'] berarti, nilai awal atau tulisan yang ada pada dropdown ketika kosong adalah 'Pilih User'.

Jadinya seperti ini:

Jikalau anda merasa ada kesalahan atau error, silahkan berkomentar dengan bijak. Sekian dan terima kasih.

Mengistall Widget/Extension Yii2

Kali ini kita akan memasang Widget atau Extension pada projek yii2 kita. Soalnya, kalau hanya mengandalkan yii2 tanpa widget atau extension itu 'rasanya ada yang kurang gitu...'. Tapi tetap saja, harus sesuai dengan keperluan projek kita. Baiklah, kita mulai saja.

Buka terminal dan buka folder projek kita.

cd /opt/lampp/htdocs/advanced

Lalu install Composer dengan mengetikkan perintah:

curl -sS https://getcomposer.org/installer | php

Composer kita perlukan untuk memasang widget atau extension yii2. Jangan lupa pastikan komputer atau laptop kita tersambung dengan internet.

Jika Curl belum terpasang, silahkan install Curl dengan mengetikkan perintah:

sudo apt-get install curl

Jika composer terpasang, pada folder advanced (projek kita) akan mucul file dengan nama "composer.phar". Kemudian kita lanjutkan dengan menginstall extension yang kita butuhkan. Misalnya, kita akan memasang extension "date time picker". Maka kita buka dulu situs resmi yii.

Lalu tekan tulisan extension yang ada di atas (tulisannya kecil). Akan muncul halaman yang menampilkan berbagai extension.

Karena kita akan mencari extension "date time picker", jadi kita masukkan kata kunci "date time picker yii2" dan tekan find.

Setelah halaman hasil pencarian sudah terlihat, pilih dan klik salah satu extension yang menurut kita cocok.

Nanti akan muncul halaman extension tersebut. Dan di sana sudah tertulis dengan jelas perintah apa yang digunakan untuk menginstall extension tersebut.

Pada halaman yang saya pilih, cara memasang extension date time picker adalah dengan memasukkan perintah berikut pada terminal:

php composer.phar require "2amigos/ yii2-date-time-picker-widget" "*"

Setelah itu tekan enter dan tunggu sampai proses instalasi extension ke projek kita selesai.

Bagaimana cara penggunaan widget yang telah kita pasang itu? Silahkan lihat halaman widget / extension tersebut pada situs yii.

Misalnya, pada extension yang baru saja kita pasang, cara penggunaannya adalah sebagai berikut :

Untuk lebih jelasnya mengenai cara penggunaan dan pengaturan widget atau extension tersebut, silahkan buka situs resmi widget tersebut dan baca dokumentasinya. Saya yakin kita semua bisa jika mau membaca dan berusaha.

Silahkan ber-experiment-ria dan semoga berguna.

Cara Menginstall YII2 Advanced Template via Archive File

Beberapa waktu yang lalu kita sudah belajar caranya memasang Yii, khususnya Yii Basic Template. Nah, sekarang kita akan belajar caranya memasang Yii yang Advance Template. Cara pemasangan Yii Basic Template dengan Yii Advance Template agak beda. Kalau Yii Basic Template kita hanya perlu download Archive File-nya, ekstrak, pindah ke folder yang bisa diakses oleh localhost (htdocs atau www) dan tinggal isi cookieValidationKey. Jadi deh! Yii Advance Template agak beda nih.

Pertama, kita download dulu Yii Advance Template dari http://www.yiiframework.com/download/

Kemudian kita ekstak dan pindah hasil ekstakan tersebut (folder advanced) ke htdocs atau www (tergantung yang ada yang mana).

Setelah itu buka terminal (linux) atau cmd (windows) dan buka direktori htdocs atau www (tergantung yang kita gunakan).

linux: cd /opt/lampp/htdocs/advanced

windows: cd c:\xampp\htdocs\advanced

Lalu masukkan perintah

php init

Pastikan lampp kita sudah berjalan. Kalau lampp belum berjalan, akan terjadi error. Tapi jika server lokal (xampp, lampp, atau wampp) sudah berjalan dan masih terjadi error, berarti ada masalah.

Untuk Linux, bisa diatasi dengan memasang/menginstall php5-cli :

sudo apt-get install php5-cli

Selain dengan memasang php5-cli, cara lain yang bisa kita lakukan adalah dengan menggunakan php yang sudah ada :

linux: sudo /opt/lampp/bin/php /opt/lampp/htdocs/advanced/init

windows: c:\xampp\bin\php c:\xampp\htdocs\advanced\init

Kalau masih error, coba buka folder bin yang ada pada xampp atau lampp dan cari file dengan nama php atau php-5.*.*. Contoh, di laptop saya (linux) pada folder bin tidak ada file dengan nama php, tapi yang ada adalah php-5.6.11. Maka perintah di atas kita sesuaikan menjadi :

linux: sudo /opt/lampp/bin/php-5.6.11 /opt/lampp/htdocs/advanced/init

windows: c:\xampp\bin\php-5.6.11 c:\xampp\htdocs\advanced\init

Note : Cara di atas merupakan hipotesis saya. Ada kemungkinan berhasil dan gagal. Tapi, silahkan dicoba.

Mari kita lanjutkan pemasangan Yii Advance-nya.

Setelah kita memasukkan perintah php init, akan muncul pilihan Development atau Production. Kita akan memakai yang Development saja, jadi ketikkan 0 dan enter. Lalu ketikkan yes pada terminal/cmd dan enter lagi.

Buka http://localhost/advanced/frontend/web/index.php untuk melihat frontend-nya. Jika belum kelihatan, berarti error. Buka juga http://localhost/advanced/backend/web/index.php untuk melihat backend-nya, tapi harus login dulu. Username sama passwordnya apa?

Agar kita bisa masuk, kita harus mendaftar. Tapi sebelum mendaftar, kita harus buat database terlebih dahulu. Mari kita buat database dengan nama yii2advanced dan collation utf8_general_ci pada phpMyAdmin. Biarkan databasenya kosong.

Buka main_local.php pada folder config di dalam folder common pada projek kita. Lalu sesuaikan nama database, username, password dan yang lainnya.

Kembali ke terminal, ketikkan perintah :

php yii migrate

Jika error seperti ini:

Berarti ada masalah. Berdasarkan hasil surfing di google, ada beberapa solusi.

Pertama, ganti 'dsn' => 'mysql:host=localhost; yang ada di main_local.php menjadi 'dsn' => 'mysql:host=127.0.0.1;

Jika masih gagal, coba install php5-mysql.

sudo apt-get install php5-mysql

Kalau males install php5-mysql bisa mencoba perintah :

linux: sudo /opt/lampp/bin/php /opt/lampp/htdocs/advanced/yii migrate

windows: c:\xampp\bin\php c:\xampp\htdocs\advanced\yii migrate

atau

linux: sudo /opt/lampp/bin/php-5.6.11 /opt/lampp/htdocs/advanced/yii migrate

windows: c:\xampp\bin\php-5.6.11 c:\xampp\htdocs\advanced\yii migrate

(php-5.6.11 disesuaikan dengan yang ada di folder bin. Berdasarkan pengalaman saya, it works!)

Jika sudah berhasil, seperti gambar di bawah:

 Maka sudah berhasil juga proses penginstalan atau pemasangan Yii 2 Advance Template. Silahkan buka http://localhost/advanced/frontend/web untuk daftar (signup) agar bisa masuk ke backend.

Note : cara di atas belum saya uji pada windows
Terima kasih... Jika ada pertanyaan, silahkan bertanya.

Dasar YII2 : Hak Akses Sederhana

Kali ini kita akan belajar untuk membuat pengaturan hak akses sederhana, yaitu : "Yang boleh membuat, mengubah dan menghapus konten adalah user yang sudah login"

Pertama-tama, kita buka SiswaController.php yang ada pada folder controller. Kemudian kita tambahkan use yii\filters\AccessControl; seperti gambar di bawah.

Karena kita memerlukan class AccessControl untuk pengaturan hak akses. Lalu kita tambahkan beberapa script pada public function behaviors() di dalam return

'access'=>[
                'class'=>AccessControl::classname(),
                'only'=>['create','update','delete'],
                'rules'=>[
                    [
                        'allow'=>true,
                        'roles'=>['@'],
                    ],
                ],
            ],

Sehingga akan seperti gambar

'only'=>['create','update','delete'], berarti pengaturan tentang membuat, mengubah dan menghapus. Kalau yang ingin dibatasi adalah delete saja, berarti 'only'=>['delete'],

'rules'=>[
                    [
                        'allow'=>true,
                        'roles'=>['@'],
                    ],
                ],
Berarti yang boleh melakukannya ('allow'=>'true',) adalah user yang sudah login ('roles'=>['@'],). Mari kita coba buka http://localhost/basic/web/index.php?r=siswa (basic diganti folder projek kita ya)

Lalu kita coba tekan tombol ijo Create dan hasilnya

Sekarang, kita harus login terlebih dahulu jika ingin membuat, mengubah ataupun menghapus data.

Sekian dan terima kasih... Silahkan bertanya, jika ada yang belum dipahami.

Dasar YII2 : Membuat CRUD Dengan GII

Yahoo... Selamat datang. Kali ini kita akan belajar bersama membuat CRUD pada YII dengan menggunakan GII. Eh? GII itu apaan? Singkatnya, GII adalah script generator yang ada pada YII. Jadi, kita tinggal tulis tulis tulis dan klik klik lalu jadi deh. Entah itu Model, Controller, CRUD sampai Extension. Tertarik?

Di sini kita akan membuat CRUD berdasarkan database yang sudah ada. Jadi, pertama-tama buat database dengan nama yii2basic dan tabel dengan nama siswa dengan ketentuan seperti ini :

Setelah itu buka http://localhost/basic/web/index.php?r=gii (basic diganti dengan nama folder projek kita ya). Nanti akan muncul tampilan seperti ini :

Di gambar kok url-nya beda? Itu karena folder projek saya kali ini bukan basic tapi yii. Tapi, sama aja kok. Kemudian klik tombol start yang ada di bawah tulisan Model Generator. Sehingga nanti akan mucul tampilan seperti ini:

Pada Table Name isikan nama tabel yang tadi telah kita buat. Isi pake huruf kecil aja ya. Nanti, Model Class akan otomatis terisi. Jika tabel yang kita gunakan mempunyai relasi dengan tabel lain, maka Generate Relation harus dicentang ya.

Setelah itu, tekan Preview. Lho? Kok tidak terjadi apa-apa sih? Yang bener? Coba scrool ke bawah, nanti akan kelihatan seperti ini :

Tekan Generate. Lalu lihat (kalau tidak kelihatan, scrool ke bawah) apakah sudah berhasil atau belum. Kalau berhasil, nanti seperti ini :

Kalau ada error, coba ubah Permission dari folder aplikasi kita menjadi 777, dengan kata lain siapapun boleh liat, ngedit, ngapus.

Setelah berhasil, tekan tombol CRUD Generator yang ada di kiri atas. Dan isi Model Class dengan app\models\Siswa, Search Model Class dengan app\models\SiswaSearch, Controller Class dengan app\controllers\SiswaController dan View Path dengan @app/views/siswa.

Model Class adalah model yang digunakan oleh CRUD. Search Model Class adalah model yang digunakan untuk pencarian data pada CRUD. Controller Class adalah controller yang digunakan CRUD. View Path adalah alamat CRUD. @app/views/siswa berarti membuat folder baru (siswa) di dalam folder views.

Saya pernah mengisi View Path dengan app/views/siswa dan hasilnya justru membuat folder app di dalam folder views.

Tekan tombol Preview, setelah itu mungkin akan kelihatan seperti ini :

Kalau ada  diff  itu berarti file sudah ada dan coba tekan  diff  untuk melihat perbedaan antara yang sudah ada dan yang akan dibuat oleh gii. Centang saja (berarti di-overwrite) dan tekan tombol Generate. Jika tidak ada error, berarti CRUD sudah berhasil di buat.

Jika CRUD sudah berhasil kita buat, bagaimana kita mengaksesnya? cukup buka url http://localhost/basic/web/index.php?r=siswa (basic disesuaikan dengan nama folder projek kita), nanti hasilnya akan seperti berikut :

Silahkan diisi, diubah dan dihapus.

Tambahan:
Jika kita menggunakan YII 2 yang Advance, kita bisa menggunakan GII pada backend maupun frontend. Seandainya kita membuat model ataupun CRUD pada backend, saya sarankan ubah name space dari "app\models\***" menjadi "backend\models\***". Begitu juga yang frontend, ubah menjadi "frontend\models\***" . Agar lebih mudah membedakan model dan crud backend dan frontend.

Sekian dan terima kasih... Silahkan bertanya jika ada yang kurang anda pahami.

Dasar YII2 : Menggunakan Database

Setelah kemarin kita berhasil membuat form, sekarang kita akan mencoba menggunakan database pada YII 2. Di sini, saya menggunakan database MySQL.

Jadi, pertama-tama kita buat dulu sebuah database dengan nama yii2basic. Setelah itu kita buat tabel dengan nama negara. Bila tidak ingin repot, sebelum membuat tabel negara, silahkan copy kode SQL berikut dan jalankan pada MySQL.

CREATE TABLE `negara` (
  `code` CHAR(2) NOT NULL PRIMARY KEY,
  `name` CHAR(52) NOT NULL,
  `population` INT(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `negara` VALUES ('AU','Australia',18886000);
INSERT INTO `negara` VALUES ('BR','Brazil',170115000);
INSERT INTO `negara` VALUES ('CA','Canada',1147000);
INSERT INTO `negara` VALUES ('CN','China',1277558000);
INSERT INTO `negara` VALUES ('DE','Germany',82164700);
INSERT INTO `negara` VALUES ('FR','France',59225700);
INSERT INTO `negara` VALUES ('GB','United Kingdom',59623400);
INSERT INTO `negara` VALUES ('IN','India',1013662000);
INSERT INTO `negara` VALUES ('RU','Russia',146934000);
INSERT INTO `negara` VALUES ('US','United States',278357000);

Lalu buka db.php pada folder config dan sesuaikan host, dbname, username dan password. Karena kita tadi membuat database dengan nama yii2basic, maka pastikan dbname=yii2basic.

Kemudian buat file Negara.php dan isi seperti berikut :

<?php

namespace app\models;

use yii\db\ActiveRecord;

class Negara extends ActiveRecord
{
}

Setelah itu, buat file NegaraController.php pada folder controller dan isi seperti berikut :

<?php

namespace app\controllers;

use yii\web\Controller;
use yii\data\Pagination;
use app\models\Negara;

class NegaraController extends Controller
{
    public function actionIndex()
    {
        $query = Negara::find();

        $pagination = new Pagination([
            'defaultPageSize' => 5,
            'totalCount' => $query->count(),
        ]);

        $negara = $query->orderBy('name')
            ->offset($pagination->offset)
            ->limit($pagination->limit)
            ->all();

        return $this->render('index', [
            'negara => $negara,
            'pagination' => $pagination,
        ]);
    }
}

Lalu buat folder dengan nama negara di dalam folder views. Jangan lupa buat file index.php di dalamnya dan isi dengan script berikut :

<?php
use yii\helpers\Html;
use yii\widgets\LinkPager;
?>
<h1>Countries</h1>
<ul>
<?php foreach ($negara as $data): ?>
    <li>
        <?= Html::encode("{$data->name} ({$data->code})") ?>:
        <?= $data->population ?>
    </li>
<?php endforeach; ?>
</ul>

<?= LinkPager::widget(['pagination' => $pagination]) ?>

Nanti hasilnya akan seperti berikut :

Dasar YII2 : Menggunakan Form

Setelah kemarin kita sudah bisa membuat sebuah pesan sederhana, sekarang kita akan membuat sebuah form dan menggunakannya. Tapi belum menggunakan database lho ya.

Pertama, kita buat Model terlebih dahulu di folder models. Intiya, buat file FormAntri.php pada folder models, dan isi :

<?php

namespace app\models;

use Yii;
use yii\base\Model;

class FormAntri extends Model
{
  public $nama;
  public $email;
  
  public function rules()
  {
    return [
      [['nama', 'email'], 'required'],
      ['email', 'email'],
    ];
  }
}

namespace app\models anggap saja sebagai alamat atau path model yang kita buat.

Kita memerlukan Yii dan Model dari yii\base\ karena class model harus  meng-extends class Model.

$nama dan $email adalah property dari class  FormAntri.

Public function rules() bisa dianggap sebagai validasi. Dari perintah di atas, bisa dilihat kalau nama dan email harus di isi, serta email harus sesuai dengan format email.

Lanjut ke controller, buka SiteController.php dan buat public function actionAntri seperti berikut :

public function actionAntri()
{
  $model = new FormAntri();

  if ($model->load(Yii::$app->request->post()) && $model->validate()){
    return $this->render('antri-ok',['model' => $model]);
  }else{
    return $this->render('antri', ['model' => $model]);
  }
}

Di sini, kita membuat sebuah objek FormAntri. Jika ada permintaan pengiriman data menggunakan post dan sudah sesuai dengan validasi, maka akan diarahkan ke antri-ok dengan nilai model sesuai dengan $model. Selain itu, akan diarahkan ke antri, yang merupakan form tempat inputan.

Mari kita buat antri.php di folder site, dan isi dengan script seperti berikut :

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>

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

<div class="form-group">
 <?= Html::submitButton('Ok', ['class' => 'btn btn-primary']) ?>
</div>

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

Penggunaan yii\helpers\Html adalah untuk memudahkan mengidentifikasi kalau terjadi error.

Sedangkan yii\widget\ActiveForm diperlukan jika kita ingin membuat form inputan. Form inputan itu, harus berada di antara ActiveForm::begin dan ActiveForm::end.

<?= $form->field($model, 'nama') ?> berarti membuat sebuah inputan dengan nama 'nama'. Anggap saja <input type='text' name='nama'>.

<div class="form-group">
  <?= Html::submitButton('Ok ['class' => 'btn btn-primary']) ?>
</div>

Berarti membuat sebuah div dengan class form-group dengan isi sebuah tombol submit dengan value 'Ok' yang mempunyai class 'btn btn-primary' (anggap saja <input type='submit' value='Ok' class='btn btn-primary'>).

Setelah itu, buat antri-ok.php di folder site dan isi dengan script berikut:

<?php
use yii\helpers\Html;
?>
<p>Informasi yang sudah anda kirim adalah :</p>

<ul>
  <li><label>Nama</label>: <?= Html::encode($model->nama) ?></li>
  <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

antri-ok.php hanya akan menampilkan data yang sudah dikirimkan oleh $model.

lalu coba buka url http://localhost/namaProjek/web/index.php?r=site/antri maka nanti akan muncul tampilan seperti berikut:

Bagaimana? Jika ada kesulitan silahkan bertanya.

Dasar YII2 : Membuat Pesan Halo

Kemarin kita sudah tahu bagaimana memasang YII2 di laptop/pc kita. Sekarang, bagaimana kalau kita mencoba membuat sesuatu nih. Biasanya kalau kita baru belajar bahasa pemrograman, hal yang pertama kita coba adalah membuat pesan "Hello World". Meskipun menurut saya itu membosankan, tapi bagaimana kalau kita coba saja itu. Tapi pesannya jangan "Hello World" melulu, kita ganti nanti.

Oh, iya. Bagi yang mau belajar YII saya sarankan membaca dokumentasinya di http://www.yiiframework.com/doc-2.0/guide-README.html. Tentu saja dokumentasinya itu bahasa inggris. Tapi, jangan menyerah. Tinggal buka google translate dan ditranslate aja tuh, meskipun tata bahasanya nanti belepotan.

Sebelumnya, bagi yang belum tahu, YII itu... MCV. Kalau kita ingin membuat form, halaman, atau apalah itu, maka kita perlu membuat Model, Controller dan View. Dalam pandangan saya, Model itu Objek sesuatu yang akan kita buat, Controller itu penghubung antara Model dengan View, sedangkan View itu yang memuat tampilan yang akan dilihat oleh user. Mungkin penjelasan saya kurang mudah dicerna, jadi silahkan baca saja langsung apa itu MVC di sini.

Baiklah, kita akan memulai membuat karya pertama kita. Kalau biasanya kita perlu membuat model, controller dan view, di sini kita hanya perlu membuat controller dan view saja. Saking sederhananya yang akan kita buat. Enggak sulit kok, jadi silahkan perhatikan baik-baik ya.

Pertama, buka file SiteController.php. Letaknya berada di dalam folder controller pada folder projek kita.

Kemudian buat public function baru dengan nama actionPesan di dalam class SiteController. Fungsinya seperti berikut :

public function actionPesan($sms = 'Halo! Selamat Datang')
    {
        return $this->render('pesan',['sms' => $sms]);
    }

Lalu buat file pesan.php pada folder site. Folder site berada di dalam folder views.

Setelah itu, tulis script berikut pada pesan.php :

<?php
use yii\helpers\Html;
?>
<?= Html::encode($sms); ?>

Jika nama folder YII anda adalah 'basic' (seperti saya), maka silahkan buka url http://localhost/basic/web/index.php?r=site/pesan pada browser anda. Bila nama folder YII anda berbeda, silahkan disesuaikan. Nantinya, akan terlihat tampilan seperti berikut :

Pesan itu dapat diganti dengan menambahkannya pada url, coba buka http://localhost/basic/web/index.php?r=site/pesan&sms=Ini+Pesanku.+Pesanmu?

Baiklah, waktunya penjelasan...

http://localhost/basic/web/index.php?r=site/pesan&sms=Ini+Pesanku.+Pesanmu?

Mari kita telusuri url-nya.

http://localhost/basic/web/index.php adalah halaman awal.

r adalah ??? Jika kita perhatikan, bukankah fungsi yang ada pada SiteController selalu memiki script return $this->render(); Di sini, kita anggap saja r adalah untuk memanggil.

r=site/pesan adalah ??? site di sini mengacu pada SiteController dan juga folder site yang ada pada folder views. Sedangkan pesan mengacu pada actionPesan yang ada di dalam SiteController. Jadi, r=site/pesan dapat dianggap memanggil actionPesan di dalam SiteController.

sms=Ini+Pesanku.+Pesanmu? berarti sms memiliki nilai "Ini Pesanku. Pesanmu?" yang nantinya akan ditampilkan oleh pesan.php. Jika nilai sms tidak ditentukan, maka akan ditampilkan nilai default yang sudah didefinisikan pada actionPesan yaitu $sms = 'Halo! Selamat Datang. 

return $this->render('pesan',['sms' => $sms]) adalah ???
pesan di sini berarti pesan.php yang ada pada folder site, dan ['sms'=>$sms] berarti mengisi nilai sms dengan $sms.

<?= Html::encode($sms); ?> berarti menampilkan nilai dari $sms.

Sekian... dan terima kasih... Kalau ada pertanyaa, silahkan bertanya.