Home > Menengah > Web Desain > Tutorial JQuery > Menggunakan JQuery GetJson Pada JSON PHP

.

Tidak ada komentar BYAdmin Ilmuwebsite

jsonSalam, bertemu kembali dalam tutorial jquery mempelajari belajar jquery, yang mudah-mudahan bermanfaat untuk Anda. Pada pertemuan sebelumnya kita telah mempelajari bagaimana menggunakan AJAX dengan JQuery, apa itu AJAX dan bagaimana menggunakan JQuery, silahkan baca kembali di artikel [link].

Kali ini kita akan menggunakan JSON yang digenerate oleh PHP. Mungkin sebelum masuk ke dalam materi, masih ada beberapa di antara Anda yang bertanya-tanya mengapa JSON? Baiklah kita mengulang dahulu pelajaran sebelumnya.

Terdapat banyak sekali format data, yang mampu mengintegrasikan antara layout HTML dengan Bahasa Pemrogaman PHP dengan konsep AJAX. Jika dahulu kala, pemrogaman PHP itu yang menggenerate halaman HTML, sekarang sudah berganti zaman menjadi HTML lah yang merequest data ke server via perantara JQuery AJAX yang dimana PHP berkomunikasi langsung menerima request lalu memprosesnya bekerja sama dengan MySQL dan menghasilkan array database lalu mengirimkan hasil requestnya itu ke halaman HTML tidak langsung menggenerate menjadi HTML namun via perantara JQuery AJAX. Yang terjadi adalah, tidak ada refresh page, atau reloading time.

Contoh pemrogaman PHP model lama yakni php berkomunikasi dengan mysql lalu menggenerate hasil ke dalam html adalah, ketika ANda melakukan komentar pada salah satu website kesayangan Anda misalkan ilmuwebsite.com, lalu Anda memberikan komentar di bawah, ada form input nama, email, website, komentar, ketika ANda mengisi semuanya, lalu mensubmitnya maka form html di kirimkan menuju halaman PHP, dan PHP memprosesnya bekerja sama dengan MySQL dan begitu seterusnya, lalu setelah selesai maka PHP akan meredirect kembali ke halaman sebelumnya, yakni pengisian komentar. Ini adalah pemrograman model lama.

Dengan JSON AJAX semuanya menjadi berbeda. Contoh implementasinya adalah, ketika Anda mengetikkan status di wall/timeline Anda. Status langsung muncul begitu saja, ataupun ketika Anda menghapus komentar seseorang dari wall Anda, komentarnya hilang begitu saja, tanpa ada reloading time, maupun refresh page, semuanya dilakukan dibelakang layar, yang Anda lihat adalah komentar di hapus secara live event. Tidak ada waktu jeda. Sebetulnya selain JSON ada beberapa jenis format data yang bisa digunakan dalam AJAX ini, yakni ada XML, dan CSV

Oke jelas ya? JSON AJAX ini sudah lama digunakan oleh Facebook, Twitter, Blogger Backendnya, lalu banyak lagi, termasuk situs-situs lokal seperti mindtalk.com dan lain-lain.

Nah pertanyaannya adalah, bagaimana kita membuat hal yang seperti itu? Atau paling tidak melakukan CRUD (Create Read Update dan Delete) menggunakan JQuery AJAX JSON. Itu akan kita bahas dalam tutorial berikutnya. Kali ini penulis akan mengenalkan dulu bagaimana penggunaan GET JSON pada JQUERY yang meminta request ke sebuah halaman PHP itu betul-betul memberikan pengalaman dalam programming yang berbeda. Tidak mustahil suatu hari Anda mengaplikasikannya ke dalam sebuah aplikasi buatan Anda sendiri. Yang kemudian Anda terkenal karenanya, dan menghasilkan keuntungan dari itu. Saya doakan untuk Anda semua, insyaAllah, Aamiin.

Sebelum kita mulai ke topik pembahasan, anggaplah kita akan membuat sebuah aplikasi yang berhubungan dengan database penjualan suatu produk. Misalkan produk kesehatan, yakni herbal. Lebih spesifik, kita akan mengurusi bagian database pembelinya/transaksi.

Kita buat terlebih dahulu databasenya, dan struktur table-tablenya. Ada 8 field yang akan digunakan, yakni : id, nama_pembeli, alamat_pembeli, kelurahan, kecamatan, kota, provinsi, kodepos.

 

Kemudian silahkan isi terlebih dahulu dengan beberapa data pembeli, isi sesuai dengan yang Anda inginkan. Di sini saya mengisikan dengan 5 data pembeli.

Selanjutnya adalah membuat sebuah halaman yang nantinya akan digunakan untuk mengambil data dari tbl_pembeli via GetJson yang merequest ke suatu URL halaman PHP. Jadi tidak langsung menggunakan PHP yang berintegrasi dengan mySQL lalu menggenerate datanya ke dalam bentuk HTML, melainkan dihandle oleh GetJson pada JQUERY. Berikut adalah scriptnya.

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

File index.html

 

Kemudian Selanjutnya adalah file konfigurasi databasenya.

File config.php

 

Dan yang terakhir adalah file untuk mengambil database menggunakan PHP yang pada akhirnya digenerate menjadi format data json.

File json.php

 

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

Sekian, untuk bagian pertama ini belum akan penulis jelaskan. Di bagian 2 akan dijelaskan secara detil, ditambah kasus bagaimana menginsert data menggunakan GetJSON.

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

You must be logged in to post a comment.

eXTReMe Tracker