Senin, 21 Mei 2018

Belajar jQuery : Menetapkan Nilai dan Value Pada Element


Codins - Untuk tutorial kali ini saya akan menulis tentang cara untuk set value atau nilai pada suatu element menggunakan jquery. Tutorial ini adalah tutorial lanjutan dari Belajar jQuery : Mendapatkan Nilai Dari Element, sehingga anda lebih baik untuk membaca tutorial sebelumnya sebelum membaca artikel ini. 

Set Value Dengan jQuery

Set value atau menetapkan nilai pada jquery sebenarnya kebalikan dari get value atau mendapatkan nilai pada jquery. Method yang digunakan pada set value juga sama dengan yang ada di get value, yaitu text(), html(), dan val(). Untuk itu saya akan memberi dua contoh saja, yaitu text() dan val().

Set Value jQuery Dengan Method text()

Untuk mencoba set value dengan jquery, langkah pertama tentu membuat file html terlebih dahulu, buatlah file html bernama setvalue.html pada folder anda, kemudian isikan sintaks dibawah ini kedalam file tersebut : 

setvalue.html

Penjelasan sintaks : 
  • $("#data").text('Saya adalah text yang di-set ke tag p dengan id data'); : disini adalah proses set value, pertama kita menggunakan selector untuk memiliki tag p dengan id data, kemudian kita set value menggunakan method text('nilai yang akan ditentukan');
Setelah itu bukalah file tersebut, maka akan tampak seperti pada gambar dibawah ini :

Set Value jQuery Dengan Method val()

Untuk membuat set value dengan method val, kita akan membuat sebuah inputan dengan tipe teks. Untuk itu silakan copy sintaks dibawah ini :


Penjelasan sintaks diatas :

  • $("#nama").val('Gundul Pringis'); : kita menset value berisi Gundul Pringis ke dalam inputan dengan id nama
  • apabila button diklik maka otomatis inputan akan terisi
Kemudian klik button set nama, maka akan terisi secara otomatis seperti dibawah ini : 


Terimakasih telah memabca artikel berjudul Belajar jQuery : Menetapkan Nilai dan Value Pada Element. Semoga bermanfaat!

Minggu, 20 Mei 2018

Belajar jQuery : Mendapatkan Nilai Dari Element


Codins - Kembali lagi ke tutorial jQuery, setelah pada tutorial sebelumnya kita mengenal callback function, kali ini kita akan belajar car mendapatkan nilai dari sebuah element di jquery. Mendapatkan nilai atau get value akan sangat berguna dalam membuat aplikasi web, misal kita memiliki form dan ingin mendapatkan inputan dari form tersebut kita bisa menggunakan fitur get value dari jquery.

Get Value jQuery

Ada beberapa function bawaan dari jQuery untuk mengambil atau mendapatkan nilai dari suatu element pada halaman html. Beberapa function tersebut diantaranya adalah : 
  • text() : mendapatkan nilai teks pada elemen html
  • html() : mendapatkan nilai elemen pada html
  • val() : mendapatkan nilai value dari elemen html, biasanya berupa inputan dalam form
  • attr() : mendapatkan nilai dari suatu atribut pada elemen html
Dengan function bawaan diatas kita bisa dengan mudah mendapatkan nilai dari suatu elemen html. Kita akan mencoba satu persatu function diatas. Untuk membuatnya cukup mudah, kita buat terlebih dulu file html dengan nama getdata.html kemudian ikuti langkah berikut.

Mendapatkan Nilai Dengan text()

getdata.html

Penjelasan sintaks diatas :

  • <p class="teks"> Saya adalah... </p> : kita akan mendapatkan nilai ( isi dari ) dari tag p dengan class teks
  • <button id="ambilteks"> : membuat button untuk melakukan event pengambilan teks
  • var teks = $('.teks').text(); : membuat variabel teks yang berisi selector untuk mengambil nilai pada tag p dengan class teks, materi variabel javascript bisa dibaca disini
  • alert(teks) : menampilkan popup berisi nilai yang diambil dari tag p dengan class teks
Setelah itu coba untuk membuka file tersebut, maka ketika kita klik button ambil teks akan muncul pop up seperti pada gambar dibawah :

Mendapatkan Nilai Dengan html()

Method mendapatkan nilai dengan html() sebenarnya sama persis dengan method text(), sintaksnya pun tidak jauh berbeda berikut sintaksnya : 


Ketika kita coba jalankan sintaks diatas, maka akan tampil seperti gambar dibawah ini : 

Mendapatkan Nilai Dengan val()

Untuk mendapatkan nilai dengan method val caranya tidak terlalu sulit, pertama kita akan membuat form untuk menerima inputan, form ini saya ambil dari tutorial javascript sebelumnya di Membuat Validasi Form Dengan Javascript.



Penjelasan sintaks diatas :

  • <input type="text" id="nama" ... : disini kita membuat inputan dengan id nama, perlu diingat jika kita ingin menggunakan selector pada id maka digunakan # sebaliknya jika attributnya class maka menggunakan titik .
  • var nama = $('#nama').val() : untuk mendapatkan nilai dari inputan dengan id nama, kita hanya menggunakan function .val()
  • alert : menampilkan data yang ditampung pada variabel nama dan nim
Kita akan coba jalankan sintaks diatas, maka akan tampil seperti screenshot dibawah :

Kemudian kita isikan form tersebut seperti pada gambar diatas, lalu kita klik button tambah data, maka akan menampilkan pesan pop up seperti pada screenshot dibawah ini : 

Mendapatkan Nilai Dengan attr()

Terakhir kita akan mencoba untuk mendapatkan nilai menggunakan function attr(), untuk itu silakan jalankan sintaks dibawah ini : 


Penjelasan sintaks diatas :

  • <input type="number" ... : membuat inputan dengan tipe angka (number)
  • var telepon = $("#telepon").attr('type') : mengambil nilai atribut type dari inputan dengan id telepon
  • alert(telepon) : menampilkan nilai atribut tipe
Setelah itu kita akan mencoba menjalankan sintaks diatas, ketika kita menekan tombol klik bukan angka yang kita masukan yang tampil, tetapi akan tampil number. Ini karena nilai yang kita ambil adalah nilai dari atribut type, bukan dari nilai inputan.

Saya rasa cukup sampai disini dulu tutorial kali ini, semoga Belajar jQuery : Mendapatkan Nilai Dari Element ini bermanfaat bagi anda dan saya tentunya.

Sabtu, 19 Mei 2018

Belajar jQuery : Callback Function dan Cara Menggunakannya


Codins - Sebelumnya kita telah belajar mengenai effect pada jquery yang bisa anda baca kembali pada artikel berjudul Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya. Berikutnya kita akan belajar mengenai callback function pada jquery.

Secara singkat callback function pada jquery bisa diartikan sebagai function yang dieksekusi setelah sebuah effect selesai dijalankan. Misal kita akan membuat efek slideUp pada sebuah kotak, ketika efek pada kotak tersebut selesai dijalankan, maka berikutnya jquery akan menjalankan function yang sudah kita tentukan, ini dinamakan sebagai callback function.

Membuat Callback Function jQuery

Untuk membuat sebuah callback function pada jquery caranya cukup mudah, pertama buat sebuah file bernama callback.html kemudian anda isikan sintaks dibawah kedalam file tersebut : 

callback.html

Penjelasan sintaks diatas :

  • kita akan menampilkan gambar setelah kita menjalankan efek slideUp pada kotak berwarna biru
  • kita buat class gambar kemudian isikan css display : none untuk menyembunyikan gambar
  • setelah itu gunakan selector jquery untuk memilih button dengan id tombolshow, kemudian kita berikan event click pada tombol tersebut
  • selanjutnya kita berikan efek slideDown pada div class kotak, setelah efek dijalankan kita akan menampilkan tag img dengan class gambar


$('.kotak').slideDown(800,function(){
$('.gambar').show();
});
Pada sintaks yang saya garis bawahi diatas, jika kita ingin menggunakan callback function maka cara penulisannya adalah

$('.kotak').namaEfek(waktu dalam milisecond, function(){
//function yang akan dijalankan, misal menampilkan gambar
$('.gambar').show();
});
Jika anda berhasil maka hasilnya akan seperti berikut ini :

See the Pen bMoKRL by Memem (@inoorsetyo) on CodePen.



Sampai disini terlebih dulu tutorial berjudul Belajar jQuery : Callback Function dan Cara Menggunakannya. Semoga bermanfaat, terimakasih!

Jumat, 18 Mei 2018

Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya


Codins - Sebelumnya kita telah mempelajari event pada jquery yang bisa anda baca kembali pada halaman Belajar jQuery : Event jQuery dan Contoh Penggunaanya. Pada artikel belajar jquery kali ini saya akan membuat artikel untuk mempelajari Effect pada jquery beserta contoh penggunaanya. Effect pada jquery sangat berguna untuk memberikan tampilan yang interaktif kepada user, penggunaanya juga mudah.

Effect Pada jQuery

Effect pada jquery ada banyak macamnya, anda bisa membaca effects jquery pada halaman resminya di : Effects Jquery. Beberapa effect tersebut diantaranya adalah : 
  • hide() : effect untuk menyembunyikan element
  • show() : effect untuk menampilkan element
  • toggle() : effect untuk menampilkan dan menyembuyikan element
  • fadeIn() : effect untuk menampilkan element dengan efek memudar
  • fadeOut() : effect untuk menyembunyikan element dengan efek memudar
  • fadeToggle : effect untuk menampilkan dan menyembuyikan element dengan efek memudar
  • slideDown() : effect untuk menampilkan element dengan efek slide down
  • slideUp() : effect untuk menampilkan element dengan efek slide
  • animate() : effect untuk membuat efek animasi pada element

Penggunaan Effect Pada jQuery

Untuk bahasan kedua tutorial ini kita akan membuat contoh penggunaan effect pada jquery. Disini saya akan membuat effect untuk menampilkan kota dengan efek slideDown dan slideUp. Pertama buatlah file html baru bernama effect.html kemudian isikan sintaks dibawah kedalam file tersebut : 

effect.html

Penjelasan sintaks diatas :

  • kita akan menyembunyikan terlebih dahulu kotak kita dengan css display:none
  • membuat tiga tombol yang berguna untuk menampilkan, menyembunyikan, dan menampilkan atau menyembunyikan, untuk id dari tombol bisa anda lihat sesuai sintaks diatas
  • kemudian kita buat event click pada tombol, tombol pertama adalah tombol untuk menampilkan kotak dengan nama #tombolshow
  • tombol kedua adalah tombol untuk menyembunyikan kotak dengan nama #tombolhide
  • tombol ketiga adalah tombol untuk menyembunyikan dan menampilkan kotak dengan nama #tomboltoggle serta effect slideToggle()
Kemudian cobalah untuk membuka file effect.html menggunakan browser yang anda gunakan. Jika berhasil maka akan tampil seperti berikut :

See the Pen MGEXez by Memem (@inoorsetyo) on CodePen.


Sampai disini dulu tutorial yang saya buat untuk Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya. Semoga bisa bermanfaat bagi anda.

Kamis, 17 Mei 2018

Belajar jQuery : Event jQuery dan Contoh Penggunaanya


Codins - Setelah kita belajar tentang Selector pada jQuery, kita akan melanjutkan pembelajaran dengan mengenal event pada jquery serta contoh penggunaanya. Seperti Event pada javascript, event di jquery juga merupakan suatu method atau aksi yang dijalankan pada jquery. Untuk itu jika anda sudah memahami event pada javascript, maka untuk memahami event di jquery juga akan menjadi lebih mudah.

Event Pada jQuery

Seperti javascript, ada beberapa event yang dimiliki jQuery, beberapa diantaranya adalah click(), mouseleave(), mouseenter(), dan masih banyak lagi. Kita akan mencoba membuat salah satu event pada jQuery, buatlah file html baru bernama event.html kemudian isikan sintaks dibawah ini : 

event.html

Penjelasan sintaks :
  • Kita membuat terlebih dulu button dengan id tombol, kemudian kita lanjutkan dengan membuat div denagn class kotak
  • Selanjutnya kita pilih id tombol menggunakan selector kemudian berikan event mouseenter dan akan menampilkan div dengan class kotak
  • event mouseleave akan menyembunyikan div dengan class kotak melalui $('.kotak').hide();
Sampai disini terlebih dulu artikel saya mengenai Belajar jQuery : Event jQuery dan Contoh Penggunaanya. Semoga bisa bermanfaat bagi anda.

Rabu, 16 Mei 2018

Belajar jQuery : Pengertian dan Contoh Penggunaan Selector


Codins - Sebelumnya kita telah mengenal jquery serta cara penggunaanya pada artikel yang berjudul Belajar jQuery : Mengenal jQuery dan Cara Menggunakannya. Kali ini kita akan belajar dasar jquery yakni selector. Selector pada jQuery berguna untuk mencari sebuah element pada html dengan atribut tertentu atau bahkan semua element html. Dengan jquery selector kita bisa memanipulasi element html sesuka kita.

Pengertian jQuery Selector

Seperti yang sudah saya jelaskan, jquery selector berguna untuk memanipulasi element html. Misalnya ketika kita ingin mengubah sebuah element dengan tag p dengan atribut id teks atau dalam html bisa dituliskan <p id="teks"> kita bisa menggunakan selector untuk memanipulasi isi yang ada di tag tersebut. Untuk membuktikannya kita akan membuat file html baru, pertama buatlah folder dengan nama belajarjq, lalu buat file html baru bernama selector.html.

Setelah anda membuat folder dan file seperti pada gambar diatas, langkah berikutnya adalah menyalin sintaks dibawah ini : 

selector.html

Penjelasan sintaks diatas :

  • <script type="text/javascript" src="jquery-2.2.4.min.js"></scriptdisini saya memanggil file jquery-2.2.4.min.js yang ada pada folder belajarjq
  • <button id="tombol">Tampil/Sembunyi</button: membuat button dengan id tombol
  • <button id="warna">Beri Warna</button> : membuat button dengan id warna
  • <div class="box"> : membuat div dengan id box
  • $( document ).ready(function() berguna untuk memberitahukan jika jquery dijalankan ketika halaman sudah dimuat 100% atau keseluruhan halaman telah berhasil dimuat.
  • $("#tombol").click(function()  : proses selector terjadi disini, jquery memilih tag button dengan atribut id tombol dan akan menyembunyikan tag div apabila diklik
  • $("#warna").click(function() : jquery selector mencari tag html dengan id warna lalu ketika diklik akan mengubah tag p dengan class teks menjadi berwarna biru
Jika sudah kita akan mencoba untuk mengakses file html yang sudah kita buat, buka dengan menggunakan browser yang anda gunakan. Maka akan muncul seperti gambar dibawah ini : 


Apabila kita menekan tombol beri warna, maka warna teks akan berubah menjadi biru sesuai pada sintaks diatas.


Begitu juga dengan tombol tampil / sembunyi, apabila kita tekan tombol tersebut maka tulisan yang ada di tag div dengan id tombol akan menghilang, dan sebaliknya jika kita tekan kembali tombolnya maka tulisan akan muncul,

Oke untuk tutorial berjudul Belajar jQuery : Pengertian dan Contoh Penggunaan Selector sampai disini terlebih dulu, jika anda masih tidak memahami apa yang saya tulis, silakan untuk bertanya melalui form komentar dibawah.

Selasa, 15 Mei 2018

Belajar jQuery : Mengenal jQuery dan Cara Menggunakannya


Codins - Apa itu jquery? dan apa kegunaan jquery? Menurut salah satu tetua yang saya tau (wikipedia) jquery adalah sebuah library javascript lintas platform yang didesain untuk menyederhanakan client side scripting pada HTML. jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.

Kelebihan Menggunakan jQuery

jQuery memiliki kelebihan dibandingkan javascript pada umumnya, jika kita ingin mendapatkan nilai dari suatu element, pada javascript kita akan menggunakan function getElementById, atau seperti pada yang jelaskan pada Pengertian dan Contoh Penggunaan Javascript. Contohnya seperti berikut : 
var data = document.getElementById("hasil");
Sedangkan jika kita menggunakan jQuery, penulisan kode menjadi lebih singkat, contohnya seperti berikut ini :
var data = $("#hasil"); 
Selain itu ada beberapa kelebihan lain yang dimiliki jQuery, diantaranya adalah :

  • Mudah dipahami penulisan kodenya
  • Ringan untuk digunakan
  • Penulisan sintaks yang simpel
  • Gratis
  • Memiliki banyak pengguna dan dukungan

 Cara Menggunakan jQuery

Untuk menggunakan jQuery tidaklah sesulit penulisan kodenya, pertama download terlebih dahulu file jQuery di link berikut : 
Setelah anda mendownload file diatas, buatlah sebuah folder baru dan copykan file jquery.js kedalam folder yang anda buat, kemudian buatlah sebuah file html baru, lalu isikan sintaks dibawah ini kedalam file html yang telah anda buat : 


Dengan ini kita telah berhasil menggunakan jquery di file html kita, lalu bagaimana jika kita tidak memiliki file jquery tetapi tetap ingin menggunakannya? Caranya cukup mudah, ada beberapa cdn yang disediakan oleh beberapa perusahaan besar seperti google, microsoft, dan lainnya, atau anda bisa lihat pada list berikut :
Disini saya akan menggunakan google cdn sebagai contoh, buka kembali file html yang sudah anda buat, kemudian pada tag <script dan atribut src, ganti menjadi seperti sintaks dibawah ini : 



Sampai disini kita telah mengenal apa itu jquery dan cara menggunakannya. Untuk itu artikel berjudul Belajar jQuery : Mengenal jQuery dan Cara Menggunakannya, saya sudahi sampai disini, selanjutnya kita akan belajar jquery basic. Semoga bermanfaat!

Senin, 14 Mei 2018

Membuat Validasi Form Dengan Javascript


Codins - Terimakasih telah melanjutkan untuk membaca tutorial lanjutan dari tutorial sebelumnya yang berjudul Pengertian dan Contoh Penggunaan Event Pada Javascript. Pada artikel ini saya akan menulis sebuah tutorial untuk Membuat Validasi Form Dengan Javascript. Validasi adalah hal yang penting sebelum kita menginputkan data karena dengan validasi kita akan memastikan bila data yang diinputkan benar-benar sesuai dengan ketentuan yang kita tetapkan. Kali ini kita akan membuat validasi form sederhana menggunakan javascript.

Membuat Validasi Form Sederhana Dengan Javascript

Disini kita akan membuat sebuah form untuk menginputkan data mahasiswa dengan inputan berupa input text dan select. User akan ditampilkan form untuk mengisi nama mahasiswa, nomer induk mahasiswa, dan program studi mahasiswa. Untuk itu pertama buatlah sebuah file html baru dengan nama form.html, kemudian isikan sintaks dibawah ini kedalam file tersebut : 

form.html

Penjelasan Sintaks Diatas : 

  • Kita membuat event validasi pada onSubmit form yang kita buat, ini berarti ketika user mensubmit form akan dilakukan event function validasi
  • var nama : kita menerima inputan dari form kita dengan inputan ber id nama
  • var nim : menerima inputan dari form yang memiliki id nim
  • var prodi : menerima inputan dari form yang memiliki id prodi
  • var value_prodi : mengambil nilai (value) dari inputan bertipe select
  • if (nama!="".... : ini adalah proses validasi dengan logika if, jika nama tidak kosong, dan nim tidak kosong, dan value_prodi tidak sama dengan 0 maka akan return true atau menjalankan submit, jika ada data yang kosong akan memunculkan alert cek form, jangan ada yang kosong!
Jika kita menjalankan file diatas, maka akan tampil seperti screenshot yang ada dibawah ini :

Lalu isikan nama serta nim mahasiswa pada form diatas, untuk prodi coba untuk kita kosongi saja, saya akan mengisi seperti pada screenshot dibawah ini : 

Lalu klik tambah data, maka akan muncul pesan jangan kosongi form karena kita belum memilih program studi.


Kali ini cobalah untuk mengisi semua form diatas, ketika kita mengeklik tambah data maka proses validasi akan berhasil dengan mengembalikan nilai true. Semoga tutorial berjudul Membuat Validasi Form Dengan Javascript ini bermanfaat bagi anda. Terimakasih telah membaca!