JAVASCRIPT – TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI GET

Assalamu ‘alaikum temen2 aGan semua para pecinta koding party Yth, apa kabarnya? InsyaAllah dalam keadaan baik dan sehat selalu.

Asanoer kembali lagi memberikan sedikit pengalaman pribadi yang masih sama di dalam bidang pemrogramman website. Dan juga masih dalam topik yang sama yaitu pemrogramman web dengan teknik SPA (Single Page Application). Juga masih menggunakan file-file dari artikel sebelumnya. Silahkan kunjungi artikel sebelum ini jika aGan2 baru mengikuti asanoerdotcom.

Kali ini asanoer akan memberikan teknik SPA untuk mengirimkan data melalui GET. Teknik SPA sebelumnya sebenarnya sudah menggunakan pengiriman data ini. Tapi hanya sebatas medapatkan data berupa halaman web melalui belakang layar. Nah, untuk kali ini, asanoer menyajikan cara mengirimkan data melalui GET seperti halnya pengiriman variabel dalam sebuah URL.

Silahkan Download

Bagi temen-temen aGan yang merasa bosan dengan materi yang panjang silahkan dapat langsung download dan mencobanya di PC aGan sendiri. Ataupun dapat juga melihat-lihat demonya dalam link-link berikut.

DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD

Untuk demo bersifat tidak mengikat dengan file download yang disertakan, artinya kemungkinan ada sedikit perbedaan dan link download ada dalam demo tersebut.

Teknik dan Langkah-langkah

Dengan mengikuti kaidah penulisan seperti artikel asanoer sebelumnya, maka berikut ini adalah sajian dari langkah-langkah sederhana yang asanoer anjurkan.

1. Buka halaman ini

Halaman ini adalah halaman utama saat memulai semua projek yang ada di asanoer. Dan mudah-mudahan dapat mengawali semua kegiatan pemrogramman dari artikel ini, insyaAllah.

2. Membuat susunan file dan folder

Artikel ini asanoer sajikan dengan file lampiran dalam link download di atas. Setelah aGan bongkar fie zip tersebut maka aGan mendapati susunan folder berikut.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-01-susunan-file-&-folder

Gambar-01-susunan-file-&-folder

Dapat dilihat kalau ada penambahan folder yaitu folder “aset-inc” untuk semua php included, folder aset-gambar yang berisi semua gambar-gambar dalam projek artikel ini, dan folder untuk membuat halaman adalah folder “halaman”. Seperti yang aGan ketahui pasti bagus kalau semua kode dimasukkan dalam modul-modul terpisah sehingga sebagian ada yang menyebutkannya sebagai sistem website dinamis. Yaitu sistem web yang hanya mengambil halaman atau data secara bagian tertentu dan tidak monoton. Terlihat ada file index.php dan file awalan.php yang fungsinya berikut.

– Membuat file index.php

Seperti sistem web dinamis pada umumnya, maka semua file modul akan dimuat melalui satu file yaitu file index.php. Silahkan aGan2 lihat dan priksa kebenarannya dan berikut kode php yang ada dalam index.php.

Fungsinya hanya membuat penanganan routing dari semua URL yang diakses oleh user. Aliran diagram (flowchart) berikut.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-02-flow-chart-index-php.

Gambar-02-flow-chart-index-php

Dari gambar tersebut maka aGan mendapati tiga akses URL sperti ini.

1) Akses URL   ……/

User tidak tahu URL utuhnya atau hanya tahu root URLnya seperti asanoer.com/ atau asanoer.com/folderku/ dan lainnya. Pada saat ini maka routing menyatakan bahwa tidak ada variabel halaman yang diakses. Sehingga rojuting akan mengalihkan ke …./?en…. sehingga menjadi asanoer.com/?en…

2) Akses URL   …../?en

Saat browser sudah mengalihkannya ke URL ini maka otomatis ada satu variabel yang ke set yaitu “en” otomatis index.php akan mengincluded-kan file awalam.php (akan di bahas berikutnya). Asumsikan variabel “hal” belum ada diakses di dalam URL. Setelah isi dari awalan.php diserahkan ke browser maka akan dicek apakah ada hash dalam URL, jika belum ada maka otomatis akan diakses hash URL dengan  ….?en#hal=tes-awalan dan halaman tes-awalan akan dimuat dalam browser.

3) Akses URL   …../?en#hal=nama-halaman&var1=xxxxx&var2=xxxxx&…..dst…

Dengan hash yang panjang tersebut maka dapat aGan simpulkan sendiri, kalau semua variabel setelah tanda hash adalah variabel yang diakses menggunakan GET. Maka dari itu, dalam file php kode GET dapat digunakan untuk mengambil nilai-nilai variabel tersebut. Tapi proses akses URL utuhnya ada dalam penanganan hash dalam file awalan.php

4) Akses URL  …./?en#hal=nama-halaman-tidak-ada

Andaikan user mengakses nama halaman yang tidak ada dalam server, maka penanganan cek file exist akan mengambil file “tidak-ada-halaman.php”.

– Fungsi file awalan.php

File ini merupakan tempat beradanya sistem javascript yang ada teknik SPA yang diakses dari URL   …/?en.. Jadi semua proses SPA dan AJAX ada dalam file ini. Atau penyebutan kasarnya file ini merupakan wadah dari semua halaman dalam sistem SPA. Lihat gambar analagi sistem wadah SPA berikut.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-03-contoh-analogi-wadah-teknik-spa-versi-asanoerdotcom

Gambar-03-contoh-analogi-wadah-teknik-spa-versi-asanoerdotcom

Penafsiran “wadah” bagi asanoer adalah sebuah tempat pemuatan halaman dalam sistem AJAX. Biasanya dan umumnya menggunakan tag div sebagai kotak pemuatannya. Silahkan lihat kode awalan.php berikut.

Sesaat setelah browser memuat semua javascript dalam file ini maka akan ada tiga fungsi utama penanganan hash dan fungsi penanganan AJAX. keempat fungsi tersebut sudah asanoer jelaskan dalam artikel sebelumnya.

3. Perbedaan dari sebelumnya

Untuk perubahan dalam artikel ini adalah.

  • Semua menggunakan sistem loading AJAX secara GET

Hal ini pasti dipergunakan, karena pasti aGan tahu kalau teknik SPA adalah teknik memuatan halaman secara diam-diam atau di belakang layar. Artinya pemuatannya hanya sebagian saja. Tapi untuk artikel ini, asanoer tambahkan berupa teknik mengambil nilai variabel dari pengiriman data secara GET.

  • Ada informasi sedang “Loading….” saat memuat dari server.

Nah tambahan lainnya dapat aGan lihat berupa fitur animasi ringan untuk loading berupa teks atau kata “Loading…” saat aGan memilih sebuah menu yang ada di halaman demo tersebut. Teks ini dimunculkan saa fungsi hash dipanggil, kemudian saat AJAX selesai atau komplit pemuatannya, maka akan dimuat isi halamannya.

  • Penanganan kesalahan pemasukkan nama engine dan nama halaman.

Saat user salah memasukkan URL  …./?bukan-en .. maka otomatis akan dideteksi kalau variabel “en” belum disett. Maka sistem akan melemparkannya / riderection ke URL   …../?en. Kecuali jika user memasukkan item dotHTML, maka server akan memberikan bahwa file tidak ada. Ini bisa diatasi dengan .htaccess yang sudah asanoer berikan pada artikel sebelumnya saat membuat pretty URL.

4. Uji coba

Dalam artikel kali ini ada beberapa uji coba akses untuk teknik SPA berikut ini.

  • Akses tanpa hash

Seperti percobaan pada artikel sebelumnya dengan akses tanpa hash atau root URLnya saja. Dalam gambar di bawah ini, maka contoh root URL nya adalah, https://asanoer-loc.tk/a/02-SPA-send-get/ ,, silahkan sesuaikan dengan milik aGan2.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-04-awal-akses-sistem-SPA

Gambar-04-awal-akses-sistem-SPA

Setelah ditekan Enter, maka otomatis akan masuk “loading…” dengan URL awal …./?en#tes-awalan dan masuk ke halaman “tes-awalan”.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-05-loading-halaman

Gambar-05-loading-halaman

 

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-06-halaman-tes-awalan

Gambar-06-halaman-tes-awalan

  • Akses dengan hash (ketik manual)

Sekarang aGan ketik manual hash dari senu yang ada. Dan berikut hasilnya (dengan ketik manual …../?en#asanoer-logo).

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-07-ketik-hash-manual

Gambar-07-ketik-hash-manual

 

  • Pilih menu

Pilih menu akan mengubah hash pada URL, sehingga akan mengaktifkan fungsi penanganan hash dalam halaman “en”. Untuk gambar tidak perlu asanoer berikan.

  • Klik link dalam halaman

Masih dalam halaman “#asanoer-logo”, silahkan klik link “Halaman ini” dalam halaman tersebut. Maka akan menampilkan URL lengkap   …./?en#ling-saya&data=ling-masuk

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-08-akses-link-hash-dalam-teks-di-suatu-halaman

Gambar-08-akses-link-hash-dalam-teks-di-suatu-halaman

Lihat hasilnya, dalam halaman tersebut semua variabel GET ditampilkan. Hal ini bisa digunakan untuk mengambil nilai-nilai data dalam varibel sebagai interaksi user dan aplikasi.

  • Ketik variabel dalam URL secara manual

Misalnya asanoer mencoba kirim variabel dan isinya sebagai berikut.

Nama    =   ASANOER

Pemilik = ASANOER.com

Maka url yang asanoer ketik berikut   “…../?en#ling-saya&Nama=ASANOER&Pemilik=ASANOER.com”, maka hasilnya variabel akan ditampilkan dalam halaman “#ling-saya”.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-09-kirim-data-GET-ketik-manual

Gambar-09-kirim-data-GET-ketik-manual

  • Eror saat salah ketik halaman

Misalnya pengguna mengetik halaman secara asal, tidak ada file halaman tersebut maka hasilnya berikut.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-10-halaman-tidak-ada

Gambar-10-halaman-tidak-ada

  • Ketik URL sembarang di belakang path utama

Hal ini jika tidak ada file .htaccess maka server akan memberikan seperti berikut.

javascript-teknik-spa-untuk-mengirimkan-data-melalui-get-11-object-not-found

Gambar-11-object-not-found

Silahkan aGan dapat berlangganan notifikasi gratis untuk memantau artikel baru menarik lainnya dari ASANOER.com dengan klik atau sentuh tombol lonceng kiri bawah halaman ini. InsyaAllah mudah-mudahan ada manfaatnya. Atau silahkan tinggalkan komentar dan insyaAllah, asanoer balas komentar aGan2.

Sumber-sumber:

  • Semua ilmu dari Allah Subhanahu wa Ta’ala.
  • Beberapa dari website yang asanoer temukan mesin pencari.
  • Gambar-gambar asanoer screen shoot dari demo contoh artikel di atas.

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.