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.

Melalui pemrograman PHP, kita bisa membuat sebuah perintah yang dapat melakukan routing pada halaman yang ingin ditampilkan dengan mudah. Manajemen halaman pada pemrograman web khususnya PHP sebetulnya dapat dilakukan dengan mudah. Umumnya programer akan membuat beberapa halaman duplikat kemudian menyatukannya dalam list menu di halaman utamanya melalui link file masing-masing halaman tersebut. Cara seperti ini tidak salah, hanya saja jika setiap halaman memiliki kerumitan yang cukup tinggi akan sangat merepotkan pada saat pengembangan kedepannya. 

Dengan menggunakan routing ini kita bisa memperluas masing-masing halaman pada aplikasi web yang kita buat dengan fitur kompleks tanpa kesulitan. Selain itu, kelebihan lainnya adalah ketika kita akan melakukan manajemen akses untuk setiap pengguna yang mana masing-masing entitas memiliki hak akses fitur yang berbeda. Sehingga dengan teknik ini, selanjutnya bisa kita kembangkan untuk melakukan hal tersebut lebih lanjut.

Untuk mempersingkat waktu, kita langsung saja ke inti dari topik yang akan kita bahas kali ini. Jangan lupa juga selalu gunakan text editor IDE kesukaan anda, tempat kerja yang nyaman dan segelas kopi pahit.

Buat Project Baru

Tahap pertama kita buat project baru seperti biasa, di sini saya asumsikan kita sudah memahami sebelumnya bagaimana membuat project, menggunakan web server dan dasar pemrograman web lainnya. Buat susunan file dan directory nya seperti gambar berikut ini.

Sebagai penjelasan singkat, pada folder "_Page" akan kita gunakan untuk menyimpan komponen-komponen halaman yang akan kita panggil. Pada file halaman tersebut kita hanya akan memanggil komponen spesifik dari masing-masing halaman yang akan kita buat. Pada folder "css" kita akan menyimpan asset css kita disana. Walaupun demikian untuk mempercantik tampilan kita bisa menggunakan bootstrap. Pada file "index.php" kita akan menyimpan script utama berikut routing halaman dalam bentuk bahasa PHP.  

Buat Script Untuk index.php

Langsung pada file utama di "index.php" tulis script berikut ini:

Sebagai penjelasan pada baris ke 7, 8, 9, 10 merupakan script untuk memanggil CDN bootstrep agar tampilannya sedikit menarik. Untuk sementara kita buat dalam bentuk CDN dulu, jika ingin menggunakannya dilokal bisa diubah nanti.

Pada baris ke 11 kita akan membuat file css yang akan mengatur tampilan tambahan diluar bootstrap yang kita gunakan tadi.

Pada baris 21 sampai dengan 34 adalah script html untuk menampilkan navbar atas. Kita bisa merubahnya sesuai keinginan, misalnya pada bagian "My Aplication" bisa diubah dengan nama aplikasi, project atau apalah.

Pada baris 40 sampai 64 merupakan script PHP yang melakukan routing halaman berdasarkan parameter data GET yang diambil pada URL. Jadi ketika kita memilih/click pada navbar halaman 1 maka kita akan diarahkan pada url: localhost/ProjectKamu/index.php?Page=HalamanSatu kemudian didefinisikan oleh script PHP tersebut apa isi dari HalamanSatu.

Jangan lupa juga pada file style.css tambahkan script berikut:

Simpan semua perubahan pada file di project yang sudah dibuat tadi kemudian coba panggil halaman index.php tadi maka hasilnya akan seperti berikut:

 

 

Buat Script Untuk Halaman

Pada file Halaman_1.php, Halaman_2.php dan Halaman_3.php kita buat masing-masing scriptnya seperti berikut

Halaman_1.php

Halaman_2.php

Halaman_3.php 

Silahkan simpan perubahan pada masing-masing file yang sudah dibuat tadi. Buka kembali halaman index.php pada web browser kemudian coba pilih/click masing-masing menu pada navbar atas.

Jika berhasil maka sistem akan menampilkan perbedaan pada masing-masing halaman yang dipilih. 

index.php?Page=HalamanSatu

 index.php?Page=HalamanDua

index.php?Page=HalamanTiga

 

Demikian tutorial kali ini, untuk selanjutnyan kita akan membahas tema menarik lainnya yang masih mengenai pemrograman PHP. Apabila ada yang tidak dipahai, silahkan tanyakan pada kolom komentar.