Hendra Purwanto: JQuery

Showing posts with label JQuery. Show all posts

Monday, January 19, 2015

Submit Form Dengan Ajax Menggunakan jQuery

10:54 AM Unknown No comments

Kalau sebelumnya saya sudah menulis tentang cara menampilkan halaman menggunakan Ajax (menggunakan fungsi load() pada jQuery), maka kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

$(document).ready(function() {
 
 $().ajaxStart(function() {
  $('#loading').show();
  $('#result').hide();
 }).ajaxStop(function() {
  $('#loading').hide();
  $('#result').fadeIn('slow');
 });
 
 $('#myForm').submit(function() {
  $.ajax({
   type: 'POST',
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(data) {
    $('#result').html(data);
   }
  })
  return false;
 });
})

Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

<?php
//validasi
if (trim($_POST['nim']) == '') {
 $error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
 $error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
 $error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya
 
if (isset($error)) {
 echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
 /*
 jika data mau dimasukkan ke database,
 maka perintah SQL INSERT bisa ditulis di sini
 */
 
 $data = '';
 foreach ($_POST as $k => $v) {
  $data .= "$k : $v<br />";
 }
 echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
 echo '<br />';
 echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html
Untuk lebih jelasnya silakan lihat demo:
Demo Ajax Form
Dan anda bisa mendownload source code nya di sini:

Referensi : http://gawibowo.com/submit-form-dengan-ajax-menggunakan-jquery.htm

JQuery UI: Datepicker Tutorial

8:02 AM Unknown No comments

Datepicker Tutorial. Datepicker is a mind blowing widget in web 2.0. It is widely used in any modern web that needs a date as the input value. This Datepicker will make sure that the user inputs the correct format date (it can be 20/01/1990,20 January 1990, January 20 1900 and so on) to avoid any error. JQuery UI provides us this widget for free (thank you for the founder :-) ). In this tutorial we will learn how to use Datepicker to be implemented in our web app. As it has many Options, we will only review some Options that i think is mostly used.

First we will do the basic form of datepicker. Here’s the code
datepicker.php

<html>

   <head>

       <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

       <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

       <link rel="stylesheet" type="text/css"

        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

       <script type="text/javascript">

               $(document).ready(function(){

                     $("#date").datepicker();

               });

       </script>

   </head>

   <body>

        <form method="post" action="">

               Date of Birth : <input type="text" name="date" id="date"/>

        </form>

   </body>

</html>

Just like usual, we bind the id “date” to the jquery function $(“#date”).datepicker() and whoop the magic happens :D. You should see something like this

quite awesome right?
Don’t be easily satisfied. If we look more detail into the datepicker we have created, it will be difficult for everyone to change the year and the month to their birth day as they have to scroll right or left continuously. So what is the solution?, easy enough. Just add 2 Options of the datepicker that are changeMonth and changeYear so now the function is looks like this

$(document).ready(function(){

        $("#date").datepicker({

           changeMonth:true,

           changeYear:true

        });

  });

Here is the screenshot

Hmm satisfied now? not yet!. Look at the year options of datepicker now. It only has 10 years back and 10 years next from now (2013). This is truly a big mistake hahaa.. 90’s people can’t use this app :D. Just calm down my friends, all we need to do is adding yearRange option.
Say we want to have 100 years back and no year next, we use this piece of code

yearRange: "-100:+0"

You can change the range to better suit your application’s requirements. So now our jquery function has 3 Options

$("#date").datepicker({

     changeMonth:true,

     changeYear:true,

     yearRange:"-100:+0"

  });

Wow 1913, are you gonna use this year? :P
The last option we will learn is dateFormat. As you already know, not all countries use the same date format. So we as the developers have to fit it. For date format here’s one of the example

$("#date").datepicker({

     changeMonth:true,

     changeYear:true,

     yearRange:"-100:+0",

     dateFormat:"dd MM yy"

  });

before using dateFormat

after using dateFormat

Okay, after we learnt about datepicker now we can develop web app using this help to better date input.
see you on next cool tutorial :D

Referensi : http://phpseason.wordpress.com/2013/02/14/jquery-ui-datepicker-tutorial/

PHP Autocomplete Tutorial Using JQuery

7:28 AM Unknown No comments

Autocomplete Php is a cool technic you should learn to make your website or you web application looks cool and also user friendly. As you might have known, autocomplete gives a user a list of nearly same data with what he or she is looking for.

In this tutorial we will learn together about how to use this technic in our sample web app using PHP and JQuery. Before we go to the tutorial, first we make a list of our need to build this app.

Our application will only have one page, that is a form where user try to input a data. In this form the magic happens. When user inputs data, an autocomplete will show up to help him/her fulfill the form. We will create 2 PHP files, one for the form and one that is responsible in supplying data into an autocomplete. We also have a database with a table named “student” that has 2 columns, “id” and “name”.
Now, let’s make our hand dirty by writing the code :D. Prepare your self!
First we make our database tabel. Here is the structure of our “student” tabel

+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int(5)      | NO   | PRI | NULL    | auto_increment |
| name  | varchar(50) | NO   |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

Next we make our main form page.
autocomplete.php

<html>
   <head>
  <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

  <script type="text/javascript">
                $(document).ready(function(){
                 $("#name").autocomplete({
                  source:'getautocomplete.php',
                  minLength:1
                 });
                });
  </script>
   </head>

   <body>

      <form method="post" action="">
             Name : <input type="text" id="name" name="name" />
      </form>

   </body>
<html>

note that we bind the “name” which is the id of the text input into jquery function in $(“#name”). In autocomplete function inside jquery, we use two properties, source and minLength. Source is the file that supplies our data to be shown in autocomplete. minLength is used to specify the number of character a user has to type to activate the auto completion.
Now we make our “supplier” file.
getautocomplete.php

<?php
 mysql_connect("localhost","root","");
 mysql_select_db("php_autocomplete");

 $term=$_GET["term"];

 $query=mysql_query("SELECT * FROM student where name like '%".$term."%' order by name ");
 $json=array();

  while($student=mysql_fetch_array($query)){
         $json[]=array(
            'value'=> $student["name"],
            'label'=>$student["name"]." - ".$student["id"]
             );
  }

 echo json_encode($json);

?>

That code should be easy to understand. The things you have to get attention are the $json array values, ‘value’ and ‘label’. ‘value’ is as the value of the input text, where ‘label’ is used as label text in auto complete. You will know what i mean later.
Now insert some data to your database as a sample. Then navigate your browser to
localhost/yourprojectname/getautocomplete.php
you should see the data in json format

don’t worry about the warning text, it’s only because we didn’t supply the variable with a value.
Try to make some changes by navigating your browser to
localhost/yourprojectname/getautocomplete.php?term=whatyouwanttosearch
Change the whatyouwanttosearch with some name of students and now you should understand :D
Now is the time to test our app. Go to
localhost/yourprojectname/autocomplete.php>
and type some letters. Here’s what i got

What you see in pop up auto complete is “label” we talked about some mintues ago. Click one of those data and what inside text input is “value” we talked above.

Referensi : http://phpseason.wordpress.com/2013/02/13/php-autocomplete-tutorial-using-jquery/

Lokomedia : Trik Mengukur Kekuatan Password Pada PHP

8:02 PM Unknown No comments

Pada kesempatan kali ini saya ingin berbagi bagaimana cara membuat indikasi kekuatan password yang di inputkan oleh user, hasilnya terlihat seperti gambar di atas, tanpa tunggu lama langsung kita praktikkan yuk

Pertama download dulu jQuery nya dihttp://code.jquery.com/jquery-1.7.js, copy dan simpan dengan namajquery-1.7.js. Kemudian downlod juga library jQuery password streangth meter dihttp://plugins.jquery.com/files/jquery.passroids.js.txt, copy dan simpan dengan nama jquery.passroids.js.

Penerapannya seperti code berikut ini

$(document).ready(function(){
   if ($('#login').size()) {
      $.getScript(
        'jquery.passroids.js',
        function() {
           $('#form1').passroids({
              main : "#pass"
           });
        }
      );
    }
});

 


Password :

Berikut ini adalah penjelasan dari code di atas

Untuk Mempercantik saya juga memberikan Code CSSnya, Copy dan pastekan di bawah dan sebelum

table.gridtable {
  font-family: verdana,arial,sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  }
  table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  }
#psr_score {
  background: transparent;
  display: block;
  margin: 0;
  padding: 0;
  width: 200px;
  }

  .psr_Weak,
  .psr_Medium,
  .psr_Strong,
  .psr_Excellent {
  background: transparent url(bg-password-strength.png) no-repeat 0 0;
  display: block;
  margin: 0.5em 0 0.2em 5px;
  padding: 10px 0 0;
  }

  .psr_Medium {
  background-position: 0 -50px;
  }

  .psr_Strong {
  background-position: 0 -100px;
  }

  .psr_Excellent {
  background-position: 0 -150px;
  }

Selamat Mencoba.. : )

Referensi : http://ekosuhartono.blogdetik.com/?p=6576

Membuat input tanggal otomatis dengan jQuery

7:34 PM Unknown 1 comment

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicsFmjQPwYEPlOpxyGLe2qLFIHPiOj3_N2ifFyUyANHvS2CC_U1Li_9amGmM0Zy6CuMbtiUfb1vdXVHcDJx3vsl4am09eDVTrn4cY9_iVVr953KzgJyqRxuXi3FuzX_B0pCrzXhltHNR4/s1600/bikin+datepicker+jquery+.JPG

Sempet berkendala karena bingung bikin cara mempermudah pengisian form tanggal di web, emang ga semudah cara input tanggal seperti aplikasi desktop, tapi ternyata setelah berkenalan dengan jQuery kok malah lebih gampang bikin input tanggal web ya

simple bgt caranya, tinggal copy header nya ama ganti id name input box nya

Oke langsung aja kite masuk ke cara membuatnya

1. Download dulu plugin jquery-1.3.2 – ui.datepicker di sini =>mediafire link (130KB aja)

2. Ekstrak dan copy folder “js” ke lokasi file yg mau mempergunakan datepicker

3. Dalam tag <head> kita paste script ini :

Dalam tag <head> kita paste script ini :

Kita tengok dulu di atas ada tag tanggal nah ini disesuaikan dengan ‘id’ tag dari input text ente, dan format output tanggalnya untuk contoh gw ini adalah “tahun-bulan-tanggal” sesuai dengan type tabel pada phpmyadmin pada field tanggal yg berjenis DATE, makanya biar ga ribet format penulisannya langsung YYYY-MM-DD

Oke It’s done, silahkan di coba

download contoh beserta source code di http://www.mediafire.com/?569vrjl0v99f63r

Incoming search terms:

input tanggal dengan php
input tanggal di php
input tanggal otomatis di php
input tanggal php
membuat tanggal otomatis di php
form tanggal dengan php
cara input tanggal di php
jquery tanggal php
script tanggal otomatis php
cara membuat input tanggal pada php

Referensi : http://www.technews.indoinfo.web.id/2012/09/27/membuat-input-tanggal-otomatis-dengan-jquery/

Profesional Operating Sistem Android.

Profesional Operating Sistem Windows Seven.

Profesional Operating Sistem Apple.

Profesional Operating Sistem Linux.

Profesional Operating Sistem Ubuntu...

Monday, January 19, 2015

Submit Form Dengan Ajax Menggunakan jQuery

Thursday, January 8, 2015

JQuery UI: Datepicker Tutorial

PHP Autocomplete Tutorial Using JQuery

Monday, May 27, 2013

Lokomedia : Trik Mengukur Kekuatan Password Pada PHP

Friday, May 24, 2013

Membuat input tanggal otomatis dengan jQuery

Incoming search terms:

Categories

Links

Blog Archive

About Me

Hit Counter

Followers

Comment