Scribd
Unggah
71 tayangan9 halaman

Cek Data Menggunakan Jquery Dan Ajax

Diunggah oleh

yulimul
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
71 tayangan9 halaman

Cek Data Menggunakan Jquery Dan Ajax

Diunggah oleh

yulimul
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

Cek Data Menggunakan jQuery dan Ajax | Validasi Form

Menggunakan jQuery dan Ajax | Validasi Data Menggunakan


jQuery dan Ajax

Saad AbdurrazaqTue, October 21, 201417:2910 Comments

Hello All, pada kesempatan kali ini saya akan sharing atau berbagi tentang cara cek data
menggunakan jQuery dan Ajax. Skrip validasi form ini dibuat untuk mengecek data,
apakah data tersedia dalam database ataukah tidak? Jika tidak tersedia, maka secara
otomatis komputer mengizinkan user untuk menambahkan data baru, jika data tersedia di
database maka secara otomatis komputer melarang user untuk menginput data dan
mengharuskan untuk menggantinya

Sebelum Anda mempelajarinya, saya asumsikan paling tidak Anda harus terlebih dahulu
memahami HTML, CSS, PHP, MySQL, jQuery dan AJAX. memahami saja, tidak harus
menguasainya. kalo menguasai? itu lebih bagus lagi!lalu kenapa saya asumsikan untuk
memahami HTML, CSS, PHP, MySQL, jQuery dan AJAX? karena kita akan mainan
semua elemen itu tanpa terkecuali. Ok, langsung saja kita meluncur ke scriptnya.

STEP 1: Buatlah databasenya terlebih dahulu untuk menampung data-datanya. Agar


Anda tidak repot dalam membuat database, Saya sudah sertakan databasenya yang bisa
Anda download pada artikel ini.

STEP 2: Buatlah file dan beri nama cekuser.php. File ini merupakan form untuk
menginput NIS dan password, dan memvalidasinya. Tidak usah panjang lebar langsung
ketikkan saja scriptnya di bawah ini:
1 <html>
2 <head>
3 <script src="jquery-1.4.js"></script>

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

6 <style type="text/css">

7
8 .form-div .label {
9 display: block;
10 float: left;

11 width: 150px;
12 text-align: right;
13 margin-right: 5px;
14 }
15 .form-div .form-row {
16 padding: 5px 0;

17 clear: both;
18 width: 700px;
19 }
20
21 .form-div label.error {
22 width: 250px;
23 display: block;
24 float: left;

25 color: red;
26 padding-left: 10px;
27 background: url(unvalid.gif) no-repeat;
28 }
29 .form-div input {
30 width: 180px;

31 float: left;
32 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
33 font-size:11px;
34 }
35 .form-div label.valid {
36 width: 24px;
37 background: url(true.png) center no-repeat;
38 display: inline-block;
39 text-indent: -9999px;
40 }

41
42 .error{background: #FFEBE8;}
43
44 </style>
45
46 <script>
47 $(document).ready(function()
48 {
49 $("#username").change(function()
50 {

51 var username = $("#username").val();

52 $("#pesan").html("<img src='loading.gif'>Cek username ...");

53
54 if(username=='')
55 {

56 $("#pesan").html('<img src="salah.png"> username tidak boleh kosong');


57 $("#username").css('border', '3px #C33 solid');
58 }

59 else
$.ajax({type: "POST", url: "validation.php", data: "username="+username,
60
success:function(data)
61 {
62 if(data==0)
63 {

64 $("#pesan").html('<img src="true.png">');
65 $("#username").css('border', '3px #090 solid');
66 }
67 else
68 {

69 $("#pesan").html('<img src="salah.png"> username telah digunakan');

70 $("#username").css('border', '3px #C33 solid');


71 }
72
73 } });
74 })

75
76 $("#kirim").click(function()
77 {
78 var username = $("#username").val();
79 $("#pesan").html("<img src='loading.gif'>Cek username ...");

80
81 if(username=='')
82 {

83 $("#pesan").html('<img src="salah.png"> username tidak boleh kosong');

84 $("#username").css('border', '3px #C33 solid');

85 }
86 else
$.ajax({type: "POST", url: "validation.php", data: "username="+username,
87
success:function(data)
88 {
89 if(data==0)
90 {

91 $("#pesan").html('<img src="true.png">');
92 $("#username").css('border', '3px #090 solid');
93 }
94 else
95 {
96 $("#pesan").html('<img src="salah.png"> username telah digunakan');
97 $("#username").css('border', '3px #C33 solid');
98 }

99
100 } });
101 })
102
103 $("#tambahakun").validate({
104

105 rules:{
106 password:{required: true, minlength: 5},
107 ulangipassword:{required: true, equalTo: "#password"}
108 },

109
110 messages:{
password:{required: '.Password harus diisi', minlength: '.Password minimal
111
5 karakter'},
ulangipassword:{required: '.Tidak boleh kosong', equalTo: '.Isi harus sama
112
dengan Password'}
113 },
114
115 success: function(label)
116 {
117 label.text('OK!').addClass('valid');
118 }

119
120 });
121
122 });
123 </script>
124 </head>
125 <body>
126 <?php
127 mysql_connect("localhost", "root", "qwertyuiop123");
128 mysql_select_db("crud");

129
130 if(isset($_POST['kirim']))
131 {
132 $user = $_POST['username'];
133 $pass = md5($_POST['password']);

134

$cekuser = mysql_num_rows(mysql_query("select nis from login


135
wherenis = '$user' "));
136
137 if(empty($user))
138 {

139 echo "<div class='error'><b>ERROR:</b><p class='alert'> NIS harus


diisi!</p></div><br/>";
140 }
141 else
142
143 if($cekuser>0)
144 {
145 echo "NIS sudah ada, silahkan ganti NIS Anda";
146 }
147 else
148 {

149 mysql_query("insert into login(nis, password) values('$user','$pass')");

150 echo "<script type='text/javascript'>alert('username berhasil


ditambah');</script>";
151 }
152 }
153 ?>
154

155 <div class="form-div">

156 <form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>"


id="tambahakun">
157

158 <div class="form-row">

159 <span class="label">NIS:</span>

160 <input type="text" id="username" name="username"><span id="pesan"></span></


p>
161 </div>
162

163 <div class="form-row">

164 <span class="label">Password:</span>


165 <input type="password" id="password" name="password"></p>

166 </div>

167

168 <div class="form-row">

169 <span class="label">Ulangi Password:</span>

170 <input type="password" id="ulangipassword" name="ulangipassword"></p>


171 </div>
172

173 <div class="form-row">

174 <input type="submit" value="Save" name="kirim" id="kirim">


175 </div>
176
177 </form>
178 </div>

179
180 </body>
181 </html>

STEP 3: Kita buat file lalu kia beri nama inputuser.php untuk membuat koneksi ke
database sekaligus untuk mengecek data yang dinput apakah tersedia atau tidak? Inilah
scriptnya:

1 <?php
2 mysql_connect("localhost", "root", "qwertyuiop123");
3 mysql_select_db("crud");
4

5 $user = $_POST['username'];
6 $pass = $_POST['password'];

8 $cekuser = mysql_num_rows(mysql_query("select username from login where nis =


'$user' "));
9 if($cekuser>0)
10 {

11 echo "NIS sudah ada, silahkan ganti NIS Anda";

12 }
13 else
14 {

15 mysql_query("insert into login(nis, password) values('$user','$pass')");

16 echo "<script type='text/javascript'>alert('username berhasil


ditambah');</script>";
17 }
18
19 ?>

STEP 4: Kita buat file dan beri nama validation.php. File ini juga untuk memvalidasi
data yang kita input. Berikut scriptnya:

1 <?php
2 mysql_connect("localhost", "root", "qwertyuiop123");
3 mysql_select_db("crud");
4

5 $sql = mysql_query("select*from login where nis = '$_POST[username]';");

6 $cocok = mysql_num_rows($sql);

8 echo $cocok;
9 ?>
Silahkan cocokkan kembali database dan datanya agar dapat tersambung, lalu jangan lupa
sediakan gambarnya. Untuk script dan gambarnya secara keseluruhan bisa Anda
download di sini

Cek Data Menggunakan AJAX (57.4 KiB, 429 hits)

Anda mungkin juga menyukai