Hal yang harus diperhatikan dalam penggunaan AJAX adalah: XHTML dan CSS digunakan untuk menandai dan mempercantik tampilan informasi.

Transkripsi

1 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 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 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 CSS digunakan untuk menandai dan mempercantik tampilan informasi. XMLHttpRequest objek yang digunakan untuk pertukaran data asynchronous dengan web server. Modul Praktikum Web Based Programming Page 1

2 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

3 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 juga memiliki beberapa keuntungan sebagai berikut. a) Browser Integrasi 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 perlu dipertimbangkan dengan hati-hati selama pengembangan AJAX. c) 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

4 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

5 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

6 3. Pilih folder WebContent lalu buat index.jsp Ketikkan syntax berikut : Modul Praktikum Web Based Programming Page 6

7 Modul Praktikum Web Based Programming Page 7

8 4. Pilih folder WebContent lalu buat input.jsp Ketikkan syntax berikut : Modul Praktikum Web Based Programming Page 8

9 Modul Praktikum Web Based Programming Page 9

10 5. Pilih folder WebContent lalu buat view.jsp Ketikkan syntax berikut : Modul Praktikum Web Based Programming Page 10

11 6. Buat package controller, kemudian buat servlet PraktikumDB.java Ketikkan syntax berikut : Modul Praktikum Web Based Programming Page 11

12 Modul Praktikum Web Based Programming Page 12

13 7. Buat package database, kemudian buat DatabaseAkses.java Ketikkan syntax berikut: Modul Praktikum Web Based Programming Page 13

14 Modul Praktikum Web Based Programming Page 14

15 Modul Praktikum Web Based Programming Page 15

16 Modul Praktikum Web Based Programming Page 16

17 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

18 Modul Praktikum Web Based Programming Page 18