Cara membuat validasi form menggunakan PHP

Halo teman teman di panduan kali ini saya akan membahas mengenai Cara membangun validasi form menggunakan PHP, sebetulnya jenis validasi it banyak sekali, nah di panduan kali ini saya akan membangun sebuah vali dasi, bagi pengecekan data di database, jadi ketika kita memasukan data yang sama karenanya akan muncul sebuah comment bahwa data tersebut telah pernah di input sebelumnya, dan seandainya kita memasukan password secara repeat karenanya system akan mengerjakan pengecekan apakah password yang di input di form pertama-tama sama dengan password yang di input di form kedua

Nah, bagi lebih jelasnya kita akan masuk ke study case nya mengenai Cara membangun validasi form menggunakan PHP

Langkah yang pertama-tama yang mesti teman teman lakukan yaitu membangun sebuah database bagi menyimpan data yang ingin kita input nantinya, silahkan bikin sebuah database dengan nama â€œvalidasiâ€, kemudian bikin table di database dengan mana table â€œformâ€.

Apabila telah silahkan teman teman simpan script dibawah ini dengan nama index.php

<!DOCTYPE html><br />
<html><br />
<head><br />
Â  <title>Cara membangun validasi form menggunakan PHP dan JavaScript</title><br />
Â  <script src=”jquery-1.4.js”></script><br />
Â  <script type=”text/javascript” src=”jquery.validate.js”></script><br />
<!– Style Css –><br />
Â  <style type=”text/css”><br />
Â Â Â  *{margin: 0;padding: 0}<br />
Â Â Â  body {font-family: arial}<br />
Â Â Â  .form-div{<br />
Â Â Â Â Â  width: 700px;<br />
Â Â Â Â Â  background: #c0cada;<br />
Â Â Â Â Â  height: 140px;<br />
Â Â Â  }<br />
Â Â Â  .submit{<br />
Â Â Â Â Â  cursor: pointer;<br />
Â Â Â  }<br />
Â Â Â  .form-div .label {<br />
Â Â Â Â Â  display: block;<br />
Â Â Â Â Â  float: left;<br />
Â Â Â Â Â  width: 150px;<br />
Â Â Â Â Â  text-align: right;<br />
Â Â Â Â Â  margin-right: 5px;<br />
Â Â Â  }<br />
Â Â Â  .form-div .form-row {<br />
Â Â Â Â Â  padding: 10px 0;<br />
Â Â Â Â Â  clear: both;<br />
Â Â Â Â Â  width: 700px;<br />
Â Â Â  }</p>
<p>Â Â Â  .form-div label.error {<br />
Â Â Â Â Â  width: 250px;<br />
Â Â Â Â Â  display: block;<br />
Â Â Â Â Â  float: left;<br />
Â Â Â Â Â  color: red;<br />
Â Â Â Â Â  padding-left: 10px;<br />
Â Â Â Â Â  background: url(unvalid.gif) no-repeat;<br />
Â Â Â  }<br />
Â Â Â  .form-div input {<br />
Â Â Â Â Â  width: 180px;<br />
Â Â Â Â Â  float: left;<br />
Â Â Â Â Â  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;<br />
Â Â Â Â Â  font-size:11px;<br />
Â Â Â  }<br />
Â Â Â  .form-div label.valid {<br />
Â Â Â Â Â  width: 24px;<br />
Â Â Â Â Â  background: url(true.png) center no-repeat;<br />
Â Â Â Â Â  display: inline-block;<br />
Â Â Â Â Â  text-indent: -9999px;<br />
Â Â Â  }<br />
Â Â Â  .error{background: #FFEBE8;}<br />
Â Â Â  .comment {background: green; width: 700px; color:#fff;}<br />
</style></p>
<p><!– JavaScript –><br />
<script><br />
Â  $(document).ready(function()<br />
Â  {<br />
Â Â Â Â  $(“#username”).change(function()<br />
Â Â Â Â  { Â <br />
Â Â Â Â Â Â Â  var username = $(“#username”).val();<br />
Â Â Â Â Â Â Â  $(“#pesan”).html(“<img src=’loading.gif’>Cek username …”);</p>
<p>Â Â Â Â Â Â Â  if(username==”)<br />
Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”salah.png”> username tak boleh kosong’);<br />
Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #C33 solid’);<br />
Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â  else<br />
Â Â Â Â Â Â Â  $.ajax({type: “POST”, url: “validation.php”, data: “username=”+username, success:function(data)<br />
Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â  if(data==0)<br />
Â Â Â Â Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”true.png”>’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #090 solid’);<br />
Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  else<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”salah.png”> username telah digunakan’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #C33 solid’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â  Â <br />
Â Â Â Â Â Â Â  } });<br />
Â Â Â Â  })</p>
<p>Â Â Â Â  $(“#kirim”).click(function()<br />
Â Â Â Â  { Â <br />
Â Â Â Â Â Â Â  var username = $(“#username”).val();<br />
Â Â Â Â Â Â Â  $(“#pesan”).html(“<img src=’loading.gif’>Cek username …”);</p>
<p>Â Â Â Â Â Â Â  if(username==”)<br />
Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”salah.png”> username tak boleh kosong’);<br />
Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #C33 solid’);<br />
Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â  else<br />
Â Â Â Â Â Â Â  $.ajax({type: “POST”, url: “validation.php”, data: “username=”+username, success:function(data)<br />
Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â  if(data==0)<br />
Â Â Â Â Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”true.png”>’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #090 solid’);<br />
Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  else<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#pesan”).html(‘<img src=”salah.png”> username telah digunakan’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  $(“#username”).css(‘border’, ‘3px #C33 solid’);<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  }<br />
Â Â Â Â Â Â Â Â Â Â Â Â  Â <br />
Â Â Â Â Â Â Â  } });<br />
Â Â Â Â  })</p>
<p>Â Â Â Â  $(“#tambahakun”).validate({</p>
<p>Â Â Â Â Â Â Â  rules:{<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  password:{required: true, minlength: 8},<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  ulangipassword:{required: true, equalTo: “#password”}<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  },</p>
<p>Â Â Â Â Â Â Â  messages:{ Â <br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  password:{required: ‘.Password mesti diisi’, minlength: ‘ Password minimal 8 karakter’},<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â  ulangipassword:{required: ‘.Tak boleh kosong’, equalTo: ‘ Isi mesti sama dengan Password’}<br />
Â Â Â Â Â Â Â Â Â Â Â Â Â  },</p>
<p>Â Â Â Â Â Â Â  success: function(label)<br />
Â Â Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â Â Â Â  label.text(‘OK!’).addClass(‘valid’);<br />
Â Â Â Â Â Â Â  }</p>
<p>Â Â Â Â  });</p>
<p>Â  });<br />
</script><br />
</head><br />
<body><br />
<!– Proser PHP –><br />
Â  <?php<br />
Â  include (“config.php”);<br />
Â  if(isset($_POST[‘kirim’]))<br />
Â  {<br />
Â Â Â Â Â  $user = $_POST[‘username’];<br />
Â Â Â Â Â  $pass = md5($_POST[‘password’]);</p>
<p>Â Â Â Â Â  $cekuser = mysqli_num_rows(mysqli_query($conn,”select nis from form where nis = ‘$user'”));</p>
<p>Â Â Â Â Â  if(empty($user))<br />
Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â  echo “<div class=’error’><b>ERROR:</b><p class=’alert’> username mesti diisi!</p></div><br/>”;<br />
Â Â Â Â Â  }<br />
Â Â Â Â Â  else</p>
<p>Â Â Â Â Â  if($cekuser>0)<br />
Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â Â  echo “<p class=’comment’>username telah ada, silahkan masukan username yang lain</p>”;<br />
Â Â Â Â Â  }<br />
Â Â Â Â Â  else<br />
Â Â Â Â Â  {<br />
Â Â Â Â Â Â Â  mysqli_query($conn,”insert into form(nis, password) values(‘$user’,’$pass’)”);<br />
Â Â Â Â Â Â Â  echo “<script type=’text/javascript’>alert(‘username berhasil ditambah’);</script>”;<br />
Â Â Â Â Â  }<br />
Â  }<br />
Â  ?></p>
<p><!– Form –><br />
Â  <div class=”form-div”><br />
Â  <form method=”post” action=”” id=”tambahakun”> Â <br />
Â Â Â Â Â Â Â  <div class=”form-row”><br />
Â Â Â Â Â Â Â Â Â Â  <span class=”label”>username:</span><br />
Â Â Â Â Â Â Â Â Â Â  <input type=”text” id=”username” name=”username”><span id=”pesan”></span><br />
Â Â Â Â Â Â Â  </div>Â Â  Â <br />
Â Â Â Â Â Â Â  <div class=”form-row”><br />
Â Â Â Â Â Â Â Â Â Â Â  <span class=”label”>Password:</span><br />
Â Â Â Â Â Â Â Â Â Â Â  <input type=”password” id=”password” name=”password”><br />
Â Â Â Â Â Â Â  </div></p>
<p>Â Â Â Â Â Â Â  <div class=”form-row”><br />
Â Â Â Â Â Â Â Â Â Â Â  <span class=”label”>Ulangi Password:</span><br />
Â Â Â Â Â Â Â Â Â Â Â  <input type=”password” id=”ulangipassword” name=”ulangipassword”></p><br />
Â Â Â Â Â Â Â  </div><br />
Â Â Â Â Â Â Â Â  <div class=”form-row”><br />
Â Â Â Â Â Â Â Â Â  <input type=”submit” class=”submit” value=”Save” name=”kirim” id=”kirim”><br />
Â Â Â Â Â Â Â  </div><br />
Â  </form><br />
Â  </div><br />
</body><br />
</html>

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>

Â (Visited 4 times, 1 visits today)

Leave a Reply Cancel reply