Membuat website full ajax


Ajax adalah suatu teknik pemrograman yang memadukan antara pemrograman client dan server. Ajax mampu membuat suatu website yang lebih cepat dalma melakukan loding halaman dan bisa membuat suatu website menjadi lebih interaktif.

Teknologi ajax telah banyak digunakan pada berbagai macam aplikasi jejaring sosial, seperti facebook, twitter, blogspot, youtube serta masih  banyak lagi lainnya.


Kali ini saya kita akan belajar membuat aplikasi website full ajax menggunakan jquery sebagai framework javascriptnya. Sebelum membuat website full ajax silahkan baca artikel saya Membut responsive layout dengan Twitter Bootstrap , karena kita akan menggunakan layout tersebut pada tutorial membuat website full ajax kali ini.

Pertama, pastikan anda telah membaca dan mendownload  tutorial Membut responsive layout dengan Twitter Bootstrap

Kedua, edit file index.php

Editlah

<!--S : Navbar-->

<div class="row-fluid">

 <div class="span12" id="navbar">
  <ul>

   <li><a href="">Home</a></li>

   <li><a href="">Profile</a></li>

   <li><a href="">Contact</a></li>

   <li><a href="">Sitemap</a></li>

  </ul>

 </div>

</div>

<!--E : Navbar-->


Ubahlah Menjadi

<!--S : Navbar-->

<div class="row-fluid">

 <div class="span12" id="navbar">
     <ul>

       <li><a href="">Home</a></li>
       <li><a href="#!profile" class="main-menu">Profile</a></li>
       <li><a href="#!contact" class="main-menu">Contact</a></li>
      <li><a href="#!sitemap" class="main-menu">Sitemap</a></li>

     </ul>
   
 </div>

</div>

<!--E : Navbar-->



Ketiga, buat file baru bernama ajax.js pada folder assets/js. File ajax.js ini berisi script jquery yg akan kita aplikasikan pada website full ajax yang akan kita buat.

Buka file ajax.js dan ketik code berikut ini

jQuery(document).ready(function(){

 jQuery(".main-menu").click(function(){

  var url=jQuery(this).attr("href"); 

  var page=url.split('#!')[1];

  jQuery("#left-content").load(page+".php");

 });

 jQuery(".article-title").click(function(){

  var ArticleId=jQuery(this).attr("href");

  var page=ArticleId.split('#!')[1];

  jQuery("#left-content").load("article.php?p="+page);
 });

});


Penjelasan file ajax.js

 jQuery(".main-menu").click(function(){

  var url=jQuery(this).attr("href"); 

  var page=url.split('#!')[1];

  jQuery("#left-content").load(page+".php");

 });


Baris ke 1 - 7.
Ketika suatu link dengan CLASS bernama main-menu diklik, maka program akan mendapatkan value dari atribut href, dalam hal ini adalah alamat link url.

Kemudian link akan dipotong dengan fungsi split, tujuannya ada untuk mengambil nama link dibelakang tanda #!.  
Tanda #! digunakan untuk menghilangkan fungsi dari link biasa yang akan menuju suatu halaman tertentu jika diklik, dengan menambahkan #! pada link, maka link akan dianggap sebagai  text biasa .
Kita ambil link dibelakang tanda #! kemudian kita panggil alamat tersebut dengan fungsi load, kemudian tampilkan hasilnya pada ID bernama left-content pada file index.php

Keempat, panggil file ajax.js di index.php, tambahlan sintax berikut ini diantara Tag <head> dan </head>

<script type="text/javascript" src="assets/js/ajax.js"></script>

Ok sekarang website full ajax kita sudah jadi untuk melihat demo program website full ajax klik disini


Download Full Source Code                                            Online Demo



Salam Penulis


Fuad Indra Setiawan



0 comments:

Posting Komentar