Jurusan : Manajemen Informatika Tugas Sistem Informasi ... · PDF fileSemakin menjamurnya...
36
Nama : Sudarminingsih NIM : 3093311029 Jurusan : Manajemen Informatika Tugas Sistem Informasi Berbasis WEB 1. HTML5 HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Saat ini ditulis kita banyak menjumpai aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah mulai migrasi ke standard web HTML5. Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut <object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
Transcript of Jurusan : Manajemen Informatika Tugas Sistem Informasi ... · PDF fileSemakin menjamurnya...
Nama : Sudarminingsih
NIM : 3093311029
Jurusan : Manajemen Informatika
Tugas Sistem Informasi Berbasis WEB
1. HTML5
HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide
Web Consortium) sebagai revisi dari standard HTML. Saat ini ditulis kita banyak menjumpai
aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah mulai migrasi
ke standard web HTML5.
Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi
web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi
web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan
Silverlight.
Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini
susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang
berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada
halaman web kita harus ditulis sebagai berikut
<object type="application/x-shockwave-flash" width="400" height="220"
wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
Kalau sebelumnya kita menggunakan plugin Flash dari Adobe untuk menjalankan
aplikasi web pada browser maka lain carany bila kita menggunakan Silverlight. Teknologi
Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web
dapat dilihat pada HTML dibawah ini
<object width="300" height="300" data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>
HTML5 mencoba untuk menyederhanakan kompleksitas penggunaan media video
dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup
menulis script untuk menjalankan file video sebagai berikut
<video src=tutorialku.mp4>
</video>
Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh
bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4.
Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.
Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support
HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah,
pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat
web sebagai berikut
http://html5test.com
Document Type
penggunaan tag HTML, dimana aturan penulisan selalu diawali dengan Doctype dan Header.
Penggunaan tipe dokumen atau Doctype pada HTML5 sangatlah sederhana, cukup membuat
seperti dibawah ini:
<!DOCTYPE html>
Berbeda pada penggunaan beberapa variasi doctype pada HTML4 atau XHTML1, seperti
dibawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Berikut adalah contoh kode lengkap dari penggunaan HTML5
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML5</title>
</head>
<body>
<h1>Heading dalam HTML5</h1>
</body>
</html>
Penggunaan Header
Bagian ini merupakan cara penggunaan header pada HTML5, seperti penggunaan meta, script,
dan link css.
Penggunaan Meta
<meta charset="UTF-8">
Memanggil javascript
<script src="nama_file.js"></script>
Memanggil CSS
<link rel="stylesheet" href="nama_file.css">
Mendefinisikan default bahasa
<html lang="en"">
Penggunaan Tag Audio pada HTML5
Salah satu dari kelebihan HTML5 adalah memainkan file audio dan video tanpa memerlukan
plugin khusus seperti Quicktime, Realtime, atau Adobe Flash Player dengan penggunaan tag
yang sederhana seperti dibawah ini:
<audio src=”namafilemusik.mp3″ controls></audio>
Hasil yang didapatkan setelah ditest pada beberapa browser, tentunya tampilan pada setiap
browser akan berbeda, sebagai contoh pada tutorial ini ditest pada Opera dan Google Chrome
Setiap browser mempunyai keterbatasan dukungan dalam memainkan beberapa format audio,
diantaranya
Browser .mp3 .wav .ogg
Firefox X X
Opera X X
Safari X X
Internet Explorer X X
Google Chrome X X X
Penggunaan Tag Video pada HTML5
Memainkan video pada website sangatlah mudah dengan menggunakan tag video pada HTML5,
berbeda pada versi sebelumnya HTML4 dimana mempunyai beberapa kekurangan, misalnya
ketika kita akan memasang video, kita memerlukan plugin atau flash player untuk memutar
video tersebut seperti Flow Player.
Pada HTML5 Anda cukup menggunakan tag seperti dibawah ini sebagai tag dasar:
<video src=”nama_file_video.mp4″ controls width=”480″ height=”360″></video>
Sehingga dapat dihasilkan tampilan seperti dibawah ini jika dijalankan pada web browser seperti
Google Chrome
Berikut merupakan table dari beberapa format video yang didukung oleh beberapa browser
Browser
H.264 /
AAC /
MP4
WebM Vorbis /
Ogg
Firefox X X
Opera X X
Google Chrome X X X
Safari X
Internet Explorer X X
2. Css3
Satu atau dua tahun yang lalu mungkin anda pernah mendengar CSS versi 3 telah keluar,
meskipun saat itu masih beta tapi ini menjadi kabar yang menggembirakan, karena CSS3 tidak
akan dirilis jika tidak membawa banyak sekali fitur-fitur baru di dalamnya, namun saat itu baru
sedikit browser internet yang mendukung CSS3 ini. Browser yang mensupport CSS baru Safari
v.3, namun sekarang Firefox pada versi ke 3.6 sudah mendukung CSS3. Bagi anda yang
mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang
tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari
penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu
banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang
SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout,
CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.
Baik, disini penulis akan jabarkan fitur apa saja yang baru dalam CSS3, CSS3 memiliki fasilitas
untuk shadow dari suatu div layout, fitur transparansi, gradien warna pada border, warna pada
text yang diseleksi, fitur skala memperkecil atau memperbesar layout, kolom pada text, dan fitur
gradien pada background.
Terdapat perbedaan penamaan style antara safari dan chrome dengan firefox, penulis akan
jelaskan nanti.
Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris
-moz-box-shadow: #585858 3px 3px 4px;
moz ini digunakan untuk browser firefox
-webkit-box-shadow: #585858 3px 3px 4px;
dan webkit digunakan untuk browser chrome serta safari
contoh penggunaan drop shadow adalah seperti di bawah ini ?
RGBA (Transparency)
background-color: rgba(218, 227, 240, .3);
rgb 218,227,240 menghasilkan warna abu-abu namun lebih keputih, dan .3 ini menjelaskan
penggunaan transparansi 30%.
contohnya adalah seperti ini ?
Multiple Border Color
-moz-border-bottom-colors: #0101DF #5858FA #8181F7 #A9A9F5 #CECEF6 #E0E0F8
#EFEFFB #fff;
moz-border memungkinkan satu div memiliki banyak border yang berlapis?
hasilnya adalah seperti ini
Select Text Color
p.selection::-moz-selection {
background: #2E9AFE; /* Firefox */
color: #fff;
}
-moz-selection terjadi ketika textnya di seleksi? anda bisa lihat hasilnya seperti ini, silahkan
textnya anda blok dengan menggunakan mouse.
Scale
-moz-transform: scale(1.05);
moz-transform digunakan untuk firefox, dan scale(1.05) menghasilkan perbesaran 1,05 dari
ukuran aslinya.
-webkit-transform: scale(1.05);
begitu juga dengan webkit-transform yang digunakan untuk browser safari dan chrome.
Text Column
-moz-column-count:3;
menjadikan text memiliki 3 kolom.
-moz-column-rule: solid 1px black;
dan memiliki garis tengah.
-moz-column-gap: 30px;
gap disini sama seperti padding, atau jarak antar text.
Gradient
background: -moz-linear-gradient(-45deg, #2E9AFE,#0404B4 );
penggunaan moz-linear-gradien dengan 45derajat mulai dari biru tua sampai biru muda, hasilnya
adalah seperti ini :
Setelah berkenalan dengan CSS3, [enulis akan jelaskan bagaimana menggunakan CSS lebih
lanjut dalam membuat style website maupun layout website, pada Tutorial CSS selanjutnya.
Selamat Mencoba.
Belajar CSS3 Dasar, Tutorial CSS3
CSS3 sudah lama muncul tapi masih banyak browser yang tidak support dengan ini, disini kita akan
belajar tentang CSS3 yang sering saya gunakan untuk desain-desain website.
Kasus pertama :
Pada gambar diatas terlihat sebuat text yang seakan-akan tenggelam, bagaimana cara
membuatnya? gampang! nih:
text-shadow: 3px 5px 5px #fff;
penjelasannya :
Kasus kedua :
Gambar di atas pada bagian box terdapat bayangan yang keren! bagaimana caranya?
-webkit-box-shadow: 0px 0px 10px #555555;
-moz-box-shadow:0px 0px 10px #555555;
box-shadow:0px 0px 10px #555555;
Kasus ketiga :
Bagaimana kalau membuat seperti gambar diatas? box rounded corner
-moz-border-radius: 15px;
-webkit-border-radius:15px;
border-radius: 15px;
Kasus keempat :
Gambar diatas boxnya miring?
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
transform: rotate(7.5deg);
filter:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /*
IE6,IE7 */
M11=0.9914448613738104, M12=-
0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104, M12=-
0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,
sizingMethod='auto expand')"; /* IE8 */
zoom: 1;
Efek Gradiasi Menggunakan CSS3 (Tanpa Gambar)
Salah satu manfaat dari adanya declarator ini adalah kita bisa menghemat bandwidth server,
karena kita tidak lagi membutuhkan gambar sebagai background dari sebuah element di web atau
blog kita.
Pada CSS3, value dan properties CSS nya terbagi menjadi 3 bagian untuk menjalankan perintah
di tiga jenis browser yang berbeda, yaitu; Webkit, Firefox, dan Internet Explorer
Webkit Browser
Kode dibawah ini nantinya akan menjalankan perintah di Chrome, Safari, Rockmelt, dll. Dalam
contoh dibawah, saya akan memberitahukan cara membuat gradasi dari atas (top) ke bawah
(bottom).
background: -webkit-gradient(linear, left top, left bottom, from(#ccc),
to(#000));
Mozilla Firefox
Browser ini mulai mendukung CSS3 mulai dari versi 3.6. Jadi kalau Firefox yang Anda gunakan
belum pada versi itu atau diatasnya, maka kode ini tidak akan bisa dijalankan.
background: -moz-linear-gradient(top, #ccc, #000);
Internet Explorer
Perintah “filter” hanya akan dibaca oleh Internet Explorer.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',
endColorstr='#000000');
Di dalam CSS3 ada banyak sekali properties yang bisa kita gunakan untuk membuat tampilan
sebuah website menjadi elegan tanpa harus menggunakan gambar (image) sebagai background-
element.
Cara Membuat Menu Footer Dengan CSS3
1. Login ke Blogger
2. Pilih tab Design > Edit HTML
3. Cari kode ]]></b:skin>
4. Setelah ketemu, copy kode script di bawah ini dan pastekan tepat di
atas ]]></b:skin>
#menu_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 40px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed;
text-shadow: 1px 1px 1px #000000;
width: 960px;
}
/* border curves */
#menu_footer {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#smenu_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#menu_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
padding:5px 8px 3px 14px;
float:left;
background:url("http://4.bp.blogspot.com/-
3mNzW5lhuNc/T3gGyxQm9zI/AAAAAAAAAFI/a1Mugnbpnsw/s1600/home.p
ng") 13px 5px no-repeat;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("http://3.bp.blogspot.com/-
2fJv567iCbo/T3gGz_ytb8I/AAAAAAAAAFQ/pWL3htZzogw/s1600/home_hov
er.png") 13px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#menu_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#menu_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}
5. Kemudian cari kode </body>
6. Copy kode di bawah ini dan pastekan tepat di atas </body>
<div id='menu_footer'>
<ul id='footer_menu'>
<!-- Begin Footer Menu -->
<li class='imgmenu'><a href='#'><span>Home</span></a></li>
<!-- This Item is an Image, the "span" is hidden via CSS -->
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Friends</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Testimonials</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<!-- End Social Icons -->
<ul id='social_icons'>
<!-- Social Icons -->
<!-- The span is the text appearing on hover, use the tooltip class in the
link -->
<li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-
NygdyapXfJA/T3gG1lJB1-
I/AAAAAAAAAFY/UwPnES_pLAg/s1600/twitter.png'/><span>Twitter</span>
</a></li>
<li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-
2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.pn
g'/><span>Digg</span></a></li>
<li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-
Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-
E2Xy1Mvv0/s1600/flickr.png'/><span>Flickr</span></a></li>
<li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-
l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook
.png'/><span>Facebook</span></a></li>
</ul>
</div>
7. Setelah selesai simpan template sobat dan lihat hasilnya
3. JQuery
jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi
antara JavaScript dan HTML. Pustaka ini dirilis pada Januari2006 di BarCamp NYC oleh John
Resig dan berlisensi ganda di bawah MIT dan GPL.
Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka [1]
.
Microsoft awalnya mengadopsinya dalam Visual Studio [2]
untuk digunakan dalam ASP.NET
AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam
kerangka Web Run-Time mereka.
Pengenalan 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
Tutorial jQuery Ajax Bagian 1
Pada tulisan sebelumnya mengenai Pengenalan jQuery, kita telah mengenal apa
dan bagaimana jquery. Saatnya kita mempelajari lebih lanjut bagaimana membuat
aplikasi Ajax menggunakan jQuery. Library jQuery mempunyai fungsi-fungsi
khusus untuk pembuatan Ajax.
Dengan menggunakan jQuery, kita dapat melakukan request data TXT, HTML,
XML, PHP bahkan JSON dari server menggunakan metode GET atau POST.
Salah satu fungsi yang disediakan oleh jQuery yang berkaitan dengan Ajax adalah
fungsi load(). Fungsiload() berfungsi untuk mengambil data dari server dan
menempatkannya ke dalam elemen HTML.
Sintaks :
$(selector).load(url,data,callback)
Parameter url adalah alamat atau nama file di server yang akan kita ambil atau panggil
Parameter data bersifat opsional, adalah pasangan key dan value yang dikirim ke server.
Parameter callback bersifat opsional, adalah fungsi yang dieksekusi jika data diambil.
Contoh :
Misal kita punya file data.txt, yang isinya :
Hai ini adalah konten dari file data.txt
Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh
kode contohload.html
1 <html>
2 <head>
3 <script type="text/javascript" src="jquery.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $("#tombol").click(function(){
7 $('#teks').load('data.txt');
8 });
9
10 });
11 </script>
12 </head>
13 <body>
14 <div id="teks">
15
16 </div>
17 <button id="tombol" type="button">Klik Ini</button>
18 </body>
19 </html>
view plain | print | ?
Dari contoh di atas, pertama-tama kita ambil file jquery.js dapat kamu download
di www.jquery.com atau di sini. Apabila kita mengklik tombol Klik Ini, maka akan
segera menjalankan fungsi load file data.txt dan memasukkannya ke dalam
innerHTML <div id=”teks”>.
Sekarang mari kita lihat contoh jika memanggil file berupa PHP dan mengirim kan
beberapa data atau parameter untuk diolah di sisi server.
contohload2.html
1 <html>
2 <head>
3 <script type="text/javascript" src="jquery.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $("#tombol").click(function(){
7 $('#teks').load("data.php","nama=desrizal&[email protected]",beritahu());
8 });
9 });
10
11 function beritahu(){
12 alert("sudah diambil datanya");
13 }
14 </script>
15 </head>
16 <body>
17 <div id="teks">
18
19 </div>
20 <button id="tombol" type="button">Click Me</button>
21 </body>
22 </html>
view plain | print | ?
Pada contoh di atas kita melakukan request ke server untuk memanggil file
PHP data.php dan mengirimkan parameter-parameter dan nilainya dengan metode
GET. Kemudian meng-eksekusi fungsi beritahu().
Berikut kode PHP data.php
1 <?php
2 echo "Anda mengirim parameter nama dengan nilai : <b>".$_GET['nama']."</b> <p>";
3 echo "Email : <b>".$_GET['email']."</b>.";
4 ?>
view plain | print | ?
Tutorial jQuery Ajax Bagian 2 (Input, Update, Delete, Animasi Loading)
Bagaimana menginput, mengupdate, mendelete data di database, kemudian bagaimana caranya
menampilkan animasi loading ajax menggunakan jquery. Di sini kita akan mempelajari
fungsi jQuery.ajax()
Sekarang mari kita mulai membuat kode-kodenya
jQuery.ajax()
Sintaks :
$.ajax(settingan)
Fungsi : untuk melakukan asynchronous HTTP (Ajax) request.
Berikut adalah beberapa settingan penting untuk fungsi $.ajax()
type
Yaitu tipe metode request data, yaitu POST atau GET, defaultnya adalah GET
url
String yang merupakan URL atau file di server, tujuan kita mengirim request
data
Data yang ingin kita kirim ke server untuk diproses, cara
penulisannya "data1=value1&data2=value2"
cache
Bisa bernilai true atau false. Jika bernilai false, data yang direquest tidak akan dicache oleh
browser
success
Fungsi yang kita jalankan jika request telah sukses dijalankan
Untuk settingan lainnya bisa dilihat di http://api.jquery.com/category/ajax/
Contoh :
$.ajax({
url: "proses.php",
data: "nama=desrizal&[email protected]&sex=Male",
cache: false,
success: function(msg){
$("#teks").html(msg);
}
});
Aplikasi Input, Update dan Delete
Sekarang mari kita buat aplikasi sederhana menggunakan jquery dan PHP untuk pemrosesan di
sisi server. Pada contoh-contoh yang akan saya berikan, kita akan banyak menggunakan fungsi-
fungsi jquery seperti val(), html(), show(), hide() dan lainnya. Untuk tutorial mengenai fungsi
tersebut, silahkan baca di pengenalan jquery. Pada contoh berikut kita akan membuat aplikasi
data karyawan
Struktur Tabel datakaryawan di MySQL
Pertama mari kita buat dulu tabel datakaryawan di database MySQL
CREATE TABLE `datakaryawan` (
`nik` varchar(10) NOT NULL,
`nama` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`alamat` varchar(200) NOT NULL,
PRIMARY KEY (`nik`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `datakaryawan` (`nik`, `nama`, `email`, `alamat`) VALUES
('FI786578', 'Bagaskara Antara', '[email protected]', 'Jakarta'),
('FI885245', 'Budix', '[email protected]', 'USA'),
('FI889456', 'Desrizal', '[email protected]', 'Tembagapura');
Kode HTML dan jQuery
Mari kita mulai membuat kode HTML dan jQuery, buat file html, kita beri nama index.html.
1 <html>
2 <head><title>Ajax jQuery by Desrizal</title>
3 <script type="text/javascript" src="jquery-1.4.3.min.js">
4 </script>
5 <script>
6 var nik;
7 var nama;
8 var email;
9 var alamat;
10 var datanya;
11 $(document).ready(function(){
12 //meloading option NIK dari database
13 $("#nik").load("proses.php","op=ambiloption");
14
15 //jika ada event onchange ambil data dari database
16 $("#nik").change(function(){
17 //ambil nilai nik dari form
18 nik = $("#nik").val();
19
20 //tampilkan status loading dan animasinya
21 $("#status").html("Loading...");
22 $("#loading").show();
23
24 //lakukan pengiriman dan pengambilan data
25 $.ajax({
26 url: "proses.php",
27 data: "op=ambildata&nik="+nik,
28 cache: false,
29 success: function(msg){
30 //karna di server pembatas setiap data adalah |
31 //maka kita split dan akan membentuk array
32 data = msg.split("|");
33
34 //masukkan ke masing-masing textfield
35 $("#nama").val(data[0]);
36 $("#email").val(data[1]);
37 $("#alamat").val(data[2]);
38 //hilangkan status dan animasi loading
39 $("#status").html("");
40 $("#loading").hide();
41 }
42 });
43 });
44
45 //jika tombol update diclick
46 $("#tupdate").click(function(){
47 //ambil nilai-nilai dari masing-masing input
48 nik = $("#nik").val();
49 if(nik=="Pilih NIK"){
50 alert("Pilih dulu NIK");
51 exit();
52 }
53 nama = $("#nama").val();
54 email = $("#email").val();
55 alamat = $("#alamat").val();
56 datanya = "&nik="+nik+"&nama="+nama+"&email="+email;
57 datanya = datanya+"&alamat="+alamat;
58 //tampilkan status Updating dan animasinya
59 $("#status").html("Lagi diupdate...");
60 $("#loading").show();
61 $.ajax({
62 url: "proses.php",
63 data: "op=update"+datanya,
64 cache: false,
65 success: function(msg){
66 if(msg=="sukses"){
67 $("#status").html("Update Berhasil...");
68 }else{
69 $("#status").html("ERROR..");
70 }
71 $("#loading").hide();
72 }
73 });
74 });
75
76 //jika tombol DEL diklik
77 $("#tdelete").click(function(){
78 nik = $("#nik").val();
79 if(nik=="Pilih NIK"){
80 alert("Pilih dulu NIK");
81 exit();
82 }
83 $("#status").html("Lagi didelete...");
84 $("#loading").show();
85 $.ajax({
86 url: "proses.php",
87 data: "op=delete&nik="+nik,
88 cache: false,
89 success: function(msg){
90 if(msg=="sukses"){
91 $("#status").html("Delete Berhasil...");
92 }else{
93 $("#status").html("ERROR..");
94 }
95 $("#nama").val("");
96 $("#email").val("");
97 $("#alamat").val("");
98 $("#loading").hide();
99 $("#nik").load("proses.php","op=ambiloption");
100 }
101 });
102 });
103
104 //jika link Tambah Data Karyawan diklik
105 $("#formtambah").click(function(){
106 $("#formnik").show();
107 $("#nik2").val("");
108 $("#nama").val("");
109 $("#email").val("");
110 $("#alamat").val("");
111 });
112
113 //jika tombol TAMBAH diklik
114 $("#ttambah").click(function(){
115 //ambil nilai-nilai dari masing-masing input
116 nik = $("#nik2").val();
117 if(nik==""){
118 alert("NIK belum diisi\nKlik Tambah Data Karyawan");
119 exit();
120 }
121 nama = $("#nama").val();
122 email = $("#email").val();
123 alamat = $("#alamat").val();
124 datanya = "&nik="+nik+"&nama="+nama+"&email="+email;
125 datanya = datanya+"&alamat="+alamat;
126 $("#status").html("Lagi ditambah...");
127 $("#loading").show();
128 $.ajax({
129 url: "proses.php",
130 data: "op=tambah"+datanya,
131 cache: false,
132 success: function(msg){
133 if(msg=="sukses"){
134 $("#status").html("Berhasil ditambah...");
135 }else{
136 $("#status").html("ERROR..");
137 }
138 $("#loading").hide();
139 $("#nik").load("proses.php","op=ambiloption");
140 $("#formnik").hide();
141 $("#nik2").val("");
142 }
143 });
144 });
145 });
146 </script>
147 </head>
148 <body>
149 Nomor Induk Karyawan :
150 <select id="nik"></select>
151 <br>
152 <a id="formtambah" style="cursor:pointer;color:red">
153 <u>Tambah Data Karyawan</u></a>
154 <p style="display:none" id="formnik">
155 NIK :<br>
156 <input type="text" id="nik2">
157 </p>
158 <p>
159 Nama :<br>
160 <input type="text" id="nama"><p>
161 Email :<br>
162 <input type="text" id="email"><p>
163 Alamat :<br>
164 <input type="text" id="alamat" size="30"><p>
165 <button id="tupdate">UPDATE</button>
166 <button id="tdelete">DEL</button>
167 <button id="ttambah">TAMBAH</button>
168 <br>
169 <span id="status"></span>
170 <img src="loading.gif" id="loading" style="display:none">
171 </body>
172 </html>
view plain | print | ?
Kode PHP, Pemrosesan Di Sisi Server
Pada kode jquery di atas, ajax melakukan request ke file proses.php
1 <?php
2 mysql_connect("localhost","root","");
3 mysql_select_db("test");
4
5 $op = $_GET['op'];
6
7 if($op == "ambiloption"){
8 $option = mysql_query("SELECT nik FROM datakaryawan");
9 echo "<option>Pilih NIK</option>\n";
10 while($op = mysql_fetch_array($option)){
11 echo "<option>".$op['nik']."</option>\n";
12 }
13 }else if($op == "ambildata"){
14 $nik = $_GET['nik'];
15 $data = mysql_query("SELECT * FROM datakaryawan WHERE nik='$nik'");
16 $d = mysql_fetch_array($data);
17 echo $d['nama']."|".$d['email']."|".$d['alamat'];
18 }else if($op == "update"){
19 $nik = $_GET['nik'];
20 $nama = htmlspecialchars($_GET['nama']);
21 $email = htmlspecialchars($_GET['email']);
22 $alamat = htmlspecialchars($_GET['alamat']);
23 $update = mysql_query("UPDATE datakaryawan
24 SET nama='$nama',
25 email='$email',
26 alamat='$alamat'
27 WHERE nik='$nik'");
28 if($update){
29 echo "sukses";
30 }else{
31 echo "error";
32 }
33 }else if($op == "delete"){
34 $nik = $_GET['nik'];
35 $del = mysql_query("DELETE FROM datakaryawan WHERE nik='$nik'");
36 if($del){
37 echo "sukses";
38 }else{
39 echo "error";
40 }
41 }else if($op == "tambah"){
42 $nik = $_GET['nik'];
43 $nama = htmlspecialchars($_GET['nama']);
44 $email = htmlspecialchars($_GET['email']);
45 $alamat = htmlspecialchars($_GET['alamat']);
46 $tambah = mysql_query("INSERT INTO datakaryawan
47 VALUES('$nik','$nama','$email','$alamat')");
48 if($tambah){
49 echo "sukses";
50 }else{
51 echo "ERROR";
52 }
53 }
54 ?>
view plain | print | ?
Teritorial jQuery
JQuery merupakan suatu framework(library) Javascript yang menekankan bagaimana interaksi
antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig.
Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki
kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web
menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya
adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing,
event handling, animating, and Ajax interactions for rapid web development. jQuery is
designed to change the way that you write JavaScript.”
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT
License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan
hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery
memungkinkan penambahan fungsionalitas dalam bentukplugin. Saat ini tersedia ribuan plugin
yang dapat diperoleh secara gratis di internet.
Apa yang bisa dilakukan dengan JQuery?
1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman,
harus mengikuti aturan Document Object Model (DOM)dan pengaksesan harus secara spesifik
menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari
halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah
(bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak
terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan
mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu,
yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita
harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan
solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser
dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari
halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar,
mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal
tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau.
Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat
mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang
dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling
seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada
Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi
semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat
ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam
berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya.
Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri
menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah
bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika
terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari
yang namanyaAJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet
jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang
berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam
penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya
tarik tersendiri buat para pengembang web untuk menggunakan JQuery.
Download JQuery
Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di
alamathttp://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis
yaitu minified danuncompressed. Minified jika kita ingin menggunakannya saja dalam website
kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta
mengembangkan code jQuery.
Contoh Sederhana JQuery
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script
type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); });
}); </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html>
