Proses Pengerjaan - IMPLEMENTASI YII2 FRAMEWORK DALAM PEMBUATAN

BAB II IMPLEMENTASI YII2 FRAMEWORK DALAM PEMBUATAN

B. Proses Pengerjaan

a. Proses Penginstalan

Website Informasi Bisnis ini dikerjakan menggunakan framework YII2. Untuk itu, maka perlu dilakukan penginstallan YII2 framework menggunakan composer. Composer adalah tools Dependency Manager untuk pemograman PHP yang bertujuan memudahkan pengintallan

aplikasi web berbasis PHP. Untuk mendownload composer, bisa di download di getcomposer.org/download. Selanjutnya, lakukan penginstallan YII2 framework sebagai berikut :

a. Buka command prompt

b. Masuk ke directory xampp, ketikkan cd c:\xampp\php pada command prompt

c. Lalu ketik

d. Update composer, ketikkan

e. Buat project baru dengan mengetikkan kode berikut :

f. Kemudian ketik

g. Lalu inisialisasi project dengan mengetikkan

php.exe -r

"readfile('https://getcomposer.org/installer');" | php.exe

php.exe composer.phar self-update

php.exe composer.phar global require "fxp/composer-asset-plugin:1.0.0-beta3"

php.exe composer.phar createproject preferdist --stability=dev yiisoft/yii2-app

advanced ../htdocs/bisnis1

h. Lalu akan ada pilihan 0 untuk Development or 1 untuk Poduction, pilih 0 lalu enter , Lalu ada pertanyaan lagi , ketik yes

Gambar 3. Inisialisasi project

i. Project sudah terinstal. Untuk menguji , ketikkan localhost/bisnis1/backend/web pada browser , maka akan tampil sebagai berikut :

b. Directory Pada YII2 Framework

Ketika menginstall yii dengan advanced application template, maka kita akan menjumpai beberapa folder utama dan beberapa file, berikut ini penjelasan mengenai fungsi masing-masing folder :

a. backend – pengembangan web yang berhubungan dengan database dan sistem

b. common – common file untuk semua aplikasi. c. console – aplikasi console.

d. environments - konfigurasi environment

e. frontend - – pengembangan web yang berhubungan dengan disain tampilan

Penjelasan untuk beberapa file :

a. .gitignore berisi daftar direktori diabaikan oleh sistem versi git. Jika ada kode yang dibutuhkan, tapi ada di repository, tambahkan disini. b. composer.json – Penjelasan tentang konfigurasi composer

c. init – Inisialisasi script d. init.bat - same for Windows.

e. LICENSE.md – Info lisensi project

f. README.md – Informasi dasar tentang penginstallan g. requirements.php – Syarat-syarat untuk penginstallan yii h. yii - console application bootstrap.

Intinya, ada 3 aplikasi yaitu frontend, backend dan console.

1) Frontend adalah aplikasi web yang akan ditampilkan untuk end user. 2) Backend adalah aplikasi web yang berfungsi untuk administrator

dalam mengelola aplikasi frontend.

3) Console adalah aplikasi yang digunakan untuk cron jobs and low-level server management, serta digunakan selama deployment aplikasi dan menghandle migrations dan assets.

4) Folder common berisi file-file yang digunakan oleh lebih dari satu aplikasi, sebagai contoh global configuration seperti pengaturan koneksi

database, atau general model seperti model user.

c. Pembuatan Database

Database yang dibentuk adalah sebagai berikut:

Dengan nama database bisnis, diisikan tabel – tabel seperti berikut ini :

Nama Tabel Field

User id (int :11 primarykey)

username (varchar : 255) auth_key (varchar : 32) password_hash(varchar :255) password_reset_token(varchar :255) email (varchar :255) status (smallint : 6) created_at (int :11) updated_at (int :11)

Posting idPosting (int : 11 primarykey) judul (varchar :200) isi (text) tglPosting(datetime) foto (varchar :200) idKategori (int :11) slug (varchar :255)

Slider idSlider (int :11) primarykey judul (varchar :255)

foto (varchar :255)

Kategori idKategori (int :11)

Contact id_contact (int :11) primary key phone (int :11) nama (varchar :255) email (varchar :255) pesan (text) waktu (datetime)

Comment idComment (int :11 primary key) content (text)

status (int :15) create_time (int :11) uname (varchar :128) email (varchar : 128)

idPosting (int :11 foreign key)

d. Menghubungkan Database pada YII2

1) Buka pada folder common dan pilih folder config 2) Kemudian pilih main-local.php

3) Akan keluar script seperti berikut ini :

<?php return [ 'components' => [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:host=localhost;dbname=””', 'username' => 'root', 'password' => '', 'charset' => 'utf8', ], 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', 'viewPath' => '@common/mail',

// send all mails to a file by default. You have to set

// 'useFileTransport' to false and configure a transport

// for the mailer to send real emails.

'useFileTransport' => true,

4) Pada script 'dsn' => 'mysql:host=localhost;dbname=””',ganti ‘””’ menjadi ‘bisnis’

e. Generating Code dengan Gii

1) Ketikkan pada kolom search

“localhost/bisnis/backend/web/index.php?r=gii”, klik enter

2) Kemudian akan masuk ke halaman Yii Code Generate seperti pada gambar di bawah ini

Gambar 7. Halaman Yii Code Generator

3) Lalu pilih model Generator, di sini kita akan diminta untuk memasukkan nama tabel yang akan kita generate contoh seperti gambar

Gambar 8. Model Generator pada posting

4) Lakukan hal tersebut pada nama – nama tabel yang kita buat. Kemudian di preview, setelah dipreview kemudian generate, jika sukses maka tampilannya akan menjadi seperti ini :

Kemudian ketika sudah selesai pada model generator, beralih ke CRUD Generator, lakukan hal yang sama pada tabel lain. Pada CRUD Generator Posting isi kolom seperti berikut ini :

o Model Class : common\models\Posting

o Search Model Class : backend\models\PostingSearch o Controller Class : backend\controllers\PostingController

Gambar 10.CRUD generator untuk Posting

5) Lalu klik preview, kemudian generate kembali. Jika selesai hasilnya seperti ini :

Gambar 11. CRUD Generator berhasil

6) Dan terakhir pada Controller Generator, lakukan juga pada semua tabel. Contoh controller generator untuk posting

Gambar 12. Melakukan generate pada Controller Generator

Gambar 13. Controller Generate berhasil

8) Ketika generate selesai, maka akan tampil pada menu submenu – submenu yang sudah dibuat pada database.

Gambar 14. Submenu

f. Menambah Template AdminLTE pada Halaman Admin

1) Pastikan komputer terhubung dengan internet, kemudian buka CMD ketikkan perintah berikut ini composer require

dmstr/yii2-adminlte-asset “2.*”

2) Setalah berhasil diinstall, masuk ke direktori pada backend/config/ main-local.php. Buka file main-local.php lalu tambahkan kode seperti dibawah ini, dan save :

Gambar 15. memasukkan template adminLTE pada main-local.php

3) Lalu coba lihat di WEB browsernya, localhost/bisnis/backend/web, lalu tekan enter. Maka hasilnya akan menjadi seperti ini

Gambar 16. tampilan AdminLTE pertama kali install

Pada template AdminLTE ini bisa dirubah warnanya sesuai keinginan kita. Buka pada vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app/layouts/main.php. Pada body

classnya, skin awal saat penginstallan yaitu skin-blue seperti gambar : ,maka diubah menjadi skin-blue-light.

Gambar 17. Merubah Warna AdminLTE

Gambar 18. tampilan AdminLTE dengan warna yang berbeda

g. Implementasi YII2 Framework pada Backend

1. Menu Login

Pada menu login sudah ada secara otomatis disediakan oleh framework YII2. Karena tema pada backend sudah diterapkan template adminLTE maka tampilan pada menu login menjadi seperti ini

Gambar 19. Menu Login saat pertama kali menginstall YII2

Gambar 20. Menu Login setelah diterapkan tema adminLTE 2. Menu Home

Pada menu home admin disediakan submenu lainnya untuk mengisi informasi yang dibutuhkan pada web yang kita buat dan

mempermudah administrator dalam meng-update situs webnya. Contoh yang telah di buat submenunya beserta source codenya seperti berikut ini:

Gambar 21. Menu Home pada Halaman Admin

a) Posting

Pada posting disediakan menu untuk menambah halaman posting dan melihat apa saja daftar informasi dari posting tersebut

1) Create Posting

Gambar 23. Create Posting

Agar pada form posting terlihat rapi, maka setiap kolomnya disusun dengan cara buka file pada views - posting - _form.php, lalu menambahkan <div class = row> seperti script berikut ini:

<div class="col-xs-6 col-md-4"> <?= $form->field($model, 'judul')->textInput(['maxlength' => true]) ?> </div>

<?= $form->field($model, 'file')->fileInput() ?> </div>

<?= $form->field($model, 'idKategori')- >dropDownList(ArrayHelper::map(kategori::find()->all(), 'idKategori', 'namaKategori'), ['prompt' => 'Kategori Artikel']) ?></div>

Agar pada kolom isi bisa di rubah font dan ada tambahan toolbar serta pluginsnya, maka rubah widgetnya dengan TinyMce.

Gambar 24. Kolom isi yang Menggunakan Widget TinyMce

<div class="col-md-12"><?= $form->field($model,

'isi')->widget(TinyMce::className(), [ 'options' => ['rows' => 20], 'clientOptions' => [

'plugins' => [

"advlist autolink lists link charmap print preview anchor",

"searchreplace visualblocks code fullscreen",

"insertdatetime media table contextmenu paste"

]

]);?></div> </div>

Lalu pada kolom file, diharuskan untuk mengunduh sebuah file, maka diperlukan button telusuri file dengan menggunakan file input. Buka file pada views – posting – _form.php. tambahkan script berikut ini:

<div class="col-xs-6 col-md-4"><?= $form->field($model, 'file')->fileInput() ?> </div>

Setelah itu buka file pada controllers – PostingControllers.php, masukkan script berikut :

$model->file =

UploadedFile::getInstance($model,'file'); if ($model->file){

$model->foto= $tgl.'.' .$model->file->extension;

>file->saveAs('uploads/posting/'. $model->foto);

Dalam mengupload file jangan lupa untuk membuat folder di dalam folder web dengan nama uploads.

Gambar 25. File Input dalam mnegupload file

Kemudian beralih ke kolom kategori , dimana pada kolom kategori yang berada pada tabel posting tersebut berelasi dengan tabel kategori. Semua informasi yang akan diinputkan dan dipost oleh administrator, disesuaikan dengan kategori bisnis yang telah disediakan. Maka pada kolom kategori menggunakan dropdown list, agar dapat menyesuaikan dalam kategori apakah bisnis yang akan diposting oleh administrator.

Gambar 26. Dropdown list pada kategori

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

>dropDownList(ArrayHelper::map(kategori::find()->all(), 'idKategori', 'namaKategori'), ['prompt' => 'Kategori Artikel']) ?></div>

2. View Posting

Gambar 27. View Posting

Pada menu lihat posting, akan ditampilkan beberapa postingan yang telah ditambahkan oleh administrator. Postingan dapat diupdate, dihapus, dan dilihat (view) tampilannya. Untuk meng-update postingan, maka dibutuhkan source code berikut :

<?php

use yii\helpers\Html;

$this->title = 'Update Posting: ' . $model->idPosting;

$this->params['breadcrumbs'][] = ['label' => 'Postings', 'url' => ['index']];

$this->params['breadcrumbs'][] = ['label' => >idPosting, 'url' => ['view', 'id' => $model->idPosting]];

$this->params['breadcrumbs'][] = 'Update'; ?>

<h4>Update Data Posting</h4>

<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> </div> <div class="box-body"> <?= $this->render('_form', [ 'model' => $model, ]) ?> </div>

Kemudian buka pada controller postingan di controllers/PostingController.php, pada action updatenya masukkan source code berikut :

public function actionUpdate($id) {

$model = $this->findModel($id); $oldImg = $model->foto; if ($model->load(Yii::$app->request->post())) { $model->file = UploadedFile::getInstance($model, 'file'); if ($model->file){ $this->deleteImg($oldImg); $model->foto = $tgl. '.' . $model->file->extension; $model->save(); >file->saveAs('uploads/posting/' . $model->foto); return $this->redirect(['index']); }else{ $model->save(); } return $this->redirect(['index']); } else { return $this->render('update', [ 'model' => $model, ]);

} }

private function deleteImg($img){ $baseUrl =

Yii::getAlias('uploads/posting/'.$img); @unlink($baseUrl);

}

Tujuan memasukkan action updatenya agar data lama yang sudah tak diperlukan lagi otomatis akan terhapus, contohnya pada image ketika diupdate, image yang lama akan terhapus dan akan diganti dengan image yang baru. Sehingga folder yang akan menyimpan gambar tersebut tidak menyimpan gambar lama dan tidak memenuhi penyimpanan harddisk. b) Slider

1. Create Slider

Gambar 29. Create Slider

Pada slider akan ditampilkan image yang akan muncul pada bagian frontend web bisnis, dimana slider ini bertujuan untuk menampilkan gambar yang berhubungan dengan web bisnis yang terletak pada bagian atas halaman awal di frontend. Administrator bertugas untuk memasukkan gambar pada slidernya.

Untuk mencreate slider tersebut, Pada judul slider, menggunakan text input dan filenya menggunakan file input, berikut source codenya pada file di folder views/slider/_form.php : <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?> <?= $form->field($model, 'judul')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'file')->fileInput() ?> Kemudian ubah juga pada controllersnya di

SliderContorollers.php pada actionCreatenya: public function actionCreate()

{

if ($model->load(Yii::$app->request->post()) ) {

$imageName = $model->judul; //get upload file

$model->file =

UploadedFile::getInstance($model,'file'); if ($model->file){

$model->foto= $imageName.'.' .$model->file>extension;

$model->file->saveAs('uploads/slider/'. $model->foto);

//save the path in db colomn $model->save();

return $this->redirect(['view', 'id' => $model->idSlider]);

} else { $model->save();

return $this->redirect(['view', 'id' => $model->idSlider]); } } else { return $this->render('create', [ 'model' => $model, ]); } }

Kemudian buat folder untuk file imagenya di uploads/slider. 2. View Slider

Gambar 30. View Slider

Pada view slider menampilkan slider yang sudah dicreate, dan bisa update serta menghapus slider. Berikut source code untuk menampilkan slider pada slider/view.php :

<h3 class="box-title">Detail Slider</h3>

<div class="box-tools pull-right"> <?= Html::a('<i class="fa fa-fw

fa-plus-square"></i>Create', ['create', 'id' => $model->idSlider], ['class' => 'btn

btn-primary']) ?>

<?= Html::a('<i class="fa fa-fw fa-pencil-square"></i>Update', ['update', 'id' => $model->idSlider], ['class' => 'btn

<?= Html::a('<i class="fa fa-fw fa-trash"></i>Delete', ['delete', 'id' => $model->idSlider], ['class' => 'btn btn-primary','data' => ['confirm' => 'Are you sure you want to delete this item?', 'method' => 'post',],]) ?>

<button class="btn btn-primary btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button> </div> </div> <div class="box-body"> <?= DetailView::widget([ 'model' => $model, 'attributes' => [ 'idSlider', 'judul', [ 'attribute'=>'foto', 'value'=> 'uploads/slider/'.$model->foto, 'format'=>['image',['width'=>'200','height'=>'200 ']],

], ], ]) ?> </div>

Kemudian untuk mengupdate dan menghapus slider, source codenya pada SliderController.php :

public function actionUpdate($id) { $model = $this->findModel($id); $oldImg = $model->foto; $imageName = $model->judul; if ($model->load(Yii::$app->request->post())) { $model->file = UploadedFile::getInstance($model, 'file'); if ($model->file){ $this->deleteImg($oldImg); $model->foto = $imageName. '.' . $model->file->extension; $model->save(); $model->file->saveAs('uploads/slider/'. $model->foto);

return $this->redirect(['index']); }else{ $model->save(); } return $this->redirect(['index']); } else { return $this->render('update', [ 'model' => $model, ]); } }

private function deleteImg($img){ $baseUrl =

Yii::getAlias('uploads/slider/'.$img); @unlink($baseUrl);

}

public function actionDelete($id) { $model=$this->findModel($id); $oldImg=$model->foto; $this->deleteImg($oldImg); $this->findModel($id)->delete(); return $this->redirect(['index']); }

c) Kategori

1. Create Kategori

Gambar 31. Create Kategori

Tabel kategori bertujuan untuk membagi jenis – jenis postingan bisnis berdasarkan kategorinya. Pada web bisnis ini kategorinya dibedakan menjadi fashion, food, IT, dan bisnis ekonomi. Source code untuk create kategori pada

kategori/_form.php: <div class="kategori-form"> <div class="box-body"> <?php $form = ActiveForm::begin(); ?> <?= $form->field($model, 'idKategori')->textInput() ?> <?= $form->field($model, 'namaKategori')->textInput(['maxlength' => true]) ?> <div class="form-group">

<?= Html::a('<i class="fa fa-fw fa-reply-all"></i>Back', ['index', 'id' =>

$model->idKategori], ['class' => 'btn btn-default']) ?> <?= Html::submitButton($model->isNewRecord ?

'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> </div> </div>

Kemudian pada KategoriController.php :

public function actionCreate() {

$model = new Kategori();

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['view', 'id' => $model->idKategori]); } else { return $this->render('create', [ 'model' => $model, ]); } }

2. View Kategori

Gambar 32. View Kategori

Pada view kategori ada beberapa tombol seperti view, update, dan delete. Source codenya pada KategoriController.php adalah sebagai berikut :

public function actionView($id) {

return $this->render('view', [

'model' => $this->findModel($id), ]);

}

public function actionUpdate($id) {

$model = $this->findModel($id);

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['view', 'id' => $model->idKategori]);

return $this->render('update', [ 'model' => $model,

]); }

}

public function actionDelete($id) { $this->findModel($id)->delete(); return $this->redirect(['index']); } d) Contact Gambar 33. Kontak 1. View Contact

Pada kontak kita hanya bisa melihat dan menghapus data kontak yang telah diinputkan oleh user pada frontend. Kontak juga tidak ditambahkan atau diinputkan oleh admin karena kontak digunakan untuk user yang ingin mengirim pesan atau kesan.

$this->title = $model->id_contact;

$this->params['breadcrumbs'][] = ['label' => 'Contacts', 'url' => ['index']];

$this->params['breadcrumbs'][] = $this->title; ?>

<h3 class="box-title">Detail Contact</h3>

<?= Html::a('<i class="fa fa-fw fa-trash"></i>Delete', ['delete', 'id' => $model->id_contact], [

'class' => 'btn btn-danger', 'data' => [

'confirm' => 'Are you sure you want to delete this item?',

'method' => 'post', ],

]) ?>

<button class="btn btn-primary btn-sm" data-widget="collapse"><i class="fa

fa-minus"></i></button> </div>

<div class="box-body"> <?= DetailView::widget([ 'model' => $model, 'attributes' => [ 'id_contact', 'phone', 'nama', 'email:email', 'pesan:ntext', 'waktu', ], ]) ?> </div> </div>

Gambar 34. Detail kontak e) Comment

1. View Comment

Pada backend komentar juga hanya bisa diview dan dihapus. Komentar bisa diinputkan pada bagian frontend.

Source code untuk menampilkan komentar :

Gambar 35. Detail komentar

$this->title = $model->idComment;

$this->params['breadcrumbs'][] = ['label' => 'Comments', 'url' => ['index']];

$this->params['breadcrumbs'][] = $this->title; ?>

<h3 class="box-title">Detail Comment</h3> <div class="box-tools pull-right">

<?= Html::a('<i class="fa fw

fa-trash"></i>Delete', ['delete', 'id' => $model->idComment], ['class' => 'btn btn-danger','data' => [

'confirm' => 'Are you sure you want to delete this item?',

], ]) ?>

<button class="btn btn-primary btn-sm" data-widget="collapse"><i class="fa

fa-minus"></i></button> </div> </div> <div class="box-body"> <?= DetailView::widget([ 'model' => $model, 'attributes' => [ 'idComment', 'content:ntext', 'status', 'create_time:datetime', 'uname', 'email:email', 'idPosting', ], ]) ?> <

BAB III

Dalam dokumen Laporan Pengalaman Praktek Industri (1) (Halaman 33-72)