Modul 6 - Web Based

MODUL 6
Implementasi Web dengan Database
TUJUAN PRAKTIKUM :
1. Praktikan memahami prinsip penggunaan ajax.
2. Praktikan mampu mengkoneksikan ajax dengan database.
PERLENGKAPAN PRAKTIKUM
1. Modul Praktikum
2. Eclipse Indigo atau Helios
3. Apache Tomcat Server 7.0
4. Browser (Chrome atau Mozilla Firefox)
5. SQL Server 2008
LANDASAN TEORI
Pengenalan AJAX
AJAX merupakan singkatan Asynchronous Javascript dan XML. Ajax merupakan
teknik pengembangan web untuk membuat suatu aplikasi web yang interaktif.
Tujuannya adalah untuk membuat website agar lebih responsif, sehingga seluruh
halaman web tidak harus di reload setiap kali pengguna meminta request. Istilah
AJAX disebutkan pertama kali oleh Jesse James Garrett pada Februari 2005. Garrett
menemukan istilah AJAX ketika ia menyadari perlunya nama untuk mewakili
representasi dari teknologi yang diusulkan untuk customer.
Hal yang harus diperhatikan dalam penggunaan AJAX adalah:
•
XHTML dan
informasi.
CSS
digunakan
untuk
•
XMLHttpRequest objek yang digunakan untuk pertukaran data asynchronous
dengan web server.
Modul Praktikum Web Based Programming
menandai
Page 1
dan
mempercantik
tampilan
•
•
XML, JSON (JavaScript Object Notation) atau teks biasa yang digunakan untuk
mentransfer informasi antara server dan client.
DOM (Document Object Model) digunakan dengan bahasa scripting client-side,
misalnya Javascript atau JScript, untuk menampilkan secara dinamis dan
interaksi dengan informasi yang disajikan.
Sebuah aplikasi yang menggunakan AJAX akan menghilangkan sifat kaku dari
interaksi di Web dengan memperkenalkan middleware yang biasa disebut AJAX
Engine, antara pengguna dan server. Selain memuat halaman web pada awal sesi,
browser akan mengeload AJAX Engine yang dituliskan dalam JavaScript. Engine ini
menyediakan user interface dan protokol komunikasi asynchronous dengan server.
Asynchronous communication ini akan membuat user jarang menemukan halaman
browser yang blank (kosong),akan tetapi menunggu server mengembalikan hasilnya.
Dalam aplikasi AJAX, setiap user action yang biasanya akan menghasilkan
HTTP request mengambil bentuk panggilan JavaScript untuk AJAX Engine. Jika mesin
membutuhkan sesuatu dari server dalam Untuk merespon, seperti mengirimkan data
untuk diproses, memuat tambahan kode interface, atau mengambil data baru, mesin
akan membuat asynchronous request, biasanya menggunakan XML atau JSON
(JavaScript Object Notation). Namun, pendekatan ini tidak menjamin penggunaan yag
nyaman untuk semua aplikasi. Jika kebanyakan operasi adalah data-intensif dan
memerlukan banyak interaksi dengan server, keuntungan dari implementasi aplikasi
web menggunakan AJAX akan sangat tipis.
Modul Praktikum Web Based Programming
Page 2
AJAX memiliki kelebihan sebagai berikut.
1.
Pemanfaatan Bandwidth
Dengan menghasilkan HTML secara lokal dalam browser, dan hanya
mendownload panggilan Javascript dan data actual dari server, halaman web
AJAX memuat lebih cepat karena payload ukurannya lebih kecil.
2.
User Interface yang Lebih Responsif
Halaman menggunakan AJAX berperilaku lebih seperti aplikasi mandiri
dari halaman web yang khas. Halaman akan diperbaharui secara dinamis
sehingga memungkinkan respon yang lebih cepat dalam interaksi dengan
pengguna.
Selain kelebihan, AJAX
berikut. a) Browser Integrasi
juga
memiliki beberapa
keuntungan
sebagai
Halaman yang dibuat secara dinamis terkadang tidak sesuai dengan
browser. Saat memperbaharui halaman web dinamis, pengguna akan sulit
untuk pengguna untuk bookmark keadaan tertentu dari aplikasi.
b)
Respon Waktu
Interval antara
permintaan pengguna dan respon server
dipertimbangkan dengan hati-hati selama pengembangan AJAX.
c)
perlu
Search Engine Optimization
Website yang menggunakan AJAX untuk memuat data harus diindeks oleh
mesin pencari sehingga data yang diberikan setara dalam format yang
dapat dibaca oleh mesin pencari, karena umumnya mesin pencari tidak
mengeksekusi kode Javascript yang diperlukan untuk fungsi AJAX.
d)
Penyesuaian Javascript
AJAX bergantung pada Javascript yang biasanya diterapkan secara
berbeda oleh browser satu dengan yang lainnya. Karena itu, situs web
yang menggunakan Javascript mungkin perlu diuji di beberapa browser
untuk memeriksa masalah kompatibilitas.
Modul Praktikum Web Based Programming
Page 3
Koneksi ke Database
Jika ingin mengakses database bisa menggunakan JDBC (Java Database
Connectivity). JDBC adalah salah satu API (Application Programming Interface) Java
yang digunakan untuk menangani koneksi ke database.
Kelebihan JDBC :
1. Dapat mengakses beberapa Oracle, MySQL, Access dan lain-lain tergantung
dengan jenis JDBC yang dipakai.
2. Dapat berjalan pada sembarang platform yang mempunyai Java Virtual
Machine(JVM).
Fungsi JDBC :
1. Membangun sebuah koneksi ke data source.
2. Mengirim statement ke data source.
3. Mengeksekusi hasil dari statement.
Modul Praktikum Web Based Programming
Page 4
CONTOH
Langkah-langkah adalah sebagai berikut :
1. Buka eclipse pada computer dan masuk ke workspace praktikan masing-masing
2. Buat package model dan buat file user.java
Modul Praktikum Web Based Programming
Page 5
3. Pilih folder WebContent lalu buat index.jsp
Ketikkan syntax berikut :
Modul Praktikum Web Based Programming
Page 6
Modul Praktikum Web Based Programming
Page 7
4. Pilih folder WebContent lalu buat input.jsp
Ketikkan syntax berikut :
Modul Praktikum Web Based Programming
Page 8
Modul Praktikum Web Based Programming
Page 9
5. Pilih folder WebContent lalu buat view.jsp
Ketikkan syntax berikut :
Modul Praktikum Web Based Programming
Page 10
6. Buat package controller, kemudian buat servlet PraktikumDB.java
Ketikkan syntax berikut :
Modul Praktikum Web Based Programming
Page 11
Modul Praktikum Web Based Programming
Page 12
7. Buat package
berikut:
database,
kemudian buat DatabaseAkses.java
Modul Praktikum Web Based Programming
Page 13
Ketikkan syntax
Modul Praktikum Web Based Programming
Page 14
Modul Praktikum Web Based Programming
Page 15
Modul Praktikum Web Based Programming
Page 16
8. Pada Package Database, buat file UserService.java. Kemudian ketikkan
code berikut:
9. Aktifkan Apache dan MySql di XAMPP Control Panel.
10. Buat Database “db_kereta”. OK
11. Buat tabel dengan nama “tb_user” dengan isi tabel seperti dibawah.
12. Run index.jsp
Modul Praktikum Web Based Programming
Page 17
Modul Praktikum Web Based Programming
Page 18