-

Membuat Halaman Web Ajax Tanpa Reload dengan JQuery


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

membuat halaman website ajax tanpa reload

Kemudian buat file index.php

index.php

buat css nya dalam file style.css

style.css

lalu, buat file home.php

home.php

lalu buat juga file baru dengan nama tentang.php

tentang.php

buat file baru lagi dengan nama tutorial.php

tutorial.php

terakhir buat file dengan nama sosmed.php

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 Web Ajax Tanpa Reload dengan JQuery

 

membuat halaman ajax tanpa reload

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

pada saat class klik_menu di klik, maka kita ambil nama id dari class yang di klik tersebut.

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.

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.

Incoming search terms:

  • me-load halaman tanpa refresh dengan jquery
  • load halaman dengan ajax codeigniter
  • memanggil halaman lain dengan jquery
  • membuka halaman anpa reload ajax 2017
  • Membuat AJAX adalah
  • pindah halaman tanpa loading ajax
  • jquery malasngoding
  • load halaman dengan javascript
  • cara membuat peginations tanpa reload halaman
  • javascrip refresh halaman sebelumnya



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

Diskusi
Tidak Ada Komentar

Tulis Komentar / Pertanyaan

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