Cara Menggunakan JQuery Autocomplete dan...
Transcript of Cara Menggunakan JQuery Autocomplete dan...
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Cara Menggunakan JQuery Autocomplete danDatepicker
Nadinadiimazinasigmailcom
AbstrakPenggunaan Jquery pada aplikasi ndash aplikasi berbasis web sudah banyak kita temukan
dimana ndash 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 ndash sama belajar
bagaimana cara menggunakan JQuery ldquoAutoCompleterdquo dan rdquoDatePickerrdquo
Kata Kuncipemrograman php Teknologi Informasi JQuery
PendahuluanSebelum kita memulai menerapkan jquery ldquoautocompleterdquo dan rdquodatepickerrdquo alangkah
baiknya kita mengetahui fungsi dari jquery ldquoautocompleterdquo dan rdquodatepickerrdquo 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
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Pembahasan
1 Buatlah sebuah project atau site baru pada tools dreamweaver kemudian buatlah
file baru lalu simpan file tersebut dengan nama ldquoindexphprdquo
2 Kemudian buat sebuah folder bernama jquery lalu copy kan file ldquojquery-
1102jsrdquo ldquojquery-ui-1104customrdquo dan ldquojquery-ui-1104customminrdquo
kedalam folder tersebut jika ada versi yang lebih baru lebih disarankan
untuk download jquery lihat tutorial yang berjudul ldquoNadi -Cara_Menjalankan _JQUERY
UI_diserver_localrdquo
Lihat gambar dibawah ini
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
3 Kemudian buat kembali sebuah folder yang bernama css kemudian copy kan
folder ldquoimagesrdquo dan file ldquojquery-ui-1104customcssrdquo ldquojquery-ui-
1104custommincssrdquo kedalam folder css Seperti pada gambar dibawah ini
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
4 Setelah itu ketikkan script dibawah ini kedalam file indexphp
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=utf-8 gtlttitlegtJquery AutoCompletelttitlegtltlink href=cssjquery-ui-1104customcss rel=stylesheettype=textcss gtltlink href=cssjquery-ui-1104custommincssrel=stylesheet type=textcss gt
ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customjsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customminjsgtltscriptgtltheadgt
ltbodygtltbodygtlthtmlgtfungsi ltlink href=nama-foldernama-filecss rel=stylesheet type=textcss gt untuk menyisipkan file
bertypecss kedalam file ldquoindexphprdquo
fungsi ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgt untuk menyisipkan filebertypejs atau javascript kedalam file ldquoindexphprdquo
5 Kemudian ketikkan script dibawah ini dan letakkan di antara ltbodygt ketikkankode disini ltbodygt ltform id=form1 name=form1 method=post action=gtlttable width=360 border=1 align=center style=
border06F 1px solid border-collapsecollapsegtlttr align=center bgcolor=0066FF style=colorfffgtlttd colspan=3gtLatihan ampquotAutoCompleteampquot dan
ampquotDatePickerampquotlttdgtlttrgtlttrgtlttd width=98gtKotalttdgtlttd width=3gtlttdgtlttd width=237gtltinput name=kota type=text id=kota
size=40placeholder=Masukkan Nama Kota gtlttdgtlttrgtlttrgt
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
lttdgtTanggallttdgtlttdgtlttdgtlttdgtltinput type=text name=tanggal id=tanggal
placeholder=Masukkan Tanggal gtlttdgtlttrgtlttrgtlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttdgtltinput type=submit name=button id=button
value=Submit gtlttdgtlttrgt
lttablegtltformgt
6 Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkanhttplocalhostnama-folderindexphp maka tampilan nya akan seperti gambardibawah ini
7 Nah sekarang waktunya kita menyisipkan script javascript kedalam file
indexphp sisipkan script dibawah ini kedalam ltheadgt ltheadgt
ltscriptgt$(function()
var variabelKota = [AcehBandar LampungBandungCiamisCianjurDepokBogorJakarta
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Pembahasan
1 Buatlah sebuah project atau site baru pada tools dreamweaver kemudian buatlah
file baru lalu simpan file tersebut dengan nama ldquoindexphprdquo
2 Kemudian buat sebuah folder bernama jquery lalu copy kan file ldquojquery-
1102jsrdquo ldquojquery-ui-1104customrdquo dan ldquojquery-ui-1104customminrdquo
kedalam folder tersebut jika ada versi yang lebih baru lebih disarankan
untuk download jquery lihat tutorial yang berjudul ldquoNadi -Cara_Menjalankan _JQUERY
UI_diserver_localrdquo
Lihat gambar dibawah ini
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
3 Kemudian buat kembali sebuah folder yang bernama css kemudian copy kan
folder ldquoimagesrdquo dan file ldquojquery-ui-1104customcssrdquo ldquojquery-ui-
1104custommincssrdquo kedalam folder css Seperti pada gambar dibawah ini
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
4 Setelah itu ketikkan script dibawah ini kedalam file indexphp
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=utf-8 gtlttitlegtJquery AutoCompletelttitlegtltlink href=cssjquery-ui-1104customcss rel=stylesheettype=textcss gtltlink href=cssjquery-ui-1104custommincssrel=stylesheet type=textcss gt
ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customjsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customminjsgtltscriptgtltheadgt
ltbodygtltbodygtlthtmlgtfungsi ltlink href=nama-foldernama-filecss rel=stylesheet type=textcss gt untuk menyisipkan file
bertypecss kedalam file ldquoindexphprdquo
fungsi ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgt untuk menyisipkan filebertypejs atau javascript kedalam file ldquoindexphprdquo
5 Kemudian ketikkan script dibawah ini dan letakkan di antara ltbodygt ketikkankode disini ltbodygt ltform id=form1 name=form1 method=post action=gtlttable width=360 border=1 align=center style=
border06F 1px solid border-collapsecollapsegtlttr align=center bgcolor=0066FF style=colorfffgtlttd colspan=3gtLatihan ampquotAutoCompleteampquot dan
ampquotDatePickerampquotlttdgtlttrgtlttrgtlttd width=98gtKotalttdgtlttd width=3gtlttdgtlttd width=237gtltinput name=kota type=text id=kota
size=40placeholder=Masukkan Nama Kota gtlttdgtlttrgtlttrgt
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
lttdgtTanggallttdgtlttdgtlttdgtlttdgtltinput type=text name=tanggal id=tanggal
placeholder=Masukkan Tanggal gtlttdgtlttrgtlttrgtlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttdgtltinput type=submit name=button id=button
value=Submit gtlttdgtlttrgt
lttablegtltformgt
6 Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkanhttplocalhostnama-folderindexphp maka tampilan nya akan seperti gambardibawah ini
7 Nah sekarang waktunya kita menyisipkan script javascript kedalam file
indexphp sisipkan script dibawah ini kedalam ltheadgt ltheadgt
ltscriptgt$(function()
var variabelKota = [AcehBandar LampungBandungCiamisCianjurDepokBogorJakarta
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
3 Kemudian buat kembali sebuah folder yang bernama css kemudian copy kan
folder ldquoimagesrdquo dan file ldquojquery-ui-1104customcssrdquo ldquojquery-ui-
1104custommincssrdquo kedalam folder css Seperti pada gambar dibawah ini
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
4 Setelah itu ketikkan script dibawah ini kedalam file indexphp
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=utf-8 gtlttitlegtJquery AutoCompletelttitlegtltlink href=cssjquery-ui-1104customcss rel=stylesheettype=textcss gtltlink href=cssjquery-ui-1104custommincssrel=stylesheet type=textcss gt
ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customjsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customminjsgtltscriptgtltheadgt
ltbodygtltbodygtlthtmlgtfungsi ltlink href=nama-foldernama-filecss rel=stylesheet type=textcss gt untuk menyisipkan file
bertypecss kedalam file ldquoindexphprdquo
fungsi ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgt untuk menyisipkan filebertypejs atau javascript kedalam file ldquoindexphprdquo
5 Kemudian ketikkan script dibawah ini dan letakkan di antara ltbodygt ketikkankode disini ltbodygt ltform id=form1 name=form1 method=post action=gtlttable width=360 border=1 align=center style=
border06F 1px solid border-collapsecollapsegtlttr align=center bgcolor=0066FF style=colorfffgtlttd colspan=3gtLatihan ampquotAutoCompleteampquot dan
ampquotDatePickerampquotlttdgtlttrgtlttrgtlttd width=98gtKotalttdgtlttd width=3gtlttdgtlttd width=237gtltinput name=kota type=text id=kota
size=40placeholder=Masukkan Nama Kota gtlttdgtlttrgtlttrgt
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
lttdgtTanggallttdgtlttdgtlttdgtlttdgtltinput type=text name=tanggal id=tanggal
placeholder=Masukkan Tanggal gtlttdgtlttrgtlttrgtlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttdgtltinput type=submit name=button id=button
value=Submit gtlttdgtlttrgt
lttablegtltformgt
6 Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkanhttplocalhostnama-folderindexphp maka tampilan nya akan seperti gambardibawah ini
7 Nah sekarang waktunya kita menyisipkan script javascript kedalam file
indexphp sisipkan script dibawah ini kedalam ltheadgt ltheadgt
ltscriptgt$(function()
var variabelKota = [AcehBandar LampungBandungCiamisCianjurDepokBogorJakarta
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
4 Setelah itu ketikkan script dibawah ini kedalam file indexphp
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalENhttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgtlthtml xmlns=httpwwww3org1999xhtmlgtltheadgtltmeta http-equiv=Content-Type content=texthtml charset=utf-8 gtlttitlegtJquery AutoCompletelttitlegtltlink href=cssjquery-ui-1104customcss rel=stylesheettype=textcss gtltlink href=cssjquery-ui-1104custommincssrel=stylesheet type=textcss gt
ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customjsgtltscriptgtltscript type=textjavascript src=jqueryjquery-ui-1104customminjsgtltscriptgtltheadgt
ltbodygtltbodygtlthtmlgtfungsi ltlink href=nama-foldernama-filecss rel=stylesheet type=textcss gt untuk menyisipkan file
bertypecss kedalam file ldquoindexphprdquo
fungsi ltscript type=textjavascript src=jqueryjquery-1102jsgtltscriptgt untuk menyisipkan filebertypejs atau javascript kedalam file ldquoindexphprdquo
5 Kemudian ketikkan script dibawah ini dan letakkan di antara ltbodygt ketikkankode disini ltbodygt ltform id=form1 name=form1 method=post action=gtlttable width=360 border=1 align=center style=
border06F 1px solid border-collapsecollapsegtlttr align=center bgcolor=0066FF style=colorfffgtlttd colspan=3gtLatihan ampquotAutoCompleteampquot dan
ampquotDatePickerampquotlttdgtlttrgtlttrgtlttd width=98gtKotalttdgtlttd width=3gtlttdgtlttd width=237gtltinput name=kota type=text id=kota
size=40placeholder=Masukkan Nama Kota gtlttdgtlttrgtlttrgt
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
lttdgtTanggallttdgtlttdgtlttdgtlttdgtltinput type=text name=tanggal id=tanggal
placeholder=Masukkan Tanggal gtlttdgtlttrgtlttrgtlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttdgtltinput type=submit name=button id=button
value=Submit gtlttdgtlttrgt
lttablegtltformgt
6 Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkanhttplocalhostnama-folderindexphp maka tampilan nya akan seperti gambardibawah ini
7 Nah sekarang waktunya kita menyisipkan script javascript kedalam file
indexphp sisipkan script dibawah ini kedalam ltheadgt ltheadgt
ltscriptgt$(function()
var variabelKota = [AcehBandar LampungBandungCiamisCianjurDepokBogorJakarta
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
lttdgtTanggallttdgtlttdgtlttdgtlttdgtltinput type=text name=tanggal id=tanggal
placeholder=Masukkan Tanggal gtlttdgtlttrgtlttrgtlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttdgtltinput type=submit name=button id=button
value=Submit gtlttdgtlttrgt
lttablegtltformgt
6 Jika sesuai maka jalankan file tersebut di browser kalian lalu ketikkanhttplocalhostnama-folderindexphp maka tampilan nya akan seperti gambardibawah ini
7 Nah sekarang waktunya kita menyisipkan script javascript kedalam file
indexphp sisipkan script dibawah ini kedalam ltheadgt ltheadgt
ltscriptgt$(function()
var variabelKota = [AcehBandar LampungBandungCiamisCianjurDepokBogorJakarta
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
TangerangBekasiMedanPalembangJogjakartaJambiSemarangDenpasarJayapuraMakassarAmbonLampungBukit tinggiMadura
]$( kota )autocomplete(
source variabelKota)
)ltscriptgt
ltscriptgt$(function()
$( tanggal )datepicker())ltscriptgt
8 Jika sukses maka hasil nya seperti pada gambar dibawah ini
Hasil tampilan untuk Jquery ldquoAutoCompleterdquo
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
Hasil Tampilan Jquery ldquoDate Pickerrdquo
PenutupKesimpulan dari artikel diatas bertujuan agar nanti si pembaca dapat menerapkan fungsi
dari fitur ndash fitur diatas sehingga dapat membantu dalam pembuatan dan pengerjaan
sebuah website ataupun aplikasi berbasis web
Referensi
httpsjqueryuicom
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer
Lisensi DokumenCopyright copy 2008-2014 ilmutiorgSeluruh dokumen di ilmutiorg 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 setiapdokumen Tidak diperbolehkan melakukan penulisan ulang kecuali mendapatkan ijin terlebih dahulu dari ilmutiorg
BiografiLulus 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 PTFormcase Industries dan
aktif sebagai web base programmer di Cnplus Computer (wwwcnplusbiz)
Facebookcom httpswwwfacebookcomnadiimazinasi
Twittercom httpstwittercomnadi_imazinasi
Plusgooglecom httpsplusgooglecom104521597026029479453posts
Linkedincom httpwwwlinkedincompubnadi-imazinasi898293b0
Create PDF with GO2PDF for free if you wish to remove this line click here to buy Virtual PDF Printer