Tools untuk pengembangan web

Tools atau peralatan dalam mengembangkan aplikasi merupakan bagian penting karena akan sangat membantu dan mempersingkat proses pengembagan. Tools atau peralatan yang dimaksud disini adalah perangkat lunak yang atau software digunakan dalam proses pengembangan website. Pemilihan tools yang tepat tentu memberi keuntungan bagi developer karena selain menghemat waktu dan tenaga tentu klien juga akan lebih puas karena proyek bisa beres lebih cepat. Untuk itu tulisan ini akan mengulas tools yang digunakan dalam proses pengembangan dari design hingga implementasi.

Alat Desain

Alat Desain – Tools untuk pengembangan web – shopback.co.id

Pada tahap perancangan mengenai bagaimana website akan dibuat biasanya termasuk perancangan tampilan, dan struktur database. Perancangan disini tidak termasuk perancangan bisnis proses atau fungsi dari website tersebut karena biasanya bisnis proses saya cuma menggunakan kertas dan menulis alur atau proses dari fungsi website tersebut.

Perancangan tampilan dengan Adobe Firework (komersil)

Perancangan tampilan biasanya saya menggunakan Adobe Firework dibandingkan menggunakan Adobe Photoshop. Kenapa? karena Adobe Firework memiliki tampilan dan tools yang memang disiapkan untuk prototyping tampilan website. Tersedianya komponen seperti input box, drop down, check list, dan komponen form web lainnya memudahkan kita untuk membuat prototype halaman website. Selain itu Adobe Firework juga memilki akses cepat ke filter dan efek Photoshop yang lazim digunakan pada grafis web seperti gradient dan shadow. Dan yang paling penting adalah kemudahan memotong atau slicing pada Adobe Firework membuat kita dapat dengan cepat mengubah hasil rancangan tampilan dari grafik menjadi HTML.

Perancangan Database

PhpMyAdmin (gratis) dan Sequel Pro (gratis)

Biasanya untuk aplikasi web yang tinggal implementasi seperti WordPress tidak memerlukan perancangan database. Tapi untuk aplikasi web yang dibangun dari awal akan memerlukan perancangan tabel-tabel yang diperlukan pada database. Biasanya saya menulis di kertas tabel dan kolom apa saja yang diperlukan dalam aplikasi web saya. Setelah itu baru dibuat tabelnya pada database. Pada pembuatan saya biasanya menggunakan Sequel Pro namun aplikasi ini hanya tersedia di platform Mac. Tampilannya yang sederhana membuat saya lebih cepat membuat tabel-tabel yang diperlukan yang sebelumnya telah dirancang sebelumnya.

Selain itu Sequel Pro juga melakukan perubahan langsung pada database tanpa menekan tombol save atau semacamnya. Jadi perubahan yang anda lakukan pada database akan berdampak langsung pada database sehingga bisa mempersingkat waktu. Namun bila anda bekerja di platform lain selain Mac anda bisa juga menggunakan PhpMyAdmin yang biasanya sudah di paket dengan aplikasi web server untuk pengembangan. Bila tidak anda bisa dengan mudah mendownload dan memasangnya pada web server anda. Fitur PhpMyAdmin yang lengkap dan powerfull membuat anda dengan mudah melakukan sebagian besar fungsi database dengan aplikasi ini. Terkadang saya juga menggunakan PhpMyAdmin karena adanya keterbatasan pada Sequel Pro.

Penulisan kode program

NetBeans PHP (gratis), NotePad++ (gratis), dan Smultron (gratis)

Untuk penulisan  kode program saya menggunakan IDE(Integreted Development Environtment) NetBeans yang tersedia gratis di semua platform. Aplikasi berbasis Java ini menurut saya sangat powerfull untuk pengembangan aplikasi PHP. Setelah mencoba beberapa IDE lainnya saya tidak bisa menemukan ada yang bisa mengalahkan NetBeans dari sisi fungsionalitas. Karena berbasis Java dan bukan aplikasi native Mac maka tentu dari segi tampilan masih kalah dari aplikasi Mac seperti Coda atau Espresso. Namun fitur auto complete-nya yang sangat powerfull benar-benar mempersingkat penulisan kode program. Dengan mudah anda dapat meng-import framework apa saja yang anda gunakan  dan NetBeans akan membuat auto complete fungsi-fungsi yang tersedia pada framework tersebut secara otomatis. Namun terkadang bila saya hanya perlu melakukan perubahan kecil pada satu file maka biasanya saya menggunakan code editor ringan seperti Smultron (pada Mac) atau Notepad++( dulu pada saat saya masih menggunakan Windows). Kedua code editor ini cukup cepat membuka file yang diperlukan tanpa meload semua komponen seperti NetBeans.

Testing dan Client Debugging

Firebug pada Firefox(gratis), dan BrowserShots(gratis)

Setelah aplikasi web selesai saatnya melakukan pengujian yang dimaksud disini adalah pengujian tampilan dan interaksi. Untuk pengujian fungsi biasanya saya langsung mencobanya dan melihat secara langsung apakah hasilnya sesuai dengan yang diinginkan. Pada pengujian tampilan biasanya saya cukup menggunakan Firefox dilengkapi dengan add on Firebug. Firebug merupakan add on untuk melakukan client debugging pada website baik pada CSS ataupun Javascript. Dengan Firebug maka kita dapat dengan mudah melihat kode css yang berefek langsung pada tampilan dan mana yang tidak. Dengan mudah kita dapat melakukan perubahan pada HTML dan CSS yang langsung berefek langsung pada tampilan web tanpa perlu direfresh. Selain itu kita dengan mudah melakukan debugging pada kode Javascript misalnya melihat input ouput dari fungsi AJAX pada aplikasi kita atau apakah ada kode yang error pada saat kode Javascript dieksekusi. Setelah memastikan semuanya berjalan baik pada tahapan akhir saya melakukan pengujian tampilan untuk memastikan website terlihat baik di semua tipe browser. Dengan aplikasi online di http://browsershots.org/ maka kita dapat melihat hasil screenshot dari website kita pada beragam tipe browser. Aplikasi ini mengijinkan kita memilih pada browser apa saja website kita ingin diuji. Hasilnya kita dapat dilihat dalam beberapa menit kemudian tanpa perlu menginstall beragam browser di komputer.

Implementasi website pada webserver

MAMP (gratis), dan XAMPP (gratis)

Untuk menjalankan aplikasi website kita memerlukan web server. Pada platform Mac kita dapat menggunakan versi komunitas dari MAMP untuk pengembangan. MAMP merupakan paketan dari web server Apache, PHP, dan database MySQL. Sedangkan untuk paketan yang sama pada Windows anda dapat menggunakan XAMPP. Fungsi keduanya sama yaitu menyediakan webs server yang dengan mudah diinstall pada komputer anda tanpa perlukan melakukan instalasi satu persatu komponen dari web server. Dengan demikian anda dapat memastikan aplikasi web anda berjalan dengan baik sebelum melakukan implementasi pada server online anda di internet.

Baca juga :

• 12 Langkah Menjadi Web Developer
• 5 Tips Perubahan Website Yang Mampu Mendongkrak Penjualan

Itulah beberapa tools atau perangkat lunak yang saya gunakan dalam pengembangan aplikasi web sehari-hari. Terlepas dari aplikasi komersil atau gratis, aplikasi diatas telah membuat proses pengembangan aplikasi web bagi saya menjadi lebih cepat dan mudah. Bagaimana dengan anda? Mungkin anda mau berbagi tools atau perangkat yang anda gunakan dalam pekerjaan anda sehari-hari

Tags: produktifitas, tips, tools, web