Archive for November 2015

membuat event onEnter menggunakan jquery

08.12 Add Comment
Hallo blogger kali ini saya akan menjelaskan tentang cara membuat event on enter pada form jQuery. event on enter sendiri biasanya digunakan untuk pencarian, login, submit dll. faktor kemudahan membuat kebanyakan orang lebih memilih menekan enter daripada mengklik tombol. Seperti kita ketahui event pada keyboard jQuery hanya terdiri dari 3 yaitu

  •         Onkeyup
  •          Onkeypress
  •          Onkeydown

Baca juga menghilangkan attribute style dengan

form pencarian arifweb


Lalu muncul pertanyaan bagaimana cara untuk membuat event on enter ?
event onEnter sendiri sebenarnya sudah otomatis ada ketika anda menggunakan input type didalam <form> </form> ketika anda klik enter maka akan tersubmit ke arah action.nya.
Lansung saja saya akan menjelaskan kode html dan jQuerynya kuncinya adalah pada kode ASCII 13
<html>
<head>
<script src=”tempat jQuery.js” type=”text/javascript”> </script> //digunakan untuk mengambil file library jquery
<script>
$('#entar').keypress(function(e) {
    if (e.which == 13) { // e.which == 13 merupakan kode yang mendeteksi ketika anda   // menekan tombol enter di keyboard
      //letakan fungsi anda disini
alert(“berhasil”);
    }
  }); 
</script>
</head>
<body>
<input type=”text” id=” entar” name=”entar” >
</body>
</html>

Baca juga pengecekan secara berkala menggunakan jquery interval

sebenarnya banyak sekali jenis event yang ada pada jquery yang belum saya bahas satu persatu jika anda menemukan kesulitan pada event tertentu silahkan masukkan ke kolom komentar jika ada waktu akan segera saya jawab.

Cukup sekian tutorial saya kali ini apabila artikel ini bermanfaat da nada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih J

apa itu flag flagging table

06.50 2 Comments
Hallo blogger kali ini saya akan menjelaskan tentang apa itu flag atau flagging pada table database. sering kita dengar programmer / sistem analys database menggunakan istilah flag, apakah flag bendera yang ada di database ? tentu tidak tapi sebenarnya fungsinya hampir sama yaitu sebagai penanda .sebenarnya apa sih itu flag dan fungsinya lansung saja saya akan menjelasknnya.
apa itu flag ?

flag adalah field tambahan yang ada didalam table yang digunakan sebagai tanda. biasanya flag menggunakan type data int [1] / bit dan berisi angka 0 / 1 /2 dst.

fungsi flag ?

membedakan data pada sebuah tabel yang sama tanpa perlu membuat tabel baru tentu hal ini dapat menghemat tabel penggunaan space pada database.

manfaat ?
  • menghemat penggunaan tabel
  • lebih efektif dan efisien
  • meningkatkan performa aplikasi

contoh kasus ?
pada sebuah table memungkinkan memiliki 2 data yang berbeda. contohnya table mahasiswa berisi data mahasiswa seperti nim, nama, alamat, kelas. namun tidak semua mahasiswa memiliki data yang sama contoh mahasiswa ada yang aktif kuliah ada yang cuti apabila dibedakan ke 2 table yang berbeda akan menjadi pemborosan. disini kita dapat menggunakan flag dimana flag 1 merupakan mahasiswa aktif dan flag 0 merupakan mahasiswa yang sedang cuti kuliah.

Baca juga backup restore export database xampp



mungkin cukup sekian tutorial saya kali ini tentang apa itu flag di dalam tabel database. sebenarnya penggunaan flag harus diiringi dengan adanya dokumentasi karena seringkali kita lupa tentang field flag yang kita buat itu sebagai penanda apa jadi dokumentasi disini harus ada. apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)


check / uncheck checkbox menggunakan jQuery

check / uncheck checkbox menggunakan jQuery

19.17 Add Comment
Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara check maupun uncheck input type checkbox dengan menggunakan jQuery attr / prop. checkbox sendiri adalah tag dalam html yang digunakan untuk menentukan pilihan bisa lebih dari 1 (checklist) berbeda dengan radio button yang hanya diperbolehkan memilih salah satu. contoh penggunaanya untuk pemilihan data yang akan dihapus, pemilihan fitur yang dipilih dan masih banyak lagi. Check otomatis pada checkbox dengan jquery ini biasanya dilakukan ketika menjumpai kasus contoh check all ketika kita memilih satu persatu dari ribuan data maka akan memakan banyak waktu oleh karena itu diperlukan fitur checkall. Lansung saja saya akan mencontohkanya kepada anda dengan script berikut

Baca juga menghilangkan attribute style dengan jquery


Script html

<html>
<head>
<title>check / uncheck jquery </title>
<script type="text/javascript">
function check(){
if($(‘#id_check_box’).is('checked')){
$(‘#id_check_box’).attr(‘checked’, false); //untuk melakukan uncheck
alert("berhasil di uncheck");
}else{
$(‘#id_check_box’).attr(‘checked’, true); //untuk melakukan check
alert("berhasil di check");
}
}
</script>
</head>
<body>
<form>
<input type=”checkbox” id=”id_check_box” name=”cek”> Check
<button onclick="check()">klik disini </button> // tombol untuk mengubah check / uncheck
</form>
</body>
</html>

Script Jquery
menggunakan attr
<script type="text/javascript">
$(‘#id_check_box’).attr(‘checked’, true); untuk melakukan check
$(‘#id_check_box’).attr(‘checked’, false); untuk melakukan uncheck
</script>
menggunakan prop
<script type="text/javascript">
$(‘#id_check_box’).prop(‘checked’, true); untuk melakukan check
$(‘#id_check_box’).prop(‘checked’, false); untuk melakukan uncheck
</script>

Baca juga membuat event onenter menggunakan jquery


Seperti pada postingan sebelumnya saya telah menjelaskan tentang perbedaan antara fungsi / method attr dan prop. Silahkan anda memilih diantara kedua cara diatas mana yang cocok untuk kasus anda.


Cukup sekian postingan saya kali ini tentang cara check / uncheck checkbox menggunakan jQuery  apabila postingan ini bermanfaat da nada yang ingin ditanyakan silahkan masukkan kekolom komentar terima kasih J
perbedaan fungsi prop dan attr jQuery

perbedaan fungsi prop dan attr jQuery

09.49 Add Comment
Hallo blogger saya akan menjelaskan tentang perbedaan antara prop dan attr jQuery. Seperti kita ketahui bersama 2 fungsi ini merupakan method yang hampir mirip yaitu mengambil nilai. Lansung saja saya akan menjelaskanya secara singkat padat dan semoga jelas

Baca juga copy to clipboard menggunakan jquery

  • JQuery. Prop()

Digunakan untuk mengambil nilai property elemen

  • JQuery.attr()

Digunakan untuk mengambil nilai attribure sebuah elemen

Sebelum jQuery 1.6 metode attr() kadang-kadang mengambil nilai property ketika mengambil beberapa attribut. Hal itu menyebabkan ketidakkonsistenan lalu pada jQuery 1.6 munculah metode .prop() yang menyediakan cara untuk mengambil nilai properti, sedangkan attr() mengambil nilai atribut.

Atribut merupakan informasi tambahan elemen HTML  anda dapat mengatur atribut untuk HTML dan mendefinisikanya saat menulis kode .
Contoh

<input id="id" type ="type" value="value">

Baca juga menghilangkan attribute style dengan jquery


Disini dapat dilihat bahwa atribut dari tag HTML diatas adalah id, type, value

Property merupakan representasi dari atribut di HTML DOM. Ketika browser mengurai kode HTML anda, sesuai dengan DOM node akan dibuat yang merupakan objek sehingga memiliki siffat.

Dalam kasus di atas, ketika browser yang membuat input, sifat lain seperti align, alt, autofocus, BaseURl diperiksa dan sebagianya akan ditambahkan

Karena attr() memberikan nilai elemen seperti mendefinisikan di html pada saat pertama halaman diload. Anda disarankan menggunakan prop() untuk mendapatkan nilai-nilai dari elemen yang dimodifikasi melalui javascript / jquery, karena akan memberikan nilai asli saat ini.


Cukup sekian postingan saya kali ini tentang perbedaan fungsi prop dan attr jQuery apabila postingan kali ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih J

penjumlahan dengan menggunakan jquery parseint

12.01 1 Comment
Hallo blogger kali ini saya akan menjelaskan tentang bagaimana melakukan penjumlahan di jquery / javascript menggunakan fungsi parseint(). fungsi parseint sendiri adalah fungsi yang ada di javascript untuk mengubah variable apapun (String, double, float, char dll) menjadi int. Seperti kita ketahui bersama bahwa tanda plus (+) di jquery / javascript merupakan tanda yang digunakan untuk menggabungkan 2 String contoh

Baca juga perbedaan fungsi prop dan attr jquery

Var a = 1;
Var b = 2;
Var gabung = a+b;
Alert (gabung); // hanya akan menampilkan 12 karena menggabungkan variable a dan b

dari contoh diatas membuktikan bahwa tanda + merupakan tanda untuk menggabungkan 2 String
Seperti kita ketahui bersama bahwa variable di jquery / javascript untuk deklarasi variable int, string, double dll hanya menggunakan deklarasi var berbeda dengan bahasa lain seperti java yang dapat membedakan jenis variable pada saat deklarasinya

Nah untuk kasus tertentu kita memerlukan penjumlahan 2 buah variable. Seperti kita ketahui bersama bahwa berbeda dengan java yang variable.nya terbagi menjadi String, int, char dll jquery hanya menggunakan var untuk deklarasi variablenya lansung saja saya akan menjelaskan bagaimana caranya.

Var a = 1;
Var b = 2;
Var gabung = parseint(a)+parseint(b);
Alert (gabung); // akan menghasilkan 3 karena merupakan penjumlahan dari variable a dan b


Baca juga membuat event onenter menggunakan jquery

cukup mudah bukan sebenarnya penjumlahan sendiri dapat dilakukan dengan php atau bahasa pemrogramman lain namun jika suatu ketika kita diharuskan menggunakan javascript untuk menjumlahkan dua atau lebih variable anda dapat menggunakan tutorial ini

mungkin cukup dekian penjelasan saya kali ini tentang penjumlahan dengan menggunakan jquery parseint apabila artikel ini bermanfaat da nada yang ditanyakan silahkan masukkan ke kolom komentar terima kasih
perbedaan mysql fetch array, assoc, row

perbedaan mysql fetch array, assoc, row

08.17 2 Comments
Hallo blogger kali ini saya akan menjelaskan tentang perbedaan antara mysql_fetch_array(),  mysql_fetch_row  dan mysql_fetch_assoc(). Fungsi diatas biasanya digunakan ketika kita ingin menampilkan hasil dari mysql_query. Contoh $data = mysql_query(“select * from mahasiswa”); dari data mysql query tersebut belum dapat lansung ditampilkan oleh karena itu diperlukan fungsi mysql_fetch_array atau mysql_fetch row atau mysql_fetch_assoc. perbedaan antara kedua fungsi ini adalah

Baca juga type data tinyblob blob mediumblob


Mysql_fetch_array menghasilkan bentuk array berupa numeric atau string (nama field) contoh
Array {
$data[0] = 1,
$data[nim] = 1,
$data[1] = Arif,
$data[nama] = Arif,
}

Sedangkan mysql_fetch_assoc menghasilkan bentuk array hanya string (nama field) contoh

Array {
$data[nim] = 1,
$data[nama] = Arif,
}


Sedangkan mysql_fetch_row menghasilkan bentuk array hanya berupa numeric contoh

Array {
$data[0] = 1,
$data[1] = Arif,
}

dari ketiga fungsi diatas anda dapat memanfaatkanya sesuai dengan kebutuhan masing-masing.
untuk menampilkan hasil array dari ketiga fungsi adalah menggunakan fungsi berikut

<?php
mysql_connect('localhost','root','');
mysql_select_db('nama_database');
mysql_query('select * from nama_tabel');
$i = 0;
while ($row = mysql_fetch_array($sql)){
 echo "row ".i." = ".$row['0'];
$i++;
}

dari ketiga fungsi diatas yang menghasilkan hasil paling optimal ialah mysql_fethch_row disusul oleh mysql_fetch_assoc dan yang terakhir adalah mysql_fetch_array dan mysql_fetch_object


  1. mysql_fetch_row() : 16.665 detik
  2. mysql_fetch_assoc() : 16.965 detik
  3. mysql_fetch_array() : 18.303 detik
  4. mysql_fetch_object() : 35.827 detik

selain ketiga fungsi diatas sebenarnya masih ada satu lagi yaitu mysql_fetch_object untuk menampilkan isinya dapat menggunakan script berikut ini

<?php
mysql_connect('localhost','root','');
mysql_select_db('nama_database');
mysql_query('select * from nama_tabel');
$i = 0;
while ($row = mysql_fetch_object($sql)){
 echo "row ".i." = ".$row->field;
$i++;
}

Baca juga cara import database di xampp mysql

Cukup sekian artikel saya kali ini apabila artikel ini yang membahas tentang perbedaan mysql_fetch_array, mysql_fetch_assoc, mysql_fetch_row bermanfaat da nada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)

validasi form dengan jquery validate

validasi form dengan jquery validate

08.12 Add Comment
hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara membuat validasi form dengan jquery validate. validasi adalah penggunaan rule / aturan dalam sebuah form, validasi disini biasanya berupa maxlength, minlength, number, required, email dll. dalam sebuah website yang baik penggunaan validasi sangat dibutuhkan karena jika tidak digunakan dapat berakibat fatal. contohya kita ingin user memasukkan angka namun tidak ada validasi sehingga user dapat salah menginputkan huruf didalamnya sehingga dapat terjadi error ketika digunakan untuk perhitungan. baik lansung saja saya akan menjelaskan bagaimana caranya.

Baca juga mengubah atau custom jquery validate

yang pertama anda lakukan ialah jangan lupa untuk memanggil library jquery validate baik dari local maupun dari url tertentu dengan cara

<script type="text/javascript" src="jquery.validate.js">

kemudian diantara <head> </head> tambahkan script dibawah ini

<script type="text/javascript">
$(document).ready(function() {
$('#form1').validate({
ignore: ":hidden:not(select)",
rules:{
nim: {
maxlength:15,
                                                        minlength : 5,
required: true,
},
nama: {
  required: true,
maxlength: 50,
                                                        minlength : 5,
},
alamat: {
required: true,
maxlength: 50,
                                                        minlength : 5,
},
email: {
  required: true,
                                                        email : true,
maxlength: 20,
                                                        minlength : 5,
},
},
                                messages: {
              nim:{
              required: message_alert("nim tidak boleh kosong"),
              minlength: message_alert("masukkan minimal 5 karakter"),
              maxlength: message_alert("masukkan maksimal 50"),
               },
              nama:{
             required: message_alert("nama tidak boleh kosong"),
              minlength: message_alert("masukkan minimal 5 karakter"),
              maxlength: message_alert("masukkan maksimal 50"),
              },
              alamat:{
             required: message_alert("alamat tidak boleh kosong"),
              minlength: message_alert("masukkan minimal 5 karakter"),
              maxlength: message_alert("masukkan maksimal 50"),
              },
              email:{
             required: message_alert("nama tidak boleh kosong"),
              minlength: message_alert("masukkan minimal 5 karakter"),
              maxlength: message_alert("masukkan maksimal 20"),
                   email :  message_alert("email tidak valid"),
              },            
                }
});
}
</script>

Baca juga membuat 2 recaptcha pada satu halaman


script diatas digunakan untuk form dengan id='form1' dan input dengan name nim, nama, alamat, email. mungkin cukup sekian tutorial kali ini pada validasi form dengan jquery validate apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar  terima kasih :) .


membuat 2 recaptcha pada satu halaman php

membuat 2 recaptcha pada satu halaman php

08.12 Add Comment
Hallo Blogger kali ini saya akan menjelaskan tentang bagaimana cara membuat 2 recaptcha google pada satu halaman html / php. recaptcha sendiri adalah salah satu bentuk keamanan form yang biasanya digunakan untuk mendeteksi apakah user yang mengisi form benar-benar manusia ataukah hanya bot. recaptcha sendiri biasanya berada pada form register. ketika sebuah recaptcha diimplementasikan pada sebuah halaman php tentu tidak jadi masalah namun apabila kita ingin menggunakan 2 buah recaptcha pada sebuah halaman php kadang hanya muncul satu buah recapthca saja yang muncul bahkan hingga terjadi error. baik lansung saja saya akan menjelaskannya, berikut script untuk multiple recaptcha google on one page

Baca juga pencarian google berubah menjadi cse google

<html>
  <head>
    <title>Multiple recaptcha on one page</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
           widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'sitekey anda',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'sitekey anda'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'sitekey anda',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?hl=id&onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

untuk mengubah bahasa recaptcha anda juga dapat melakukanya dengan mengubah script

<script src="https://www.google.com/recaptcha/api.js?hl=id&onload=onloadCallback&render=explicit async defer>

Baca juga membuat form dengan html


untuk bahasa Indonesia anda dapat menggunakan id, untuk bahasa Inggris anda dapat menggunakan en dll. mungkin cukup sekian untuk tutorial saya kali ini tentang membuat 2 recaptcha pada satu halaman php. apabila tutorial ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)
copy to clipboard menggunakan jquery

copy to clipboard menggunakan jquery

12.53 2 Comments
Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara membuat copy to clipboard dari input type text dengan menekan tombol copy menggunakan fungsi document.execCommand("copy"); atau secara manual dapat dilakukan dengan (ctrl + c) dengan menggunakan button. fungsi document.execCommand("copy"); digunakan untuk mengeksekusi perintah copy dengan javascript fitur ini dimaksutkan untuk mempermudah user ketika kita akan mengcopy text tanpa harus select kalimat yang dicopy dan menekan ctrl + c.  baik lansung saja saya akan memberikan contohnya

Baca juga merotasi memutar gambar dengan jquery


yang pertama buat file html seperti berikut berinama terserah anda contoh arifweb.htnl

<html>
<head>
<title>copy to clipboard</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div class='input-group'>
<input type='text'  class='form-control' name='code' readonly='true'  id='generate-notif'>
<span class='input-group-btn'>
<button class='btn btn-info btn-flat' type='button' onclick=copyToClipboard()>Copy</button>
</span>
</div>
</body>
</html>

pada script diatas terdapat input type text dengan id=generate-notif dan tombol copy dengan event onclick.
kemudian selanjutnya sisipkan kode jquery, untuk script jquerynya dapat dilihat dibawah ini

JQUERY

<script type="text/javascript">
function copyToClipboard() {
  $("#generate-notif").select();
  document.execCommand("copy");
alert("berhasil di copy");
}
</script>

letakkan kode jquery diatas di antara <head> </head>

Baca juga cara membuat barcode dengan php dan jquery


untuk mengecek apakah script anda berhasil anda tinggal memasukkan kata di textbox kemudian klik tombol copy lalu paste ctrl + v di word / editor anda.

fungsi diatas dijalankan ketika button copy diklik input type text diselect / diblock kemudian menjalankan document.execCommand("copy");. cukup mudah bukan mungkin cukup sekian tutorial saya tentang copy to clipboard menggunakan jquery. Apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar Terima kasih :)


Merotasi memutar gambar dengan jquery php

Merotasi memutar gambar dengan jquery php

11.00 1 Comment
Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara merotasi atau memutar gambar menggunakan php dan jquery. rotasi image sering kali digunakan apabila kita menggunakan fitur upload gambar namun user awam tidak tahu cara memutar / merotate gambar secara manual. sehingga fitur rotate sangat dibutuhkan. bahkan facebook juga sudah menggunakan fitur ini. lansung saja saya akan membeikan script rotate gambar menggunakan php dan jquery.

untuk membuat file ini membutuhkan

  1. Gambar
  2. jquery bisa kita download atau mengambil dari code.jquery.com
  3. dll

Baca juga cara membuat barcode dengan php dan jquery

<html>
<head>
<title>Memutar gambar</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script> // import script jquery
<script>
// fungsi putargambar
function putarGambar(degree) {
    var angle = degree || 0;
    $('#idgambar').css({'transform': 'rotate(' + angle + 'deg)'}); // mengubah css berdasarkan idgambar
    $('#idgambar').data('angle', angle + 90); //mengubah angle berdasarkan idgambar
}
</script>
<style>
#demo-image{padding:25px 10px;}
.btnRotate {padding: 5px 10px;background-color: #09F;border: 0;color: #FFF;cursor: pointer;}
</style>
</head>
<body>
<div>
<label>Rotate Image:</label>
<input type="button" value="90" onClick="putarGambar(this.value);" /> // putar 90 derajat
<input type="button" value="-90" onClick="putarGambar(this.value);" /> // putar 240 derajat
<input type="button" value="180" onClick="putarGambar(this.value);" /> // putar 180 derajat
<input type="button" value="360" onClick="putarGambar(this.value);" /> // putar 360 derajat
//button untuk mengubah anggel gambar
</div>
<div><img src="namagambar" id="idgambar" /></div>
</body>
</html>

NB :

  • simpan script diatas pada file html/php
  • ubah src namagambar menjadi tempat dan nama gambar anda disimpan "image/gambar.jpg"

Baca juga menghilangkan attribute style dengan menggunakan jquery

cukup mudah bukan untuk rotasi gambar, cukup sekian postingan saya kali ini tentang memutar / rotasi gambar menggunakan php dan jquery. apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)
Langganan: Postingan (Atom)