• jQuery
• jQuery Form
• jQuery Validation Engine

Kali ni, kod overload. Kalau ada rasa loya-loya sikit bila tengok kod banyak sangat, sila undur ke belakang perlahan-lahan dan cari beg plastik sebagai persiapan untuk muntah, pastu teruskan membaca.

Untuk makluman semua, kod dibawah digunakan bersama dengan Validation Engine 1.6.3. Untuk version 2.0 ni, tak berapa pasti, tapi mengikut firasat aku, takde beza kot (nanti la aku test).

So kalau nak tengok demo untuk validation engine tu, gi la ke demo page dia.

Validation Engine
Plugin ni ada client-side validation, tapi aku ni, malas sikit nak buat client side validation ni kerana server-side validation kena buat jugak. Oleh kerana aku lebih suka meluangkan masa di reddit daripada buat client-side validation, aku buat server-side je lah.

Kalau nak buat client-side validation, kat site dia ada cerita, dalam docs tu dan bila invalid data, dia keluar pop-up macam ni,

Amacam? Menarik? Hehehe.

Oh, benda ni bukan limit pada codeigniter je, kalau php biasa pun leh guna. Sebab aku guna codeigniter, aku kasi spotlight la kat CodeIgniter. Hehehe.

Ok, first sekali kena set jquery form plugin.

var options = {
  beforeSubmit:  loading,  // pre-submit callback
  dataType: 'json',
  success: cleanup  // post-submit callback
};
$('#nama_form').ajaxForm(options);

Form dia, aku kasi contoh, gini la rupa dia

<?php echo form_open('register/create', array('id' => 'registration_form')); ?>
	<h3>Account Info</h3>
	<div>
		<label>Email Address<span class="required">*</span></label>
		<input type="text" class="email-address text" id="username" name="username" value="" />
		<span class="field_info">Type in your email address, an email will be sent afterwards</span>
	</div>
</form>

Ha, simple je. Pastukan, kita taruk ni pulak

function cleanup(data)
{
	$('#submitbtn').removeAttr('disabled');
	if(data.status == 'success')
	{
		window.location = data.url
	}
	if(data.status == 'error')
	{
		$('#submitbtn').removeAttr('disabled');
		$('#submitbtn').val('Submit');
		$('#submitbtn').parent().prepend('<span id="status_msg">There was a slight problem with your submission (see above).</span>')

		$('#status_msg').fadeOut(3000, function(){
			$(this).remove();
		});

		$.each(data.error, function(index, value){
			$.validationEngine.buildPrompt(value[0],value[1],value[2])
			$('.'+value[0].substr(1)+'formError').click(function(){
				$.validationEngine.closePrompt(value[0])
			})
		})
	}
}

Ape fungsi function diatas? Untuk paparkan popup yang memaparkan error pada validation. Haa.. function cleanup ni dipanggil bila form tu dah disubmit secara ajax pada nilai “action” form tersebut. Action ni url dimana form tu hantar data tu le.

Garu kepala sikit, apa benda kandungan fungsi function cleanup ni!? Argh! Kalo nak paham, kena pi tengok kod server-side. Jom…

function create()
{
	$this->load->library('form_validation');
	$this->form_validation->set_rules('tnc', 'Terms and Conditions', 'trim|required|xss_clean');
	$this->form_validation->set_rules('username', 'username', 'trim|required|xss_clean|valid_email|callback__check_username');
	$this->form_validation->set_rules('fullname', 'fullname', 'trim|required|xss_clean');
	$this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|min_length['.$this->config->item('password_min_length').']|max_length['.$this->config->item('password_max_length').']|alpha_dash');
	$this->form_validation->set_rules('verify_password', 'Confirm Password', 'trim|required|xss_clean|matches[password]');
	$this->form_validation->set_rules('captcha', 'Confirmation Code', 'trim|xss_clean|required|callback__check_captcha');

	if($this->form_validation->run() === FALSE)
	{
		$response['status'] = 'error';

		$errors = $this->form_validation->_error_array;
		$field_errors = array();
		$error_details = array();
		foreach($errors as $key => $data)
		{
			$error_details[] = "#$key";
			$error_details[] = $data;
			$error_details[] = "error";

			$field_errors[] = $error_details;
			$error_details = array();
		}
		$response['error'] = $field_errors;
		echo json_encode($response);
	}
	else
	{

		$response['status'] = 'success';
		$response['url'] = site_url('something/completed');
		echo json_encode($response);
	}
}

Ha.. yang lain tu kosmetik je. Yang penting bila form tu tak dapat validate, dia masuk dalam line 13. Apa dia buat kat sini, dia bagi create key dan value je. Key nya ialah id html element, value nya.. error tu la. Tak dapat bayangkan, jom kita tengok apa kata si serangga api (firebug).

Image tu kecik sikit, kena klik untuk tengok saiz penuh. Nampak? Dia iterate semua element dalam key “error”. Total ada 5 element. Setiap satu mewakili input field pada form. Click pada tab JSON kat firebug tu dia papar gini,

Bila nilai-nilai JSON ni dihantar kembali, jquery form tu dia laksanakan function cleanup. Cleanup to melalui semua element error dan generate popup untuk setiap satu element. Ha.. tapi aku lupa nak bagitau sesuatu, sebelum submit dia ada panggil function “loading”. Takde ape sangat pun, cuma nak reset submit button dan buang semua error popup.

function loading()
{
	$('#status_msg').remove();
	$('#submitbtn').attr('disabled', 'true');
	$('#submitbtn').val('Processing..')
	$.validationEngine.closePrompt('.formError');
}

Ok settle. Setakat ni, kalau dah reti pakai jquery validation engine, pastu nak implement benda ni, takde masalah (bagi aku takde masalah, kalau ada mai la habaq sini). Nak tunjuk step-by-step sampai jadi, payah sikit la. So godek-godek la kod diatas bagi jadi.

Sebelum aku terlupa, kod-kod ni untuk tutup error popup tu kalau dia menganggu. Ye la, dah banyak sangat popup, mesti la dia lindung benda lain satgi.

$('input').click(function(){
	$.validationEngine.closePrompt($(this))
})
$('input').focus(function(){
	$.validationEngine.closePrompt($(this))
})

Jadi, hasilnya lebih kurang macam ni,

Moga diberi masa untuk post lagi pada masa akan datang. Setakat tu je sembang untuk kali ni, masa untuk programming pulak!

Contohnya jika anda mempunyai fungsi yang dipanggil..

get_items_in_list

Dalam CamelCase, ia ditulis sebegini,

GetItemsInList

Saya lebih menggemari pemisahan perkataan dengan menggunakan underscore ( _ ), dalam penamaan fungsi (function). Senang nak baca, walaupun agak panjang, tapi senang nak baca tu yang penting.

Tapi yang penting, kena konsisten. Jangan sekejap CamelCase sekejap , sekejap benda lain. Kena ada guideline untuk cara penulisan. Kalau setiap programmer ada style masing-masing (ada yang takdak style, ikut sedap hati dan mood.  Sekejap camelcase, sekejap hungarian notation, etc) haru-biru la gamaknya.  Dan kalau kena maintain sistem, programmer sebelum ni dah pakai CamelCase secara konsisten terpaksa la ikut.

Oleh kerana saya telah menulis pelbagai kod sebagai projek sampingan (pet project) yang tidak dapat disiapkan (tiba-tiba banyak pulak kerja) dan dibiarkan terbengkalai selama 3-6 bulan (ada yang sampai bertahun) dan kemudiannya saya sambung balik, ianya secara tidak langsung melatih saya untuk menulis kod dengan lebih teliti supaya  pada masa akan datang saya dapat memahami kod yang ditulis dan sambung menulis kod tersebut.

Ok, setakat tu sahaja untuk hari ni. Nak kena sambung baca kod orang (dan baiki indentation, *sigh*, masih ramai tak reti guna IDE dengan betul).

Selamat Programming!

Saya pun tak berapa reti C++, maklumlah selama bekerja ni tak berpeluang nak guna.

Saya tidak menterjemah IDE kerana saya takut akan hasil daripada terjemahan saya , dan jika ianya diterjemahkan pun anda tidak mungkin akan digunakan kebanyakan masa (99% daripada masa anda membangunkan perisian/bekerja), melainkan anda vendor kerajaan ataupun kakitangan kerajaan, itupun didalam kertas kerja. Kalau anda tahu, dialu-alukan memberitahu saya didalam ruangan komen.

Jadi, apa yang anda cari didalam IDE? Sudah tentulah fungsi untuk memudahkan aktiviti pengaturcaraan, tetapi apakah itu? Jikalau anda mempunyai ‘swiss army knife’ tetapi tidak tahu apa yang boleh dilakukannya selain memotong, anda berada dalam keadaan yang rugi. Rugi kerana tidak menggunakan IDE anda dengan sepenuhnya (50% pun oklah). Anda tidak perlu mengenali kesemua fungsi didalam IDE anda, setakat tahu apa yang anda mahu, itu pun memadai.

Sebuah IDE terdiri daripada:

• source code editor
• a compiler and/or an interpreter
• build automation tools
• a debugger (ataupun dalam BM, pengayahpijat)

Tertera diatas adalah kebolehan asas didalam sesebuah IDE. Terdapat banyak lagi kriteria yang digunakan untuk membandingkan sesuatu IDE, seperti berikut:

• profiler
• code coverage
• static code analysis
• autocomplete
• class browser
• dan pelbagai lagi..

Ciri-ciri yang dipilih oleh seseorang pengaturcara selalunya bergantung pada diri masing masing. Setiap pengaturacara adalah unik dan bukan semua pengaturcara dapat menyesuaikan diri pada IDE, melainkan terdapat sesuatu pada IDE tersebut yang harus digunakan untuk membangunkan jenis perisian tersebut, contohnya pembangunan perisian .NET pada Windows memerlukan Microsoft Visual Studio (walaupun terdapat alternatif seperti SharpDevelop – kebanyakan member yang test tak suka). Jika seluruh pasukan anda (5-10 orang) menggunakan Eclipse, kemungkinan besar anda terpaksa menggunakan Eclipse, kerana apabila pasukan anda membincangkan sesuatu dan menggunakan istilah yang hanya terdapat pada IDE tersebut, anda akan tersisih dan kekeliruan (ape bende derang cakap nih?)

IDE yang banyak digunakan oleh orang (yang selalu didengar oleh saya) adalah seperti berikut:

• Eclipse (juga terdapat PHPEclipse)
• Adobe Dreamweaver
• Netbeans
• beberapa lagi yang tak dapat saya ingati pada masa kini.

IDE yang saya gunakan adalah Komodo Edit. Dan saya mungkin akan beralih ke IDE lain jika ianya memenuhi kehendak saya didalam persekitaran pembangunan perisian saya (kadang-kadang setiap 6 bulan saya akan uji IDE baru).

Apa yang saya perlukan:

• Project View
• Multiple Tabs
• Code snippet, macro, etc
• Autocomplete (Code Intelligence)
• Class Browser
• Todo
• Code Folding
• Bookmark
• Brace matching
• Auto indentation
• Function list
• Regex-based find & replace (regular expression)

Tiada plugin untuk SVN, tiada option untuk terus muat naik (upload) ke server. Mengapa? Kenapa? Saya sudah mempunyai perisian untuk melakukan tugasan-tugasan berikut, TortoiseSVN dan Filezilla. “Tapi, kalau dalam IDE tak payah nak pegi tempat lain“, ya, mungkin benar tetapi saya cuba meminimakan apa yang sedang berjalan (running) dalam PC saya dan apabila perisian itu adalah ‘standalone’, ia dapat melakukan tugasnya dengan lebih baik daripada ‘plugin‘. Kerana ia adalah ‘specialist‘ (atau pakar – hehe). Itu hanyalah saya, saya mempunyai sesuatu yang lebih saya suka daripada yang lain (preference).

Cuba dan eksperimen dengan persekitaran pembangunan perisian yang sesuai dengan jiwa dan keadaan anda. Jangan lupa untuk berkongsi dengan saya.

Begitu juga dalam programming, terdapat beberapa langkah persediaan yang perlu dilaksanakan sebelum memulakan aktiviti ini.

Jika hanya anda seorang:

• version control

Jika lebih dari seorang:

• version control
• issue tracking (jika lebih dari seorang) ataupun mana mana perisian yang dapat senaraikan tugas / isu.
• wiki
• coding guideline
• terdapat beberapa lagi yang tidak akan disentuh disini seperti automated testing, automated build/deployment

Version Control

Walaupun anda seorang, version control dapat menyelamatkan anda (dan tentunya disaat yang genting) apabila anda membuat pengubahsuaian pada kod. Contohnya, anda implement suatu feature pada perisian anda yang diminta oleh pelanggan. Kemudiannya mereka tidak mahu pula feature tersebut, adakah anda akan komen kod tu  (risau mereka mahu pula kemudiannya) ? ataupun anda akan hasilkan fail baru dan namakan fail lama sebagai filename.php.old ?

Cara-cara begini telah banyak saya saksikan, selain daripada menyerabutkan mata dan kepala ia juga menganggu keyakinan diri (mungkin), kerana anda takut replace fail yang penting. Dengan menggunakan ‘version control’, anda hanya perlu ‘commit’ (lebih kurang macam save) perubahan yang anda lakukan akan direkod sebagai, contohnya, revision 2. Dan jika user tidak mahu feature tersebut, anda hanya perlu ambil fail pada revision 1 untuk kembalikannya pada yang asal sebelum anda melakukan perubahan. DAN JIKA user nak tambah balik, retrieve aje lah revision 2. Tak perlu pening pening kepala, tapi jangan cakap kat user senang untuk membuat perubahan (supaya boleh caj tinggi sikit – jahatnya, hehe).

Paling penting sekali penggunaan VCS (version control system) ni apabila ramai pengaturcara, sekejap si Ahmad nak edit fileX, dalam masa yang sama si Abu pun nak edit. Haaa, macam mana? Sila rujuk topik ‘merging‘ dalam perisian VCS anda.

Perisian yang saya gunakan untuk version control adalah Subversion (SVN) dan pada bahagian client adalah TortoiseSVN. Jika anda menggunakan windows dan ingin memudahkan proses install dan konfigurasi, gunakan VisualSVN. Saya menggunakan Subversion biasa dan apache untuk mengakses repository.

Terdapat beberapa juga jenis VCS yang berpusat (centralized) dan teragih (distributed). SVN adalah centralized. Git adalah distributed. Maklumat lanjut akan dihuraikan dalam post yang akan datang.

Issue Tracking

Dalam pembangunan perisian, gerenti banyak isu atau tugasan (jangan letak dalam kepala, kepala kita ni bukan harddisk sekejap je boleh lupa), anda perlulah menulisnya samada dalam buku nota, Google Notebook, ataupun pada perisian issue tracking.

Perisian yang saya selalu gunakan adalah Mantis BugTracker, walaupun dia tulis situ ‘BugTracker’, ia boleh digunakan untuk kegunaan umum bukan hanya pada ‘bug’. Tak percaya? Hubungilah saya, saya kan menerangkan dengan lebih lanjut. Aplikasi web ini agak rumit untuk difahami secara menyeluruh, anda perlu menggunakannya untuk mengenalinya dengan lebih cepat.

Dengan menggunakan issue tracking ini juga, anda dapat menjejak isu isu agar ianya tidak hilang ditelan zaman (selalu berlaku pada email), ataupun masuk telinga kanan keluar telinga kiri.

Wiki

Anda tahu apa itu wiki? Tak tahu? Jika anda pernah menggunakan wikipedia, maka anda menggunakan wiki tanpa menyedarinya. Saya menggunakan wikipedia pada awal tahun 2004 (atau mungkinkah lebih awal? saya tak berapa ingat). Pada ketika itu, tidak banyak maklumat didalamnya. Setelah beberapa tahun berlalu, ramai orang mencurahkan maklumat kedalamnya dan sedikit demi sedikit ianya disunting untuk memperbaiki kualitinya. Sehinggalah sekarang, ia menjadi rujukan utama apabila seseorang itu berada didepan komputer yang mempunyai internet.

Saya pernah menceritakan kepentingan wiki didalam blog saya bertajuk, Why an internal wiki is important for a growing development team (or an entire company), (fuh, panjang betul tajuk tu) dimana didalam konteks pembangunan perisian, ia dapat digunakan sebagai developer-level documentation. Kebanyakan tempat tidak mempunyai developer-level documentation, dimana ia selalu disanggah seperti “Ah, tak payah la tu, ko baca je komen dalam kod“, “Kod aku tu jelas, terang dan simple, ko tengok je mesti ko paham”, dan pelbagai lagi.

Antara kepentingan wiki (saya terjemah dari blog saya):

• Mempermudahkan ahli baru pasukan merujuk maklumat mengenai projek
• Mengajar bagaimana untuk menyusun maklumat anda dan rakan anda supaya senang difahami (dapat membantu dalam menulis kod yang lebih baik).
• Menggalakkan dokumentasi, dan juga cara berkomunikasi dalam bentuk bertulis.

Jika persekitaran anda masih tidak mempunyai wiki, disarankan untuk mewujudkannya. Selalunya  jika anda memperkenalkan sesuatu yang baru, tentangan (“resisting change”) pasti akan berlaku, dalam keadaan sebegini, cuba menerangkan lagi kebaikan wiki untuk memupuk semangat (ataupun keinginan) untuk memperbaiki cara kerja kearah yang lebih baik. Jika semua gagal, cuba raih sokongan bos ataupun pihak pengurusan supaya menurunkan arahan supaya pengaturcara digalakkan (ataupun diharuskan) sumbang pada wiki (KUKU BESI! WAAARGGH!).

Saya menggunakan mediawiki untuk perisian wiki.

Coding Guideline

Coding guideline selalunya termasuk didalam wiki. Ianya penting dan tak banyak syarikat yang ada. “Coding ni proses kreatif, mana boleh semua kena ikut macam ni”, taik unta, mahu tak mahu satu pasukan kena setuju dengan suatu garis panduan yang dibincangkan terlebih dahulu. Lepas tu semua kena ikut. Dalam IDE, automatically convert tabs to space, satu tab sama dengan 4 space. Gaya curly brace ( { ), samada 1TBS (One True Bracing Style), Allman(BSD style), Whitesmith ataupun GNU.

Saya lebih menggemari gaya BSD
foreach($somearray as $key => $value)
{

}
Berbincang dan bersetuju dengan satu garis panduan, atau paling malas pun ambil mana mana coding guideline dari Zend ke, Drupal ke, ataupun Mozilla.

Harap tips dan huraian ini dapat membantu anda samada didalam kerjaya ataupun hobi.

Selamat programming!