Lab 5: JavaScript dan AJAX

Pemrograman Berbasis Platform (CSGE602022) - diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2022/2023

---

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk mengerti:

• Penggunaan fungsi JavaScript pada front-end development
• Penggunaan dasar JavaScript
• Penggunaan AJAX

Pengenalan JavaScript

Apa itu JavaScript?

JavaScript merupakan bahasa pemrograman multi-paradigma tingkat tinggi lintas platform (cross platform high-level multi-paradigm programming language). Sifat multi-paradigma membuat JavaScript mendukung konsep object-oriented programming, imperative programming, dan functional programming. JavaScript sendiri merupakan implementasi dari ECMAScript, yang merupakan inti dari bahasa JavaScript. Beberapa implementasi lain dari ECMAScript yang mirip dengan JavaScript antara lain JScript (Microsoft) dan ActionScript (Adobe).

JavaScript, bersama dengan HTML dan CSS, menjadi tiga teknologi utama yang dipakai pada pengembangan web. Keuntungan menggunakan JavaScript dalam pengembangan web, pada dasarnya, antara lain JavaScript dapat memanipulasi halaman web secara dinamis dan memberikan interaksi lebih kepada pengguna. Oleh karena itu, hampir semua situs web modern saat ini menggunakan JavaScript dalam halaman web mereka untuk memberikan pengalaman terbaik kepada pengguna. Beberapa contoh hal yang dapat kita lakukan dengan menggunakan JavaScript antara lain menampilkan informasi berdasarkan waktu, mengenali jenis browser pengguna, melakukan validasi form atau data, membuat cookies (bukan kue, tapi cookies), mengganti styling dan CSS suatu element secara dinamis, dan lain-lain.

Pada pengembangan web umumnya kode JavaScript digunakan pada client-side suatu web (Client-side JavaScript) namun beberapa jenis kode JavaScript saat ini digunakan pada server-side suatu web (Server-side JavaScript) seperti node.js. Istilah client-side menunjukkan bahwa kode JavaScript akan dieksekusi atau dijalankan pada browser pengguna, bukan pada server situs web. Hal ini berarti kompleksitas kode JavaScript tidak akan memengaruhi performa server situs web tersebut namun memengaruhi performa browser dan komputer; semakin kompleks kode JavaScript, maka semakin banyak memori komputer yang dikonsumsi oleh browser.

Pada mata kuliah PBP, kita hanya akan fokus kepada kode client-side JavaScript.

Bagaimana tahapan JavaScript dieksekusi oleh browser?

Perhatikan diagram berikut.

Setelah browser mengunduh halaman HTML web maka tepat dimana tag <script></script> berada, browser akan melihat tag script tersebut, apakah tag tersebut berisi kode embedded JavaScript atau merujuk file eksternal JavaScript. Jika merujuk pada file eksternal JavaScript, maka browser akan mengunduh file tersebut terlebih dahulu.

Cara penulisan JavaScript

Cara penulisan JavaScript bisa dilakukan dengan embedded JavaScript atau external JavaScript. Kode JavaScript dapat didefinisikan atau dituliskan secara embedded pada file HTML maupun secara terpisah pada file tersendiri. Jika ditulis dalam file terpisah dari HTML, ekstensi file yang digunakan untuk file JavaScript adalah .js. Berikut contoh beberapa pendefinisian dari JavaScript.

JavaScript dapat diletakkan pada head atau body dari halaman HTML. Selain itu, kode JavaScript HARUS dimasukkan di antara tag <script> dan </script>. Anda dapat meletakkan lebih dari satu tag script yang berisi JavaScript pada suatu file HTML.

Embedded JavaScript pada HTML

index.html

<script type="text/JavaScript">
  alert("Hello World!");
</script>

External JavaScript pada HTML

index.html

<script type="text/JavaScript" src="js/script.js"></script>

js/script.js

alert("Hello World!");

Pada file eksternal JavaScript, tag <script> tidak perlu lagi ditambahkan.

Memisahkan JavaScript pada file tersendiri dapat memberikan beberapa keuntungan seperti kode dapat digunakan di file HTML lain, kode JavaScript dan HTML tidak bercampur sehingga lebih fokus saat mengembangkan aplikasi, serta mempercepat loading halaman. File .js biasanya akan di-cache oleh browser sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada file .js, maka browser tidak akan meminta file .js tersebut kepada server lagi, namun akan menggunakan file dari cache yang sudah disimpan sebelumnya.

Eksekusi JavaScript

Setelah JavaScript sudah terunduh dengan sempurna, maka browser akan langsung mulai mengeksekusi kode JavaScript. Jika kode tersebut BUKAN merupakan event-triggered, maka kode langsung dieksekusi. Jika kode tersebut merupakan event-triggered, maka kode tersebut hanya akan dieksekusi jika event yang didefinisikan terpicu (triggered).

// langsung dieksekusi
alert("Hello World");

// langsung dieksekusi
var obj = document.getElementById("object");
// langsung dieksekusi, menambahkan event handler onclick untuk element object
obj.onclick = function () {
  // hanya dieksekusi jika element 'object' di klik
  alert("You just click the object!");
};

Sintaks JavaScript

Variabel

Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.

var example = 0; // var example merupakan sebuah bilangan
var example = "example"; // var example merupakan sebuah string
var example = true; // var example merupakan sebuah boolean

JavaScript dapat menampung banyak tipe data; mulai dari string, integer, hingga object sekalipun. Berbeda dengan Java yang penandaan tipe datanya dibedakan dengan head variable (contoh ingin membuat variabel dengan tipe data int, maka sintaknya seperti int x = 9), JavaScript mempunyai ciri khas loosely typed atau dynamic language, yakni kalian tidak perlu menuliskan tipe data pada head variable dan JavaScript nantinya akan secara otomatis membaca tipe data kalian berdasarkan standar yang ada (seperti pada contoh diatas).

Ada beberapa aturan dalam pemilihan indentifiers atau nama variabel dalam JavaScript. Karakter pertama HARUS merupakan alfabet, underscore ( _ ), atau karakter dollar ($). Selain itu, JavaScript identifiers bersifat case sensitive.

String Concatenation

Dalam JavaScript, kita juga dapat menyambungkan string dengan string lainnya seperti pada Java.

var str1 = "PBP" + " " + "Fun";
var str2 = "PBP";
var str3 = "Fun";
var str4 = str2 + " " + str3;
var str5 = "Fun";
var str6 = `PBP ${str5}`;  // Memiliki hasil yang sama seperti "PBP" + " " + str5

JavaScript Scope

Variabel Lokal

Variabel yang didefinisikan dalam fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.

// kode diluar fungsi thisFunction() tidak dapat mengakses variabel courseName
function thisFunction() {
  var courseName = "PBP";
  // kode di dalam fungsi ini dapat mengakses variabel courseName
}

Variabel Global

Variabel yang didefinisikan DI LUAR fungsi bersifat global dan dapat diakses oleh kode lain dalam file JavaScript tersebut.

var courseName = "PBP";
function thisFunction() {
  // kode di dalam fungsi ini dapat mengakses variabel courseName
}

Auto Global Variable

Value yang di-assign pada variabel yang belum dideklarasikan otomatis menjadi global variable walaupun variabel tersebut berada di dalam suatu fungsi.

thisFunction(); // function thisFunction() perlu dipanggil terlebih dahulu
console.log(courseName); // print "PBP" pada JavaScript console
function thisFunction() {
  courseName = "PBP";
}

Mengakses Variabel Global dari HTML

Anda dapat mengakses variabel yang berada dalam file JavaScript pada file HTML yang mengunduh file JavaScript tersebut.

...
<input type="text" onclick="this.value=courseName" />
...

...
var courseName = "PBP";
...

Function dan Event

Function adalah sekumpulan grup dari kode-kode yang bisa dipanggil dimanapun pada bagian kode program (mirip dengan method pada Java). Hal ini mengurangi redundansi kode yang ada (mengurangi kode-kode yang dapat sama berulang-ulang). Selain itu, function pada JavaScript sangat berguna untuk memudahkan elemen pemanggilan secara dinamis. Function dapat dipanggil sesama function) dan dapat juga dipanggil karena _event (akan dijelaskan di bawah). Sebagai contoh, berikut kode yang terdapat pada index.html.

...
<input type="button" value="magicButton" id="magicButton" onclick="hooray();" />
...

Kemudian berikut adalah kode pada javascript.js.

...
function hooray(){
    alert("Yahoo!");
}
...

Apabila magicButton ditekan, maka fungsi onclick akan menjalankan function hooray() pada javascript.js, lalu muncul alert sesuai yang sudah di-assign sebelumnya.

Kode onclick sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut event. Event adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari onclick adalah penanda apa yang akan dilakukan JavaScript jika elemen tersebut ditekan. Selain itu, event biasanya diberikan sebuah fungsi yang berguna sebagai perintah-perintah untuk JavaScript. Selain itu, banyak contoh-contoh event lainnya seperti onchange, onmouseover, onmouseout, dan lain sebagainya yang bisa kalian baca pada tautan ini.

JavaScript HTML & CSS DOM

HTML DOM

HTML DOM (Document Object Model) adalah standar bagaimana mengubah, mengambil, dan menghapus HTML elements. HTML DOM dapat diakses melalui JavaScript atau dengan bahasa pemrograman lainnya. Detail lengkapnya dapat dilihat di sini.

Berikut contoh implementasinya.

...     
<div>
  <p onclick="myFunction()" id="demo">Example of HTML DOM</p>
      
</div>
...

...
    function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
    }
...

CSS DOM

Sama dengan HTML DOM, CSS DOM dapat mengubah CSS secara dinamis melalui JavaScript. Detail lengkapnya dapat dilihat di sini.

Berikut adalah contohnya.

index.html

...
<p id="blueText" onclick="changeColor()">Click me v2</p>
...

javascript.js

...
function changeColor(){
    document.getElementById("blueText").style.color="blue";
}
...

Pengenalan AJAX

AJAX merupakan singkatan dari Asynchronous JavaScript And XML.

AJAX bukanlah sebuah bahasa pemrograman. AJAX menggunakan browser untuk meminta data dari web server dan JavaScript serta HTML DOM untuk menampilkan data. AJAX dapat menggunakan XML untuk mengirim data tetapi dapat juga menggunakan teks ataupun JSON. AJAX membuat halaman web memperbarui data secara asinkronus dengan mengirimkan data ke server di balik layar, artinya kita dapat memperbarui sebagian elemen data pada halaman tanpa harus me-reload keseluruhan halaman.

Berikut ini adalah cara kerja AJAX.

1. Sebuah event terjadi pada halaman web (contohnya tombol submit data ditekan)
2. Sebuah XMLHttpRequest object dibuat oleh JavaScript
3. XMLHttpRequest object mengirimkan request ke server
4. Server memproses request tersebut
5. Server mengembalikan response kembali kepada halaman web
6. Response dibaca oleh JavaScript
7. Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)

Anda bisa menggunakan jQuery untuk melakukan AJAX. JQuery adalah library JavaScript yang dibuat untuk mempermudah akses ke beberapa Core API yang disediakan oleh browser. Berikut ini adalah contoh penggunaan JQuery dalam melakukan pemanggilan AJAX.

Loading Code Editor...

Output:

Selain itu, kalian juga dapat melakukan AJAX di browser modern dengan menggunakan fungsi fetch() yang diberikan oleh JavaScript. Penggunaan fetch() untuk melakukan pemanggilan AJAX dapat dilihat di tautan berikut ini: https://www.w3schools.com/jsref/api_fetch.asp

Tutorial

Anda diminta untuk menambahkan fungsionalitas AJAX ke projek wishlist yang sudah dibuat pada Tutorial 1.

• Buatlah templat baru bernama wishlist_ajax.html dengan isi yang sama seperti wishlist.html
• Buat view baru yang mengarah ke halaman wishlist_ajax.html. Tambahkan pula path /wishlist/ajax untuk mengakses view tersebut.
• Implementasikan AJAX pada halaman wishlist_ajax.html
  • Lakukan pengambilan seluruh data wishlist dengan menggunakan AJAX GET. Anda dapat menggunakan endpoint JSON yang telah dibuat pada Lab 2 sebagai sumber data.
  • Buatlah form untuk menambahkan BarangWishlist dengan menggunakan AJAX POST di page yang sama dengan wishlist_ajax.html.
    • Buatlah view baru yang menerima data dari form dan menambahkan BarangWishlist baru ke database.
    • Tambahkan path /wishlist/ajax/submit yang mengarah ke view yang telah Anda buat.
    • Gunakan jQuery atau fetch() untuk melakukan submisi data form secara asinkronus ke path yang telah dibuat.
    • Lakukan refresh BarangWishlist pada tabel secara asinkronus untuk menampilkan barang yang ditambahkan tanpa reload seluruh halaman.

Anda harus menggunakan AJAX saat mengimplementasikan tugas ini. Submisi yang tidak menggunakan AJAX **tidak dinilai**.

Extra Information: Web Storage

Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna. Hal ini berguna apabila anda menggunakan framework front-end seperti React ataupun Vue, karena kemampuan penggunaan cookies pada framework-framework tersebut terbatas. Sebelum HTML5, data aplikasi harus disimpan dalam cookies (termasuk dalam setiap permintaan server). Penyimpanan lokal bersifat lebih aman dan sejumlah besar data dapat disimpan secara lokal tanpa mempengaruhi kinerja situs web. Tidak seperti cookies, batas penyimpanan jauh lebih besar (setidaknya 5MB) dan informasi yang disimpan tidak pernah ditransfer ke server. Penyimpanan lokal adalah per asal (per domain dan protocol). Semua halaman (dari satu asal) dapat menyimpan dan mengakses data yang sama.

Terdapat 2 cara menyimpan data menggunakan web storage.

• window.localStorage - menyimpan data tanpa tanggal kadaluarsa

• window.sessionStorage - menyimpan data untuk satu session (data hilang ketika tab browser ditutup)

localStorage Object

Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.

Berikut adalah contoh implementasinya.

index.html

...
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>
  Close the browser tab (or window), and try again,
  and the counter will continue to count (is not reset).
</p>
...

javascript.js

...
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
...

Apabila halaman tersebut dijalankan, ketika tombol ditekan maka terhitung jumlah click akan bertambah. Ketika browser ditutup dan kita membuka kembali halaman sebelumnya, dapat dilihat bahwa perhitungan jumlah click akan dilanjutkan dari yang sebelumnya.

sessionStorage Object

Objek sessionStorage bekerja dengan cara yang mirip dengan localStorage (untuk mencoba sessionStorage, silakan gunakan kode sebelumnya namun ganti objek localStorage dengan sessionStorage). Namun apabila browser ditutup dan halaman sebelumnya dibuka kembali, click count akan dimulai kembali dari 0.

Untuk membaca lebih lanut mengenai HTML5 WebStorage, silakan baca referensi berikut: HTML5 WebStorage.

Referensi

1. JavaScript
2. jQuery
3. PBP-2017 Lab 6
4. PBP-2021 Lab 5
5. TheCatAPI

Akhir Kata

Selamat, Anda telah menyelesaikan tutorial Django terakhir! Jangan lupa melakukan add, commit, push dengan git.

---

Kontributor

• [DRY] Adrian Ardizza
• [FAR] Muhammad Haqqi Al Farizi
• [VS] Vincent Suryakim
• [ZKA] Zidan Kharisma Adidarma
• [LAH] Muhammad Athallah (Korektor Dokumen)