Pertemuan Ke 11

KELAS XII SEMESTER GANJIL

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

Masih berada di file tambah-kunjungan.html kita rubah bagian code

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

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

</a>

menjadi

<a href="javascript:void(0);" @click="click_tambah_daerah" class="item-media elevation-3 add-data">

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

</a>

Jangan dijalnkan dulu aplikasinya. Silahkan buat fungsi click_tambah_daerah didalam file tambah-kunjungan.html.

Didalam fungsi click_tambah_daerah terdapat perintah untuk menampilkan view baru yaitu view tambah-daerah dengan membawa nilai id kota melalui Query String. lebih jelasnya lagi lihat code berikut. Perhatikan teks tebal ya...

click_tambah_daerah tambah-kunjungan

Jangan dijalankan dulu. Kita sudah membuat router.navigate dan sudah membuat alamat di routes.js untuk router tambah-daerah Tinggal kita membuat sebuah file baru dengan nama tambah-daerah.html letakkan di mobile/pages/ lalu salin code dibawah ini

tambah-daerah file baru

Silahkan dijalankan dan lakukan klik pada tombol plus pada daerah. Maka kita akan diarahkan ke bagian view tambah-daerah

  • Hasilnya seperti ini.

  • Konsep dari view ini adalah:

    • ketika dibuka akan load data kota dan sekaligus memilih bagian kota yang sudah dipilih di view tambah-kunjungan.

    • ketika dibuka load data daerah sesuai kota yang telah di pilih di input Kota*.

    • Input Tambah daerah ketika diketikan sesuatu maka otomatis akan load data sesuai kota dan juga nama daerahnya.

    • menampilkan nama daerah sesuai input daerah (pencarian).

    • jika tidak ditemukan nama daerah maka akan ada pemberitahuan untuk klik tombol tambah.

OK! mari kita penuhi konsepnya satu persatu.

Load data kota

menampilkan data kota didalam tag html select dan option (pilihan). Buka file tambah-daerah.html Salin code dibawah ini yang teks tebal...

load_data_kota_select pageinit tambah-daerah

Dilihat dari code tersebut kita sudah pernah membuat fungsi tersebut. Tetapi fungsinya masih terpaku oleh 1 kondisi saja. lihat code berikut:

$('#tk_kota').html('<option value="">--Pilih Kota--</option>' + hasil);

Tujuan kita fungsi load_data_kota_select bisa digunakan dibeberapa kondisi, agar bisa diberbagai kondisi fungsi harus diberikan parameter. Seperti code berikut ini setelah dilakukan perubahan. Fokus di teks tebal lalu lakukan salin dan tempel ya...

load_data_kota_select perubahan index

Setelah melakukan perubahan pada fungsi sekarang kita cari file mana saja yang memanggil fungsi load_data_kota_select juga kita tambahkan 1 arguments yang harus dikirimkan. Berikut file yang memanggil fungsi tersebut:

    • file tambah-kota.html

    • file tambah-kunjungan.html

Oke mari kita eksekusi. Kita tambahkan 1 argument dengan nilai nama id yang dituju. Rubah code pada file tambah-kota dan tambah-kunjungan

load_data_kota_select();

menjadi

load_data_kota_select('tk_kota');

Penjelasan tk_kota adalah nilai dari attribut id yang nantinya digunakan acuan untuk menaruh sebuh code html.

Memilih Kota sesuai QueryString

Ketika data kota sudah di load maka akan memilih secara otomatis data kota sesuai queryString. untuk codenya seperti berikut...

setTimeout pageInit index

Hasilnya seperti ini

  • tambah kunjungan kota pilih jombang

  • di tambah daerah otomatis dipilih kota jombang

Konsep selanjutnya:

  1. setiap Kota dipilih akan melakukan load data daerah sesuai kota tersebut.

  2. hasil load data akan diletakkan di area preload (list)

Untuk memenuhi konsep ke 1. Kita sudah melakukannya tinggal kita proses request ke server-api. Bukti bahwa suda melakukannya perhatikan code teks tebal:

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

<select name="td_kota" id="td_kota" @change="click_pilih_kota" placeholder="Please choose..." autofocus>

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

</select>

</div>

@change sama dengan onchange difungsikan ketika sebuah pilihan telah selesai dipilih maka akan memproses sebuah fungsi. Dari sini kita juga sudah membuat fungsi click_pilih_kota di bagian methods.

OK sekarang kita lihat fungsi click_pilih_kota. Salin code berikut yang teks tebal...

click_pilih_kota load_data_daerah tambah-daerah

Code didalam click_pilih_kota terdapat pemanggilan fungsi load_data_daerah(pilih_kota); fungsi ini diletakkan di index.html Silahkan buka file index.html lalu tambahkan code dibawah ini:

load_data_daerah index

Dilihat dari code diatas kita melakukan request dengan membawa data kota seperti ini app.request.post(api_get_all_nama_daerah_dari_kota, { kota: id_kota }, function (data, status, xhr)

OK mari kita buat link untuk mengarah ke bagian server-api. Tambahkan code berikut di file app.js

var api_post_nama_kota = .....

var api_get_all_nama_daerah_dari_kota = api + "Daerah/get_all_nama_daerah_dari_kota";

Setelah membuat link, Kita sekarang belum mempunyai controller Daerah dan fungsi get_all_nama_daerah_dari_kota. OK sekarang tambahkan controller Daerah.php dan isikan code sebagai berikut:

Daerah controller

Setelah membuat controller dan fungsi. Didalam code tersebut terdapat pemanggilan model M_tabelDaerah dengan fungsi

$this->M_tabelDaerah->cek_jumlah_data()

$this->M_tabelDaerah->m_get_all_daerah()

Pada tahap ini kita belum mempunyai model M_tabelDaerah beserta fungsinya mari kita tambahkan file dan juga filenya silahkan salin code dibawah ini

M_tabelDaerah cek_jumlah_data m_get_all_daerah

  • Berhasil!

  • Silahkan kalian jalankan.

  • Data masih kosong karena kita belum proses tambah data

OK kita lanjutkan ke konsep selanjutnya.

Ketika tambah daerah diketikan sesuatu otomatis akan melakukan pencarian dan list data daerah akan menyesuaikan. Perhatikan code berikut

<input type="text" id="td_nama_daerah" autocomplete="off" placeholder="tulis daerah disini">


Disini kita akan memanfaatkan attribute ID untuk mengetahui input tersebut sedang dilakukan pengetikan maka akan eksekusi pencarian ke server-api.

OK kita kembali lagi ke file tambah-daerah.html pada bagian pageInit. salin code berikut yang teks tebal

td_nama_daerah keyUp page init tambah daerah

Code diatas terdapat api_get_cari_daerah dengan mengirimkan data nama daerah dan id kota. Sekarang kita tambahkan link menuju server-api. Mengarah ke file app.js tambahkan code berikut salin teks tebal:

var api_get_all_nama_daerah_dari_kota = api + "Daerah/get_all_nama_daerah_dari_kota";

var api_get_cari_daerah = api+"Daerah/get_cari_daerah";

OK kita tambahkan fungsi get_cari_daerah di file Daerah.php perhatikan code teks tebal silahkan kalian salin dan tempel...

get_cari_daerah Daerah controller

Dilihat dari code tersebut terdapat code

$get = $this->M_tabelDaerah->m_cari_nama_daerah($kata_kunci, $id_kota);

Buka model M_tabelDaerah Selanjutnya kita menambahkan fungsi pada model dengan nama m_cari_nama_daerah. Salin code berikut:

m_cari_nama_daerah model m_tabelDaerah

  • Selesai!

  • Jalnkan aplikasi

  • Coba ketikan sesuatu pada inpu tambah daerah akan menampilkan data sesuai dengan database

  • Kata kunci jika tidak ditemukan akan menampilkan pemberitahuan silahkan klik tambah

Konsep terakhir yaitu menambahkan data daerah sesuai kota yang dipilih.

Buka file tambah-daerah.html didalam code tersebut terdapat code untuk menambahkan data daerah seperti:

<p class="row">

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

</p>

Code tersebut mengarah ke bagian fungsi didalam file tambah-daerah.html OK sekarang salin code dibawah ini yang teks tebal:

api_post_nama_daerah fungsi metods

Dari code tersebut terdapat request ke server-api. Mari kita buatkan link di file app.js salin code teks tebal yaa:

var api_get_cari_daerah = api+"Daerah/get_cari_daerah";

var api_post_nama_daerah = api + "Daerah/post_nama_daerah";


Sekarang kita tambahkan fungsi post_nama_daerah di file Daerah.php salin code berikut:

post_nama_daerah controller Daerah

Pada code diatas terdapat code:

$get = $this->M_tabelDaerah->cek_nama_daerah_no_like($nama_daerah, $id_kota);

Fungsi ini digunakan untuk memberitahu pengguna bahwa nama daerah sudah ada. OK Mari kita buat fungsi dari cek_nama_daerah_no_like pada file M_tabelDaerah.php lalu salin code berikut:

cek_nama_daerah_no_like models M_tabelDaerah

Selanjutnya jika nama daerah tidak ada yang sama maka akan melangkah ke bagian fungsi tambah data seperti ini:

$getTabel = $this->M_tabelDaerah->tambah_data($data_tambah);

Mari kita tambahkan fungsi tersebut di file M_tabelDaerah.php salin code dibawah ini ya...

tambah_data models M_tabelDaerah

  • Berhasil.

  • Konsep pada view tambah daerah sudah selesai.

  • Setelah kita lihat

  • ada yang kurang seperti gambar disamping

  • seharusnya badge warna merah seharusnya nilainya 0 ketika data tidak ditemukan

OK mari kita eksekusi

Buka file index.html lalu ke bagian fungsi load_data_daerah tambahkan code yang teks tebal ya, letakkan sesuai pada code dibawah...

load_data_daerah penambahan code index

OK Selanjutnya kita mengisi bagian ketika kita kembali ke view sebelumnya maka akan melakukan load data daerah.

Buka file tambah-daerah.html lalu pergi kebagian pageBeforeRemove. Salin code dibawah ini teks tebal

pageBeforeRemoveah load_data_daerah_select tambah-daerah

OK jangan dijalankan dulu. Pada tahap ini nilai id kota yang kita ambil adalah nilai yang berada di queryString bukan nilai id kota yang di pilih di view tambah daerah.

Mari kita buat fungsi di file index.html yaa

salin code berikut teks tebal:

load_data_daerah_select index fungsi

Dilihat dari code ada permintaan request ke api_get_all_nama_daerah_dari_kota. Tetapi kita sudah pernah membuat api tersebut jadi langsung kita eksekusi dibagian tag html select.

Silahkan kalian buka file tambah-kunjungan.html perhatikan code

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

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

</select>

code tersebut masih belum terdapat attribute ID mari kita tambahkan menjadi seperti ini:

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

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

</select>

SEKARANG beralih ke Konsep view tambah-kunjungan

  • Ketika memilih kota pilihan daerah otomatis terisi sesuai kota yang dipilih

OK perhatikan code berikut:

<div class="item-inner col-90">

<div class="item-title item-label">Kota</div>

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

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

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

</select>

</div>

</div>

Kita tambahkan sebuat attribute seperti ini

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

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

</select>


Lalu kita buat fungsi tersebut di file tambah-kunjungan.html salin code berikut, Perhatikan teks tebal ya...

click_pilih_kota_select tambah-kunjungan

OK selesai.

Dilihat dari gambar kita sudah bisa melakukan perubahan pada pilihan daerah.