adalah flex container (induk), sementara \

dan \

adalah flex item atau anak. Role atau aturan css yang bisa disematkan di flex container/induk meliputi : * display: flex | inline-flex * flex-direction: row | row-reverse | column | column-reverse * flex-wrap: nowrap | wrap | wrap-reverse * flex-flow: column wrap; shorthand untuk `flex-direction` dan `flex-wrap`. Secara default, valuenya `row nowrap`. * justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe * align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe * align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe Sedangkan role atau aturan css yang bisa disematkan di flex item / anak meliputi : * order: 5; (*default 0 )* * flex-grow: 4; (*default 0 )* * flex-shrink: 3; (*default 1, harus diisi angka positif )* * flex-basis: auto; * flex: none | \[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } shorthand untuk kombinasi `flex-grow,` `flex-shrink` dan `flex-basis`. Paremeter kedua dan ketiga (`flex-shrink` dan `flex-basis`) adalah opsional. Secara default, valuenya `0 1 auto.` * align-self: auto | flex-start | flex-end | center | baseline | stretch; {% tabs %} {% tab title="CSS" %} {% code title="flex.css" %} ```css #main-content { display: flex; flex-wrap: wrap; } aside { flex: calc(30% - 40px); } section { flex: calc(70% - 40px); } ``` {% endcode %} {% endtab %} {% tab title="HTML" %} {% code title="layout.html" %} ``` Layout ``` {% endcode %} {% endtab %} {% endtabs %} Dengan teknik flex, akan menghasilkan tinggi yang selaras antara aside dan section. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MguTv0Dd_wyb-rITsCD%2F-MgueW4ahYDdjh4_LoyX%2FScreen%20Shot%202021-08-12%20at%2020.58.13.png?alt=media\&token=155d490e-6c39-4973-a116-1371746e50ba) Untuk belajar lebih jauh tentang flex, saya rekomendasikan untuk membaca [a Complete Guide to Flexbox ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). ### Responsive Layout Seiring munculnya berbagai device, developer dituntut untuk menghasilkan layout yang baik ketika dijalankan di semua device. Teknik media query adalah salah satu teknik yang mesti diterapkan jika ingin mengimplementasikan responsive web design. Kali ini kita akan membuat design layout flex di atas menjadi responsive. Ada 2 hal penting untuk menjadi responsif : 1. ketika ukuran hp (<= 600px), maka #main-content akan berubah menjadi kolom. 2. ketika ukuran hp (<= 600px), maka menu akan berubah menjadi dropdown dengan togle show/hide. Untuk deteksi ukuran screen, kita memanfaatkan media query. Sementara untuk poin pertama, kita bisa memanfaatkan flex-direction : column | column-reverse. {% code title="flex.css" %} ```css @media screen and (max-width: 600px) { #main-content { flex-direction: column; } } ``` {% endcode %} Untuk poin kedua, langkah yang dilakukan relatif lebih panjang : 1. Tambahkan hyperlink burger menu yang secara default tersembunyi. 2. Jika ukuran <= 600, sembunyikan menu, dan tampilkan burger menu. 3. Jika burger menu diklik, akan menambahkan togle class responsive pada navigasi menu. Ini dilakukan dengan membuat fungsi javascript onClick. 4. Jika ukuran layar <= 600, navigasi menu akan dibuat menjadi list tersusun ke bawah. 5. jika ukuran layar <= 600, navigasi dibuatkan 2 style, yang tanpa class responsif akan tersembunyi. Dan satu style lagi dengan class responsif dimana menu akan ditampilkan. Pada file layout.html dan flex.css yang sudah ada, tambahkan/sisipikan kode berikut : {% tabs %} {% tab title="HTML" %} {% code title="layout.html" %} ```css ``` {% endcode %} {% endtab %} {% tab title="CSS" %} {% code title="flex.css" %} ```css .navigation .icon { display: none; } @media screen and (max-width: 600px) { #main-content { flex-direction: column; } .navigation { position:relative; min-height: 20px; } .navigation .icon { display:block; position: absolute; top:10px; right:10px; color:white; } .navigation ul { display:none; } .navigation ul li { display: block; } .navigation ul li:hover { background: gold; } .navigation.responsive ul { display: block; } } ``` {% endcode %} {% endtab %} {% endtabs %} Begini tampilan halaman ketika dibuka di device dengan layar <= 600 px. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-Mh-9QUqcBoMJyzLKrlW%2F-Mh-EHXNBz2w3_DkVDTP%2FScreen%20Shot%202021-08-13%20at%2022.58.13.png?alt=media\&token=e5aa29ea-09b8-4243-bd38-fc4275681f93) Materi layout halaman HTML sudah selese. Jika Anda ingin mempelajari teknik layout yang lain seperti grid, saya sarankan untuk membaca [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). Namun anda juga bisa mengabaikan-nya untuk saat ini (bisa belajar grid di lain waktu) dan beralih ke materi selanjutnya. # Form Form merupakan alat utama untuk interaksi antara user dengan aplikasi web. Form memungkinkan user untuk memasukkan data, yang kemudian diteruskan untuk diproses/disimpan di server. HTML form terdiri dari input, textarea, dan select. Namun pada prakteknya tak pernah lepas dari label dan button. Untuk membuat form biasanya dengan membuat tag form yang diisi dengan dengan elemen-elemen HTML form yang diperlukan. ### Form Form merupakan tag untuk mengawali pembuatan form. \ \ ### Label Label merupakan tag untuk membuat label. \ \Content\ ### Input Input merupakan tag generic untuk memasukkan data ke dalam form. Ada berbagai macam tipe yang didukung oleh input. ```markup ``` ### Textarea Textarea merupakan tag untuk membuat suatu teks dengan panjang tak terbatas. ```markup ``` ### Select Untuk input yang mempunyai beberapa opsi untuk dipilih, HTML form menyediakan tag select. Select hanya memilih satu dari sekian banyak opsi. Jika ingin memilih lebih dari satu opsi, tambahkan atribut multiple. ```markup ``` ### Button Button adalah input untuk membuat tombol. Ada tiga tipe button: button, reset dan submit. Tipe button hanya menampilkan tampilan tombol tanpa ada fungsi apapun. Reset menampilkan tombol yang jika diklik akan me-reset *value* dari form. Tipe submit menampilkan tombol yang jika diklik akan mengirimkan hasil dari pengisian form. ```markup ``` Dengan berakhirnya materi tentang form, berakhir pula materi tentang HTML dan CSS. Sampai di sini, siswa diharapkan sudah mampu melakukan design web, baik melayout halaman web secara umum maupun membuat form. Untuk memastikan hal tersebut, bab berikutnya adalah praktikum. # Praktikum I : Membuat Halaman Login dan CRUD Kerjakan tugas praktikum sebagai berikut : 1. Buat halaman login. 2. Buat halaman list user yang diserta tombol "create new user" di bagian atas. Di setiap row juga disertakan link untuk view, edit dan delete. Jika link delete di-klik tampilkan dialog konfirmasi, "Yakin hendak menghapus data user?". 3. Buat halaman form input user baru. 4. Buat halaman form update user. Design bebas sesuai dengan kreativitas masing-masing, sebagai contoh, berikut saya lampirkan tampilan login dan Halaman CRUD. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwaGF_pkTnRiq5SmUY%2F-MfwcV-fvsOHjD4edkOk%2FScreen%20Shot%202021-07-31%20at%2019.52.51.png?alt=media\&token=9e589e34-a7ad-4caf-a295-cdb0e72ef7ee) ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MfwaGF_pkTnRiq5SmUY%2F-MfwcaNBuZ20VvZicQ1H%2FScreen%20Shot%202021-07-31%20at%2019.54.01.png?alt=media\&token=5def6867-7395-4a45-bbbf-fabc6a8a6aa6) # Pengenalan Javascript Javascript merupakan bahasa pemrograman yang awalnya hanya bisa berjalan di browser. Namun belakangan, javascript juga bisa jalan di server, sehingga popularitas javascript meningkat dengan drastis. Javascript bisa digunakan untuk membangun frontend web, API backend, frontend mobile, desktop, dan iot. Untuk tahap awal, kita akan belajar javascript yang berjalan di browser. Ada tiga cara untuk menulis kode javascript di HTML, yaitu : Inline, Embed dan external. ## Inline Kode javascript ditempel langsung pada properti HTML. ```markup ``` ## Embed Kode javascript ditulis langsung sebagai tag element \ di HTML. ```markup Javascript Internal Javascript ``` Kode di atas akan menampilkan tulisan "Internal Javascript" di browser. Sementara kode javascript akan menampilkan log "embed javascript" di console browser. Untuk melihat console browser, tampilkan developer tools dan klik tab console. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MiEqR1iD-lIPOtJMp-M%2F-MiEvJE8UOtl6ZJ0HfeL%2FScreen%20Shot%202021-08-29%20at%2010.19.22.png?alt=media\&token=d1f39bbf-5bb1-41e1-bd60-21486445d690) ## External Kode javascript ditulis di file terpisah dan dipanggil melalui link. {% tabs %} {% tab title="HTML" %} {% code title="index.html" %} ```markup Javascript External Javascript ``` {% endcode %} {% endtab %} {% tab title="Javascript" %} {% code title="index.js" %} ```javascript console.log("external javascript") ``` {% endcode %} {% endtab %} {% endtabs %} # Dasar Pemrograman Javascript Dasar pemrograman javascript meliputi pengaksesan DOM HTML, variable, konstanta dan tipe data. ### DOM HTML Dokumen HTML bisa diakses melalui DOM (*Document Object Model).* Ketika sebuah halaman HTML diload oleh browser, maka browser akan menciptakan sebuah dokumen. Dokumen ini dimodelkan dalam bentuk objek yang berisi kumpulan data/atribut dan fungsi, yang bisa dimanfaatkan (dipanggil) saat kita membuat kode-kode javascript. Contoh fungsi dalam document adalah document.write() yang berguna untuk menulis di dalam document. Contoh properti/atribut document adalah document.body (untuk mengakses body HTML) dan document.title (untuk mengakses title HTML). {% tabs %} {% tab title="JavaScript" %} {% code title="index.js" %} ```javascript document.write("Halo Selamat Pagi "); document.body.style.backgroundColor = "pink"; ``` {% endcode %} {% endtab %} {% tab title="HTML" %} {% code title="index.html" %} ```markup Indonesia Pagi Indonesia ``` {% endcode %} {% endtab %} {% endtabs %} Ketika script di atas dijalankan maka akan menulis isi dari body HTMl dengan tulisan "Halo Selamat Pagi ", kemudian mengakses properti style backgroundColor dari body dan menggantinya dengan nilai "pink" sehingga tampilan browser akan meanmpilkan tulisan "Halo Selamat Pagi Indonesia" dengan background browser berwarna pink. Fungsi-fungsi lain yang sering digunakan untuk mengakses sebuah element dalam HTML adalah: * document.getElementById() * document.getElementsByName() * document.getElementsByTagName() * document.getElementsByClassName() * document.querySelector() * document.querySelectorAll() ```markup

Selamat Pagi

Selamat Siang

Selamat Sore

Selamat Malam

Selamat Tidur

``` Dari kode di atas kita juga mengenal beberapa properti/atribut dari sebuah objek, meliputi: element.style untuk mengakses style dari objek, element.InnerText atau element.innerHTML untuk mengakses text/html dari sebuah object. Document juga mempunyai atribut seperti document.body, document.style dll. ### Variabel dan Konstanta Variabel adalah kontainer untuk menyimpan data, dimana isi dari data tersebut bisa diubah-ubah. Semua nama variable harus bersifat unik dan menjadi identitas dari variable tersebut (identifier). Penamaan variabel (dan konstanta) harus mengikuti kaidah : * Nama dapat berisi huruf, angka, garis bawah, dan tanda dolar. * Nama harus diawali dengan huruf * Nama peka huruf besar/kecil (y dan Y adalah variabel yang berbeda) * Kata-kata yang dicadangkan (seperti kata kunci JavaScript) tidak dapat digunakan sebagai nama Ada dua cara untuk membuat variabel, yaitu dengan var dan let. var adalah cara penggunaan untuk deklarasi variabel global, dimana ruang liangkup hidup-nya di seluruh kode. Sementara let adalah cara deklarasi variable lokal dimana ruang lingkup-nya aganya ada di dalam blok kode dimana variabel tersebut dideklarasikan. Sementara kontanta adalah suatu kontainer untuk menyimpan data yang tidak dapat diubah. Untuk membuat konstanta digunakan kata kunci const. {% code title="variable.html" %} ```markup

variabel dan Konstanta

``` {% endcode %} ketika kode di atas dijalankan maka akan error `variabel.html:17 Uncaught TypeError: Assignment to constant variable. at variabel.html:17` Ini disebabkan ada upaya untuk mengganti nilai dari sebuah konstanta. \ \ Jika kita komen kode pada baris 17 agar tidak dieksekusi, kemudian kita jalankan kembali kode di atas, maka error akan berpindah pada baris 35 `variabel.html:35 Uncaught ReferenceError: sapa is not defined at variabel.html:35`Ini disebabkan baris 35 menggunakan variabel '*sapa'* yang tidak dikenal, karena variabel '*sapa'* hanya hidup di dalam blok saja.\ \ Perhatikan juga baris 37 dimana ada upaya menggunakan konstanta '*jawab'*, kode ini akan menyebabkan error karena konstanta '*jawab'* hanya dikenal di dalam blok saja. ### Tipe Data Ada beberapa tipe data dalam pemrograman javascript * undefined\ suatu tipe data yang belum didefinisikan isinya. Jika membuat suatu variable tanpa pernah mengisi data di dalamnya, maka tipe data varibel tersebut adalah undefined. * null \ sebenarnya null merupakan object, namun sengaja saya pisahkan tersendiri agar mendapat perhatian yang lebih. null adalah suatu keadaan dimana suatu varibel dideklarasikan kemudian diberi nilai null. Jika menjalankan typeof , maka tipe data-nya adalah object. * String (teks) * Integer atau Number (bilangan bulat) * Float (bilangan Pecahan) : sebenarnya juga merupakan tipe data number. * Boolean : hanya berisi dua kemungkinan nilai, yaitu : true atau false. * Object : bisa berupa null, json object, maupun array object. Object merupakan satu-satunya tipe data yang bukan primitif, melainkan tipe data turunan. ```markup

Tipe Data

``` Di dalam javascript, perubahan tipe data berlangusng secara dinamis ketika sebuah nilai diassign ke variabel. Bisa jadi dalam state tertentu tipe data variable adalah string, di state berikutnya bisa berubah menjadi number. Perhatikan contoh berikut : ```markup

Tipe Data Dinamis

``` # Operator ## Operator Aritmatika Aritmatika adalah salah satu hal penting dalam bahasa pemrograman. Di javascript ada 7 operator aritmatika meliputi : * Penambahan (+) * Pengurangan (-) * Perkalian (\*) * Pembagian (/) * Sisa bagi (%) * Increment (++) * Decrement (- -) ```markup

Operator Aritmatika

``` ### Derajat Operator Seperti konsep matematika, operator aritmatika juga mempunyai derajat sebagia berikut: 1. Prefix Increment, ++x 2. Prefix Decrement, — x 3. Perkalian, \* 4. Pembagian, / 5. Modulus, % 6. Penjumlahan, + 7. Pengurangan, - 8. Postfix Increment, x++ 9. Postfix Decrement, x — ## Operator Perbandingan Ada delapan operator perbandingan di JavaScript, yaitu: * Equal value, == * Equal value and type, === * Not equal, != * Not equal value and type, !== * Greater than, > * Less than, < * Greater than or equal, >= * Less than or equal, <= ```markup

Operator Perbandingan

``` ## Operator Logika Terdapat tiga operator yang termasuk operator logika, yaitu: * AND, && * OR, || * NOT, ! ### Operator AND | Ekspresi 1 | Eskpresi 2 | Hasil | | ---------- | ---------- | ----- | | true | true | true | | true | false | false | | false | true | false | | false | false | false | Hasil operator AND akan TRUE jika kedua ekspresi bernilai TRUE ### Operator OR | Ekspresi 1 | Eskpresi 2 | Hasil | | ---------- | ---------- | ----- | | true | true | true | | true | false | true | | false | true | true | | false | false | false | Hasil operartor OR akan TRUE jika salah satu ekspresi bernilai TRUE ### Operator NOT | Ekspresi 1 | Hasil | | ---------- | ----- | | true | false | | false | true | Hasil operator NOT merupakan kebalikan dari ekspresi. operator logika dibaca dari sebelah kiri, sehingga jika ekspresi pertama dari operator AND bernilai false, maka ekspresi kedua tidak perlu lagi dievaluasi. Begitu juga jika ekspresi pertama pada operator OR bernilai true, maka ekspresi kedua sudah tidak perlu dievaluasi. * false && (any expression) * true || (any expression) ```markup

Operator Logika

``` # Seleksi Kondisi Seleksi kondisi digunakan untuk melakukan tindakan yang berbeda berdasarkan kondisi yang berbeda. Kode akan dieksekusi jika syarat yang diminta terpenuhi. ### if ```markup

If

``` ### if else ```markup

If Else

``` ### nested if else ```markup

Nested If Else

``` ### switch Jika nested if else terkalu banyak, itu tandanya anda membutuhkan switch. ```markup

Switch

``` # Perulangan Perulangan dapat mengeksekusi blok kode beberapa kali. Ini berguna jika Anda ingin menjalankan kode yang sama berulang-ulang, setiap kali dengan nilai yang berbeda. ### for ```markup

Perulangan

``` ### for in ```markup

Perulangan

``` ### for of ```markup

Perulangan

``` ### foreach ```markup

Perulangan

``` ### while ```markup

Perulangan

``` # Fungsi Fungsi diperlukan agar suatu kode tidak ditulis berulang-ulang, cukup dibuat sekali dalam satu fungsi, dan bisa dipanggil berkali-kali kapan pun dibutuhkan. ### Deklarasi Fungsi Dekalrasi fungsi terdiri dari kata kunci function, nama fungsi beserta argumen yang diperlukan ``` function namaFungsi(argumen1, argumen2) { // blok kode } ``` Contoh penggunaan fungsi ```javascript function cetakSalam() { console.log("Selamat Pagi"); } function cetak(salam) { console.log(salam); } function sapa(salam, nama) { console.log(salam, nama); } cetakSalam(); cetak("Selamat Pagi"); sapa("Selamat Pagi", "Beruang"); ``` ### Fungsi dengan return Fungsi bisa menghasilkan kembalian berupa data hasil dari eksekusi fungsi tersebut. ```javascript function isPrimeNumber(n) { if (n < 2) { return false; } for (let i = 2; i < n; i++) { if (n%i == 0) { return false; } } return true; } // Mencetak bilangan prima antara 1 - 100 for (let i = 1; i<=100; i++) { if (isPrimeNumber(i)) { console.log(i); } } // mencetak N bilangan prima pertama const bilangan = prompt("masukkan bilangan"); let iterator = 1; let jumlah = 1; while (jumlah <= bilangan) { if (isPrimeNumber(iterator)) { console.log(`${jumlah} --> ${iterator}`); jumlah++; } iterator++; } function GetStudent(id){ if (id === 1) { return { name: "Amalia", age: 14 } } return {} } let amalia = GetStudent(1); let kosong = GertStudent(2); console.log("amalia : ", amalia); console.log("kosong : ", kosong); ``` ### Fungsi Anonim Fungsi anonim adalah suatu fungsi yang dideklarasikan tanpa nama ```javascript let weekDays = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat"]; weekDays.forEach(function (value, index) { console.log(index, value); }); ``` Fungsi anonim juga bisa disimpan dalam sebuah variabel ```javascript const salam = function(str) { console.log("fungsi anonim di variabel", str); }; salam("Halo"); ``` ### Arrow Function ```javascript const salam = str => console.log("arrow function", str); const sapa = (salam, nama) => console.log("arrow function", salam, nama); const multiLine = () => { console.log("line 1"); console.log("line 2"); } const withReturn = () => "halo"; const withReturnMultiLine = () => { let str = "halo"; return str; } salam("selamat pagi"); sapa("selamat pagi", "beruang"); multiLine(); const halo = withReturn(); console.log(halo); const haloAgain = withReturnMultiLine(); console.log(haloAgain); ``` ### Callback Function Ketika sebuah fungsi dijadikan paramter fungsi lain, itulah yang disebut dengan callback. Kita akan mengubah anonim function pada contoh foreach weekdays menjadi callback. ```javascript function cetak(value, index) { console.log(index, value); } let weekDays = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat"]; weekDays.forEach(cetak); ``` Contoh lain ```javascript function cetak(data) { console.log(data); } function hitung(angka1, angka2, myCallback){ let jumlah = angka1 + angka2; myCallback(jumlah); } hitung(4, 5, cetak); function ask(question, no, yes) { if (confirm(question)) { yes(); } else { no(); } } function agree() { console.log("Ya, Saya setuju!"); } function disagree() { console.log("Tidak, saya tidak setuju!"); } ask("Apakah Anda Setuju?", disagree, agree); ``` # String Untuk menulis string digunakan tanda petik dua (") atau tanda petik satu ('). ```javascript console.log('Selamat pagi dunia!'); console.log("Selamat pagi dunia!"); ``` Meski kita bebas menggunakan tanda petik dua maupun tanda petik satu, pastikan Anda hanya mengunakan salah satunya saja. Ini demi konsistensi dan kemudahan maintenance kode. Untuk menulis string yang mengandung quote/tenda petik, bisa menggunakan tanda petik yang berbeda dengan yang hendak dicetak atau menggunakan prefix backslash. ```javascript console.log('Matahari tersenyum menyapa, "Selamat pagi dunia!"'); console.log("Matahari tersenyum menyapa, \"Selamat pagi dunia!\""); ``` ## Properti ### length Untuk mendapatkan panjang suatu string, gunakan properti length ```javascript let salam = "Apa Kabar"; console.log("Selamat pagi dunia!".length); console.log(salam.length); ``` ## Method Ada banyak method yang dimiliki oleh string, kita ahnaya akan membahas sebagian yang menurut saya pribadi sering digunakan. ### Mengambil potongan string : slice dan substring/substr Ada dua cara untuk mengambil potongan string, bisa melalui slice(), dan substring(). ```javascript Syntax: string.slice(start, stop); Syntax: string.substring(start, stop); ``` #### Slice Digunakan untuk mengambil bagian dari string yang diberikan. Caranya dengan melempar index awal dan index akhir dari slice/potongan string yang diinginkan. Indek yang diberikan bisa bernilai positif maupun negatif. Jika positif, indek dihitung dari kiri string. JIka negatif, indek dihitung dari kanan string. ```javascript let salam = "Selamat pagi dunia!"; console.log(salam.slice(0, 7)); console.log(salam.slice(8, 12)); console.log(salam.slice(13, -1)); console.log(salam.slice(-6, -1)); console.log(salam.slice(0, salam.length)); console.log(salam.slice(0)); console.log(salam.slice(0, 1000)); ``` #### substring/substr substring dan substr adalah dua method yang sama persis, kita bosa meilih salah satunya saja. Method ini juga digunakan untuk mengambil suatu potongan string berdasarkan indek string. Berbeda dengan slice, substring tidak bisa mempunyai indek negatif. ```javascript let salam = "Selamat pagi dunia!"; console.log(salam.substring(0)); console.log(salam.substring(0, 1000)); console.log(salam.substring(0, salam.length)); console.log(salam.substring(12, 8)); console.log(salam.substring(12, "asal")); ``` **Kesamaan apa yang mereka miliki:** 1. Jika `start` sama dengan `stop`: mengembalikan string kosong 2. Jika `stop` dihilangkan: ekstrak karakter ke akhir string 3. Jika salah satu argumen lebih besar dari panjang string, panjang string akan digunakan sebagai gantinya. **Perbedaan**[`substring()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring)**:** 1. Jika `start > stop`, maka `substring` akan menukar 2 argumen tersebut. 2. Jika salah satu argumen negatif atau `NaN`, itu diperlakukan seolah-olah `0`. **Perbedaan**[`slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)**:** 1. Jika `start > stop`, `slice()` akan mengembalikan string kosong. (`""`) 2. Jika `start` negatif: set char dari akhir string, persis seperti `substr()` di Firefox. Perilaku ini diamati di Firefox dan IE. 3. Jika `stop` negatif: set berhenti ke: `string.length – Math.abs(stop)` (nilai asli), kecuali dibatasi pada 0 (dengan demikian, `Math.max(0, string.length + stop)`) sebagaimana dicakup dalam [spesifikasi ECMA](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.slice) . ### Mengambil karakter berdasarkan indek: charAt charAt digunakan untuk mengambil suatu karakter sebuah string berdasarkan indek yang dilempar. Karena yang dilempar adalah indek dan dimulai dari index ke nol, maka indek terakhir adalah panjang suatu string dikurangi 1. charAt memiliki sifat : * Jika indek tidak ditemukan, akan dikembalikan string kosong. * Jika diberi indek negatif makan akan dikembalikan string kosong. * Jika diberi indeks Nan maka akan dikembalikan character pada indek ke nol. ```javascript let salam = "Selamat pagi dunia!"; console.log(salam.charAt(0)); console.log(salam.charAt(5)); console.log(salam.charAt(salam.length)); console.log(salam.charAt(salam.length - 1)); console.log(salam.charAt(-1)); console.log(salam.charAt("asal")); ``` ### Mengubah huruf besar/kecil : toUpperCase dan toLowerCase Untuk mengubah suatu string menjadi huruf besar maupun huruf kecil, digunakan method toUppercase dan toLowerCase. ```javascript let salam = "Selamat pagi dunia!"; console.log(salam.toUpperCase()); console.log(salam.toLowerCase()); console.log(salam.charAt(0).toUpperCase()+salam.slice(1).toLowerCase()); ``` ### Menggabungkan dua string : concat Untuk menggabungkan dua buah string atau lebih, kita bisa memilih menggunakan operator plus (+) maupun method concat. ```javascript let sapa = "Halo"; let name = "Jacky"; console.log(sapa + " " + name); console.log(sapa.concat(" ").concat(name)); ``` ### Menghilangkan spasi berlebih : trim ```javascript let salam = " Selamat pagi dunia! "; console.log(salam.trim()); console.log(salam.trimStart()); console.log(salam.trimEnd()); ``` ### Mengubah string menjadi array : split ```javascript let salam = "Selamat pagi dunia!"; console.log(salam.split(" ")); ``` ## Template using backtick Kadang kita memerlukan template string, misalnya saat hendak memasukkan variabel ke dalam format string. Javascript menyediakan template string dengan backtick (\`). ```javascript let name = "Jacky"; console.log(`Selamat pagi ${name}. Bagaimana keadaanmu di sana? Semoga ${name} dalam keadaan sehat dan bahagia.`); ``` # Array Array adalah koleksi atau kumpulan dari banyak nilai. ```javascript const arStr = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(arStr); const arInt = [1, 2, 3, 4, 5]; console.log(arInt); const arMix = ["senin", 100, "rabu", 200, "jumat"]; console.log(arMix); const arMixWithObj = ["senin", 100, "rabu", 200, "jumat", ["Rambutan", "Durian", "Salak"], {name: "jacky", age: 12}]; console.log(arMixWithObj); ``` cara deklarasi array bisa seperti di atas. Namun bisa juga dengan menggunakan objek Array dan memanggilnya dengan kata kunci new, atau dengan mengakses indek array tersebut. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(ar); const arIndex = []; arIndex[0] = "senin"; arIndex[1] = "selasa"; arIndex[2] = "rabu"; arIndex[3] = "kamis"; arIndex[4] = "jumat"; console.log(arIndex); const arObj = new Array("senin", "selasa", "rabu", "kamis", "jumat"); console.log(arObj); ``` Object Array juga punya method penting untuk mengecek apakah suatu variabel array atau bukan. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(Array.isArray(ar)); console.log(Array.isArray(["Rambutan", "Durian", "Salak"])); console.log(Array.isArray({name: "jacky", age: 12})); console.log(Array.isArray("Apa kabar")); console.log(Array.isArray(2021)); ``` Untuk mengakses array bisa langsung menunjuk indek-nya ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(ar[3]); ``` Array juga mempunya properti dan method ## Properti ### length Untuk mendapatkan panjang suatu array, gunakan properti length ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(ar.length); ``` ## Method Array mempunyai banyak method, kita akan membahas sebagian yang sering digunakan. ### Menambah dan mengurangi anggota sebuah array #### push Untuk menambahkan elemen baru ke dalam array. Anggota terbaru akan diletakkan di indek paling terakhir. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; ar.push("sabtu"); ar.push("minggu"); console.log(ar); ``` #### Pop Pop adalah suatu method untuk mendapatkan anggota terahir dari sebuah array sekaligus mengeluarkan (menghapus) anggota tersebut dari array. Pop merupakan method standard dari struktur data stack (tumpukan). Dimana pop digunakan untuk mengambil dari tumpukan paling atas. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; ar.push("sabtu"); ar.push("minggu"); console.log(ar); console.log(ar.pop()) console.log(ar.pop()) console.log(ar); ``` #### shift shift mirip dengan pop, digunakan untuk mengambil tumpukan paling bawah. shift akan menampilkan nilai dari indek pertama sebauh array sekaligus mengeluarkan (menghapus) value tersebut dari array. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; console.log(ar.shift()); console.log(ar); ``` #### unshift unshift mirip dengan push, digunakan untuk menambahkan anggota baru ke dalam sebuah array, namun anggota baru ini akan ditambahkan di indek paling awal. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; ar.unshift("minggu"); ar.unshift("sabtu"); console.log(ar); ``` ### Memanipulasi isi/nilai sebuah array #### delete delete digunakan untuk menghapus value dari sebuah indek. delete tidak menhilangkan keanggotaan, melainkan hanya menghapus nilai saya. ```javascript const ar = ["senin", "selasa", "rabu", "kamis", "jumat"]; delete ar[3]; console.log(ar); ar[3] = "kamis"; console.log(ar); ``` ### Membuat potongan sebuah array slice digunakan untuk memotong sebuah array. slice mempunyai sifat: * Membuat array baru tanpa menghapus array sumber. * Mempunyai 2 argumen, argumen pertama adalah indek awal, argumen kedua adalah indek akhir. * Slice memotong mulai dari indek awal sampai sebelum indek akhir. Artinya potongan array tidak termasuk indek terakhir. * Jika hanya ada 1 argumen maka dianggap argumen kedua adalah panjang array. * Jika argumen negatif, maka itu sama dengan panjang array dikurangi argumen (atau dihitung dari array terakhir). ```javascript const days = ["senin", "selasa", "rabu", "kamis", "jumat", "sabtu", "minggu"]; const weekdays = days.slice(0, 5); const weekend = days.slice(5, 7); const weekendsOneArg = days.slice(5); const weekendUsingLengthMinus = days.slice(days.length-2); const weekendUsingMinus = days.slice(-2); console.log("days", days); console.log("weekdays", weekdays); console.log("weekend", weekend); console.log("weekendsOneArg", weekendsOneArg); console.log("weekendUsingLengthMinus", weekendUsingLengthMinus); console.log("weekendUsingMinus", weekendUsingMinus); ``` ### Menggabungkan dua buah array : concat() Berlawanan dengan slice, concat adalah untuk menambah anggota baru. ```javascript const weekdays = ["senin", "selasa", "rabu", "kamis", "jumat"]; const weekend = ["sabtu", "minggu"]; const days = weekdays.concat(weekend); console.log(days); let myFruits = ["Rambutan", "Durian", "Salak"]; myFruits = myFruits.concat( ["Kesemek", "Apel", "Jeruk"], ["Jambu", "Pepaya", "Mangga"], "Nanas", ["Kelengkeng"] ); myFruits = myFruits.concat("Nangka"); console.log(myFruits); ``` ### Mengurutkan array : sort Untuk mengurutkan array dari terkecil ke terbesar. ```javascript const myFruits = ["Rambutan", "Durian", "Salak"]; myFruits.sort(); console.log(myFruits); const myNumber = [400, 314, 256, 512]; myNumber.sort(); console.log(myNumber); const myMix = ["Rambutan", 374, "Duku", 845, "Kedondong", 543]; myMix.sort(); console.log(myMix); const myMixObj = [null, "Rambutan", ["senin", "selasa"], 374, ["sabtu", "minggu"], "Duku", 845, {name: "jeruk"}, "Kedondong", 543, {name: "anggur"}]; myMixObj.sort(); console.log(myMixObj); ``` ### Membalik susunan array : reverse ```javascript const days = ["senin", "selasa", "rabu", "kamis", "jumat", "sabtu", "minggu"]; days.reverse(); console.log(days); ``` ### Mengubah array menjadi string Untuk mengubah array ke string, kita bisa menggunakan fungsi toString() maupun join(). Jika menggunakan toString() maka array akan menjadi string dengan separator koma (,). Jika menginginkan separator lain, gunakan fungsi join() dengan melempar separator yang diinginkan. ```javascript const days = ["senin", "selasa", "rabu", "kamis", "jumat", "sabtu", "minggu"]; console.log(days.toString()); console.log(days.join(" ")); ``` ### Perulangan pada array Method-method array yang melakukan iterasi antara lain foreach(), map() dan filter() #### forEach forEach melakukan iterasi dengan setiap iterasi-nya memanggil fungsi (callback). ```javascript const myNums = [1, 2, 3, 4, 5]; const square = (value, index, arr) => console.log(value * value); myNums.forEach(square); ``` #### map Mirip seperti forEach, map juga melakukan iterasi pada sebuah array. Bedanya forEach murni melakukan iterasi. Sementara map selain melakukan iterasi, dia juga menciptakan array baru. Map tidak merubah array aslinya. ```javascript const myNums = [1, 2, 3, 4, 5]; const square = num => num * num; console.log(myNums.map(square)); ``` #### filter filter digunakan jika kita ingin memfilter array lama, dengan memilih beberapa anggota array yang memenuhi kriteria yang diinginkan. Hasil filter akan disimpan dalam sebuah array baru dan tidak merubah array yang asli. ```javascript const myNums = [1, 2, 3, 4, 5]; const even = num => num%2 === 0 const odd = num => num%2 !== 0 const bigSquare = num => num * num > 10; console.log("filter genap", myNums.filter(even)); console.log("filter ganji", myNums.filter(odd)); console.log("filter big square", myNums.filter(bigSquare)); ``` ## Struktur data terkait array Struktur data adalah cara penyimpanan, penyusunan dan pengaturan data di dalam media penyimpanan komputer sehingga data tersebut dapat digunakan secara efisien Ada beberapa struktur data terkait array, pada kesempatan ini saya akan mengenalkan tiga struktur data yang sering digunakan : 1. **Stack**\ Stack adalah struktur data tumpukan, dimana menggunakan prinsip LIFO (Last In First Out) 2. **Queue**\ Queue adalah struktur data antrian, dimana menggunakan prinsip FIFI (First In First Out) 3. **Set**\ Set adalah data struktur dimana setiap nilai anggotanya adalah unique (tidak ada anggota yang kembar) # JSON ### JSON object JSON merupakan singkatan dari **J**ava**S**cript **O**bject **N**otation. Untuk membuat JSON On=bject harus memenhi kriteria: * Data dalam pasangan nama dan nilai. * Data dipisahkan dengan koma. * Object dibuat dengan kururung kurawal {} * Array dibuat dengan kurung persegi \[] JSON object bisa dideklarasikan dengan berbagai cara : ```javascript const ninja1 = { nama: "Naruto", umur: 12, alamat: "Desa Konoha", jurus: ["kage bunshin", "rasengan"] } console.log(ninja1); const ninja2 = {} ninja2.nama = "Naruto"; ninja2.umur = 12; ninja2.alamat = "Desa Konoha"; ninja2.jurus = ["kage bunshin", "rasengan"]; console.log(ninja2); const ninja3 = new Object(); ninja3.nama = "Naruto"; ninja3.umur = 12; ninja3.alamat = "Desa Konoha"; ninja3.jurus = ["kage bunshin", "rasengan"]; console.log(ninja3); // kita bisa mengakses langsung properti object console.log(ninja3.nama); console.log(ninja3["nama"]); ``` ### JSON stringify Digunakan untuk mengubah json object menjadi string ```javascript const ninja1 = { nama: "Naruto", umur: 12, alamat: "Desa Konoha", jurus: ["kage bunshin", "rasengan"] } console.log(ninja1); console.log(JSON.stringify(ninja1)); ``` ### JSON parse Digunakan untuk mengubah string menjadi JSON Object ```javascript ninjaStr = '{"nama":"Naruto","umur":12,"alamat":"Desa Konoha","jurus":["kage bunshin","rasengan"]}'; console.log(JSON.parse(ninjaStr)); ``` ### delete Digunakan untuk menghapus properti dari sebuah object. Sementara untuk menambah properti jauh lebih simple, sama seperti waktu deklarasi object, langsung menambah properti yang diinginkan. ```javascript const ninja1 = { nama: "Naruto", umur: 12, alamat: "Desa Konoha", jurus: ["kage bunshin", "rasengan"] }; console.log(ninja1); delete ninja1.umur; delete ninja1["alamat"]; console.log(ninja1); ``` # Error Handling Dalam membuat aplikasi, error pasti akan terjadi dan harus kita handle. Error bisa disebabkan oleh banyak hal, sintaks kode yang salah, input user yang salah, dan lain-lain. ### try - catch Penangan error dilakukan dengan sintaks try - catch, artinya kita akan mencoba untuk mengeksekusi suatu kode, namun jika ada error kita akan menagkapnya. ```javascript try { alart("selamat pagi"); } catch (err) { console.error("terjadi error : ", err); } ``` ### throw error error bisa dibuat secara kustom melalui perintah throw. ```javascript try { const angka = prompt("masukkan angka untuk dibagi"); switch (true) { case angka == 0: throw "tidak bisa membagi dengan nol"; break; case angka < 0 : console.log("membagi dengan angka negatif"); break; case angka > 0 : console.log("membagi dengan angka positif"); break; } } catch (err) { console.error("terjadi error : ", err); } ``` ### finally finally adalah suatu blok yang selalu dieksekusi dalam sebuah rangkaian try-catch-finally ```javascript try { const angka = prompt("masukkan angka untuk dibagi"); switch (true) { case angka == 0: throw "tidak bisa membagi dengan nol"; break; case angka < 0 : console.log("membagi dengan angka negatif"); break; case angka > 0 : console.log("membagi dengan angka positif"); break; default: console.log("anda tidak memasukkan angka"); break; } } catch (err) { console.error("terjadi error : ", err); } finally { console.log("selesai"); } ``` # AJAX AJAX = **A**synchronous **J**avaScript **A**nd **X**ML. Merupakan kombinasi dari `XMLHttpRequest` dan JavaScript DOM. XMLHttpRequest digunakan untuk memanggil API, semanatar javascript DOM digunakan untuk mengolah dan menampilkan data hasil dari pemanggilan API. Ajax dibagi menjadi tiga tahapan : 1. Membuat objek XMLHttpRequest\ `const xhttp = new XMLHttpRequest();` 2. Membuat callback. \ `xhttp.onload = function() {` \ `// lakukan manipulasi DOM ketika sudah mendapat response` \ `}` 3. Mengirim request.\ `xhttp.open("http method: GET|POST|PUT|DELETE", "url");` \ `xhttp.send();` Untuk persiapan dan bahan pembelajaran, saya sudah sediakan CRUD Rest API untuk digunakan, yaitu :\ \- GET /users\ \- POST /users\ \- GET /users/:id\ \- PUT /users/:id\ \- DELETE /users/:id\ Url bisa diakses melalui : ### List Buat file list-user.html ```markup

AJAX - List User

``` ### Insert Saat insert, method yang gunakan adalah "POST" dan saat send() kita mengirim data berupa string json.\ \ `xhttp.open("POST", "http://localhost:3000/users", true);`\ `xhttp.send(JSON.stringify(user));` Kita akan membuat perubahan pada halaman Ajax dengan logik seperti berikut 1. Pada file list-user.html tambahkan button "Tambah User" yang jika diklik akan redirect ke halaman add-user.html 2. Buat halaman add-user.html yang berisi form. 3. Form dicegah untuk submit karena akan dihandle lewat ajax.\ `document.getElementById("form").addEventListener("submit", function(event){ event.preventDefault();`\ `})` 4. Buat fungsi add() untuk memangil ajax POST /users 5. Pada callback AJAX, dibuat pengecekan, jika response berhasil dan menghasilkan id, maka akan redirect kembali ke halaman list. Ubah file list-user.html untuk menambahkan tombol "Tambah User". ```markup

AJAX - List User

``` Buat file add-user.html ```markup

AJAX - Add user

``` ### Single page using modal kadang kita ingin menjadikan halaman list dan add dalam satu halaman saja. Solusinya adalah membuat form tambah user dalam bentuk modal. Logic pembuatan single page adalah sebagia berikut : 1. Tambahkan modal form add-user dalam file list-user.html dalam keadaan hide. 2. Jika ada klik "Tambah User" maka tampilkan modal form add-user. 3. Setelah submit form tambah user maka modal kembali dihide dan load ulang fungsi list() untuk melakukan pembaruan data. Berikut file list-user.html ```markup

AJAX - List User

``` # Local Storage Ada banyak cara untuk menyimpan data ke dalam storage di browser. Kita bisa mengeceknya melalui developer tool dan klik tab Application. Di sebelah kiri terdapat menu, lihat menu Storage, ada banyak pilihan di sana meliputi : Local Storage, Session Storage, IndexedDB, Web SQL, Cookies dan Trust Tokens. Kali ini kita akan memanfaatkan local storage untuk menyimpan data token yang didapatkan setelah berhasil login. Untuk menyimpan data menggunakan perintah `localStorage.setItem("nama-key", "value-yang-hendak-disimpan")`. Sementara untuk membaca data menggunakan perintah `localStorage.getItem("nama-key")`. Untuk menghapus local storage berdasarkan key, gunakan perintah `localStorage.removeItem("nama-key")`. ```javascript // Store localStorage.setItem("token", "akxakcnacnadkasaksnaksasaksnasnaks"); // Retrieve console.log(localStorage.getItem("token")); // Remove localStorage.removeItem("token"); ``` Praktek-kan ke dalam kode login yang pernah dibuat. Buat file login.html ```markup

Login

``` Jika login berhasil maka di dalam local storage akan tersimpan Key = token dan Value = alabama-token. Agar lebih riil, maka di dalam halaman yang harus login terlebih dahulu, dilakukan pengecekan apakah sudah login atau belum, jika belum diredirct ke halaman login. ```javascript if (!localStorage.getItem("token")) { location.href = "./login.html"; } ``` Penganganan logout juga diperlukan. Tambahkan button logout yang jika diklik akan mengahapus local storage dan redirect ke halamn login. ```markup ``` # Param Url Seringkali kita membutuhkan suatu nilai yang dilempar sebagai parameter url. Perhatikan url berikut : url di atas mempunyai dua parameter, yaitu parameter id dengan nilai 101, dan paremeter name dengan nilai jhon. Untuk mengambil paremeter url, javascript sudah menyediakan object yang dibutuhkan, yaitu object location. Object location ini sudah sering kita gunakan sebagai redirect, yaitu dengan mengganti properti href dari object location tersebut. ```javascript console.log(location); console.log(location.search); ``` Perhatikan location.search yang didapatkan yaitu ?id=101\&name=jhon, yang mempunyai pola diawali dengan '?' dan setiap parameter diseparator dengan '&'. Masing-masing parameter merupakan pasangan key dan value yang dipisahkan dengan '='. Dengan pola ini kita bisa mengubah paremeter url menjadi object json. ```javascript function convertSearchToObj(){ const paramUrl = {}; location.search.substr(1).split("&").forEach((param) => { const pair = param.split("="); paramUrl[pair[0]] = pair[1]; }); return paramUrl; } const paramUrl = convertSearchToObj(); console.log(paramUrl); if (paramUrl.id) { console.log(paramUrl.id); } ``` # Notification Notification mutlak diperlukan ketika kita bertransaksi dengan data, apakah transaksi kita sukses atau gagal. Untuk membuat notification cukup sederhana, dengan memanfaatkan css modal dan fungsi setTimeout(). ### Modal Buat modal notification dengan html dan css seperti berikut ```html

``` ### SetTimeout SetTimeout adalah fungsi javascript yang digunakan untuk memberi jeda eksekusi suatu callback (blok fungsi). Idenya adalah : 1. Tampilkan modal notification 2. dengan fungsi setTimeout(), setlah beerapa mili second, modal notification kembali disembunyikan. 3. Redirect ke halaman yang diinginkan. ```javascript function showNotification(message, type, redirect="") { let notifClass = "info"; if (type === "error" || type === "warning" || type == "success") { notifClass = type; } const notifDiv = document.getElementById("notif-content"); notifDiv.innerHTML = message; notifDiv.classList.add("notif-"+type); document.getElementById("notification").style.display = "block"; setTimeout(function(){ document.getElementById("notification").style.display = "none"; notifDiv.classList.remove("notif-"+type); notifDiv.innerHTML = ""; if (redirect) { location.href=redirect; } }, 3000); } ``` ### Implementasi Login Notification Selanjutnya kita akan memodifikasi file login.html agar mempunyai notification. Fungsi listening event onload dimodifikasi agar jika sukses akan menampilkan notifikasi sukses, dan jika gagal login akan menampilkan notifikasi error login. ```javascript function login() { var xhttp = new XMLHttpRequest(); xhttp.open("POST", "https://node-rest.rijalasepnugroho.com/login", true); xhttp.onload = function() { const loginResponse = JSON.parse(this.responseText); if (loginResponse.token) { localStorage.setItem("token", loginResponse.token); showNotification("Login success", "success", "./list-user.html"); } else { showNotification("Login failed", "error"); } } xhttp.setRequestHeader("Content-type", "application/json"); xhttp.send(JSON.stringify(curUser)); } ``` Berikut adalah kode lengkap file login.html nyang sudah ditambahkan notification. ```html

Login

``` # Asynchronous Asynchronous adalah suatu proses yang dikerjakan secara bersamaan. Di javascript, umumnya suatu kode dikerjakana secara berurutan (synchronous), namun ada banyak yang dikerjakan secara asynchronous sepert event dan Ajax. Keuntungan penggunaan aynchronous adalah proses menjadi lebih cepat, karena tidak harus menunggu suatu blok kode selessai dikerjakan. Jika javascript menemukan suatu proses yang lama, maka sambil menunggu proses itu selesai, javascript akan mengeksekusi kode selanjutnya. Kelemahan asynchronous adalah adanya kemungkinan race condition jika ada suatu blok kode yang membutuhkan hasil dari proses lain, tenryata dieksekusi ketika proses lain tersebut belum memberikan hasil. Besar kemungkinan ketika bliok kode tersebut, datanya masih kosong. Untuk mengatasi hal tersebut, dalam pemrograman asynchronous dioptimalkan penggunaan callback, async/await dan promise. ## Callback Kita telah mempelajari callback sebelumnya. Dalam proses asynchronous, penggunaan callback sangat masif. Sebagai contoh, kita akan menggunakan kode pemanggilan AJAX dengan teknik callback. Namun agar pemahaman lebih utuh, awalnya kita aklan mebuat contoh kode tanpa callback. ```markup

Callback Async - AJAX - List User

``` Pada kode di atas, kita memanggil list(); kemudian memangil displayUser();. fungsi list() berguna untuk mengupdate variabel users dengan data hasil call ajax. Sementara fungsi displayUser() berguna untuk menampilkan data list user ke dalam tabel. Harapannya akan tampil table list user dengan sleuruh data yang ada. Namun karena list() membutuhkan waktu lebih lama, maka displayUser hanya menampilkan header table saja, karena ketika fungsi displayUser() dijalankan, saat itu variabel users masih kosong. Ide dasarnya adalah bagaimana caranya agar fungsi displayUser() dipanggil setelah fungsi list() selesai dieksekusi. Salah satu teknik yang digunakan adalah dengan callback, dimana funhsi displayUser() akan dipanggil tepat setelah variabel users diupdate. Kita akan perbaiki kode di atas dengan teknik callback. fungsi displayUser akan dilempar sebagai parameter fungsi list(), dan dipanggil tepat setelah variabel users diupdate. ```javascript function list(myCallback) { const xhttp = new XMLHttpRequest(); xhttp.onload = function() { users = JSON.parse(this.responseText); myCallback(); }; xhttp.open("GET", "https://node-rest.rijalasepnugroho.com/users"); xhttp.send(); } list(displayUser); ``` ## Promise Promise adalah suatu teknik handling asynchronous dengan memberi janji bahwa suatu kode akan dieksekusi dan hasilnya (apakah akan berhasil atau tidak) akan diberi tahu kemudian. Cara untuk mengetahui hasil suatu promise adalah dengan mendengarkan/mengikuti/listen promise. Dengan teknik ini, akan ad dua buah kode, yaiti kode producer (yang memberi janji), dan kode konsumer (yang mendengarkan hasil). Kode producer mengembalikan suatiu promise dengan dua callback, yaitu bila sukses akan menjalankan callback resolve() sementara jika gagal akan mengembalikan callback reject(). Format producer promise adalah sebagai berikut : ```javascript let myPromise = new Promise(function(myResolve, myReject) { // kode yang mungkin butuh waktu lama untuk eksekusi myResolve(); // when successful myReject(); // when error }); ``` Sementara kode untuk konsumer adalah dengan kata kunci then untuk handling jika hasilnya adalah sukses, dan catch jika hasilnya adalah error. ```javascript myPromise .then(result => console.log(result)) .catch(err => console.error(err)); ``` Kita bisa melengkapi konsumer dengan kata kunci finally yang akan selalu dieksekusi baik sukses maupun error. ```javascript myPromise .then(result => console.log(result)) .catch(err => console.error(err)) .finally(console.log("seleseai")); ``` Sebagi contoh, kita akan mengubah penggunaan callback pada list user dengan promise. Karena pada contoh AJAX sebelumnya kita tidak menghandle error, saya akan mengenalkan event baru di xmlHttprequest yaitu onreadystatechange untuk menghandle event jika ajax sudah selesai. Juga ada suatu properti status untuk mengetahui status code dari response ajax. ```javascript function list() { return new Promise(function(resolve, reject){ const xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://node-rest.rijalasepnugroho.com/users"); xhttp.onreadystatechange = () => { if (xhttp.status !== 200) { reject(new Error("Error call list user")); } else { xhttp.onload = () => resolve(JSON.parse(xhttp.responseText)); } }; xhttp.send(); }); } list() .then(result => { users = result; displayUser(); }).catch(err => console.error(err)) .finally(console.log("selesai")); ``` ## Promise.all() Ada kalanya kode yang dijanjikan bukan hanya satu, namun bisa banyak kode yang dijanjikan. Untuk konsumer, bisa dengan memanfaatkan fitur Promise.all() untuk melisten seluruh kode yang dijanjikan. ```javascript let promises = []; promises.push(Promise.resolve("halo")); promises.push(212); promises.push(new Promise((res, rej) => { res(100); })); Promise.all(promises) .then(result => console.log(result)); ``` ## async/await Penulisan sintaks promise agak merepotkan, untunglah javascript menawarkan solusi async/await. kata kunci async yang diletakkan sebelum function membuat fungsi tersebut akan mengembalikan promise. ```javascript async function salam () { return "Selamat Pagi"; } // artinya sama dengan kode promise berikut async function salam () { return Promise.resolve("Selamat Pagi"); } ``` Sementara sintaks await digunakan untuk menunggu promise selesai dieksekusi. Yang perlu diperhatikan adalah, async-await ini merupakan sintaks ES modern yang hanya bekerja dalam suatu module. Pastikan ketika menulis script, tambahkan informasi type=module. ```markup ``` Dengan mengetahui konsep async dan await, kita bisa mengubah file list-user menjadi kode berikut: ```markup

Callback Async - AJAX - List User

``` # Praktikum II : Mengintegrasikan Halaman Login dan CRUD dengan AJAX Setelah belajar tentang AJAX, yaitu teknik untuk mengintegrasikan aplikasi frontend (HTML, Javascript) dengan backend, saatnya kita mengerjakan tugas praktikum. Untuk keperluan praktikum, sudah disediakan aplikasi backend : url : dengan endpoint: * POST /login data : {"email": "", "password": "1234"} * GET /users * POST /users data : {"email": "", "password": "1234", "name": "nama saya", "age": 12} * GET /users/6 * PUT /users/6 data: {"name": "saya bangga sekali", "age":23} * DELETE /users/22 Tugas praktikum-nya adalah : 1. Gunakan layout dari Tugas praktikum I yang dulu pernah dibuat. 2. Mengintegrasikan dengan backend melalui AJAX. 3. Tugas Praktikum akan dipresentasikan pada pertemuan mendatang. # Pengenalan Database Apa itu Database? Apa itu MySQL? Mengapa MySQL? Apa itu MySQL Workbench? Bagaimana Menginstall MySQL Workbench? # Perancangan Database # Operasi Select # Operasi Join # Operasi Insert # Operasi Update # Operasi Delete # Pengenalan Node JS Node JS memungkinkan javascript untuk bekerja di sisi server. ### Installasi NodeJS Installasi NodeJS bisa dilakukan dengan mendownload melalui halaman dan pilih versi LTS. Ikuti langkah-langkah yang disampaikan ketika melakukan instalasi. Untuk mengecek apakah installasi berhasil dengan baik, ketik perintah berikut :\ `node -v`\ `npm -v` \ npm adalah node package manager untuk mengelola paket-paket library di javascript. ### Get Started {% code title="index.js" %} ```javascript var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Selamat Pagi!'); }).listen(8080); ``` {% endcode %} Jalankan dengan perintah `node index.js` Kemudian buka browser localhost:8080 # Module module.export required import - export # Express Express JS adalah framework yang handal di nodejs. Pembuatan routing menjadi lebih mudah. ### Create Project ``` npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install ` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (nodejs) backend version: (1.0.0) description: backend untuk latihan entry point: (index.js) index.js test command: git repository: keywords: author: license: (ISC) About to write to /Users/rijal/jackyhtg/seri-belajar-pemrograman/nodejs/package.json: { "name": "backend", "version": "1.0.0", "description": "backend untuk latihan", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes ``` ### Install Express Kemudian lanjukan dengan menginstall expres js ``` npm install express ``` ### Basic Routing ```javascript var express = require('./node_modules/express'); var app = module.exports = express(); app.use(express.json()); app.get('/', function (req, res) { res.send('Selamat Pagi!') }); app.get('/users', function (req, res) { const users = [ {name: "Jacky", age: 17}, {name: "Jaya", age: 15}, {name: "Baya", age: 12} ]; res.json(users) }); app.post('/users', function (req, res) { const user = { name: req.body.name, age: req.body.age }; res.status(201).send(user); }); app.put('/users/:id', function (req, res) { var id = req.params.id; const user = { id, name: req.body.name, age: req.body.age }; res.json(user) }); app.delete('/users/:id', function (req, res) { res.sendStatus(204); }); app.listen(3000); console.log('Express started on port 3000'); ``` # Rest API ## Rest API ### Method ### Status Code ## Clean Arsitektur ### Routing ### Service ### Model ### Repositories ### Dependency Injection ## Mysql Connection Buat file helper.config.js ```javascript module.exports = { DB: { HOST: "localhost", USER: "root", PASSWORD: "pass", DB: "latihan" } }; ``` Buat file helper/mysql.js ```javascript const mysql = require("mysql"); const DbConfig = require("./config"); // Create a connection to the database const connection = mysql.createConnection({ host: DbConfig.DB.HOST, user: DbConfig.DB.USER, password: DbConfig.DB.PASSWORD, database: DbConfig.DB.DB }); // open the MySQL connection connection.connect(error => { if (error) throw error; console.log("Successfully connected to the database."); }); module.exports = connection; ``` ## CRUD Untuk Rest API, kita akan menyediakan 5 endpoint meliputi Create, Read, Update dan Delete (CRUD). Penamaaan dan method endpoint mengikuti konsep best practice Rest API, yaitu :\ \- GET /users --> untuk mendapatkan list seluruh users\ \- POST /users --> untuk membuat user baru\ \- GET /users/:id --> untuk mendapatkan satu user berdasarkan id\ \- PUT /users/:id --> untuk mengubah data user berdasarkan id\ \- DELETE /users/:id --> untuk menghapus user berdasarkan id\ \- POST /login --> untuk login user Karena menggunakan desain Clean Arsiteksur, maka struktur folder project kita meliputi: \[domain]\ \---- \[users]\ \---- \[repositories]\ \---- file-repository.js\ \---- \[services]\ \---- file-service.js\ \---- model.js\ \---- route.js\ \---- service.js\ \[helper]\ \---- file-helper.js\ index.js\ \ file index.js berisi : ```javascript var express = require('./node_modules/express'); const DB = require('./helper/mysql'); var cors = require('cors'); var app = express(); app.use(cors()); app.use(express.json()); require("./domain/users/route.js")(app, DB); app.listen(3000); console.log('Express started on port 3000'); ``` file index.js ini simple dan hanya bertugas untuk melakukan pekerjaan middleware berupa :\ \- handling cors melalui middleware cors()\ \- handling json body parser melalui middleware express.json()\ Untuk installasi cors jalankan `npm install cors` Selain itu, konkesi database juga dicreate di file index,js yang nantinya akan diteruskan (diinjeksi) ke seluruh service yang membutuhkan mengikuti konsep dependency injection. Routing dilakukan dengan memanggil routing yang ada di setiap domain. ### GET /users Buat file domain/users/route.js untuk membuat routing GET /users ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); }; ``` Buat file domain/users/service.js ```javascript module.exports = db => { const List = require("./services/list_user")(db); return { List }; }; ``` Buat file domain/users/services/list\_user.js ```javascript module.exports = db => { const User = require("../model.js")(db); return (req, res) => { User.List((err, data) => { if (err) res.status(500).send({ message: err.message || "Some error occurred while retrieving users." }); else res.send(data); }); }; }; ``` Buat file domain/users/model.js ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); return User; }; ``` model merupakan entity dari User yang berisi seluruh atribut (field) dan method dari User. Dalam hal ini, user mempunyai atribut email, name, password dan age. Sementara method yang disediakan untuk endpoint ini adalah User.List. Buat file domain/users/repositories/list\_user.js ```javascript module.exports = db => { return result => { db.query("SELECT id, email, name, age FROM users", function (err, res) { if (err) { console.log("error: ", err); result(null, err); return; } console.log("users: ", res); result(null, res); }); }; }; ``` endpoint GET /users sudah bisa dicoba melalui postman ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-Mji6SDOymuecOequW5J%2FScreen%20Shot%202021-09-16%20at%2017.17.32.png?alt=media\&token=d42e071f-d537-4701-addb-9d01650f6839) ### POST /users Update file domain/users/route.js untuk menambahkan routing POST /users ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); app.post("/users", users.Create); }; ``` Update file domain/users/service.js untuk menambahkan handling service POST /users ```javascript module.exports = db => { const List = require("./services/list_user")(db); const Create = require("./services/create_user")(db); return { List, Create }; }; ``` Update file domain/users/model.js untuk menambahkan method User.Create ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); User.Create = require('./repositories/create_user')(db); return User; }; ``` Buat file domain/users/services/create\_user.js ```javascript const bcrypt = require('bcrypt'); const saltRounds = 10; module.exports = db => { const User = require("../model.js")(db); return (req, res) => { if (!req.body) { res.status(400).send({ message: "Content can not be empty!" }); return } const user = new User({ email: req.body.email, password: bcrypt.hashSync(req.body.password, saltRounds), name: req.body.name, age: req.body.age }); User.Create(user, (err, data) => { if (err) res.status(500).send({ message: err.message || "Some error occurred while create user." }); else res.status(201).send(data); }); }; }; ``` Kode di atas membutuhkan bscrypt untuk hasih password. Jangan lupa install bcrypt melalui perintah `npm install bcrypt`. Buat file domain/users/repositories/create\_user.js ```javascript module.exports = db => { return (newUser, result) => { db.query("INSERT INTO users SET ?", newUser, function (err, res) { if (err) { console.log("error: ", err); result(null, err); return; } delete newUser.password; console.log("created user: ", { id: res.insertId, ...newUser }); result(null, { id: res.insertId, ...newUser }); }); }; }; ``` Endpoint POST /users sudah bisa dicoba melalui postman ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-Mji8a1dvTHOgcGHHBj0%2FScreen%20Shot%202021-09-16%20at%2017.27.47.png?alt=media\&token=a58e1dda-5aea-4ac5-81ed-66f6cabe6664) ### GET /users/:id Update file domain/users/route.js untuk menambahkan routing GET /users/:id ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); app.post("/users", users.Create); app.get("/users/:id", users.View); }; ``` Update file domain/users/service.js untuk menambahkan handling service GET /users/:id ```javascript module.exports = db => { const List = require("./services/list_user")(db); const Create = require("./services/create_user")(db); const View = require("./services/view_user")(db); return { List, Create, View }; }; ``` Update file domain/users/model.js untuk menambahkan method User.View ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); User.Create = require('./repositories/create_user')(db); User.View = require('./repositories/view_user')(db); return User; }; ``` Buat file domain/users/services/view\_user.js ```javascript module.exports = db => { const User = require("../model.js")(db); return (req, res) => { const id = req.params.id; if (!id) { res.status(400).send({ message: "please suply valid id!" }); return } User.View(id, (err, data) => { if (err) res.status(500).send({ message: err.message || "Some error occurred while retrieving user." }); else res.send(data); }); }; } ``` Buat file domain/users/repositories/view\_user.js ```javascript module.exports = db => { return (id, result) => { db.query(`SELECT id, email, name, age FROM users WHERE id = ?`, id, (err, res) => { if (err) { console.log("error: ", err); result(err, null); return; } if (res.length) { console.log("found user: ", res[0]); result(null, res[0]); return; } // not found Customer with the id result({ kind: "not_found" }, null); }); }; }; ``` Endpoint GET /users/:id sidah bisa dites. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-Mji9wJepoKO0ucm1XaJ%2FScreen%20Shot%202021-09-16%20at%2017.33.34.png?alt=media\&token=3b4e53cc-a91c-4c32-812d-b1213b00e515) ### PUT /users\:/id Update file domain/users/route.js untuk menambahkan routing PUT /users/:id ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); app.post("/users", users.Create); app.get("/users/:id", users.View); app.put("/users/:id", users.Update); }; ``` Update file domain/users/service.js untuk menambahkan handling service PUT /users/:id ```javascript module.exports = db => { const List = require("./services/list_user")(db); const Create = require("./services/create_user")(db); const View = require("./services/view_user")(db); const Update = require("./services/update_user")(db); return { List, Create, View, Update }; }; ``` Update file domain/users/model.js untuk menambahkan method User.Update ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); User.Create = require('./repositories/create_user')(db); User.View = require('./repositories/view_user')(db); User.Update = require('./repositories/update_user')(db); return User; }; ``` Buat file domain/users/services/update\_user.js ```javascript module.exports = db => { const User = require("../model.js")(db); return (req, res) => { if (!req.body) { res.status(400).send({ message: "Content can not be empty!" }); return } const id = req.params.id; if (!id) { res.status(400).send({ message: "please suply valid id!" }); } const user = new User({ name: req.body.name, age: req.body.age }); User.Update(id, user, (err, data) => { if (err) res.status(500).send({ message: err.message || "Some error occurred while update user." }); else res.send(data); }); }; }; ``` Buat file domain/users/repositories/update\_user.js ```javascript module.exports = db => { return (id, user, result) => { db.query("UPDATE users SET name = ?, age = ? WHERE id = ?", [user.name, user.age, id], function (err, res) { if (err) { console.log("error: ", err); result(null, err); return; } if (res.affectedRows == 0) { result({ kind: "not_found" }, null); return; } console.log("update user: ", { id: id, ...user }); result(null, { id: id, ...user }); }); }; }; ``` Endpoint PUT /users/:id sidah bisa dites. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-MjiAo7uG6IzcPPSEI1C%2FScreen%20Shot%202021-09-16%20at%2017.37.35.png?alt=media\&token=9061bcf7-aa4b-4a85-b1ad-d397ba66bb57) ### DELETE /users/:id Update file domain/users/route.js untuk menambahkan routing DELETE /users/:id ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); app.post("/users", users.Create); app.get("/users/:id", users.View); app.put("/users/:id", users.Update); app.delete("/users/:id", users.Delete); }; ``` Update file domain/users/service.js untuk menambahkan handling service DELETE /users/:id ```javascript module.exports = db => { const List = require("./services/list_user")(db); const Create = require("./services/create_user")(db); const View = require("./services/view_user")(db); const Update = require("./services/update_user")(db); const Delete = require("./services/delete_user")(db); return { List, Create, View, Update, Delete }; }; ``` Update file domain/users/model.js untuk menambahkan method User.Delete ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); User.Create = require('./repositories/create_user')(db); User.View = require('./repositories/view_user')(db); User.Update = require('./repositories/update_user')(db); User.Delete = require('./repositories/delete_user')(db); return User; }; ``` Buat file domain/users/services/delete\_user.js ```javascript module.exports = db => { const User = require("../model.js")(db); return (req, res) => { const id = req.params.id; if (!id) { res.status(400).send({ message: "please suply valid id!" }); return } User.Delete(id, (err, data) => { if (err) res.status(500).send({ message: err.message || "Some error occurred while delete user." }); else res.sendStatus(204); }); }; }; ``` Buat file domain/users/repositories/delete\_user.js ```javascript module.exports = db => { return (id, result) => { db.query("DELETE FROM users WHERE id = ?", id, (err, res) => { if (err) { console.log("error: ", err); result(null, err); return; } if (res.affectedRows == 0) { // not found Customer with the id result({ kind: "not_found" }, null); return; } console.log("deleted user with id: ", id); result(null, res); }); }; }; ``` Endpoint DELETE /users/:id sidah bisa dites. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-MjiBRy6Z3i9Asw2OdVc%2FScreen%20Shot%202021-09-16%20at%2017.40.20.png?alt=media\&token=b525cbbe-dac2-4a9f-985a-ee9a3a4ba4f2) ### Login Update file domain/users/route.js untuk menambahkan routing POST /login ```javascript module.exports = (app, DB) => { const users = require("./service.js")(DB); app.get("/users", users.List); app.post("/users", users.Create); app.get("/users/:id", users.View); app.put("/users/:id", users.Update); app.delete("/users/:id", users.Delete); app.post("/login", users.Login); }; ``` Update file domain/users/service.js untuk menambahkan handling service login ```javascript module.exports = db => { const List = require("./services/list_user")(db); const Create = require("./services/create_user")(db); const View = require("./services/view_user")(db); const Update = require("./services/update_user")(db); const Delete = require("./services/delete_user")(db); const Login = require("./services/login")(db); return { List, Create, View, Update, Delete, Login }; }; ``` Update file domain/users/model.js untuk menambahkan method User.Login ```javascript module.exports = db => { const User = function(user) { this.email = user.email; this.name = user.name; this.password = user.password; this.age = user.age; }; User.List = require('./repositories/list_user')(db); User.Create = require('./repositories/create_user')(db); User.View = require('./repositories/view_user')(db); User.Update = require('./repositories/update_user')(db); User.Delete = require('./repositories/delete_user')(db); User.Login = require('./repositories/login')(db); return User; }; ``` Buat file domain/users/services/login.js ```javascript const bcrypt = require('bcrypt'); module.exports = db => { const User = require("../model.js")(db); return (req, res) => { if (!req.body || !req.body.email || !req.body.password) { res.status(400).send({ message: "invalid email/password!" }); return } const email = req.body.email; const password = req.body.password; User.Login(email, (err, data) => { if (err) { res.status(500).send({ message: err.message || "Some error occurred while login user." }); return } if (!bcrypt.compareSync(password, data.password)) { res.status(400).send({ message: err.message || "invalid email/password" }); return } res.send({token: "alabama-token"}); }); }; }; ``` Buat file domain/users/repositories/login.js ```javascript module.exports = db => { return (email, result) => { db.query(`SELECT password FROM users WHERE email = ?`, email, (err, res) => { if (err) { console.log("error: ", err); result(err, null); return; } if (res.length) { result(null, res[0]); return; } // not found Customer with the id result({ kind: "not_found" }, null); }); }; }; ``` Endpoint POST /login sudah bisa dites. ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-MjhGi2kJXwPskfHC6jr%2F-MjiKXedcVkvqPLEMdYY%2FScreen%20Shot%202021-09-16%20at%2018.18.13.png?alt=media\&token=e6391007-bd40-43be-befc-a9a6ded4f886) # JWT Token Pada materi sebelumnya, kita telah membuat token yang isinya dihardcode berisi string biasa. Saat ini praktek yang umum adalah dengan menggunakan JWT Token. # Pengenalan Svelte Svelte adalah framework javascript yang modern, cepat dan handal. Keunggulan menggunakan framework utamanya adalah standarisasi kode dan reusable komponen. ### Mengapa Svelte * Write less code * No virtual DOM * Truly reactive ### Installasi Untuk instalasi dan membuat project, lakukan langkah-langkah berikut: * npx degit sveltejs/template nama-project * npm install * npm run dev Sekarang aplikasi sudah bisa dibuka melalui [http://localhost:5000](http://localhost:5000/) ![](https://2862583545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfbY1GzaHftdclrckNE%2F-Mjbpc8ADzJ8ElTt3kBN%2F-MjbqLGCoB1Exak2BsII%2FScreen%20Shot%202021-09-15%20at%2011.59.32.png?alt=media\&token=1b4cc0b1-5b42-4713-81c5-3436d3ccd722) ### Struktur Halaman Struktur halaman svelte sangat sederhana mirip seklai dengan HTML biasa. Terdiri dari tag \

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

``` ### Prop prop adalah variabel yang diexport dari external. variabel ini bisa dilempar dari parent saat memanggil komponen, maupun dari url. Pada contoih kode di atas, name adalah sebuah prop, yang ditandai dari kata kunci : export. Jika kita buka file src/main.js ```javascript import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; ``` Tampak bahwa ketika memanggil komponen App.Svelte, melempar sebuah props dengan nama "*name*" dan value "*world*". ### State state adalah suatu variabel yang dibuat di internal dan value-nya bisa berubah-ubah tergangung pada operasi yang berhubungan dengan variabel tersebut. Untuk membuat state cukup dengan membuat variabel seperti biasa dengan kata kunci let maupun const. Pada contoh kode berikut, selamat adalah sebuah state, yang isinya berubah-ubah tergantung jam. Jika PM akan berisi "*malam*" dan sebaliknya akan berisi "*pagi*". ```javascript

Selamat {selamat} {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

``` # Routing ### Routing Kita akan mengimplementasikan routing di svelte dengan memanfaatkan library svelte-routing Ubah file src/main.js ```javascript import App from './App.svelte'; const app = new App({ target: document.body }); export default app; ``` Buat file src/helper/path.js agart mudah mengelola path aplikasi. ```javascript export const PATH_URL = { BASE: "/", ABOUT: "/tentang-kami" } ``` Buat file src/routes/About.svelte ```markup

Tentang Kami

``` Buat file src/routes/Home.svelte ```markup

Home

``` Ubah file src/App.svelte ```markup ``` Script di atas mengimport svelte-routing, maka kita perlu install library ini dengan menjalankan `npm install svelte-routing` Ubah file package.json -> scripts -> start dengan menambahkan --single ```markup { "name": "svelte-app", "version": "1.0.0", "private": true, "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public --no-clear --single" }, "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.0", "rollup": "^2.3.4", "rollup-plugin-css-only": "^3.1.0", "rollup-plugin-livereload": "^2.0.0", "rollup-plugin-svelte": "^7.0.0", "rollup-plugin-terser": "^7.0.0", "svelte": "^3.0.0" }, "dependencies": { "sirv-cli": "^1.0.0", "svelte-routing": "^1.6.0" } } ``` Kemudian jalankan ulang `npm run dev` Sekarang kita sudah punya routing, yaitu / yang mengharah ke fiule src/routes/Home.svelte dan /tentang-kami yang mengarah ke fiel src/routes/About.svelte ### Gambar Ada kalanya kita perlu menampilkan gambar sebagai informasi maupun sebagai pemanis halaman. Kita akan mempraktekkan penggunaan gambar (maupun asset lainnya) di svelte. Pertama buat folder images di folder public. dan copy-kan gambar yang hendak digunakan ke folder tersebut. Untuk keperluan ini, saya telah menyimpan gambar di public/image/erp.png. Untuk memudahkan mengelola path gambar, kita akan membuat file helper, src/helper/images.js ```javascript export const Images = { img_erp: './images/erp.png' } ``` Sekarang kita ubah file src/routes/Home.svelte ```javascript

Home

``` # Protected Routing Sering kali kita memerlukan halaman yang diproteksi. Hanya user yang sudah login yang bisa masuk ke halaman tersebut. Buat Halaman src/routes/AccessDenied.svelte ```markup

No access 🤕

Go back to Home page

``` Buat file src/stores/token.js ```javascript import { writable } from 'svelte/store'; export const token = writable(localStorage.getItem('token')); ``` Buat file src/ProtectedRoute.svelte ```javascript {#if isAuthenticated} {:else} {/if} ``` Buat file src/routes/UserList.svelte ```javascript

List User

``` Ubah file src/App.svelte ```javascript ``` Buat file src/components/Navigation.svelte ```javascript

{#if isToken}

List User

{:else}

Home
Tentang Kami

{/if}

``` Update file-file routes untuk menambahkan Navigation {% code title="src/routes/About.svelte" %} ```javascript

Tentang Kami

``` {% endcode %} {% code title="src/routes/Home.svelte" %} ```javascript

Home

``` {% endcode %} {% code title="src/routes/UserList.svelte" %} ```javascript

List User

``` {% endcode %} # Login Saat ini login masih dihardcode di component Navigation, seharusnya halaman login diakses melalui form login. Sebagai contoh, kita akan membuat form login di halaman home. Selain form login kita juga akan membutuhkan toast notification, dan fetch api. ### Toast buat file src/helper/toast.js ```javascript import { writable, derived } from "svelte/store" const TIMEOUT = 2000 function createNotificationStore (timeout) { const _notifications = writable([]) function send (message, type = "default", timeout) { _notifications.update(state => { return [...state, { id: id(), type, message, timeout }] }) } let timers = [] const notifications = derived(_notifications, ($_notifications, set) => { set($_notifications) if ($_notifications.length > 0) { const timer = setTimeout(() => { _notifications.update(state => { state.shift() return state }) }, $_notifications[0].timeout) return () => { clearTimeout(timer) } } }) const { subscribe } = notifications return { subscribe, send, default: (msg, timeout = TIMEOUT) => send(msg, "default", timeout), danger: (msg, timeout = TIMEOUT) => send(msg, "danger", timeout), warning: (msg, timeout = TIMEOUT) => send(msg, "warning", timeout), info: (msg, timeout = TIMEOUT) => send(msg, "info", timeout), success: (msg, timeout = TIMEOUT) => send(msg, "success", timeout), } } function id() { return '_' + Math.random().toString(36).substr(2, 9); }; export const notifications = createNotificationStore() ``` Buat file src/components/Toast.svelte ```javascript

{#each $notifications as notification (notification.id)}

{notification.message}

{#if notification.icon}

Contoh Inline Style

Warna dengan nama tomato

Warna dengan Hex - #ff6347

Warna dengan RGB - rgb(255, 99, 71)

Warna dengan HSL - hsl(9, 100%, 64%)

Warna dengan RGBA - rgba(255, 99, 71, 0.5)

Warna dengan HSLA - hsla(9, 100%, 64%, 0.5);

Judul Utama

Sub Judul

Judul Utama

Sub Judul

Judul Utama

Sub Judul

Judul Utama

Sub Judul

Judul Utama

Judul Biasa

Judul Class

Judul Class

Judul Class

atau \

Hello {name}!

Selamat {selamat} {name}!

Tentang Kami

Home

Home

No access 🤕

Go back to Home page

List User

Tentang Kami

Home

List User

Selamat datang di svelte skeleton

Selamat datang di svelte skeleton

List User

Tambah User

View User

List User