Setiap data yang akan diproses atau disimpan pada database, sebaiknya sudah melalui proses validasi terlebih dulu. Hal ini bertujuan agar mengurangi resiko adanya serangan melalui sql injection yang dapat merusak struktur database, atau adanya pencurian data yang sangat berbahaya. Dengan adanya validasi karakter ini memungkinkan kita mengendalikan mekanisme masuknya data sebagai hasil interaksi antara pengguna dan sistem.

Proses validasi karakter pada pemrograman PHP dapat disesuaikan dengan standar atau aturan yang kita buat, baik yang berbasis database atau berbasis kebiasaan pengguna. Berdasarkan pengalaman, penggunaan validasi yang melibatkan 2 (dua) aspek tersebut cukup efektif mengurangi resiko dan dapat diterapkan pada beberapa proses sekaligus. Sebelum kita beranjak pada masalah teknikal kita akan membahas terlebih dulu apa saja yang akan kita validasi pada data masukan (input) sehingga bisa tersimpan pada tabel-tabel database dengan aman.

1. Memahami Tipe Karakter Database

Tipe karakter berhubungan dengan prilaku sebuah karakter sehingga sistem memberikan perlakuan yang berbeda pada masing-masing tipe. Ada baiknya kita memahami tipe-tipe karakter tersebut karena akan sangat bermanfaat ketika kita menghadapi project yang menuntut pendalaman pada basis data. Untuk memahami lebih mendalam mengenai tipe data ini baiknya pelajari terlebih dulu Memahami Tipe Data Pada DBMS MySql yang sudah dibahas pada postingan lain di seri belajar ini. 

2. Contoh Program Input Data Sederhana

Untuk mempersingkat waktu, kita akan melanjutkan beberapa tutorial yang pernah kita buat sebelumnya. Hal ini bertujuan agar kita paham dengan alur proses belajarnya. Jadi silahkan ikuti dulu langkah-langkahnya pada 2 (dua) postingan artikel tutorial berikut ini:

• Membuat Routing Halaman Sederhana Dengan PHP
• Berpindah Halaman Secara Dinamis Tanpa Reload Halaman Dengan jQuery

Silahkan ikuti kedua tutorial tersebut dengan baik. Kemudian kita langsung saja buat program berbasis web untuk input data sederhana pada database. Silahkan buat sebuah database dengan nama misalnya "belajar_php" kemudian buat juga tabel di dalam database tersebut dengan nama misalnya "pasien" spesifikasinya seperti ini: 

Penjelasan:

Kolom id_pasien dibatasi dengan jumlah 10 digit, yang artinya database hanya akan dibatasi kurang dari 10 milyar baris data.

Kolom nama kita batasi hingga 225 karakter, dimana nantinya kita bisa batasi lebih ketat hingga 200 karakter.

1. Kolom kontak kita coba menggunakan varchar, agar kita tahu perbedaannya nanti saat uji coba.
2. Kolom alamat menggunakan text agar pengguna lebih leluasa pada saat input alamat dengan jelas.
3. Kolom tempat_lahir, walaupun rata-rata pendek namun kita antisipasi jika ada yang memiliki nama daerah yang terlalu panjang.
4. Kolom tanggal_lahir menggunakan format date (YYYY-mm-dd)
5. Kolom input_date menggunakan format DATETIME (YYYY-mm-dd hh:ii)

Dalam project yang sudah kita buat pada tutorial sebelumnya, silahkan buat sebuah folder dengan nama "_Config" yang di dalamnya kita buat juga sebuah file PHP dengan nama "Connection.php". Jika sudah ketik script berikut in:

<?php
    //Ini adalah halaman untuk melakukan konfigurasi database
    $servername = "localhost";
    $username = "root";
    $password = "";
    $db = "belajar_php";
    // Mulai Koneksi
    $Conn = new mysqli($servername, $username, $password, $db);
    // Check Koneksi
    if ($Conn->connect_error) {
        die("Connection failed: " . $Conn->connect_error);
    }
?>

Pada file index.php yang ada pada directory utama project, silahkan lakukan perubahan pada beberapa baris sehingga menjadi seperti berikut:

Penjelasan: Pada baris ke 54 sampai dengan 62 merupakan script jQuery yang digunakan untuk menentukan event ketika pengguna memilih menu dengan nilai "id" berupa "FormTambahPasien" maka akan diarahkan pada halaman "_Page/Pasien/FormTambahPasien.php".

Dari Source Code diatas kita buat sebuah folder dengan nama "pasien" kemudian didalamnya kita buat sebuah file dengan nama "FormTambahPasien.php". Jika sudah ketik script berikut ini:

 

Buat sebuah file dengan nama ProsesTambahPasien.php pada folder "_Page/Pasien/" untuk proses validasi dan menyimpan datanya pada database kemudian ketik script berikut ini:

Penjelasan :

1. Pada baris 9 sampai dengan 20 merupakan perintah validasi, dimana sistem akan menampilkan notifikasi ketika form tidak diisi.
2. Pada baris 21 sampai 26 digunakan untuk antisipasi jika pengguna tidak memiliki nomor kontak.
3. Baris 31 sampai 34 berfungsi untuk membuat variabel yang menghitung jumlah karakter masing-masing data yang sudah ditangkap.
4. Baris 35 sampai 57 berfungsi untuk melakukan validasi jumlah karakter masing-masing tipe data.
5. Baris 52 berfungsi untuk validasi bahwa form nama tidak boleh mengandung angka.
6. Baris 55 berfungsi untuk validasi tempat lahir tidak boleh mengandung angka.
7. Baris 59 berfungsi untuk validasi kontak hanya boleh angka
8. Baris 63 digunakan untuk validasi tanggal lahir hanya boleh angka dan tanda strip.
9. Baris 67 sampai 82 digunakan untuk proses input data ke database.

Sekarang coba jalankan programnya, jika sudah benar maka akan seperti pada vidio demo berikut ini:

3. Penutup

Beberapa fungsi yang digunakan pada saat proses input data, sebelumnya dengan menggunakan PHP kita bisa melakukan berbagai cara validasi. Fungsinya agar pada saat proses input, kita bisa mengetahui penyebab kesalahannya. Selain itu dari segi keamanan akan jauh lebih efektif karena kita membatasi karakter macam apa yang diperbolehkan untuk diproses. Informasi lebih lanjut, apabila ada kesalahan pada langkah-langkah di atas, atau kurang paham dengan penjelasan di atas, silahkan tinggalkan komentar.

Berpindah halaman pada pemrograman web tidak lepas dari peran proses browser melakukan inisiasi terhadap URL yang dituju. Pada proses ini browser akan mengolah secara keseluruhan halaman yang akan ditampilkan sesuai file pada URL tersebut. Hal ini akan tidak efisien apabila pengunjung atau pengguna web harus selalu berpindah halaman dengan konten yang sebetulnya tidak perlu diulang-ulang sehingga dianggap membuang-buang resource. Dengan menggunakan javascript kita bisa memanipulasi halaman secara dinamis tanpa perlu melakukan reload ulang pada halaman utama. Proses ini akan jauh lebih hemat karena kita tidak perlu menampilkan secara keseluruhan halaman.

Pada artikel kali ini kita akan menggunakan jQuery sebagai framework javascript yang akan mempermudah perpindahan halaman serta proses load file PHP yang kita gunakan. Untuk dasar penggunaannya bisa langsung saja mengunjungi website resmi jQuery. 

Untuk mempersingkat waktu, kita akan melanjutkan project yang sudah ada pada postingan sebelumnya. Silahkan kunjungi postingan tersebut di sini : Membuat Routing Halaman Sederhana Dengan PHP dan silahkan ikuti langkah-langkahnya. Jika sudah, silahkan kembali lagi kesini dan mari kita buat perbedaan yang mencolok dari 2 (dua) buah metode dan teknik yang akan kita gunakan.

1. Membuat Class Halaman

Mari kita mulai dengan membuat perubahan utama pada file index.php yang telah kita buat pada tutorial sebelumnya. Silahkan lakukan perubahan menjadi seperti berikut ini:

Berdasarkan source code tersebut diatas kita akan melihat perbedaannya dimana yang semula kendali halaman dilakukan oleh script PHP maka sekarang kita hanya perlu menambahkkan atribut id pada class div yang akan menampilkan halaman-halamannya.

2. Instal jQuery

Untuk memasang (instal) jQuery pada project, silahkan kunjungi website resminya. Anda bisa menggunakan berbagai metode untuk melakukan instalasi jQuery tersebut. Pada postingan kali ini saya menggunakan NPM, namun jika belum memiliki NPM yang terinstal silahkan instal terlebih dulu atau anda bisa menggunakan metode download file jQuery nya. 

Apabila menggunakan NPM untuk instalasi maka tampilan directorynya akan seperti ini:

Jika menggunakan metode download manual tinggal disesuaikan saja terkait posisi peletakan folder jQuery tersebut.

3. Tambahkan Script jQuery Untuk Berpindah Halaman

Silahkan tambahkan baris script berikut ini di bawah </main> dan di atas </body> untuk memanggil plugin jquery yang sudah kita instal tadi.

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

Kemudian tambahkan juga baris script berikut ini di bawahnya untuk memberikan perintah pada halaman agar menampilkan masing-masing file sesuai menu yang di click .

<script>
    //Menampilkan Halaman Home Pertama Kali
    $.ajax({
        type 	    : 'POST',
        url 	    : '_Page/Home.php',
        success     : function(data){
            $('#MenampilkanHalaman').html(data);
        }
    });
    //Ketika Halaman 1 Di Klik
    $('#KeHalaman1').click(function(){
        $.ajax({
            type 	    : 'POST',
            url 	    : '_Page/Halaman_1.php',
            success     : function(data){
                $('#MenampilkanHalaman').html(data);
            }
        });
    });
    //Ketika Halaman 2 Di Klik
    $('#KeHalaman2').click(function(){
        $.ajax({
            type 	    : 'POST',
            url 	    : '_Page/Halaman_2.php',
            success     : function(data){
                $('#MenampilkanHalaman').html(data);
            }
        });
    });
    //Ketika Halaman 3 Di Klik
    $('#KeHalaman3').click(function(){
        $.ajax({
            type 	    : 'POST',
            url 	    : '_Page/Halaman_3.php',
            success     : function(data){
                $('#MenampilkanHalaman').html(data);
            }
        });
    });
</script>

Jika semua langkah-langkah sudah dilakukan silahkan jalankan web dengan benar maka hasilnya akan seperti berikut ini.

Demikian tutorial mengenai Berpindah Halaman Secara Dinamis Tanpa Reload Menggunakan jQuery ini semoga bisa membantu anda belajar pemrograman web dengan baik. Jika ada yang tidak dipahami silahkan tinggalkan komentar.