Pertemuan Ke 11

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

• Selesai! mari kita buat file baru dengan nama tambah-kota.html di folder pages dan isikan code dibawah ini. agar User Interface tambah-kota bisa tampil.

Okeh, Dari tahap ini kita sudah bisa menuliskan kata kunci di input tambah kota dan juga bisa mendeteksi per huruf ketika di ketik (bisa kalian cek di console).

Selanjutnya kita fokus untuk memproses pencarian data sesuai kata yang diketik di input tambah kota (autocomplete). Sebelum itu silahkan kalian masukkan proses penambahan data pada tabelKota yaa.... salin dan letakan di SQL phpmyadmin.

Berhasil ya insert data pada tabelKota, buka file tambah-kota.html Silahkan kalian salin code dibaawah ini yang teks tebal agar bisa melakukan load data kota dan juga melakukan pencarian data sesuai dengan kata kunci.

Setelah kita salin, terdapat code pemanggilan fungsi seperti:

// refresh data kota : panggil fungsi

load_data_kota();

Untuk fungsi load_data_kota() masih belum kita buat fungsinya. Mari kita tambahkan fungsi tersebut agar bisa dipanggil, fungsi tersebut diletakkan di file index.html, Fokus teks tebal...

Sekarang kita lihat pada fungsi load-data_kota terdapat link ke server-api dengan variabel api_get_all_nama_kota .

OK sekarang kita tambahkan link yang mengarah ke bagian server-api. Buat code di bagian app.js letakkan di bawahnya

var api_get_data_instansi = api+"Instansi/get_data_instansi";

dan salin code berikut:

var api_get_all_nama_kota = api+"Kota/get_all_nama_kota";

Link sudah dibuat sekarang kita mengarah ke pembuatan Controller Kota dan fungsi api_get_all_nama_kota.

Buat file baru pada server-api/applications/controllers/Kota.php lalu salin code berikut:

Selesai, pada code tersebut terdapat code yang mengarah kebagian models seperti:

// cek jumlah tabelkota Conditional (ternary) operator

$jumlah_kota = $this->M_tabelKota->cek_jumlah_data();

dan

// mengirim baris awal dan batas ke models

$get = $this->M_tabelKota->m_get_all_kota($baris_awal, $batas);

Sekarang kita membuat Models baru agar code diatas bisa dijalankan sesuai fungsinya. Buat file baru pada models dengan nama M_tabelKota.php lalu isikan dengan code dibawah ini ya...

OK, Kita jalankan aplikasinya

Bisa kalian lihat hasil gambar dibawah ini, kita sudah bisa mendapatkan data dari backend. dan juga menampilkan data tersebut di Hasil Kota. Untuk input tambah kota jangan di ketikan apapun karena nnti pasti akan terjadi ERROR.

OKEH! Kita lanjutkan agar proses pencarian nama kota berjalan dengan lancar. Buka file tambah-kota.html disitu terdapat link:

// Do Ajax request to Autocomplete data, Mendapatkan nilai dari backend

app.request({

url: api_get_cari_kota,

...

Mari kita buatkan link tersebut dibagian app.js salin code berikut dan letakan di bawahnya var api_get_all_nama_kota

var api_get_cari_kota = api+"Kota/get_cari_kota";

Selanjutnya kita mengarah ke bagian backend. Buka file Kota.php tambahkan fungsi baru sesuai code dibawah ini.

Terdapat code mengarah kebagian models dengan code:

// mengirim kata kunci ke models untuk dicocokan dengan data pada table

$get = $this->M_tabelKota->m_cari_nama_kota($kata_kunci);

mari kita buatkan fungsi tersebut dibagian model M_tabelKota.php salin code berikut ini:

SELESAI sudah melakukan pencarian nama kota. Hasil seperti gambar dibawah ini:

Langkah selanjutnya kita mengarah ke tombol Tambah. Silahkan cek file tambah-kota.html pastikan ada code:

<button type="button" class="col button button-fill color-green" @click="click_tambah_kota_kota">Tambah</button>

Code tersebut akan mengarah ke bagian fungsi pada file tambah-kota.html Silahkan tambahkan code untuk melakukan pemrosesan tambah data kota. Seperti code berikut:

Seperti biasa langkah selanjutnya sesudah melakukan code request. Kita buat link untuk mengarah kebagian backend.

var api_get_cari_kota = api+"Kota/get_cari_kota";

var api_post_nama_kota = api+"Kota/post_nama_kota";

Setelah mengarah ke bagian backend selanjutnya kita buat fungsi baru dengan nama post_nama_kota pada file controller Kota.php isi codenya sesuai dibawah ini:

Code diatas terdapat pemanggilan ke models seperi: cek_nama_kota_no_like() , tambah_data()

salin code dibawah ini dan letakkan di file M_tabelKota bagian bawah sendiri.....

Selesai. Sekarang ketika kita berada dibagian view tambah-kota dan ingin kembali ke view tambah-kunjungan maka pilih kota akan otomatis di reload datanya agar update.

Untuk bisa sesuai konsep pada code pageBeforeRemove di file tambah-kota.html isikan code berikut:

// load data kota

load_data_kota_select();

Selanjutnya kita menambahkan fungsi load_data_kota_select() di index.html isikan code seperti dibawah ini: letakkan dibawahnya fungsi load_data_kota(){}

OK Silahkan di jalankan...

ternyata pilihan kota masih belum ada isinya, padahal di database sudah terdapat datanya.

agar bisa menampilkan data. Buka file tambah-kunjungan.html cari code berikut ini:

<div class="item-input-wrap input-dropdown-wrap">

<select name="tk_kota" placeholder="Please choose...">

<option value="">--Pilih Kota--</option>

</select>

</div>

tambahkan attribute ID pada tag html select, fokus teks tebal

<select name="tk_kota" id="tk_kota" placeholder="Please choose...">

<option value="">--Pilih Kota--</option>

</select>

OK jalankan lagi.... pasti berhasil

OK LANGKAH TERAKHIR yaitu: Ketika berada di view tambah-kunjungan maka pilihan kota sudah harus di load datanya.

OK sekarang buka file tambah-kunjungan.html tinggal tambahkan codenya di bawahnya self.autocompleteDropdownAjaxTypeahead = app.autocomplete.create({ seperti code dibawah ini salin yang teks tebal ya...