Menjadi Advance dengan - repository.bsi.ac.id · instalasi, membuat Controller, View, dan Model,...

Menjadi Advance dengan Yii2 Advanced Framework

Konsep Pengembangan Web Menggunakan Yii Framework

Disertai Studi Kasus Sistem Informasi Akademik

Penulis Ade Hendini M.Kom

Yoki Firmansyah M.Kom

Raja Sabaruddin M.Kom

CV. Insan Cendekia Mandiri

2019

ii | Menjadi Advance Dengan Yii 2 Advance Framework

Menjadi Advance dengan Yii2 Advanced Framework Ade Hendini M. Kom., Yoki Firmansyah M. Kom., Raja Sabaruddin M. Kom Copyright © 2019 by Ade Hendini M. Kom., Yoki Firmansyah M. Kom., Raja Sabaruddin M. Kom. Diterbitkan oleh: CV. Insan Cendekia Mandiri Perum BTI No 53 Kabupaten Solok – Sumatera Barat Tel +62813 7272 5118 Tel +62822 6890 0329 Email : [email protected] Website : www.insancendekiamandiri.co.id

: www.adhanmedia.id

Penyunting : Tim Insan Cendekia Tata letak : @Teamminang Desain Cover : Adhan Chaniago vi, 182 hlm, 14,8 × 21 cm Cetakan pertama, Januari 2020

Terbit Januari, 2020 ISBN :

Hak Cipta dilindungi undang-undang Republik Indonesia Nomor 19

Tahun 2002 tentang Hak Cipta, Pasal 72.

Dilarang memperbanyak sebagian atau seluruh isi buku ini dengan

bentuk dan cara apa pun tanpa izin tertulis dari penerbit

Menjadi Advance Dengan Yii 2 Advance Framework | iii

Kata Pengantar

Puji dan syukur Penulis panjatkan atas kehadirat Allah SWT yang telah memberikan rahmat-Nya sehingga buku ini dapat terselesaikan. Saat ini, aplikasi web semakin banyak diterapkan pada semua lini guna mempermudah penyebaran informasi dan penyelesaian aktivitas manusia. Yii Framework merupakan framework PHP yang populer saat ini karena keunggulannya dalam membangun aplikasi web, terutama kemudahan Yii dalam menangani CRUD (Create, Update, Delete).

Buku Yii Framework ini akan mengajarkan kepada pembaca langkah demi langkah dalam menggunakan Yii Framework dengan mudah, mulai dari persiapan awal dalam instalasi, membuat Controller, View, dan Model, konfigurasi database, export data, serta membuat package sendiri. Dalam setiap langkah yang disajikan dalam Buku ini, Penulis senantiasa menyajikan studi kasus sehingga pembaca memiliki gambaran mengenai implementasi kasus pada setiap Bab yang dipelajari. Buku ini juga dilengkapi dengan CD yang dapat digunakan sebagai penunjang dalam mempelajari Yii Framework.

Penulis sangat menyadari bahwa Buku ini masih terdapat kekurangan apalagi sempurna. Oleh karena itu, Penulis menerima kritik dan saran yang membangun, sehingga Penulis dapat menghasilkan karya yang lebih baik lagi. Untuk kritik dan saran, dapat ditujukan ke email [email protected].

Pontianak, 28 Desember 2019

Tim Penulis

iv | Menjadi Advance Dengan Yii 2 Advance Framework

Daftar Isi

Kata Pengantar ............................................. ii

Daftar Isi .................................................... iv

Persiapan awal ............................................. 1

Mengenal Yii2 App Practical Application ................. 13

Membuat Dan Menguhubungkan Data Bas ................ 23

Pembuatan Tema .......................................... 31

Cara Kerja Controller Yii2 ................................. 57

Generete Model Menggunakan Gii ........................ 63

Membuat Portal Admin (Backend) ........................ 69

Membuat Portal Guru (FRONTEND) ...................... 123

Export Data ............................................... 159

Membuat Package Sendiri ................................ 167

Tentang Penulis .......................................... 174

Persiapan awal

POKOK BAHASAN

• Installasi Apache, MySQL, dan PHP (XAMPP)

• Aktivasi PDO MySql

• Aktivasi mod_rewrite untuk .htaccess

• Mengaktifkan PHP Command Line Interface (CLI)

• Install Composer

• Installasi Apache, MySQL dan PHP (XAMPP)

XAMPP adalah perangkat lunak untuk membuat

komputer menjadi web server. XAMPP dapat didownload

melalui link url:

https://www.apachefriends.org/download.html.

Setelah itu, double klik file xampp yang baru di

download. Jika muncul pesan error seperti gambar di bawah,

abaikan saja dan lanjutkan klik tombol OK.

2 | Menjadi Advance Dengan Yii 2 Advance Framework

Berikutnya akan muncul jendela Setup-XAMPP. Klik tombol

Next untuk melanjutkan proses berikutnya.

Selanjutnya akan muncul jendela Select Components,

yang meminta untuk memilih aplikasi yang akan diinstall.

Centang saja semua kemudian klik tombol Next.

Kemudian akan muncul jendela Installation Folder,

dimana anda diminta untuk menentukan lokasi penyimpanan

folder xampp, secara bawaan akan diarahkan ke lokasi

c:\xampp. Jika anda ingin menyimpannya di folder lain, anda

Menjadi Advance Dengan Yii 2 Advance Framework | 3

dapat menekan tombol bergambar folder (Browse), kemudian

klik tombol Next.

Kita akan menjumpai jendela tawaran untuk

mempelajari lebih lanjut tentang Bitnami. Silahkan checklist

jika ingin mempelajari lebih lanjut. Bitnami adalah pustaka

dari aplikasi client server yang populer seperti misalnya CMS

WordPress atau Drupal, dengan penawaran kemudahan dalam

installasi hanya dengan satu klik. Kemudian klik tombol Next.


Kemudian muncul jendela Ready To Install yang

menunjukkan xampp sudah siap diinstall. Kemudian klik

tombol Next.

Dan proses installasi pun berjalan.


Tunggu hingga proses install selesai dan muncul

jendela sebagai berikut.

Klik tombol Finish setelah itu akan muncul jendela

Xampp Control Panel yang berguna untuk menjalankan

server.


Klik tombol Start pada kolom Actions untuk module

Apache dan MySQL.

Untuk mengetahui apakah installasi telah berhasil atau

tidak, ketikkan ‘localhost/’ pada browser, jika berhasil akan

muncul halaman seperti gambar di bawah.

• Aktivasi PDO MySql

Pada Yii, untuk koneksi ke MySql akan menggunakan

PDO. Untuk mengaktifkan PDO MySql ini kita harus

menghapus titik koma (;) pada ekstensi PDO MySql yang

terletak pada file php ini.


Untuk membuka file ‘C:\xampp\php\php.ini’ atau

dapat juga melalui XAMPP Control Panel, pada bagian tombol

config.

Kemudian cari hapus titik koma (;) pada baris

‘;extension=php_pdo_mysql.dll’

• Aktivasi mod_rewrite untuk .htaccess

Agar file .htaccess dapat berfungsi kita harus

mengaktifkan mod_rewrite

Buka file ‘C:\xampp\apache\conf\httpd.conf’ atau dapat juga

melalui XAMPP Control Panel, pada bagian tombol config


Kemudian cari baris kode

#LoadModule rewrite_module modules/mod_rewrite.so

Hapus tanda hashtag (#) dari baris tersebut

• Mengaktifkan PHP Command Line Interface (CLI)

Buka control panel jadikan tampilannya menjadi

‘Large Icons’ kemudian klik ‘System’


Kemudian klik ‘Advanced System settings’

Pada jendela ‘System Properties’ pilih tab ‘Advanced’

kemudian klik ‘Environtment Variables...’

Pada jendela ‘Environment Variables’ pilih ‘Path’

pada ‘System variables’ kemudian klik tombol ‘Edit’


Kemudian tambahkan kode ‘;C:\xampp\php’

• Install Composer

Composer adalah Dependency Management Tools

untuk PHP. Sederhananya Composer akan membantu kita

mencari dan mendownload file-file yang diperlukan oleh

sebuah aplikasi yang akan install yang akan tersimpan pada

folder vendor. Composer untuk windows dapat didownload di

https://getcomposer.org/Composer-Setup.exe. Install

composer sangat mudah, cukup double klik file composer yang

telah didownload.


Kemudian klik tombol Next.

Pada jendela Selects Components kita dapat

lanjutkan dengan menekan tombol Next.


Pada umumnya secara otomatis composer akan

mendapatkan file php.exe yang telah kita install sebelumnya

(Installasi XAMPP). Lanjutkan dengan menekan tombol Next

dan Install.


Mengenal Yii2 App Practical Application

POKOK BAHASAN

• Apa itu Yii2 App Practical Application

• Mengapa Yii2 App Practical Application

• Install Yii2 Advanced Kartik (Yii2 App Practical-A)

• Inisialisasi Yii

• Memasukkan Ekstensi

• Apa itu Yii2 App Practical Application

Yii2 App Practical Application adalah kerangka Yii2

yang berbasis pada Yii2-advanced untuk mengembangkan

aplikasi Web yang kompleks dengan beberapa tingkatan.

Template ini memungkinkan untuk mengakses frontend

secara langsung. Template ini mencakup tiga tingkatan, yakni:

(1) frontend,

(2) backend, dan

(3) konsol,

yang masing-masing merupakan aplikasi Yii terpisah.


• Mengapa Yii2 App Practical Application

Setelah menginstal Yii2-advanced biasanya kita akan

mengakses frontend dan backend dari

http://domain/app/frontend/web

(localhost/app/frontend/web)dan

http://domain/app/backend/web

(localhost/app/backend/web).

Namun, dalam banyak kasus (terutama pada host

domain tunggal) pengguna menginginkan langsung

mengakses frontend sebagai: http://domain/app dan backend

sebagai http://domain/app/backend. Yii2 App Practical A

memungkinkan kita untuk mencapai hal itu. Semua aspek-

aspek lain dari konfigurasi aplikasi tetap sama dengan yii2-

advanced.

• Install Yii2 Advanced Kartik (Yii2 App Practical-A)

Terdapat dua cara untuk menginstall Yii2 App

Practical A, yaitu:

1. Install Yii2 App Practical A melalui Composer

Setelah menginstall Composer yang telah diutarakan

pada bab sebelumnya, buka command prompt dan arahkan

ke web root sebagai contoh milik saya berada pada

“c:/xampp/htdocs” dengan cara:

a. Ketikkan ‘cd\’ untuk berada di direktori dasar c

kemudian tekan enter.


b. Ketikkan ‘cd xampp\htdocs’ kemudian tekan enter.

c. Ketikan composer global require "fxp/composer-

asset-plugin:~1.1.1" kemudian tekan enter.

d. Ketikkan composer create-project --prefer-dist --

stability=dev kartik-v/yii2-app-practical-a sekolah

kemudian tekan enter.

e. Setelah itu akan terbentuk sebuah folder sekolah.

2. Install Yii2 App Practical A dengan mengunduh file

Unduh aplikasi melalui

https://github.com/kartik-v/yii2-app-practical-

a/archive/master.zip. Setelah itu ekstrak ke dalam web

root Anda sebagai contoh milik saya pada

‘c:/xampp/htdocs’ dan ubah nama foldernya menjadi

‘sekolah’.

Untuk install melalui unduhan terdapat

kekurangan yaitu tidak adanya folder ‘vendor’. Untuk

mendapatkannya hanya dengan mengunduh Yii2

Advanced dan mengambil folder vendor tersebut.


Yii2 Advanced dapat diunduh di

https://github.com/yiisoft/yii2/releases/. Download

release Yii terbaru: yii-advanced-app-2.x.x.tgz.

Ekstrak file tersebut kemudian copy folder

‘vendor’ ke folder sekolah tersebut.

• Inisialisasi Yii

Pada saat kita membuka web ‘localhost/sekolah’ maka

tampilan yang muncul bukanlah web yang kita harapkan. Ini

dikarenakan aplikasi tersebut belum diinisialisasi.


Untuk menginisialisasinya buka command prompt

kemudian arahkan ke folder ‘c:/xampp/htdocs/sekolah/’

dengan cara:

1. Ketikkan ‘cd\’ untuk berada di direktori dasar c kemudian

tekan enter.

2. Ketikkan ‘cd xampp\htdocs\sekolah’ kemudian tekan

enter.

Untuk melakukan inisialisasi yii dengan cara:

1. Ketikkan ‘init’ kemudian tekan enter.

2. Karena kita dalam tahap pengembangan maka ketikkan

‘0’ kemudian tekan enter.

3. Ketikkan ‘yes’ untuk setuju dan tekan enter.


Namun yang terjadi saat kita membuka kembali

halaman website tersebut masih terdapat kesalahan seperti

berikut:

Untuk memperbaikinya kita harus membuat sebuah

folder dengan nama ‘sessions’ pada ‘frontend/runtime’

sehingga menjadi:


Lakukan juga hal yang sama pada bagian

‘backend/runtime’

Sekarang kita sudah dapat melakukan pengembangan

aplikasi web.

• Memasukkan Ekstensi

Untuk membantu pengembangan aplikasi terdapat

beberapa ekstensi yang sangat berguna. Untuk

menambahkannya diperlukan Composer dan akses internet.

Buka file ‘composer.json’ yang berada pada folder sekolah

(sekolah/composer.json).


Pada baris 21 sampai 24 dan baris 27 sampai 30

merupakan extension yang sudah ada pada aplikasi. Pada

bagian inisialisasi kita dihadapkan pada dua pilihan, yaitu [0]

Development dan [1] Production.

Ini merupakan tahap, dimana 0 merupakan tahap

pembuatan (pengembangan) sedangkan jika sudah selesai

maka dipilih production atau produksi (1).

Pada composer.json bagian ‘require’ merupakan

ekstensi yang digunakan baik saat pengembangan maupun

produksi (sudah selesai) sedangkan ‘require-dev’ merupakan

ekstensi yang hanya digunakan pada saat pengembangan.

Kita akan menambahkan beberapa ekstensi yang

dirasa berguna.


Setelah itu kita akan melakukan update composer

dengan cara membuka command prompt dan masuk ke

folder ‘c:/xampp/htdocs/sekolah’ kemudian mengetikkan

perintah ‘composer update’ dan tekan enter.

Tunggu hingga selesai, lamanya proses tergantung

kepada kecepatan internet yang dimiliki. Untuk file

lengkapnya dapat anda peroleh di cd tutorial pada buku ini.


Membuat dan Menghubungkan Data Base

POKOK BAHASAN

• Perancangan Database Sistem Informasi

Akademik

• Menghubungkan Aplikasi Dengan Database

• Perancangan Database Sistem Informasi Akademik

Dalam pembuatan Sistem Informasi Akademik ini terlebih

dahulu merancang dan membuat database. Gambar berikut ini

merupakan rancangan database yang dibuat:


Berdasarkan gambar di atas, maka di dalam database

yang diberi nama db_siakad terdapat tujuh buah tabel dengan

struktur masing-masing tabel sebagai berikut:

1. Struktur Tabel mata_pelajaran


2. Struktur Tabel guru

3. Struktur Tabel siswa

4. Struktur Tabel kelas

5. Struktur Tabel detail_kelas


6. Struktur Tabel jadwal_pelajaran

7. Struktur Tabel admin

Berikut SQL database db_siakad:

1. SQL membuat tabel mata_pelajaran

2. SQL membuat tabel guru


3. SQL membuat tabel siswa

4. SQL membuat tabel kelas

5. SQL membuat tabel detail_kelas

6. SQL membuat tabel jadwal_pelajaran


7. SQL membuat tabel admin

Untuk lebih praktisnya anda dapat melakukan import

menggunakan file “db_siakad.sql” yang terdapat pada CD.

• Menghubungkan Aplikasi Dengan Database

Setelah membuat database selanjutnya

menghubungkan aplikasi dengan database, buka file

“common/config/main-local.php”.


Untuk menghubungkan aplikasi dengan database

adalah dengan mengatur nama database yang terdapat pada

baris ke 6 dan konfigurasi username dan password yang ada

pada baris 7 dan 8, sehingga menjadi seperti berikut:


PEMBUATAN TEMA

POKOK BAHASAN

• Memasukkan Tema AdminLte

• Membuat AssetBundel AdminLte

• Memasukkan Font-Awesome

• Membuat AssetBundel Font-Awesome

• Membuat Layout Login Admin (Backend)

• Membuat Layout Admin (Backend)

• Membuat Layout Guru (Frontend)

• Membuat Layout Login Guru (Frontend)

• Memasukkan Tema AdminLte

Untuk mendapatkan tema AdminLte Anda dapat

mengunduhnya secara gratis di

https://github.com/ColorlibHQ/AdminLTE/releases atau bisa

Anda dapatkan di CD tutorial. Buat folder “themes” pada

aplikasi root dan pada folder themes tersebut buat pula folder

dengan nama “adminlte”.


Kemudian extrak file “AdminLTE” dan copy folder

“bootstrap”, folder “dist/css” dan folder “dist/js” ke dalam

folder “themes/adminlte” yang telah dibuat sehingga menjadi

seperti gambar berikut:

• Membuat AssetBundel AdminLte

AssetBundel merupakan kumpulan file css, js ataupun

gambar, dengan AssetBundel kita dapat dengan mudah

memanggil file css, js atau gambar. Kita akan membuat sebuah

file AssetBundel yang memanggil aset adminlte yang telah kita

letakkan di folder ‘themes’. Pada folder ‘common’ buat sebuah

folder dengan nama ‘assets’. Kemudian buat sebuah file

dengan nama ‘AdminlteAsset.php’ di dalam folder ‘assets’.


Kemudian pada AdminlteAsset.php isikan kode berikut:

Pada baris 8 $sourcePath menunjukan tempat sumber

file diambil.

Pada Yii2 terdapat alias yang sudah dibuat yaitu :

@app : Folder aplikasi root (baik frontend atau

backend atau konsol tergantung dari mana

anda mengaksesnya).

@vendor : Folder vendor.

@common : Folder common.

@frontend : Folder frontend.


@backend : Folder backend.

@console : folder console.

‘@app/../themes/’ artinya pada saat kita membuka

halaman backend, berarti sourcenya akan mengarah keluar

folder ‘backend’ dan masuk ke folder ‘themes’, begitu juga

pada saat kita membuka halaman frontend.

Pada baris 10 sampai 14 artinya kita memanggil file css

yang berada pada folder ‘themes/adminlte/....’, begitu juga

dengan baris 16 sampai 19 yang akan memanggil file

javascript. AdminlteAsset ini akan kita gunakan nanti pada

bagian backend dan juga frontend.

• Memasukkan Font-Awesome

Font awesome adalah font web yang terbentuk

beberapa ikon siap pakai untuk antarmuka web, umumnya

digunakan untuk Twitter Bootstrap, ada lebih dari 100+ ikon

di Font awesome dan akan bertambah tiap rilisnya. Font-

Awesome dapat diunduh di

https://fortawesome.github.io/Font-Awesome/.

Buat folder ‘font-awesome’ di dalam folder ‘themes’ kemudian

copy isi font-awesome yang telah didownload dan diekstrak.


• Membuat AssetBundel Font-Awesome

Kita akan membuat sebuah file AssetBundel yang

memanggil aset font-awesome yang sama seperti

AdminlteAsset. Buat sebuah file dengan nama

‘FontAwesomeAsset.php’ di dalam folder ‘common/assets’

dan isikan dengan kode berikut:

• Membuat Layout Login Admin (Backend)

Pada bagian ini kita akan membuat halaman login tersendiri

untuk halaman admin (backend). Buat file ‘LoginAsset.php’ di

dalam ‘backend/assets_b’.


Kemudian isikan dengan kode :

Buat sebuah file dengan nama ‘LoginLayout.php’ di

dalam ‘backend/views/layouts’


Kemudian isikan dengan kode :

Kemudian buka file ‘backend/controllers/SiteController.php’,

pada function actionLogin() tambahkan menjadi :


Pada kode di atas kita melakukan perubahan layouts

(baris 67) yaitu untuk actionLogin akan menggunakan layout

‘LoginLayout.php’ yang telah kita buat sebelumnya sehingga

halaman backend/site/login akan berubah, sebagaimana

tampilan berikut ini.

Sekarang kita akan mengubah form login dengan

membuka file ‘backend/views/site/login.php’ dan mengubah

kodenya menjadi seperti berikut:


Pada browser buka halaman ‘backend/site/login’ dan

tampilannya akan berubah menjadi:

• Membuat Layout Admin (Backend)

Sekarang kita akan mengubah layout admin dengan

tema AdminLte, namun karena pada halaman backend kita

akan selalu diarahkan ke halaman login, maka untuk

sementara kita ubah halaman ‘backend/site/index‘ supaya

dapat diakses langsung tanpa login. Buka file SiteController

pada ‘backend/controller/SiteController.php’


Kemudian kita non aktifkan function behaviors pada

SiteController.php tersebut dengan cara menambahkan tag

komentar.

Pada baris 18 kita menambahkan tag pembuka

komentar /* dan ditutup pada baris ke 44 */, sehingga function

behaviours menjadi tidak aktif. Pada browser buka halaman

‘backend/site/index’ dan website akan menampilkan tema

bawaan Yii2.


Untuk mengubah layout backend, pertama kali kita

daftarkan Asset Bundle AdminlteAsset dan

FontAwesomeAsset yang telah kita buat sebelumnya dengan

cara menambahkannya pada AppAsset. Buka file

‘backend/assets_b/AppAsset.php’

Kemudian pada file ini kita akan menambahkan

AdminlteAsset dan FontAwesomeAsset pada bagian

‘$depends’, sehingga menjadi:


Perhatikan pada baris 29 dan 30, kita mendaftarkan

aset AdminlteAsset yang memanggil tema adminlte dan

FontAwesomeAsset yang telah kita buat sebelumnya.

Sekarang kita akan mengubah main.php yang terletak

pada ‘backend/views/layouts’. Silahkan buka file main.php

tersebut.

Kemudian ubah bagian badan (body) menjadi seperti

berikut:


Perhatikan pada baris 29, 30 dan 46. Di situ terdapat

perintah untuk menyertakan file lain yang harus kita buat

didalam folder layouts, yaitu ‘_header.php’ yang nantinya akan

menampilkan bagian header, ‘_sidebar.php’ yang nantinya

akan menampilkan bagian sidebar yang berisikan menu-menu

dari website dan ‘_footer.php’. Silahkan buat ketiga file

tersebut.

Isikan kode pada bagian ‘_header.php’ dengan kode berikut:

Isikan kode pada bagian ‘_footer.php’ dengan kode berikut:


Isikan kode pada bagian ‘_sidebar.php’ dengan kode berikut:


Setelah itu silahkan buka halaman backend/site/index.

• Membuat Layout Guru (Frontend)

Untuk mengubah layout frontend, sama halnya dengan

backend pertama kali kita daftarkan Asset Bundle

AdminlteAsset dan FontAwesomeAsset yang telah kita buat

sebelumnya dengan cara menambahkannya pada AppAsset.

Buka file ‘frontend/assets/AppAsset.php’


Kemudian pada file ini kita akan menambahkan

AdminlteAsset dan FontAwesomeAsset pada bagian

‘$depends’, sehingga menjadi:


Sama halnya dengan backend, pada baris 29 dan 30,

kita mendaftarkan aset AdminlteAsset yang memanggil tema

adminlte dan font awesome yang telah kita buat sebelumnya.

Sekarang kita akan mengubah file

‘frontend/views/layouts/main.php’. Silahkan buka file

main.php tersebut.

Hal yang sama seperti bagian backend ubah bagian

body menjadi seperti berikut:


Perhatikan pada baris 29, 30 dan 46. Di situ terdapat

perintah untuk menyertakan file lain yang harus kita buat di

dalam folder layouts sama halnya dengan backend, agar lebih

cepat anda dapat meng-copy ketiga file tersebut dari backend.


Ubah kode pada bagian ‘_sidebar.php’ untuk menu

portal guru dengan kode berikut:


Ubah kode pada bagian ‘_header.php’ untuk menu

portal guru dengan kode berikut:

Pada baris 13 kita memasukkan sebuah file lain dengan

nama ‘_account.php’.


Isikan ‘_account.php’ dengan kode berikut:


Setelah itu silahkan buka halaman

“localhost/sekolah/site/index”.

• Membuat Layout Login Guru (Frontend)

Jika pada browser kita buka halaman ‘site/login’ pada

bagian frontend, maka tampilan halaman akan menjadi seperti

berikut:


Kita akan mengubah tampilannya menjadi seperti

halaman login pada backend. Tidak jauh berbeda dengan

backend, pertama kita buat sebuah asset untuk menentukan

layout halaman login dengan membuat file ‘LoginAsset.php’ di

dalam folder ‘frontend/assets’.

Kemudian pada ‘LoginAsset.php’ tersebut ketikkan

kode berikut:

Kemudian buat sebuah file dengan nama

‘LoginLayout.php’ di dalam folder ‘frontend/views/layouts’.


Ketikkan ‘LoginLayout.php’ dengan kode sebagai berikut:


Tambahkan kode pada function actionLogin di dalam

‘frontend/controller/SiteController’.

Dengan kode berikut:

Sama halnya pada ‘SiteController.php’ pada backend,

kita mengubah layout untuk login (baris 89). Selanjutnya Ubah

file login pada ‘frontend/views/site/login.php’


Menjadi seperti berikut:

Maka Tampilan ‘localhost/sekolah/site/login’ akan

menjadi seperti berikut:


Cara Kerja Controller Yii2

POKOK BAHASAN

• Membuat Controller dan Action

• Membuat Variabel dan Menampilkan ke View

Pada bagian ini akan dijelaskan bagaimana cara

menulis Controller dan menampilkan informasi tentang

website, menjelaskan interaksi antara controller dan view,

serta menampilkan variabel dari controller ke view.

• Membuat Controller dan Action

Untuk membuat sebuah halaman pertama yang harus

dilakukan adalah membuat Controller. Hal yang harus

dilakukan pada saat membuat controller adalah:

1. Membuat namespace. Namespace pada umumnya dibuat

berdasarkan lokasi file diletakkan. Sebagai contoh

namespace controller pada backend adalah ‘namespace

backend\controllers;’, yang berarti file diletakkan di

folder ‘backend/controllers’.

2. Penggunaan ‘use’ untuk memanggil Class.


3. Controller harus merupakan turunan (extends) dari class

‘yii\web\Controller’. Sehingga kita masukkan ‘use

yii\web\Controller’.

4. Untuk aksi pada controller dibuat dengan function dengan

awalan ‘action’ dan dilanjutkkan dengan nama aksi

dimana selalu diawali dengan huruf besar, sebagai contoh

‘actionSiswa’, ‘actionMataPelajaran’.

Kita akan membuat sebuah controller pada bagian

backend. Buat sebuah file dengan nama

‘TentangWebsiteController.php’ pada ‘backend/controllers’.

Tuliskan kode berikut:


Silahkan buka halaman tersebut dengan mengetikkan

dengan alamat ‘localhost/sekolah/backend/tentang-kami’.

Terlihat hasil keluaran menunjukkan error

dikarenakan file ‘index.php’ untuk mengeluarkan tampilan

belum dibuat. Sekarang kita buat folder ‘tentang-website’ di

dalam ‘backend/views’ dan buat file ‘index.php’.

Kemudian pada ‘index.php’ kita tuliskan beberapa

kata, sebagai contoh seperti berikut:


Sehingga halaman akan menampilkan:

• Membuat Variabel dan Menampilkan ke View

Sekarang kita akan membuat beberapa variabel dan

menampilkannya ke view.

Ubah kode ‘TentangWebsiteController.php’ menjadi

seperti berikut:


Perhatikan pada baris ke 26 variabel $judul dan $list

akan ditampilkan ke index.php dengan variabel $title untuk

perwakilan dari variabel $judul dan variabel $list tetap sama

yaitu $list dengan type data array.

Untuk ‘frontend/views/tentang-kami/index.php’

tuliskan kode berikut:

Pada baris ke 1 variabel $title merupakan isi dari

variabel $judul pada TentangWebsiteController.php,

sedangkan $list adalah variabel $list yang berbentuk array,

dan akan menghasilkan:


Generete Model Menggunakan Gii

POKOK BAHASAN

• Membuat Model Untuk Portal Admin

(Backend)

• Membuat Model Untuk Portal Guru (Frontend)

Dalam framework MVC (Model View Controller),

Model merupakan bagian yang berkomunikasi dengan

database. Dalam Yii2 sama halnya seperti Yii1 juga memiliki

module Gii yang membantu dalam pembuatan kode program

(generate code) sehingga dapat mempercepat pembuatan

program. Pada Yii2 ini kita akan membuat model untuk

masing-masing portal yaitu admin (backend) dan guru

(backend).

• Membuat Model Untuk Portal Admin (Backend)

Pada bagian backend ini semua tabel akan kita buat modelnya,

yaitu:

1. Model Mata Perlajaran (MataPelajaran.php)

2. Model Guru (Guru.php)

3. Model Siswa (Siswa.php)

4. Model Kelas (Kelas.php)

5. Model Detail Kelas (DetailKelas.php)

6. Model Jadwal Pelajaran (JadwalPelajaran.php)


7. Model Admin (Admin.php)

Pada browser untuk membuka gii bagian backend

dilakukan dengan mengetikkan alamat

‘localhost/sekolah/backend/gii’.

Klik ‘Start’ pada Model Generator.


Untuk membuat Model melalui gii, yang perlu kita

isikan hanya pada bagian ‘Table Name’ yang merupakan nama

tabel pada database yang telah kita buat.

‘Model Class’ yang merupakan nama file dan Class

Model yang akan kita buat, pada umumnya dibuat sama

dengan nama tabel, dengan kata pertama diawali dengan huruf

besar.

‘Namespace’ untuk menentukan nama dari

namespace file tersebut. Untuk namespace kita bisa berikan

nama sesuai dengan lokasi file tersebut disimpan.


Setelah itu klik tombol dan kode serta file

yang akan dibuat akan muncul

Pada gambar di atas kita akan membuat sebuah file

dengan nama MataPelajaran.php yang akan disimpan di

‘backend/models’. Untuk melihat isi kodenya anda dapat

meng-klik tulisan ‘models\MataPelajaran.php’ tersebut.

Kemudian Klik tombol .

Buat semua model tabel untuk backend.

Table Name Model Class Namespace

mata_pelajaran MataPelajaran backend\models

guru Guru backend\models

siswa Siswa backend\models

kelas Kelas backend\models

detail_kelas DetailKelas backend\models

jadwal_pelajaran JadwalPelajaran backend\models

admin Admin backend\models


Sehingga akan menghasilkan file Model pada

‘backend/models’

Membuat Model Untuk Portal Guru (Frontend)

Pada bagian frontend ini semua tabel kecuali admin

akan kita buat modelnya:

1. Model Mata Perlajaran (MataPelajaran.php)

2. Model Guru (Guru.php)

3. Model Siswa (Siswa.php)

4. Model Kelas (Kelas.php)

5. Model Detail Kelas (DetailKelas.php)

6. Model Jadwal Pelajaran (JadwalPelajaran.php)

Pada browser untuk membuka gii bagian frontend

(portal guru) dilakukan dengan mengetikkan alamat

‘localhost/sekolah/ gii’.

Sama halnya gii pada backend, pada frontend untuk

membuat model kita memilih ‘Model Generator’. Perbedaan

terletak pada bagian ‘Namespace’. Untuk Namespace bagian


frontend kita buat menjadi ‘frontend\models’. Model untuk

frontend yaitu:

Table Name Model Class Namespace

mata_pelajaran MataPelajaran frontend\models

guru Guru frontend \models

siswa Siswa frontend \models

kelas Kelas frontend \models

detail_kelas DetailKelas frontend \models

jadwal_pelajaran JadwalPelajaran frontend \models

Sehingga akan menghasilkan file Model pada

‘frontend/models’.


Membuat Portal Admin (Backend)

POKOK BAHASAN

• Membuat Autentikasi Admin

• Membuat CRUD Halaman Mata Pelajaran

• Membuat CRUD Halaman Guru

• Membuat CRUD Halaman Siswa

• Membuat CRUD Halaman Kelas

• Membuat CRUD Halaman Detail Kelas

• Membuat CRUD Halaman Jadwal Mata Pelajaran

• Membuat Otorisasi Untuk Setiap Halaman Pada Portal

Admin (Backend)

• Membuat Halaman Kelola Administrator

Pada bab ini kita akan membuat bagian backend

sebagai halaman untuk administrator, dimana untuk masuk ke

halaman ini harus melalui halaman login terlebih dahulu.

Administrator dapat mengelola Mata Pelajaran, Guru, Siswa,

Kelas, Jadwal Pelajaran, mengubah username dan mengubah

password. Administrator akan dibagi menjadi dua level, yaitu

superuser dan user, dimana superuser merupakan admin yang

dapat mengelola admin lainnya.


• Membuat Autentikasi Admin

Secara bawaan autentikasi pada Yii2 menggunakan

tabel user dengan model yang berada pada

‘common/models/User.php’. Untuk menggantinya buka

‘backend/config/main.php’.


Pada baris 17 terlihat untuk autentikasi menggunakan

model pada ‘common/models/User.php’. Kita akan ubah

menggunakan model admin yang sudah kita buat sebelumnya.

Sekarang kita akan menambahkan beberapa kode

pada ‘backend/models/Admin.php’.


Kita akan menggunakan beberapa Class framework yii,

yaitu:

Kemudian kita akan membuat Class Admin menjadi

implement dari Class IdentityInterface, sehingga kita harus

memasukkan function yang telah di buat di class interface

IdentityInterface.

Untuk mendeteksi apakah admin yang login adalah

superuser maka kita buat sebuah function yang kita beri nama

‘isRoot’.


Kita juga akan membuat sebuah function untuk

menampilkan username dari admin yang kita berinama

‘namaAdmin’.

Kemudian kita akan menambahkan function yang

merupakan implement dari class IdentityInterface.


Perhatikan pada baris 96 kita menggunakan “SHA1”

untuk mengenkripsi field password. Keseluruhan kode

Admin.php adalah sebagai berikut:


Setelah itu kita buat sebuah file dengan nama

‘LoginAdmin.php’ di dalam folder ‘backend/models’.

Kemudian pada LoginAdmin.php ketikkan kode

berikut:


Pada bab sebelumnya pada file

‘backend/SiteController.php’ kita menonaktifkan ‘function

behaviors’ sehingga kita dapat mengakses halaman site,

sekarang kita aktifkan kembali “function behaviors” tersebut.

Sekarang pada saat kita membuka halaman

‘localhost/sekolah/backend/site/index’ akan mengarah

kepada halaman login.


Kemudian kita akan memodifikasi beberapa kode pada

‘SiteController.php’ tersebut.

Perubahan kita lakukan pada baris ke 7 dimana

sebelumnya menggunakan “LoginForm” pada

‘common\models’ (common\models\LoginForm), kita ganti

menjadi ‘backend\models\LoginAdmin’ yang telah kita buat

sebelumnya.

Kemudian pada function actionLogin pada baris 69

yang menggunakan ‘LoginForm’ kita ganti menjadi

‘LoginAdmin’.


Untuk mencobanya terlebih dahulu kita tambahkan

data admin pada tabel admin. Perlu dingat untuk enkripsi

password kita menggunakan “SHA1”.

• Membuat CRUD Halaman Mata Pelajaran

Untuk membuat Halaman Mata Pelajaran dan

halaman-halaman lainnya pada portal admin (backend) kita

akan menggunakan Gii CRUD Generator.


Pada browser, alamatkan pada

‘localhost/sekolah/backend/gii’, kemudian pilih menu CRUD

Generator. Pada CRUD Generator ada tiga input text yang

harus kita isi, yaitu:

Model Class

Pada input text Model Class kita isikan dengan Class

Model yang telah kita buat dengan mencantumkan namespace

Class tersebut. Untuk Model Class Mata Pelajaran kita tuliskan

‘backend\models\MataPelajaran’.

Search Model Class

Search Model Class diisi untuk membuat class yang

merupakan turunan dari Model Class sebelumnya yang berisi

fungsi-fungsi pencarian dan menampilkan data, file-file yang

dibuat ini akan tersimpan didalam folder ‘backend/models’.


Controller Class

Controller Class diisi untuk membuat class controller

yang mengatur respon atau permintaan pengguna, file-file

controller yang dibuat ini akan tersimpan didalam folder

‘backend/controllers’.

Setelah itu klik tombol untuk melihat file-

file yang akan dibuat.

Secara bawaan terdapat delapan file yang akan dibuat

dalam CRUD Generator, jika kita tidak menginginkan sebuah

file dapat dilakukan dengan menghilangkan tanda centang.

Misalnya pada halaman Mata Pelajaran ini kita tidak

menginginkan ‘view.php’ yang merupakan file untuk melihat

secara detail sebuah record Mata Pelajaran.


Setelah itu klik tombol untuk membuat file-

file tersebut.

Memodifikasi MataPelajaranController

Buka file ‘backend/controllers/MataPelajaranController.php’.

Di dalam file tersebut terdapat function yang berawalan

action seperti actionCreate. Ini berarti untuk membuka

halaman ini kita dapat mengetikkan alamat

‘localhost/sekolah/backend/mata-pelajaran/create’.


Kita coba memasukkan data mata pelajaran dan

menekan tombol create, yang terjadi adalah setelah menekan

tombol klik, halaman akan menuju ke “view”, dikarenakan file

“view.php” tidak kita sertakan maka akan terjadi error.

Agar tidak terjadi error, kita harus memodifikasi

function “actionCreate”.

Perhatikan pada baris 68 dan 69, setelah mendapatkan

respon post dan data disimpan (baris 68), maka halaman akan

menuju ke view (baris 69). Ini berarti kita harus memodifikasi

baris 69. Modifikasi dapat kita buat dengan kembali lagi ke

halaman “index”.


Sama halnya pada function actionUpdate.

Pada baris 88 kita ubah menjadi:

Dikarenakan kita tidak menyertakan ‘view.php’ maka

function actionView dapat kita hapus.

Modifikasi Halaman Index Mata pelajaran

Jika pada browser kita buka halaman mata-pelajaran

(localhost/sekolah/backend/mata-pelajaran), pada bagian

index terdapat link view, sedangkan karena kita tidak

menyertakan view maka pada saat link view tersebut di klik

maka akan menampilkan error.


Untuk mengatasi ini kita dapat menghilangkan link

view tersebut dengan memodifikasi file

‘backend/views/mata-pelajaran/index.php’.


Pada baris 30 yang menampilkan aksi (action) secara

bawaan terdapat tiga aksi yaitu view, update dan delete

(hapus). Kita akan menentukan aksi ini hanya update dan

hapus saja dengan memodifikasi menjadi:

Pada baris 10 menunjukkan judul dari halaman, ini

dapat kita ubah sehingga menjadi bahasa indonesia.

Pada baris 19 menunjukkan kode link tombol

kita juga dapat memodifikasinya

sehingga berubah menjadi bahasa indonesia.

Pada baris 27 dan 28 menunjukan kolom apa saja yang

akan ditampilkan pada tabel, untuk ID juga dapat kita

hilangkan dari tabel tersebut.


Sehingga kodenya menjadi:

Sehingga tampilannya akan berubah menjadi :

Pada file ‘backend/views/mata-pelajaran/create.php’

juga menunjukkan halaman dengan bahasa inggris, ini juga

dapat kita modifikasi menjadi:


Sehingga tampilannya menjadi:

Mengubah tampilan Form

Pada saat kita membuka halaman create atau update

kita akan kesulitan kembali ke halaman index, maka dari itu

kita akan membuat sebuah link untuk kembali ke halaman

index.


Buka file ‘backend/views/mata-pelajaran/_form.php’.

Ubah dan Tambahkan kode sehingga menjadi:


Sehingga tampilan create maupun update akan menjadi:

• Membuat CRUD Halaman Guru

Sekarang kita lanjutkan dengan membuat CRUD

halaman Guru dengan:

Model Class : backend\models\Guru

Search Model Class : backend\models\CariGuru

Controller Class : backend\controllers\GuruController

File yang disertakan :


Memodifikasi file “GuruController.php”

Kita akan memodifikasi file

‘backend/controllers/GuruController.php’ pada bagian

actionCreate menjadi:

Pada bagian ini kita memodifikasi dimana field

password akan terisi otomatis dengan teks siakad.

Modifikasi file “_form.php”


‘backend/views/guru/_form.php’ dengan menghapus field

foto dan field password dan menambahkan datepicker untuk

tanggal lahir.

Pertama kita akan menggunakan eksensi Class

datepicker kartik yang telah kita masukkan pada bab 2.


dan untuk form kita modifikasi menjadi:

Untuk foto akan kita buat pada portal guru untuk

mengupload foto dan password kita buat otomatis dengan teks

siakad yang telah kita buat sebelumnya.

Memodifikasi file “view.php”


‘backend/views/guru/view.php’ diantaranya dengan

menambahkan sebuah link untuk kembali ke halaman index.


• Membuat CRUD Halaman Siswa

Sekarang kita lanjutkan dengan membuat CRUD halaman

Siswa dengan:

Model Class : backend\models\Siswa

Search Model Class : backend\models\CariSiswa

Controller Class : backend\controllers\SiswaController



Sama halnya dengan halaman Mata Pelajaran pada

halaman Siswa ini juga kita tidak menyertakan file “view.php”

sehingga modifikasinya sama dengan halaman Mata Pelajaran.

Selamat mencoba.

• Membuat CRUD Halaman Kelas

Sekarang kita lanjutkan dengan membuat CRUD

halaman Kelas dengan:

Model Class : backend\models\Kelas

Search Model Class : backend\models\CariKelas

Controller Class : backend\controllers\KelasController



Halaman create, secara otomatis jadwal pelajaran yang

dimasukkan akan tersimpan pada ‘Kelas 1B’. Buka file

‘backend/controller/JadwalPelajaranController.php’.

Kemudian pada bagian function actionCreate kita modifikasi

menjadi:

Pada actionCreate kita tambahkan variabel $id (baris

74) untuk menangkap id kelas yang dipilih.

Pada baris 78 akan dicari data kelas tersebut berdasarkan

primary key pada tabel kelas yang akan disimpan pada

variabel $kelas.

Jika menerima permintaan “POST” (baris 80), field

kelas_id akan diberi dengan nilai $id (baris 81) dan kemudian

dilakukan penyimpanan (baris 82). Setelah dilakukan

penyimpanan halaman akan kembali ke view (actionView)

dengan parameter id yang bernilai sama dengan $id.

Pada baris 87 kita akan menampilkan data kelas

dengan memberikan variabel $kelas pada create.php.


Agar pada halaman ‘create’ dapat diketahui kelas mana

yang akan dimasukkan jadwal pelajaran maka kita modifikasi

file ‘backend/views/jadwal-pelajaran/create.php’ menjadi:

Sekarang kita akan mencoba menekan tombol

, dan hasilnya akan menampilkan:


Mengubah Nama Field

Untuk mengubah Field Kelas ID menjadi Kelas, Mata

Pelajaran ID menjadi Mata Pelajaran dan Guru ID menjadi

Guru Pengajar, kita harus memodifikasi file

‘backend/models/JadwalPelajaran.php’ pada bagian

attributeLabels menjadi

Sehingga fieldnya akan berubah menjadi:


Menghapus Text Field Kelas, Mengubah Text Field Mata

Pelajaran dan Guru Pengajar Menjadi Select2 dan

Mengubah Text Field Jam Masuk dan Jam Keluar dengan

TimePicker

Pertama kita buat dahulu list hari yang akan kita

tuliskan di dalam ‘backend/models/JadwalPelajaran.php’.

Untuk memodifikasinya form jadwal pelajaran kita

buka ‘backend/views/jadwal-pelajaran/_form.php’. Pertama

kita sertakan dulu class-class yang akan digunakan, yaitu:

Hapus field kelas_id. Kemudian pada field

mata_pelajaran_id ubah menjadi:


Pada field guru_id ubah menjadi:

Pada field hari ubah menjadi:

Pada field jam_mulai dan jam_selesai.


Ubah pula submitButton dimana Create menjadi

Simpan dan Update menjadi Ubah. Sehingga tampilan

halaman akan menjadi:


Memodifikasi actionUpdate

Sekarang kita akan memodifikasi

‘backend/controllers/JadwalPelajaranController.php’ pada

bagian function ‘actionUpdate’ menjadi:

Menampilkan Pencarian dan Sorting Kolom Mata

Pelajaran dan Guru Pengajar

Sama halnya dengan pencarian pada halaman Kelas

dan Detail Kelas sebelumnya, pada Jadwal Pelajaran kita juga

menambahkan dua buah variabel sesuai dengan attribute pada

‘backend/views/jadwal-pelajaran/view.php‘ yaitu

‘nama_mata_pelajaran’ dan ‘guru_pengajar’.


Buka ‘backend/models/CariJadwalPelajaran.php’,

tambahkan dua buah variabel ‘mata_pelajaran’ dan

‘guru_pengajar’ dan daftarkan variabel tersebut dengan

pencarian pada function rules.


Kemudian pada bagian function search tambahkan menjadi:

Dikarenakan nama tabel mata_pelajaran sama

dengan nama kolomnya yaitu mata_pelajaran, maka untuk

relasi join tabel mata_pelajaran kita gunakan alias, dimana

untuk tabel mata_pelajaran kita aliaskan menjadi mapel

(baris 47-49).


Tampilannya akan berubah menjadi:

• Membuat Otorisasi Untuk Setiap Halaman Pada Portal

Admin (Backend)

Pada aplikasi ini, jika kita langsung menuju ke suatu

halaman, misalnya halaman siswa

(localhost/sekolah/backend/siswa) tanpa login terlebih

dahulu, maka kita akan langsung disuguhkan dengan halaman

siswa. Agar pengguna harus melakukan login terlebih dahulu,

harus ditambahkan sebuah otorisasi pada setiap halaman

(controller).

Membuat Otorisasi Halaman Siswa

Untuk membuat otorisasi kita harus kembali

memodifikasi file controller. Buka

‘backend/controllers/SiswaController.php’.


Pertama kita harus menyertakan terlebih dahulu class

AccessControl.

Kemudian pada function behaviors kita tambahkan

menjadi:

Pada baris 26 menunjukkan action apa saja yang

dijalankan. Pada baris 27 sampai 32 menunjukan siapa saja

yang dapat mengakses suatu halaman dimana halaman yang

dapat diakses adalah index, create, update, dan delete (baris


29) dan yang dapat mengaksesnya adalah pengguna yang telah

login (baris 31).

Penjelasan :

‘roles’ => [‘@’] dimaksudkan action tersebut hanya bisa

diakses oleh semua pengguna yang telah login.

‘roles’=>[‘?’] dimaksudkan semua pengguna bisa mengakses

action tersebut tanpa harus melakukan login terlebih dahulu.

Silahkan lanjutkan untuk controller yang lainnya dengan

menyesuaikan action mana yang dapat diakses.

Membuat Halaman Kelola Administrator

Sekarang kita lanjutkan dengan membuat halaman untuk

mengelola administrator, dimana pada halaman ini hanya

dapat diakses oleh admin dengan role 0.

Adapun dengan pengaturan CRUD Generator:

Model Class : backend\models\Admin

Search Model Class : backend\models\CariAdmin

Controller Class : backend\controllers\AdminController



Pada halaman kelola adminstrator ini kita tidak akan

meng-update ataupun melihat secara detail data seorang

administrator, sehingga kita tidak perlu menyertakan

update.php dan view.php

Pada bagian index, kita hanya menampilkan admin

dengan role 1 saja, untuk membuat ini buka

‘backend/controllers/AdminController.php’ pada bagian

actionIndex kita modifikasi menjadi:


Kemudian modifikasi pula ‘backend/views/admin/index.php’

menjadi:

Sehingga tampilannya akan menjadi:


Modifikasi Halaman Tambah Admin

Pada halaman create admin (tambah admin) kita akan

membuat field role menjadi terisi otomatis dengan role 1.

Buka file ‘backend/controllers/AdminController.php’ pada

bagian actionCreate tambahkan dan ubah kode menjadi

seperti berikut.


Pada baris 72 menunjukkan bahwa kita memberi nilai

pada field role dengan nilai 1.

Setelah tombol Simpan diklik (menerima permintaan

POST) yang ditunjukkan pada baris 74, password akan di

enkripsi dengan enkripsi SHA1 (baris 76) setelah itu dilakukan

penyimpanan (baris 77) dan kemudian halaman akan

diarahkan kembali menuju ke index kelola admin (baris 78).

Sehingga pada halaman tambah admin akan berubah menjadi:

Karena field Role ini selalu bernilai 1, maka dapat kita

hapus. Buka file ‘backend/views/admin/_form.php’,

kemudian hapus field role sehingga menjadi


Dan tampilan form tambah admin akan berubah menjadi:

Otorisasi Kelola Admin Hanya Untuk Admin

Dengan Role 0


Pada halaman kelola admin ini karena hanya dapat

diakses oleh admin dengan role 0, maka untuk AccessControl

pada bagian behaviors sedikit berbeda yaitu:

Pada baris 34 kita memanggil function isRoot pada

models Admin yang sudah kita buat sebelumnya. Jangan lupa

untuk menyertakan class AccessControl.

Pada halaman kelola admin ini, jika anda login sebagai

admin dengan role selain 0 (1), maka tampilannya akan

menjadi:


Kita dapat membuat link Admin hanya terlihat untuk

admin dengan role 0, yaitu dengan sedikit menambahkan kode

pada ‘backend/views/layouts/_sidebar.php’.

Pertama kita sertakan dulu model Admin

Kemudian pada link ‘admin’ kita tambahkan array

‘visible’ sehingga menjadi:


Sehingga, jika kita login menggunakan admin dengan

role 1, link admin tidak akan muncul:

Membuat Halaman Ubah Username

Kita akan membuat halaman ubah username dengan

membuat suatu action yang diletakkan pada

SiteController.php. Buka file

‘backend/controllers/SiteController.php’.

Buat function dengan nama actionUbahUsername

dengan isi perintah:


Karena kita menggunakan class model Admin (baris

88), berarti kita harus menyertakan class Admin dengan

menambahkan perintah:

Perhatikan perintah pada function

actionUbahUsername, pada baris 97 kita merender tampilan

dengan nama ubah_username, ini berarti kita harus membuat

sebuah file dengan nama ‘ubah_username.php’ yang

diletakkan pada ‘backend/views/site’.


Ketikkan perintah berikut di dalam

ubah_username.php.

Pada saat kita membuka menu ‘ubah-username’ ini

akan muncul tampilan:


Ini dikarenakan kita belum mendaftarkan action

‘ubah-username’ pada AccessControl, pada bagian behaviors

SiteController.php tambahkan untuk action ubah-username.

Hasil tampilannya seperti gambar dibawah ini:


Membuat Halaman Ubah Password

Untuk membuat halaman ubah password, pertama kita

buat dahulu model untuk form ubah password yaitu

‘backend/models/UbahPassword.php’ .


Pada UbahPassword.php ketikkan dengan perintah berikut:


Kita juga akan membuat halaman ubah password

dengan membuat suatu action yang diletakkan pada


‘backend/controllers/SiteController.php’.

Buat function dengan nama actionUbahPassword


Pada baris 105 kita menggunakan model

UbahPassword, ini berarti kita harus menyertakan class

UbahPassword pada SiteController.php.



actionUbahPassword, pada baris 116 kita merender

tampilan dengan nama ubah_password, ini berarti kita harus

membuat sebuah file dengan nama ‘ubah_password.php’ yang

diletakkan pada ‘backend/views/site’.

Kemudian ketikkan perintah berikut pada

ubah_password.php.


Agar dapat diakses, daftarkan juga ‘ubah-password’

pada behaviors SiteController.php.

Hasil tampilannya seperti gambar dibawah ini:


Membuat Portal Guru (FRONTEND)

POKOK BAHASAN

• Membuat Autentikasi Guru

• Membuat Tabel View Jadwal Mengajar

• Membuat Model View Jadwal Mengajar

• Membuat Halaman Jadwal Mengajar

• Membuat Link pada Kolom Kelas

• Membuat Halaman Data Kelas

• Membuat Halaman Biodata

• Upload Foto Profil Guru

• Membuat Halaman Ubah Guru

Pada bab ini kita akan membuat bagian frontend

sebagai halaman untuk guru, dimana untuk masuk ke halaman

ini sama halnya dengan portal backend harus melalui halaman

login terlebih dahulu. Guru dapat melihat biodata pribadi,

jadwal mengajar, melihat kelas yang diajar, melihat siswa yang

diajar, mengubah foto profil dan mengubah password.


• Membuat Autentikasi Guru

Secara bawaan autentikasi pada Yii2 menggunakan

tabel user dengan model yang berada pada

‘common/models/User.php’. Untuk menggantinya buka

‘frontend/config/main.php’.


Pada baris 16 terlihat untuk autentikasi menggunakan

model pada ‘common/models/User.php’. Kita akan ubah

menggunakan model guru pada ‘frontend/models/Guru.php’

yang sudah kita buat sebelumnya.


Sekarang kita akan menambahkan beberapa kode

pada ‘frontend/models/Guru.php’.

Kita akan menggunakan beberapa Class framework yii,

yaitu:


Kemudian kita akan membuat Class Guru menjadi

implement dari Class IdentityInterface, sehingga kita harus

memasukkan function yang telah di buat di class interface

IdentityInterface.

Kita juga akan membuat sebuah function untuk

menampilkan nama dari guru yang login, yaitu function

‘namaGuru’

Kemudian kita akan menambahkan function yang merupakan

implement dari class IdentityInterface.


Perhatikan pada function findByUsername (baris

101-104) kita menggunakan field nuptk pada tabel guru

sebagai username untuk melakukan login.

Perhatikan pula pada baris 113 kita menggunakan

“SHA1” untuk mengenkripsi field password.


Keseluruhan kode Guru.php adalah sebagai berikut:


Setelah itu kita buat sebuah file dengan nama

‘LoginGuru.php’ di dalam folder ‘frontend/models’.

Kemudian pada LoginGuru.php ketikkan kode berikut:


Buka file ‘frontend/SiteController.php’ ubah ‘function

behaviors’ menjadi seperti berikut.

Untuk function action lainnya yang tidak kita gunakan,

seperti actionContact, actionAbout, actionSignup,

actionRequestPasswordReset dan actionResetPassword

dapat kita hapus.

Sekarang pada saat kita membuka halaman

‘localhost/sekolah/’ akan mengarah kepada halaman login.


Kemudian kita akan memodifikasi beberapa kode pada

‘SiteController.php’ tersebut.

Perubahan kita lakukan pada baris ke 5 dimana

sebelumnya menggunakan “LoginForm” pada

‘common\models’ (common\models\LoginForm), kita ganti

menjadi ‘frontend\models\LoginGuru’ yang telah kita buat

sebelumnya.

Kemudian pada function actionLogin pada baris 85

yang menggunakan ‘LoginForm’ kita ganti menjadi

‘LoginGuru’.


• Membuat Tabel View Jadwal Mengajar

Pada bagian ini kita akan membuat sebuah tabel view

jadwal mengajar untuk melihat jadwal mengajar yang dimiliki

oleh seorang guru, dimana view jadwal mengajar ini

menampilkan relasi dari 4 tabel, yaitu tabel guru, tabel

mata_pelajaran, tabel jadwal pelajaran, dan tabel kelas.

Berikut SQL untuk membuat tabel view jadwal mengajar.

Ketikkan kode diatas pada phpmyadmin pada

database db_siakad bagian SQL kemudian klik tombol

send/kirim.


Sehingga akan menghasilkan sebuah tabel view seperti

gambar di bawah.

• Membuat Model View Jadwal Mengajar

Sama halnya dengan membuat model pada tabel,

untuk view kita juga akan membuat model menggunakan Gii

Model Generator. Pada browser, alamatkan pada

‘localhost/sekolah/gii’, kemudian pilih Model Generator untuk

membuat model dari ‘view_jadwal_mengajar’.


Kemudian buka file

‘frontend/models/ViewJadwalMengajar.php’ yang sudah

terbentuk tersebut kemudian ubah dan hapus beberapa

perintah pada function rules menjadi seperti berikut.

Pada baris 37 menunjukkan bahwa untuk pencarian

akan ditujukan pada kolom mata_pelajaran, hari dan kelas.

Kemudian tambahkan sebuah function search untuk metode

pencariannya seperti berikut.

Perhatikan baris 61. Pada baris tersebut menunjukkan

bahwa data jadwal pelajaran yang ditampilkan berdasarkan

guru yang login pada website.


• Membuat Halaman Jadwal Mengajar

Dikarenakan tabel view_jadwal_mengajar ini tidak

terdapat primary key, maka untuk membuat halaman jadwal

mengajar ini kita tidak dapat menggunakan Gii CRUD

Generator, namun kita akan menggunakan Controller

Generator.


Buka file

‘frontend/controllers/JadwalMengajarController.php’.

Panggil beberapa class pada JadwalMengajarController.

Kemudian tambahkan function behaviors untuk

mengautentikasi pengguna.

Kemudian untuk function actionIndex ubah menjadi

seperti berikut.


Buka file ‘frontend/views/jadwal-mengajar/index.php’ dan

ubah menjadi seperti berikut.

Maka tampilan halaman jadwal mengajar akan

menjadi seperti berikut.


• Membuat Link pada Kolom Kelas

Masih pada halaman jadwal mengajar, pada bagian ini

kita akan membuat link pada kolom kelas, dimana pada saat

link tersebut dipilih, halaman akan beralih ke halaman yang

menampilkan siswa yang terdaftar pada kelas tersebut.

Buka file ‘frontend/views/jadwal-mengajar/index.php’, pada

bagian “kelas” ubah menjadi seperti berikut.

Perhatikan pada baris 22, link akan mengarah ke

halaman data-kelas dengan action view dikarenakan kita

belum membuat controller untuk halaman data-kelas maka

akan tampil halaman tidak ditemukan. Untuk halaman data-

kelas tersebut akan kita buat setelah ini.


• Membuat Halaman Data Kelas

Sekarang kita lanjutkan dengan membuat halaman

Data Kelas yang menampilkan kelas-kelas yang tersedia dan

fitur untuk melihat siswa-siswa yang terdaftar pada kelas

tersebut dengan memilih CRUD Generator pada gii dengan:

Model Class : frontend\models\Kelas

Search Model Class : frontend\models\CariDataKelas

Controller Class : frontend\controllers\DataKelasController



Karena pada halaman ini kita tidak melakukan

penambahan, perubahan ataupun penghapusan data, maka

ada beberapa file yang tidak kita generate, yaitu : _form.php,

create.php, dan update.php .

Begitu juga untuk action pada DataKelasController.php

ada beberapa action yang tidak kita gunakan (dihapus)

diantaranya : actionCreate, actionUpdate dan actionDelete.

Menambahkan Autentikasi pada halaman Data Kelas

Buka file ‘frontend/controllers/DataKelasController.php’.

Panggil class AccessControl pada DataKelasController

Kemudian tambahkan ‘access’ pada function behaviors

untuk mengautentikasi pengguna sedangkan untuk ‘verb’

karena tidak digunakan maka dapat dihapus.


Memodifikasi file “index.php”

Jika kita membuka halaman data kelas, maka

tampilannya akan seperti berikut

Karena kita tidak melakukan penambahan, perubahan

dan penghapusan data, maka kita akan melakukan perubahan

pada file ‘frontend/views/data-kelas/index.php’.


Adapun bagian yang kita hapus atau ubah adalah:


Sehingga menjadi:

Sehingga tampilannya akan berubah menjadi:


Jika kita perhatikan pada kolom “Wali Kelas” tidak

terdapat pencarian, untuk membuatnya sama seperti pada bab

sebelumnya pada halaman “kelas”.Buka file

‘frontend/models/CariDataKelas.php’. Tambahkan attribute

wali_kelas pada kelas tersebut dan sertakan attribute

wali_kelas tersebut pada function rules untuk pencarian.

Kemudian ubah function search menjadi:


Dan halaman Data Kelas akan menjadi seperti berikut.

Memodifikasi ‘actionView’ Data Kelas

Pada bagian ini kita akan memodifikasi view pada Data

Kelas supaya menampilkan siswa-siswa yang terdaftar pada

kelas tersebut.

Masih pada file

‘frontend/controllers/DataKelasController.php’ kita akan

memodifikasi pada bagian function actionView menjadi

seperti berikut.


Pada baris 45 merupakan perintah untuk mengambil

data pada tabel detail_kelas dimana kelas_id bernilai sesuai

dengan yang diberikan pada $id.

Pada baris 46 adalah perintah untuk mengambil data

pada tabel kelas dengan nilai id pada tabel kelas bernilai

sesuai dengan yang berikan pada $id.

Untuk menampilkan data yang sesuai, yaitu daftar

siswa-siswa yang terdaftar pada suatu kelas, maka kita perlu

mengubah file ‘frontend/views/data-kelas/view.php’ menjadi

seperti berikut.



• Membuat Halaman Biodata

Karena link biodata adalah site-biodata, maka untuk

membuat halaman biodata kita lakukan dengan

menambahkan function actionBiodata pada

‘frontend/controllers/SiteController.php’.

Perhatikan pada baris 76 yang merupakan perintah

untuk mengambil data pada tabel guru berdasarkan id guru

yang sedang login.

Kemudian pada baris 78 file view yang dirender adalah

biodata sehingga kita harus membuat sebuah file biodata.php

pada ‘frontend/views/site/biodata.php’.


Sehingga akan tampil seperti berikut.


• Upload Foto Profil Guru

Pada bagian ini kita akan membuat upload foto profil

pada halaman guru.

Buat sebuah file ‘frontend/models/UploadFoto.php’.

Tambahkan beberapa Class yang akan digunakan serta

attrribute image dan rules untuk attribute tersebut.


Pada baris 16 menunjukkan bahwa extensi foto yang

boleh diupload adalah jpg, jpeg, png dan gif.

Kemudian kita buat function untuk mendapatkan file

foto dan alamat url foto.

Pada bagian yang diberi kotak merah menunjukkan

lokasi tempat foto tersebut disimpan, yaitu di

‘frontend/uploads’ dan untuk foto guru yang belum diupload,

akan menampilkan file foto dengan nama ‘default_foto.png’.

Maka kita harus membuat folder uploads dan meletakkan file

‘default_foto.png’ pada folder tersebut.


Kemudian buka file ‘frontend/controllers/SiteController.php’

kita tambahkan beberapa baris kode pada function

actionBiodata.

Nama file foto yang disimpan berdasarkan NUPTK

guru tersebut (baris 89).

Kemudian tambahkan beberapa kode pada file

‘frontend/views/site/biodata.php’. Masukkan beberapa Class

yang diperlukan.


Kemudian kita tambahkan kode untuk menampilkan foto

profil dan form untuk meng-upload foto profil.

Tampilannya akan menjadi seperti berikut.

Dan pada saat akan mengupload foto, tampilan form upload

foto akan seperti berikut.


Dan pada saat tombol Upload di klik, Foto profil tersebut akan

ter-upload.

• Membuat Halaman Ubah Guru

Untuk membuat halaman ubah password hampir sama

seperti ubah password pada bagian backend, pertama kita

buat dahulu model untuk form ubah password yaitu

‘frontend/models/UbahPassword.php’ .


Pada UbahPassword.php ketikkan dengan perintah berikut.


Kita juga akan membuat halaman ubah password

dengan membuat suatu action yang diletakkan pada


‘frontend/controllers/SiteController.php’.

Buat function dengan nama actionUbahPassword


Pada baris 106 kita menggunakan model

UbahPassword, ini berarti kita harus menyertakan class

UbahPassword pada SiteController.php.


actionUbahPassword, pada baris 117 kita merender

tampilan dengan nama ubah_password, ini berarti kita harus


membuat sebuah file dengan nama ‘ubah_password.php’ yang

diletakkan pada ‘frontend/views/site’.

Kemudian ketikkan perintah berikut pada

ubah_password.php.


Agar dapat diakses, daftarkan juga ‘ubah-password’

pada behaviors SiteController.php.

Hasil tampilannya seperti gambar dibawah.


Export Data

POKOK BAHASAN

• Export Data ke Excel Menggunakan PHPExcel

• Export Data ke Pdf Menggunakan Kartik Yii2-

Pdf

• Export Data ke Excel Menggunakan PHPExcel

Pada Bab 2 kita telah memasukkan beberapa ekstensi

diantaranya adalah ‘kartik-v/yii2-export’ yang menyertakan

package PHPExcel pada folder ‘vendor’.

Pada bagian ini kita akan meng-Export data ke dalam

bentuk Excel menggunakan Package PHPExcel tersebut.


Buka file ‘backend/controllers/DetailKelasController.php’.

Daftarkan action export ke dalam function behaviors.

Aksi Export ini hanya bisa diakses dengan method

POST (baris 37).

Kemudian buat sebuah function dengan nama actionExport.


Kemudian pada buat file ‘backend/views/detail-

kelas/excel.php’ dan ketikkan kode berikut:

Kemudian untuk membuat tombol Export, buka file

‘backend/views/detail-kelas/index.php’ dan tambahkan

tombol export.



Ketika tombol ‘Export Excel’ di klik, file excel akan

muncul dengan tampilan seperti berikut.

• Export Data ke Pdf Menggunakan Kartik Yii2-Pdf

Pada Bagian ini kita akan meng-export data ke pdf

menggunakan package yang telah kita masukkan sebelumnya

yaitu ‘kartik-v/yii2-pdf pada folder ‘vendor’.


Buka file

‘frontend/controllers/JadwalMengajarController.php’.

Daftarkan action export ke dalam function behaviors

agar dapat diakses.

Kemudian buat sebuah function dengan nama actionExport.


Kemudian pada buat file ‘frontend/views/jadwal-

mengajar /pdf.php’ dan ketikkan kode berikut.

Kemudian untuk membuat tombol Export, buka file

‘frontend/views/jadwal-mengajar/index.php’ dan tambahkan

tombol export



Ketika tombol ‘Export PDF’ di klik, akan muncul

tampilan seperti berikut:


Membuat Package Sendiri

POKOK BAHASAN

• Membuat Package Sendiri

• Membuat Pencarian Global

Membuat Package Sendiri

Pada bagian ini kita akan membuat package sendiri

yang kita letakkan pada folder ‘vendor’.

Buat sebuah folder dengan nama ‘package-ku’ di

dalam folder ‘vendor’. Kemudian di dalam folder ‘package-ku’

tersebut buat sebuah folder dengan nama ‘widgets’.


Kemudian buat file FormPencarian.php di dalam folder

widgets tersebut (vendor/package-ku/widgets).

Kemudian pada file FormPencarian.php isikan kode

berikut.

Perhatikan pada baris 19, kita merender sebuah file dengan

nama ‘_formPencarian’. Buat sebuah folder dengan nama

‘views’ di dalam folder ‘widgets’.


Kemudian di dalam folder ‘views’ tersebut buat file

‘_formPencarian.php’.

Kemudian pada ‘_formPencarian.php’ isikan kode berikut

Perhatikan namespace pada file FormPencarian.php.


Untuk dapat menggunakan Class FormPencarian init

kita harus mendaftarkan ‘packageku’ ke dalam composer

autoload psr4.

Buka file ‘vendor/composer/autoload_psr4.php’ dan

tambahkan kode berikut.

Perhatikan pada baris 48, kita mendaftarkan root

package (packageku) yang berada di dalam folder

‘vendor/package-ku’ agar kemudian dapat diakses.

• Membuat Pencarian Global

Pada bagian ini kita akan membuat sebuah pencarian

global menggunakan widgets FormPencarian yang telah kita

buat sebelumnya.


Buka file ‘backend/views/guru/index.php’, panggil

widget FormPencarian.

Kemudian masukkan widget FomPencarian tersebut.

Untuk attribute model pada Class FormPencarian kita

isikan dengan $searchModel (baris 21) sedangkkan untuk

attribute action kita isikan [‘index’], untuk attribute method

secara bawaan nilainya adalah get, jika anda ingin

menggunakan method post, pada pemanggilan widget

FormPencarian dapat Anda tambahkan ‘method’=>’post’.


Pada saat kita buka halaman guru

(localhost/sekolah/backend/guru/index) akan terjadi error

seperti berikut.

Ini dikarenakan kita belum membuat attribute

pencarian pada model CariGuru. Buka file

‘backend/models/CariGuru.php’, dan tambahkan attribute

pencarian dan daftarkan attribute pencarian tersebut pada

rules safe.


Kemudian pada function search($params).

Perhatikan pada bagian yang dikotakkan, untuk nilai

pencarian berdasarkan attribute pencarian yang telah kita

masukkan. Sehingga tampilan halaman guru akan menjadi:


Untuk pencarian yang berada pada setiap kolom pada

tabel tidak akan berfungsi, sehingga dapat kita hilangkan

dengan menghapus atau menonaktifkan filterModel pada

‘backend/views/guru/index.php’.



Tentang Penulis

Ade Hendini adalah penulis kelahiran

Sanggau, Kalimantan Barat ini memiliki hobi

mendalami keilmuan di bidang komputer.

Beliau adalah programmer yang terbiasa

menyelesaikan proyek aplikasi berbasis web

dengan bahasa pemrograman PHP.

Beberapa proyek yang pernah dihasilkan

yaitu SIAKAD, SIRS dan beberapa proyek

lainnya. Beliau pernah menjabat sebagai

Ketua

PLUG (Pontianak Linux User Group), dan saat ini bersama rekan-

rekan yang lain juga mendirikan perusahaan di bidang IT yang

bernama IndoTechKonsultan. Selain itu, beliau juga berprofesi

sebagai pengajar di bidang Informatika dan aktif menghasilkan

karya ilmiah, serta aktif memberikan

pelatihan/seminar/workshop.


Yoki Firmansyah S.Kom., M.Kom, Lahir di

Kabupaten Ketapang, Kalimantan barat, 09

September 1989, menyelesaikan program

Strata 1 di STMIK Pontianak pada tahun

2011, melanjutkan Program Strata dua di

STMIK Nusa Mandiri Jakarta dan lulus pada

tahun 2014, sejak tahun 2012 aktif menulis

dan meneliti, mendalami beberapa bidang

ilmu, terutama dibidang digital marketing,

Etika Profesi, dan Manajemen Sistem

Informasi, hingga saat ini masih aktif mengajar di Universitas Bina

Sarana Informatika Kampus Kota Pontianak dan memberikan

pelatihan seminar dan workshop sesuai dengan bidang keilmuan


Raja Sabarruddin M.Kom lahir

di Pulau Subi, Natuna pada bulan Oktober

dari pasangan Raja Abd Aziz dan Hartati.

Pada tahun 2011 selesai menamatkan

pendidikan SMA dan melanjutkan di

perguruan tinggi di Kota Pontianak, tepatnya

di AMIK BSI Pontianak, melanjutkan

pendidikan Strata-I (S1) di Prodi Sistem

Informasi STIMIK Nusa Mandiri jakarta

tahun 2015 dan beasiswa Strata-II Magister

Ilmu Komputer

di tahun 2018. Setelah menyelesaikan pendidikan Magister, Bang

Raje diterima sebagai dosen di Universitas Bina Sarana

Informatika khususnya di UBSI Kampus Kota Pontianak dan di

percayai sebagai staff bagian BSI Entrepreneur Center hingga 2018.

Pada tahun 2019 ia diamanahkan sebagai Staff Prodi Sistem

Informasi Akuntansi di tempat ia mengajar. Bang Raje yang

memang dari awal hobi membaca akhirnya ia mencoba menulis dan

diterbitkan buku pertamanya dengan judul "Jago Ngoding

Pemrograman Web dengan PHP Untuk Pemula" di tahun 2019.

Menjadi Advance dengan - repository.bsi.ac.id · instalasi, membuat Controller, View, dan Model,...

Documents

Transcript of Menjadi Advance dengan - repository.bsi.ac.id · instalasi, membuat Controller, View, dan Model,...