PERCOBAAN 4

CRUD JavaScript Dengan AJAX

I. TUJUAN
a. Mahasiswa mampu membuat program dengan menggabungkan fitur PHP dan
JavaScript
b. Mahasiswa mampu membuat program web yang dinamis
II. ALAT DAN BAHAN
a. Modul
b. Laptop
c. XAMPP
d. Visual Studio Code/Sublime
III. LANDASAN TEORI
AJAX (Asynchronous JavaScript and XML) merupakan suatu teknik baru dalam
dunia web, tetapi bukan merupakan bahasa pemrograman baru. AJAX adalah sebuah
teknologi yang dapat digunakan untuk membuat sebuah aplikasi web yang lebih baik,
lebih cepat, lebih interaktif, dan lebih responsif mirip dengan aplikasi desktop Dengan
adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat
daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses
loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan
dengan serverside programming seperti PHP, ASP, JSP dan lain-lain. Berikut beberapa
manfaat dari AJAX:
a. Validasi Data yang real time AJAX dapat melakukan proses validasi secara langsung
tanpa melalui proses refresh pada saat user melakukan pengisian data melalui form.
b. Autocomplete AJAX dapat digunakan untuk melakukan autocomplete pada saat user
sedang mengisi data pada sebuah form, dengan demikian karakter yang sedang dituliskan
oleh user akan bisa langsung dilengkapi oleh entry-entry atau masukan yang disarankan.
Contoh pada saat kita melakukan pencarian di yahoo atau google lalu kita mengetikkan
kalimat atau kata yang belum utuh maka secara otomatis akan tersedia daftar entry atau
masukan yang berkaitan dengan kalimat atau kata tersebut. Sehingga kita tidak perlu
repot mengetik kata atau kalimat secara lengkap.
 c. Refresh data dan server push Halaman web bisa mengambil data dari server tertentu
untuk menampilkan informasi terkini, misalnya ramalan cuaca, kurs dolar, jadwal
penerbangan, dan lain sebagainya. Karena hal tersebut halaman web dapat mengambil
data secara real time tanpa melalui proses refresh.
d. Menjadikan aplikasi desktop atau web lebih atraktif dan responsive Teknik-teknik
AJAX memungkinkan halaman web atau aplikasi desktop jika kita mengklik tombol
tertentu maka reaksi perubahannya akan terlihat pada halaman atau aplikasi tersebut.
contoh aplikasi yang menggunakan AJAX adalah aplikasi google maps, google suggest,
Gmail, yahoo, dan lain-lain

IV. LANGKAH KERJA

a. Download jQuery pada https://jquery.com › download
b. Simpanlah File jquery pada htdocs
c. Buatlah database dengan nama database mahasiswaweb2
d. Buatlah tabel dengan nama tabel datamahasiswa
(Nama,Kelas Dan Angkatan)
e. Buatlah File dengan nama file koneksi.php
f. Masukan Kode Program Berikut

g. Buatlah File dengan nama file index.php

h. Masukan Kode Program Berikut
i. Buatlah file dengan nama file ambilData.php
j. Ketikan kode program berikut

k. Buatlah file dengan nama file tambahData.php

l. Ketikan Kode Program berikut
m. Buatlah File dengan nama file ambildataID.php
n. Ketikan Kode Program Berikut

o. Buatlah File dengan nama file UpdateData.php

p. Ketikan Kode Program Berikut
q. Buatlah File dengan nama file hapusData.php
r. Ketikan Kode Program Berikut