Pembuatan Aplikasi Web

Posted by Muhamad Yudha


Jika sebuah pertanyaan diajukan pada Anda, “apakah yang sudah tidak baru lagi, tetapi tetap hangat?”. Salah satu jawaban yang sangat tepat adalah: Internet. Dunia maya memang sudah cukup lama dikenal, tetapi pembicaraan seputar internet terasa tidak ada habis-habisnya. Termasuk didalamnya adalah topik aplikasi web.

Sejak teknologi jaringan dikenal, penggunaan jaringan semakin dipergunakan secara luas. Terutama di kota-kota besar, saat ini sudah cukup sulit menemukan kantor tanpa jaringan komputer. Bahkan tetangga rumah Anda pun kemungkinan memiliki jaringan komputer.

Hal ini diimbangi dengan perkembangan aplikasi. Jika dulu Anda harus bermain game tetris bersama rekan Anda dengan menggunakan satu komputer, kini Anda dapat melihat game center menyediakan layanan bermain game bersama melalui komputer masing-masing (walaupun kecil kemungkinan mereka sedang bermain game tetris).

Demikian pula bagi Anda yang berkecimpung dalam pembangunan aplikasi. Membangun aplikasi jaringan yang memungkinkan multi-user atau sentralisasi database sudah menjadi permintaan customer yang sudah tidak dapat ditawar lagi.

Client-server

Seiring perkembangan jaringan, istilah aplikasi client-server mulai sering terdengar. Client-server merupakan suatu arsitektur jaringan dimana membedakan sisi client dengan sisi server. Aplikasi pada client umumnya ditampilkan dengan GUI (Graphical User Interface) dan mengirimkan request pada server atau aplikasi server.

Terdapat banyak variasi dari server, misalnya file server, terminal server, atau mail server. Masing-masing dengan keperluan yang berbeda-beda, tetapi tetap menggunakan basis arsitektur yang sama.

Saat sedang mengakses sebuah situs berita di internet, web browser yang Anda gunakan merupakan aplikasi client. Sementara database yang menyimpan berita beserta aplikasi yang terdapat pada URL yang Anda ketikkan merupakan server.

Saat Anda melakukan request sebuah berita tertentu, aplikasi pada server akan mencari informasi yang diperlukan didalam database, mengolahnya kedalam halaman web, dan mengirimkannya kembali pada web browser untuk Anda.

Aplikasi yang menggunakan web browser sebagai aplikasi client pada jaringan intranet atau internet, dinamakan dengan web aplikasi. Tentu saja Anda dapat membuat sendiri software desktop untuk client dengan pertimbangan-pertimbangan tertentu, tetapi Anda juga harus melakukan instalasi software tersebut pada setiap client.

Selain itu, software client Anda kemungkinan memerlukan spesifikasi komputer yang relatif lebih tinggi dibandingkan kebutuhan sebuah web browser.

Walaupun demikian, web browser yang menggunakan script HTML (HyperText Markup Language) tradisional tentu tidak dapat menampilkan fitur-fitur selengkap software desktop yang terinstalasi.

Dokumen yang ditampilkan dengan HTML bersifat statik, artinya sekali tampil pada web browser, dokumen tersebut tidak akan berubah hingga dilakukan request ulang. Walaupun hal ini diatasi dengan Dynamic HTML yang dikembangkan setelahnya, tetapi masih cukup banyak keterbatasan dibandingkan aplikasi desktop yang juga terus berkembang.

Diluar kekurangan dan kelebihan yang dimiliki, penggunaan web aplikasi perlu dipertimbangkan sebagai salah satu solusi yang menjanjikan.

HTML dan DHTML

Seperti telah disebutkan, informasi pada web browser ditampilkan dengan format HTML. Dimana HTML menampilkan header, paragraf, daftar dan seterusnya secara struktural. HTML terdiri dari entitas-entitas:

1. Element.
Element HTML membentuk suatu content dengan format tampilan tertentu. Misalnya pada perintah <> Judul < /H2 >. <> merupakan element pembuka dimana kata-kata yang terdapat didalamnya akan ditampilkan dengan format header. < /H2 > menandakan penutup element. Perintah-perintah seperti <> disebut dengan tag HTML.

2. Attribute.
Attribute merupakan pengaturan lebih lanjut terhadap element, contoh: < align=””left””>. Dimana align=left merupakan sebuah attribute yang menunjukkan posisi pengaturan teks secara rata kiri. Attribute dapat memiliki banyak nilai, misalnya align=center, align=left dan lain sebagainya.

3. Data Type.
HTML juga menyediakan beberapa tipe data, seperti data script dan style sheet, dan bermacam-macam tipe untuk nilai attribute. Termasuk didalamnya adalah ID, name, language, color, date and time, dan seterusnya.

4. Character References.
Merupakan kumpulan karakter yang merepresentasikan suatu karakter tertentu, sebagai contoh karakter “é” dapat ditulis dengan character reference “é”.

Bukan dunia teknologi namanya kalau tidak berkembang cepat, demikian juga dengan HTML yang dikembangkan lebih lanjut dengan Dynamic HTML atau DHTML, yang memiliki fitur-fitur tambahan yang didukung sejak Microsoft Internet Explorer versi 4.0.

Dengan DHTML, Anda dapat menambahkan lebih banyak kosmetika user interface pada dokumen HTML. Keunggulannya DHTML adalah tidak memberatkan server dan lalu lintas jaringan.

Beberapa fitur dan efek yang Anda dapatkan dengan penggunaan DHTML antara lain adalah:

1. Menyembunyikan teks dan gambar.
2. Animasi teks dan gambar.
3. Menciptakan form yang dapat merespon langsung terhadap data user.
4. Menciptakan otomatis refresh pada isi halaman.

DHTML menciptakan efek-efek diatas dengan melakukan modifikasi terhadap dokumen yang aktif, secara otomatis melakukan format ulang dan menampilkannya lagi. Dimana server tidak perlu menghasilkan isi dokumen yang baru karena dokumen tersebut tidak perlu dipanggil ulang pada browser.

DHTML menggunakan style dan script untuk melakukan proses dari apa yang diinput oleh user, kemudian memanipulasi elemen HTML, attribute, style dan teks didalam dokumen tersebut.

Elemen, attribute dan style pada DHTML dibaca dari spesifikasi HTML dan Cascading Style Sheet (CSS).

CSS

Cascading Style Sheet (CSS) merupakan sebuah standard yang dikembangkan oleh World Wide Web Consortium (W3C). CSS mengijinkan developer web untuk mendefinisikan font, margin dan line spacing didalam bagian-bagian yang berbeda dari dokumen HTML.

Lebih signifikan, CSS mengijinkan isi dokumen tampil pada posisi absolut dengan mendefinisikan koordinat x dan y. Bahkan mengijinkan fasilitas overlapping pada elemen yang berbeda dengan menentukan z-order.

CSS mendefinisikan style untuk isi seluruh dokumen. Sebuah style merupakan suatu grup property yang mendefinisikan bagaimana sebuah elemen HTML akan ditampilkan didalam dokumen.

Dengan CSS, Anda juga dapat membuat style yang Anda ciptakan dikelompokkan dan diasosiasikan untuk bagian yang spesifik saja. Contohnya untuk sebuah style yang ingin digunakan pada sebuah elemen dokumen, maka elemen tersebut harus didalam sebuah tag HTML, misalnya <>. Didalam tag tersebut terdapat sebuah attribute khusus yang mendefinisikan sebuah style CSS.

Sintaks penulisan CSS berbeda dengan penulisan pada HTML. Pada CSS, masing-masing property dan nilainya dipisahkan dengan sebuah karakter titik dua. Contohnya perintah “position:relative”. Sementara pada masing-masing kesatuan property dan nilai dipisahkan dengan karakter titik koma. Contoh: < style=””position:relative;”>.

Untuk menggunakan sebuah style pada sebuah element, Anda dapat menggunakan inline style.

Saat Anda mengelompokkan bermacam-macam style diantara tag <>, Anda telah menciptakan sebuah style sheet. Dengan menggunakan style dan style sheet, Anda dapat mengubah tampilan dan format elemen dokumen dengan cepat tanpa menambah atau menghapus elemen yang bersangkutan.

Script-based Programming

Anda dapat memanipulasi lebih jauh dokumen yang ingin Anda tampilkan dengan menggunakan script-based programming, yang mengijinkan Anda mengubah inline style pada masing-masing elemen dan mengubah aturan style pada CSS.

Script-based programming dapat ditulis dengan menggunakan VBScript, JScript, atau JavaScript. Script-based programming memiliki akses pada setiap property dari style CSS melalui Component Object Model (COM).

Konsep Object Model pada DHTML membuat tag HTML dan atribut CSS dapat diprogram secara keseluruhan. Ini berarti Anda dapat menampilkan efek sebuah link dapat berubah ketika pointer mouse bergerak melaluinya, atau sebuah teks dapat berubah ukuran ketika dipilih, atau sebuah elemen dapat berpindah posisi saat di-klik.

Mungkin Anda terbiasa menggunakan bahasa pemrograman visual seperti Visual Basic, dimana masing-masing obyek harus memiliki apa yang disebut event handler. Kontradiksi dengan ini, obyek pada DHTML dapat menggunakan event handler secara bersama (share event handler).

Ketika sebuah event terjadi pada anak dari sebuah obyek, maka event tersebut dapat naik keatas secara hirarkis pada halaman tersebut hingga menemukan sebuah event handler untuk diproses. Hal ini dikenal dengan istilah event bubbling.

Hirarki ditentukan oleh posisi element pada HTML, yang dijelaskan pada gambar berikut.

Pada contoh gambar, elemen hyperlink merupakan anak dari elemen table, dimana elemen table merupakan anak dari elemen body, dan seterusnya. Pada level tertinggi adalah obyek dokumen, dimana memuat halaman HTML.

Ketika sebuah event pada hyperlink terjadi, maka akan dilakukan pencarian event handler pada table, kemudian dilanjutkan pada body, kemudian pada HTML, dan akhirnya pada dokumen obyek. Pencarian event akan berhenti pada saat ditemukan sebuah event handler.

Keuntungan dari event bubbling ini adalah mengurangi penulisan kode program. Sebagai contoh, lebih mudah menulis sebuah procedure event click pada form dibandingkan menuliskan procedure tersebut pada masing-masing elemen form seperti check box, text box dan seterusnya.

Ketika sebuah check box dipilih, maka event akan naik menuju form untuk melakukan suatu proses yang diinginkan.

Database

Salah satu kekurangan dari bahasa script dan pemrograman client-side seperti HTML, DHTML, CSS dan JavaScript adalah tidak dapat mengakses database. Sementara jika Anda membangun aplikasi web seperti Shopping Cart pada internet ataupun General Ledger untuk lingkungan intranet, tentunya keberadaan database merupakan sesuatu yang mutlak.

Database pada aplikasi web diletakkan pada server tertentu, untuk aplikasi berskala besar, sangat mungkin memiliki lebih dari satu server database. Database yang sering digunakan adalah MySQL, Microsoft SQL Server, Oracle, PostgreSQL dan lain sebagainya.

Web Programming Language

Jika pada aplikasi desktop Anda dapat menggunakan bahasa pemrograman Visual Basic, Visual C++, Delphi dan lain sebagainya, pada aplikasi web Anda juga memerlukan sebuah bahasa pemrograman.

Bahasa pemrograman pada web berfungsi untuk menghasilkan halaman web yang dinamis, dinamis tidak hanya dari sisi tampilan, tetapi juga isi halaman yang diambil dari database.

Karena itu, bahasa pemrograman web bersifat server-side, dimana lokasi dan pengolahannya dilakukan pada sisi server. Terdapat cukup banyak bahasa pemrograman web yang handal untuk membuat aplikasi web.

Practical Extraction and Report Language

Dikenal dengan singkatan Perl, merupakan bahasa pemrograman yang pada awalnya digunakan untuk manipulasi teks, kemudian berkembang menjadi bahasa pemrograman yang banyak digunakan untuk sistem administrasi, pemrograman jaringan, pengembangan GUI (Graphical User Interface), dan pembuatan aplikasi web.

Penulisan sintaks Perl mirip dengan bahasa C, hal ini tidak mengherankan karena keseluruhan stuktur Perl diturunkan dari bahasa C. Perl juga mendukung Object Oriented Programming (OOP) ataupun pemrograman procedural. Perl memiliki banyak modul build-in untuk pemrosesan teks, dan memiliki banyak modul third-party.

Perl merupakan software free, dengan lisensi dari Artistic License dan GNU General Public License. Perl tersedia pada kebanyakan sistem operasi, antara lain Unix, Linux, FreeBSD, Mac OS X dan Microsoft Windows.

Pada Perl 5, interface database diimplementasikan dengan Perl DBI modules. DBI merupakan singkatan dari Database Interface, yang menyediakan modul pemrosesan database untuk Perl. Sementara modul DBD:: (Database Driver) menangani driver untuk pengaksesan database yang berbeda-beda.

Tidak perlu heran jika Anda membeli buku Perl dengan gambar seekor unta. Karena unta merupakan simbol dari Perl.

Active Server Pages

Active Server Pages (ASP) merupakan bahasa pemrograman web yang diperkenalkan oleh Microsoft yang dipasarkan sebagai add-on bersama Internet Information Services (IIS).

Programming dengan menggunakan ASP relatif cukup mudah, terutama dengan adanya obyek yang sudah build-in. Misalnya obyek Application, ASPError, Request, Response, Server dan Session.

ASP mencapai versi 3.0, kemudian dilanjutkan dengan ASP.NET yang merupakan bagian dari platform Microsoft .NET yang telah mencapai ASP.NET versi 2.0.

Bagi Anda yang telah terbiasa menggunakan bahasa pemrograman Visual Basic, akan lebih mudah mempelajari dan menggunakan ASP.

PHP

Hypertext Preprocessor atau lebih dikenal dengan PHP, merupakan bahasa pemrograman web yang open source, yang awalnya didisain sebagai sebuah kumpulan kecil script Perl. PHP umumnya didistribusikan bersama dengan Linux, Apache dan MySQL.

PHP berjalan pada hampir semua web server populer dan tersedia dengan platform sistem operasi yang berbeda-beda. Karena fleksibilitas ini maka PHP terinstalasi secara luas, lebih dari 18 juta domain internet pada saat ini menempati hosting pada server yang dilengkapi dengan PHP.

Terdapat aplikasi PHP yang terkenal dan banyak digunakan seperti phpBB, Joomla, WordPress dan MediaWiki.

ColdFusion

ColdFusion pada awalnya merupakan produk dari Allaire, yang kemudian dibeli oleh Macromedia, dan melakukan merger dengan Adobe Systems.

ColdFusion menyediakan cukup banyak service yang memiliki nilai tambah, diantaranya:

1. Konversi dari HTML ke PDF.
2. Validasi form pada client-side termasuk fitur rich form dengan menggunakan Flash.
3. GUI Widgets seperti datagrid dan date picker.
4. Query database pada platform independen melaluli ODBC atau JDBC.
5. Pengambilan data dari sistem enterprise seperti Active Directory, LDAP, POP, HTTP dan FTP.

Sintaks penulisan ColdFusion terbilang unik dan berbeda dengan bahasa pemrograman tradisional seperti bahasa C. Sayangnya ColdFusion bukanlah open source, bahkan relatif mahal jika dibandingkan dengan kompetitornya.

Saat ini ColdFusion terus dikembangkan dan akan mencapai versi 8 dengan kode “Scorpio” yang akan dirilis pada akhir tahun 2006 atau awal tahun 2007.

JavaServer Pages

JavaServer Pages dikenal dengan singkatan JSP. Dari namanya sudah bisa ditebak bahwa JSP merupakan teknologi dari Java. Sintaks JSP menambahkan tag XML yang disebut dengan JSP actions, yang digunakan sebagai fungsi build-in.

JSP di compile pada Java Servlet oleh sebuah JSP Compiler. Baik JSP dan servlet awalnya dikembangkan oleh Sun Microsystems. Dimulai dari JSP versi 1.2, pengembangan JSP dilakukan oleh Java Community Process.

JSP dapat dipecah menjadi:

1. Data statik, misalnya HTML.
2. JSP directives, misalnya include directive.
3. JSP scripting.
4. JSP actions.
5. Custom tags.

Web Server

Sebuah web server bagaikan sebuah rumah bagi kumpulan file-file aplikasi web. Anda harus meletakkan file-file aplikasi Anda pada web server agar dapat diakses oleh client. Web server bertanggung jawab untuk menerima request melalui HTTP dari web browser pada client.

Web server mengimplementasikan fitur-fitur:

1. Konfigurasi terhadap fitur-fitur yang tersedia.
2. Otentifikasi username dan password sebelum diijinkan menggunakan beberapa atau keseluruhan resource.
3. Dapat menangani dynamic content dengan mendukung satu atau lebih interface seperti SSI, CGI, PHP, ASP, ASP.NET dan lain-lain.
4. Menyediakan support modul.
5. Mendukung HTTPS (oleh SSL atau TLS) untuk koneksi yang aman dan terenkripsi melalui port standard 443, selain menggunakan port 80 yang biasa digunakan oleh HTTP.
6. Content compression, untuk keperluan mengurangi ukuran response.
7. Virtual Host, untuk mendukung banyak web dengan menggunakan satu alamat IP.
8. Large file support, untuk dapat menangani file dengan ukuran lebih dari 2 GB pada sistem operasi 32 bit.
9. Bandwith throttling, untuk membatasi kecepatan response agar tidak memenuhi lalu lintas jaringan dan dapat menangani lebih banyak client.

Sebuah web server harus mendefinisikan batas koneksi client, karena per-alamat IP hanya dapat menangani sejumlah koneksi dari client secara bersamaan. Umumnya berkisar dari 2 hingga 60.000, dimana secara default berkisar antara 500 hingga 1.000.

Web server hanya dapat menangani sekian request setiap detiknya tergantung dari:

1. Konfigurasi.
2. Tipe request HTTP.
3. Content (statik atau dinamis).
4. Kondisi content merupakan cache atau tidak.
5. Keterbatasan hardware dan software dari sistem operasi yang digunakan.

Pada web server dapat terjadi overload jika terlalu banyak terjadi web traffic, misalnya saat ribuan atau bahkan jutaan client mengakses web secara bersamaan atau pada interval waktu yang singkat.

Cara ini kadang dipergunakan sebagai sebuah trik oleh oknum yang tidak bertanggung-jawab yang memang berniat membuat down sebuah web server. Selain itu juga dapat terjadi serangan DDoS (Distributed Denial of Service).

Untuk mengantisipasi overload, web server dapat menggunakan teknik-teknik seperti:

1. Menggunakan web cache sebagai penampung.
2. Menggunakan nama domain yang berbeda (sub domain).
3. Menggunakan lebih dari satu web server per-komputer, dimana masing-masing memiliki network card dan alamat IP.
4. menggunakan lebih drai satu web server yang dikelompokkan sehingga berperan sebagai satu web server yang besar.
5. Menambahkan hardware pendukung, misalnya RAM.
6. Melakukan tuning pada parameter sistem operasi untuk penggunaan dan kemampuan hardware.
7. Menggunakan program web server yang lebih efisien.
8. Menggunakan metode workaround yang lain.

Apache HTTP Server

Merupakan web server open source untuk sistem Unix/Linux, Microsoft Windows, Novell NetWare dan lain-lain. Apache merupakan web server paling populer yang digunakan saat ini. Apache dikembangkan oleh komunitas developer dibawah naungan Apache Software Foundation.

Pesan kesalahan yang dapat dikonfigurasi, otentifikasi database DBMS-based dan Content negotiation merupakan beberapa fitur-fitur yang terdapat pada Apache.

Internet Information Services

Dikenal dengan singkatan IIS, merupakan produk Microsoft dan web server kedua terpopuler setelah Apache HTTP Server. Termasuk didalam IIS adalah FTP, SMTP, NNP, dan HTTP/HTTPS.

Versi-versi awal IIS sering diserang oleh hacker, tetapi Microsoft terus memperbaiki lubang-lubang keamanannya. IIS versi 7.0 akan disertakan pada Windows Vista dan Windows Server Longhorn.

Sun Java System Web Server

Merupakan web server yang didisain untuk aplikasi bisnis skala medium dan besar. Tersedia untuk sistem operasi yang berbeda-beda, Java System Web Server mendukung JSP dan teknologi Java Servlet, ASP, PHP, CGI, dan ColdFusion.

ASP didukung melalui Sun Java System Active Server Pages yang merupakan satu paket dengan Java System Web Server.

Bagaimana Untuk Memulai

Masih terdapat cukup banyak database, bahasa pemrograman dan web server yang dapat digunakan dengan masing-masing kelebihan dan kekurangannya. Baik ditawarkan secara komersial ataupun open source.

Dengan banyaknya pilihan, mungkin menimbulkan pertanyaan, darimana harus mulai untuk membuat aplikasi web? Sistematika yang umum adalah dengan mengikuti pembahasan pada artikel ini, yang intisarinya adalah:

1. Pengenalan kemampuan client-side menampilkan dokumen HTML pada web browser.
2. Mengenal penggunaan script seperti JavaScript dan VBScript sebagai pendukung dokumen pada sisi client.
3. Setelah mengenali sisi client, saatnya Anda mengenali sisi server. Dimulai dengan penggunaan database, dimana manipulasi query akan diperlukan untuk mengeluarkan hasil yang diinginkan pada web browser.
4. Mengenal bahasa pemrograman web yang disesuaikan dengan beberapa aspek seperti latar belakang programming dan minat Anda. Misalnya jika Anda telah memiliki latar belakang programming pada C, Anda dapat memulainya dengan Perl atau PHP. Jika Anda memiliki latar belakang Visual Basic, mempelajari ASP bukan merupakan hal yang sulit.
5. Pengenalan web server.

Kini saatnya Anda melangkah untuk mewujudkan aplikasi web idaman Anda. Selamat berkarya!

Sumber: Majalah PC Media edisi 10/2006

3 Tanggapan

  1. nyimax dulu gan😉

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: