ASANOERDOTCOM – TRIK DAN TEKNIK SPA UNTUK CRUD BAGIAN UBAH DATA

Assalamu ‘alaikum aGan2 pengunjung sekalian dan selamat sore asanoer ucapkan. InsyaAllah dalam keadaan sehat selalu. Dan juga asanoer sudah lama tidak menulis artikel manarik dalam blog asanoer ini. Silahkan ikuti, insyaAllah ada manfaat untuk coding party aGan2.

Artikel kali ini asanoer berikan untuk melanjutkan ARTIKEL SEBELUMNYA. Yaitu untuk mengubah data user yang ada dalam database aplikasi ini. Namun, pengiriman data masih dalam bentuk send AJAX. Karena memang teknik SPA masih dalam proses AJAX.

Teknik dan Langkah-langkah

Mari asanoer ajak untuk mengikuti langkah-langkah penambahan modul update data ke proyek ini.

1. Buka Halaman Ini

Ah, seperti biasa asanoer suka mengajak aGan2 pengunjung untuk membuka HALAMAN INI supaya lebih mudah lagi untuk mengikuti artikel asanoer. Dan boleh lihat DEMONYA ini.

2. Membuat Modul

Kali ini judul bukan lagi membuat pondasi tapi lebih spesifiknya membuat modul. Karena untuk pondasi sudah ada di artikel-artikel sebelumnya. Jadi, aGan2 hanya perlu menambahkan sedikit skrip untuk modul update data ini dan mengubah baris skrip pada modul registri aksesnya. Posisi modul dan skrip regsitrinya ditampilkan dalam gambar berikut.

asanoerdotcom-trik-dan-teknik-spa-untuk-crud-bagian-ubah-data-01-posisi-file-skrip
Gambar 01. Posisi file skrip asanoer.com-index-update.php dalam folder asanoer-modul
Gambar 02. Posisi baris skrip penambahan modul update data pada asanoer.com-index-modul.php

Modul update sama seperti modul create data sehingga hanya mengubah sedikit skrip di modul tambah data. Hanya saja aGan2 perlu membedakan di akses dan upload POST datanya. Dan alur untuk update data adalah seperti berikut.

Gambar 03. Alur / Flow Chart Diagram Akses Ubah Data User

Tampak, kalau untuk update maka aGan2 supaya menampilkan data terplih yang akan diupdate ke user. Alurnya yaitu saat form update diakses dan tidak ada status aksi, maka ambil semua data terpilih kemudian tampilkan masing-masing kolom tabel yang perlu diubah (update) ke kolom form (text box). Hal ini diperlukan untuk user supaya tahu data tersimpan sebelumnya. Kemudian user mengubah data yang user perlukan baru user dapat klik tombol SIMPAN.

Alur berikutnya yaitu, tombol SIMPAN tersebut mengarah ke method POST ke arah “?aksi=ubahkan&kduser=XXXX”. Dari sini maka aGan2 akan tahu bahwa skrip akan membaca isi variabel aksi kemudian baru proses cek variabel dan cek kesalahan lainnya yang diikuti proses simpan ke database melalui teks sql UPDATE … WHERE dan lainnya dengan kduser terpilih XXXX sesuai klik pilihan user.

3. Fasilitas-fasilitas Dalam Update

Fasilitasnya tidak jauh beda dengan judul artikel ini yaitu hanya penambahan form / formulir untuk mengubah data yang ada sesuai plihan user aGan2.

Gambar 04. Halaman form ubah data user

Tahap Uji Coba

Sebagian besar tahap uji coba masih sama seperti uji coba pada artikel create data sebelumnya. Karena pesan eror ataupun kesalahan masih sama. Dan juga minus dari input data aplikasi ini belum sepenuhnya diberikan filter ataupun validator lainnya.

1. Simpan dengan kolom kosong

Kesalahan untuk pesan pertama adalah saat update data diberikan kolom kosong pada salah satu textbox. Sehingga menyebabkan pesan eror dan kesalahan berikut.

Gambar 05. Kesalahan update data user saat isian kolom kosong

2. Menyimpan dengan Username sama

Karena dalam database kolom Username dibuat unique maka seharusnya akan ada pesan eror dan kelasahan jika update data menggunakan data yang sama dengan data tersimpan. Berikut tampilan pesan kesalahan tersebut.

Gambar 06. Kesalahan isi username yang sama. Username “indra” sudah ada di tabel database user

3. Apostrop dimasukkan dalam textbox

Karena inputan belum ada validasinya maka asanoer mencoba memasukkan karakter asing untuk kolom database berupa karakter petik satu (Apostrop). Berikut pesan kelasahan yang timbul jika user memasukkan karakter tersebut.

Gambar 07. Kesalahan isi dalam kolom dengan karakter apostrop

Sumber-sumber :

  • Semua ilmu datang dari Allah SWT.
  • Sebagian pembelajaran sendiri melalui T.N.E dan juga gugel.
  • Screenshoot gambar dari demo aplikasi.
  • Dan beberapa bantuan dari temen-temen grup PHP Indonesia (FB).

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.