JAVASCRIPT – TRIK PADA TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI POST

Assalamu ‘alaikum temen-temen aGan2 pecinta aplikasi web Yth, selamat malam dan insyaAllah dalam keadaan sehat.

Malam ini, asanoer mencoba untuk melanjutkan artikel JAVASCRIPT – TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI GET. Kelanjutnannya adalah bagaimana aplikasi yang terbungkus dalam SPA (Single Page Application) tersebut dapat mengirimkan data ke server melalui POST (atau metode POST).

Silahkan Download

Seperti kebanyakan artikel asanoer, maka silahkan bagi aGan2 yang lebih suka oprek sendiri dapat langsung klik link bawah ini untuk sekedar mendownload proyek kecil dari artikel kali ini.

DOWNLOAD DALAM DEMO

Kecuali bagi agan2 yang suka penasaran maka boleh melanjutkannya ke tahap berikutnya.

Teknik Dan Langkah-langkah

Untuk teknisnya hampir sama dengan artikel asanoer lainnya. Berikut teknik dan langkahnya, selamat membaca.

1. Buka halaman ini

Untuk artikel proyek kali ini seperti biasanya asanoer anjurkan untuk membuka halaman ini sebagai pemulai dalam proses pembelajarannya. Dan kemudian silahkan kembali lagi ke artikel ini.

2. Sedikit perubahan nama file dan menu

Asanoer sengaja mengubah nama file untuk awalan.php menjadi en.php. Karena untuk menyamakan nama dalam skrip index.php. Berikut susunan baru dari folder dan nama file proyek artikel ini. Silahkan diamati.

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-01-nama-file-dan-folder

Gambar-01-nama-file-dan-folder

  • Perubahan sedikit isi skrip index.php

Karena nama awalan.php diganti menjadi en.php maka hal ini perlu ada sedikit perubahan juga pada skrip index.php. Hal ini harus dilakukan karena nama file awalan.php berada pada included saat terbaca URL ……/?en..

Skrip index.php yang baru

 

  • Perubahan pada en.php

Sedangkan perubahan skrip dalam en.php adalah pada menu dan penambahan fungsi AJAX send POST. Karena menu sekarang mengikutkan variabel “hal”, maka dalam fungsi penanganan hash juga ada perubahan. Yaitu dari yang sebelumnya “urlnya+’?hal=’+pis[1]” menjadi “urlnya+’?’+pis[1]”. Sedangkan send data melalui POST akan ditangani oleh fungsi sendAjaxPost(). Silahkan dilihat skrip en.php berikut ini.

 

 

Kerja dari en.php masih sama seperti proses kerjanya awalan.php. hanya saja ada penambahan fungsi sendAjaxPost() dengan respon dari server yang muncul berupa alert() dan menampilkan isi dari teks yang dikirim oleh server.

Ohya, asanoer lupa memberikan diagram alir (flowchart) untuk proses penanganan hash di fungsi hashHandler(). Silahkan dilihat flowcharnya berikut.

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-02-flowchart-hashHandler

Gambar-02-flowchart-hashHandler

Dapat aGan2 amati kalau url lengkap …/?en#hal=nama-halaman… perlu dihilangkan tanda hash-nya sebelum dikirim ke fungsi ajaxLoad() dan karena hash itu hanya dipakai dalam browser saja. Maka pemotongan URL dapat dilakukan dengan split() yang menghasilkan array. Dan data array yang dipakai adalah data yang di belakang tanda hash itu. Yaitu data array ke-1 karena hanya ada array[0] dan array[1]. Kemudian array[1] dipadukan ke url root dari sistem SPA menjadi …./?hal=nama-halaman&var&var… yang kemudian URL ini dapat dimasukkan ke fungsi loadAjax() atau silahkan kembali aGan2 lihat lagi.

3. Fasilitas baru

Sesuai dengan judulnya, maka ada tambahan fungsi sendAjaxPost() dengan parameter target dan stringnya. Target adalah URL yang akan memproses pengiriman data melalui POST. Sedangkan parameter stringnya merupakan deretan variabel yang dikirim ke server. Untuk file yang memproses data POST ada dlam skrip home.php. Yaitu untuk menerima variabel username dan variabel password, silahkan lihat skrip home.php Berikut fungsi sendAjaxPost() dalam file en.php.

 

 
Tambahan fasilitasnya.

  • Pengiriman POST.

Ya, pastilah ada fasilitas ini karena pengiriman form supaya efektif dan umum memakai metode POST.

  • Animasi loading tambahan khusus untuk pengiriman POST

Animiasi ringan yang akan muncul di kiri atas saat proses Ajax POST berlangsung dengan teks “Sedang Mengirim….”

  • Pengaman akses langsung file halaman

Asanoer tambahkan sedikit baris, supaya user tidak dapat akses langsung skrip php halaman, Sehingga aplikasi ataupun web tetap kelihatan utuh.

4. Uji coba

As usual, tahap uji coba sederhana dari asanoer adalah berikut ini.

  • Tiga akses pokok hash

Tiga ujicoba ini adalah pengetesan hash URL. Karena hampir sama maka asanoer persilahkan kepada aGan2 semua untuk dapat membaca pada artikel JAVASCRIPT – MODUL DASAR MEMBUAT SINGLE PAGE APLLICATION atau yang setelahnya yaitu JAVASCRIPT – TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI GET pada bagian tahap ujicoba hash url.

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

Gambar-03-awal-akses-sistem-SPA (Gambar dari  JAVASCRIPT – TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI GET)

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

Gambar-04-ketik-hash-manual (Gambar dari  JAVASCRIPT – TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI GET)

 

  • Kirim data melalui form login

Sekarang aGan2, asanoer persilahkan untuk membuka menu Home (#hal=home). Dan mulailah untuk memasukkan acak username terserah ddan password sembarang. Ujicoba ini hanya akan menghasilkan response dari server berupa tampilan alert() yang berisi username dan password yang aGan2 masukkan. Akan ada tulisan “Sedang Mengirim…” sesaat setelah tombol “Login” diklik yang akan menampilkan response server berupa alert().

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-05-post-loading

Gambar-05-post-loading

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-06-response-server

Gambar-06-response-server

 

  • Mencoba akses halaman langsung.

Kali ini ujicoba keamanan akses file halaman secara langsung. Silahkan aGan2 akses URL “http://localhost/folder-root/halaman/asanoer-logo.php”, dalam gambar bawah ini asanoer menggunakan URL “https://asanoer-loc.tk/a/05-SPA-send-post/halaman/asanoer-logo.php” karena URL root ada di “https://asanoer-loc.tk/a/05-SPA-send-post/”, silahkan sesuaikan dengan instalasi download-an aGan2.

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-07-akses-file-halaman-langsung

Gambar-07-mencoba-akses-file-halaman-langsung

 

javascript-trik-pada-teknik-spa-untuk-mengirimkan-data-melalui-post-08-tidak-dapat-langsung-diakses

Gambar-08-tidak-dapat-langsung-diakses

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.