Pertemuan Ke 11

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.

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

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

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.

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.

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