124489466 itx web id php tutorial membuat ajax tab sederhana dengan aj

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Bahasa Mesin :: Bahasa Manusia :: Bahasa Kitabukan untuk membenci, bukan untuk mencaci, tapi untuk memahami

December 26, 2010 by littleflow3r

6Tutorial Membuat AJAX-TabSederhana dengan AJAX danPHP

Like itx.web.id?

Domba Garut Benih Alfalfa Beras Organik

Like 293 people like this. SignUp to see what yourfriends like. Theme Buatan itx

Albizia Theme - Download AlbiziaBombax Theme - Download Bombax

Home Donate Tentang kita : Menggunakan Jasa itx Bonus Pulsa

PHP WordPress Bahasa Inggris Indonesia Jawa jQuery Selingan Lowongan Penulis

English

Indonesia


Related Results1. w w w .MonsterMarketplace.comLooking For Tutorial Membuat AJAX-Tab

Sederhana Dengan AJAX dan PHP?Find What You Need. Look For Tutorial Membuat AJAX-Tab Sederhanadan PHP Here Now

2. w w w .Answ ered-Questions.comSearching for Tutorial Membuat AJAX-TabSederhana Dengan AJAX dan PHP?Top answers for Tutorial Membuat AJAX-Tab Sederhana Dengan AJAX

3. w w w .InternetCorkBoard.comFind Tutorial Membuat AJAX-Tab SederhanaDengan AJAX dan PHPTop answers for Tutorial Membuat AJAX-Tab Sederhana Dengan AJAX

Studi Kasus : Membuat contoh aplikasi AJAX sederhana(Tab Ajax) dengan PHP

Kebutuhan : Webserver Package, already installed.

Step 1 : Membuat struktur folder kerja

1. Siapkan folder dengan nama simpleajax pada folderdocument root anda.

2. Simpan file gif berikut ini pada folder simpleajax(simpan gambar dengan cara : klik pada gambar dansave as). Gambar ini akan digunakan sebagai loaderanimation, yaitu gambar yang akan ditampilkanketika transaksi ajax sedang dilakukan.

Like 12 people like this. Sign Up to see what your friends like.

Postingan populer

Tutorial Upload, Menyimpan, danMenampilkan Gambar dengan PHP danMysql

Membuat Form ComboBox Dinamisdari Database (Mysql) dengan PHP

Tutorial Searching / Pencarian Datadengan PHP dan Mysql

Membuat Fungsi Update Data dalamDatabase dengan PHP Mysql

Form Input Tanggal PHP denganDatetimepicker JQuery

Login Multi-User dengan PHP danMysql

Penggunaan Fungsi Date / Time padaPHP

Search here ....

Inilah blog itx.... seorang yangsuka pemrograman webkhususnya PHP danWordPress... jangan ragutinggalkan pesan di sini ... :) Sebagian besar artikel di sinitidak saya tulis, melainkanditulis oleh teman-temanauthor (penulis lepas). Jadikalo menyapa jangan salahalamat yaaa... lihat dulu siapapenulis artikel ybs.

Hai Posts Comments

- Download BombaxCalotropis Theme - Download Calotropis

Plugin Buatan itx

Exclude Plugins - Download Exc ludePlugins

Jika memiliki pertanyaantentang theme atau pluginbuatan itx, silahkan menujuforum.

Business Directory Benih Alfalfa Benih Asparagus Benih Chicory Benih Cabe Terpedas &Terunik di Dunia


3. Simpan semua file pada praktikum hari ini padafolder ini.

Step 2 : Membuat file Index

1. Ketikkan script berikut,

2. Simpan dengan nama index.php3. Penjelasan : Index.php adalah file utama dalam

aplikasi ini. Bagian yang paling penting untukimplementasi Ajax adalah pada baris 9 14. Setiaplink pada tab memiliki masing masing sebuahatribut value href dan onclick event handler, sepertipada script dibawah,

Pada kasus ini, AJAX diinisiasi ketika usermengaktifkan tab dengan meng-kliknya.

123456789

1011121314151617


Ketika transaksi AJAX berhasil dieksekusi = fungsihandleOnClick() mengembalikan nilai false sehinggaakan membatalkan event klik. AJAX kemudianmengontrol proses update pada dokumen dan hreftidak diikuti.Ketika transaksi AJAX gagal (XMLHttpRequest objektidak dapat diinstansiasi, dengan kata lain browsertidak support AJAX) = Fungsi handleOnClickmengembalikan nilai true dan href diikuti,menavigasi dokumen pada halaman dokumen baru(yaitu halaman fallback).

Kenapa aplikasi menyediakan masing-masing eventhandler onClick dan sebuah href URL untuk setiaptab?

Hal ini untuk mengatasi apabila browser dari deviceyang digunakan tidak mensupport AJAX. Jadi apabiladevice mensupport AJAX, transaksi AJAX untukmenampilkan berita akan dilakukan. Namun apabilatidak support, berita tetap ditampilkan tetapi denganmengarahkannya pada halaman web baru (halamanfallback) berisi berita yang sama dari halaman yangdihasilkan oleh transaksi AJAX.

Step 3 : Membuat file ajax.js


1234567

var req = null;// Function to obtain an instance of XMLHttpRequest used in an AJAX requestfunction getXHR() {if (window.XMLHttpRequest) {return new XMLHttpRequest();}else try {


789

1011121314151617181920212223242526272829303132333435363738394041424344454647484950

else try {return new ActiveXObject('Msxml2.XMLHTTP'} catch(e) {try {return new ActiveXObject("Microsoft.XMLHTTP"} catch(e) {return null;}}}// Use AJAX to update the page content.// Returns true if the AJAX request succeeded, or false otherwise.function updateContent(url, id) {req = getXHR();if (req != null) {// Create a HTTP get requestreq.open('GET', url);// Anonymous callback function to handle state changes for the web requestreq.onreadystatechange = function() {// State "4" is response received.if (req.readyState == 4) {// Check for HTTP 200 - successful response from web serverif (req.status == 200) {document.getElementById(id).innerHTML = req.responseText;} else {document.getElementById(id).innerHTML = }}// For all other states, show an animated gif indicating that content is loadingelse {document.getElementById(id).innerHTML = }return false;}// Start the AJAX transactionreq.send('');} else {return false;}return true;}// This is the onClick event handler for the tab links// index - the zero-based index of the tab that was clickedfunction handleOnClick(index) {


2. Simpan dengan nama ajax.js3. Penjelasan : Kunci utama dari AJAX adalah objek

XMLHttpRequest. Objek tersebut terletak padabrowser sehingga masing masing browser memilikicara tersendiri untuk membuat objek tersebut.Function getXHR() pada script ajax2.js diatas adalahfungsi untuk menciptakan instance dariXMLHttpRequest (XHR) yang akan digunakan padaAJAX (Catatan : untuk IE, mensupport ajax viaActiveX objects, bukan XHR).FunctionupdateContent() merupakan fungsi yang akanmengupdate content dari tab via AJAX, fungsi iniakan mengembalikan nilai true apabila transaksiAJAX berhasil, dan false jika gagal.Setelah itu fungsi akan menciptakan Http get requestdan mengecek progress dari update dengan

5051525354555657585960616263646566676869707172

function handleOnClick(index) {// Construct the ID of the clicked tabvar tabId = "tab" + index;// Update the style of the active tab.document.getElementById(tabId).setAttribute(// Update the styles of the inactive tabs. This could also be achieved in a for loop.if (index != 1) {document.getElementById("tab" + 1).setAttribute(}if (index != 2) {document.getElementById("tab" + 2).setAttribute(}// Use AJAX to update the "content" div.// Construct the URL to use to retrieve the updated contentvar url = "http://localhost/helloMobile/getNews// If the AJAX request succeeded, do not follow the original linkif (updateContent(url, "content")) {return false;}// If we are here, then the AJAX transaction failed.// Follow the link and load the static page.return true;}


onreadystatechange event.onreadystatechange event menjalankan 3 hal,a. Jika asynchronous web request sedang dalamprogress, maka animasi loading akan ditampilkan.b. Jika AJAX request completed, maka body dari webresponse akan digunakan sebagai content darielemen.c. Jika AJAX request terminate dengan sebuah eror,maka eror akan ditampilkan pada user, yaitu Couldnot retrieve dataTransaksi AJAX menggunakandocument.getElementById dan element.innerHTMLuntuk mengupdate bagian dinamis dari dokumen(dalam kasus ini adalah berita sebagai bagiandinamis dari mobile web).

Function handleOnClick() merupakan fungsi eventhandler ketika tab di klik. Fungsi ini menggunakanparameter index, sesuai dengan index dari tab yangdiklik oleh user. Fungsi ini akan mengupdate styledari tab (untuk membedakan tab yang aktif dan yangtidak aktif) dan mengupdate isi dari div content. Isidari div content merupakan file berita sesuai dengantab yang diklik user. Content ini didapat dari URL varurl =http://localhost/simpleajax/getNews+index+.php;Jadi script tersebut akan me-retrieve halaman darigetNews(index) dengan menggunakan AJAX, sesuaidengan index dari tab yang diklik oleh user.

Step 4 : Membuat file get News


12


2. Simpan dengan nama getNews1.php3. Kemudian ketiikan script berikut,

4. Simpan dengan nama getNews2.php5. Penjelasan : Dua file ini merupakan original link

(yang dijalankan via AJAX) dari tab pertama dankedua (tab berindex 1 dan 2). Jadi getNews1.php dangetNews2.php akan dijalankan apabila user meng-kliktab index 1 dan 2, serta browser yang digunakanmensupport AJAX.

Step 5 : Membuat file fallback


2345

sleep(2);echo "News 1";echo "Ini adalah isi berita 1";?>

12345

123456789

10111213141516


2. Simpan dengan nama fallback1.php3. Kemudian ketiikan script berikut,

4. Simpan dengan nama fallback2.php5. Penjelasan : File fallback1.php dan fallback2.php

merupakan file webpage statis yang akan dijalankanapabila user meng-klik tab index 1 dan 2, sertabrowser yang digunakan TIDAK mensupport AJAX.Jadi berita tetap ditampilkan namun dengan carayang berbeda (tidak menggunakan AJAX).

Step 6 : Testing Code

1. Pergi ke http://localhost/simpleajax/2. Maka file index.php akan ditampilkan, seperti

1617181920

?>

123456789

1011121314151617181920


gambar dibawah ini,

3. Klik pada salah satu tab, maka jika browser andasupport ajax, animasi loading akan ditampilkan.Lihat gambar dibawah.

4. Setelah loading selesai, maka isi dari tab tersebutakan ditampilkan (dari getNews.php)

5. Coba matikan ajax pada browser anda (dengan me-nonaktifkan javascript browser untuk browserFirefox, caranya adalah dengan klik tools options content hilangkan tanda centang pada activatedjavascript ). Lihat gambar dibawah.


6. Coba lagi dengan mengklik salah satu tab.7. Maka berita akan ditampilkan tanpa animasi loading

(without AJAX) dari file fallback.php

Okay, silahkan berkreasi dengan AJAX Happy AJAX-ing

Hal yang juga menarik:

Beriklan Mudah Dengan SITTIPasang Iklan di Jutaan Page di Internet.

Daftar Sekarang!

sitti.co.id/advertiser


Hak Cipta

Semua skrip dan teknik dalam artikel diitx.web.id boleh digunakan sebagaimanakehendakmu tanpa perlu mencantumkan sumber.Kamu tidak boleh mengkopi seluruh artikel,dalam Bahasa Indonesia ataupun diterjemahkanke dalam bahasa lain.

This post is also available in: English

Related Articles:

Menggabungkan jQuery dan blog WordPress kita:Menjalankan Query SQL via PHPMendapatkan Feed Situs lain Via RSS ReaderSimplePieThe Use of Date/Time Function in PHPMembuat Pagination dalam CodeIgniterCreate a Pagination in CodeIgniter

: PHP: ajax, ajax dan php, simple ajax tab, tutorial ajax

sederhana

About the author

obviously, a girl. with sweet smile, offcourse. turning her 21 years trapped onInformatics departement and just started

Like 12 people like this. Sign Up to see what your friends like.


littleflow3r.wordpress.com/

6 Comments

to having some crush with it lately. she useswordpress. she loves php. she lo

belalangtue says:January 20, 2011 at 7:01 pm

makasih om,,mau nanya nih om,? klobikin tampilan profil user gimana y

om,?seandainya gini,?

kita dah buat form pendaftaran user,login nlogoutnya,,disitu tersedia layanan public tanpalogin, user harus login, admin udh pasti login,kemuadian setiap user yg login akan tampilprofilnya di halaman profil punya user itu sendiri,?itu gimana buatnya y om,? mohon pencerahannya yom,,,,,

Reply

littleflow3r says:January 20, 2011 at 9:36 pm

coba cek posting ini(http://itx.web.id/php/login-multi-

user-dengan-php-dan-mysql/), tinggal di modifaja yg mirip kek gini gak yang kamumaksud?

btw, the author is a girl


herik says:February 9, 2011 at 11:08 am

(heart) (heart_beat) (doh) (angry)(annoyed) (applause) (banana_ninja)

Reply

ardhan says:May 25, 2011 at 2:15 pm

mba, mw tanya, cara membuat skripajax yang akan me-retrieve data RSS

dari CNN, gimana?

mohon bantuannya.

Reply

Ahma Indraki says:September 9, 2011 at 11:39 pm

Asyik nich inponya. tinggal edit2 biarlebih menarik. (banana_cool)

Reply

Ahmad Taufiq says:June 3, 2012 at 5:57 pm

script ajaxnya ada kelemahan gan,function handleOnClick(index) {


var tabId = tab + index;document.getElementById(tabId).setAttribute(class,activeTab);if (index != 1) {document.getElementById(tab +1).setAttribute(class, tab);}if (index != 2) {document.getElementById(tab +2).setAttribute(class, tab);}var url =http://localhost/helloMobile/getNews+index+.php;fungsi ajax tersebut berfungsi jika 2 halamangetNews tersebut dipanggil (ditampilkan )semuadalam halaman index, akan tetapi jika hanya 1saja yang ditampilkan dalam index, ajaxnya tidakberfungsi.mohon solusinya dari momod .thanks before

Reply

Leave a Reply

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

Name *

Email *

Website

Comment


Bahasa Mesin :: Bahasa Manusia :: Bahasa Kita Bombax Theme designed by itx

RSS feed for this post (comments) TrackBack URI

Post Comment

Previous Post Membuat Menu Administrasi Kustom

Next PostMembuat WordPress Kustom

124489466 itx web id php tutorial membuat ajax tab sederhana dengan aj

Documents