Scribd
Upload
48 views

Jquery + Bootstrap + Class: Pengenalan Jquery Dan Integrasi Aplikasi

This document discusses integrating jQuery and Ajax into a PHP application. It covers setting up the file structure, adding jQuery and Bootstrap, creating the navigation menu, and using jQuery functions like load(), on(), serialize(), and serializeArray() to make asynchronous requests without page reloads. Issues like links and form submissions causing page redirects are addressed by binding Ajax handlers using on(). This allows the application's barang, jenis, and brand pages to be accessed from a single index.php file without changing existing code.

Uploaded by

Garde Lim
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views

Jquery + Bootstrap + Class: Pengenalan Jquery Dan Integrasi Aplikasi

This document discusses integrating jQuery and Ajax into a PHP application. It covers setting up the file structure, adding jQuery and Bootstrap, creating the navigation menu, and using jQuery functions like load(), on(), serialize(), and serializeArray() to make asynchronous requests without page reloads. Issues like links and form submissions causing page redirects are addressed by binding Ajax handlers using on(). This allows the application's barang, jenis, and brand pages to be accessed from a single index.php file without changing existing code.

Uploaded by

Garde Lim
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Pengenalan Jquery dan Integrasi Aplikasi

JQ U ER Y + B O O TS TR A P +
C LA SS

Persiapan Program
Copy source code PHP

pertemuan 4/5
Source code telah dapat
melakukan penyimpanan sbb:
Barang
Jenis
Brand

Struktur Source Code


Pertemuan 7
c
m
sbo
srd
erly
j
l
fis
o
n
tas
barang.php
bootstrapbootstrap.min.js
barang.php
config.php
glyphicons-halflings-regular.eot
theme.min.css
brand.php
brand.php
jquery.min.js
model.php
glyphicons-halflings-regular.svg
index.php
bootstrap.min.css
jenis.php
table.php
glyphicons-halflings-regular.ttf
jenis.php
glyphicons-halflings-regular.wof
css
fonts
js
library
model

File Index.php [H ead]


<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="data:text/css;charset=utf-8,"
data-href="css/bootstrap-theme.min.css"
rel="stylesheet"
id="bs-theme-stylesheet">
<script src="js/jquery.min.js"></script>
</head>

File Index.php [Body]


- Awali dengan tag :
<body>
Akan memiliki 2 bagian yakni:
1. Header & Menu
2. Konten

File Index.php [Body-M enu]


Diawali dengan
<nav class="navbar navbar-default">
<div class="container-fluid">
--------------------Ditutup dengan
</div><!-- /.container-fluid -->
</nav>

File Index.php [Body-M enu]


Pada bagian garis putus putus akan diisi dengan:
1. Logo/Nama dan menu tambahan
<div class="navbar-header">
<a class="navbar-brand" href="#">Friendly Site</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="barang.php">Barang</a></li>
<li><a href="jenis.php">Jenis</a></li>
<li><a href="brand.php">Brand</a></li>
</ul>

</div>

File Index.php [Body-Konten]


Pada Bagian konten akan diisi dengan:
<div class="content col-sm-12 >
<div class="panel panel-info">
<div class="panel-heading">
<h4>Program Ajax Saya</h4>
</div>
<div class="panel-body">
<div id="tempat-load">
Selamat Datang Di Program Ajax Saya
</div>
</div>
</div>
</div>

SCRIPT JQ uery
AJAX

Singkatan dari
AsynchronousJavaScriptandXMLHT
TP,
Digunakan untuk melakukan request
dari browser client ke server melalui
background process
Menggunakan javascript, tidak
memerlukan reload page

SCRIPT JQ uery
Load ajax
$.ajax({
url: url,
type:post/get/put/delete,
datatype:html/json/script,
data:data,
success:function(data){
}
});
$(selector).load(url, [optional],[optional]);

SCRIPT Jquery .load()


Pada pengujian, akan digunakan fungsi
load.
Fungsi load dapat menggunakan 3
parameter, namun 2 parameter lainnya
optional
Penggunaan fungsi load adalah sbb:
$(selector).load(url);
Akan melakukan request alamat url ke
server dan memasukkan hasil yang
dikirimkan oleh server ke selector yang
dimaksudkan

SCRIPT Jquery .load()


$(selector).load(url,data);
Akan melakukan request alamat url ke
server disertakan pengiriman data
Akan mengirimkan dengan metode GET
bila data dalam bentuk string
Akan mengirimkan dengan metode POST
bila data dalam bentuk object
$(selector).load(url,function(){});
Akan melakukan fungsi setelah server
mengirimkan respond data

SCRIPT Jquery .load()


$(selector).load(url,data,function(){});
Akan melakukan request alamat url ke
server disertakan pengiriman data dan
menjalankan fungsi setelah server
mengirimkan respond data

Im plem entasiPada PH P
Untuk melakukan ujicoba Ajax, tambahkan script berikut

pada file index.php


<script src="js/jquery.min.js"></script>
<script>
$(function(){
$(.navbar-nav li a').click(function(){
$('#tempat-load').load(this.href);
return false;
});
});
</script>
</head>

Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
akses file index.php melalui web

server localhost, dan klik menu,


Beberapa hal yang dapat
diperhatikan disini adalah:
Browser tidak meload/mengarahkan ke

url yang baru


Load data lebih cepat

Text sebelumnya
Text yang ditambahkan

Kendala

Pada saat salah satu menu diakses,

akan muncul tampilan table dan


beberapa tombol
Pada saat tombol tambah/edit/delete
diklik, page akan diarahkan ke url yang
baru, dan fungsi ajax tidak berfungsi
Solusi
Implementasikan fungsi ajax pada tombol
tersebut
Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
Untuk memastikan tombol tambah dapat melakukan fungsi

ajax pada web, tambahkan fungsi berikut pada bagian $


(function(){}
$(function(){
$(.navbar-nav li a').click(function(){
$('#tempat-load').load(this.href);
return false;
});
$('body').on('click','#tempat-load a',function(){
$('#tempat-load').load(this.href);
return false;
});
});
Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
Pada script ini terdapat fungsi baru
yakni on.
Fungsi on digunakan untuk
mengaktifkan event tertentu pada
suatu selector
Fungsi on memastikan event tetap
dapat ditangkap oleh javascript
walaupun konten pada html berubah
Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
Penggunaan fungsi on adalah sbb:
$(selector).on(
[nama event],
[nama selector anak],
function(){
isi dari fungsi
}
);
Agar fungsi event dapat berjalan, pastikan selector
tidak pernah berubah,
Selector terbaik adalah body

Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
akses file index.php melalui web

server localhost, dan klik menu,


Klik tombol tambah/edit/delete
Tampilan akan berubah sesuai
dengan tombol yang diakses

Text sebelumnya
Text yang ditambahkan

Kendala

Pada saat form diisi dan disimpan,

halaman web akan diarahkan ke url


yang baru, halaman web berubah
Solusi
Tambahkan event listener pada form
untuk menangkap request saat
Gunakan fungsi on dan event lister
submit

Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
Untuk memastikan form dapat tersubmit dengan

fungsi ajax pada web, tambahkan fungsi berikut


pada bagian $(function(){}
$(function(){
------$('body').on('submit','form',function(){
$('#tempat-load').load(this.action,$
(this).serializeArray());
return false;
});
});

Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
Pada fungsi diatas terhadap fungsi baru
yakni .serializeArray()
.serializeArray() digunakan untuk
mengenerate data object dari sebuah
form, isi dari object ini merupakan data
dari element input,select,textarea yang
terdapat pada form
Untuk menghasilkan data string gunakan
fungsi
.serialize()
Text sebelumnya
Text yang ditambahkan

Im plem entasiPada PH P
.serializeArray(),.serialize() hanya
dapat digunakan pada form
Untuk mencoba dan melihat
perbedaan hasil dari kedua fungsi
tersebut gunakan firebug(Mozilla
Firefox)/console(google Chrome)
Untuk melakukan pengujian, pastikan
pada halaman web terdapat form
Text sebelumnya
Text yang ditambahkan

.serialize()

Text sebelumnya
Text yang ditambahkan

.serialize()
Hasil dari eksekusi diatas adalah:
"item%5BBrandNama%5D=
Untuk perhatian, %5B dan %5D

merupakan pengkodean html,


merupakan pengganti dari simbol
[(%5B) dan ](%5D)
Hasil eksekusi diatas menyerupai
parameter get pada URL
Text sebelumnya
Text yang ditambahkan

.serializeArray()

Text sebelumnya
Text yang ditambahkan

.serializeArray()
Hasil dari eksekusi diatas adalah:
[Object { name="item[BrandNama]",

value=""}]
Hasil eksekusi diatas adalah object
javascript

Text sebelumnya
Text yang ditambahkan

Penutup
Setelah menerapkan semua tahapan

diatas, maka barang,jenis dan brand


dapat diakses melalui 1 page,
index.php tanpa perlu melakukan
perubahan apapun pada file yang
telah kita buat.

Text sebelumnya
Text yang ditambahkan

Sum ber Pustaka


https://api.jquery.com
http://stackoverflow.com/
dan

Text sebelumnya
Text yang ditambahkan

Terim a Kasih
Friendly (2015)

You might also like