ASANOERDOTCOM – TRIK DAN TEKNIK MEMBUAT PONDASI SPA UNTUK PROSES CRUD SEDERHANA

Assalamu ‘alaikum, apa kabar semua temen-temen penggemar aplikasi website Yth?

Kembali lagi asanoer akan mencoba menyuguhkan artikel menarik baru yang mungkin dapat dicoba. Yaitu pengembangan dari teknik SPA (kependekan dari Single Page Application) dari sebelumnya. Adapun pengembangan menariknya adalah asanoer berikan sedikit teknik untuk memproses data yang dikenal dengan sistem CRUD (Crate data, Read data, Update data, dan Delete data) dengan disuguhkan dalam bungkus templet sb-admin-2 (versi bootstrap yang lama) yang indah menurut versi asanoer tentunya, hehehe. Tapi, asanoer akan menyuguhkan ke dalam beberapa judul artikel terpisah. Dan artikel ini adalah bagaimana membuat pondasi aplikasi CRUD yang pernah asanoer tulis dalam artikel panjang pada ASANOER.COM – CARA MEMBUAT CRUD DENGAN AJAX JQUERY DENGAN GAYA BOOTSTRAP.

Teknik Dan Langkah-Langkah

Asanoer memberikan teknik dan langkahnya dalam beberapa sub judul berikut. Seperti dalam artikel panjang asanoer tersebut, maka untuk sesi artikel ini hanya membahas pembuatan pondasi dan sistem read data saja.

1. Buka Halaman Ini

Silahkan asanoer anjurkan supaya membuka dan membaca terlebih dahulu halaman ini sebelum memulai proyek-proyek kecil dan menarik dari asanoerdotcom. Kemudian silakan untuk melanjutkan langkah berikutnya.

2. Membuat Pondasi

Sebagaimana yang pernah ditulis dalam artikel asanoer yang panjang disebut di atas itu, maka setiap bangunan membutuhkan pondasi awal untuk berdirinya. Begitu juga dengan aplikasi kecil dan sederhana ini yaitu terdiri dari file konfigurasi untuk routing URL dan definisi variabel lainnya, akses database, dan terakhir karena ini memakai SPA maka ada satu modul yang menjadi dasar atau pondasi aplikasi yaitu modul yang menjadi tempat dimuatnya halaman-halaman nantinya. Berikut gambarannya.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-01-file-dan-folder-aplikasi

Gambar-01-file-dan-folder-aplikasi

Setelah aGan2 melihat isi foldernya maka hal yang perlu dilakukan pertama kali adalah membuat konfigurasi .htaccess. Pondasi ini dapat ditemui dan dipelajari dalam artikel asanoer yang berjudul ASANOER.COM – PRETTY URL ATAU CLEAN URL UNTUK WEB DINAMIS DENGAN HTACCESS. Atau jika aGan tidak mengubah nama root folder maka tidak perlu ada penyesuaian apapun, berikut isi dari file htacess tersebut (file: htaccess). Karena pondasi ini diperlukan untuk pembuatan pretty URL dan daripada itu juga diperlukan untuk berjalannya aplikasi dalam proyek ini.

Kemudian yang lainnya adalah membuka file asanoer.com-konfig.php yang berisi konstanta dan konfigurasi routing URL serta penyesuaian database juga ada dalam file ini. Silahkan dipelajari dan disesuaikan dengan kebutuhan atau dapat dibuat sesuai selera sendiri. Isi dalam file tersebut setelah download adalah dalam file: asanoer.com-konfig.php.

Nah penyesuaian dasar di atas belum siap jika database belum dibuat. Karena proyek kecil ini membutuhkan sistem database untuk kebutuhan penyimpanan datanya, maka silahkan aGan2 untuk membuat databasenya. dan untuk caranya dapat aGan2 ikuti dari artikel ASANOER.COM – CARA IMPOR DATABASE MYSQL DENGAN TEKS SQL, dengan nama database yang sudah ada dalam konfigurasi yaitu “asanoer-crudspa” lalu disimpan. Setelah database tersimpan, maka berikut konfigurasi untuk pembuatan tabelnya.

Nama tabel : asanoer_tb_user
kolom 1 : iduser INT(5) AUTO INCREMENT, PRIMARY KEY
kolom 2 : nameuser VARCHAR(20) UNIQUE INDEX
kolom 3 : passuser VARCHAR(10)
kolom 4 : namalengkapuser VARCHAR(50)
kolom 5 : alamatuser VARCHAR(100)
asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-02-database-tabel-user

Gambar-02-database-tabel-user

Teks SQL di atas bisa aGan2 copas langsung melalui link file: database.sql.

  • asanoer.com-konfig.php

skrip ini sudah dijelaskan sebelumnya dan tersimpan dalam folder asanoer-konfig. Silahkan untuk memasukkan dan mengubah konfigurasi sistem dalam skrip ini sesuai kebutuhan aGan2. Untuk isi skrip silahkan buka di file: asanoer.com-konfig.php.

  • asanoer.com-index-modul.php

file ini asanoer meletakkannya di root, dan merupakan isi pendefinisian semua nama halaman yang bukan sebenarnya. Artinya nama file modul yang dimuat oleh URL merupakan nama palsu dan bukan nama fisik asli file modulnya. Skrip ini dapat aGan buka di klik berikut file: asanoer.com-index-modul.php.

  • asanoer.com-index,php

Buka melalui klik file: asanoer.com-index,php ini akan aGan temui skrip ini. Skrip ini merupakan tempat “Wadah” berisi javascript dan templet yang dimuat pertama kali saat user hanya mengetikan URL root domain aplikasinya. Javascript yang mengakses halaman-halaman sudah asanoer berikan dalam JAVASCRIPT – TEKNIK SPA UNTUK MEMUAT ATAU LOADING TEKS DAN HALAMAN WEB. Skrip ini asanoer simpan dalam folder asanoer-modul.

Skrip ini asanoer defiisikan dalam konstanta “ASANOER_INDEX_APLIKASI” yang dapat aGan lihat dalam skrip asanoer.com-konfig.php di atas, sehingga skrip ini diakses dari URL “–root–/asanoer-indeks-aplikasi/”. Berikut tampilan sederhana dari wadah yang asanoer maksudkan.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-03-blank-page-untuk-halaman-kosong

Gambar-03-blank-page-untuk-halaman-kosong

  • asanoer.com-index-read.php

Saat user sudah membuka URL root dan wadah sudah dimuat dalam browser, maka tugas JS dalam “wadah” tersebut mengakses hash awalan (default) atau halaman awal yang dimuat pertama kali saat hash tidak ada dalam URL. Nah hash awalan tersebut asanoer tulis dengan “home.php”. Sedangkan sebenarnya nama home.php tidak ada nama file fisiknya dalam sistem aplikasi ini. Tapi asanoer definisikan home.php menjadi skrip ini melalui include file. Atau silahkan aGan cek kembali dalam skrip asanoer.com-index-modul.php. Isi dari skrip ini adalah akses database dalam metode Read-data (CRUD). Dan pengertian Read-data sebenarnya banyak yaitu: listing data, search data, paging data serta sorting data. Untuk artikel ini hanya ada listing data dan searching data. Berikut tampilan listing data user dalam proyek artikel ini. Silakan lihat skripnya file: asanoer.com-index-read.php.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-04-read-data-user

Gambar-04-read-data-user

  • asanoer.com-helpme.php

Dalam skrip ini semua informasi help dasar dapat disimpan atau dapat aGan2 sesuaikan modulnya dengan kebutuhan aplikasi aGan sendiri. Asanoer mendefiniskan nama skrip ini menjadi help-me.php saat akses hash menu di URL. Berikut tampilannya sebelum asanoer mengubah isinya.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-05-halaman-page-help-me

Gambar-05-halaman-page-help-me

3. Fasilitas-faslitas

  • Akses SPA untuk Read data

Tentunya ada,,, karena memang artikel ini membahas teknik SPA untuk akses data dari database. Dan akses dasar SPA sudah terkandung di dalamnya, hash, dan GET data.

  • Akses searching data

Ini asanoer tambahkan karena waktu itu setelah download templet sb-admin-2 disitu asanoer dapati kotak kosong ada di atas menu-menu samping. Akhirnya asanoer masukkan juga dalam fasilitas kecil ini yaitu sebagai pencarian data. Namun masih terbatas karena hanya pencarian biasa dan hanya satu kolom tabel pencarian.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-06-searching-data

Gambar-06-searching-data

  • Animasi Pemuatan

Semua halaman yang dimuat dari proses AJAX ditandai dengan animasi pemuatan dengan tulisan di atas “Sedang Mengambil…”. Tulisan ini asanoer letakkan dalam modul skrip asanoer.com-index.php. Silahkan aGan cek kembali.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-07-animasi-pemuatan-halaman

Gambar-07-animasi-pemuatan-halaman

Uji Coba

Teknik ujicobanya hanya di kemanan saja. Karena memang ujicoba lainnya sudah asanoer buatkan dalam artikel tentang SPA sebelumnya dan berikut ini ujicobanya.

1. Keamanan Akses Nama Modul Diluar Wadah

Ada kalanya keisengan atau kejahatan user bisa dilakukan dengan mengakses langsung nama modul di luar sistem wadahnya. Ini asanoer dapati saat ujicoba akses “—root—/nama-halaman.php” maka browser memang memuat isi halaman tersebut tapi isinya berantakan alias tidak ada style apapun seperti web jaman batu, hehehe. Berikut contoh akses halaman help-me.php dengan URL “—-ROOT—/help-me.php” tanpa atau dengan pengaman, silahkan lihat hasilnya.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-08-akses-nama-modul-langsung

Gambar-08-akses-nama-modul-langsung

 

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-09-akses-nama-modul-langsung-ada-pengaman

Gambar-09-akses-nama-modul-langsung-ada-pengaman

 

2. Kemanan Akses File Skrip Modul Langsung

Sekarang kemungkinan saat user tahu nama file fisik skrip modul maka akan bertindak mengakses langsung file tersebut. Silahkan dilihat perbedaanya.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-10-akses-nama-file-fisik-modul-tanpa-pengaman

Gambar-10-akses-nama-file-fisik-modul-tanpa-pengaman

Terlihat kerentanan sistem dan hal ini membuat user dapat mengetahui susunan foldernya. Berbeda jika keamanan akses sudah dipasangkan.

asanoerdotcom-trik-dan-teknik-membuat-pondasi-spa-untuk-crud-sederhana-11-akses-nama-fisik-file-modul-dengan-kemanan

Gambar-11-akses-nama-fisik-file-modul-dengan-kemanan

Terima kasih sudah menyempatkan untuk membaca artikel sederhana asanoer ini. InsyaAllah menjadi manfaat untuk bersama dalam bidang pembuatan aplikasi dengan basis website. Silahkan untuk meninggalkan komentar bermanfaat atau sekedar menanyakan juga akan asanoer balas ke emailnya langsung, InsyaAllah.

Sumber-sumber :

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.