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
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
PERSEMBAHAN
If by accident you step into the mud, it is not therefore necessary to keep on walking in the muddy path
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
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.
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.
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.
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
DAFTAR ISI
HALAMAN JUDUL ... HALAMAN PERSETUJUAN PEMBIMBING ... HALAMAN PENGESAHAN ... HALAMAN PERSEMBAHAN ... PERNYATAAN KEASLIAN KARYA ... ABSTRAK ... 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...
B. Relational Database( MySQL) ... C. Web Server ( Apache) ... D. PHP ... E. JavaScript ... F. Extensible Markup Language (XML) ... 1. Dokumen XML... 2. Document Type Definition ( DTD )... G. CSS... H. Document Object Model ( DOM )... I. JavaScript dan DOM... 1. Node dan List node... 2. Fungsi untuk Pengaksesan sebuah Node... J. AJAX Sebagai Kombinasi Beberapa Teknologi... K. XMLHttpRequest Object... BAB III PERANCANGAN SISTEM... A. Data Flow Diagram... 1. Diagram Konteks ( DFD Level 0 )... 2. DFD Level 1 sisi Mahasiswa... 3. DFD Level 1 sisi Kaprodi... B. Use Case Diagram... 1. Use Case sisi Mahasiswa... 2. Use case sisi Kaprodi ... C. Perancangan Basis Data...
1. Diagram ER... 2. Penjabaran Tabel... 3. Domain Costraint... D. Perancangan Input Output... 1. Halaman Utama Mahasiswa... 2. Halaman Utama Kaprodi ... BAB IV IMPLEMENTASI , PEMBAHASAN DAN ANALISIS
PROGRAM... A. Implementasi... B. Pembahasan Program... C. Analisis Pengiriman Data dari Server... BAB V KESIMPULAN DAN SARAN ...
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...
DAFTAR GAMBAR
Gambar 2.1 Arsitektur Model Client / server ... Gambar 2.2 Pembentukan Pohon DOM... Gambar 2.3 Perbandingan cara kerja Web Klasik dan Ajax ... 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.6 Diagram ER ... Gambar 3.7 Halaman Utama Mahasiswa... 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... Gambar 4.4 Layer Jadwal...
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...
BAB I PENDAHULUAN
A.Latar Belakang Masalah
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.
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.
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
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
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
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 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.
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
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
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
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%.
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.
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
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-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.
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 -->
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 :
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:
<?xml version="1.0" encoding="us-ascii"?> <!-- komentar dan informasi lain --> <!DOCTYPE berita [
<!ELEMENT berita (judul, deskripsi, pengirim)> <!ATTLIST berita >
. .
<!ELEMENT judul (#PCDATA)> .
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>.
<berita>
<judul id=”1”>Persipura Juara Liga Indonesia 2005 </judul>
<deskripsi>Persipura Juara LDI 2005 setelah mengalahkan Persija Jakarta</deskripsi>
<pengirim>GusSWib</pengirim> </berita>
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>
Table 2.1 Entitiy References
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.
Entity references Karakter
< <
> >
& &
' ‘
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
CSS pertama dikembangkan berpusat pada formating dokumen HTML, yaitu dengan spesifikasi CSS1, Browser Netscape 4x keatas dan IE 4x ke atas sudah mendukung CSS1, CSS2 dikembangkan untuk dapat memenuhi kebutuhan terhadap format dokumen untuk dapat ditampilkan pada printer, CSS2 juga mendukung penentuan posisi content, downloadable, font, table layout, internationalization, dan sebagainya.
CSS terdiri dari dua elemen dasar yaitu : "selector" dan "declaration". sebuah "selector" biasanya adalah tag HTML, sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan. satu dengan yang lain dengan menggunakan titik-koma.
Contoh : B {color: lime}
Salah Satu dari beberapa keunggulan tekhnologi CSS dan merupakan alasan banyak orang menyukai penggunaannya adalah, CSS memperbolehkan untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan CSS tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site. Keuntungannya jelas sekali, jika ingin mengubah tampilan situs, maka tinggal mengedit satu file saja dan hasilnya akan di refleksikan pada keseluruhan dokumen HTML yang dilink ke file tersebut.
H. Document Object Model ( DOM )
dalam bentuk HTML atau XML. Karena tulisan ini menggunakan bahasa XML, maka penulis membatasi penjelasan DOM di sini pada DOM untuk XML. Selain tingkat pertama, sudah dikembangkan spesifikasi lanjutan, tingkat kedua dan ketiga yang menyediakan banyak sekali fitur lain seperti Event, View dan lain lain. Semua spesifikasi DOM bisa diakses di (DOM1, 1998) atau langsung di website W3C ²°
Document Object Model HTML (DOMHTML) merepresentasikan sebuah dokumen HTML dalam bentuk pohon. Dalam pohon itu, ada tiga macam simpul, yaitu:
Element Node : Simpul elemen merepresentasikan sebuah tag dalam
file HTML.
Attribute Node : Simpul atribut dipakai untuk menyimpan atribut yang ada pada tag pembuka.
Text Node : Simpul teks ini merepresentasikan teks yang ada di antara tag pembuka dan tag penutup.
<html> <head>
<title>An Example HTML Document</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" > </head>
<body>
<p>This is an example paragraph.</p> <p>This is an example paragraph with
<a href = "stuff.html">a hyperlink</a> inside of it!</p> <p>And here's one with<br />a line break
and an <img src = "image.jpg" alt = "image">.</p> </body>
Pembangunan pohon DOM untuk dokumen HTML dari Contoh diatas dimulai dengan element node “html” sebagai akar pohon (mewakili tag “<html>” dalam kode HTML). Untuk setiap tag yang ada di dalam tag “<html>”, pohon menyimpan sebuah anak element node “html” tersebut. Untuk semua atribut pada tag aktual, sebuah anak bertipe attribute node disediakan, dan untuk teks antara tag pembuka dan tag penutup sebuah anak bertipe text node ditambah. Semua node ini disimpan dalam urutan sama dengan kemunculannya dalam kode HTML. Proses pembentukan pohon ini akan diiterasikan secara rekursif sampai seluruh dokumen sudah disimpan dalam bentuk pohon. Representasi kode HTML diatas sebagai pohon DOM ditunjukkan pada gambar di bawah ini
Gambar 2.2 Pembentukan Pohon DOM
berisi kode HTML yang benar, tetapi isinya bisa tag HTML, atribut dan teks antara tag pembuka dan tag penutup saja. Dengan demikian dokumen HTML dalam file teks dan pohon DOM adalah dua cara untuk menyimpan struktur sebuah dokumen. File teks mungkin lebih mudah dimengerti manusia, namun browser biasanya menyimpan dokumen HTML secara intern dalam bentuk pohon DOM. Bentuk pohon ini sangat memungkinkan tidak hanya manipulasi informasi dokumen dengan mengubah isi simpul, tetapi juga struktur dokumen dengan memindahkan pohon bagian ke posisi lain. Dengan demikian, kekurangan utama metode pertama untuk dynamic HTML bisa diselesaikan.
I. Javascript dan DOM
Spesifikasi DOM menyediakan fungsi - fungsi untuk mengubah baik informasi dan struktur pohon DOM ini. Perubahan itu bisa misalnya menghapus sebuah pohon bagian, bisa menambahkan node baru, atau bisa menukarkan dua node. Setiap perubahan dalam pohon DOM ini langsung mengubah tampilan kode HTML dalam browser. Fungsi ini bisa dipakai dengan bahasa Javascript (namun dengan bahasa lain juga) sehingga kode Javascript bisa mengubah tampilan kode HTML secara dinamis.
antara tag dalam dokumen HTML (disimpan di text node dalam pohon DOM) bisa diubah secara dinamis. Harus diperhatikan bahwa perubahan HTML ini tidak terjadi dalam kode yang disimpan dalam hard disk komputer, tetapi hanya tampilan dokumen dalam browser berubah.
Sayangnya browser lama belum mendukung DOM secara lengkap. Dengan demikian, penulis kode selalu harus mengecek apakah browser sudah mendukung DOM secara lengkap atau belum.
1. Node dan List Node
Kebanyakan fungsi DOM mengembalikan atau memanipulasi satu node pohon DOM atau sebuah list (senarai berantai) dengan beberapa node. Javascript menyediakan sebuah obyek untuk masing-masing kemungkinan tersebut. Properti paling penting dalam obyek bertipe node adalah :
“ nodeName ” : Properti ini menyimpan nama node dalam
bentuk string.
“ nodeValue ” : Properti ini menyimpan nilai node dalam bentuk string.
“ parentNode” : Properti ini menyimpan node induk,
sebuah obyek dari tipe node sendiri.
“ childNodes ” : Properti ini menyimpan semua anak node
aktual dalam sebuah list node.
“ previousSibling, nextSibbling” : Properti ini menyimpan sebuah node untuk adik / kakak untuk node aktual. Untuk sebuah list dengan nodenode, tersedia dua properti yang penting:
“ length” : Properti ini menyimpan jumlah node dalam list tersebut.
2. Fungsi untuk Pengaksesan Sebuah Node
Kategori fungsi DOM pertama adalah fungsi untuk pengaksesan node tertentu dalam pohon DOM. Pada intinya hanya dua fungsi diperlukan, yaitu:
" getElementById (elementId) " : Fungsi ini
mengembalikan sebuah pointer kepada node yang mewakilkan tag dengan nilai atribut "id" sama dengan parameter "elementId". Perhatikan bahwa panggilan fungsi ini paling banyak bisa menghasilkan satu node karena atribut "id" harus unik. Kalau tidak ada tag dengan atribut "id" yang diinginkan, nilai "null" dikembalikan.
J. AJAX Sebagai Kombinasi Beberapa Teknologi
engine. AJAX Engine dibuat dengan javascript yang fungsinya untuk merender tampilan untuk user dan dan berkomunikasi dengan server. Dengan begitu komunikasi ke server bisa terjadi secara asynchronous [Sams, 2006].
Dengan demikian AJAX Engine mengupdate tampilan browser di client setiap beberapa waktu sekali sesuai dengan informasi yang didapat dari server, dan client tidak perlu melihat halaman kosong ketika melakukan submit ke server. Untuk lebih jelasnya tentang perbandingan proses yang dilakukan oleh aplikasi web klasik dan web yang menggunakan AJAX, dapat dilihat pada gambar di bawah ini
Gambar 2.3 Perbandingan cara kerja Web Klasik dan Ajax
server. Dengan menggunakan AJAX engine, komunikasi yang terjadi antara client dan server dapat berlangsung terus menurus secara asynchronous, Ini terlihat seperti memasukkan sebuah layer pada halaman web pengguna tanpa melakukan proses reload. Untuk lebih jelasnya mengenai komunikasi antara client dan server dengan menggunakan aplikasi web berbasis AJAX dan menggunakan web klasik, dapat dilihat pada gambar di bawah ini :
Gambar 2.4 Perbandingan Transfer Data
K. XMLHttpRequest Object
secara asynchronously, HTTP request harus dapat dikirimkan tanpa menampilkan sebuah halaman baru.
Sebagai solusi untuk memecahkan masalah diatas, bisa digunakan
XMLHTTPRequest object. JavaScript object dapat digunakan untuk
membuat koneksi ke server dan mengirimkan HTTP request tanpa perlu meload sebuah halaman baru. Walaupun object XMLHTTPRequest diawali
dengan kata XML, namun sesungguhnya data yang dapat dikembalikan dari server bukan hanya berupa XML, tapi juga yang lain seperti ASCII, text, dan HTML.
XMLHTTPRequest disupport oleh semua browser modern, Microsoft Internet Explorer 5+, Mozilla Firefox, Konqueror, Opera, Safari, dan disupport juga oleh berbagai platform, seperti Microsoft Windows, UNIX/Linux, dan Mac OS X.
Karena tidak dapat diketahui user menggunakan browser apa, versi berapa, dan sistem operasi apa, maka kode yang ditulis harus dapat menyesuaikan dengan browser user sehingga XMLHTTPRequest dapat berjalan dengan sukses. Untuk sebagian besar browser ( Mozilla
Firefox, Konqueror, Opera dan Safari ), dapat membuat instant object secara langsung, berikut adalah contoh pembuatan variable yang menyimpan hasil dari XMLHTTPRequest object.
khusus untuk Microsoft Internet Explorer, harus dibuat ActiveX object terlebih dahulu, contohnya seperti di bawah ini.
var request = new ActiveXObject("Microsoft.XMLHTTP");
untuk mengatasi perbedaan versi MSXML Internet Explorer, perlu juga memberikan perintah seperti dibawah ini
var request = new ActiveXObject("Msxml2.XMLHTTP");
Solusi yang baik untuk masalah ini adalah dengan mencoba satu persatu method untuk membuat instant object sampai salah satu method berhasil. Berikut adalah contoh perintah untuk mengatasi perbedaan browser dan versi dari Internet Explorer [Sams,2006].
Perintah diatas Menggunakan JavaScript statements try dan catch,
try mengijinkan untuk menjalankan potongan dari kode, jika
function getXMLHTTPRequest() {
var request = false; try
{
request = new XMLHttpRequest(); /*Firefox dan lain-lain*/ }
catch(err1) {
try {
vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* beberapa versi IE */
kode berjalan tanpa error, maka tidak terjadi apa – apa,
namun bila terjadi error, statement catch akan menahan sebelum
pesan error dikirimkan kepada user, dan menentukan apa yang perlu dilakukan program kemudian untuk mengatasi error tersebut.
Tabel 2.2 XMLHttpRequest Object Properties
Property Kegunaan Read/write
onreadystatechange Menentukan event handler mana yang akan dipanggil ketika nilai object property ready state berubah
Read/write
readyState Laporan status permintaan dalam bentuk integer :
0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = completed
Read-only
responseText Data yang dikirim oleh server dalam bentuk string
Read-only
responseXML Data yang dikirim pleh server dalam bentuk XML
status Status kode HTTP yang dikirim oleh server
Read-only
statusText HTTP response status text yang dikirim oleh server
Read-only
Tabel 2.3 XMLHttpRequest Object Method
Method Means
abort() Menghentikan request yang sedang
diproses
getAllResponseHeaders() Pengembalian semua header dalam bentuk
string
getresponseHeader(x) Pengembalian nilai header x dalam bentuk
string
open('method','URL','a') Spesifikasi dari HTTP method (contohnya,
GET atau POST), URL tujuan, dan ketika request ditangani secara asynchronously (JIka ya, a='TRue'the default; jika tidak, a='false'.)
send(content) Mengirimkan request, dan dapat dilakukan
secara bebas sesuai dengan open method yang digunakan
x=y dan menyerahkan ke header untuk dikirimkan bersamaan dengan request
Tabel 2.4 Status Server properties
Property Means
200 Request telah sukses
204 Dokumen kosong
401 Request tidak otentik
403 Server menolak untuk
memproses request
404 Request tidak ditemukan
405 Method tidak diijinkan
408 Client gagal mengirinkan
request dalam selang waktu yang ditentukan oleh server
500 Server Error
501 Tidak diterapkan
503 Service tidak ditemukan
BAB III
PERANCANGAN SISTEM
Sistem yang dibuat adalah Sistem KRS menggunakan AJAX. Sistem yang akan dibuat akan difokuskan cara kerja AJAX serta merancang inteface yang akan ditampilkan di browser client.
A. Data Flow Diagram
Data Flow Diagram Tahapan (DFD Leveled) merupakan peralatan yang berfungsi untuk menggambarkan secara rinci aliran data yang terjadi dalam sistem.
1. Diagram Konteks ( DFD Level 0 )
Gambar 3.1 Diagram Konteks
2. DFD Level 1 sisi Mahasiswa
Gambar 3.2 DFD level 1 sisi Mahasiswa
3. DFD level 1 sisi Kaprodi
Gambar 3.3 DFD level 1 sisi Kaprodi
B. Use Case Diagram
Use Case Diagram berfungsi untuk menggambarkan hal-hal apa saja yang dapat dilakukan user ke sistem.
1. Use Case sisi Mahasiswa
Gambar 3.4 Use Case sisi Mahasiswa
MAHASISWA
LOGIN
Pengambilan matakuliah
Dalam sistem ini mahasiswa dapat melakukan login, pengambilan matakuliah dan pembatalan matakuliah.
2. Use Case sisi Kaprodi
Gambar 3.5 Use Case sisi Kaprodi
Dalam sistem ini kaprodi dapat melakukan login dan mengubah nilai kapasitas kelas.
C. Perancangan Basis Data
1. Diagram ER
Digunakan untuk menggambarkan hubungan antar entitas dalam sistem. Sistem yang dibuat memiliki 3 entitas yang relasinya dapat digambarkan dalam diagram sebagai berikut :
KAPRODI
LOGIN
Gambar 3.6 Diagram ER
2. Penjabaran Tabel
Sistem yang dibuat menggunakan 5 tabel. Adapun penjabarannya adalah sebagai berikut :
i. Tabel Mahasiswa
Nim, Nama_m, Alamat, Sex, Pass ii. Tabel Matakuliah
iii. Tabel Jadwal
Kode, Kelas, Kapasitas, Terisi, Mulai, Selesai, Ruang, Hari, Dosen, Semester
Keterangan :
Entitas jadwal merupakan weak entity terhadap entitas matakuliah. Sehingga dalam tabel jadwal, primary key dari tabel matakuliah masuk ke tabel jadwal.
iv. Tabel KRS Nim, Kode, Kelas
Keterangan :
Tabel krs didapatkan dari relasi many to many antara entitas mahasiswa dengan entitas jadwal. Sehingga dalam tabel KRS terdapat primary key dari kedua entitas.
v. Tabel Kaprodi User_id, Pass 3. Domain Constraint
Sebuah domain adalah satu set nilai yang valid dari atribut / kelompok dari logika atau nilai konseptual dari satu atau beberapa atribut yang menggambarkan nilai tersebut.
Tabel 3.1 Domain Costraint
ATRIBUT TYPE KARAKTERIS
TIK
KETERANGAN
Nim Varchar(20) NotNull Nomor induk mahasisiwa
Nama_m Varchar(20) NotNull Nama mahasiswa
Alamat Varchar(20) NotNull Alamat mahasiswa
Sex Char(1) NotNull Jenis Kelamin
Pass Varchar(15) NotNull Password mahasiswa
Kode Varchar(10) NotNull Kode matakuliah
Nama Varchar(20) NotNull Nama matakuliah
Sks Int(1) NotNull Sks
Kelas Char(1) NotNull Kelas dari matakuliah
Hari Varchar(10) NotNull Hari kuliah dari kelas
matakuliah
Mulai Time(00:00:00) NotNull Jam mulai matakuliah
Selesai Time(00:00:00) NotNull Jam berakhir matakuliah
Ruang Varchar(5) NotNull Ruang kuliah
Kapasitas Int(3) NotNull Kapasitas dari group/kelas
matakuliah
Terisi Int(3) NotNull Jumlah terisi dari group/
kelas matakuliah
Harga Int(10) NotNull Harga
Dosen Varchar(20) NotNull Nama dosen yang mengajar
D. Perancangan Input dan Output 1. Halaman Utama Mahasiswa
Gambar 3.7 Halaman Utama Mahasiswa
Keterangan :
Layer Login
Gambar 3.8 Layer Login Keterangan :
Untuk dapat masuk ke sistem mahasiswa harus menginputkan nama dan password yang benar, setelah itu menekan tombol login.
Layer Matakuliah yang ditawarkan
Kode Nama Matakuliah SKS
Gambar 3.9 Layer Matakuliah yang ditawarkan
Keterangan :
Layer ini akan menampilkan daftar matakuliah yang ditawarkan. Dalam layer terdapat tombol Lihat yang digunakan untuk melihat jadwal dari masing-masing matakuliah.
Nim :
Password : Login
Lihat
Layer Matakuliah yang diambil
Kode Nama Group Hari Mulai Selesai Ruang Dosen
Gambar 3.10 Layer Matakuliah yang diambil
Keterangan :
Dalam layer ini terdapat tombol Batal yang digunakan untuk membatalkan matakuliah yang telah diambil. Di layer ini juga akan ditampilkan total sks yang diambil saat itu, sekaligus jumlah sks yang harus dibayarkan.
Layer Jadwal
Gambar 3.11 Layer Jadwal
Keterangan :
Batal
Batal
Total SKS
Total Pembayaran
[kode]nama matakuliah
Group Kapasitas Terisi Hari Mulai Selesai Ruang Dosen
Tutup
Tombol Ambil digunakan untuk mengambil matakuliah yang diiginkan. Tombol Tutup digunakan untuk menutup layer ini.
2. Halaman Utama Kaprodi
Gambar 3.12 Halaman Utama Kaprodi Keterangan :
Sama seperti tampilan di mahasiswa, halaman untuk kaprodi juga hanya ada 1. Tetapi didalamnya disisipkan beberapa layer, diantaranya layer login, layer untuk menampilkan data matakuliah dan layer untuk keluar.
BANNER
Kode matakuliah
Nama matakuliah
Kapasitas Terisi Ubah kapasitas
Keluar Layer Login
Pilih Kode matakuliah
BAB IV
IMPLEMENTASI ,PEMBAHASAN DAN
ANALISIS PROGRAM
A.Implementasi
Tampilan awal
Gambar 4.1. Tampilan Awal
Untuk alasan keamanan, pada textbox yang digunakan untuk menginputkan password, semua karakter ditampilkan dengan tanda *.
Tampilan Utama Mahasiswa
Gambar 4.2. Tampilan Utama Mahasiswa
Layer Matakuliah Yang Ditawarkan
Gambar 4.3. Layer Matakuliah Yang Ditawarkan
Pada layer matakuliah yang ditawarkan ini ditampilkan informasi tentang matakuliah yang ditawarkan seperti kode matakuliah, nama matakuliah, serta jumlah sksnya. Matakuliah yang ditampilkan pada layer ini diambil dari tabel matakuliah yang direlasikan dengan tabel jadwal. Jika matakuliah yang terdapat pada tabel jadwal nilai kapasitasnya sama dengan nilai terisinya, maka matakuliah tersebut tidak akan ditampilkan. Layer ini akan diupdate setiap lima detik agar dapat menampilkan informasi dengan cepat dan benar. Tombol “lihat” digunakan untuk mebuka layer jadwal dari masing - masing matakuliah.
Layer Jadwal
Layer jadwal menampilkan informasi tentang jadwal dari masing-masing matakuliah. Terdapat informasi kode, nama matakuliah, group, kapasistas, terisi, hari, jam mulai, jam selesai, ruang dan dosen. Layer jadwal ini diupdate setiap lima detik, ini bertujuan untuk menginformasikan dengan cepat jumlah terisi dari masing – masing kelas. Tombol “Ambil” digunakan untuk memilih kelas yang akan diambil dari matakuliah yang ditampilkan. Tombol “tutup” digunakan untuk menutup layer jadwal.
Layer Matakuliah Yang Diambil
Gambar 4.5. Layer Matakuliah Yang Diambil
telah diambil. Pada layer Matakuliah Yang Diambil juga dapat menampilkan informasi tentang matakuliah yang jadwalnya saling bertabrakan. Berikut adalah gambar dari Layer Matakuliah Yang Diambil saat menampilkan matakuliah yang jadwalnya bertabrakan.
Gambar 4.6. Matakuliah Tabrakan
Tampilan Awal Kaprodi
Gambar 4.7 Tampilan Awal Kaprodi
Ini adalah tampilan awal untuk halaman kaprodi. Dalam halaman ini terdapat beberapa layer, diantaranya layer login, layer keluar dan layer untuk manampilkan data matakuliah. Tapi dalam tampilan awal yang aktif hanya layer login. Jika User Id dan Password yang diisikan benar maka layer yang lainnya akan ditampilkan.
Layer Data matakuliah
Gambar 4.8 Layer Data matakuliah Keterangan :
kelasnya. Jika ingin mengubah maka pada kolom ubah kapasitas, kaprodi dapat mengisikan nilai yang diiinginkan lalu menekan tombol simpan.
B. Pembahasan Program
Sistem yang dibuat merupakan aplikasi berbasis web. Pada sisi server digunakan bahasa pemrograman PHP, sedangkan di client digunakan javascript. Bagian utama dari sistem yang dibuat adalah pada AJAX engine yang disimpan pada file fungsi.js, kode – kode lain yang ditulis menggunakan PHP hanya digunakan untuk pengolahan pada database. Berikut akan dibahas lebih detail tentang fungsi.js dan beberapa kode – kode yang dianggap penting.
1. AJAX engine ( fungsi.js ) function getXMLHTTPRequest() { try
{
xmlHttp= new XMLHttpRequest(); }
catch(err1) { try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (err2) {
try {
Kode diatas digunakan untuk membuat XMLHTTPRequest object agar
system dapat berjalan secara asynchronously. Perintah try dan catch
digunakan untuk mencoba satu persatu method untuk membuat instant object karena tidak dapat diketahui user menggunakan browser apa, dan
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement; Message = xmlDocumentElement.firstChild.data;
document.getElementById("divMessage").style.visibility="visible";
document.getElementById("divMessage").innerHTML ='<i>' + Message + '</i>'; if(Message!='Invalid login!'){
document.getElementById("login").style.visibility="hidden"; document.getElementById("Pengambilan").style.visibility="visible"; document.getElementById("logout").style.visibility="visible"; xmlHttp.open("GET", "ambil_mk.php", true);
xmlHttp.onreadystatechange = function(){
document.getElementById("Pengambilan").innerHTML=xmlHttp.responseText;
}
xmlHttp.send(null);
var id1=document.getElementById("divMessage"); //id1.style.position="absolute";
//id1.style.top="45px"; //id1.style.left="470px";
document.getElementById("pass").value=''; document.getElementById("nim").value=''; matakuliah();
} else {
var id1=document.getElementById("divMessage"); //id1.style.position="absolute";
//id1.style.top="25px"; //id1.style.left="480px"; }
} else {
alert("There was a problem accessing the server: " +xmlHttp.statusText); }
Perintah <(xmlHttp.readyState == 4)> digunakan untuk mengecek apakah status requaest sudah komplit atau belum, sedangkan Perintah <(xmlHttp.status = = 200)> digunakan untuk mengecek apakah asynchronous HTTP request telah berhasil dilaksanakan. Perintah <xmlHttp.open("GET", "ambil_mk.php", true);> digunakan untuk menyiapkan
komunikasi dengan server. Terdapat tiga parameter pada
perintah tersebut. Parameter pertama “GET” mengindikasikan
method yang digunakan dalam pengiriman data ke server, dan
terdapat dua method yang bisa digunakan yaitu GET dan POST.
Parameter yang kedua “ambil_mk.php” adalah halaman server
yang ingin diakses. Parameter yang ketiga adalah “true”
mengindikasikan request akan dikirimkan dengan mode asynchronous. Nilai default dari argument ini adalah true. Perintah
<xmlHttp.send(null);> digunakan untuk mengirimkan request ke server, karena menggunakan method GET, sehingga informasi akan diencode ke URL tujuan, maka Method send hanya memerlukan argument null.
Perintah
<document.getElementById("login").style.visibility="hidden";
atau
getElementById adalah fungsi DOM untuk pengaksesan node dalam pohon DOM. Dalam hal ini fungsi tersebut digunakan untuk mengaktifkan atau menonaktifkan sebuah layer pada halaman utama.
Prinsip kerja fungsi – fungsi lain dalam fungsi.js hampir sama cara kerjanya dengan fungsi handleServerResponse(). Oleh karena itu penulis merasa tidak perlu menjelaskan satu persatu fungsi – fungsi tersebut.
2. Kode File data_jadwal.php 3.
Perintah – perintah diatas digunakan untuk memilih matakuliah yang akan ditawarkan dan akan ditampilkan di layer matakuliah yang ditawarkan. Query diatas merelasikan dua buah yaitu tabel matakuliah dan tabel
<?php session_start(); include "koneksi.php";
//memilih matakuliah yg akan ditawarkan
$result=mysql_query("SELECT mk.kode_mk,mk.nama_mk,mk.sks,j.terisi,j.kapasitas from matakuliah mk,jadwal j
where ((mk.kode_mk=j.kode_mk) and (j.kapasitas>j.terisi))"); echo"<font class='font4'>Matakuliah Yang Ditawarkan</font>";
echo"<table width='100%' border='1' id='tabeltawar' bordercolor='#009933'>"; echo"<tr>";
echo"<td bgcolor='#000000' class='font' align='center'>Kode</td>";
echo"<td bgcolor='#000000' class='font' align='center'>Nama Matakuliah</td>"; echo"<td bgcolor='#000000' class='font' align='center'>SKS</td>";
echo"<td bgcolor='#000000'></td>"; echo"</tr>";
//selama
while($baris=mysql_fetch_array($result)) {
echo"<tr bgcolor='#00ccff'>"; echo"<td class='font2'>$baris[0]</td>"; echo"<td class='font2'>$baris[1]</td>"; echo"<td class='font2'>$baris[2]</td>"; //
echo"<td><script>var $baris[0]='$baris[0]';</script><input type='button' value='Lihat' onClick='lihat_jadwal($baris[0])'></td>";
echo"</tr>"; }
jadwal. Hasil dari query tersebut akan menampilkan semua matakuliah
//memilih matakuliah yg diambil dr tabel jadwal
$hasil=mysql_query("SELECT * FROM jadwal j WHERE (j.kode_mk = '$kode_mk' AND j.group = '$group')");
$baris=mysql_fetch_array($hasil);
//pilih semua dari tabel pengambilan sesuai dengan kode_mk dan nim
$hasil1=mysql_query("SELECT * FROM pengambilan p WHERE (p.kode_mk = '$kode_mk' AND p.nim = '$user_id')");
$baris1=mysql_num_rows($hasil1);
//jika lebih kecil dari 1 maka masukkan data---data belum ada $result=mysql_query("select
p.kode_mk,mk.nama_mk,j.group,j.hari,j.jam_awal,j.jam_akhir,j.ruang,j.dosen,j.kode_mk from pengambilan p,matakuliah mk,jadwal j
where p.nim='$user_id' and p.kode_mk=j.kode_mk and mk.kode_mk= p.kode_mk"); $baris2=mysql_fetch_array($result);
if($baris1<1) {
//cek tabrakan
$hasil_nabrak=mysql_query("SELECT * from jadwal j, pengambilan p WHERE j.kode_mk = '$kode_mk' and j.hari='$baris2[3]' AND (((j.jam_akhir >='$baris2[4]' ) AND (j.jam_awal <= '$baris2[4]'))
OR ((j.jam_akhir >= '$baris2[5]') AND (j.jam_awal <= '$baris2[5]')))and p.nim='$user_id'");
$brs_tabrakan=mysql_num_rows($hasil_nabrak); if ($brs_tabrakan >0)
{
Perintah – perintah diatas digunakan pada proses pengambilan matakuliah dan untuk pengecekan tabrakan. Query untuk mengecek apakah ada jadwal yang bertabrakan atau tidak pertama kali akan membandingkan hari dari masing – masing jadwal tersebut, jika harinya sama baru kemudian akan dilakukan pengecekan terhadap jam awal dan jam akhir. Jika tidak terjadi tabrakan maka data akan dimasukkan ke table pengambilan dan jumlah terisi di table jadwal akan diupdate nilainya.
$nama_mata_kuliah=mysql_query("SELECT mk.nama_mk FROM matakuliah mk WHERE mk.kode_mk='$baris2[0]'");
echo"<p><input name='Cancel' type='button' value=' CANCEL ' onClick='hapus_mk()'></p>";
} else
{
mysql_query("INSERT INTO pengambilan VALUES('$user_id','$kode_mk','$baris[1]')");
$terisi=mysql_query("SELECT jadwal.terisi from jadwal where (jadwal.kode_mk='$kode_mk' and jadwal.group='$group')");
$terisi_baru=mysql_fetch_array($terisi);
mysql_query("update jadwal SET terisi='$terisi_baru[0]'+1 where (jadwal.kode_mk='$kode_mk' and jadwal.group='$group')");
} }
else {
// jika kosong berikan tanda 1 bahwa matakuliah telah diambil if(!empty($kode_mk)) echo"1";
} }
4. Kode File tampil_mk.php from pengambilan p,matakuliah mk,jadwal j
where p.nim='$user_id' and p.kode_mk=j.kode_mk and p.kode_mk=mk.kode_mk order by p.kode_mk"); echo"<font class='font4'>Matakuliah Yang Diambil</font>";
echo"<table width='100%' border='1' id='tabeltawar'>"; echo"<tr class='font' align='center' bgcolor='#000000' >"; echo"<td >Kode</td>";
echo"<td class='font2'><script>var $baris[0]='$baris[0]';</script><input type='button' name='batal' value='Batal' onClick='hapus_mk($baris[0])'></td>";
echo"</tr>"; }
echo"</table>";
$jumlah_sks=mysql_query("select SUM(mk.sks) from matakuliah mk,pengambilan p where((mk.kode_mk=p.kode_mk)and(p.nim='$user_id'))");
Perintah diatas digunakan untuk menampilkan metakuliah yang telah diambil dari tabel pengambilan. Total pembayaran dihitung jumlah SKS yang diambil dikali dengan harga per SKS nya.
C.Analisis Pengiriman Data dari Server
Dalam analisa ini penulis akan menjelaskan tentang bentuk response yang dapat diterima dari server dengan menggunakan AJAX. Dalam sistem yang dibuat, ada dua jenis response yang digunakan yaitu XML dan text. Untuk dapat menerima data dari server dengan mengunakan kedua response tersebut digunakan dua buah property yaitu responseXML dan responseText. Response XML digunakan pada proses login untuk
mengecek apakah login berhasil dilakukan atau terjadi invalid login. Berikut adalah kode dari file login.php yang merupakan kiriman data dari server dalam format XML
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; // create the <response> element
echo '<response>'; // retrieve the user name $MyNim = $_GET['MyNim']; $MyPass = $_GET['MyPass']; include "koneksi.php";
$r=mysql_query("select nim from mahasiswa where binary nim='$MyNim' and binary pass='$MyPass'");
$nama=mysql_query("select nama from mahasiswa where nim='$MyNim'");
$nama_kleng=mysql_fetch_array($nama);
echo ' NAMA : '.$nama_kleng[0];
}
{
//header("location: login.php?errcode=1234"); echo 'Invalid login!';
}
// close the <response> element echo '</response>';
?>
Kemudian fungsi.js akan menerima data tersebut dengan perintah
Perintah <xmlHttp.responseXML> digunakan untuk menerima kiriman data dari server yaitu dari file login.php dalam format XML, kemudian bagian pertama dari data tersebut akan disimpan di variabel Message untuk mengetahui apakah pesannya “invalid login” atau tidak.
Kiriman data dari server yang bertipe text dapat dilihat dari data yang dikirimkan oleh file data_jadwal.php. berikut adalah perintahnya.
echo"<font class='font4'>Matakuliah Yang Ditawarkan</font>";
echo"<table width='100%' border='1' id='tabeltawar' bordercolor='#009933'>"; echo"<tr>";
echo"<td bgcolor='#000000' class='font' align='center'>Kode</td>";
echo"<td bgcolor='#000000' class='font' align='center'>Nama Matakuliah</td>"; echo"<td bgcolor='#000000' class='font' align='center'>SKS</td>";
echo"<td bgcolor='#000000'></td>";
echo"<td><script>var $baris[0]='$baris[0]';</script><input type='button' value='Lihat' onClick='lihat_jadwal($baris[0])'></td>";
Kemudian fungsi.js akan menerima data tersebut dengan perintah
Data dengan tipe text yang diterima dari server yaitu dari file
data_jadwal.php dipanggil dengan property
xmlHttp.responseText; kemudian digunakan untuk menampilkan tabel di layer TabelPenawaran pada halaman utama.
Berdasarkan aplikasi yang telah dibuat, maka dapat diketahui bahwa aplikasi web yang menggunakan AJAX memiliki beberapa keunggulan dibandingkan aplikasi web HTML biasa. Aplikasi AJAX hanya memiliki sebuah halaman dan melalui halaman tersebut pengguna dapat berinteraksi secara terus menerus tanpa terjadi refresh pada halaman itu. Hal tersebut dapat dilakukan karena AJAX mampu melakukan suatu proses yang terpisah.
Ketika pengguna mengirimkan suatu perintah ke server, maka server akan memproses data tersebut dan mengirimkan ke AJAX engine, kemudian AJAX engine akan merender tampilan di browser client sesuai dengan data yang dikirimkan oleh server. Berbeda dengan aplikasi web biasa yang mengirimkan secara kesuluruhan halaman kepada client, pada AJAX data yang dikirim oleh server hanya data yang diminta oleh client. Hal ini menyebabkan tampilan web tidak hilang pada browser client ketika server document.getElementById("TabelPenawaran").style.visibility="visible";
document.getElementById("TabelPenawaran").innerHTML=xmlHttp.responseText;
