-

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
  • jquery malasngoding
  • malasngoding ajax
  • membuka halaman anpa reload ajax 2017
  • Membuat AJAX adalah
  • aplikasi untuk menampilkan html css tanpa refresh
  • load halaman dengan javascript
  • pindah halaman tanpa loading ajax



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

Membuat Select Option Dinamis Menggunakan Ajax
Diskusi
7 Komentar
  • Nurul Eka Lestari 4 years ago

    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.

    • Diki Alfarabi Hadi 4 years ago

      untuk melihat errornya coba di inspect element, dan lihat di tab console, kemungkinannya masih ada yg salah di codingan jquerynya, atau jqueyrnya belum terhubung

  • Eno 2 years ago

    Bikin tutor agar responsive mas

  • mochamad darmawan 2 years ago

    kalo di refresh bakal balik lagi ke awal ya?

  • mochamad darmawan 2 years ago

    eh ga jadi nanya nya uudh faham, ga akan balik ke awal karna pake var ya.. makasih kang

  • aahas 2 years ago

    di judulnya codeigniter, tp isinya bukan ci

  • suryo adhy chandra 1 year ago

    mas, itu cara melihat console nya gimana ya hehehee masih newbie ini sama js


Tulis Komentar / Pertanyaan

Your email address will not be published.