ajax adalah kepanjangan dari Asynchronous JavaScript and XMLHTT, ajax ini adalah tekhnologi pada website yang gunanya untuk bertukar data, mengirm data, dan berkomunikasi data dari client ke server tanpa mereload halamannya. tentu ajax ini bukan bahasa pemrogramman yah teman teman, ajax ini hanya metode dan pengembangan dari javascript,jquery dan PHP tersebut. nah untuk belajar ajax saya asumsikan teman teman sudah belajar javascript, jquery, PHP dan juga database yah teman teman. karena kita akan mempraktekannya dengan JQuery, berarti teman teman harus download jquery nya terlebih dahulu yah. kita akan belajar menggunakan load ajax untuk memanggil data php dari luar file php tersebut dengan JQuery. langsung saja kita praktekan yah teman teman belajar Load Ajax PHP dengan JQuery.
disini kita buah file index.php dan buat struktur berikut
index. php
<!DOCTYPE html> <html> <head> <title>AJAX</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo project with jQuery"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <header class="lead text-white bg-info mb-2 p-2"> Header </header> <div id="box"></div> <footer class="lead text-white bg-info mt-2 p-2"> Footer </footer> </div> </div> </div> </body> </html>
struktur nya sederhana sebetulnya, kita membuat header, id box dan footer, nah ide nya sendiri id box ini akan kita isi dari file data.php. dan di dalam data .php ketikan kode berikut.
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure incidunt modi labore explicabo ducimus esse consequatur, iste sequi enim neque numquam, quibusdam adipisci dolorem architecto eveniet, delectus facere. Necessitatibus delectus tempore beatae numquam vero voluptates cum quo magnam, ducimus iure molestias obcaecati aperiam explicabo dignissimos ut cumque, sapiente hic alias odio ipsum labore quibusdam architecto! Nemo distinctio ipsum aperiam nostrum minima fugit veritatis debitis cumque eveniet rerum dignissimos iste, dolores laborum odio blanditiis, odit ex? Dolorem vero fugit aspernatur eaque ipsum dolores ut, perferendis corrupti magni deleniti vel necessitatibus repudiandae iste repellendus, qui excepturi minima, omnis assumenda porro autem blanditiis?</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure incidunt modi labore explicabo ducimus esse consequatur, iste sequi enim neque numquam, quibusdam adipisci dolorem architecto eveniet, delectus facere. Necessitatibus delectus tempore beatae numquam vero voluptates cum quo magnam, ducimus iure molestias obcaecati aperiam explicabo dignissimos ut cumque, sapiente hic alias odio ipsum labore quibusdam architecto! Nemo distinctio ipsum aperiam nostrum minima fugit veritatis debitis cumque eveniet rerum dignissimos iste, dolores laborum odio blanditiis, odit ex? Dolorem vero fugit aspernatur eaque ipsum dolores ut, perferendis corrupti magni deleniti vel necessitatibus repudiandae iste repellendus, qui excepturi minima, omnis assumenda porro autem blanditiis?</p>
hanya dua paragraf saja yng akan kita tampilkan. sebelum itu kita lihat dulu di localhost hasilnya yah teman teman.
seperti yang saya bilang hanya ada header, id box dan footer dimana id box akan kita isi dengan load ajax.
oke kita kembali ke index.php kita panggil jquery nya yah teman teman dan tuliskan fungsi load ajax nya dengan jquery. ketikan kode berikut sebelum penutup body.
dan setelah itu kita bisa ke localhost dan lihat hasilnya.
dimana hasilnya adalah kita berhasil memanggil data dari data.php menggunakan load ajax ini.
sekian tutorial Load Ajax PHP dengan JQuery, semoga bermanfaat yah teman teman.
The post Load Ajax PHP dengan JQuery appeared first on Kursus Website Terbaik.