Pertemuan Ke 11

KELAS XII SEMESTER GANJIL

Sekilas Cerita:

Pada pertemuan kali ini, kita akan membuat project dengan judul aplikasi kunjungan

silahkan cek di page ProjectKunjungan

PERTEMUAN KALI INI KITA HARAP SUDAH BISA MENYELESAIKAN PROJECT KITA. KARENA SEBENTAR LAGI KITA AKAN MELAKSANAKAN PENILAIAN TENGAH SEMESTER (PAS). SETELAH PTS KITA AKAN MENGARAH KE CORDOVA UNTUK PENYEDIA LIBRARY DAN JUGA BUILD APLIKASI.

Materi: Pre Loader (istilah)

Sebuah efek ketika bagian/content tersebut melakukan load data. Efek seperti ini digunakan agar pengguna tahu bahwa proses load data masih berjalan.

Materi: Autocomplete (istilah)

Sebuah efek ketika bagian/content tersebut melakukan load data. Efek seperti ini digunakan agar pengguna tahu bahwa proses load data masih berjalan.

implementasi code: halaman Kunjungan, tambah instansi, daerah, dan kota.

Silahkan Download aplikasi-kunjungan (sudah bisa daftar akun, login, dan pilih keperluan) klik DISINI cari aplikasi-kunjungan-pilih-keperluan

Pastikan kalian sudah mempunyai Databasenya ya....


Persiapan awal pastikan kalian sudah mengerjakan project aplikasi-kunjungan sesi pilih keperluan di pertemuan ke-10, jika belum tuntas/masih ada error silahkan download projectnya diatas.


silahkan kalian persiapkan datanya seperti biasa. lalu kita akan menambahakan code pada pertemuan kali ini.

KONSEP

Kita kali ini akan meneruskan penambahan code pada file tambah kunjungan dibagian instansi. Jadi konsepnya seperti ini:

  • Pengguna akan menuliskan nama instansi.

  • Setiap instansi menambah 1 huruf otomatis akan melakukan pencarian sesuai dengan database.

  • Jika nama instansi yang ditulis pengguna tidak terdapat di database.

  • Ketika melakukan penyimpanan data kedalam tabelKunjungan.

  • Otomatis nama instansi juga akan tersimpan di tabelInstansi.

  • selesai! Faham yaa....

Ok, agar bisa dilakukan sesuai konsep kita perlu menambahkan autoComplate yang sudah di sediakan oleh framework7.

Buka file tambah-kunjungan.html Code seperti dibawah ini, silahkan kalian salin dan letakan di file tambah-kunjungan dibagian pageInit, Fokus teks tebal

pageinit tambah-kunjungan

Langkah awal/struktur dari autocomplete ajax sudah kita tambahkan, Sekarang agar kita bisa mendapatkan data dari database mari kita buatkan link untuk mengarah ke bagian backend. Perhatikan code

url: api_get_data_instansi, kita buat link di app.js yaa.

buka file app.js

Salin code dibawah ini di bawahnya var api_cari_nama_keperluan ....

var api_get_data_instansi = api+"Instansi/get_data_instansi";

Okeh kita lanjut kebagian backend untuk proses pengambilan data. Tambah file Controller dengan nama Instansi.php lalu salin code dibawah ini

Buka file Instansi.php

Instansi controller server-api

Selesai, Mari kita buat models baru ya... karena di code controller Instansi terdapat

$this->M_tabelInstansi->m_get_data_instansi($kata_kunci);

Sebelum salin code dibawaah ini buatlah terlebih dahulu file M_tabelInstansi.php di models.

M_tabelInstansi models

Selesai. Agar bisa dijalankan silahkan Kirim Code SQL dibawah ini agar tabelInstansi di database server kalian ada datanya.

buka database lalu pilih tabelInstansi pilih tab SQL letakkan dan kirim.

sql insert instansi

Selesai. Aplikasi silahkan dijalankan

Konsep sudah sesuai. Tinggal Proses selanjutnya. Hal ini kita belum sampai melakukan penambahan kunjungan yaa.... akan kita lakukan ditahap selanjutnya.

Perhatikan gambar dibawah ini. akan muncul sebuah autoComplete untuk kata kunci yang sesuai dengan database

OK! Berhasil

Selanjutnya kita beralih kebagian pemilihan kota dan penambahan kota.

Kita fokus pada file tambah-kunjungan.html. Di file tersebut terdapat code:

<a href="/tambah-kota/" class="item-media elevation-3 add-data">

<i class="icon material-icons md-only">add</i>

</a>

Kita tambahkan routes terlebih dahulu. Buka file routes.js Salin code dibawah ini, yang teks tebal dan letakkan di file routes.js

kota-daerah routes js