m.edi santosa 1321180154 iiiti.5 tugas 1
DESCRIPTION
LAPORANTRANSCRIPT
M.EDI SANTOSA TI.5
M.EDI SANTOSA
LAPORAN
PROGRAM WEB
TUGAS KE-1
Dosen Pengajar
Insan Winurso, S.Kom
Oleh :
Nama Mahasiswa : M. EDI SANTOSA
Nomer Absen : 28
Kelas : III T.I - 5
AKADEMI KOMUNITAS (POLTEK) NEGERI BOJONEGORO
JURUSAN D2. TEKNIK INFORMATIKA
M.EDI SANTOSA TI.5
M.EDI SANTOSA
VALIDASI DAN DATA MAHASISWA
A. TUJUAN
Mahasiswa memahami tentang pemograman web dinamis
Mampu melakukan cara membuat pemograman web dinamis
Mampu melakukan pemograman web dinamis
Mampu mengoperasikan pemograman web dinamis
B. DASAR TEORI
Pengertian
Pengertian Website Dinamis
Website Dinamis adalah Web yang content atau isinya dapat berubah - ubah setiap saat. Karena dalam
teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi user yang menggunakan
web dinamis tersebut.
Untuk perubahan content atau isi dokumen dalam sebuah web dinamis dibilang mudah ketimbang web
statis yang harus memiliki keahlian khusus pada bagian scripting web tersebut. Ketika kita akan
mengubah content atau isi dari sebuah web dinamis kita hanya perlu masuk kebagian control panel atau
M.EDI SANTOSA TI.5
M.EDI SANTOSA
bagian administrator web yang telah disediakan oleh script web dinamis.
Sebuah website dinamis biasanya dibuat menggunakan CMS (Compact Management System) tertentu
dengan penyimpanan data di data base (seperti Mysql) dan Biasanya web ini tersusun dari bahasa
pemograman yaitu HTML, CSS, PHP, JavaScript serta berhubungan dengan database MySQL
Contoh website dinamis adalah pada website portal berita seperti detik.com yang bisa di update
kapanpun dengan mudah dan cepat.
Kelebihan Website Dinamis
1. Konten dan layout dapat berubah-ubah. 2. Menggunakan dynamic html (DHTML). 3. Menggunakan pemrograman server untuk mengatur perubahan data. 4. Dapat menggunakan CMS (content management system) untuk mengubah konten website. 5. Konten web dan layout halaman dibuat terpisah, sehingga loading halaman lebih cepat. 6. Dapat menggunakan database untuk menyimpan konten. 7. Bisa mepasilitasi komunikasi dua arah antara admin dan visitor. 8. Konten terbaru selalu berada di urutan pertama karena untuk memperjelas konten yang
diupdate.
Kekurangan Website Dinamis
Lebih kompleks, sehingga sulit dalam pencarian Search Engine.
C. ALAT DAN BAHAN
Untuk melakukan Management file, alat dan bahan yang harus disediakan adalah sebagai
berikut:
1. Komputer
2. Noteped +++ , Wamp server
D. LANGKAH KERJA
Berisi tentang Scrip Validasi form dan SQL database pada data ambildata mahasiswa
dikembangkan dengan system AJAX.
M.EDI SANTOSA TI.5
M.EDI SANTOSA
DATA MAHASISWA
DB GAMBAR 1.1
M.EDI SANTOSA TI.5
M.EDI SANTOSA
GAMBAR 1.2
GAMBAR 1.3
M.EDI SANTOSA TI.5
M.EDI SANTOSA
-SCRIPT MAHASISWA.JS
function checkForm() {
// Fetching values from all input fields and storing them in variables.
var name = document.getElementById("username1").value;
var password = document.getElementById("password1").value;
var email = document.getElementById("email1").value;
var website = document.getElementById("website1").value;
//Check input Fields Should not be blanks.
if (name == '' || password == '' || email == '' || website == '') {
alert("Data harus terisi");
} else {
//Notifying error fields
var username1 = document.getElementById("username");
var password1 = document.getElementById("password");
var email1 = document.getElementById("email");
var website1 = document.getElementById("website");
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then
Generate alert.
if (username1.innerHTML == 'Harus lebih 3+ karakter' || password1.innerHTML == 'Password
terlalu pendek' || email1.innerHTML == 'Email salah' || website1.innerHTML == 'Website
salah')
{
M.EDI SANTOSA TI.5
M.EDI SANTOSA
alert("Data sudah tidak benar benar");
} else {
//Submit Form When All values are valid.
document.getElementById("myForm").submit();
}
}
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or
Try Again</a> the page.";
}
M.EDI SANTOSA TI.5
M.EDI SANTOSA
}
xmlhttp.open("GET", "validation.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}
-STYLE MAHASISWA.CSS
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px
}
M.EDI SANTOSA TI.5
M.EDI SANTOSA
.innerdiv{
width:65%;
float:left
}
form{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:500px;
margin:50px 250px 0 50px;
float:left;
height:400px;
padding:10px
}
h3{
margin-top:0;
color:#fff;
background-color:#0B87AA;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
M.EDI SANTOSA TI.5
M.EDI SANTOSA
input{
width:250px;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #a9a9a9;
margin:10px
}
input[type=button]{
background-color:#0B87AA;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff;
width:50%;
margin-left:105px;
margin-top:30px
}
span{
color:green
}
M.EDI SANTOSA TI.5
M.EDI SANTOSA
#myForm div{
color:red;
font-size:14px
}
-AMBILDATA.PHP
<?php
mysql_connect("localhost","root","");
mysql_select_db("pweb");
$nim = $_GET['q'];
if($nim){
$query = mysql_query("select alamat from mhs where nim=$nim");
while($d = mysql_fetch_array($query)){
echo $d['alamat'];
}
}
?>
-MAHASISWA.HTML
<html>
<head>
<script>
M.EDI SANTOSA TI.5
M.EDI SANTOSA
var ajaxku;
function ambildata(nim){
ajaxku = buatajax();
var url="ambildata.php";
url=url+"?q="+nim;
url=url+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open("GET",url,true);
ajaxku.send(null);
}
function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
M.EDI SANTOSA TI.5
M.EDI SANTOSA
if(data.length>0){
document.getElementById("alamat").value= data
}else{
document.getElementById("alamat").value= "";
}
}
}
</script>
</head>
<body>
Nama :
<select size="1" name="mhs" id="mhs"
onchange=ambildata(this.value)>
<option selected>--Pilih Mahasiswa--</option>
<option value="1321180002">Abdul Malik</option>
<option value="1321180003">Abdul Mufid</option>
<option value="1321180004">Abdus Salam</option>
</select>
</p>
<p>
Alamat : <textarea rows="4" id="alamat" name="alamat"
cols="42"></textarea>
</p>
M.EDI SANTOSA TI.5
M.EDI SANTOSA
Pada contoh berikut anda akan memilih nama dan mengambil data alamat di
database<br>
berdasarkan nama tersebut dan menampilkannya di halaman ini tanpa harus
me-reload<br>
keseluruhan halaman
</body>
</html>
VALIDASI
M.EDI SANTOSA TI.5
M.EDI SANTOSA
Gambar 2.1
Gambar 2.2
- Validasi.js
M.EDI SANTOSA TI.5
M.EDI SANTOSA
function checkForm() {
// Fetching values from all input fields and storing them in variables.
var name = document.getElementById("username1").value;
var password = document.getElementById("password1").value;
var email = document.getElementById("email1").value;
var website = document.getElementById("website1").value;
//Check input Fields Should not be blanks.
if (name == '' || password == '' || email == '' || website == '') {
alert("Data harus terisi");
} else {
//Notifying error fields
var username1 = document.getElementById("username");
var password1 = document.getElementById("password");
var email1 = document.getElementById("email");
var website1 = document.getElementById("website");
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid
Then
Generate alert.
if (username1.innerHTML == 'Harus lebih 3+ karakter' || password1.innerHTML ==
'Password
terlalu pendek' || email1.innerHTML == 'Email salah' || website1.innerHTML ==
'Website salah') {
alert("Data anda belum benar");
} else {
//Submit Form When All values are valid.
document.getElementById("myForm").submit();
}
}
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
M.EDI SANTOSA TI.5
M.EDI SANTOSA
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 &&xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 &&xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a
href='validasi.php'>Reload Or Try
Again</a>the page.";
}
}
xmlhttp.open("GET", "validasi.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}
- Validasi.php
<?php
$value = $_GET['query'];
$formfield = $_GET['field'];
// Check Valid or Invalid user name when user enters user name in username input field.
if ($formfield == "username") {
if (strlen($value) < 4) {
echo "Harus lebih 3+ karakter";
} else {
echo "<span>Benar</span>";
}
}
// Check Valid or Invalid password when user enters password in password input field.
if ($formfield == "password") {
if (strlen($value) < 6) {
echo "Password terlalu pendek";
} else {
echo "<span>Kuat</span>";
M.EDI SANTOSA TI.5
M.EDI SANTOSA
}
}
// Check Valid or Invalid email when user enters email in email input field.
if ($formfield == "email") {
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $value)) {
echo "Tidak Benar email";
} else {
echo "<span>Benar</span>";
}
}
// Check Valid or Invalid website address when user enters website address in website
input field.
if ($formfield == "website") {
if (!preg_match(
"/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i", $value)) {
echo "Tidak Benar website";
} else {
echo "<span>Benar</span>";
}
}
?>
- Validasi.css
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
#mainform h2{
width:100%;
float:left;
text-align:center;
M.EDI SANTOSA TI.5
M.EDI SANTOSA
margin-top:35px
}
.innerdiv{
width:65%;
float:left
}
form{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:500px;
margin:50px 250px 0 50px;
float:left;
height:400px;
padding:10px
}
h3{
margin-top:0;
color:#fff;
background-color:#0B87AA;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input{
width:250px;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #a9a9a9;
margin:10px
}
input[type=button]{
background-color:#0B87AA;
border:1px solid #fff;
M.EDI SANTOSA TI.5
M.EDI SANTOSA
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff;
width:50%;
margin-left:105px;
margin-top:30px
}
span{
color:green
}
#myForm div{
color:red;
font-size:14px
}
- Validasi.html
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<div class="innerdiv">
<!-- Required Div Starts Here -->
<h2>Validasi Form Dengan AJAX</h2>
<form action='#' id="myForm" method='post' name="myForm">
<h3>Masukkan Data!</h3>
<table>
<tr>
M.EDI SANTOSA TI.5
M.EDI SANTOSA
<td>Username</td>
<td><input id='username1' name='username' onblur="validate('username', this.value)"
type='text'
></td>
<td>
<div id='username'></div>
</td>
</tr>
<tr>
<td>Password</td>
<td><input id='password1' name='password' onblur="validate('password', this.value)"
type='password'></td>
<td>
<div id='password'></div>
</td>
</tr>
<tr>
<td>Email</td>
<td><input id='email1' name='email' onblur="validate('email', this.value)"
type='text'></td>
<td>
<div id='email'></div>
</td>
</tr>
<tr>
<td>website</td>
<td><input id='website1' name='website' onblur="validate('website', this.value)"
type='text'></td>
<td>
<div id='website'></div>
</td>
</tr>
</table>
<input onclick="checkForm()" type='button' value='Submit'>
</form>
</div>
</body>
M.EDI SANTOSA TI.5
M.EDI SANTOSA
</html>
E. HASIL DAN KESIMPULAN
Hasil web dinamis mempunyai konten yang lengkap dan butuh pengkodingan serius
dalam membuatnya dan butuh ketelitian yang extra.
Kesimpulan membuat web dinamis banyak kegunaaanya karena sistem update datanya
bisa runtime sesuai setingan programernya dan informasi cepat muncul tanpa adanya
mengulangan.