Pertemuan Ke 10

Sekilas Cerita:

Pada pertemuan kali ini, kita akan membuat project dengan judul aplikasi kunjungan

silahkan cek di page ProjectKunjungan

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.

Conditional ternary operator (php)

Operator Bersyarat adalah satu-satunya operator JavaScript yang mengambil tiga operan: kondisi diikuti dengan tanda tanya ( ? ), maka ekspresi untuk mengeksekusi jika kondisi ini truthy diikuti oleh titik dua ( : ), dan akhirnya ekspresi untuk mengeksekusi jika kondisinya palsu . Operator ini sering digunakan sebagai jalan pintas untuk if pernyataan. ternary ini juga bisa digunakan di pemrogrman PHP(kutipan)

ceil() (php)

ceil() adalah fungsi pembulatan angka ke atas, yang artinya bilangan desimal akan dibulatkan ke bilangan bulat terdekat di atasnya. Berikut ini cara penggunaannya, lihat script dibawah ini: (kutipan)

<?php

echo ceil(0.7); // Hasilnya = 1

echo "<br>";

echo ceil(1.2); // Hasilnya = 2

echo "<br>";

echo ceil(3.6); // Hasilnya = 4

?>

trim() (php)

Secara default bawaan PHP, fungsi trim() digunakan untuk menghapus spasi atau karakter whitespace dari sebuah string. Karakter spasi yang akan dihapus bisa berada di awal maupun di akhir string (kutipan). semisal [ saya adalah manusia ] kalo kita berikan trim maka hasilnya seperti ini [saya adalah manusia].

<?php

$name = " PanduanCode ";

$trim_name = trim($name);

echo $trim_name;

//maka output yang dihasilkan menjadi "PanduanCode"

?>

Operator LIKE (SQL)

Pada SQL anda dapat mencari data berdasarkan keyword yang anda masukkan ke dalam kotak pencarian. Query yang dapat anda gunakan adalah operator LIKE. Operator LIKE ini memang digunakan untuk melakukan pencarian data pada database, berdasarkan teks / huruf yang dimasukan. (kutipan)

Sintaks sederhana dari query LIKE adalah seperti ini :

SELECT kolom_1, kolom_2

FROM nama_table

WHERE nama_kolom_1

LIKE pattern;

implementasi code: halaman index, kunjungan, tambah instansi, keperluan, daerah, dan kota.

Silahkan Download Template Framework7 cari DISINI cari f7.zip

Silahkan Download aplikasi-kunjungan (daftar dan login) klik DISINI cari aplikasi-kunjungan-daftar-login

Pastikan kalian sudah mempunyai Databasenya ya....

Persiapan awal pastikan kalian sudah mengerjakan project aplikasi-kunjungan sesi daftar dan login di pertemuan ke-9, 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.

Fab ini nanti berfungsi untuk pindah ke halaman view yang lain untuk proses tambah kunjungan. Sebelum menampilkan view lagi silahkan tambahkan dulu alamatnya di routes seperti ini:

buka file routes.js di mobile/js/routes.js

perhatikan text yang bertuliskan tebal. tambahkan code tersebut di file routes.js

Buat file dengan nama tambah-kunjungan.html lalu isikan code berikut

Setelah membuat form tambah kunjungan sudah selesai sekarang tinggal melakukan langkah selanjutnya, Kita mulai dari kolom keperluan kita disuruh memilih data jika ada yang cocok kita pilih, kalau tidak cocok kita juga bisa menambahkan data keperluan.

Kita akan mengerjakan bagian keperluan dulu untuk melakukan pencarian data dan tambah data. buka file tambah-kunjungan.html isikan code berikut dan letakan di fungsi tambah_keperluan: function()

salin teks tebal

tambah_keperluan: function () {

// pindah ke halaman lain menggunakan navigate

app.views.main.router.navigate("/tambah-keperluan/");

},

Buat file dengan nama tambah-keperluan.html lalu isikan code berikut

User Interfae keperluan sudah siap. Tahap pertama kita menampilkan data dari tabelKeperluan dahulu.

Tahap pertama kita menampilkan data, Sebelum itu kita tambahkan efek reload terlebih dahulu masukan code dibawah ini di file mobile/index.html letakkan di dalam <script>...</script> paste dibagian bawah:

dan menambahkan fungsi untuk ketika ada error dari koneksi internet atau dari kegagalan API. sekarang kita buat fungsi baru dengan nama info_error letakkan dibawahnya fungsi preload_div() {...} yaaaa....

fungsi ini digunakan untuk bisa dipanggil di semua kondisi, dan lebih pentingnya lagi adalah digunakan untuk memberitahu ke pengguna bahwa aplikasi ini harus memakai internet, dan memberitahu kegagalan API

selesai!. Sekarang proses menampilkan data.

Load data keperluan ini penting karena kita bisa mengetahui data yang terbaru, maka dari itu membuat load data sebaiknya didalam fungsi agar kita bisa memanggilnya diberbagai kondisi.

buka file tambah-keperluan.html lalu Salin code dibawah ini letakan di atasnya fungsi preload_div() {...}

Agar load_data_dijalankan kita tambahakan pemanggilan fungsi

salin code dibawah ini yang teks tebal letakkan di file tambah-keperluan.html di bagian pageInit:

// refresh data keperluan : panggil fungsi

load_data_keperluan();

pada bagian code perulangan terdapat link onclick="click_pilih_keperluan(this)" ini akan mengarah ke bagian funngsi pada file index.html di bagian <script>...</script>.

buka index.html lalu silahkan salin code berikut yang teks tebal dan letakkan di bawahnya fungsi

function load_data_keperluan() {...}

silahkan kalian buka di file mobile/js/app.js cari code

var api = "http://localhost/aplikasi-kunjungan-pra/server-api/";

rubah menjadi

var api = "http://localhost/aplikasi-kunjungan/server-api/";

Mengirimkan data, Didalam fungsi load_data_keperluan terdapat pemanggilan variabel api_get_all_nama_keperluan itu adalah link untuk mengarah ke server-api,

Mari kita buat variabelnya di bagian file mobile/js/app.js letakan dibagian bawahnya variabel api_cek_login. salin code dibawah ini:

var api_get_all_nama_keperluan = api+"Keperluan/get_all_keperluan?batas=50";

Selesai, Sekarang kita mengarah ke bagian server-api (backend). Buat file controller baru dengan nama Keperluan.php lalu isinya salin code dibawah ini:

Selesai, Kita cek code didalamnya terdapat pemanggilan models $this->load->model('M_tabelKeperluan'); berhubung kita belum mmbuat modelsnya mari kita buat filenya di server-api/applications/models/ dengan nama M_tabelKeperluan.php isikan code dibawah ini:

Selesai, Pada tahap ini aplikasi sudah bisa melakukan pengambilan data keperluan untuk ditampilkan di pilih keperluan. Aplikasi akan terlihat seperti ini pada view pilih Keperluan. Data didatabase masih kosong bisa dilihat di sebelah kanan terdapat data json yang menampikan pesan.

OK! sekarang kita ke proses tahap selanjutnya yaitu penambahan data pada tabelKeperluan.

Pada file tambah-keperluan.html dibagian fungsi tambahkan code dibawah ini yang tulisannya tebal.

Pada proses kirim data terdapat link menuju backend mari kita isi link tersebut di file mobile/js/app.js tambahkan code dibawah ini dan letakan di bawahnya var api_get_all_nama_keperluan :

var api_post_nama_keperluan = api+"Keperluan/post_tambah_nama_keperluan";

Selanjutnya kita mengarah ke bagian backend. Kita tambahkan fungsi pada controller Keperluan letakan dibagian bawahnya fungsi post_tambah_nama_keperluan atau bisa lihat pada code dibawah ini yang teks tebal silahkan disalin:

pada code diatas terdapat cek nama keperluan, tinggal kita berikan models untuk melakukan pengecekan ke database. Buka file models dengan nama M_tabelKeperluan lakukan penambahan fungsi baru dengan nama cek_nama_keperluan_no_like dengan menambahkan sebuah parameter di fungsi tersebut. agar lebih mudah silahkan salin kode dibawah ini ya...

Lanjut ke bagian proses penambahan data kita tambahkan fungsi baru pada models M_tabelKeperluan kita tambahkan fungsi dengan nama tambah_data silahkan salin code dibawah ini:

Selesai. Mari kita coba aplikasinya untuk proses Tambah data. Berhasil......!

Pastikan kalian ditahap ini juga berhasil yaa untuk mengarah kelangkah selanjutnya.

OK. Semangat mari kita melangkah ke tombol pencarian. Jika kita lihat terdapat @click="click_cari_keperluan" ini mengarah kebagian fungsi pada file tambah-keperluan.html OK sekarang kita tambahkan codenya terlebih dahulu seperti ini salin teks tebal yaa

Pada proses kirim data terdapat api_cari_nama_keperluan ini link menuju backend mari kita isi link tersebut di file mobile/js/app.js tambahkan code dibawah ini dan letakan di bawahnya var api_post_nama_keperluan

var api_cari_nama_keperluan = api+"Keperluan/get_cari_nama_keperluan?batas=50";

Selesai. Mari kita beralih kehalaman backend Buka controller Keperluan lalu tambahkan code dibawah ini...

Proses selanjutnya kita menambahkan fungsi pada models untuk pencarian nama keperluan. salin code dibawah ini dan letakan di M_tabelKeperluan.php

Berhasil...

Langkah terakhir yaitu melakukan tombol batal yang nntinya akan menghilangkan nilai di input. Silahkan buka file tambah-keperluan.html cari fungsi click batal lalu salin code dibawah ini ya...

Selesai. Aplikasi kita sudah bisa dijlankan hingga penambahan data keperluan, Pemilihan data keperluan, Pencarian data keperluan, dan Menghilangkan nilai pada input.

Kesimpulan/Hasil:

• Kalian sudah tahu fungsi dari array multidimensi

• Kalian sudah bisa melakukan pengambilan data melalui array multidimensi

• Kalian sudah tahu proses pembuatan paginati pada data yang banyak

• Kalian sudah tahu bagaimana cara memanggil server-api dari javascript(Framework7)

• Melakukan Copy Paste template dari Framework7