Berlatih Ngoding yang Rapi dan Terstruktur

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:

perbandingan kode tanpa indentasi (kiri) dan dengan indentasi (kanan)

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:

merancang daftar menu 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):

membuat daftar menu dengan 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:

membuat daftar menu 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?

===

OK, sekian dulu yang bisa saya share..

CMIIW.. Sekali lagi, ini hanya berdasarkan dari pengalaman saya. Jadi mohon maaf kalo ternyata ada kekurangan, kesalahan ataupun ternyata ada yang lebih baik. Silakan bagi yang mau menambahkan dan berkomentar..

Anyway, semoga bermanfaat deh.. Saya yakin masih ada banyak coder yang masih kurang peduli dengan common mistake seperti ini. Apalagi bagi para mahasiswa informatika yang sedang dikejar deadline, seringkali sudah tidak memperhatikan kerapian source code. Yang penting lulus compile dan programnya jalan (kecuali bagi yang emang udah mendewa dan terbiasa, hahaha). Kalo ini jadi kebiasaan, khawatirnya kebawa juga di dunia kerja.

Karena bagaimana pun, kita tidak boleh sembarangan dalam membuat aplikasi/software untuk suatu perusahaan. Akan sangat tidak profesional jika source code yang dihasilkan sangat berantakan dan sulit dibaca. Hal ini tentu berakibat fatal saat ada developer lain dari perusahaan yang ingin mengembangkan aplikasi tersebut. Jika kodingannya saja semrawut dan dokumentasinya juga asal-asalan, tentu saja sulit untuk melakukan maintenance.

Baik.. Sekian dan terima kasih..

Advertisements

5 comments on “Berlatih Ngoding yang Rapi dan Terstruktur

    • Untuk masalah indentasi dan kerapian memang dapat terselesaikan dengan IDE.
      Namun, untuk membuat kode yang baik dan terstruktur, tentu dibutuhkan kesadaran dan kebiasaan dari pembuat kode.
      Soalnya, IDE hanya memeriksa kebenaran sintaks kode tetapi tidak mempedulikan strukturnya.

  1. Wah bagus banget nih, kadang gue emang gak peduli sama yang beginian. Ternyata penting yah…

    Terima kasih infonya,,sukses selalu 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s