Pertemuan Ke 9
KELAS XII SEMESTER GANJIL
Sekilas Cerita:
Pada pertemuan kali ini, kita akan membuat project dengan judul aplikasi kunjungan
silahkan cek di page ProjectKunjungan
localStorage dan sessionStorage (javascript)
(kutipan) Menggunakan Local Storage dan Session Storage
localStorage : data yang disimpan tidak memiliki waktu expired.
sessionStorage : data yang disimpan akan hilang jika browes ditutup.
Pada dasarnya untuk menggunakan localStorage dan sessionStorage sama, terlebih dahulu kita harus mengatur key dan value nya. Langsung saja berikut adalah penjelasan cara Menggunakan Local Storage dan Session Storage.
Penggunaan Local Storage
Untuk dapat menggunakan local storage sangat mudah, berikut adalah contoh cara penggunaan local storage.
//menset localStorage
localStorage.setItem("nama", "Agus");
//mendapatkan value
localStorage.getItem("nama");
//menghapus nilai
localStorage.removeItem("nama");
Penggunaan Session Storage
Sama seperti halnya local storage, script untuk menggunakan session storage juga tidak berbeda jauh. Berikut adalah contoh cara penggunaannya.
//menset localStorage
sessionStorage.setItem("nama", "Agus");
//mendapatkan value
sessionStorage.getItem("nama");
UNDEFINED (javascript)
Tidak ditemukannya sebuah nilai atau tidak terdefinisi. Contoh code dibawah ini
function test(t) {
if (t === undefined) {
return 'Undefined value!';
}
return t;
}
let x;
console.log(test(x));
// expected output: "Undefined value!"
loginScreen (framework7)
Perintah untuk menampilkan login dengan tampilan seperti modal (tidak berpindah halaman). Penggunaan seperti berikut:
pada tag html tambahkan attribut dibawah ini: mengacu ke class yang bernilai login-screen
data-login-screen=".login-screen"
bisa juga menggunakan perintah javascript:
app.loginScreen.open('.login-screen');
untuk menutup menggunakan perintah seperti ini:
app.loginScreen.close();
ARRAY MULTIDIMENSI(php)
Menerapkan array multidimensi pada output JSON agar mudah digunakan. Teknik array multidimensi adalah array didalam array.
Array adalah sebuah variabel yang bisa menampung lebih dari satu nilai. Sebagai contoh ada sekumpulan siswa yang sedang belajar ngoding yang memiliki nama Saifur, Mega, Ulul,Kamal, Adi, Aldi, dan Aji.
Multidimensional array bisa kita sebut sebagai array didalam array. Contoh penggunaan array dalam array seperti kita mengenal sebuah matriks yang terdiri dari 3 angka kesamping dan 3 angka kebawah. (kutipan)
JSON_PRETTY_PRINT (php json_encode)
Argument dari json_encode difungsikan untuk mencetak tampilan json dengan tampilan yang mudah dibaca/dilihat.
Contoh:
json_encode($data, JSON_PRETTY_PRINT);
password_hash (php)
password_hash() membuat hash kata sandi baru menggunakan algoritma hashing satu arah yang kuat. password_hash() kompatibel dengan crypt() . Oleh karena itu, hash kata sandi yang dibuat oleh crypt() dapat digunakan dengan password_hash() (kutipan).
Algoritma berikut saat ini didukung:
PASSWORD_DEFAULT - Gunakan algoritma bcrypt (default pada PHP 5.5.0). Perhatikan bahwa konstanta ini dirancang untuk berubah seiring waktu karena algoritma baru dan lebih kuat ditambahkan ke PHP. Oleh karena itu, panjang hasil dari penggunaan pengidentifikasi ini dapat berubah seiring waktu. Oleh karena itu, disarankan untuk menyimpan hasil dalam kolom database yang dapat diperluas melebihi 60 karakter (255 karakter akan menjadi pilihan yang baik).
PASSWORD_BCRYPT - Gunakan CRYPT_BLOWFISHalgoritma untuk membuat hash. Ini akan menghasilkan hash yang kompatibel dengan crypt() standar menggunakan pengidentifikasi "$2y$". Hasilnya akan selalu berupa string 60 karakter, atau falsegagal.
PASSWORD_ARGON2I - Gunakan algoritma hashing Argon2i untuk membuat hash. Algoritma ini hanya tersedia jika PHP telah dikompilasi dengan dukungan Argon2.
PASSWORD_ARGON2ID - Gunakan algoritma hashing Argon2id untuk membuat hash. Algoritma ini hanya tersedia jika PHP telah dikompilasi dengan dukungan Argon2.
Contoh Penggunaan:
<?php
/**
* We just want to hash our password using the current DEFAULT algorithm.
* This is presently BCRYPT, and will produce a 60 character result.
*
* Beware that DEFAULT may change over time, so you would want to prepare
* By allowing your storage to expand past 60 characters (255 would be good)
*/
echo password_hash("ketikan nilai", PASSWORD_DEFAULT);
?>
dari code diatas akan menampilkan $2y$10$.vGA1O9wmRjrwAVXD98HNOgsNpDczlqm3Jq7KnEd1rVAGv3Fykk1a
password_verify (php)
Perhatikan bahwa password_hash() mengembalikan algoritme, biaya, dan garam sebagai bagian dari hash yang dikembalikan. Oleh karena itu, semua informasi yang diperlukan untuk memverifikasi hash disertakan di dalamnya. Ini memungkinkan fungsi verifikasi untuk memverifikasi hash tanpa memerlukan penyimpanan terpisah untuk garam atau informasi algoritma.
Penggunaan:
password_verify($password1, $password_hash);
keterangan:
argument pertama pada variabel $password1 : diisikan nilai asli/belum dilakukan hash
argument kedua pada variabel $password_hash : diisikan nilai yang sudah dilakukan hash
implementasi code: daftar akun, login
pada folder mobile terdapat file index.html tuliskan code dibawah ini sesuai dengan perintah:
<title>Framework7</title>
menjadi
<title>Aplikasi Kunjungan</title>
file index.html didalmnya terdapat
<div class="title sliding">Framework7</div>
rubah menjadi
<div class="title sliding">Daftar Kunjungan</div>
file index.html didalmnya terdapat
<div class="title-large-text">Framework7</div>
rubah menjadi
<div class="title-large-text">List Data</div>
file index.html didalamnya terdapat
<div class="page-content">......</div>
hapus semua yang ada didalam div class page-content. hasil akan seperti ini
<div class="page-content"></div>
file index.html tambahkan code login screen. Salin code dibawah ini sejajar dengan <div class="page-content"></div>
buat file baru dengan nama daftar-akun.html letakkan di folder mobile/page/......
file daftar-akun.html isi code sesuai dibawah ini:
Setelah semua di salin dan di letakkan sesuai target.
sekarang proses ngoding bagian javascript dan backend...