Sembang Programming - Sembangan mengenai pengaturcaraan

Post kali ini agak pendek, hanya untuk mencatatkan sesuatu tentang jQuery iaitu cara untuk reset borang. Reset borang adalah antara elemen-elemen yang dimasukkan kedalam borang (selain input validation, input constraint, etc) tetapi ianya bukanlah mandatori, bergantung pada jenis borang.

Jika tak kena cara, menambakah serabut dan rimas pada pengguna. Dibawah adalah contoh kod javascript yang menggunakan library jQuery.

$('#reset_button').click(function(){
  $(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
})

Tetapi terdapat kelemahan didalam cara diatas dimana jika sesuatu elemen mempunyai nilai lalai (default value), ianya akan dipadamkan sekali. Dibawah adalah contoh input yang mempunyai nilai lalai.

Maka cara terbaik adalah menggunakan function reset dimana nilai untuk elemen akan dikembalikan kepada nilai yang berada didalam attribute ‘value’.

$('#reset_button').click(function(){
   $('#myform')[0].reset();
})

Tips: Jika anda menggunakan cara yang kedua (iaitu menggunakan function reset()), elakkan daripada mengguna ‘reset’ sebagai ID elemen anda. Nanti tak jadi!

Selamat programming!

Sumber:

• Reset form with jQuery
• Form reset retain default value

Terdapat sebuah borang (didalam bentuk Word) yang diberikan pada saya dimana ia perlu ditukar kedalam bentuk borang html. Salah satu ruangan (input field) yang perlu di penuhkan oleh pengguna adalah tarikh dan masa.

Contoh terbaik yang saya ingat adalah Google Calendar seperti berikut

Saya terjumpa timepicker yang agak ringkas yang hampir serupa dengan google calendar timepicker.

Untuk datepicker pula saya menggunakan jQuery datepicker tersebut.

Dengan menggabungkan kedua-dua plugin tersebut, ianya kelihatan sama seperti google calendar’s datetime picker.

Walaupun ianya adalah 2 ruangan yang berbeza (date start, time start), pada bahagian pemprosesannya (backend) saya menyambungkannya kepada satu string dalam bentuk timestamp. Mudah untuk digunakan dan dimanipulasi.

Contoh borang yang ditunjukkan disini kelihatan agak ringkas tetapi memerlukan 3 table untuk menyimpan data-datanya. Tetapi ianya memerlukan post yang baru untuk menunjukkan keseluruhan antara muka borang tersebut dan pemprosesan disebalik tabir.

Maka, setakat ini sahaja. Selamat Programming!

Perisian apa yang anda gunakan untuk menghasilkan screenshot? Saya menggunakan hoversnap untuk mengambil screenshot harian, tetapi menggunakan plugin khas untuk membuat screenshot laman web.

Ini kerana hoversnap tidak dapat mengambil keseluruhan isi kandungan laman web tersebut. Setakat yang hujung sahaja, kalau content bawah kena scroll dan ambil semula.

Mungkin anda menggunakan perisian lain, tetapi bagi tugasan sebegini, saya menggunakan Screengrab!, plugin firefox. Kelemahannya, ambil screenshot pada firefox sahaja.

Berikut adalah contoh screenshot yang diambil..

Berikut adalah cara untuk format table supaya mempunya ‘zebra stripe‘. Sesetengah orang kata, bantuan yang diberikan oleh zebra stripe ni hanyalah mitos dalam meningkatkan keboleh bacaan data dalam bentuk jadual (tabular). Data daripada kajian (Zebra Stripes: Does it really help?) yang dijalankan oleh Jessica Enders di A List Apart menyatakan yang ianya membantu. Pada diri saya, ia membantu, entahlah, lain orang lain cara dibantu.

Berikut adalah cara saya menggunakannya dalam bentuk javascript.

$(document).ready(function(){
  $("table tbody tr:nth-child(odd)").addClass("odd");
})

Dimana ia akan memasukkan class ‘odd’ kedalam baris yang ganjil dan formatkan dalam bentuk berikut:

tr.odd{ background-color: #C3D9FF; }

Edit: Terlupa nak beritahu, anda memerlukan jquery.

Memandangkan saya banyak menggunakan Perl/CGI sejak kebelakangan ni, post ni adalah berkaitan dengan perl/cgi.

Terdapat pengaturcara yang memandang ringan aspek sekuriti dalam perisian (kebanyakannya tak tahu, ignorance is bliss, no?) dan mengabaikannya sehinggalah suatu hari dimana perisian tersebut perlu menembusi pasaran yang lebih besar dan perlu melalui proses “penetration testing” (singkatan pen test) yang akan merungkaikan segala kelemahan yang telah diabaikan selama ini didalam pembangunan perisian tersebut.

Apabila terjadi begitu, maka bermulalah operasi menampal perisian daripada lubang-lubang sekuriti tersebut. Bagi kebanyakan input daripada pengguna dalam Perl/CGI, menggunakan “placeholder” adalah mencukupi untuk menyimpannya dengan selamat dalam pangkalan data (database) mengelakkan daripada SQL Injection. Rujuk article di perlmonks untuk penerangan lanjut, Preventing SQL injection attacks: Placeholders are enough for MySQL, Postgresql and SQLite.

Apa bendakah itu “placeholder”?
Placeholder adalah nilai yang digunakan untuk menggantikan sesuatu nilai yang lain.

Berikut adalah contoh penggunaan placeholder.

$sth = $dbh->prepare( "SELECT name WHERE city = ? AND state = ?" );
$sth->execute( $city, $state );

Dengan menggunakan placeholder, modul DBI akan secara automatik menguruskan isu-isu “quoting” (escape single/double quote, e.g. \”) didalam nilai yang dihantar kepada pangkalan data.

Kekurangan “placeholder”
Walaupun semua jenis input selamat dimasukkan kedalam database dengan menggunakan placeholder tanpa mengakibatkan SQL Injection, ia masih perlu diperiksa kesahihannya. Anda masih perlu untuk mengesahkan (validate) input yang dimasukkan samada ianya integer, numeric, alpha, alphanumeric, dsbnya.
Jika input tersebut adalah berbentuk HTML, tukarkan semua character ke dalam HTML Entities, untuk mengelakkan daripada kes-kes XSS (Cross-site Scripting). Jika tiada HTML dibenarkan, gunakan HTML::Scrubber untuk sental semua html daripada input tersebut.

Berikut adalah contoh untuk menukarkan character-character ke bentuk HTML Entity

use HTML::Entities;
sub html_to_db{
    my ($html) = @_;
	$html = encode_entities($html);
	$html =~ s/\r\n//gs;
	return $html;
}

Marilah kita sama sama belajar mempertahankan diri daripada anasir-anasir yang tak diingini apabila membangunkan perisian.

Selamat programming!

Terdapat pertandingan yang akan diadakan oleh Kerajaan Malaysia sempena MyGOSSCON 2009 (Malaysian Government Open Source Software Conference).

Keterangan lanjut boleh didapati pada laman web acara tersebut.

Nampak macam menarik, tetapi jika saya memasuki pertandingan tersebut, aplikasi yang dibina rasanya tidak secanggih mana, kerana saya akan banyak fokus pada kebolehgunaan. Benda yang remeh-remeh seperti menu bantuan (help), tooltip, on-the-fly editable content (dengan menggunakan ajax), penerangan penggunaan aplikasi dan juga dokumentasi (yang memadai untuk pengguna).

Dengan kata lain, bergantung pada skop aplikasi web yang hendak dibangunkan, aplikasi yang dibangunkan dapat dijual setelah berlalu 24 jam pertandingan tersebut. Saya tidak tahu bagaimana pemarkahan akan diberi (ada tak info pada laman web mereka? Rasanya tiada), tetapi itulah yang akan saya lakukan. Sehaluan dengan matlamat pertandingan tersebut:

• Promote high level open source web application development skills in Malaysia.
• Enable local OSS web application development communities to grow and establish themselves.
• Encourage students to get involve in open source web application development and be well prepared for industry need.

Rekabentuk dan Kebolehgunaan, bagi yang keliru, dalam bahasa inggeris ianya adalah Design and Usability. Pos ini hanyalah coretan mengenai rekabentuk dan kebolehgunaan pada aplikasi-aplikasi web.

Gambar yang terakhir banyak dilihat pada web aplikasi kerajaan. Seboleh-boleh nak sumbat semua benda, dan kadang-kadang pengaturcara terpaksa akur pada permintaan pengguna (ye lah, tak akur nanti tak nak sign UAT, hehe). Antara cara yang boleh dilakukan adalah menerangkan secara rasional dan saintifik tentang keputusan yang diambil dan impak daripada permintaan pengguna dengan harapan dapat memberi pilihan yang lebih baik daripada kehendaknya dan juga dapat meyakinkan pengguna akan keputusan dan kepakaran perekabentuk sistem.

Satu kes terpencil yang saya jumpa adalah pada waktu saya membuat demonstrasi aplikasi pada sebuah GLC. Ketua Pegawai Eksekutifnya (seorang ekspatriat UK) meminta supaya aplikasi tersebut mempunyai ciri-ciri yang digunapakai oleh Google (rujuk pada Google Apps). Minimalist pada antaramuka tapi kaya dengan fungsi disebalik tabir walaupun pada pendapat saya aplikasi yang saya demo itu agak bagus antaramukanya.

Motifnya adalah untuk mengurangkan click untuk melaksanakan sesuatu objektif kerana majoriti pelanggannya adalah ahli perniagaan, direktor dan orang-orang korporat. Saya amat memahami kehendaknya dan seringkali hendak mengutarakan dalam pembangunan aplikasi web di tempat saya bekerja tetapi tidak berkesampaian kerana selalunya kesuntukan masa (dan kekurangan orang).

Saya memang gemar minimalisme, tetapi bukan semua tempat boleh digunakan dan kadangkala agak sukar meyakinkan orang. Kerana ianya seperti lapang, tiada apa apa, seboleh-bolehnya orang nak sumbat sesuatu di setiap pelosok ruang pada antaramuka tersebut.

Contoh terdekat minimalisme yang boleh saya berikan adalah pada aplikasi yang saya siapkan baru baru ini (bukan untuk GLC yang saya ceritakan diatas).
(more…)

Disini saya akan post mengenai sesuatu lebih teknikal. Anda pernah menggunakan jQuery? Jika tak, maka anda perlu mencubanya

Apabila kita nak sesuatu fungsi dalam javascript dilaksanakan apabila web telah dimuat turun, kita akan menggunakan samada $(document).ready ataupun $(window).load. Jadi apakah perbezaannya?

$(document).ready(function(){
  // kod disini
})

Fungsi didalam $(document).ready dilaksanakan apabila Document Object Model (DOM) siap sedia digunakan, dengan erti kata lain, apabila semua element HTML (semua isi kandungan didalam ) telahpun dimuat turun.

$(window).load(function(){
 // kod disini
})

Manakala fungsi didalam $(window).load dilaksanakan apabila kesemua element DOM dan juga imej-imej telahpun dimuat turun.

Jadi jika anda hendak mengubahsuai imej-imej (crop, resize, alignment, dsbnya) anda perlu menggunakan $(window).load. Jika anda hendak membuat skrin preload untuk aplikasi web anda, maka perlu menggunakan $(document).load. Guna dua-dua pun tidak mengapa, satu untuk preload dan satu lagi untuk manipulasi imej.

Itu saja setakat ini, selamat programming!

Sumber

• Daily Tip : Difference between $(document).ready and $(window).load in jQuery

Antara video kegemaran saya. Video ‘time-lapse‘ yang menunjukkan proses rekabentuk / pembangunan laman web. Musiknya juga amat menenangkan.

Web Design in 2 Minutes

Saya ada merekod beberapa video ditempat kerja saya sebelum ni dalam membangunkan perisian untuk institusi pendidikan swasta. Malangnya video-video tersebut hilang entah ke mana.