Icara Menggunakan JQuery AutoComplete Dan DatePicker

Cara Menggunakan
Datepicker.
JQuery
Autocomplete
dan
Nadi
nadi.imazinasi@gmail.com
Abstrak
Penggunaan Jquery pada aplikasi aplikasi berbasis web sudah banyak kita temukan
dimana mana. Para developer pun sudah tidak asing lagi dan sudah terbiasa
menggunakannya, banyak pekerjaan yang menjadi lebih mudah dalam pembuatan suatu
aplikasi karena menggunakan jquery. Nah, untuk itu kita akan sama sama belajar
bagaimana cara menggunakan JQuery AutoComplete dan DatePicker
Kata Kunci:pemrograman, php, Teknologi Informasi, JQuery
Pendahuluan
Sebelum kita memulai menerapkan jquery autocomplete dan datepicker alangkah
baiknya kita mengetahui fungsi dari jquery autocomplete dan datepicker tersebut.
Fitur Autocomplete adalah suatu fitur dari jQuery UI yang akan memberikan saran
pencarian suatu data dalam elemen textbox HTML. Sedangkan fungsi dari Datepicker
sendiri untuk menginput sebuah tanggal yang lebih user friendly. Untuk itu mari kita
mulai bagaimana cara menggunakan ketiga fungsi dari jquery tersebut.
Lisensi Dokumen:
Copyright 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Create PDF with GO2PDF for free, if you wish to remove this line, click here to buy Virtual PDF Printer
Pembahasan
1. Buatlah sebuah project atau site baru pada tools dreamweaver, kemudian buatlah
file baru lalu simpan file tersebut dengan nama index.php
2. Kemudian buat sebuah folder bernama jquery, lalu copy kan file jquery1.10.2.js ,
jquery-ui-1.10.4.custom
dan
jquery-ui-1.10.4.custom.min
kedalam folder tersebut , jika ada versi yang lebih baru lebih disarankan.
*untuk download jquery lihat tutorial
yang berjudul Nadi -Cara_Menjalankan _JQUERY
UI_diserver_local
Lihat gambar dibawah ini :
Lisensi Dokumen:
3. Kemudian buat kembali sebuah folder yang bernama css, kemudian copy kan
folder
images
dan
file
jquery-ui-1.10.4.custom.css
jquery-ui-
1.10.4.custom.min.css kedalam folder css. Seperti pada gambar dibawah ini :
Lisensi Dokumen:
4. Setelah itu ketikkan script dibawah ini kedalam file index.php :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Jquery AutoComplete</title>
<link href="css/jquery-ui-1.10.4.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/jquery-ui-1.10.4.custom.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/jquery1.10.2.js"></script>
<script type="text/javascript" src="jquery/jquery-ui1.10.4.custom.js"></script>
<script type="text/javascript" src="jquery/jquery-ui1.10.4.custom.min.js"></script>
</head>
<body>
</body>
</html>
*fungsi <link href="nama-folder/nama-file.css" rel="stylesheet" type="text/css" /> untuk menyisipkan file
bertype.css kedalam file index.php.
*fungsi <script type="text/javascript" src="jquery/jquery-1.10.2.js"></script> untuk menyisipkan file
bertype.js atau javascript kedalam file index.php.
5. Kemudian ketikkan script dibawah ini dan letakkan di antara <body> ketikkan
kode disini </body> :
<form id="form1" name="form1" method="post" action="">
<table width="360" border="1" align="center" style="
border:#06F 1px solid; border-collapse:collapse;">
<tr align="center" bgcolor="#0066FF" style="color:#fff;">
<td colspan="3">Latihan "AutoComplete" dan
"DatePicker&quot</td>
</tr>
<tr>
<td width="98">Kota</td>
<td width="3">:</td>
<td width="237"><input name="kota" type="text" id="kota"
size="40"placeholder="Masukkan Nama Kota" /></td>
</tr>
<tr>
Lisensi Dokumen:
<td>Tanggal</td>
<td>:</td>
<td><input type="text" name="tanggal" id="tanggal"
placeholder="Masukkan Tanggal" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="button" id="button"
value="Submit" /></td>
</tr>
</table>
</form>
6. Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkan
http://localhost/nama-folder/index.php maka tampilan nya akan seperti gambar
dibawah ini :
7. Nah, sekarang waktunya kita menyisipkan script javascript kedalam file

index.php. sisipkan script dibawah ini kedalam <head> </head> :
<script>
$(function() {
var variabelKota = [
"Aceh",
"Bandar Lampung",
"Bandung",
"Ciamis",
"Cianjur",
"Depok",
"Bogor",
"Jakarta",
Lisensi Dokumen:
"Tangerang",
"Bekasi",
"Medan",
"Palembang",
"Jogjakarta",
"Jambi",
"Semarang",
"Denpasar",
"Jayapura",
"Makassar",
"Ambon",
"Lampung",
"Bukit tinggi",
"Madura"
];
$( "#kota" ).autocomplete({
source: variabelKota
});
});
</script>
<script>
$(function() {
$( "#tanggal" ).datepicker();
});
</script>
8. Jika sukses maka hasil nya seperti pada gambar dibawah ini :
Hasil tampilan untuk Jquery AutoComplete
Lisensi Dokumen:
Hasil Tampilan Jquery Date Picker
Penutup
Kesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur fitur diatas, sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web.
Referensi
https://jqueryui.com/
Lisensi Dokumen:
Biografi
Lulus SMK pada tahun 2011 dari jurusan Rekayasa Perangkat Lunak
(RPL) di SMK YUPPENTEK-2 Curug, Tangerang dan sekarang sedang
menjalani kuliah S1 di STMIK Raharja. Menyukai bidang programming
seperti web based application dalam bahasa pemrograman seperti bahasa
Hypertext Multi Language (HTML), Cascading Style Sheet (CSS), Hypertext
Preprosesor (PHP) dan Javascript. Database application yang sering digunakan adalah
MySQL. Selain itu, tertarik juga pada design web templates menggunakan aplikasi
Adobe Photoshop. Saat ini bekerja sebagai IT Media di PT.Formcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (www.cnplus.biz).
Facebook.com
: https://www.facebook.com/nadi.imazinasi
Twitter.com
: https://twitter.com/nadi_imazinasi
Plus.google.com
: https://plus.google.com/104521597026029479453/posts
Linkedin.com
: http://www.linkedin.com/pub/nadi-imazinasi/89/829/3b0
Lisensi Dokumen:

Icara Menggunakan JQuery AutoComplete Dan DatePicker

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Icara Menggunakan JQuery AutoComplete Dan DatePicker

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Menggunakan

Kata Kunci:pemrograman, php, Teknologi Informasi, JQuery

yang berjudul Nadi -Cara_Menjalankan _JQUERY

Lihat gambar dibawah ini :

1.10.4.custom.min.css kedalam folder css. Seperti pada gambar dibawah ini :

4. Setelah itu ketikkan script dibawah ini kedalam file index.php :

7. Nah, sekarang waktunya kita menyisipkan script javascript kedalam file

Hasil tampilan untuk Jquery AutoComplete

Hasil Tampilan Jquery Date Picker

Anda mungkin juga menyukai