Cara Membuat Website Tanpa Loading dengan HTML dan Ajax

Cara Membuat Website Tanpa Loading saat pindah halaman/menu dengan HTML dan Ajax – Hai ketemu lagi dengan saya dewan komputer dan pada kali ini saya akan membahas tentang cara membuat website / aplikasi tanpa loading menggunakan HTML dan ajax. Jadi jika kebanyakan website akan loading jika berpindah halaman/menu, kali ini kita akan membuat website anti mainstream yaitu tanpa loading saat pindah halaman jadi url juga akan tetap atau tidak berubah berbeda dengan kita menggunakan Framework Javascript seperti Angular, React, Vue, dll. Untuk tetap menampilkan halaman yang terakhir kita akses sebelum ditutup atau saat diresfresh maka kita bisa menggunakan cookies. Jadi walaupun direfresh maka tidak akan kembali ke menu home melainkan tetap di menu yang terakhir kita akses. Caranya sangat mudah, sobat tinggal mengikuti contoh dibawah.

 

Membuat Website Tanpa Loading

Saya contohkan menggunakan PHP karena agar mudah untuk menghubungkan data dengan database nantinya. Namun sobat bisa hanya tinggal menggunakan HTML seperti saat menggunakan Framework PHP, Spring maupun lainnya karena basicnya hanya pada HTML dan Javascriptnya saja dan HTML sekarang sudah suport banyak bahasa pemrograman. Caranya adalah seperti dibawah :

1. Pertama kita masukkan dulu librari css dan javascriptnya, masukkan kode dibawah pada tag <head>…</head>. Librari bootstrap untuk mempercantik tampilan dan karena kita menggunakan ajax jadi tentunya kita membutuhkan jquery.js / jquery.min.js.

Karena untuk keperluan demo jadi saya menggunakan css dan js online, namun jika sobat ingin menggunakan untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau bisa download bersama project ini diakhir postingan. Tentunya juga agar bisa berjalan secara offline.

 

2. Pada tag <body> kita tambahkan kode untuk navigasi dan <div> untuk menampilkan halamannya serta footer seperti dibawah dan kita masukkan pada file index.php

untuk id=”home” berarti menunjukan routenya/nama filenya yang berarti home.php / home.html. Kode diatas kerangkanya kurang lebih akan menghasilkan seperti gambar dibawah

Ajaxnya nanti hanya akan mengganti pada elemen dengan class .halaman-menu saja.

 

3. Masih di file index.php, selanjutnya kita membuat kode javascript yang biasa ditulis pada tag <body> paling bawah, kodenya adalah sebagai berikut

Penjelasan :

Pada kode diatas nama cookienya adalah “halaman“, dan jika belum ada cookienya maka akan menampilkan halaman home.php dan cookie akan expired setelah 30 hari atau 1 bulan. Event saat klik bisa dilihat pada kode dibawah

Yang artinya saat element dengan class .nav-menu (bisa sobat ganti atau sesuaikan) diklik maka akan mengambil id dengan attr(‘id’) yang berati id dari link / menu adalah nama file/routenya. Seperti contoh id=”tentang_kami” maka nama file adalah tentang_kami.php / tentang_kami.html atau routenya mengarah ke “/tentang_kami” contoh lengkapnya adalah http://localhost/tentang_kami.

 

4. Seperti yang terlihat pada navigasi menu dan javascriptnya, selanjutnya kita akan membuat halamannya, pertama kita akan membuat file home.php dan isikan dengan kode dibawah

 

5. Selanjutnya adalah halaman tentang_kami.php dan isikan dengan kode dibawah ini

 

6. Selanjutnya buat file hubungi_kami.php dan isikan dengan kode dibawah

 

7. Buat file produk.php dan isikan dengan kode dibawah

 

8. Terakhir buat file blog.php dan isikan dengan kode dibawah

 

Untuk hasilnya akan menghasilkan seperti gambar dibawah

Namun untuk melihat loading atau tidaknya maka sobat bisa lihat pada demonya.

 

Untuk isinya saya tentunya buat standar saja karena untuk demo. Sobat bisa mengembangkan sendiri agar mempunyai fotur yang lengkap. Sekian postingan saya tentang Cara Membuat Website Tanpa Loading dengan HTML dan Ajax. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

Leave a Reply

Your email address will not be published. Required fields are marked *

17 + ten =