Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas)

Menurut website resmi w3schools.com AJAX (Asynchronous JavaScript And XML) bukanlah bahasa pemrograman baru, melainkan seni bertukarnya data dengan server dan memperbaharui bagian dari suatu halaman web tanpa me-reload seluruh halaman web, sehingga aplikasi web terlihat lebih cepat dan lebih interaktif.

Pada implementasi script programnya ajax selalu menggunakan objek XMLHttpRequest, dimana objek XMLHttpRequest disupport hampir semua browser modern terkecuali IE5 dan IE6 menggunakan objek ActiveXObject. Objek XMLHttpRequest bertujuan untuk melakukan transaksi pertukaran data dengan server dibelakang layar, sehingga javascript Anda akan berkomunikasi secara langsung dengan server tanpa adanya reload seluruh halaman web, sehingga aplikasi web terlihat lebih cepat dan lebih interaktif.. Lain halnya lagi apabila Anda menggunakan javascript tradisional, dimana apabila Anda ingin mendapatkan atau mengirim suatu informasi ke dalam sebuah database atau sebuah file dalam server, maka Anda diharuskan membuat sebuah form HTML, dan user diharuskan untuk melakukan aksi klik pada tombol “submit“ untuk mengirim/mendapatkan informasi, sehingga user harus menunggu respon dari server, setelah server merespon permintaan user, maka sebuah halaman baru akan di-load untuk menampilkan hasil permintaan dari user pada layar desktop Anda. Dengan adanya kejadian seperti itu maka aplikasi web tradisional terkesan berjalan lambat.

Nah itulah sedikit gambaran tentang ajax yang penulis ketahui, untuk lebih jelasnya silahkan Anda browsing saja di google tentang ajax. Hee..

Pada pembahasan kali ini penulis akan membahas tentang ajax dengan studi kasus menampilkan data per-kelas. Terlebih dahulu Anda buat sebuah database dengan nama dbsekolah dan buat 2 buah table dengan nama siswa dan kelas, lalu masukan data pada masing-masing table tersebut seperti gambar dibawah ini :

ajax_combo

ajax_combo2

Selanjutnya buat file baru dengan nama ajax.php lalu perhatikan script program dibawah ini :

Pada file ajax.php terdapat script pemanggilan file tampil_data.php, dimana pada file tersebut akan dibuat query untuk menampilkan data siswa berdasarkan kelas. Jadi ketika user melakukan aksi pemilihan data (misalnya kelas B3 dipilih) maka objek XMLHttpRequest akan langsung melakukan transaksi dengan server dibelakang layar (dalam hal ini yaitu untuk menampilkan data siswa berdasarkan kelas), setelah itu data yang diminta oleh user akan tampil dihalaman web Anda atau layar desktop Anda tanpa adanya reload seluruh halaman web.

Oke, Kita lanjut ke pembahasan. Karena pada file ajax.php memanggil file tampil_data.php, maka kita buat file baru lagi dengan nama tampil_data.php, adapun script program untuk file tampil_data.php dapat dilihat dibawah ini :

Setelah selesai jalankan web browser Anda dengan mengetikan url yang sama seperti pertama kali Anda menjalankan program, yaitu localhost/ajax_combobox/ajax.php, maka browser akan terlihat seperti gambar dibawah ini :

ajax_combo4

Nah itulah sedikit implementasi singkat tentang teknik ajax, silahkan Anda ber-eksperimen menggunakan teknik ajax untuk mengembangkan aplikasi web Anda.

Penulis cukupkan sekian, untuk script programnya silahkan Anda download disini.

Sampai berjumpa lagi pada tutorial berikutnya.

Terima kasih..

Sumber : http://purbadian.com/read-article-6-implementasi-ajax-studi-kasus–menampilkan-data-perkelas.html

24 Comments on “Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas)”

  1. Greetings from California! I’m bored to tears at work so I decided to browse your blog on my iphone during lunch break Implementasi Ajax (Studi Kasus
    : Menampilkan Data Per-Kelas) – ITPOINT . I really like the information you
    provide here and can’t wait to take a look when I get home Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas)
    – ITPOINT . I’m shocked at how fast your blog loaded on my phone Implementasi Ajax
    (Studi Kasus : Menampilkan Data Per-Kelas) – ITPOINT . Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas) – ITPOINT .
    I’m not even using WIFI, just 3G Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas) –
    ITPOINT . Implementasi Ajax (Studi Kasus : Menampilkan Data Per-Kelas) – ITPOINT .
    Anyways, great site!

    1. Thank you bro greetings from Indonesia, if you have any suggestions or request aertikel that you want please, thank you

Leave a Reply

Your email address will not be published. Required fields are marked *