Pencarian Data Dengan Jquery

 

  1. Pengertian Jquery

jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalahkumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi Continue reading

Menampilkan dan Menyembunyikan Teks dengan Jquery

 

  1. Pengertian Jquery

jQuery adalah sebuah library JavaScript. Dalam duniapemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.JQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan Continue reading

Scroll Page Menggunakan Id

 

Pada umumnya suatu website terdiri dari lebih dari satu halaman. Misalnya index, about, gallery, contact dan lain-lain. Tapi mungkin anda pernah melihat suatu website yang hanya terdiri dari satu page/halaman saja. Website-website seperti ini biasanya cenderung panjang kebawah atau format halamannya scroll kebawah. Saat kita Continue reading

Membuat Validasi Dengan Jquery (Tanpa Plugin)

Oke teman-teman, sesuai dengan judul artikel kali ini , kita akan membuat form validasi dengan jquery tanpa menggunakan plugin . Validasi di butuhkan untuk mengecek sebuah inputan data , apakah data sudah diisi dengan benar atau belum. Pertama-tama buat folder dengan nama validasi . Kemudian Download file jquery di jquery.com . Kemudian simpanfile jquery ke dalam folder validasi . kemudian buat file dengan nama validasi_jquery.html . Continue reading

MEMBUAT TABEL DINAMIS DENGAN JQUERY DATA TABLE

 

Assalamualaikum Wr. Wb.

Alhamdulillah, kali ini Webhozz akan berbagi ilmu lagi. Kali ini kita akan belajar tentang JQuery. Dan disini kita akan belajar membuat tabel yang dinamis. Namanya adalah JQuery Datatable.

Datatable adalah sebuah plugin yang dibangun oleh JQuery yang sudah meliputi search, paging, hingga penomoran otomatis di tabel yang nanti kita buat. Makanya disini kita sebut tabel dinamis.

Mempelajari datatable ini sangat mudah. Kita tinggal download aja pluginnya. Dan pluginnya sudah lengkap dengan file css dan javascript. Jadi, kita hanya memanggil beberapa classnya aja. Untuk download filenya, bisa dengan mengunjungi website resminya disini (https://datatables.net/).

Jika kita menggunakan bahasa HTML maupun PHP, datatable tetap bisa digunakan.

Oke, langsung aja kita mulai ya.

  1. Pertama-tama, kita buat dulu file baru. Sebagai contoh databel.html. Seperti biasa, kita isi dulu dengan tag html awal.

2. Kemudian download file datatablenya pada website resminya (https://datatables.net/download/index). Jika sudah dibuka linknya, silahkan scroll ke bawah hingga ada pilihan downloadnya seperti gambar di bawah ini.

3. Jika sudah didownload, kemudian buka filenya pada direktori download. Selanjutnya silahkan klik kanan pilih Extract to DataTables. 

4. Copy folder hasil extract tadi ke dalam folder dimana kita menyimpan html tadi.

5. Selanjutnya, kita buka file HTML kita tadi. Kita isi pada tag <body></body>. Kita isi dengan perintah table.

Maka jadinya seperti ini.

6. Kemudian download file Jquery disini(https://jquery.com/download/), dan satukan file jquerynya jadi satu folder dengan html, seperti langkah no. 4.

7. Selanjutnya pada tag <head></head>, kita panggil file pendukung datatablenya yang berupa CSS dan JAVASCRIPT dari datatable dan jquery tadi.

<script type=”text/javascript” src=”jquery-3.2.1.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”DataTables/datatables.min.css”>

<script type=”text/javascript” src=”DataTables/datatables.min.js”></script>

8. Kemudian tambahkan script berikut ini di tag <head></head>, tepat di bawah pemanggilan file yang tadi.

<script type=”text/javascript”>

$(document).ready(function()

{

$(‘#myTable’).DataTable();

});

</script>

9. Selanjutnya pada tag <table></table>. Panggil fungsi datatable yang tadi pada tag <head></head> supaya tabelnya berubah. Seperti di bawah ini.

<table id=”myTable”>

10. Maka dari itu, jika semua disatukan maka tampilan kode secara keseluruhan.

Saat dijalankan di browser, maka tampilan tabelnya jadi seperti ini.

Nah, tampilan tabel yang kita buat tadi jadi lebih dinamis dan praktis. Tentunya sangat efisien dalam pencarian data.

 

Alhamdulillah untuk postingan kita kali ini. Silahkan mencoba dan semoga bermanfaat ya, Amin.

 

Wassalamualaikum Wr. Wb. 

Menggunakan JQuery Bx Slider

Assalamualaikum Wr. Wb.

Pada postingan kali ini, kita akan membahas tentang JQuery, lebih tepatnya pada salah satu fiturnya yaitu slider. Yang mana slider ini digunakan untuk berpindah slide yang berupa gambar dari satu gambar ke gambar yang lain.

Jquery, menyediakan banyak slider. Salah satunya adalah Bxslider ini. Yang mana Script kode dari Bxslider ini tidak lepas dari Jquery. Selain itu, tampilan Bxslider sangat responsive. Yang artinya tampilan slidernya bisa menyesuaikan ukuran berdasarkan layar perangkat yang mengakses website yang kita buat. Bukan hanya ukuran layar juga, tapi Bxslider juga bisa menyesuaikan ukurannya sendiri dengan tampilan CSS dan HTML yang sudah kita buat. Benar-benar fleksibel deh pokoknya.

Selain dari itu, Bxslider juga memiliki berbagai macam bentuk tema slide yang bisa kita pilih sendiri bahkan kita ubah sendiri. Untuk mempelajarinya juga tidak susah. Karena di tiap style atau tema slider yang kita mau sudah tersedia bentuk tema, bahkan ada beberapa script kode di tiap tema tersebut. Tinggal gunakan aja file CSSnya dan Jsnya beserta gambar kontrolnya, kemudian isi fungsinya. Maka dari itu, untuk mempelajari Bxslider ini tidaklah sulit.

Oke, mari kita mulai.

  1. Pertama, download dulu Jquerynya disini (http://jquery.com/).

2. Kemudian, buka web Bx slidernya klik aja disini http://bxslider.com/. Nanti akan tampil halaman seperti berikut.

3. Download aja file Bx slidernya, silahkan klik seperti tanda merah di bawah ini.

4. Extract aja filenya, copy foldernya dan satukan dalam sebuah folder. Bersamaan juga dengan file jquerynya. Disini saya buat folder namanya bx.

5. Pilih foto yang akan dipilih untuk jadi slidernya, masukkan dalam folder bx. Disini, gambarnya saya jadiin folder tersendiri biar rapi.

6. Buat file baru dalam format html, dan satukan dalam folder bx tadi. Simpan dengan nama index.html.

7. Buka index.html, kemudian buat script htmlnya. Selanjutnya pada tag <head></head> sisipkan perintah pemanggilan file JQuery dan Bxslider yang tadi kita download.

8. Selanjutnya, pada tag <head></head> di bawah pemanggilan Jquery dan Bx slidernya.Silakan sisipkan kode javascript berikut.

9. Kemudian pada tag <body></body>, sisipkan kode berikut untuk membuat daftar gambar yang nanti akan muncul.

10. Dan beginilah, hasil akhirnya.

 

Cara Membuat Input tanggal dengan Jquery UI DatePicker

Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Sedangkan Jquery UI Datepicker adalah plugin Jquery yang dapat dikonfigurasikan untuk menambahkan fungsi kalender ke halaman web. Untuk menambahkan nya di halaman web kita pertama kita harus mengunduh Jquery UI di halaman http://Jqueryui.com seperti gambar di bawah ini

Selanjutnya download versi Jquery yang diinginkan.

Ketikkan kode berikut, simpan dengan nama datepicker.html :

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.css”>

<script src=”jquery-ui-1.12.1.custom/external/jquery/jquery.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.js”></script>

<script src=”jquery-ui-1.12.1.custom/jquery-ui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”jquery-ui-1.12.1.custom/jquery-ui.theme.css”>

<script>

$(document).ready(function(){

$(“#tanggal”).datepicker({

 

})

})

</script>

</head>

<body>

Tanggal : <input type=”text” name=”tanggal” id=”tanggal”><!–fungsi id=tanggal untuk memanggil datepicker–>

</body>

</html>

 

Jika berhasil tampilanya akan seperti ini :

Selamat mencoba J

By Sriayu Windarti

SUBLIME TEXT 3, Aplikasi Web Editor Terbaik

Assalamualaikum Wr. Wb,

Alhamdulillah, kali ini bisa posting artikel lagi. Dan pada postingan ini saya akan membagi sedikit pengalaman pribadi dalam membuat halaman website. Yang mana dalam membuat website tersebut pasti tidak pernah lepas dari aplikasi web editor sebagai pendukungnya.

 

Sublime Text 3 merupakan aplikasi Web Editor yang saya pakai sampai saat ini. Yang mana aplikasi ini sangat ringan dan tidak ribet dalam penggunaannya. Desain warna tulisan kodingnya yang sangat interaktif beserta variasi warna yang menarik. Selain itu warna teks kodingnya juga bisa diganti warna temanya. Jadi dengan teks koding yang enak untuk dilihat bisa membuat banyak pengguna betah dalam proses koding. Itulah beberapa alasan yang tepat untuk membangun sebuah web.

Continue reading

Cara Memeriksa Apakah Pilihan Dalam Select Sudah Dipilih?

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai cara memeriksa apakah pilihan dalam select sudah dipilih pada jQuery. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz.

Secara prinsip kalian bisa membandingkan nilai pada select dengan nilai awal yang menyatakan pemakai belum Continue reading

Menampilkan Dan Menyembunyikan Elemen

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menampilkan dan menyembunyikan elemen dengan jQuery. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya  sobat Webhozz.

Berikut contoh script jQuery untuk menyembunyikan dan menampilkan sebuah elemen menggunakan show() dan Continue reading