Langsung ke konten utama

TUGAS 7 PEMROGRAMAN WEB (D) - AJAX Sederhana


Tugas kali ini membuat website yang mengimplementasikan AJAX atau Asynchronous JavaScript and XML. AJAX sering digunakan untuk membuat website lebih responsif dan interaktif serta mempercepat proses request ke suatu server. Di sini terdapat 2 aplikasi, yaitu request data untuk mengubah konten halaman tanpa berpindah/reload, dan satu lagi filter data daerah dalam kolom pencarian. Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), JavaScript (internal), dan SQL. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai 000webhost.

Konten dari website:

  1. Main page, berisi halaman untuk redirect aplikasi implementasi AJAX mana yang akan dicoba/dipilih.
  2. Request page, berisi halaman aplikasi request data untuk mengubah konten halaman tanpa reload.
  3. Filter page, berisi halaman aplikasi filter data daerah.

Tampilan Website

  1. Main page

  2. Request page (sebelum button diklik)
    • Halaman ini memakai index.html (akan dilampirkan di bawah) sebagai halaman utama. Nantinya data-data yang di-load akan muncul di halaman ini.

  3. Request page (setelah button diklik)
    • Ketika menekan button "Tampilkan Kalimat", maka teks di bawahnya akan berubah sesuai isi dari tampil.html (akan dilampirkan di bawah).

  4. Filter page
    • Halaman ini memakai index.php (akan dilampirkan di bawah) sebagai halaman utama untuk menampilkan filter data daerah. Database yang dipakai terdapat di sini.

Source Code

  • index.html (Main Page)
  • index.html (Request Page)
  • tampil.html (Request Page)
  • index.php (Filter Page)
  • koneksi.php (Filter Page)
  • get_provinsi.php (Filter Page)
  • get_kabupaten.php (Filter Page)
  • get_kecamatan.php (Filter Page)
  • get_kelurahan.php (Filter Page)

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 3 PEMROGRAMAN WEB (D) - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan JavaScript serta  VSCode  sebagai  text editor . Di website ini, saya mengaplikasikan penggunaan embed video dari Youtube dan image carousel atau slideshow . Laman website-nya dapat diakses pada  link berikut . Untuk  hosting  web sendiri memakai  Netlify . Konten dari website: Main page , berisi daftar makanan, masakan populer, kontak dari warung tegal, serta menu apa saja yang tersedia di dalam website. Tampilan Website Main page Source Code index.html style.css
Posting Komentar
Baca selengkapnya

ETS PEMROGRAMAN WEB (D) - Web Apps

SOAL Jelaskan istilah-istilah berikut kemudian berikan contohnya! HTML element HTML tag CSS selector AJAX Auto2000 adalah sebuah perusahaan penjualan mobil-mobil merk Toyota. Selain menjual mobil, Auto2000 juga melayani servis dan perbaikan kendaraan purna jual. Manajemen menghendaki para pelanggan yang sudah membeli mobil di showroom -nya kelak juga menjadi pelanggan bengkel untuk servis dan perawatan kendaraannya. Auto2000 menginginkan kegiatan perawatan kendaraan para pelanggannya terus dilakukan secara kontinyu di bengkel-bengkel tempat pelanggan membeli kendaraannya. Oleh karena itu, perusahaan membutuhkan sebuah sistem informasi yang dapat mengelola hubungan antara perusahaan dengan pelanggan agar dapat dimanfaatkan c ustomer care perusahaan. Pada saat ini, kegiatan yang dilakukan pada customer care untuk mengelola data informasi kepada pelanggan dirasakan kurang efektif oleh perusahaan. Buatlah desain front end penanganan pelayanan pelanggan dan implementasikan desainnya! Kem
Posting Komentar
Baca selengkapnya

TUGAS 6 PEMROGRAMAN WEB (D) - Form Login & Contact Us dengan Bootstrap

  Tugas kali ini membuat website form login dan contact us menggunakan salah satu framework CSS paling populer, yaitu Bootstrap . Dalam proses pengerjaannya, menggunakan HTML , CSS (Bootstrap) , dan JavaScript (internal). JavaScript di sini dipakai untuk menampilkan alert bahwa data telah di- submit atau dikirim. Laman website-nya dapat diakses pada link berikut . Untuk hosting web sendiri memakai Netlify . Konten dari website: Login page , berisi halaman login sebagai tampilan awal ketika website pertama kali dijalankan.  Ada beberapa kolom yang semuanya wajib diisi dan tidak boleh kosong , yaitu: Email , harus berformat seperti email pada umumnya. Password Contact us page , berisi halaman contact us guna mengirim pesan ke pemilik web. Ada beberapa kolom yang semuanya  wajib diisi  dan tidak boleh  kosong , yaitu: Name Email , harus berformat seperti email pada umumnya. Phone Message Di tiap page , bagian bawah form,   terdapat tautan ( hyperlink ) yang mengarahkan page satu
Posting Komentar
Baca selengkapnya