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 DEMOKecuali 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.
- 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.
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.

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

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().
- 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.
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.