Pengertian Jquery
JQuery adalah library JavaScript yang memungkinkan kita untuk membuat
program web pada suatu halaman web, tanpa harus secara eksplisit kita
menambahkan event ataupun properti pada halaman web tersebut. Dengan
jQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat
sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode
JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini
disebut sebagai unobstrusive JavaScript programming. JQuery merupakan
salah satu library yang membuat program web disisi
client, tidak terlihat sebagai program JavaScript biasa, yang harus
secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman
sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan
memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan
pada elemen tersebut. JQuery dikembangkan pertama kali oleh John Resig,
yang dibuat lebih
ramping dari library prototype yang menjadi inspirasi dari libarary
jQuery ini. Secara pemrograman, jQuery memiliki kemiripan seperti
prototype.
Pengertian PHP
Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll. PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).
Let's Practice
Pertama-tama siapkan
databasenya, buat sebuah database pada serverlokal kali ini saya beri nama database "db_banjar"
dan didalamnya buat sebuah tabel dengan nama user dengan field seperti berikut :
1. id2. nama
3. username
4. password
5. email
Selanjutnya buat file koneksi.php dengan script seperti berikut
<?php
$host = "localhost";
$user = "root";
$name = "db_banjar";
$pass = "";
$conn =
mysql_connect($host,$user,$pass);
$pilihdatabase =
mysql_select_db($name, $conn) or die ("GAGAL");
?>
buat file index.html ,, file ini berisi form tempat menginputkan data,, seperti berikut :
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type"
content="text/html" />
<meta name="author" content="Boomer" />
<title>Banjarism</title>
<script src="/js/jquery.js"></script>
<script src="/js/user.js"></script>
<script
src="/js/jquery-3.1.1.js"></script>
</head>
<body>
<form action="#"
method="get" class="form-horizontal">
<div
class="control-group">
<label
class="control-label">Nama :</label>
<div
class="controls">
<input
type="text" class="span11" placeholder="name" id="nama"/>
<div
id="error"></div>
</div>
</div>
<div
class="control-group">
<label
class="control-label">Username :</label>
<div class="controls">
<input
type="text" class="span11" placeholder="Enter
Username" id="username" />
</div>
</div>
<div
class="control-group">
<label
class="control-label">Password</label>
<div
class="controls">
<input
type="password"
class="span11" placeholder="Enter Password"
id="password" />
</div>
</div>
<div
class="control-group">
<label
class="control-label">Email :</label>
<div
class="controls">
<input
type="text" class="span11" placeholder="Email"
id="email" />
</div>
</div>
<div class="form-actions">
<button
type="submit" class="btn btn-success"
id="simpan">Save</button>
</div>
</form>
</body>
</html>
Kemudian buat folder js didalam folder js tersebut buat sebuah file js kemudian beri nama user.js kemudian ketikkan script seperti berikut :
$(function
() {
$('#simpan').click(function
(){
var nama = $('#nama').val();
var username = $('#username').val();
var password = $('#password').val();
var email = $('#email').val();
alert(nama);
if (nama == '')
{
$('#error').html("tolong diisi
file yang kosong");
}
else
{
$.ajax({
type: "Get",
url: "proses.php",
data:"nama="+nama+"&username="+username+"&password="+password+"&email="+email,
success: function(data) {
alert("Request Berhasil
Dikirim");
$("#nama").val("");
$("#username").val("");
$("#password").val("");
$("#email").val("");
},
error: function(jqXHR, status, error) {
alert("Request Anda Gagal
Dikirim ");
}
});
}
return false;
});
});
Lalu buat sebuah file lagi kemudian beri nama proses.php letakkan file ini sejajar dengan lokasi file index kemudian ketikkan script insertnya seperti berikut :
<?php
include
"koneksi.php";
$nama = htmlspecialchars($_GET['nama']);
$username = htmlspecialchars($_GET['username']);
$password = htmlspecialchars($_GET['password']);
$email = htmlspecialchars($_GET['email']);
$query =
mysql_query("insert into user (nama,username,password,email) values
('$nama','$username','$password','$email')");
if ($query)
{
echo "sukses";
}
else
{
echo "gagal";
}
?>
Terakhir jalankan file index.html dan akan tampil seperti ini :
Coba masukkan datanya seperti ini:
