Tutorial Yii2 Singkat padat dan jelas untuk programmer pemula. Bagian 1 – Membuat Aplikasi Penjualan Menggunakan yii2
Halo, ketemu lagi, Lama ga nulis di blog. Kali ini saya akan mengupas tutorial menggunakan framework yii2 untuk membuat sebuah aplikasi penjualan sederhana dengan cara yang singkat padat dan jelas dan InsyaAlloh dapat dipahami dengan mudah.
Apa itu yii2 ?
Yii versi 2 adalah salah satu dari sekian banyak framework php yang menerapkan konsep MVC. Ahir-ahir ini mungkin kurang populer, dibangingkan laravel code igniter dan lainnya. Tetapi menurut saya yang sudah lama menggunakan berbagai macam framework, yii ini paling stabil karena dari pertama digunakan major versionya masih 2, cepat loadingnya, modular dan sudah ada embeded crud didalamnya. Untuk platform instalasi dan requirement juga sudah menggunakan composer sama seperti framework lainnya. Yii dapat di download pada websitenya di alamat https://www.yiiframework.com/. Dengan kelebihan diatas dan segudang feature lainnya Yii sangat recomended dipertimbangkan untuk digunakan dalam sebuah project PHP.
Baiklah sesuai judulnya adalah tutorial singkat pada dan jelas. tanpa berlama-lama kita langsung saja menuju langkat instalasi. Kali ini kita akan menggunakan platform windows xampp (sepertinya banyak juga programer pemula menggunakan windows).
1. Prequisite checks (Opsional tips)
Jika menggunakan windows (server) atau yang sudah terinstall visual studio seringkali bentrok port 80 dengan IIS ,
maka stop dulu iis dengan perintah pada cmd
net stop w3svcatau dari menu windows service
langkah ini dapat di skip jika windows masih default (belum diinstall macam-macam tools)
2. Download dan install xampp
Xampp adalah paket instalasi lengkap untuk development php yang terdiri dari (apache, mysql, php, perl, mercury mail,
filezilla ftp, tomcat, phpmyadmin, sendmailer).
Search saja di google dengan keyword “download xampp”, rekomendasikan saya download yang php 7.3
https://www.apachefriends.org/download.html
Untuk pengguna mac os dapat menggunakan MAMP ( https://www.mamp.info/en/downloads/ )
Install xampp , bisa diinstall pada sembarang drive c,d dan seterusnya(sebaiknya pada secondary drive d:\xampp , supaya tidak terganggu dan aman bila windows crash), cara installnya tinggal klik 2x dan ikuti next sampai selesai.
Tunggu sampai instalasi selesai, jika sudah selesai install xampp biasanya akan muncul toolbar di tray icon kanan dengan logo xampp.
3. Download dan Install mysql workbench
Mysql Workbench merupakan tools untuk “memanage” database mysql dalam bentuk GUI. Berbeda dengan phpmyadmin, tools ini lebih responsif dan merupakan official tools dari oracle mysql. Kita menggunakan tools ini tentunya supaya praktis dan cepat untuk seorang developer pemula, tidak perlu pusing memikirkan perintah sql untuk membuat table, konstrain dan lainnya.
search pada google dengan kata kunci “mysql worksbench download” (download yang sesuai os anda, windows , mac atau linux)
https://dev.mysql.com/downloads/workbench/
Install mysql worksbench complete sesuai path default (biasanya pada c:\programfiles) tinggal klik next sampai selesai.
4. Install Composer
Composer merupakan “package installer” aplikasi php yang menerapkan otomatis instalasi dependency requirement. Jadi kita bisa menginstall sembarang aplikasi dan framework php (tanpa menyebutkan requirementnya secara explisit). Secara umum composer terkait dengan website http://packagist.org (yang merupakan website repository library php) yang juga digunakan oleh laravel dan banyak framework php lainnya.
Untuk windows download composer dapat dicari pada google dengan kata kunci “composer for windows download”, atau pada alamat: https://getcomposer.org/download/ .
Download dan install composer-setup.exe sampai selesai. Jika ada pilihan untuk memasukan path php.
ketik D:\xampp\php\php.exe (atau browse ke php.exe, sesuai lokasi instalasi masing-masing xampp sebelumnya)
Jangan lupa pastikan cekbox add to path sudah dipilih, supaya nanti composer dapat dipanggil dari path manapun.
Klik next sampai finish
Untuk melakukan testing apakah composer sudah berhasil diinstal atau belum, klik menu start (tombol logo window) dan pilih run. atau tekan tombol keyboard ctrl+R bersamaan, atau pada searchbar windows ketik cmd.exe
Klik kanan pada cmd dan klik run as administrator, selanjutnya akan muncul windows cmd.
Kemudian Pada windows cmd ketik: composer , jika composer terinstall dengan benar makan akan muncul hasil seperti berikut:
tips, untuk mac os composer dapat diinstall dengan perintah
brew install composer
5. Install Yii2
Download yii sesuai petunjuk pada alamat https://www.yiiframework.com/ .atau https://www.yiiframework.com/doc/guide/2.0/en/start-installation .
Jika menggunakan composer maka setelah terbuka cmd seperti diatas, ketik perintah sebagai berikut
d:
cd d:\xampp\htdocs
mkdir penjualan
cd penjualan
Selanjutnya ketik (masih di windows cmd tadi) , copy paste saja perintah di bawah ke windows cmd supaya tidak salah ketik.
composer create-project --prefer-dist yiisoft/yii2-app-basic basictungu sampai proses download dan instalasi yii2 basic selesai
6. Membuat database menggunakan Mysql Workbench
sementara menunggu installasi yii, kita akan membuat database penjualan dengan tools mysql workbech. Terlebih dahulu pastikan apache dan mysql pada xampp sudah “start” dengan mengklik tray icon xamp.
Selanjutnya buka Aplikasi mysql wordbench
Klik tanda + pada mysql connections (untuk menambahkan koneksi ke mysql server local), isi dengan parameter seperti berikut:
(hostname=127.0.0.1 username = root , kosongkan password, defaultnya mysql pada xampp tidak menggunakan password)
Kemudian klik tombol test connection, jika ada warning abaikan saja klik continue, jika sukses maka akan muncul result windows seperti berikut ini:
Selanjutnya klik ok 2x untuk menyimpan koneksi mysql.
Jika koneksi sudah tersimpan pada bagian bawah mysql connections sudah muncul seperti gambar diatas, selanjutnya klik 2x pada mysql-lokal untuk membuka koneksi. (jika ada warning abaikan saja dan klik continue)
Untuk desain databasenya menggunakan ERD (Entity Relation Ship Diagram) sederhana , dengan prinsip yang sangat mudah seperti ini saja:
- ada barang dijual oleh penjual, dibeli oleh pembeli
- 1 orang pembeli bisa membeli banyak barang
- 1 orang penjual melayani banyak pembeli
Untuk membuat tablenya pada Workbench klik Menu: File ->new Model.
Pada Windows Model, Klik Icon +Add Diagram
Setelah Muncul Window EER diagram Seperti dibawah ini, ada baiknya kita simpan dan namain dulu modelnya misalnya : penjualan.mwb. Simpan satu folder dengan project kita di path d:\xampp\htdocs\penjualan (supaya tidak tertukar dengan project lainnya).
Selanjutnya kita buat table sesuai dengan panduan ERD diatas, bisa dilihat pada Video berikut.
hasilnya ahirnya seperti ini:
7. Generate Mysql Database dari skema EER
Bila tadi pada saat create schema lupa memberi nama DB.
Pada Klik Kanan Pada katalog skema mydb, dan pilih edit schema, rename ke penjualan dan klik tombol save (icon disket)
Selanjutnya Klik menu database–> forward engineer.
Pilih stored connection : mysql-lokal , dan klik next button
Check drop object and generate schema
Check export mysql table
Sql DDL Telah berhasil dibuat dari ER schema
Klik Next untuk execute SQL DDL
Bila ada Erros seperti ini, kembali ke Back button
Perlu diubah sedikit SQL DDL nya agar compatible dengan syntax mysql 5, Hilangkan kata Visible di ahir index.
Menjadi SQL seperti berikut
Simpan Ke File : d:\xampp\htdocs\penjualan\penjualan.sql
Kemudian klik lagi tombol next, Sukses bila tidak ada error:
Untuk melakukan testing apakah sudah tergenerate kita bisa menggunakan phpmyadmin. caranya
buka browser dan ketik http://localhost/phpmyadmin seharusnya sudah muncul tampilan berikut:
9. Install notepad++ untuk mengedit code
Jika belum mempunyai editor ada baiknya menggunakan notepad++ ataupun sublime (pilih salah satu) agar editing code php selanjutnya lebih mudah.
Notepad++ dapat di download disini:
https://notepad-plus-plus.org/downloads/
untuk Sublime 3 dapat di download disini:
https://www.sublimetext.com/3
10. Konfigurasi Yii untuk database penjualan
Buka kembali CMD yang digunakan untuk instalasi yii, jika belum berada di folder d:\xampp\htdocs\penjualan
maka ketik di cmd
d:
cd d:\xampp\htdocs\penjualan
Selanjutnya buka Windows Explorer arahkan ke d:\xampp\htdocs\penjualan, perhatikan ada beberapa folder dan file didalamnya. rename basic menjadi protected (selanjutnya folder protected ini dapat kita pindah ke secure folder diluar public folder bila nantinya akan diupload ke server hosting).
menjadi :
Selanjutnya copy isi folder dan file yang ada di c:\xampp\htdocs\penjualan\protected\web\*.* ke c:\xampp\htdocs\penjualan\
atau bila menggunakan cmd perintahnya:
cd D:\xampp\htdocs\penjualan\
ren basic proctected
xcopy /e /v D:\xampp\htdocs\penjualan\protected\web\* .
Hasilnya struktur folder harusnya seperti ini:
Edit file : folder d:\xampp\htdocs\penjualan\index.php, text .. pada required diganti menjadi protected
hasilnya seperti ini:
Kemudian ubah konfigurasi yii yang berada di file
d:\xampp\htdocs\penjualan\protected\config\web.php
aktifkan modul GII (hilangkan comment pada allowed ips) dari:
Diubah menjadi seperti ini:
dan pada d:\xampp\htdocs\penjualan\protected\config\db.php
ubah nama database yii2basic
ubah menjadi penjualan:
Selanjutnya buka browser dan ketik http://localhost/penjualan, seharusnya muncul seperti ini:
Artinya setup Yii sudah selesai dan siap memulai project menggunakan framework ini.
11. Membuat Model Database Yii
Model Database pada Yii merupakan interface yang menjembatani komunikasi ke fisik table di database mysql. Umumnya Model database yii biasanya merupakan instance dari class (\yii\db\ActiveRecord) . Secara default penamaan model pada yii mengikuti nama tabelnya dan bila ada reference foreign key Yii otomatis akan membuat linked maping dengan properti field khusus yang bisa dipanggil untuk meload related data.
Tools untuk melakukan generate model dan kode secara otomatis (yang bisa saya sebut magicnya yii) disini, kita menggunakan embeded tools yang bernama GII , caranya dengan membuka alamat pada browser chrome
http://localhost/penjualan/?r=gii
# membuat model untuk tabel barang:
Karena kita sudah melakukan konfigurasi koneksi database sebelumnya pada file web.php. sekarang tinggal klik tombol start pada model Generator. Kemudian ketik atau pilih tabelnya misalnya sebagai berikut:
Tablename=barang
ModelClass = Barang (penamaan model diawali huruf besar)
namespace = app\Models
Kemudian klik tombol preview dilanjutkan dengan klik tombol generate untuk membuat code
Kode Model sukses dibuat, Hasilnya dapat dilihat pada file: d:\xampp\htdocs\penjualan\protected\models\Barang.php
Dapat kita lihat barang mempunyai child table isikeranjang (merefer ke table: isi_keranjang)
Isi di table isi_keranjang yang related ke table barang dapat diambil dengan mudah dengan memanggil properti
Barang->isiKeranjang()
#membuat model untuk table isi_keranjang
Demikian juga sebaliknya jika kita create model untuk tabel isi_keranjang akan me-reverse balik ke table barang , contohnya.
Tablename=isi_keranjang
ModelClass = IsiKeranjang (tidak boleh ada kharakter khusus dan spasi pada nama model)
namespace = app\ModelsHasil Kode Model Generated File : d:\xampp\htdocs\penjualan\protected\models\IsiKeranjang.php
Model IsiKeranjang mempunya field foreign key properti getKodeBarang, artinya kita bisa melihat data barang nya pada model ini dengan memanggil properti tersebut misalnya:
Isikeranjang->KodeBarang->NamaBarang.
Ulangi langkah diatas (membuat model) untuk semua tabel lainnya.
12. Crud Code Yii
Crud Code yii juga masih merupakan magicnya yii, disini tools CRUD generator akan membuat kode otomatis beserta View htmlnya untuk melakukan operasi CRUD (create read update delete) pada database. Yang perlu menjadi catatan untuk crud ini semua model terkait crudnya harus sudah dibuat dahulu di langkah sebelumnya diatas.
Klik pada menu CRUD generator, isikan modelnya seperti berikut (harus sebutkan namespace lengkap ya):
model= app\models\Barang
search= app\models\BarangSearch
controller= app\controllers\BarangController
views path = @app/views/barang
Klik tombol preview dilanjutkan dengan tombol generate
Hasil kode generator dapat dilihat di folder
D:\xampp\htdocs\penjualan\protected\controller\BarangController.php
D:\xampp\htdocs\penjualan\protected\views\barang
Views untuk barang: D:\xampp\htdocs\penjualan\protected\views\barang\index.php
12. Tips Edit Layout dan Hasil Ahir
Hasil implementasi crud barang dapat dilihat pada url
http://localhost/penjualan/index.php?r=barang
Untuk mengedit judul aplikasi edit pada d:\xampp\htdocs\penjualan\protected\config\web.php
tambahkan properti name pada array
Untuk mengedit layout utama tampilan dan sebagainya , edit pada file di d:\xampp\htdocs\penjualan\protected\layouts\main.php
seperti berikut ini.
Contoh layout yang telah diedit menggunakan themes adminlte dari https://adminlte.io/
Untuk pembahasan selanjutnya tentang themeing layout details, authentifikasi dan customize widget dan lainya akan kita bahas pada sesi lainya. Semoga bermanfaat.
—————————————————————————————————————————————
Tulisan ini merupakan hasil karya saya sendiri yang sudah dipadatkan supaya lebih mudah dipahami dengan cepat.
Jika sudah menguasai silahkan Kontak Saya kembali, ada banyak project yang membutuhkan bantuan Anda.
Terimakasih.