Show Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini saya akan berbagi tutorial cara membuat aplikasi input dan menampilkan data sederhana dengan teknik ajax. Keuntungannya, kalian bisa membuat single page application tanpa reload. Penasaran?, ayo ikuti tutorialnya berikut ini. Aplikasi yang kita akan buat adalah aplikasi input dan tampil data mahasiswa. Dimana dalam 1 halaman terdapat form input di sebelah kiri halaman, dan tabel data di sebelah kanan halaman. Pada latihan kali ini kita tidak menggunakan data api, tapi cukup meload component-component tertentu saja. Dan untuk mempercantik tampilan, saya menggunakan bootstrap. Semua library akan menggunakan cdn agar pembuatan lebih cepat dan mudah dimengerti. Membuat Halaman Input & Menampilkan Data dengan Jquery Ajax1. Membuat Database dan TabelBuatlah sebuah database baru dengan nama latihan, lalu buat tabel di dalamnya dengan nama mahasiswa. Adapaun struktur tabelnya dapat kalian lihat pada gambar di bawah ini.
2. Membuat File Koneksi ke DatabaseBuatlah sebuah folder baru di dalam folder xampp/htdocs dengan nama "webtanpareload". Lalu buat file connect.php di dalamnya. Copy script di bawah ini dan pastekan di file tersebut.
Buka xampp control panel, lalu hidupkan apache dan mysql kalian. Buka web browser lalu jalankan http://localhost/webtanpareload/connect.php. Jika tidak berhasil konek maka akan memunculkan tulisan gagal melakukan koneksi ke database. Dan jika berhasil halaman tidak akan memunculkan pesan apapun. 3. Membuat File index.phpKemudian buatlah sebuah file baru dengan nama index.php. Lalu copy script di bawah ini dan pastekan ke dalam file index.php.
Buka web browser lalu jalankan http://localhost/webtanpareload/index.php. Maka tampilannya akan tampak seperti gambar di bawah ini. Halaman yang kita buat belum menampilkan data apapun. Perhatikan <div id="tabeldata"></div>, nantinya data akan kita tampilkan di dalam div tersebut.
Penjelasan Script di AtasFungsi Input Data
saat #tombol-simpan diklik, maka #form-input akan divalidasi. Nama dan jurusan bertipe required: true, artinya harus diisi, jika kosong maka form tidak berhasil dikirimkan. Lalu submitHandler akan dijalankan jika validasi berhasil. Dimana data yang diinput akan dikirim ke simpan.php dan diproses di halaman tersebut, nanti kita harus membuat file terbebut. success: function () digunakan untuk melakukan aksi jika proses penyimpanan berhasil dilakukan. Fungsi update() adalah fungsi yang akan mengudpate ulang data yang terbaru dari database. Untuk penjelasannya akan dibahas di bawah ini. Sebelum ditutup, kita perlu mengosongkan form input sebelumnya. Kan gak mungkin, setelah input data formnya nggak dikosongin. Caranya dengan menambahkan document.getElementById('nama-idnya').value = "" Fungsi Tampil Data
fungsi update() bertujuan agar script yang lain bisa menggunakan fungsi ini. Karena biasanya setiap kali ada aksi, data terbaru harus ditampilkan. Biar nggak capek kita buat 1 fungsi dan tinggal pake di script-script lainnya saat dibutuhkan. Data yang akan kita update barasal dari datamahasiswa.php. Dimana di dalam file tersebut terdapat tabel yang berisi data dari database. $('#tabeldata').html(data). Digunakan untuk menampilkan tabel di dalam <div id="tabeldata"></div>. Fungsinya sama seperti include pada php, tapi ini menggunakan javascript. 4. Membuat File datamahasiswa.phpFile ini berisi tabel dan data yang diambil dari database. file ini akan kita gabungkan ke dalam file index. dengan menggunakan teknik ajax. Penjelasannya fungsinya ada di bagian penjelasan fungsi tampil data. Buatlah sebuah file baru dengan nama datamahasiswa.php. Lalu copy script di bawah ini dan pastekan ke dalam file tersebut.
Penjelasan Script di AtasKita buat sebuah tabel sederhana, dimana ada kolom nama, jurusan dan jenis kelamin. Lalu di bawahnya kita ambil data dari database dan meloopingnya data dari database dengan menggunakan while(). 5. Membuat File simpan.phpBuatlah file baru dengan nama simpan.php. Copy script di bawah ini dan pastekan ke dalam file tersebut.
Jalankan aplikasi kalian, buka http://localhost/webtanpareload/index.php. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Coba untuk menginput data baru dengan memasukkan nama, jurusan, dan jenis kelamin
Sekian tutorial cara input dan menampilkan data tanpa reload dengan jquery ajax. Semoga bermanfaat. Bagi kalian yang masih merasa bingung, silahkan tanya di kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa di tutorial seru lainnya. |