PERANCANGAN DAN PEMBUATAN APLIKASI FORM BUILDER BERBASIS WEB VERSI 2

Mahsa Elvina Rahmawyanet 7410040711 Jurusan Teknik Informatika Politeknik Elektronika Negeri Surabaya Institut Teknologi Sepuluh Nopember Kampus ITS Keputih Sukolilo Surabaya 60111 Telp. 031- 5947280, 031- 5946114, Fax : 031 5946114

ABSTRAK Penggunaan form didalam suatu aplikasi yang berbasis web banyak dibutuhkan untuk menunjang dari sisi fungsionalitas web. Kebutuhan akan suatu form sudah menjadi kewajiban didalam aplikasi berbasis web, karena fungsinya yang memang dibutuhkan diantaranya, sebagai form login suatu member dari web tertentu, form pemesanan dari suatu barang serta form pengisian untuk suatu data. Selama ini, pembuatan suatu form menggunakan format dari HTML baik itu ditulis secara manual maupun menggunakan perangkat lunak yang memang dikembangkan untuk membuat form didalam aplikasi web. Aplikasi form builder ini merupakan suatu aplikasi yang dimudahkan untuk membangun suatu form sesuai dengan tabel yang ada didalam database yang telah dipilih pengguna. Aplikasi ini dibangun dengan menggunakan teknologi web seperti Jquery, Ajax dan Javascript serta menggunakan bahasa pemrograman PHP. Aplikasi form builder ini menghasilkan generate dari tabel dalam bentuk suatu folder yang berisi form, beserta bahasa pemrogramannya. Kata Kunci : form builder, Jquery, Ajax, Javascript, PHP, web

ABSTRACT The use of forms within a web-based applications that are needed to support the functionality of the web. The need for a form has become a liability in the web-based applications, because its function is indeed required of them, as a member of the login form certain web, order form of an item as well as charging for a data form. During this time, making an HTML form using the format of either written manually or using software that was developed to create a form within a web application. The application form builder is an application that are permitted to build a form in accordance with existing tables in a database that has been selected by the user. This application is built using web technologies such as jQuery, Ajax and Javascript and use the PHP programming language. The application form builder generates generated from a table in the form of a folder that contains the form, along with programming languages. Key words : form builder, Jquery, AJAX, Javascript, PHP, web

1. PENDAHULUAN 1.1. Latar Belakang Dengan semakin pesatnya kemajuan teknologi yang semakin canggih setiap harinya, terutama dalam perkembangan suatu aplikasi web dimana untuk saat ini penggunaan web banyak sekali digunakan untuk keperluan masyarakat, baik itu mereka yang mengerti proses pembuatan web maupun mereka yang awam dengan teknologi web yang ada. Didalam penggunaan web itu sendiri, pasti menyediakan atau membutuhkan suatu elemen yang mendukung diantaranya adalah form. Untuk saat ini penggunaan form banyak dibutuhkan untuk segala bidang misalnya form registrasi untuk pendaftaran, form login, form penjualan, dan penggunaan lainnya yang sesuai dengan kebutuhan masing masing pengguna. Karena kebutuhan form yang tinggi dan sisi fungsionalitas serta efisiensi inilah diperlukan adanya suatu aplikasi yang memudahkan didalam pembuatan form secara keseluruhan. Oleh karena itu, proyek akhir ini diharapkan nantinya dapat mempermudah pengguna untuk membuat suatu form untuk aplikasi sesuai dengan database yang telah mereka buat. 1.2. Rumusan Masalah Setelah melihat latar belakang pembuatan form builder ini, permasalahan yang ada didalam pembuatan aplikasi ini diantaranya : a. Bagaimana membuat suatu aplikasi berbasis ajax yang dapat menggenerate form beserta php code maupun disertakan pula ajax javascript-nya, b. Bagaimana nantinya aplikasi form builder mempunyai advance fungsionalitas seperti edit code on the fly, c. Bagaimana membuat lingkungan aplikasi/kerja yang didalamnya mendukung untuk dimasukkan suatu modul yang menggenerate tabel menjadi suatu form dan report. 1.3. Batasan Masalah Melihat dari rumusan masalah yang ada didalam pembuatan aplikasi form builder ini, maka dapat disusun sebagai berikut : a. Aplikasi ini digunakan untuk database yang menggunakan MySQL, b. Aplikasi ini hanya melakukan generate form dan report dari suatu tabel

c. Komponen HTML yang digunakan didalam aplikasi ini, diantaranya : - String, - Password, - Text Area, - Combo Box, - Radio Button, - Date picker, - Date time picker, - Time picker, - Upload d. Type data dari MySQL yang tidak digunakan didalam aplikasi ini, diantaranya : - Serial, - Binary, Varbinary, - Tinyblob, Mediumblob, Blob, Longblob, - Enum, - Set, - Geometry, - Point, Linestring, Polygon, - Multipoint, Multilinestring, Multipolygon, - Geometrycollection 1.4. Tujuan dan Manfaat Tujuan dari proyek akhir yang berjudul Perancangan dan Pembuatan Aplikasi Form Builder ini adalah : a. Merancang dan membuat aplikasi form yang dari segi fungsionalitas dibutuhkan banyak pengguna b. Diharapkan dengan adanya aplikasi form builder ini dapat memberikan kemudahan dalam membuat suatu form dengan efisien dan efektif 2. TINJAUAN PUSTAKA 2.1. PHP PHP (dulu Personal Home Page, sekarang Hypertext Preprocessor) merupakan salah satu bahasa server side yang didesain khusus untuk aplikasi web. PHP merupakan program yang dikembangkan secara bersama oleh para programmer dari seluruh dunia yang menekuni dunia open source. PHP dikembangkan khususnya untukmengakses dan memanipulasi data yang ada di data base sever open source seperti MySQL. Dengan demikian, tingkat kompatibilitasnya terhadap data base server gratis seperti MySQL sangat baik. Kelebihan PHP dari bahasa pemrograman yang lain:

a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya. b. Web Server yang mendukung PHP dapat ditemukan dimana - mana dari mulai apache, IIS, Lighttpd, nginx, hingga Xitami dengan konfigurasi yang relatif mudah. c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis milis dan developer yang siap membantu dalam pengembangan. d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah sistem. 2.2. Konsep Kerja PHP

dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program. Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah case sensitive, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Selain itu, ada beberapa deskripsi dari javascript yang menjadi karateristik dari Javascript : a. Javascript didesain untuk menambah interaktif pada halaman HTML. b. Javascript merupakan bahasa scripting. c. Bahasa script merupakan suatu bahasa pemrograman yang ringan. d. Javascript biasanya disimpan langsung didalam halaman HTML. e. Javascript adalah bahasa interpreter yang berarti script mengeksekusi tanpa kompilasi awal. f. Setiap orang dapat menggunakan javascript tanpa harus membeli lisensi.

Proses kerja dari suatu web dapat dilihat sebagai berikut : 1. Browser mengirimkan HTTP Request ke Web Server 2. Permintaan diterima oleh Web Server 3. Server menterjemahkan kode PHP yang diterima menjadi kode HTML Kode HTML yang diterjemahkan oleh mesin PHP akan dikirimkan pada HTTP Response dan diterima kembali oleh klien. 2.3. Javascript JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau

2.4. AJAX AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut. Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut XMLHttpRequest dengan XMLHttpRequest suatu halaman web dapat direquest dari server dan diterima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. [7] AJAX merupakan kombinasi dari : XHTML (atau HTML) dan CSS untuk bahasa mark up dan tampilan.

 DOM yang diakses dengan client

side scripting language, khususnya implementasi ECMA Script seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus Ajax, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server. XML umumnya digunakan sebagai format untuk pengiriman data, walaupun format lain juga memungkinkan, seperti HTML, plain text, JSON dan EBML. 2.5. Jquery JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut. Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming. JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut. JQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional. 3. PERANCANGAN SISTEM 3.1. Cara Kerja Sistem

Sistem yang ada saat ini untuk membuat suatu form yang digunakan didalam sebuah aplikasi web, biasanya pembuat aplikasi masih melakukan coding dan menghubungkannya terlebih dahulu pada database yang ingin digunakan secara manual. Sehingga, secara otomatis mereka harus mengerti lebih dalam mengenai cara pembuatan suatu form yang akan diaplikasikan pada sebuah web. Selain melakukan coding secara manual, mereka juga harus mendesain form yang akan digunakan sesuai dengan yang ada didalam database dan kebutuhan yang diinginkan. 3.2. Deskripsi Sistem Aplikasi form builder ini merupakan suatu sistem yang digunakan untuk memudahkan pengguna didalam melakukan pembuatan form yang akan diaplikasikan didalam sebuah web. Dimana nantinya pengguna dapat menggunakan aplikasi ini secara user friendly, karena pengguna dapat memilih database yang ingin digunakan dan hasilnya nanti berupa form dan report yang oleh pengguna nantinya dapat dimasukkan kedalam aplikasi web yang dibuat. 3.3. Gambaran Sistem Alur aplikasi form builder ini secara keseluruhan digambarkan melalui gambaran sistem berikut : a. Gambaran sistem secara umum

Dari gambaran diatas dapat dijelaskan alur dari aplikasi form builder ini, mulai dari pemilihan lokasi MySql Server hingga menampilkan hasil form dan report. 1) User memasukkan tempat dimana database disimpan, untuk lokal biasanya ada pada localhost 2) Beberapa database akan ditampilkan 3) User memilih database yang akan digunakan 4) Setelah memilih database, user dapat memilih kolom pada tabel yang akan digenerate 5) Setelah itu, akan masuk didalam aplikasi inti dimana tabel yang telah dipilih akan digenerate menjadi suatu tampilan form dan report 6) Setelah itu hasilnya adalah berupa file zip yang berisi hasil form dan report beserta script yang ada.

3.4. Analisa Sistem Sebelum dilakukan perancangan dan pembuatan aplikasi form builder diperlukan adanya analisa dari sistem yang akan dibuat nantinya untuk mengantisipasi kesulitan apa yang ada didalam proses pembuatan aplikasi ini. Analisa yang dilakukan, diantaranya : a. Melakukan analisa untuk memetakan didalam membuat aplikasi yang sebelumnya dilakukan coding manual secara teknik menjadi aplikasi yang secara detail dapat menyesuaikan dengan kondisi hardcode yang sebenarnya, sehingga diharapkan tujuan awal pembuatan aplikasi ini dimana user dapat seminimal mungkin melakukan coding secara manual dapat terpenuhi b. Melakukan analisa dari alur atau flow process aplikasi mulai dari awal hingga mendapatkan hasil yang diinginkan. Diantaranya konfigurasi server localhost yang nantinya digunakan untuk menampilkan nama nama database. Proses ini dilakukan diawal guna melakukan mapping untuk proses selanjutnya yaitu menampilkan tabel dan kolom yang akan digunakan. c. Analisa komunikasi data, karena menggunakan AJAX didalam aplikasi ini, maka perlu dianalisa sebelumnya mengenai proses komunikasi data. Dalam aplikasi ini menggunakan metode return value string didalam proses komunikasi data, dimana komunikasi ini dilakukan dengan mengirimkan suatu variabel berupa string yang didalamnya berisi data data yang dibutuhkan dan sebagai pemisah didalam variabel tersebut menggunakan tanda pemisah atau yang biasa dikenal dengan tokenisasi string. d. Menganalisa didalam memetakan (mapping) sistem supaya dapat menampilkan secara otomatis type dari kolom yang tampil di aplikasi sama dengan type data yang ada di database.

e. Menganalisa sistem bagaimana supaya didalam aplikasi ini terdapat adanya validate method untuk melakukan pengecekan apakah input yang diberikan sama dengan type data yang ada. 4. Flowchart Alur Sistem

START

Input lokasi server, username dan password database disimpan

untuk mempersingkat waktu pengerjaan mereka. Terutama pada bagian management database dimana selama ini mereka melakukan hardcode secar amanual. 2. Didalam aplikasi form builder ini, juga terdapat 2 fungsi dimana user dapat melakukan edit data secara langsung ataupun di zip terlebih dahulu untuk disatukan didalam project user. Saran yang dapat dilakukan untuk pengembangan aplikasi form builder berbasis web versi 2, ialah : 1. Dapat dilengkapi lagi type data yang digunakan didalam aplikasi, 2. Menambahkan fungsi check box agar dapat dimanfaatkan oleh user jika didalam database tersebut membutuhkan adanya fungsi check box. 6. DAFTAR PUSTAKA [1] Anonim. 2011. AJAX. (Online). (http://indocomunity.blogspot.com/2011/01/jenisjenis-bahasa-pemrograman-dalam.html, diakses 19 Juni 2011) [2] Anonim. AJAX. (Online). (http://www.w3schools.com/ajax/, diakses 19 Juni 2011) [3] Anonim. JavaScript. (Online). (http://www.w3schools.com/js/, diakses 19 Juni 2011) [4] Anonim. JQUERY. (Online). (http://cahyasulianto.wordpress.com/web/jq uery/, diakses 19 Juni 2011) [5] Supono. 2006. Apa Itu Javascript. (Online). (http://supono.wordpress.com/2006/09/05/a pa-itu-javascript/, diakses 19 Juni 2011) [6] Sutarman. 2003. Membangun Aplikasi Web dengan PHP dan MySQL . Graha Ilmu. Yogyakarta [7] Winarno, Idris. Ajax Tutorial. (Online). (http://lecturer.eepisits.edu/~idris/files/aplikasi_web/Ajax%20 Tutorial.ppt, diakses 19 Juni 2011) [8] Widono, Arif. Perancangan dan Pembuatan Form Builder Berbasis Web . 2003 [9] (http://dudu.web.id/2010/11/tutorialmenggunakan-codeigniter-dan-jqgrid/, diakses 4 Agustus 2011)

Memilih database yang digunakan

Memilih tabel yang akan digenerate

Melakukan generate dari tabel yang telah dipilih menjadi form dan report

Hasil generate berupa tampilan preview dan zip yang didalamnya berisi form presentasi, php code, dan ajax Javascript(bersifat optional)

STOP

5.

Kesimpulan dan Saran Setelah dilakukan serangkaian proses perancangan, pembuatan hingga pengujian terhadap sistem aplikasi form builderi yang dibangun maka dapat diambil kesimpulan sebagai berikut : 1. Sistem ini diharapkan dapat membantu sesama developer ataupun user yang lain