Pada kerja praktek yang telah saya jalani, tugas saya adalah membuat sistem informasi berbasis web menggunakan PHP. Nah, dari pengalaman KP tersebut, saya telah belajar dan berlatih beberapa hal tentang pembuatan source code yang ‘sedikit lebih rapi’, dalam hal ini menggunakan bahasa HTML dan PHP.
OK, langsung saja.. berikut ini 5 dari sekian banyak ‘teknik ngoding rapi dan terstruktur’ yang saya coba terapkan berdasarkan dari kesalahan-kesalahan yang pernah saya lakukan:

Indentasi

Kalo yang ini, hampir seluruh programmer pasti udah terbiasa lah yaa.. Dari awal diajarin, pasti udah ditekankan bahwa indentasi itu penting biar kode mudah dibaca. Contohnya adalah sebagai berikut:
Terlihat bahwa kode yang gak pake indentasi (kiri) terlihat membingungkan, tidak jelas mana tag penutup dari suatu tag yang ada. Sedangkan yang kanan terlihat lebih bagus dan terstruktur, sehingga jelas susunan DOMnya, dan mudah terdeteksi saat ada kesalahan.

Berikan Komentar yang Jelas

Ya, ini juga sangat jelas manfaatnya. Dengan adanya komentar, kode menjadi mudah dipahami. Karena seringkali, programmer menggunakan sintaks dan algoritma yang rumit dan aneh-aneh, sehingga cuma dia sendiri yang paham. Untuk itu, perlu diberi penjelasan berupa komentar agar tidak membingungkan orang yang ingin mengembangkannya.

Gunakan si ‘echo’ Seperlunya

Untuk ‘mengirim’ suatu string dari PHP untuk ditampilkan di HTML, tentu saja menggunakan fungsi echo. Dulu saya sering menggunakan kode semacam ini dan ini:

Namun, saya pikir kode tersebut kurang bagus karena terdapat banyak elemen HTML di dalam string yang di-echo. Sehingga tag-tag yang ada tidak dianggap sebagai tag HTML, tetapi dianggap sebagai string biasa. Hal ini tentu saja dapat mempersulit proses debugging. Untuk itu, menurut saya lebih cocok menggunakan cara seperti ini:

Jadi intinya, apa yang bisa dituliskan sebagai kode HTML ‘murni’, tampilkan dalam HTML (di luar PHP). Terutama jika terdiri dari beberapa baris dan tidak mengandung variabel di PHP. Dengan begitu, saat ada kesalahan sintaks di HTML tersebut, tetap dapat terdeteksi oleh editor. Sedangkan jika di-echo dalam bentuk string, editor tidak dapat mendeteksi jika ada kesalahan sintaks.

Bikin Daftar Menu Pake List

Dalam suatu website, biasanya terdapat daftar menu untuk navigasi ke halaman-halaman lain, contoh sederhananya adalah tampilannya seperti ini:

Terdapat berbagai metode dalam membuat daftar menu, di antaranya:
Dengan tabel:
Cara ini yang dulu saya pake pas masih gak kenal apa itu HTML dan CSS, jadi cuma ngasal bikin web pake template di Dreamweaver jadul, dan ternyata daftar menunya dibikin pake tabel.
Kelebihan: tanpa pake style/CSS pun sudah bagus dan rapi posisinya.
Kelemahan: sulit diganti antara bentuk menu vertikal dan horizontal
Dengan Container (misalnya div):
Terlihat bahwa satu link menu ditaruh di dalam satu tag <div> sehingga nantinya daftar menu akan terbagi-bagi secara alami menjadi beberapa blok menu.
Kelebihan: bisa diatur posisi dan desainnya dengan CSS
Kelemahan: tidak lazim konsepnya, kurang cocok jika menunya bertingkat (ada submenu)
Dengan List:
Hampir semua website yang ada saat ini menggunakan list seperti contoh di atas dalam menyajikan daftar menu. Karena memang paling sesuai dan mudah ‘dimanipulasi’ sesuai kebutuhan.
Kelebihan: terstruktur, dapat digunakan untuk menu bertingkat
Kelemahan: kalo gak ada style/CSS nya, jadi terlihat aneh karena berupa list
Oleh karena itu, menurut saya membuat daftar menu dengan list is the best lah. Selanjutnya tinggal mengatur nama class/id untuk tagnya, dan membuat desain yang bagus dengan CSS.

Bikin Struktur Tabel yang ‘Baik’

Dulu, saya kira tag-tag untuk membuat tabel di HTML hanyalah <table>, <tr>, dan <td>. Selanjutnya saya belajar bahwa ada tag <th> untuk field header agar desainnya dapat dibedakan di CSS. Dan untuk membuat tabel yang lebih ‘sempurna’, dapat pula menggunakan tag <thead>, <tbody>, dan <tfoot> untuk memastikan header tabel selalu di atas dan footer selalu di bawah.
Lalu, kita juga tidak bisa sembarangan menyisipkan tag lain di sela-sela tabel. Misalnya perhatikan contoh penyisipan form di tabel dalam susunan kode berikut:
Pada contoh pertama, keseluruhan tabel dijadikan form. Hal ini bisa dilakukan, dan banyak digunakan dalam berbagai hal.
Pada contoh kedua, form dibuat untuk sebuah sel di tabel. Hal ini juga bisa dilakukan. Misal form untuk mengubah isi tabel.
Namun, untuk contoh ketiga. Terlihat bahwa kita mencoba membuat form untuk suatu baris di tabel. Awalnya saya pikir ini berhasil, tetapi ternyata TIDAK BISA DILAKUKAN!! Soalnya tag <form> ini memisahkan tag <table> dengan <tr>. Makanya, pas KP kemaren saya sempat pusing mikirin gimana caranya membuat suatu form di masing-masing baris tabel. Ada ide ?

Sekian post dari saya semoga bermanfaat..:D