Making Dooitkoo – Bagian 3

Lanjutan dari Bagian 2

Server udah sip, local udah siap. Jadi sekarang waktunya coding. Fun time!

Setup Laravel

Karena baru pertama kali pake Laravel … oh, maksudnya baru pertama kali bikin full-blown web app sejak 2005, banyak yang harus dibaca-baca dulu, manual PHP, dokumentasi JavaScript di Mozilla, dll. Dan yang paling penting sekarang, seting local server ngikutin petunjuk yang ada di dokumentasinya.

Karena ada 3 konfigurasi yg berbeda, saya edit file paths.php & masukin path untuk konfigurasi local, staging, dan production server.

$environments = array(

	'dev' => array('http://localhost*', '*.dev'),
	'staging'=>array('http://staging.dooitkoo.com','web127.webfaction.com'),
	'production'=>array('https://dooitkoo.com','https://www.dooitkoo.com','web127.webfaction.com')

);

Kode di atas artinya, untuk domain localhost dan semua yg berakhiran .dev, pake konfigurasi yang ada di direktori /dev/, untuk domain staging.dooitkoo.com pake yang ada di /staging/, dan seterusnya.web127.webfaction.com adalah nama host server di webfaction. Saya tambahkan ke konfigurasi di atas supaya saya bisa pake command-line utility yang namanya Artisan (artisan, pake “t”, bukan arisan) di server tanpa harus ngetikin --env=[nama environment] setiap kali saya pake artisan, kecuali di server webfaction karena nama hostnya sama, jadi tetep harus nyebutin nama environment-nya.

Berikutnya, saya buat konfigurasi untuk database. Saya kopi file config/database.php ke config/dev/, config/staging/, & config/production/ terus saya set konfigurasi database sesuai server yang bersangkutan.

Setelah database, saya set konfigurasi aplikasi. Kopi file config/application.php ke tiga subdirektori di atas. Di dalam file ini, ada satu properti yang penting untuk sekuriti, enkripsi, hashing, dll yaitu properti key yang isinya 32 karakter acak. Untuk bikin deretan karakter ini saya bisa pake cara manual alias ngetik ngawur tapi ada yg lebih baik, pake artisan. Kalo baru donlod Laravel, properti ini isinya teks “YourSecretKey”, hapus dulu sebelum generate key yg baru.

#untuk local/dev
mac$ php artisan key:generate --env=dev

#untuk staging
mac$ php artisan key:generate --env=staging

#untuk production
mac$ php artisan key:generate --env=production

Properti selanjutnya adalah ssl, karena saya ingin pake SSL di local & staging biar sama dengan production, saya set nilainya true untuk semua server. Setelah itu langsung, commit, push & sinkronisasi.

Scaffolding

Untuk scaffolding saya pake custom task yang dibuat oleh Jeffrey Way, seorang instruktur di Tutsplus, namanya Laravel Generator. Sebagai pelengkap, saya juga pake Laravel bundle (plugin), namanya Bob. Sebelum bikin scaffold, saya hapus dulu semua controller bawaan Laravel.

Untuk instalasi generator, tinggal kopi file generate.php dari reponya di Github & simpan di direktori /application/tasks/. Instalasi Bob, pake perintah bundle:install.

mac$ php artisan bundle:install bob
Fetching [bob]...done! Bundle installed.

Sekarang bikin controller & view. Pake Bob, saya bisa bikin controller sekaligus view nya plus registrasi di routes.php dengan satu perintah.

$ php artisan bob::build controller user.user get:login post:login post:logout --blade --restful
-- Can we build it? --
(~) View		user/user/get_index.blade.php
(~) View		user/user/get_login.blade.php
(~) View		user/user/post_login.blade.php
(~) View		user/user/post_logout.blade.php
(~) Controller		User_User_Controller
-- Yes we can! --

Karena saya ga butuh view untuk POST request, saya hapus file post_login & post_logout.

Lanjutkan dengan pembuatan controller & view lainnya. Karena view yang lainnya nanti pake Ajax, saya cuman bikin controller dengan satu method, get_index aja.

$ php artisan bob::build controller user.dashboard --blade --restful
$ php artisan bob::build controller user.subject --blade --restful
$ php artisan bob::build controller user.subject.category --blade --restful
$ php artisan bob::build controller user.subject.transaction --blade --restful

Routing

Setelah controller & view, sekarang atur routing, di file routes.php.

//request GET & POST /login dihandel sama function get_login & post_login di user.user controller.
Route::any('/login',['as'=>'user_login','uses'=>'user.user@login']);
//semua request POST /logout dihandel sama function logout di user.user controller.
Route::post('/logout',['as'=>'user_logout','uses'=>'user.user@logout']);

Berikutnya, saya tes & pastiin routing, controller, & view dah jalan.

UI & HTML Template

Saya bisa desain web & dulu sebelum full jadi programmer, sekitar tahun 2002, saya seorang freelance web designer. Tapi karena udah lama ga ngikutin tren desain web & males koding CSS & HTML, saya cari aja template gratisan/bayar. Liat sana sini, banyak yg bagus tapi pake jquery plugin sak bajeg :-|. Sampe akhirnya ketemu satu site template di Warpbootstrap & satu admin template di Themeforest. Dua-duanya sederhana tapi cukup bagus. Ga banyak animasi & plugin macem-macem plus sama-sama berbasis Twitter Bootstrap. Harganya total kurang dari $30. Lumayan lah, daripada bikin sendiri berhari-hari.

Setelah template didonlod, langsung diacak-acak :-). Pertama, cari bagian mana aja dari kode HTML yang bisa dipisahin & dikonversi jadi partials atau master layout. Kedua, buang semua plugin yang ga saya butuhin trus liat kode javascript bawaan masing-masing template, mungkin ada yang bagus & bisa dipake untuk dooitkoo. Ternyata ga ada JS yang cara penulisan & logikanya cocok dgn selera. Buang semua. Nanti bikin lagi sendiri.

login template

Saya ga gitu suka pake Google Fonts karena berarti harus ada ekstra request ke server google & ini pasti menambah loading time, jadi saya hapus semua referensi ke google fonts di semua file html dan css.

Abis bersih-bersih, customize template & sesuaikan dengan kebutuhan. Terus kopi-pes bagian-bagian yang penting ke file *.blade.php. Sekalian kopi file css dan javascript (bootstrap & jquery) ke direktori /public/. Set referensi ke file-file ini di dalam file blade pake utiliti HTML::style() & HTML::script().

Saya ingin nanti versi staging & production pake file CSS & javascript yang sudah di-minified sementara dev tetap pake versi aslinya supaya gampang utk debugging. Jadi sebelum bikin link, saya bikin file konfigurasi bernama dooitkoo & saya taruh di ketiga direktori konfigurasi. Isi file ini sementara hanya satu baris.

// dev/dooitkoo.php 
'assets_suffix':'' 

// staging/dooitkoo.php & production/dooitkoo.php 
'assets_suffix':'.min'

Baru saya bikin referensi/link di blade.

HTML::style('/theme/css/theme'.Config::get('dooitkoo.assets_suffix').'.css');
HTML::style('/vendor/bootstrap/css/bootstrap'.Config::get('dooitkoo.assets_suffix').'.css');
HTML::script('/vendor/jquery/jquery'.Config::get('dooitkoo.assets_suffix').'.js');
HTML::script('/vendor/bootstrap/js/bootstrap'.Config::get('dooitkoo.assets_suffix').'.js');

Tahap berikutnya adalah data design/modelling & migrations. Nanti di artikel selanjutnya. Ciao!

Also in this category ...