Paging Navigasi Frontpage Lokomedia Menggunakan Ajax

Kemarin kita sudah membahas paging navigasi pada halaman home pada lokomedia tanpa menggunakan jquery.  Kali ini akan kita kembangkan lagi paging tersebut dengan menggunakan jquery. Kelebihan dari teknik ini adalah kita tidak perlu mengotak-atik file .htaccess yang kita miliki. Karena dalam setiap kita berpindah halaman, URL-nya tidak berubah sama sekali. Uniknya lagi kita bisa melihat dan menggunakan animasi loading yang menawan dalam setiap pindah halaman. Saya mendapatkan source code paging ini di sini. Namun saya juga sudah modifikasi agar bisa dipakai pada template lokomedia. Salah satunya mari kita coba terapkan script ini dalam template sandbox yang kita miliki.

Sebenarnya dari beberapa file yang ada hanya dua file yang perlu kita modifikasi, yakni  index.php dan data.php. Namun disini kita akan coba memilah-milah script tersebut untuk dimasukkan kedalam file-file yang sesuai  dengan template sandbox. Langkah pertama kita buat dahulu file frontpage.php dengan memodifikasi file data.php. File ini berfungsi untuk memanggil data dari database yang kita miliki. Letakkan file ini pada root website kita. Script modifikasinya seperti ini :

Lalu modifikasi lagi file content.php tepatnya pada module home menjadi seperti ini :

Setelah itu jangan lupa untuk memanggil jquery yang kita punya dan sisipkan javascript berikut pada file header.php.

Sampai disini paging dengan jquery sudah dapat berjalan, tinggal meletakkan gambar loader.gif pada folder root agar ketika loading terdapat animasi. Dengan sedikit sentuhan css kita bisa membuat loader berada pada posisi yang kita inginkan.

Kira-kira sepert ini screen shoot-nya

lokomedia-load