IMPLEMENTASI AJAX PADA SISTEM KRS ONLINE

IMPLEMENTASI AJAX PADA SISTEM KRS ONLINE SKRIPSI

  Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Sains (S.Si)

  Program Studi Ilmu Komputer Oleh :

  Kadek Diyeni Rosita NIM : 033124035

PROGRAM STUDI ILMU KOMPUTER JURUSAN MATEMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA YOGYAKARTA 2007

THE IMPLEMENTATION OF AJAX ON STUDENT ENROLLMENT SYSTEM THESIS

  Presented as Partial Fulfillment of the Requirements For the Degree of Sarjana Sains in Computer Science

  By : Kadek Diyeni Rosita

  Student Number : 033124035

COMPUTER SCIENCE DEPARTMENT OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY YOGYAKARTA 2007

  PERSEMBAHAN

  

If by accident you step into the mud, it is not therefore necessary to keep on

walking in the muddy path

  Karya ini kupersembahkan untuk Bapak P.Dana, alm. yang tersayang

  Semua orang yang berarti dalam hidupku

PERNYATAAN KEASLIAN KARYA

  Saya menyatakan dengan sesungguhnya bahwa skripsi yang saya tulis ini tidak memuat karya atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar pustaka, sebagaimana layaknya karya ilmiah.

  Yogyakarta, 23 Oktober 2007 Penulis Kadek Diyeni Rosita

IMPLEMENTASI AJAX PADA SISTEM KRS ONLINE

  

Kadek Diyeni Rosita

ABSTRAK

  Aplikasi berbasis web semakin berkembang seiring dengan semakin banyaknya orang yang mengakses internet baik untuk mencari informasi, berbelanja dan melakukan hal-hal yang lain. Tantangan yang dihadapi selama ini adalah membuat aplikasi berbasis web yang responsif serta dapat menampilkan informasi yang selalu terupdate tanpa harus malekukan refresh pada halaman web. Dalam skripsi ini, penulis membuat sebuah sistem yaitu Sistem KRS yang dapat menampilkan perubahan jumlah mahasiswa yang terdaftar di sebuah kelas tanpa harus melakukan proses refresh. Pembuatan sistem tersebut menggunakan teknologi AJAX (Asynchronus JavaScript and XML). Dengan menggunakan AJAX, browser pengguna dapat berkomunikasi secara terus-menerus denagn server, sehingga browser dapat menampilkan informasi terbaru dari server tanpa harus merequest satu halaman penuh. AJAX memungkinkan tampilan aplikasi berbasis web terlihat responsif, selalu terupdate dan tidak memerlukan waktu loading yang lama sehingga pengguna akan merasa lebih nyaman menggunakannya.

  Sistem telah berhasil dibangun dan dapat disimpulkan bahwa dengan menggunakan teknologi AJAX, pengguna tidah perlu melakukan refresh pada halaman web untuk mendapatkan informasi yang uptodate mengenai jumlah mahasiswa yang terdaftar di sebuah kelas.

  

THE IMPLEMENTATION OF AJAX ON STUDENT

ENROLLMENT SYSTEM

Kadek Diyeni Rosita

ABSTRAK

  Web-based application nowdays has been highly improving along with the needs of people ti plug into faster internet access, not only for searching latest information, shopping but also carrying out other activities. When dialing with those kinds of people’s needs, the ultimate challenges hereby emerges in form of demand to create a responsive web-based application. This application intends to display update information without refreshing the web page.

  In this thesis writing, the writer develops a Student Enrollment System, without refreshing the web page, users can get the uptodate number of students enrolled in a particular class. The system is developed using AJAX (Asynchronus JavaScript and XML) technology. By implementing this technology, users browser will able to communicate with server continuously. Moreover, the browser is also able to display the latest information before requesting one full page. AJAX offers a possibility to access a more responsive web-based application display. It will not take too much loading time so that users will be more convenient.

  The system has been successfully developed. It can be concluded that by implementing AJAX, users do not need to refresh the web page in order to get uptodate information about number of students enrolled in a particular class.

KATA PENGANTAR

  Puji syukur ke hadirat Ida Sang Hyang Widhi yang telah melimpahkan rahmat dan kasih-Nya sehingga penulis dapat menyelesaikan skripsi dengan judul

  “Implementasi Ajax Pada Sistem KRS Online”.

  Skripsi ini disusun sebagai salah satu syarat untuk memperoleh gelar Sarjana Sains (S.Si) Program Studi Ilmu Komputer di Fakultas Sains dan Teknologi Universitas Sanata Dharma Yogyakarta.

  Dalam penulisan skripsi penulis menyadari banyak pihak yang telah memberikan sumbangan baik pikiran, waktu, tenaga, bimbingan dan dorongan pada penulis sehingga akhirnya skripsi ini dapat selesai. Oleh karena itu dengan segala kerendahan hati penulis menyampaikan ucapan terima kasih yang sebesar- besarnya kepada :

  1. Bapak Drs. Hj. Haris Sriwindono, M.Kom. selaku dosen pembimbing akademik, sekaligus dosen pembimbing skripsi yang telah memberikan bimbingan, arahan, dan petunjuk selama penulisan skripsi.

  2. Ibu Anastasia Rita Widiarti, S.Si., M.Kom. selaku dosen penguji yang telah memberikan bimbingan, masukan, saran, dan kritik yang membangun untuk skripsi ini.

  3. Bapak St. Eko Hari Parmadi, S.Si., M.Kom selaku dosen penguji yang telah memberikan, masukan, saran dan kritik yang membangun untuk skripsi ini.

  4. Romo Gregorius Heliarko selaku Dekan Fakultas Sains dan Teknologi.

  5. Ibu P.H. Prima Rosa, M.Sc.selaku Kepala Program Studi Ilmu Komputer atas kesabaran dan bimbingannya.

  6. Seluruh dosen pengajar Program Studi Ilmu Komputer Universitas Sanata Dharma yang telah membimbing penulis selama kuliah, dan seluruh karyawan terkait atas bantuan yang diberikan untuk kelancaran penyelesaian skripsi.

  7. Bapak, Ibu, Pak Mang, Mektut dan seluruh keluarga besar terimakasih atas dukungan dan semua pengorbanannya.

  8. Mbo’ Onik, semoga kasih sayang dan kebersamaan kita akan selalu ada.

  9. Wishnu semua dukungan, pengorbanan dan bantuanmu sangat berarti bagiku.

  10. Bombom atas semua bantuan yang tidak akan pernah aku lupakan.

  11. Sahabat-sahabatku tercinta Vitri, Anjar, Clara, Vika dan Rey atas bantuan, semangat dan kerjasamanya “You are my best friend”.

  12. QQ, thanks atas pinjaman komputernya selama pembuatan skripsi.

  13. Teman-teman Humas yang tidak dapat penulis sebutkan satu persatu 14. Teman-teman kos dero 28, kebersamaan kita selama ini begitu indah.

  Penulis menyadari bahwa skripsi ini masih banyak kekurangan dan jauh dari kesempurnaan, sehingga segala kritik dan saran yang bersifat membangun sangat penulis harapkan demi perbaikan skripsi ini. Akhirnya dengan segala kekurangan yang ada, penulis berharap agar skripsi ini masih dapat diambil manfaatnya.

  Yogyakarta, 23 Oktober 2007 Penulis

  

DAFTAR ISI

HALAMAN JUDUL ........................................................................................

  HALAMAN PERSETUJUAN PEMBIMBING .............................................. HALAMAN PENGESAHAN .......................................................................... HALAMAN PERSEMBAHAN ....................................................................... PERNYATAAN KEASLIAN KARYA ........................................................... ABSTRAK .......................................................................................................

  ABSTRACT ......................................................................................................

  KATA PENGANTAR ...................................................................................... DAFTAR ISI .................................................................................................... DAFTAR TABEL ............................................................................................ DAFTAR GAMBAR .......................................................................................

  BAB I PENDAHULUAN ............................................................................... A. Latar Belakang ............................................................................... B. Rumusan Masalah .......................................................................... C. Batasan Masalah ............................................................................. D. Tujuan............................................................................................. E. Metode ............................................................................................ F. Sistematika Penulisan ..................................................................... BAB II DASAR TEORI ................................................................................... A. Arsitektur Web Client/Server......................................................... i ii iii iv v vi vii viii x xiii xiv

  1

  1

  3

  3

  4

  4

  5

  7

  7

  B. Relational Database( MySQL) .......................................................

  8 C. Web Server ( Apache) ...................................................................

  11 D. PHP ...............................................................................................

  11 E. JavaScript .....................................................................................

  13 F. Extensible Markup Language (XML) ..........................................

  15 1. Dokumen XML.......................................................................

  16 2. Document Type Definition ( DTD )........................................

  21 G. CSS................................................................................................

  23 H. Document Object Model ( DOM ).................................................

  24 I. JavaScript dan DOM......................................................................

  27 1. Node dan List node..................................................................

  28 2. Fungsi untuk Pengaksesan sebuah Node.................................

  29 J. AJAX Sebagai Kombinasi Beberapa Teknologi...........................

  30 K. XMLHttpRequest Object...............................................................

  32 BAB III PERANCANGAN SISTEM.............................................................

  38 A. Data Flow Diagram.......................................................................

  38 1. Diagram Konteks ( DFD Level 0 )...................................

  38 2. DFD Level 1 sisi Mahasiswa............................................

  39 3. DFD Level 1 sisi Kaprodi.................................................

  40 B. Use Case Diagram........................................................................

  40 1. Use Case sisi Mahasiswa..................................................

  40 2. Use case sisi Kaprodi .......................................................

  41 C. Perancangan Basis Data.................................................................

  41

  1. Diagram ER.....................................................................

  41 2. Penjabaran Tabel..............................................................

  42 3. Domain Costraint..............................................................

  43 D. Perancangan Input Output.............................................................

  45 1. Halaman Utama Mahasiswa.............................................

  45 2. Halaman Utama Kaprodi .................................................

  48 BAB IV IMPLEMENTASI , PEMBAHASAN DAN ANALISIS PROGRAM.....................................................................................

  49 A. Implementasi................................................................................

  49 B. Pembahasan Program...................................................................

  55 C. Analisis Pengiriman Data dari Server.........................................

  62 BAB V KESIMPULAN DAN SARAN ........................................................

  66 A. Kesimpulan ..................................................................................

  66 B. Saran ............................................................................................

  66 DAFTAR PUSTAKA

  

DAFTAR TABEL

Tabel 2.1 Entity References...............................................................................

Tabel 2.2 XMLHttpRequest Object Properties.................................................Tabel 2.3 XMLHttpRequest Object Method.....................................................Tabel 2.4 Status Server Properties....................................................................Tabel 3.1 Domain Constraint............................................................................

  22

  35

  36

  37

  44

  

DAFTAR GAMBAR

Gambar 2.1 Arsitektur Model Client / server ..................................................

  45

  32

  38

  39

  40

  40

  41

  42

  46

  26

  46

  47

  47

  48

  49

  50

  51

  31

  7

Gambar 2.2 Pembentukan Pohon DOM...........................................................Gambar 3.6 Diagram ER .................................................................................Gambar 2.3 Perbandingan cara kerja Web Klasik dan A jax ............................Gambar 2.4 Perbandingan Transfer Data.........................................................Gambar 3.1 Diagram Konteks.........................................................................Gambar 3.2 DFD level 1 sisi Mahasiswa.........................................................Gambar 3.3 DFD level 1 sisi Kaprodi.............................................................Gambar 3.4 Use Case sisi Mahasiswa..............................................................Gambar 3.5 Use Case sisi Kaprodi..................................................................Gambar 3.7 Halaman Utama Mahasiswa..........................................................Gambar 4.4 Layer Jadwal................................................................................Gambar 3.8 Layer Login...................................................................................Gambar 3.9 Layer Matakuliah yang ditawarkan.............................................Gambar 3.10 Layer Matakuliah yang diambil.................................................Gambar 3.11 Layer Jadwal ..............................................................................Gambar 3.12 Halaman Utama Kaprodi ............................................................Gambar 4.1 Tampilan Awal.............................................................................Gambar 4.2 Tampilan Utama Mahasiswa........................................................Gambar 4.3 Layer Matakuliah Yang Ditawarkan............................................

  51

Gambar 4.5 Layer Matakuliah Yang Diambil.................................................Gambar 4.6 Matakuliah Tabrakan…………………………………………… Gambar 4.7 Tampilan Awal Kaprodi................................................................Gambar 4.8 Layer Data matakuliah..................................................................Gambar 4.9 Proses Sistem KRS........................................................................

  52

  53

  54

  54

  65

BAB I PENDAHULUAN A. Latar Belakang Masalah Web yang sedang berkembang saat ini adalah Web 1.0, dimana

  responsifitas aplikasi berbasis web bergantung pada proses loading dan

  reloading halaman. Misalnya ketika mengakses berita di sebuah situs, pengguna harus melakukan reload seluruh content dari halaman situs itu.

  Ini termasuk banner iklan-iklan yang cukup memberatkan. Hal yang sama juga terjadi saat user ingin melakukan login, jika terjadi kesalahan user

  nam e atau passwordnya, maka server harus mengirimkan satu halaman

  penuh untuk menampilkan pesan kesalahan tersebut, dan user harus menunggu cukup lama untuk meload satu halaman yang berisi pesan kesalahan mengenai user name atau password yang telah diinputkannya. Pada aplikasi dekstop, user dapat melihat langsung hasil dari apa yang dilakukan tanpa perlu menunggu program menampilkan kembali seluruh halaman baru. Tetapi, interaksi semacam itu tidak dapat dilakukan pada aplikasi berbasis web. Pada aplikasi bebasis web, user harus menginputkan data pada form yang telah disediakan, mengklik sebuah tombol link, lalu menunggu browser meload sebuah halaman baru, dan sebagian besar isi dari halaman baru tersebut sama dengan halaman sebelumnya, seperti background , logo, banner, iklan dan yang lainnya.

  Banyak yang menyebut era berikutnya dari Internet sebagai Web 2.0 atau sering disebut web generasi kedua. Dalam era ini, aplikasi berbasis web sudah mencapai tingkat responsifitas yang lebih tinggi dari Web 1.0. Web 2.0 memiliki beberapa kelebihan dibandingkan dengan Web 1.0, contohnya untuk mengakses berita di sebuah situs, pengguna tidak perlu melakukan reload seluruh halaman. Browser hanya perlu mengambil 'informasi yang diinginkan' dan menambahkannya pada halaman yang sudah ada. Begitu juga saat user melakukan login, jika terjadi kesalahan

  

user name atau password, server dapat mengirimkan pesan kesalahan

  kepada user kedalam halaman yang sedang terbuka tanpa melakukan proses refresh / reload.

  AJAX adalah sebuah teknologi yang dapat digunakan untuk membuat aplikasi-aplikasi yang diterapkan pada Web 2.0. Ini disebabkan dengan menggunakan teknologi AJAX, browser client dapat berkomunikasi secara terus menerus untuk merequest informasi terbaru dari server dan menampilkannya di browser client tanpa melakukan proses refresh /

  

reload. Tetapi AJAX tidak merequest seluruh content dari sebuah halaman

  web, karena itu akan sangat memberatkan server bila ada banyak client yang mengakses server tersebut. Ajax hanya merequest beberapa bagian dari halaman web yang nilainya sering berubah, misalnya jumlah inbox pada email. AJAX juga dapat menampilkan pesan yang dikirimkan oleh

  

server ke halaman web yang sedang terbuka, seperti halnya menyisipkan

  sebuah layer. Maka dengan adanya teknologi AJAX, tidak akan ada lagi istilah world wide wait Pada kesempatan kali ini, penulis akan mengimplementasikan teknologi AJAX pada sistem krs online. Dimana dalam sistem krs, mahasiswa membutuhkan data yang benar dan dinamis, misalnya untuk mengetahui jumlah mahasiswa yang terdaftar di sebuah kelas.

B. Rumusan Masalah

  Apakah teknologi AJAX dapat digunakan untuk membangun suatu aplikasi yang bisa menampilkan data secara dinamis di browser client tanpa harus melakukan proses refresh/reload ? C.

   Batasan Masalah

  Penulis membatasi permasalahan yang akan dibahas dengan batasan sebagai berikut:

  1. Tidak terdapat fasilitas cekal untuk mahasiswa yang belum melakukan kewajiban yang telah ditetapkan sebagai syarat utuk melakukan krs.

  2. Sistem tidak dapat membatasi jumlah sks yang diambil oleh mahasiswa.

  3. Sistem tidak menyimpan transkrip nilai dari matakuliah yang sudah diambil oleh mahasiswa.

  D. Tujuan Penelitian

  Membuat sistem krs dengan mengimplementasikan teknologi AJAX, sehingga browser client dapat berkomunikasi secara Asynchronous dengan server dan menampilkan data secara dinamis tanpa perlu melakukan proses reload / refresh.

  E. Metode dan Teknik Penelitian

  Pembuatan skripsi ini akan menggunakan dua metode, yaitu Studi pustaka dan perancangan prototyping. Studi pustaka adalah pencarian informasi mengenai dasar ilmu yang terkait melalui buku, majalah, internet dan sumber tertulis lainnya. Dalam perancangan prototyping, langkah-langkah yang dilakukan adalah :

  1. Rekayasa Sistem Pada tahap ini yang dilalakukan adalah pengumpulan kebutuhan dari semua elemen sistem dan perencanaan sistem.

  2. Analisis Sistem Tahap mengerti dan memahami secara mendalam pada domain informasi, fungsi dan prosedur yang dibutuhkan.

  3. Perancangan Merupakan langah multiproses yang memusatkan kerja pada struktur data, arsitektur perangkat lunak dan karakteristik user interface

  4. Impelementasi Menterjemahkan hasil rancangan program dengan menggunakan bahasa perograman.

  5. Pengujian Dilakukan untuk mengetahui tercapai atau tidaknya sistem yang yang diinginkan serta untuk mengetahui kesalahan yang mungkin terjadi.

F. Sistematika Penulisan

  BAB I : PENDAHULUAN Dalam pendahuluan akan berisi latar belakang masalah, rumusan masalah, batasan masalah, metode dan teknik penelitian, tujuan penelitan dan sistematika penulisan.

  BAB II : LANDASAN TEORI Pada bab ini akan dibahas tentang berbagai landasan teori yang digunakan ataupun yang berkaitan dengan pembuatan skripsi ini. . BAB III: PERANCANGAN SISTEM Dalam rancangan sistem akan dibahas mengenai tahap-tahap perancangan sistem, alur kerja sistem, rancangan database,

  hardware dan software.

  BAB IV: IMPLEMENTASI , PEMBAHASAN DAN ANALISIS PROGRAM Pada bab ini berisi hasil – hasil penelitan baik itu berupa gambar (capture) maupun source code dari program. Disini juga akan diberikan beberapa keterangan maupun pembahasan mengenai program atau gambar.

  BAB V : KESIMPULAN DAN SARAN Dalam ini akan berisi kesimpulan dan hasil penelitian yang dilakukan serta memberikan saran untuk pengembangan lebih lanjut tentang sistem yang dibuat.

BAB II LANDASAN TEORI A. Arsitektur Web Client/Server Client/Server dapat diartikan sebagai kemampuan komputer untuk

  meminta layanan request data kepada komputer lain. Komputer yang meminta layanan disebut sebagai client, sedangkan yang menyediakan layanan disebut sebagai server. Pengertian lain, client melakukan permintaan suatu informasi atau mengirim perintah ke server. Server akan menerima permintaan dan perintah client. Kemudian server akan memproses berdasarkan permintaan tersebut, dan mengembalikan kepada

  client sebagai hasil pemrosesan yang sudah dilakukan. Model client/server

  dapat digambarkan sebagai berikut

Gambar 2.1 Arsitektur Model Client/Server Bagian Client dan Server berupa komputer yang terhubungan dalam jaringan baik lokal maupun Internet. Service Request adalah permintaan dari client baik berupa permintaan data maupun perintah ke server. Service

  Response berupa balasan dari server

  Atas permintaan dari client berupa hasil proses. Data yang diminta oleh

  client dapat diambil dari database pada sisi server yang sering disebut database server

  , seperi misalnya MySQL, PostgreSQL, Oracle, atau SQL Server [Budi Susanto, 2003].

  Beberapa keunggulan konsep client/server adalah: 1) Menyediakan layanan yang lebih baik untuk jaringan yang terdistribusi pada berbagai lokasi yang berbeda.

  2) Tidak memerlukan keseragaman sistem operasi antara komputer

  client dan server.

  3) Jumlah maksimal client yang dapat mengakses server tidak terbatas.

B. Relational Database ( MySQL )

  MySQL ( My Structured Query Language ) Atau yang sering dibaca “Mai- se-kuel” adalah Relational Database Management System (RDBMS) yang didistribusikan secara gratis di wilayah lisensi GPL (General Public

  Licence

  ). Di mana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat closed source MySQL dikembangkan oleh sebuah perusahaan Swedia bernama MySQL AB, yang pada saat itu bernama TcX DataKonsult AB. Tujuannya adalah untuk mengembangkan aplikasi Web untuk client TcX yang merupakan perusahaan pengembang software dan konsultan database. MySQL sudah digunakan oleh banyak perusahaan untuk menangani transaksi bisnis atau mengelola data keuangan.

  MySQL sebenarnya produk yang berjalan pada flatform linux. Karena sifatnya yang open source, dia dapat dijalankan pada semua flatform baik windows maupun Linux. Selain itu, MySQL juga merupakan program pengakses database yang bersifat jaringan sehingga dapat digunakan untuk aplikasi Multi User ( Banyak Pengguna ). Sebagai sebuah program penghasil database, MySQL tidak dapatberjalan sendiri tanpa adanya sebuah sebuah aplikasi lain ( interface ). My SQL dapat didukung oleh hampir semua program aplikasi baik yang open

  

source seperti PHP maupun yang tidak, yang ada pada flatform Windows

seperti Visual Basic, Delphi, dan lainnya.

  MySQL merupakan turunan salah satu konsep utama dalam database sejak lama, yaitu SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan/seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. MySQL termasuk jenis RDBMS (Relational Database Management

  System

  ). Sehingga istilah seperti tabel, baris, dan kolom tetap digunakan dalam MySQL. Pada MySQL sebuah database mengandung satu atau beberapa tabel, tabel terdiri dari sejumlah baris dan kolom. Dalam konteks bahasa SQL, pada umumnya informasi tersimpan dalam tabel-tabel yang secara logic merupakan struktur dua dimensi yang terdiri atas baris-baris data (row atau record) yang berada dalam satu atau lebih kolom (column). Baris pada tabel sering disebut instance dari data sedangkan kolom sering disebut sebagai attributes atau field [Didik Dwi Prasetyo, 2003].

  Beberapa hal yang membuat MySQL banyak digunakan antara lain:  Portablility maksudnya dapat berjalan pada berbagai sistem operasi seperti Window, Linux Mac OS X dan lainnya.

   Open source maksudnya dapat digunakan secara gratis tanpa dipungut biaya.

   Multiuser maksudnya dapat digunakan oleh beberapa user dalam waktu yang bersamaan.

   Performance tuning maksudnya cepat dalam menangani query sederhana, atau dapat memproses lebih banyak SQL per satuan waktu.

   Security maksudnya memiliki beberapa lapisan keamanan seperti ijin akses user dengan perijinan yang mendetail dan password yang

  C. Web Server ( Apache ) Web server adalah sebuah bentuk server yang khusus digunakan untuk

  menyimpan halaman website atau home page. Komputer dapat dikatakan sebagai web server jika komputer tersebut memiliki suatu program server yang disebut Personal web server (PWS). PWS ini difungsikan agar halaman web yang ada di dalam sebuah komputer server dapat dipanggil oleh komputer lain. Beberapa contoh Web Server adalah Apache, Xitami,

  IIS, dan PWS. Dalam pembuatan Tugas Akhir ini penulis akan menggunakan Web server Apache, karena Apache bersifat Open Source sehingga bebas untuk digunakan. Apache adalah sebuah web server (HTTP Server) yang berbasis pada NCSA httpd 1.3. Apache merupakan web server yang cukup populer sekarang ini karena kemampuannya yang dapat berjalan di berbagai platform serta aman. Apache mampu diintegrasikan dengan server side

  scripting language seperti PHP, JSP, dan XSP. Apache pertama kali

  diluncurkan pada bulan April 1995 dengan versi 0.6.2 nya. Kini Apache telah mencapai versi 2.0. Apache adalah web server gratis yang dapat didownload di http://httpd.apache.org . Web server ini dapat menggunakan

  third party modules sehingga semuanya dapat terintegrasi dengan baik.

  D. PHP

  PHP ( PHP :HyperText Preprocessor ), merupakan bahasa web script yang bekerja di server-side dan bersifat embedded script pada HTML. PHP diciptakan oleh Rasmus Lerdorf, seorang pemrogram C pada tahun 1995.

  Rasmus mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. PHP versi 2 dikeluarkan tahun 1996 dengan diberi nama PHP/FI. PHP versi 2 ini sudah mendukung koneksi dengan database dan terintegrasi dengan HTML. Tanggal 6 Juni 1998, PHP 3.0 dikeluarkan secara resmi diikuti dengan PHP versi 4 yang diterbitkan pada tanggal 22 Mei 2000.

  PHP dapat digunakan untutk pembuatan website dinamis dan dapat mengerjakan seperti halnya yang dilakukan oleh program CGI, seperti mendapatkan data dari form, menghasilkan isi halaman web yang dinamis, dan menerima cookies. PHP mendukung fungsi built in serta library-

  library

  seperti fungsi pendukung untuk terintegrasi dengan XML (extensible Markup Language).

  Selain itu, PHP dapat digunakan secara gratis dan mendukung banyak

  

database antara lain : Adabas D, dBase, Empress, FilePro, FrontBase,

  Hyperwave, IBM DB2, Informix, Ingres, Interbase, MSQL, Direct MS SQL, MySQL, ODBC, Oracle, Ovrimos, PostgreeSQL, Solid, Sybase, Velocis, Unix DBM. PHP bersifat cross platform, artinya dapat berjalan pada sistem operasi yang berbeda seperti pada Windows 98, UNIX, dan Macintosh. PHP juga mendukung untuk berkomunikasi dengan layanan lain menggunakan protokol IMAP, SNMP, NNTP, POP3, HTTP, dan lainnya [Abdul Kadir,2003]. berinteraksi dengan program lain di server dan merespon sesuai dengan

  request

  dari client pada web browser. Ada beberapa aturan dasar dalam penulisan script PHP yaitu:  Menggunakan tag pembuka <?php dan tag penutup ?>, atau dengan tag pembuka <? dan tag penutup?>  Variabel dalam PHP bersifat case sensitive, artinya huruf besar dan kecil dibedakan.

   PHP bersifat embedded script dalam dokumen HTML atau non

  embedded script pada dokumen php terpisah.

  AppServ adalah suatu gabungan beberapa software open source yang disediakan untuk pengguna awal yang kesulitan mencari program – program pendukukng web. Di dalam program tersebut berisi satu paket program open source yang digunakan dalam pembuatan website, diantaranya Web Server Apache, PHP, Perl, dan Database Server MySQL. Didalamnya juga terdapat program aplikasi Database MySQL yang berbentuk web yang disebut phpmyadmin.

E. JavaScript

  Javascript dikembangkan oleh Netscape Communications yang bekerja sama dengan Sun Microsystem. Sebenarnya javasript dikembangkan dari bahasa livescript yang khusus dirancang untuk netscape navigator. Oleh netscape navigator, namun dalam perkembangannya Internet Explorer yang dirilis oleh Microsoft juga dapat mendukung javascript. Javascript memang tidak secanggih java ( karena hanya merupakan script ) tetapi untuk pemrogramannya tidak diperlukan pemrogram profesional.

  Javascript dijalankan di client ( client side programing ) sehingga dapat mengurangi beban kerja dari server.

  Dengan javascript dapat dibuat halaman web yang interaktif dan juga cerdas. Sebagai contoh javascript dapat digunakan untuk mengecek sah tidaknya masukan pengguna sebelum masukan dikirim ke server, javascript juga dapat melakukan operasi aritmatik ( seperti penjumlahan, pengurangan, dan perkalian ), dan bisa juga menampilkan animasi sederhana.

  Javascript bukan bahasa berorientasi object, melainkan bahasa berbasis

  

object . Bahasa berorientasi object harus mendukung tiga konsep dasar,

  yaitu pengkapsulan (encapsulation), pewarisan (inheritance), dan polimorfisme (polymorphism). Javascript hanya mendukung pengkapsulan, dan itupun tidak 100%. Program javascript dituliskan pada file HTML ( .html atau .htm )dengan menggunakan tag kontainer <SCRIPT>. Artinya javascript tidak perlu dituliskan pada file terpisah. Tag kontainer adalah tag yang diawali dengan <NAMA_TAG> dan diakhiri dengan </NAMA_TAG>. Beberapa contoh tag kontainer adalah <HTML></HTML>, <HEAD></HEAD>, mempunyai dua atribut tetapi yang harus diisi hanya satu atribut, yaitu

  Language

  yang diisi dengan “Javascript”. Hal ini memberitahu browser bahwa script yang ditulis adalah javascript [Antony Pranata, 1997].

  Contoh : <SCRIPT LANGUAGE=”Javascript”> // program javascript ditulis di bagian ini </SCRIPT> F.

   Extensible Markup Languange (XML)

  XML kependekan dari eXtensible Markup Language, yang dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang digunakan pada XML merupakan turunan dari SGML yang telah dikembangkan pada awal tahun 80-an dan telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar. Ketika HTML dikembangkan pada tahun 1990, para pengembang XML mengadopsi bagian paling penting pada SGML dan dengan berpedoman pada pengembangan HTML menghasilkan markup language yang tidak kalah hebatnya dengan SGML.

  Seperti halnya HTML, XML juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen (parameter yang dinyatakan dalam tag pembuka misal <form name=”isidata”>).

  Perbedaannya, HTML mendefinisikan dari awal tag dan atribut yang dipakai di dalamnya, sedangkan pada XML dapat menggunakan tag dan atribut sesuai keinginan dan kebutuhan yang membuatnya. Pada XML, penyimpanan data baik dalam atribut maupun sebagai isi elemen yang diletakkan diantara tag pembuka dan tag penutup. HTML digunakan untuk menampilkan informasi dan berfokus pada bagaimana informasi ditampilkan, sedangkan XML mendeskripsikan susunan informasi dan berfokus pada informasi itu sendiri. XML terutama dibutuhkan untuk menyusun dan menyajikan informasi dengan format yang tidak mengandung format standar seperti heading, paragraph, table dan lain sebagainya. XML lebih bersifat fleksible dibandingkan dengan HTML dalam hal kemampuannya menyimpan informasi dan data. Kelebihan lain yang dimiliki XML adalah informasi dapat dipertukarkan dari satu sistem ke sistem lain yang berbeda platform. Misalnya dari Windows ke Unix, atau dari PC ke Macintosh bahkan dari internet ke handphone dengan teknologi WAP [Ady Wicaksono, 2004].

  1. Dokumen XML Pada bagian atas dokumen XML terdapat document prolog yang berfungsi untuk menginformasikan bahwa dokumen tersebut adalah dokumen XML beserta versi XML yang digunakan. Bagian

  prolog

  juga dapat mengandung informasi penting lainnya seperti: DTD (Document Type Definition), informasi enkoding dokumen yang digunakan, XML preprocessor. Sebuah dokumen XML terdiri dari bagian bagian yang disebut dengan node. Node-node itu adalah [Moh Junaedi,2003]:  Root node yaitu node yang melingkupi keseluruhan dokumen.

  Dalam satu dokumen XML hanya ada satu root node. Node- node yang lainnya berada di dalam root node.

   Element node yaitu bagian dari dokumen XML yang ditandai dengan tag pembuka dan tag penutup, atau bisa juga sebuah

  tag tunggal elemen kosong seperti <anggota nama=”budi”/> . Root node

  biasa juga disebut root element  Attribute node termasuk nama dan nilai atribut ditulis pada tag awal sebuah elemen atau pada tag tunggal  Text node, adalah text yang merupakan isi dari sebuah elemen, ditulis diantara tag pembuka dan tag penutup  Comment node adalah baris yang tidak dieksekusi oleh parser  Processing Instruction node, adalah perintah pengolahan dalam dokumen XML. Node ini ditandai awali dengan karakter <? Dan diakhiri dengan ?>. Tapi perlu diingat bahwa header standard XML <?xml version=”1.0” encoding=”iso-8859-1”?> bukanlah processing instruction node. Header standard bukanlah bagian dari hirarki pohon dokumen XML.

   NameSpace Node, node ini mewakili deklarasi namespace

  Penulisan untuk pendefinisian tipe dokumen ada dua cara yaitu

  eksternal

  dan internal. Eksternal artinya pendefinisian tipe dokumen berada di luar dokumen XML, sedangkan internal berada di dalam dokumen XML itu sendiri. Berikut contoh penulisan dokumen prolog dengan pendefinisian

  eksternal <?xml version="1.0" encoding="us-ascii"?> <!-- komentar dan informasi lain --> <!DOCTYPE berita SYSTEM “ http://www.contoh.com/berita.dtd ” > <!-- komentar dan informasi lain -->

  Untuk penulisan pendefinisian tipe dokumen seperti contoh pada baris 3 diawali dengan <!DOCTYPE kemudian diikuti dengan nama elemen root dalam dokumen XML yang dalam hal ini adalah elemen “berita”. Atribut system diikuti dengan alamat URL dari DTD atau tempat aturan-aturan yang digunakan untuk memvalidasi dokumen XML.

  Berikut contoh penulisan dokumen prolog dengan pendefinisian

  internal : <?xml version="1.0" encoding="us-ascii"?> <!-- komentar dan informasi lain --> <!DOCTYPE berita [ <!ELEMENT berita (judul, deskripsi, pengirim)> <!ATTLIST berita > . . <!ELEMENT judul (#PCDATA)> . . ]> Untuk setiap dokumen XML harus memiliki satu elemen root.

  Sebuah tag XML dapat berisi atribut 1 atau lebih yang dalam penulisannya dipisahkan dengan spasi. Dalam satu tag tidak boleh ada 2 atau lebih nama atribut yang sama. Setiap tag pembuka akan diakhiri dengan tag penutup. Data ditulis di antara tag pembuka dan tag penutup. Berikut contoh penulisan dokumen body:

  <berita> <judul id=”1”>Persipura Juara Liga Indonesia 2005 </judul> <deskripsi>Persipura Juara LDI 2005 setelah mengalahkan Persija Jakarta</deskripsi> <pengirim>GusSWib</pengirim> </berita>

  </berita>

  Tidak setiap tag harus memiliki data untuk dideskripsikan, ada tag yang tidak memiliki data yang disebut empty element. Dapat dilihat seperti contoh : <elemenku />. Penentuan nama tag dalam dokumen XML memiliki aturan-aturan antara lain :

   Nama tag adalah case- sensitive, artinya huruf besar dan kecil dibedakan. Seperti contoh elemen <berita>, <Berita>, <BeRiTa> adalah tiga elemen yang berbeda.

   Nama tag diawali dengan karakter huruf atau garis bawah, tidak diawali dengan kata xml atau XML. Karakter whitespace (spasi, tabulasi dan enter) merupakan karakter pemisah, sehingga tidak dapat digunakan sebagai nama tag. Karakter = merupakan karakter khusus untuk pasangan atribut elemen dan nilainya sehingga tidak bisa digunakan sebagai nama tag. Contoh tag yang valid adalah <berita>, <_berita>, <A200>. Sedangkan contoh tag yang tidak valid adalah: <1A>, <$elemen>.

   Urutan tag-tag harus membentuk susunan pohon yang valid, artinya jika tag pembuka <berita> maka tag penutupnya <berita>. Berikut contoh penulisan yang tidak valid :

  

<judul>JudulBerita<deskripsi>Deskripsiberita</judul></deskripsi>

  Letak kesalahannya yaitu pada posisi dari tag penutup </judul> yang seharusnya berada di depan tag pembuka <deskripsi> atau di belakang tag penutup </deskripsi>. Penulisan yang valid sesuai dengan contoh tersebut dapat ditulis seperti berikut:

  <judul>JudulBerita</judul><deskripsi>Deskripsi berita</deskripsi>

   Penggunaan karakter seperti karakter < atau > merupakan hal yang tidak valid atau ilegal pada XML. Contoh:

  <judul>Judul < Berita</judul>

  Penulisan tersebut dibaca tidak valid ketika di eksekusi pada

  browser. Untuk dapat menggunakan karakter < digunakan entity reference yaitu dengan menggantikan < dengan <.

  Contoh:

  <judul>Judul < Berita</judul>

  Berikut contoh entity references yang dapat digunakan untuk menggantikan karakter ilegal pada XML.

Table 2.1 Entitiy References

  Entity references Karakter

  < < > > & & ' ‘ " “

  2. Document Type Definition (DTD) Sesuai namanya DTD berfungsi untuk mendefinisikan tipe dokumen XML. Pada saat mempelajari salah satu bahasa pemrograman atau scripting, akan diperkenalkan dengan deklarasi

  variable , deklarasi fungsi dan deklarasi tipe data. Serupa dengan

  itu, DTD mendefinisikan struktur dokumen XML dengan daftar element yang digunakan.

  DTD memungkinkan format yang unik untuk setiap file xml. DTD akan sangat berguna bila kita membuat aplikasi dalam Visual Basic, ASP atau bahasa pemrograman lain yang mendukung XML, yaitu untuk memastikan bahwa data yang diterima aplikasi itu adalah data yang valid. Atau bermanfaat juga digunakan bila satu organisasi menyepakati penggunaan satu DTD untuk tukar menukar data dan informasi.

  Unsur-unsur yang dideklarasikan dalam DTD adalah semua unsur yang membentuk suatu dokumen XML yaitu:  Element , satu blok data yang diawali tag pembuka dan tag penutup.

   Attribute

  , informasi pendukung element yang disertakan pada tag pembuka  Entity , karakter pengganti untuk sekumpulan informasi yang didefinisikan G.

   CSS