JAVASCRIPT – TEKNIK SPA UNTUK MEMUAT ATAU LOADING TEKS DAN HALAMAN WEB

Assalamu ‘alaikum temen2 aGan programmer web Yth

Terima kasih sudah bergabung dan membaca kembali artikel asanoer bnerikutnya. Kembali lagi asanoer suguhkan artikel menarik yang masih satu topik dengan artikel JAVASCRIPT – TEKNIK SPA UNTUK LOADING ATAU MEMUAT GAMBAR. Yaitu masih sama utntuk akses data dari server melalui browser dengan teknik Single Page Application. Kali ini bagaimana kalau yang dimuat adalah sebuah teks secara terpisah. Dalam artian terpisah yaitu tidak satu file dengan rutin fungsi penanganan hashnya. Silahkan untuk menikmatinya.

Silahkan Download

Karena asanoer tidak memaksakan bagi aGan2 untuk membaca seluruhnya. Maka silahkan langsung saja unduh cepat dari link bawah ini. Karena siapa tahu ada sebagian aGan2 kurang suka baca-baca artikel yang panjang.

DOWNLOAD DI SINI

(password: www.asanoer.com)

Kecuali bagi aGan2 yang penasaran teknik penyusunannya.

Teknik dan Langkah-langkah

Seperti kebanyakan artikel asanoer, maka cara penyuguhan langkah-langkah pembuatannya adalah beriokut ini.

1. Buka Halaman Ini

Silahkan abaikan ini jika tidak penting, namun asanoer menganjurkan aGan2 membaca terlebih dahulu HALAMAN INI. Kemudian silahkan kembeli ke artikel ini lagi.

2. Jika aGan Belum Download Link di Atas

Khusus bagi aGan yang tidak suka hal praktisnya. Maka silahkan download bahannya pada artikel sebelumnya JAVASCRIPT – TEKNIK SPA UNTUK LOADING ATAU MEMUAT GAMBAR. Karena asanoer tidak melepaskan topik sebelumya begitu saja. Kemudian buka hasil download tersebut, dan silahkan ikuti kembali langkah berikut.

3. Tambahkan Fungsi Berikut

Karena hanya melengkapi artikel sebelumnya, maka silahkan buka hasil download pada poin di atas untuk melengkapinya.

Menu-menu

 

Fungsi AJAX Loading.

 

Pada baris berikut.

 

Ganti menjadi

Karena pada fungsi loadAjax() ada ‘halaman/’, maka silahkan buat folder dengan nama ‘halaman’ dalam satu folder. Kemudian buat file-file halaman menurut selera sesuai menu-menu yang tersedia dalam aplikasi atau web aGan2. Misalnya dalam menu ada “#tentang-kami” maka buatlah dalam folder “halaman” tersebut dengan nama “tentang-kami.html” dan lainnya. Atau silahkan lihat dalam contoh download yang asanoer sertakan dalam artikel ini.

4. Uji Coba

Karena masih dalam topik yang sama yaitu teknik SPA, maka hanya 3 ujicoba. Asumsinya asanoer membuat virtualhost dengan URL https://asanoer-loc.tk/a/ sehingga URL ini langsung mengambil file index.html secara otomatis. Sedangkan untuk aGan2 boleh pakai http://localhost/terserah-agan/ (opsional).

  • Loading halaman pertama kali

Pemuatan ini biasanya tanpa dimulai pemilihan halaman oleh user (dalam arti “default”). Sehingga saat memuat pertama kali maka user hanya akan mengetikkan https://asanoer-loc.tk/a/ dan otomatis cek dari hash.location akan masuk ke hash atau menu “#tes-awalan”. Hal ini akan memuat ajax fungsi file tes-awalan.html di server.

 

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-01-mengetik-url

Gambar-01-mengetik-url-kunjungan-pertama-kali

 

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-02-memuat-halaman-tes-awalan-html

Gambar-02-memuat-halaman-tes-awalan.html

  • Loading halaman dengan memilih menu

Sedangkan aksi ini, maka user akan memilih menu yang tersedia dalam aplikasi. Dan tentunya yang memiliki hash yang unik di setiap menunya. Klik menu akan menyebabkan perubahan hash pada URL yang diikuti pemuatan halaman sesuai nama file dalam hash tersebut di server.

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-03-memuat-halaman-dengan-pilih-menu

Gambar-03-memuat-halaman-dengan-pilih-menu

  • Loading halaman ketik hash

Sekarang silahkan aGan coba ketikkan hanya nama hash saja di address bar (URL). Maka otomatis pemuatan akan menyesuaikannya ke halaman yang ada di server.

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-04-memuat-halaman-dengan-ketik-hash-saja

Gambar-04-memuat-halaman-dengan-ketik-hash-saja

  • Halaman tidak ada

Untuk terakhirnya maka bagaimana jika file halaman tidak ada dalam server. Maka skrip penanganannya adalah dengan cek apakah status = 404. Silahkan lihat skripnya kembali.

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-05-halaman-tidak-ada-404

Gambar-05-halaman-tidak-ada-404

javascript-teknik-spa-untuk-memuat-atau-loading-teks-dan-halaman-web-06-halaman-tidak-ada-404-2

Gambar-06-halaman-tidak-ada-404-ke-2

Teori Dasar Kecil

Dari pengalaman menarik di atas maka teori dasar dan simpulan kecil yang dapat dipelajari adalah loading halaman di teknik SPA ini tidak lepas dari teknik loading AJAX. Karena teknik ajax ini memberikan kemudahan loading di belakang layar. Artinya halaman tidak perlu direfresh ulang. Karena memang tujuan utama dari SPA adalah meloading semua halaman aplikasi website dibrowser dalam satu wadah yang tetap. Silahkan aGan2 untuk memberikan komentarnya jika ada kesalahan baik praktek atau teori kecil asanoer. Boleh berlangganan supaya tidak tertinggal artikel menarik terbaru dari asanoer dengan klik gambar lonceng di kiri bawah.

Terima kasih sudah membaca dan insyaAllah bermanfaat..

Sumber-sumber :

  • Semua ilmu dari Allah Subkhanahu wa Ta’ala.
  • Pencarian-pencarian di mesin pencari dengan kata-kata “Javascript Ajax Loading”
  • Untuk rutin ajax asanoer contoh dari halaman AJAX Introduction milik w3schools.com
  • Sedangkan status cek loading disediakan juga di w3schools.com tersebut.
  • Screeshoot dari asanoerdotcom saat coba dan uji belaka.

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.