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:

click_simpan_kunjungan penambahan code tambah-kunjungan

PROSES KIRIM DATA KE SERVER-API

Pada file tambah-kunjungan bagian fungsi click_simpan_kunjungan tambahkan code berikut:

api_post_tambah_kunjungan click_simpan_kunjungan post data tambah-kunjungan

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:

Kunjungan controller

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

cek_id_user MODEL USERS

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....

cek_id_keperluan model m_tabelkeperluan

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

cek_nama_instansi DAN tambah_data MODEL INSTANSI

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....

cek_id_daerah MODEL DAERAH

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

M_tabelKunjungan Model

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...

load_data_kunjungan INDEX

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:

ptr-content index

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

infinite-scroll index

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

block_data_kunjungan attribute id index

PERINTAH PULL TO REFRESH

Code dibawah ini difungsikan ketika class ptr-content telah dilakukan eksekusi. Dan akan menjalankan sebuah perintah load_data_kunjungan

ptr-content index

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

infinite-scroll-content index

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...

get_data_kunjungan kunjungan controller

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:

cek_jumlah_data m_get_data_kunjungan model m_tabelkunjungan

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