JAVASCRIPT – MODUL DASAR MEMBUAT SINGLE PAGE APLLICATION

Assalamu ‘Alaykum temen-temen aGan semuanya.

Selamat sore, dan selamat membaca kembali artikel baru dari asanoer dot com. Tentunya sudah lama sekali artikel terakhir asanoer delapan bulan yang lalu dan kini inshaAllah kembali lagi dengan artikel menarik buat aGan2 semuanya. Yups, kenapa dibilang menarik, karena ini adalah pengalaman pribadi dari asanoer sendiri. Pengalaman menemukan sebuah skrip sederhana yang dapat menampilkan aplikasi buatan sendiri. Tentunya bagi asanoer merupakan sebuah kebanggaan jika dapat berbagi pengalaman pribadi di bidang pemrograman komputer kepada aGan2 walopun sedikit tapi mudah-mudahan banyak manfaat.

Toeri Dasar Teknik SPA

aGan2 programmer web Yth, pasti sudah mengenal yang namanya SPA (Single Page Application). SPA merupakan teknik untuk menampilkan sebuah laman website dalam satu halaman utuh alias tidak mereload halaman baru saat berganti URL. Atau mengutip dari website devaradise.com tertulis bahwa SPA adalah salah satu jenis aplikasi website dimana hanya ada satu halaman yang meng-handle semua aktivitas yang terjadi dalam aplikasi tersebut. Nah aktifitas penampilan tidak lepas dari yang namanya Javascript. Untuk itu mari asanoer ajak aGan2 semua mengikuti langkah-langkah yang tertulis dalam artikel berikut ini. Tentunya asanoer batasi hanya sekedar menampilkan gambar saja. Untuk pengembangan berikutnya asanoer serahkan ke masing-masing selera aGan2 Programmer Yth semuanya.

Teori lain yang asanoer kutip adalah dari artikel mozzila dari link developer.mozilla.org yang asanoer dapat dari pencarian sederhana di Google.co.id yaitu “hash change detection”.

Teknik dan Langkah Pembuatan

Okedah, langsung saja tidak berpanjang lebar berikut ini langkah-langkahnya.

1. Kunjungi Halaman Ini

Seperti umumnya artikel asanoer sebelumnya. Maka kepada aGan2 Yth dianjurkan membaca terlebih dahulu halaman berikut HALAMAN INI. Kemudian kembali lagi ke artikel ini.

2. Download File Ini

File terlampir dapat aGan2 download sebagai pembelajaran dasar pembuatan SPA. Tapi dalam file ini masih dasar sekali, sehingga perlu ada pengembangan dari selera kebutuhan masing-masing aGan2. Download saja jika aGan2 malas baca langkah-langkah di bawah ini ((tapi asanoer tidak merekomendasikan)).

DOWONLOAD DOWNLOAD DOWNLOAD

3. Buka Halaman Mozilla

Seperti yang sudah asanoer kemukakan di atas, teori dasar dari SPA didapat dari halaman mozilla. Silahkan aGan2 buka link di atas kembali sebagai pembelajaran ulang.

4. Membuat Link Hash URL

Setelah aGan2 mendownload, dapat dilihat langkah-langkahnya dengan file-file berurutan. Yang pertama adalah membuat URL hash. Hash atau dikenal oleh kita itu tanda “pagar” (#) merupakan space pemisah antara URL asli dengan URL untuk keperluan klik satu halaman (ini istilah asanoer saja, hehehe). Untuk membuat hash, aGan2 bisa membuatnya sperti berikut.

Hash URL

<a href=”#gambar 1″>Gambar 1</a>
<a href=”#gambar 2″>Gambar 2</a>

Setiap membuat link hash selalu disertakan tanda pagar. Dan sebagai informasi penggunaan hash sebelumnya adalah hanya untuk menampilkan segmen tertentu dari sebuah halaman website.

5. Penanganan Perubahan Hash URL

Untuk mengambil tindakan setelah klik oleh user adalah dengan sebuah skrip Javascript (JS) yang sudah aGan2 baca dari web mozilla di atas. Yaitu 1) tindakan saat hash tidak ada di URL, 2) tindakan saat hash telah disertakan dalam URL, 3) tindakan saat ada perubahan hash dalam URL.

  • 1. Tindakan saat hash tidak ada di URL

Yaitu saat user hanya mengetikkan url tanpa hash atau gampangnya awal kali sebuah website dikunjungi tanpa adanya hash sama sekali. Karena hash itu mewakili sebuah halaman, maka harus dibuat cek kalau hash tidak ada dalam URL. Cek hash bisa menggunakan skrip berikut.

Cek Tidak Ada Hash

Maka hanya perlu cek location.hash jika belum ada maka berikan hash dalam contoh adalah #tes-awalan. Sehingga nantinya URL akan menjadi http(s)://xxxxxxx.xxx/xxxx#tes-awalan yang tentunya si user awalnya hanya mengetik http(s)://xxxxxxx.xxx/xxxx saja.

  • 2. Tindakan saat hash sudah disertakan dalam URL

Lain lagi saat hash sudah ada dalam rentetan URL maka penanganannya menjadi berikut.

Hash Dalam URL

hashHandler() adalah fungsi yang akan dibahas nanti.

  • 3. Tindakan saat ada perubahan hash dalam URL

Ini adalah saat user aGan2 semua memilih link yang ada di halaman. Saat user klik link yang mengandung hash maka tindakan skripnya berikut.

Hash Di Klik

hashHandler adalah fungsi yang akan dibahas nanti.

6. Membuat Efek Perubahan Hash

Dalam perkembangannya hash yang sebelumnya hanya untuk membuat kemudahan berpindah dari suatu segmen di halaman website maka hash sekarang bisa dipergunakan untuk memuat halaman tanpa merubah proses loading dari browser. Nah, untuk membuat efek loading sebuah halaman tersebut diperlukan penaganan (handle) khusus yaitu dengan menggunakan beberapa baris kode JS seperti berikut.

Fungsi JS hashHandler()

aGan2 dapat meilihat sendiri fungsi di atas adalah fungsi yang terakhir dari penanganan hash ini. Fungsi tersebutlah yang akan memuat halaman nantinya. Jadi kode lengkapnya adalah sebagai berikut (ada dalam link Download di atas).

Terima kasih telah membaca dan inshaAllah bermanfaat buat aGan2, dan bersambung untuk aplikatifnya di pemuatan halaman nanti.

Wassalamu ‘alaikum…

Sumber-sumber :

  • Ilmu-ilmu dari Allah Subkhanahu wa Ta’ala untuk sumber segala ilmu.
  • Baca-baca dari beberapa halaman website yang didapat dari pencarian di mesin pencari.
  • Dari pengalaman pribadi asanoer membuat aplikasi cicilan untuk konversi ke SPA.

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.