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

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)

adobefw

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)

phpmyadmin

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 IDE - Features

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

firebugs

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

apache friends - xampp

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.

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

Ruang Freelance

Ruang Freelance merupakan wadah para freelancer untuk saling berbagi pengalaman mengenai dunia freelance mereka. Kategori yang dibahas seputar freelance online, money management, paypal, social networking, make money dan banyak lagi. Tapi, kami akan berusaha untuk memberikan yang terbaik disetiap tulisan. Dan, kami juga bukan ahli Bahasa Indonesia, mohon maaf apabila tulisan kami tidak EYD (Ejaan Yang Disempurnakan).

Comments

    • says

      Berat sih relative tp memang netbeans sedikit lebih berat dibanding editor non-java lainnya. Aptana Studio pernah dengar tp belum pernah nyobain. Review auto complete-nya sebagus netbeans ga ya?

      Lupa nulis kalau dulu pas di windows sering make MySQL GUI Tools jg. Cukup powerfull untuk pengaturan database. Thanks

      • says

        untuk auto-complete, Aptana mungkin masih kalah dengan Netbeans, tetapi dokumentasi untuk fungsi native php nya nggak kalah kok sama Netbeans ๐Ÿ˜€

      • says

        Aptana Studio mulai versi tidak akan mendukung PHP secara default. Hanya mendukung dengan plugin Eclipse. Jadi males mencoba karena yg utama buat saya adalah dukungan PHP-nya.

      • says

        Netbeans sekarang (versi 6.7) dah gak seberat versi-versi sebelumnya koq ๐Ÿ™‚

  1. says

    Hampir sama, saya jg pakai Netbeans utk IDE. TextMate utk text editor. Firebug untuk debugging. Selenium untuk testing antar muka.

  2. irawan says

    netbeans emang berat mas,wong saya pake java loadingnya minta ampun deh bt aplikasi java,mungkin kalo dualcore lain x ye..mysql biasanya pake navicat.kl pake eclipse bisa ga ya bt php,soalnya belum pernah coba tuh taunya eclipse bt editor java

    • says

      eclipse untuk php juga ada sih, tp saya belum pernah make soalnya sepertinya kurang populer jd belum tertarik untuk nyobain

    • says

      Eclipse untuk PHP ada, namanya PDT (PHP Development Tools), sama dengan Netbeans berbasis Java. Lumayan bagus, tapi kalo pake framework Code igniter, highlight syntax nya kurang bagus, lebih bagus Netbeans. Tapi kalo php non framework seperti nya OK tuch PDT. Mantab.

      Netbeans berat ? mungkin anda pake yang full (package 302 mb), kan ada yg khusus untuk php (package 26 mb). Saya pake enteng aja, di Linux Mandriva 2009 pake AMD Turion.

      Ada lagi, yg di klaim lebih powerful dari PDT. Zend Studio.

  3. says

    Cuma mau ngasih tambahan aja. Addons Mozilla: Web Developer V.1.1.8 juga sgt powerful dan mdh digunakan.

  4. Boim says

    Klo pake netbeans buat PHP jangan install yang full ato yang ada buat javanya. Soalnya selain berat di memory+CPU, juga berat di bandwidthnya (karena harus donlot gede dan harus install JDK full juga). Gw pake netbeans PHP 6.7.1 di celeron M enteng-enteng aja tuh? (dreamweaver jauh lebih berat). Gw nyoba Aptana 1.5.1, jauh lebih berat daripada netbeans… dah gitu cuman buat HTML+Javascript+CSS (mana PHP nya?? harus install lagi?? cepe deh… netbeans PHP udah support semua itu out of the box). Tapi klo untuk Aptana lebih enaknya karena ada live previewnya untuk dua layout engine (Gecko + trident)

  5. says

    Sebagai tambahan aja, aku pake Aptana Studio sebagai IDE, tapi yg versi 1.5, yg masih ada dukungan PHP dari Aptana… Yang 2.0 udah coba tapi masih kurang sreg… ๐Ÿ™‚ Netbeans bagus ya? Ntar aku coba juga dah… ๐Ÿ™‚

    Untuk editor ringan, Geany juga bagus tuh, auto completenya cukup lengkap.

    Selain browsershot, ada juga netrenderer http://ipinfo.info/netrenderer/ , browsershot kadang terlalu lama nungguin loadingnya dan terbatas (kecuali berbayar), jadi kalo memang cuman butuh cek IE aja netrenderer udah lebih dari cukup (seperti saya). ๐Ÿ™‚

  6. Idian Purnama says

    Mas gmana saya memakai xampp tapi php saya tetep gak bisa di run kata mozilanya gak bisa mesti saya seting apanya lagi ?

    • says

      Yang pasti beda TOOLS :D, salah buat bandingannya. yg bener adalah apa perbedaan Photoshop dengan Fireworks nah banyak jawabannya di google ๐Ÿ˜€

  7. digitalmapia says

    Hmm.. artikel lama ya? untuk database mungkin bisa ditambahkan postgreSQL dan mongoDB, web server nginx, IDE sublime text 2 (berbayar), debuging tools, chrome dev tools… ๐Ÿ˜€

Leave a Reply

Your email address will not be published. Required fields are marked *