Di postingan ini, saya akan menunjukkan proses pembuatan halaman yang menampilkan isi html lain dan halaman memilih daerah yang dibuat dengan menggunakan ajax. Langkah yang saya lakukan adalah:
1. Halaman index
Pertama saya membuat halaman index untuk mengarahkan ke halaman tugas-tugasnya. Saya menggunakan bootstrap untuk stylingnya. Di halaman ini hanya terdapat 2 button yang mengarah ke tugas 1 (Menampilkan data dari halaman lain) dan tugas 2 (Menampilkan nama daerah)
2. Menampilkan data dari halaman lain
Disini saya mengikuti dan memodifikasi tutorial di halaman website ini. Saya membuat tugas1.html yang merupakan tempat ajax digunakan dan juga tampil.html yang berisi data yang akan ditampilkan. Di halaman tugas1.html, terdapat button yang akan memanggil script ajax untuk menampilkan isi dari tampil.html. Selain itu juga terdapat button untuk kembali ke index.
 |
| Kode htmlnya |
Disini saya mengikuti dan memodifikasi tutorial berikut. Tetapi saya tidak membuat backend-nya dan memilih untuk menggunakan api yang telah ada, yaitu api berikut. Untuk menggunakan api tersebut, yang melakukan fork reponya dan mengaktifkan github pages untuk repo tersebut. Kemudian saya membuat halaman tugas2.html yang akan berisikan form select untuk provinsi, kabupaten, kecamatan, dan kelurahan, juga button untuk kembali ke index. Untuk select provinsi, data diambil menggunakan ajax ketika halaman sudah siap/terbuka. Sedangkan untuk select kabupaten, kecamatan, dan kelurahan, data diambil ketika ada perubahan pilihan.
 |
| Kode htmlnya |
 |
| Kode javascriptnya |
Tidak ada komentar:
Posting Komentar