Halo teman teman pada tutorial kali ini saya akan membahas tentang Cara membuat validasi form menggunakan PHP, sebenarnya jenis validasi it banyak sekali, nah pada tutorial kali ini saya akan membuat sebuah vali dasi, untuk pengecekan data pada database, jadi ketika kita memasukan data yang sama maka akan muncul sebuah comment bahwa data tersebut telah pernah di input sebelumnya, dan jika kita memasukan password secara repeat maka system akan melakukan pengecekan apakah password yang di input pada form pertama sama dengan password yang di input pada form kedua
Nah, untuk lebih jelasnya kita akan masuk ke study case nya tentang Cara membuat validasi form menggunakan PHP
Langkah yang pertama yang harus teman teman lakukan yaitu membuat sebuah database untuk menyimpan data yang ingin kita input nantinya, silahkan buat sebuah database dengan nama “validasiâ€, kemudian buat table pada database dengan mana table “formâ€.
Jika sudah silahkan teman teman simpan script dibawah ini dengan nama index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!DOCTYPE html> <html> <head>  <title>Cara membuat validasi form menggunakan PHP dan JavaScript</title>  <script src="jquery-1.4.js"></script>  <script type="text/javascript" src="jquery.validate.js"></script> <!-- Style Css -->  <style type="text/css">    *{margin: 0;padding: 0}    body {font-family: arial}    .form-div{      width: 700px;      background: #c0cada;      height: 140px;    }    .submit{      cursor: pointer;    }    .form-div .label {      display: block;      float: left;      width: 150px;      text-align: right;      margin-right: 5px;    }    .form-div .form-row {      padding: 10px 0;      clear: both;      width: 700px;    }    .form-div label.error {      width: 250px;      display: block;      float: left;      color: red;      padding-left: 10px;      background: url(unvalid.gif) no-repeat;    }    .form-div input {      width: 180px;      float: left;      font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;      font-size:11px;    }    .form-div label.valid {      width: 24px;      background: url(true.png) center no-repeat;      display: inline-block;      text-indent: -9999px;    }    .error{background: #FFEBE8;}    .comment {background: green; width: 700px; color:#fff;} </style> <!-- JavaScript --> <script>  $(document).ready(function()  {     $("#username").change(function()     {         var username = $("#username").val();        $("#pesan").html("<img src='loading.gif'>Cek username ...");        if(username=='')        {          $("#pesan").html('<img src="salah.png"> username tidak boleh kosong');          $("#username").css('border', '3px #C33 solid');        }        else        $.ajax({type: "POST", url: "validation.php", data: "username="+username, success:function(data)        {          if(data==0)            {                $("#pesan").html('<img src="true.png">');                $("#username").css('border', '3px #090 solid');            }              else              {                $("#pesan").html('<img src="salah.png"> username telah digunakan');                $("#username").css('border', '3px #C33 solid');              }                     } });     })     $("#kirim").click(function()     {         var username = $("#username").val();        $("#pesan").html("<img src='loading.gif'>Cek username ...");        if(username=='')        {          $("#pesan").html('<img src="salah.png"> username tidak boleh kosong');          $("#username").css('border', '3px #C33 solid');        }        else        $.ajax({type: "POST", url: "validation.php", data: "username="+username, success:function(data)        {          if(data==0)            {                $("#pesan").html('<img src="true.png">');                $("#username").css('border', '3px #090 solid');            }              else              {                $("#pesan").html('<img src="salah.png"> username telah digunakan');                $("#username").css('border', '3px #C33 solid');              }                     } });     })     $("#tambahakun").validate({        rules:{                password:{required: true, minlength: 8},                ulangipassword:{required: true, equalTo: "#password"}              },        messages:{                    password:{required: '.Password harus diisi', minlength: ' Password minimal 8 karakter'},                   ulangipassword:{required: '.Tidak boleh kosong', equalTo: ' Isi harus sama dengan Password'}              },        success: function(label)        {            label.text('OK!').addClass('valid');        }     });  }); </script> </head> <body> <!-- Proser PHP -->  <?php  include ("config.php");  if(isset($_POST['kirim']))  {      $user = $_POST['username'];      $pass = md5($_POST['password']);      $cekuser = mysqli_num_rows(mysqli_query($conn,"select nis from form where nis = '$user'"));      if(empty($user))      {         echo "<div class='error'><b>ERROR:</b><p class='alert'> username harus diisi!</p></div><br/>";      }      else      if($cekuser>0)      {         echo "<p class='comment'>username sudah ada, silahkan masukan username yang lain</p>";      }      else      {        mysqli_query($conn,"insert into form(nis, password) values('$user','$pass')");        echo "<script type='text/javascript'>alert('username berhasil ditambah');</script>";      }  }  ?> <!-- Form -->  <div class="form-div">  <form method="post" action="" id="tambahakun">         <div class="form-row">           <span class="label">username:</span>           <input type="text" id="username" name="username"><span id="pesan"></span>        </div>          <div class="form-row">            <span class="label">Password:</span>            <input type="password" id="password" name="password">        </div>        <div class="form-row">            <span class="label">Ulangi Password:</span>            <input type="password" id="ulangipassword" name="ulangipassword"></p>        </div>         <div class="form-row">          <input type="submit" class="submit" value="Save" name="kirim" id="kirim">        </div>  </form>  </div> </body> </html> |
Berikutnya kita akan buat sebuah file koneksi untuk mengkoneksikan kedatabasenya, silahkan simpan file dibawah ini dengan nama config.php
|
1 2 3 4 |
<?php $conn = mysqli_connect("localhost", "root", ""); mysqli_select_db($conn,"validasi"); ?> |
Jika sudah silahkan di save dan jalan kan pada browsernya maka hasilnya akan seperti dibawah ini,
Oke teman teman cukup sekian dulu tutorial saya kali ini tentang Cara membuat validasi form menggunakan PHP, semoga bermanfaat
Terimakasih
Untuk lebih lengkapnya silahkan Download Script