MAKALAH
“Pengenalan
Javascript, JQUERY, AJAX, CSS”
Di
susun guna memenuhi Tugas Mata Kuliah Web Statis
Semester
Satu (Ganjil) Tahun Ajaran 2011/2012
Di
susun Oleh :
NIM : 12121148
Prodi : Teknik
Informatika
Kata
Pengantar
Alhamdulillah, Puji
syukur kehadirat Allah SWT yang senantiasa melimpahkan rizqi, hidayah dan
kesehatan kepada kita semua, sholawat serta salam tidak lupa kita panjatkan
kepada junjungan kita nabi Muhammad SAW yang kita nantikan syafa’atnya di
Yaumul Kiamat.
Ada banyak pihak yang
telah membantu terwujudnya makalah ini, yang tidak mungkin Penulis sebutkan
satu persatu, diantaranya adalah :
1. Bapak dan Ibu yang telah memberikan
support dan doa,
2. Ibu Asih Winantu, S.Kom yang telah
memberikan bimbingan,
Makalah ini akan
menjelaskan beberapa hal dasar yang berhubungan dengan Java Script, JQUERY,
AJAX dan CSS. Mulai dari pengenalan, syntax-syntax dasar, implementasi, contoh
penggunaan sampai kekurangan dan kelebihan yang dimiliki oleh Java Script,
JQUERY, AJAX dan CSS.
Dalam
penulisan makalah ini, kami sadar bahwa masih ada banyak kekurangan dan
kesalahan, saran dan kritikan dari pembaca yang bersifat membangun Penulis
butuhkan guna memperbaiki dan menyempurnakan penulisan makalah di masa yang
akan datang.
Penulis,
03 Desember 2012,
Yogyakarta
Daftar Isi
Cover
………………………………………………………………………
|
1
|
Kata
Pengantar .............................................................................................
|
2
|
Daftar
Isi …………………………………………………………………..
|
3
|
BAB
I PENDAHULUAN
….......................................................................
|
|
a. Latar Belakang
……............................................................................
|
|
b. Maksud dan Tujuan ……………........................................................
|
|
BAB
II POKOK PERMASALAHAN ………………………...…………..
|
|
BAB
III ISI ………………………………………………………………...
|
|
BAB
IV PENUTUP ……………………………………………………….
|
|
DAFTAR
PUSTAKA
|
BAB I
PENDAHULUAN
a)
Latar
Belakang
Dalam dasawarsa ini
perkembangan ilmu komunikasi dan teknologi informasi sangat pesat, hal ini
ditandai dengan berkembangnya teknologi internet yang memudahkan maunisa dalam
meringankan pekerjaan dan mempermudah dalam berkomunikasii dan saling tukar
menukar informasi.
Internet telah
menyediakan berbagai faslitas seperti, e-mail, www( world wide web), dan blog.
Perkembangan blog pun semakin cepat terbukti dengan semakin banyaknya orang
yang menggunakan blog sebagai media informasi dunia maya. Sekarang telah
terdapat jutaan blog dengan pertumbuhan yang sangat signifikan.
Dalam pembuatan dan
pengembangan web atau blog para web developer memerlukan pengetahuan tentang
yang cukup mendalam tentang Java Script, JQUERY, AJAX dan CSS, oleh sebab itu
besar harapan penulis agar makalah ini dapat digunakan para pemula dalam
membangun sebuah web.
b)
Maksud
dan Tujuan
Ada
beberapa maksud dan tujuan dalam penulisan makalah ini, diantaranya :
1. Ingin
memperkenalkan web developer pemula tentang Java Script, JQUERY, AJAX dan CSS;
2.
mempermudah orang dalam memahami dan
menggunakan Java Script, JQUERY, AJAX dan CSS.
BAB II
POKOK
PERMASALAHAN
1. Java Script
1.1
Apa itu Java Script?
1.2
Apa saja syntax dalam Java Script?
1.3
Bagaimana cara mengimplementasikan Java Script?
1.4
Apa sajakah contoh dari Java Script?
1.5
Apa kekurangan dan kelebihan dari Java Script?
2. JQUERY
2.1
Apa itu JQUERY?
2.2
Apa saja syntax dalam JQUERY?
2.3
Bagaimana cara mengimplementasikan JQUERY?
2.4
Apa sajakah contoh dari JQUERY?
2.5
Apa kekurangan dan kelebihan dari JQUERY?
3. AJAX
3.1
Apa itu AJAX?
3.2
Apa saja syntax dalam AJAX?
3.3
Bagaimana cara mengimplementasikan AJAX?
3.4
Apa sajakah contoh dari AJAX?
3.5
Apa kekurangan dan kelebihan dari AJAX?
4. CSS
4.1
Apa itu CSS?
4.2
Apa saja syntax dalam CSS?
4.3
Bagaimana cara mengimplementasikan CSS?
4.4
Apa sajakah contoh dari CSS?
4.5
Apa kekurangan dan kelebihan dari CSS?
BAB
III
ISI
A.
Pembahasan
Ø Java Script
1.1
Apa itu Java Script?
Bagi Anda
yang sering berkutat di dunia website, JavaScript tentu sudah tidak asing lagi.
Mungkin Anda termasuk orang yang belum mengerti apa itu JavaScript. Berikut sejarah
dan penjelasan JavaScript.
Ø Sejarah
JavaScript
JavaScript
pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa
yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang
berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang
sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama
antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu,
maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal
4 desember 1995.
Pada
saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi
ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet
Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++
dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
Ø Pengertian
JavaScript
JavaScript
adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika
kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript
sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman
web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya
terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa
pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi
program.
Secara
fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang
dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah
membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke
server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
- JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
- JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.
- JavaScript biasanya disisipkan langsung pada halaman HTML.
- Client Side scripting.
- Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.
- JavaScript bersifat Case Sensitive.
1.2
Apa saja syntax dalam Java Script?
1. Pemakaian alert
sebagai property window
<HTML>
<HEAD>
<TITLE>Alert
Box</TITLE>
</HEAD>
<BODY>
<SCRIPT
LANGUAGE = "JavaScript">
<!--
window.alert("Ini
merupakan pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>
2. Pemakaian metode
dalam objek.
<HTML>
<HEAD>
<TITLE>Skrip
JavaScript</TITLE>
</HEAD>
<BODY>
Percobaan
memakai JavaScript:<BR>
<SCRIPT
LANGUAGE = "JavaScript">
<!--
document.write("Selamat
Mencoba JavaScript<BR>");
document.write("Semoga
sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
3. Pemakaian prompt
<HTML>
<HEAD>
<TITLE>Pemasukan
Data</TITLE>
</HEAD>
<BODY>
<SCRIPT
LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama
Anda?","Masukkan nama anda");
document.write("Hai, " +
nama);
//-->
</SCRIPT>
</BODY>
</HTML>
1.3
Bagaimana cara mengmiplementasikan Java Script?
JavaScript
adalah salah suatu bagian dari bahasa pemrograman Java yang dibuat oleh Sun
Microsystem. Javascript adalah bahasa script yang langsung di masukkan ke dalam
dokumen HTML, sehingga tidak memerlukan kompiler lain lagi, dan untuk membuat
Javascript, adalah dengan menggunakan tag <SCRIPT>, dan memiliki Atribut
LANGUAGE untuk menyatakan jenis bahasa script yang digunakan didalam nya.
Perhatikan contoh dokumen HTML sederhana yang meyisipkan JavaScript ke dalamnya :
<HTML>
<HEAD>
<TITLE>Contoh JavaScript Sederhana</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// menuliskan ke layar browser
document.writeln("Javascript pertamaku !");
// kode javascript telah selesai.
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE>Contoh JavaScript Sederhana</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// menuliskan ke layar browser
document.writeln("Javascript pertamaku !");
// kode javascript telah selesai.
</SCRIPT>
</BODY>
</HTML>
Jadi, untuk JavaScript LANGUAGE harus di isi "JavaScript" (lihat contoh di atas). Elemen <SCRIPT> dapat ditulis pada bagian HEAD maupun BODY, sedangkan untuk membuat komentar di dalam kode JavaScript, kita harus menggunakan // (slash), seperti contoh :
//Ini
adalah komentar penjelasan kode
Elemen
<SCRIPT> juga memiliki atribut SRC yang digunakan untuk menunjuk file
terpisah dari lokasi lain dengan format file JavaScript (*.js), sehingga
dapat disimpan terpisah jauh dari dokument HTML yang menggunakan nya.
Contoh penerapan JavaScript terpisah
dari document yang menggunakan nya :
<HTML>
<HEAD>
<TITLE>Contoh Pemakaian File JavaScrip terpisah</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="http://domain.com/file/nama-file.js"> </SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE>Contoh Pemakaian File JavaScrip terpisah</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="http://domain.com/file/nama-file.js"> </SCRIPT>
</BODY>
</HTML>
Dimana nama-file.js adalah nama file JavaScript yang ingin digunakan, dan di dalam file JavaScript tersebut tidak perlu lagi menggunakan tag <script> atau tag <script language="JavaScript">, jadi langsung saja menuju kode nya, seperti contoh di bawah ini : Isi File : nama-file.js
document.write("Ini adalah hasil Exekusi Kode JavaScript");
1.4
Apa sajakah contoh dari Java Script?
Sebagai pengenalan,
ini ada beberapa contoh sederhana kode JavaScript, diantaranya adalah sebagai
berikut :
ü
JavaScript dapat disisipkan dalam tag HTML
dengan menggunakan tag script
<script type="text/javascript">
//Kode Javascript
</script>
</script>
Sama halnya seperti PHP kode
yang berada setelah tanda “//” tidak akan di eksekusi.
Kode JavaScript dapat dituliskan dibagian head,
body atau di tulis pada file external.
ü
Kode JavaScript di bagian head
<html>
<head>
<title>javascript di
bagian head</title>
<script type="text/javascript">
function sayhi(){
alert('Hi, Aku di eksekusi setelah halaman selesai di load');
}
</script>
</head>
<body onload="sayhi()">
<p>Ini adalah halaman web</p>
</body>
</html>
</script>
ü
Kode JavaScript di bagian body
<html>
<head>
<title>javascript di
bagian body</title>
</head>
<body>
<script type="text/javascript">
alert("Hi, Aku di eksekusi saat halaman web di load/sebelum halaman
selesai di load");
</script>
<p>Ini adalah halaman web</p>
</body>
</html>
</script>
Jika
kita perhatikan dari contoh pertama, tulisan “Ini adalah halaman web”
akan muncul sebelum “Hi, Aku…” muncul. Berbeda dengan kode yang
disisipkan di bagian body, “Hi, Aku…” akan muncul sebelum “Ini
adalah halaman web” muncul di halaman web. Wokoke begitulah kira-kira
perbedaan penempatan skrip.
Kode
JavaScript yang tersimpan di file external ber-ekstensi .js
dan dapat dipanggil di bagian head atau body dengan
menyertakan source dari file eksternal
JavaScript tersebut. Keuntungan dari penulisan secara eksternal ini, kita dapat
menjalankan JavaScript pada halaman yang berbeda tanpa harus menulis ulang
skrip di setiap halaman.
ü
Contoh kode JavaScript yang disimpan file
eksternal:
//fungsi ini di panggil setelah halaman selesai di load
window.onload = function(){
alert(’Hi, Aku berasal dari file external sayhi.js’);
}
Kemudian kita simpan file tersebut
sebagai sayhi.js. Untuk memanggil kode tersebut sisipkan
source JavaScript dalam tag HTML seperti berikut:
<html>
<head>
<title>javascript di
bagian head</title>
<script type="text/javascript" src="sayhi.js"></script>
</head>
<body>
<p>Ini adalah halaman web</p>
</body>
</html>
</script>
Penulisan
src=”sayhi.js” pada contoh diatas harus sesuai dengan file kode
JavaScript disimpan. Jika file disimpan dalam folder js,
src ditulis menjadi src=”js/sayhi.js”.
1.5 Apa kekurangan dan kelebihan dari Java
Script?
v Kelebihan Javascript
1. Ukuran file kecil
Script dari
javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki javascript
ditampilkan di browser maka akses tampilannya akan lebih cepat dibandingkan ketika
browser membuka suatu web yang memiliki script java. Hal ini juga sangat berkepentingan
dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam
suatu server maka daya kerja server ketika di browsing oleh user di internet akan
tidak terlalu berat, selain itu sifat javascript client side yang tidak perlu
lagi di olah oleh server ketika browser memanggil web dari sebuah server.
2. Mudah untuk dipelajari
Javascript merupakan
bahasa semi pemograman yang merupakan gabungan antara bahasa pemograman java
dengan bahasa kode HTML sehingga disebut bahasa hybrid. Walaupun javascript
merupakan turunan dari java namun javascript tidak memiliki aturan yang serumit
java.
3. Terbuka
Javascript tidak
terikat oleh hardware maupun software tertentu bahkan system operasi seperti
windows maupun unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun di
baca di semua jenis komputer.
v Kekurangan Javascript
1. Script tidak
terenkripsi
Karena javascript bersifat client
side, maka script yang kita buat di text editor dan telah dijadikan web di
server, ketika user merequest web dari server tersebut maka sintak javascript
akan langsung ditampilkan di browser. User bisa melihat dan menirunya
dari sourcenya.
2. Kemampuan
terbatas
Walaupun javascript
mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak
mampu membuat program aplikasi sendiri seperti java.
3. Keterbatasan
Objek
Javascript tidak
mampu membuat kelaskelas yang bisa menampung objekobjek tambahan seperti java
karena javascript teleh memiliki objek yang builtin pada sturktur bahasanya.
Ø JQUERY
2.1
Apa itu JQUERY?
jQuery adalah javascript library, jQuery mempunyai
semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode
javascript. JQuery adalah javascript library yang cepat dan ringan untuk
menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax.
JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai
mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai
HTML,
CSS dan Javascript. Library jQuery mempunyai kemampuan :
•
Kemudahan mengakses elemen-elemen HTML
•
Memanipulasi elemen HTML
•
Memanipulasi CSS
•
Penanganan event HTML
•
Efek-efek javascript dan animasi
•
Modifikasi HTML DOM
•
AJAX
•
Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda
harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda
menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan
file jquery.js kedalam kode javascript anda.
<script
type="text/javascript" src="jquery.js"></script>
sekarang
mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12.
hello world jquery
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello
World!</p>
<button
class="tombol1">Sembunyikan</button>
<button
class="tombol2">Tampilkan</button>
</body>
</html>
2.2
Apa saja syntax dalam JQUERY?
Sintaks jquery biasanya dibuat untuk
memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.
Sintaks :
$(selector).action()
• Tanda dollar, untuk mendefinisikan
jQuery
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh :
$(this).hide()
– menyembunyikan elemen saat ini
$("p").hide()
– menyembunyikan semua paragraf atau
konten dari tag <p>
$(".test").hide()
– menyembunyikan elemen yang
mempunya class=”test”
$("#test").show()
– menampilkan elemen yang mempunyai
id=”test”
Karena hampir segala sesuatu yang kita
lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model
(DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah
DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk
dokumen.
$(document).ready(function(){
//kode anda di sini
});
Kode di atas berarti kita ingin kode
dijalankan apabila halaman HTML telah di load semuanya. Atau dengan kode
javascript biasanya seperti ini :
window.onload = function(){ //kode
anda di sini }
Sekarang mari kita lihat pada contoh
$(".tombol1").click(Kode $(“.tombol1″)
adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1”
untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh
karena $() untuk membuat objek jQuery. Kemudian kita tambahkan
fungsi click(). Ini berguna untuk memberikan event onclick untuk
elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’).
Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi.
Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan
fungsi $(“p”).hide(1000);
function(){
$("p").hide(1000);
});
2.3
Bagaimana cara mengimplementasikan JQUERY?
Implementasi jQuery
Kemudahan
atau kenapa orang banyak menggunakan framework javascript ini adalah karena
banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah
semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery
mempercepat atau memudahkan dalam pembangunan sebuah website.
Dibawah
ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web
developer dalam membuat atau membangun sebuah website, diantaranya:
Ø Drop-Down-Menu
Jika dalam sebuah website terdiri
dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok
menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu
(menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga
dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika
lama waktu mouse over atau mouse out.
Web Sitenya: http://javascript-array.com
Ø Tool-Tips
Tool tips adalah bubble/gelembung
atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika
mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah
web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan
adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan,
maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang
cantik, seperti fasilitas tombol close, background shadow, dll.
Web Sitenya: http://www.mopstudio.jp
Ø Autocomplete-Search
Plugin ini digunakan untuk melakukan
pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam
sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul
seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti
pencarian pada website facebook, sehingga sangat menarik untuk dicoba.
Web Sitenya: http://loopj.com
Ø Validasi-Form
Plugin ini digunakan untuk melakukan
validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan
password, username dan input lainnya secara real time (tidak menekan tombol
submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan
melakukan validasi terhadap inputan user.
Web Sitenya: http://www.willjessup.com
Web Sitenya: http://www.willjessup.com
Ø jQuery-Cycle-Plugin
Plugin ini digunakan untuk animasi
image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai
animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada
menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak
lagi efek yang lainnya. Web Sitenya: http://malsup.com
Ø Teks-Berjalan
Plugin ini digunakan untuk
memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik,
seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah,
mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan
lebih lembut dan lebih banyak variasi. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang
bisa dikunjungi di http://www.jqueryplugins.com
2.4 Apa sajakah contoh dari JQUERY?
Ini adalah bentuk bagian dari efect dengan jquery dan untuk JS-nya masih sama dengan posting yang sebelumnya dan source
codenya sebagai
berikut :
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; } </style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = jQuery.queue( $("div")[0], "fx" );
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>
dan di tambahakan untuk mengatur kecepatan gerak anda berikut bentuk source codenya :
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx", [] );
$("div").stop();
});
</script>
</body>
</html>
catatan untuk jsnya masih sama dengan yang dipostingan sebelumnya dan simpan dengan satu direktory dimana js-nya tersimpan dalam satu folder yang sama.
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; } </style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = jQuery.queue( $("div")[0], "fx" );
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>
dan di tambahakan untuk mengatur kecepatan gerak anda berikut bentuk source codenya :
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx", [] );
$("div").stop();
});
</script>
</body>
</html>
catatan untuk jsnya masih sama dengan yang dipostingan sebelumnya dan simpan dengan satu direktory dimana js-nya tersimpan dalam satu folder yang sama.
2.5
Apa kekurangan dan kelebihan dari JQUERY?
Ada beberapa alasan mengapa lebih
baik menggunakan jQuery daripada library lainnya, antara lain:
Kompatibel dengan hampir
seluruh browser
jQuery telah digunakan oleh
website-website raksasa
Kompatibel dengan seluruh versi
CSS (dari CSS 1 sampai CSS 3)
Dokumentasi dan tutorialnya
lengkap, bisa langsung dilihat di http://jquery.com
Didukung oleh banyak komunitas
Disupport oleh plugin yang
lengkap
Filenya hanya satu dan
ukurannya relatif kecil, sekitar 20kb
Open source atau Free
jQuery lebih diminati oleh para
developer web saat ini
·
KELEBIHAN
:
·
Menyederhanakan
penggunaan javascript, karena kita cukup menggunakan fungsi dari library
javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah
website. Dibandingkan kita harus mulai sebuah script javascript dari nol.
·
Fungsi-fungsi
yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca
di situs http://jquery.com hal ini mempermudah dalam
pembelajaran jquery.
·
Support
terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website
dan interaksinya.
·
Website
yang dibangun dengan jquery akan lebih interaktif dan menarik.
KEKURANGAN :
·
Meskipun
diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk
browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan
jquery, alias HTML murni.
·
Dari
sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka
miliki untuk menangani request terhadap jquery. Pada level tertentu request
yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host
jquery pada situs lain, seperti Google yang menyediakan request jquery dari
servernya.
Ø AJAX
3.1 Apa itu AJAX?
AJAX
adalah singkatan dari Asynchronous JavaScript and XML.
AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.
AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.
Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.
AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.
AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.
Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.
3.2
Apa saja syntax dalam AJAX?
AJAX adalah singkatan dari Asynchronous JavaScript untuk
berdiri dan XML dan teknologi ini membantu kami untuk memuat data dari server
tanpa refresh browser halaman. Jika Anda baru dengan AJAX, saya akan merekomendasikan
Anda pergi melalui Tutorial Ajax kami sebelum melangkah lebih jauh.
JQuery adalah alat yang hebat yang menyediakan kaya set
metode AJAX untuk mengembangkan aplikasi web generasi berikutnya.
Memuat data sederhana:
Hal ini sangat mudah untuk memuat data statis atau
dinamis menggunakan AJAX JQuery. JQuery menyediakan metode beban () untuk
melakukan pekerjaan:
Sintaks:
Sintaks:
Berikut adalah sintaks sederhana untuk metode beban ():
[Pemilih] beban (URL, [data], [callback]);
Berikut ini adalah deskripsi dari semua parameter:
URL: URL dari sumber daya server-side yang permintaan dikirim. Ini bisa menjadi script CGI, ASP, JSP, atau PHP yang menghasilkan data yang dinamis atau keluar dari database.
URL: URL dari sumber daya server-side yang permintaan dikirim. Ini bisa menjadi script CGI, ASP, JSP, atau PHP yang menghasilkan data yang dinamis atau keluar dari database.
Data: ini parameter opsional merupakan objek properti
yang serial ke parameter benar dikodekan untuk diteruskan ke permintaan. Jika
ditentukan, permintaan tersebut dibuat dengan menggunakan metode POST. Jika
dihilangkan, metode GET digunakan.
callback: Sebuah fungsi callback dipanggil setelah data
respon telah dimuat ke dalam unsur-unsur dari himpunan cocok. Parameter pertama
dilewatkan ke fungsi ini adalah teks respon diterima dari parameter server dan
kedua adalah kode status.
Contoh:
Perhatikan file HTML berikut dengan coding JQuery kecil:
Contoh:
Perhatikan file HTML berikut dengan coding JQuery kecil:
<html>
<head>
<title> judul </ title>
<Jenis script = "text / javascript"
src = "/ jquery/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript" language="javascript">
$ (Dokumen) siap (function (). {
$ ("# Driver"). Klik (function (event) {
$ ('# Stage') beban ('/ jquery / result.html').;
});
});
</ Script>
</ Head>
<body>
<p> Klik pada tombol untuk memuat file result.html: </ p>
<div id="stage" style="background-color:blue;">
STAGE
</ Div>
<input type="button" id="driver" value="Load Data" />
</ Body>
</ Html>
Berikut load () memulai permintaan Ajax ke file URL /
jquery / result.html ditentukan. Setelah loading file ini, semua konten akan
diisi dalam <div> ditandai dengan tahap ID. Dengan asumsi, / kami jquery
/ result.html file yang baru saja satu baris HTML:
<h1> INI ADALAH HASIL ... </
h1>
Ketika Anda mengklik tombol yang diberikan, maka file
result.html akan dimuat. Untuk memahami dengan cara yang lebih baik Anda bisa
Coba sendiri.
Mendapatkan data JSON:
Mendapatkan data JSON:
Akan ada situasi ketika server akan kembali string JSON terhadap
permintaan Anda. Utilitas getJSON fungsi JQuery () mem-parsing string JSON
kembali dan membuat string yang dihasilkan tersedia untuk fungsi callback
sebagai parameter pertama untuk
mengambil tindakan lebih lanjut.
Sintaks:
Berikut adalah sintaks sederhana untuk metode getJSON ():
. [Pemilih] getJSON (URL, [data], [callback]);
Berikut ini adalah deskripsi dari semua parameter:
URL: URL dari sumber daya server-side dihubungi melalui metode GET.
Data: Sebuah benda yang sifat berfungsi sebagai pasangan nama / nilai yang digunakan untuk membangun sebuah string query yang akan ditambahkan ke URL, atau string kueri terformat dan encoded.
URL: URL dari sumber daya server-side dihubungi melalui metode GET.
Data: Sebuah benda yang sifat berfungsi sebagai pasangan nama / nilai yang digunakan untuk membangun sebuah string query yang akan ditambahkan ke URL, atau string kueri terformat dan encoded.
callback: Sebuah fungsi dipanggil ketika permintaan
selesai. Nilai data yang dihasilkan dari respon tubuh mencerna sebagai string
JSON dilewatkan sebagai parameter pertama untuk callback ini, dan status
sebagai yang kedua.
Contoh:
Contoh:
Perhatikan file HTML berikut dengan coding JQuery kecil:
<html>
<head>
<title> judul </ title>
<Jenis script = "text / javascript"
src = "/ jquery/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript" language="javascript">
$ (Dokumen) siap (function (). {
$ ("# Driver"). Klik (function (event) {
$ GetJSON ('/ jquery / result.json',. Fungsi (jd) {
$ ('# Stage') html ('<p> Nama:' + jd.name + '</ p>').;
$ ('# Stage') append ('<p> Usia:' + jd.age + '</ p>').;
$ ('# Stage') append ('<p> Sex:' + jd.sex + '</ p>').;
});
});
});
</ Script>
</ Head>
<body>
<p> Klik pada tombol untuk memuat file result.html: </ p>
<div id="stage" style="background-color:blue;">
STAGE
</ Div>
<input type="button" id="driver" value="Load Data" />
</ Body>
</ Html>
<head>
<title> judul </ title>
<Jenis script = "text / javascript"
src = "/ jquery/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript" language="javascript">
$ (Dokumen) siap (function (). {
$ ("# Driver"). Klik (function (event) {
$ GetJSON ('/ jquery / result.json',. Fungsi (jd) {
$ ('# Stage') html ('<p> Nama:' + jd.name + '</ p>').;
$ ('# Stage') append ('<p> Usia:' + jd.age + '</ p>').;
$ ('# Stage') append ('<p> Sex:' + jd.sex + '</ p>').;
});
});
});
</ Script>
</ Head>
<body>
<p> Klik pada tombol untuk memuat file result.html: </ p>
<div id="stage" style="background-color:blue;">
STAGE
</ Div>
<input type="button" id="driver" value="Load Data" />
</ Body>
</ Html>
Berikut utilitas getJSON metode JQuery () memulai
permintaan Ajax ke file URL / jquery / result.json ditentukan. Setelah loading
file ini, semua konten akan dilewatkan ke fungsi callback yang akhirnya akan
diisi dalam <div> ditandai dengan tahap ID. Dengan asumsi, / kami jquery
/ result.json berkas telah mengikuti konten json diformat:
{
"Nama": "Zara Ali",
"Usia": "67",
"Sex": "perempuan"
}
"Nama": "Zara Ali",
"Usia": "67",
"Sex": "perempuan"
}
Ketika Anda mengklik tombol yang diberikan, maka
result.json file akan dimuat. Untuk memahami dengan cara yang lebih baik Anda
bisa Coba sendiri.
Melewati data ke Server:
Melewati data ke Server:
Banyak kali Anda mengumpulkan masukan dari pengguna dan
Anda lulus bahwa masukan ke server untuk diproses lebih lanjut. JQuery AJAX
membuatnya cukup mudah untuk melewatkan data yang dikumpulkan ke server
menggunakan parameter data dari setiap metode Ajax yang tersedia.
Contoh:
Contoh ini menunjukkan bagaimana dapat lulus input pengguna untuk script web server yang akan mengirim hasil yang sama kembali dan kami akan mencetaknya:
Contoh:
Contoh ini menunjukkan bagaimana dapat lulus input pengguna untuk script web server yang akan mengirim hasil yang sama kembali dan kami akan mencetaknya:
<html>
<head>
<title> judul </ title>
<Jenis script = "text / javascript"
src = "/ jquery/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript" language="javascript">
$ (Dokumen) siap (function (). {
$ ("# Driver"). Klik (function (event) {
var name = $ ("# nama") val ().;
$ ("# Stage") beban ('/ jquery / result.php', {"name": name}).;
});
});
</ Script>
</ Head>
<body>
<p> Masukkan nama Anda dan klik pada tombol: </ p>
<input type="input" id="name" size="40" /> <br />
<div id="stage" style="background-color:blue;">
STAGE
</ Div>
<input type="button" id="driver" value="Show Result" />
</ Body>
</ Html>
Berikut adalah kode yang ditulis dalam skrip result.php:
<? Php
if ($ _REQUEST ["name"])
{
$ Name = $ _REQUEST ['name'];
echo "Selamat datang". $ Nama;
}
?>
<head>
<title> judul </ title>
<Jenis script = "text / javascript"
src = "/ jquery/jquery-1.3.2.min.js"> </ script>
<script type="text/javascript" language="javascript">
$ (Dokumen) siap (function (). {
$ ("# Driver"). Klik (function (event) {
var name = $ ("# nama") val ().;
$ ("# Stage") beban ('/ jquery / result.php', {"name": name}).;
});
});
</ Script>
</ Head>
<body>
<p> Masukkan nama Anda dan klik pada tombol: </ p>
<input type="input" id="name" size="40" /> <br />
<div id="stage" style="background-color:blue;">
STAGE
</ Div>
<input type="button" id="driver" value="Show Result" />
</ Body>
</ Html>
Berikut adalah kode yang ditulis dalam skrip result.php:
<? Php
if ($ _REQUEST ["name"])
{
$ Name = $ _REQUEST ['name'];
echo "Selamat datang". $ Nama;
}
?>
Sekarang Anda dapat memasukkan teks dalam kotak masukan
yang diberikan dan kemudian klik "Tampilkan Hasil" tombol untuk
melihat apa yang telah Anda masukkan dalam kotak masukan. Untuk memahami dengan
cara yang lebih baik Anda bisa Coba sendiri.
3.3
Bagaimana cara mengimplementasikan AJAX?
Contoh implementasi AJAX pada website diantaranya sebagai Auto
Suggestion, Auto Completion maupun Combo Menu. Ada juga website yang
menggunakan full AJAX yaitu visualjquery, website ini menggunakan Framework
JQuery, salah satu teknologi AJAX gratis alias free. Namun disini ada kelemahan
yaitu website ini merupakan 1 Single File Java Script yang berukuran sekitar
180-an kb, jadi ketika kita mengakses untuk pertama kalinya akan lama dalam
loading website ini, tapi ketika sudah sekali kita load maka untuk selanjutnya
akan responsif.
Untuk mempercantik dan memperingan kinerja website yang kalian develope,
kebanyakan para pembuat Website (Developer) mengimplementasikan AJAX dalam
pengerjaannya, mengapa? karena dengan AJAX pengunjung tidak perlu merefresh
seluruh halaman website dengan teknik ini jauh akan lebih menghemat Bandwith
hosting dan ringannya website tersebut saat di akses oleh pengunjung. Lalu apa
sih AJAX itu sebenarnya? Ajax adalah Singkatan dari Asynchronous
JavaScript and XMLHTTP yaitu suatu teknik pemrograman berbasis web untuk
menciptakan aplikasi web interaktif, melakukan pertukaran data dengan server
dibalik layar sehingga halaman web tidak harus dibaca ulang secara
keseluruhan setiap kali seorang pengguna melakukan perubahan.
Ada contoh mencoba implementasikan dalam sebuah
code.
1. Buat 1 buah file beri nama index.html
kemudian isikan seperti dibawah
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jquery Ajax</title>
<link rel=”stylesheet” type=”text/css”
href=”./css/style.css”>
<script type=”text/javascript”
src=”http://code.jquery.com/jquery-1.5.2.min.js”></script> // saya
gunakan jquery sebagai framework javascriptnya
<script type=”text/javascript”>
function loading(){ // Tampilkan Loading ketika Ajax
berjalan.
$(‘#loading’).ajaxStart(function(){
$(this).fadeIn(400); //jika ajax masih berjalan
}).ajaxComplete(function(){
$(this).fadeOut(400); //hilangkan jika ajax sudah tidak
dijalankan
});
}
$(function(){
$(“a”).click(function(){ //ketika Tag a di klik
var file = $(this).attr(‘id’); // ambil isi attribut id
$(“#right_column”).load(file+”.html”,loading); //
panggil file dan masukkan ke id right_column
});
$(“#right_column”).load(“home.html”); // ketika pertama
kali halaman di buka panggil home.html
});
</script>
</head>
<body>
<div id=”wrap”>
<div id=”header”>
<div>Judul website</div>
<ul>
<li><a href=”#”
id=”home”>Home</a></li>
<li id=”scat”><a href=”#”
id=”categories”>Categories</a></li>
<li><a href=”#” id=”about”>About
us</a></li>
<li><a href=”#” id=”contact”>Contact
us</a></li>
</ul>
<div></div>
</div>
<div id=”content”>
<div id=”loading”>Loading…</div> //Tampilkan
loading ketika Ajax dijalankan
<div id=”left_column”>
<div>
<h2>Sub box</h2>
<ul>
<li>isi box</li>
<li>isi box</li>
</ul>
</div>
</div>
<div id=”right_column”> //Response dari ajax
akan ditempatkan disini
</div>
<div></div>
</div>
<div id=”footer”>
<a
href=”http://www.iso.web.id”>iso.web.id</a> 2011
</div>
</div>
</body>
</html>
kemudian buat 4 buah file masih beri nama home.html,
about.html, contact.html dan categories.html isi ke 4 file tersebut sesuai
dengan keinginan kalian.
home.html saya isi dengan :
<p>Selamat datang di website
saya.</p>
about.html saya isi dengan :
<h2>Tentang saya</h2>
Lorem ipsum dolor sit amet.
contact.html saya isi dengan :
<h2>Kontak kami</h2>
Halaman kontak
categories.html sayan isi dengan
<h2>Kategori</h2>
Lorem ipsum dolor sit amet
keempat file
diatas adalah file – file hasil Response yang dipanggil melalui teknik AJAX,
apabila file yang di panggil tersebut diketemukan browser akan menampilkan isi
dari file-file tersebut.
Bagaimana
mudah bukan mengimplementasikan AJAX pada sebuah website, kalian tidak perlu
susah payah membuat Javascript murni untuk pengimplementasian AJAX
(Terbentur masalah Cross Browser) , gunakan Framework javascript untuk
mempermudah dan memperingan kerja kalian dan yang terpenting Framework
javascipt biasanya sudah support Cross Browser (jquery, dojo, Mootools dll).
3.4
Apa sajakah contoh dari AJAX?
Membuat
server-side script dengan PHP (HelloAjax.php)
Script PHP inilah yang diminta oleh
request XMLHttp sebagai response dalam bentuk format XML yang nanti di-parsing
oleh client JavaScript.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< ?php
// Output Dalam bentuk XML
header('Content-Type: text/xml');
// generate XML header
echo '<?xml
version="1.0"
encoding="UTF-8"
standalone="yes"?>';
echo '<response>';
$name = $_GET['name'];
$userNames = array('ANDI', 'SURYA', 'NANA', 'LALA',
'HAKI','PUTRA');
if (in_array(strtoupper($name), $userNames))
echo 'Halo.. ' .
htmlentities($name) . '!';
else if (trim($name) == '')
echo 'hmm...
sapa ya!';
else
echo
htmlentities($name) . ', gak kenal tuh!';
echo '</response>';
?>
|
Dalam contoh AJAX sederhana ini, ketika user diminta untuk
mengetikkan nama user, server selalu mengirim response. Ketika user sedang
mengetikkan, server dipanggil secara asynchronous, pada selang waktu tertentu
(dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya tombol
untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke
server. Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan
pada halaman akan berbeda.
Pesan yang berbeda tersebut terletak di element <div>
dengan id=divMessage, jadi ketika response datang kemudian diparsing, maka
pesan yang didapat dari response akan ditampilkan di element ini. Sehingga
untuk menampilkan suatu bagian dari halaman web yang bersifat dinamis
diperlukan element, dalam contoh ini <div>, yang digunakan oleh
JavaScript untuk dapat dimanipulasi
3.5
Apa kekurangan dan kelebihan dari AJAX?
Sebagai sebuah teknologi yang
terkenal akhir-akhir ini, AJAX tentu memiliki berbagai kelebihan dan
kekurangan, karena tidak ada ganding yang tidak retak bukan? Di antara berbagai
keuntungan AJAX adalah:
1.
Penggunaan
bandwidth: Karena konten HTML dari halaman web dilakukan oleh browser itu
sendiri (menggunakan JavaScript yang merupakan bahasa pemrograman client-side),
maka halaman web yang dibuat menggunakan AJAX dapat di-load relatif lebih
cepat. Selain itu, karena tidak perlu adanya refresh untuk menampilkan data
yang lebih barn, maka bandwidth yang diperlukan untuk menampilkan informasi
melalui halaman web akan lebih sedikit dibandingkan jika tanpa menggunakan
AJAX.
2.
Pemisahan
antara data, format, style, dan fungsi: Keuntungan lain dari AJAX adalah
pendekatan AJAX membuat programmer untuk memisahkan antara metode dan format
yang digunakan untuk penyampaian informasi melalui web. Penyusun halaman web
yang dipisahkan antara. lain:
·
Data
mentah yang akan ditampilkan yang biasanya dibuat dalam format XML atau bisa
juga diletakkan di database server-side.
·
Format
atau struktur halaman web. Biasanya dibuat menggunakan HTML atau XHTML yang
kemudian diolah menggunakan Dynamic Manipulation di DOM.
·
Elemen
style halaman web. Bagian ini mendeskripsikan bagaimana tampilan halaman web,
dari mulai font hingga metode penampilan gambar. Style ini biasanya di-embed ke
halaman web atau direferensikan melalui file .css (cascading style sheet).
Fungsionalitas halaman web, biasanya
terdiri dari JavaScript (DHTML), HTTP standar, komunikasi XMLHttp, dan bahasa
pemrograman server-side.
Dengan demikian, mau tidak mau programmer akan menjadi lebih teratur dalam memprogram dan cenderung tidak kacau dalam membuat aplikasi web. Walaupun demikian AJAX juga memiliki beberapa kerugian, seperti:
Dengan demikian, mau tidak mau programmer akan menjadi lebih teratur dalam memprogram dan cenderung tidak kacau dalam membuat aplikasi web. Walaupun demikian AJAX juga memiliki beberapa kerugian, seperti:
1. Integrasi browser: Karena konten
halaman menganut prinsip asinkron, di mana data bisa di-update tanpa halaman
di-refresh, maka perubahan tampilan tidak tercatat di bagian history dari
browser. Jadi ketika Anda mengklik tombol Back, yang muncul bukan tampilan
seperti sebelum mengeksekusi kode AJAX, namun malah halaman sebelumnya.
2. Kekurangan lainnya adalah kesulitan
bagi seorang user untuk melakukan bookmark/ favorite pada bagian tertentu dari
halaman web.
3. Waktu respon yang kemungkinan bisa
membingungkan user yang tidak berpengalaman menggunakan aplikasi AJAX. Jika
setting waktu respon tidak tepat, user bisa mengira halaman yang diaksesnya
sedang hang.
4. Search engine optimization: Karena
konten di-generate menggunakan JavaScript, search engine tidak bisa
mengindeksnya sehingga mengurangi efektivitas halaman ditinjau dari SEO.
5. Terlalu mengandalkan JavaScript:
AJAX menggunakan JavaScript, yang kadang diimplementasikan secara berbeda di
berbagai browser atau verse tertentu dari sebuah browser. Karena. itu sering
kale sebuah website yang mengandung JavaScript harus dites menggunakan berbagai
jenis browser untuk memastikan tampilannya tidak ada yang salah, begitu juga
dengan AJAX. Namun mengingat browser sekarang seperti Mozilla dan IE 7
menggunakan lapisan abstraksi semisal JavaScript Framework, maka kekurangan ini
sepertinya bisa ditanggulangi di masa depan.
6. Alat bantu pemrograman berupa IDE
(integrated development environment) untuk JavaScript sangatlah jarang dan langka.
Anda bisa menggunakan beberapa tool, seperti Firebug, IE Developer toolbar, dan
Venkman.
7. Termasuk kelemahan JavaScript adalah
apabila user men-disable JavaScript di browser-nya, maka AJAX tidak akan bisa
digunakan.
8. Web analytics: Berbagai solusi web
analytic biasanya memiliki anggapan bahwa sebuah halaman barn di-loading tiap
kali konten di-update ke user. Mengingat AJAX mengubah para-digma seperti ini,
maka programmer harus meng-atur peletakan kode web analytic sehingga proses
tracking akan lebih baik.
Jadi AJAX cocok digunakan jika Anda
ingin membuat aplikasi web yang biasanya memerlukan pergantian lialaman yang
terlalu membutuhkan bandwidth atau L rang efisien sehingga ingin disederhanakan
I,iliiipannya.
Teknologi AJAX juga memiliki batasan yang harus ilij)erhatikan oleh para programmer ketika membuat I ui laman web berbasis AJAX:
Teknologi AJAX juga memiliki batasan yang harus ilij)erhatikan oleh para programmer ketika membuat I ui laman web berbasis AJAX:
1. Kode script dan sumber data (baik
XML atau plain text) harus berasal dari nama domain yang lama. Hal ini
merupakan kebijakan dari browser untuk menghindari adanya masalah security.
Namun Anda bisa mengakah hal ini dengan menggunakan skrip server side. Contoh
hal ini akan Anda lihat di Bab 4 ketika membuat aplikasi Google Suggest yang
merupakan fitur pencarian live search dari Google.
2. Browser keluaran Microsoft Internet
Explorer 5 dan 6 menggunakan ActiveX untuk mengimplementasikan XMLHttpRequest.
Walaupun setting default tidak menyebabkan masalah, namun jika settingnya
diubah, user bisa tidak dapat mengakses AJAX (tapi ini sudah diperbaiki di
browser Internet Explorer 7). Karena itu Anda harus memastikan bahwa user yang
hendak membuka halaman web Anda sudah memenuhi persyaratan browser-nya.
3. Browser-browser tua clan browser
khusus (seperti browser di handphone dan lynx) tidak dapat mengakomodasi
penggunaan objek XMLHttpRequest, sehingga halaman yang menggunakan AJAX tidak
bisa diakses.
4. Jika pengunjung men-disable
JavaScript, halaman dengan kode AJAX tidak akan bisa dilihat.
5.
Perlu
waktu bagi user untuk memahami tentang perbedaan AJAX dengan halaman web
konvensional.
Ø CSS
4.1
Apa itu CSS?
CSS (Cascading Style
Sheet)
adalah standard
pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat
penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak terjadi pengulangan tulisan.
4.2
Apa saja syntax dalam CSS?
Syntax /
kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1
property, 1 value.
Format
penulisan kalimat CSS:
selector { property: value }
Selector itu
untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk
menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah
nilai dari pengaturannya.
Contoh
Syntax:
h1 { color: red }
Contoh di
atas menunjukkan
Selector: h1
Property:
color
Value: red
Kalau diterjemahkan
ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1
ke warna merah (red).
Pengelompokan Selectors
Anda dapat
menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan
penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk
mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3
{color:red; font-family:arial; font-size:150%;}
Pada contoh
di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah,
dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat
disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan
property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca
aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
color:red;
font-family:arial;
font-size:150%;
}
Sekarang
anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya
akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala,
ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat.
Anda bisa
menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala
teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi
hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
4.3
Bagaimana cara mengimplementasikan CSS?
Ada 4 cara memasang kode CSS ke
dalam kode HTML / halaman web, yaitu:
Inline CSS
Kode CSS dituliskan langsung ke
dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan
penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda
mau memformat suatu elemen satu kali saja. Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Isi paragraf.
</p>
Pada contoh
di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini
hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini
di mulai dengan kata style: lalu di ikuti dengan syntax property:
value.
Embedded CSS
Anda bisa juga menempelkan kode
CSS di antara tag <head> dan </head>. Penulisan
CSS dengan cara ini diawali dengan tag <style> dan diakhiri
dengan tag </style>.
Contoh:
<head><style type="text/css" media=screen>p {color:blue;}</style></head>
Dalam contoh di atas semua
elemen <P> dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.
External CSS
Kode CSS external di tulis
dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu
memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan
cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk
semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS
dengan cara ini.
Contoh:
1.
Anda membuat satu file dengan notepad
atau teks editor lain, dan berinama, misalkan: style.css, lalu
tuliskan kode-kode css di dalam file tersebut.
2.p {font-family: arial; font-size: small;}
3.h1 {color: red; }
4.
Langkah kedua adalah memanggil file
style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini,
di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>Import CSS
Anda bisa juga meng-import CSS
ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css"; atau @import url("style.css");Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu
kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih
spesifik.
Misalkan dalam satu halaman
web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang
sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana
pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left
sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka
yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style
sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas,
kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
4.4
Apa sajakah contoh dari CSS?
Bagi kita yang sudah mengerti dan
juga memahami bahasa pemrograman (dalam hal ini misalnya adalah tentang CSS),
bisa jadi tidak akan merasa kesulitan untuk membuat kode yang akan digunakan
sebagai model atau variasi warna gradasi untuk background. Namun bagi kita yang
masih awam atau sama sekali belum mengenal bahasa pemrograman, bisa jadi hal
tersebut akan menjadi sebuah pekerjaan yang sangat sulit dan bahkan teramat
rumit. Sehingga untuk mempermudah Sobat blogger yang dalam membuat dan
menerapkan penggunaan warna gradasi sebagai warna latar atau background pada
setiap elemen halaman blog, maka berikut ini saya berikan beberapa contoh kode
CSS dengan berbagai kombinasi warna, dengan harapan agar nantinya dapat
mempermudah dalam penerapan teknik ini.
Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ff0000;
background: #ff0000;
background: -moz-linear-gradient( center top, white 20%,
#ff0000 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #ff0000) );
Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ff9900;
background: #ff9900;
background: -moz-linear-gradient( center top, white 20%,
#ff9900 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #ff9900) );
Kode CSS
height: 35px;
width: 100px;
border: 1px solid #ffff00;
background: #ffff00;
background: -moz-linear-gradient( center top, white 20%,
#ffff00 100% );
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #ffff00) );
4.5
Apa kekurangan dan kelebihan dari CSS?
Kelebihan
1. Memisahkan desain dengan konten
halaman web.
2. Mengatur desain seefisien mungkin.
3. Jika kita ingin mengubah suatu tema
halaman web, cukup modifikasi pada css saja.
4. Menghadirkan sesuatu yang tidak
dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih
ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak
halaman web.
7. Memisahkan
presentastion sebuah dokumen dari content document itu sendiri.
8. Mempermudah
dan Mempersingkat pembuatan dan pemeliharaan dokumen web
9.
Mempercepat proses rendering/pembacaan
HTML.
Kekurangan
1. Tampilan pada browser berbeda-beda.
2. Kadang juga terdapat browser yang
tidak support CSS (browser lama).
3. Harus tahu cara menggunakannya.
4. dibutuhkan waktu lebih lama dalam membuatnya.
5. Belum lagi ada bug/error dalam CSS.
BAB IV
PENUTUPAN
Semoga Makalah yang
cukup sederhana ini dapat bermanfaat untuk orang banyak.
DAFTAR PUSTAKA
No comments:
Post a Comment