Pertemuan Ke 11
KELAS XII SEMESTER GANJIL
implementasi code: halaman Kunjungan, tambah instansi, daerah, dan kota.
PROSES SIMPAN KUNJUNGAN
Konsep dari simpan kunjungan ini adalah sebagai berikut:
Input / pilihan semua harus diisi lengkap jika tidak akan menampilkan pesan
Simpan kunjungan juga melibatkan pengguna yang sedang login
Tanggal kunjungan tidak boleh diisi melebihi dari tanggal sekarang
Proses simpan data, dari:
Keperluan: nilai yang di inputkan harus ada di database.
Instansi: nilai yang di inputkan harus ada di database, jika tidak ada maka nilai instansi akan dilakukan simpan data ke instansi
kota dan daerah: nilai yang diinputkan harus sesuai database
nama, tanggal, nomor hp, detail acara: harus sesuai format masing-masing
PENAMBAHAN ATTRIBUTE ID PADA INPUT DAERAH
Pada file tambah-kunjungan.html terdapat code
<select name="tk_daerah" placeholder="Please choose...">
<option value="">--Pilih Daerah--</option>
</select>
ditambahkan attribute id, menjadi seperti ini
<select name="tk_daerah" id="tk_daerah" placeholder="Please choose...">
<option value="">--Pilih Daerah--</option>
</select>
CLICK TOMBOL SIMPAN
Ketika data sudah diisi semua akan dilakukan simpan. Pada file tambah-kunjungan.html sudah terdapat tombol simpan dengan code sebagai berikut
<a href="#" class="col button button-fill color-blue" @click="click_simpan_kunjungan">Simpan</a>
Terdapat attribute @click berfungsi sebagai menjalankan fungsi pada file tambah-kunjungan.html, berikut code didalam fungsi click_simpan_kunjungan salin code berikut yang teks tebal:
PROSES KIRIM DATA KE SERVER-API
Pada file tambah-kunjungan bagian fungsi click_simpan_kunjungan tambahkan code berikut:
MEMBUAT VARIABEL DI APP
Dari code diatas mari kita tambahkan variabel di app.js agar variabel api_post_tambah_kunjungan bisa digunakan dan bisa mengarah ke bagian server-api. Salin code berikut teks tebal ya...
var api_post_nama_daerah = api + "Daerah/post_nama_daerah";
var api_post_tambah_kunjungan = api + "Kunjungan/post_tambah_kunjungan";
PEMBUATAN CONTROLLER KUNJUNGAN
Mari kita tambahkan controller baru dengan nama Kunjungan.php dan menambahkan fungsi post_tambah_kunjungan, lalu salin code berikut ini:
PENAMBAHAN FUNGSI PADA MODEL USER
Pada code diatas terdapat pemanggilan model seperti:
// cek nilai keperluan apakah terdapat di tabel keperluan
$get = $this->M_tabelUser->cek_id_user($id_user);
ini difungsikan untuk cek apakah yang menambahkan benar-benar berada di database id_user nya. mari kita tambahkan untuk pembuatan fungsi cek_id_user, Salin code dibawah ini teks tebal...
buka file M_tabelUser.php
PENAMBAHAN FUNGSI PADA MODEL KEPERLUAN
Pada code controller Kunjungan di bagian fungsi post_tambah_kunjungan terdapat code:
// cek nilai keperluan apakah terdapat di tabel keperluan
$get = $this->M_tabelKeperluan->cek_id_keperluan($keperluan_id);
code ini difungsikan untuk cek data id_keperluan apakah ada di database (keamanan). Tambahkan code dibawah ini di model M_tabelKeperluan.php teks tebal yaa....
PENAMBAHAN FUNGSI PADA MODEL KEPERLUAN
Pada code controller Kunjungan di bagian fungsi post_tambah_kunjungan terdapat code:
// cek nilai instansi apakah ada di tabel instansi jika tidak ada maka lakukan tambah data instansi
$get = $this->M_tabelInstansi->cek_nama_instansi($nama_instansi);
code ini difungsikan untuk cek data nama_instansi apakah ada di database (keamanan). Tambahkan code dibawah ini di model M_tabelInstansi. teks tebal yaa....
dan
Terdapat juga code seperti ini:
$hasil_tambah_instansi = $this->M_tabelInstansi->tambah_data($d_instansi);
code ini difungsikan untk menambahkan instansi jika nama instansi belum terdapat di database.
Salin code dibawah ini agar bisa memproses cek bagian nama instansi dan penambahan data. teks tebal
PENAMBAHAN FUNGSI PADA MODEL DAERAH
Pada code controller Kunjungan di bagian fungsi post_tambah_kunjungan terdapat code:
// cek nilai daerah apakah sudah sesuai dengan tabel daerah dan kota
$get = $this->M_tabelDaerah->cek_id_daerah($daerah, $kota);
code ini difungsikan untuk cek data id_daerah dan id_kota apakah ada di database (keamanan). Tambahkan code dibawah ini di model M_tabelDaerah.php teks tebal yaa....
PENAMBAHAN FUNGSI PADA MODEL KEPERLUAN
Pada code controller Kunjungan di bagian fungsi post_tambah_kunjungan terdapat code:
// proses tambah ke models
$getTabel = $this->M_tabelKunjungan->tambah_data($data_tambah);
code ini difungsikan untuk simpan data ke database. Berhubung kita belum pernah membuat model dengan nama M_tabelKunjungan.php mari kita buat... lalu isikan code berikut
SELESAI
Mari kita jalankan aplikasinya.
Dan hasilnya bisa disimpan tetapi kita terdapat error.
Ya pasti error karena kita belum membuat fungsi baru dengan nama load_data_kunjungan.
OK. error mari kita selesaikan.
MEMBUAT FUNGSI LOAD DATA KUNJUNGAN
Setelah berhasil melakukan simpan kunjungan, view akan dikembalikan ke awal (view utama) sekaligus memperbarui list data kunjungan.
Oleh karena itu kita memanggil fungsi load_data_kunjungan di file tambah-kunjungan setelah pemberitahuan "Disimpan berhasil".
OK, buka file index.html silahkan salin code dibawah ini teks tebal ya...
KONSEP VIEW UTAMA (VIEW LIST KUNJUNGAN)
Pada tampilan utama ini diharapkan bisa melakukan sebuah aksi seperti:
Melakukan Pull To Refresh
Batas menampilkan data kunjungan
infinite-scroll-content konsidis ini ketika sudah dibagian bawah akan otomatis ambil data list kunjungan
PENAMBAHAN ATTRIBUTE UNTUK PULL TO REFRESH
Agar bisa eksekusi sebuah perintah ptr-content atau pull to refresh kita akan menambahkan nilai class ptr-content pada class, berikut codenya...
<!-- halaman utama -->
<div class="page-content"></div>
menjadi seperti ini:
PENAMBAHAN ATTRIBUTE INFINITE SCROLL LIST KUNJUNGAN
Setelah menambahkan PTR sekarang kita mengarah kebagian infinite-scroll, Ketika content sedang dilakukan scroll ke atas setelah data-infinite-distance="300" atribut memungkinkan untuk mengonfigurasi jarak dari bagian bawah halaman (dalam px) untuk memicu refresh. Secara default, jika tidak ditentukan, nilainya akan 50 (px). Berikut codenya, Fokus pada teks tebal
<!-- halaman utama -->
<div class="page-content ptr-content" data-ptr-mousewheel="true">
<!-- preload top -->
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
</div>
menjadi
PENAMBAHAN ATTRIBUTE ID PADA LIST KUNJUNGAN
Pada list kunjungan masih belum terdapat attribute id untuk dijadikan patokan sebagai penambahan data kunjungan. Codenya sebagai berikut, fokus teks tebal
PERINTAH PULL TO REFRESH
Code dibawah ini difungsikan ketika class ptr-content telah dilakukan eksekusi. Dan akan menjalankan sebuah perintah load_data_kunjungan
INFINITE SCROLL
Memproses load data ketika scroll ke bagian bawah semakin mendekati akhir content, salin code dibawah ini agar bisa sesuai dengan konsep infinite scroll
KE-BAGIAN FUNGSI LOAD_DATA_KUNJUNGAN
Pembuatan fungsi load_data_kunjungan sudah kita buat tinggal Sekarang kita melakukan pembuatan link menuju server-api, Buka file app.js lalu tambahkan variabel berikut:
var api_post_tambah_kunjungan = api + "Kunjungan/post_tambah_kunjungan";
var api_get_data_kunjungan = api + "Kunjungan/get_data_kunjungan";
PEMBUATAN FUNGSI DI CONTROLLER KUNJUNGAN
Pada fungsi ini kita akan mendapatkan sebuah data yang terdapat informasi mulai dari:
Data kunjungan
total halaman
total data
jumlah batas data
Hal ini harus kita dapatkan agar bisa melakukan pengambilan data secara sedikit demi sedikit. Sesuai nilai batas yang masukan.
Salin Fungsi berikut kedalam file Kunjungan.php fokus teks tebal ya...
PENAMBAHAN FUNGSI PADA MODEL KUNJUNGAN
Ini kalian sudah tahu kita lakukan cek data apakah ada datanya dan penambahan fungsi pengambilan data dengan melakukan inner join ke berbagai tabel. Buka M_tabelKunjungan.php Salin code berikut ini:
JALANKAN APLIKASI
Hasilnya akan menjadi seperti ini, data kunjungan akan ditampilkan sebanyak 5 data.
Setelah dilakukan scroll ke atas dan samapai di akhir content terdapat efek preloader ini nanti akan terjadi load data lagi ke server untuk mengambil data sebanyak 5. Ketika jumlah halaman dan jumlah total halaman sama maka efek preloader akan hilang.
OK SELESAI, PROJECT APLIKASI-KUNJUNGAN
Kesimpulan/Hasil:
Kalian sudah tahu tentang konsep dari autocomplete.
Mengetahui cara mencari data melalui perintah LIKE dengan metode tombol cari.
Mengetahui Cara mencari data melalui perintah LIKE dengan metode KeyUp (mengetikan sesuatu data akan ditampilkan)
Mengambil data dan diletakan ke dalam element html select option.
Mengetahui cara kerja Kota dan daerah yang sesuai data kota.
Mengetahui validasi dari bagian server-api (backend)
Mengetahui kegunaan Limit (batas) pada SQL guna menampilkan data secara pagination (terkelompok)
Mengetahui cara menggunakan preload dan menghilangkannya
Mengetahui Perbedaan onclick dan onchange
Terimakasih