Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery – Halo teman-teman. sebelumnya saya ucapkan dulu terima kasih sudah kembali berkunjung di www.malasngoding.com.
Sesuai dengan judul artikel tutorial ini. kesempatan kali ini kita akan membahas Bagaimana sih Cara Membuat Halaman Web Ajax Tanpa Reload dengan JQuery.
Ayo langsung saja di simak tutorial membuat halaman website yang bisa berpindah halaman tanpa reload dengan ajax jquery dengan mudah dan cepat.
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Sebelumnya jika ada teman-teman yang masih belum tau apa itu ajax dan apa itu jquery, silahkan teman-teman bisa membaca tutorial kita sebelumnya di www.malasngoding.com tentang pengertian dan cara penggunaan jquery.
Ajax adalah singkatan dari “asynchronous Javascript and XML“. ajax merupakan sebuah metode web yang menggunakan javascript untuk mengirim atau menerima data dari server tanpa reload atau menyegarkan halaman tersebut.
Kebetulan yang ingin kita buat pada tutorial ini adalah sebuah halaman website yang sederhana, di mana kita TIDAK perlu menggunakan reload untuk berpindah alamat. jadi saat link url menu di klik, maka halaman website akan langsung berganti tanpa harus reload.
Cara Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Yang pertama kali harus di lakukan adalah silahkan teman-teman download dulu jquery.js nya di situs resmi jquery. yaitu di http://jquery.com.
setelah di download, letakkan file jquery nya ke dalam direktori project yang akan kita kerjakan. bersama file lainnya.
di sini saya sudah menempatkan nya dalam folder ajax_page dalam localhost.
membuat halaman website ajax tanpa reload
Kemudian buat file index.php
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html> <head> <title>Membuat halaman website ajax tanpa reload dengan ajax jquery | www.malasngoding.com</title> <!-- menghubungkan dengan file css --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- menghubungkan dengan file jquery --> <script type="text/javascript" src="jquery.js"></script> </head> <body> <!-- Author : diki alfarabi hadi Site : www.malasngoding.com --> <div class="content"> <header> <h1 class="judul">WWW.MALASNGODING.COM</h1> <h3 class="deskripsi">Membuat Halaman Website Ajax Tanpa Reload dengan JQuery</h3> </header> <div class="menu"> <ul> <li><a class="klik_menu" id="home">HOME</a></li> <li><a class="klik_menu" id="tentang">TENTANG</a></li> <li><a class="klik_menu" id="tutorial">TUTORIAL</a></li> <li><a class="klik_menu" id="sosmed">SOSIAL MEDIA</a></li> </ul> </div> <div class="badan"> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $('.klik_menu').click(function(){ var menu = $(this).attr('id'); if(menu == "home"){ $('.badan').load('home.php'); }else if(menu == "tentang"){ $('.badan').load('tentang.php'); }else if(menu == "tutorial"){ $('.badan').load('tutorial.php'); }else if(menu == "sosmed"){ $('.badan').load('sosmed.php'); } }); // halaman yang di load default pertama kali $('.badan').load('home.php'); }); </script> </html> |
buat css nya dalam file style.css
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
body{ background-color:#f9f9f9; font-size:16px color:#444; font-family: sans-serif; } .content{ width: 80%; margin: 10px auto; } /*header*/ header{ background-color: white; padding: 20px 10px; border-radius: 5px; border: 1px solid #f0f0f0; margin-bottom: 10px; } header h1.judul, header h3.deskripsi{ text-align: center; } /*menu navigasi*/ .menu{ background-color: #87CEFA; border: 1px solid #f0f0f0; border-radius: 8px; margin-bottom: 10px; } div.menu ul { list-style:none; overflow: hidden; } div.menu ul li { float:left; text-transform:uppercase; } div.menu ul li a { display:block; padding:0 20px; text-decoration:none; color:#2c2c2c; font-family: sans-serif; font-size:13px; font-weight:400; transition:all 0.3s ease-in-out; } div.menu ul li a:hover, div.menu ul li a.hoverover { cursor: pointer; color:#fff; } div.badan{ background-color: white; border-radius: 5px; border: 1px solid #f0f0f0; margin-bottom: 10px; } div.halaman{ text-align: center; padding: 30px 20px; } |
lalu, buat file home.php
home.php
|
1 2 3 4 |
<div class="halaman"> <h2>Halaman Depan</h2> <p>Selamat datang di www.malasngoding.com. ini merupakan halaman depan pada demo cara Membuat halaman website ajax tanpa reload dengan ajax jquery</p> </div> |
lalu buat juga file baru dengan nama tentang.php
tentang.php
|
1 2 3 4 5 |
<div class="halaman"> <h2>Tentang Kami</h2> <p>Ini adalah halaman tentang kami</p> <p>Malasngoding.com adalah situs yang menyediakan konten-konten berkualitas untuk belajar pemrograman web</p> </div> |
buat file baru lagi dengan nama tutorial.php
tutorial.php
|
1 2 3 4 |
<div class="halaman"> <h2>Halaman Tutorial</h2> <p>Ini adalah halaman tutorial</p> </div> |
terakhir buat file dengan nama sosmed.php
|
1 2 3 4 |
<div class="halaman"> <h2>Sosial Media</h2> <p>Facebook : <a href="https://www.facebook.com/malasngodingpage">https://www.facebook.com/malasngodingpage</a>.</p> </div> |
Sekarang coba jalankan pada browser dengan mengakses localhost/ajax_page.
maka hasilnya seperti berikut.kita akan memiliki template halaman website dengan ajax. jadi setiap perpindahan halaman yang terjadi tidak akan menggunakan reload. semua di lakukan tanpa refresh/reload.
penjelasan lengkapnya akan di jelaskan di bawah.
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
membuat halaman ajax tanpa reload
Penjelasan Cara Membuat Halaman Ajax
Ada beberapa bagian yang harus teman-teman pahami dalam mmebuat halaman ajax seperti pada tutorial yang kita buat ini.
Perhatikan pada syntax jquery dalam file index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ $('.klik_menu').click(function(){ var menu = $(this).attr('id'); if(menu == "home"){ $('.badan').load('home.php'); }else if(menu == "tentang"){ $('.badan').load('tentang.php'); }else if(menu == "tutorial"){ $('.badan').load('tutorial.php'); }else if(menu == "sosmed"){ $('.badan').load('sosmed.php'); } }); // halaman yang di load default pertama kali $('.badan').load('home.php'); }); |
pada saat class klik_menu di klik, maka kita ambil nama id dari class yang di klik tersebut.
|
1 |
var menu = $(this).attr('id'); |
kemudian melakukan pengecekan jika id class yg di klik adalah home, maka load halaman home.php pada class badan. atau jika nama id nya adalah tentang, maka load file tentang.php. begitu seterusnya.
|
1 2 3 4 5 6 7 8 9 |
if(menu == "home"){ $('.badan').load('home.php'); }else if(menu == "tentang"){ $('.badan').load('tentang.php'); }else if(menu == "tutorial"){ $('.badan').load('tutorial.php'); }else if(menu == "sosmed"){ $('.badan').load('sosmed.php'); } |
Oke sekian dulu tutorial cara membuat halaman website ajax ini. semoga dapat bermanfaat. dan jika ada yg tidak di mengerti atau kesalahan dalam menjelaskan, silahkan teman-teman tinggalkan komentar pada postingan ini.
terima kasih, nongkrong terus di www.malasngoding.com.
Tutorial Menarik Lainnya
Membuat CRUD menggunakan Ajax PHP – Hapus Data
Membuat CRUD menggunakan Ajax PHP – Input Data
Membuat CRUD menggunakan Ajax PHP – Menampilkan Data
Membuat Select Option Dinamis Menggunakan Ajax
mengapa setelah saya mengikuti tutorial diatas hasil yang saya coba menu-menunya saat diklik tidak berpindah halaman atau tidak ada perubahan apapun?bagian mana yang harus saya perbaiki ya, terima kasih.
untuk melihat errornya coba di inspect element, dan lihat di tab console, kemungkinannya masih ada yg salah di codingan jquerynya, atau jqueyrnya belum terhubung
Bikin tutor agar responsive mas
di judulnya codeigniter, tp isinya bukan ci
mas, itu cara melihat console nya gimana ya hehehee masih newbie ini sama js