Berpindah Halaman Secara Dinamis Tanpa Reload Menggunakan jQuery

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.