Diktat Rekayasa Web PDF
Diktat Rekayasa Web PDF
REKAYASA WEB
UNIVERSITAS SEMARANG
MODUL PRAKTIKUM REKAYASA WEB OLEH SITI ASMIATUN | M.KOM | November 14,
2015
DAFTAR ISI
1. MODUL 1 ............................................................................................. 1
1.1. Pengenalan XML........................................................................... 1
1.2. Latihan .......................................................................................... 8
2. MODUL 2............................................................................................. 13
2.1 Insert Data dengan XML .............................................................. 13
2.2 Backup Data dengan XML ........................................................... 17
3. MODUL 3 ............................................................................................. 20
3.1. Multi Table dengan MySQL dan Convert Ke XML ..................... 20
3.2. Tugas ............................................................................................ 23
4. MODUL 4 ............................................................................................ 24
4.1. Implementasi Template Bootstrap untuk Back-End .................. 24
4.2. Tugas ............................................................................................. 27
4.3. Insert Data ....................................................................................
5. MODUL 5............................................................................................. 38
5.4. Restore Data XML Ke MySQL...................................................... 38
c. Sintaks XML
a. Heading standart untuk document XML
Biasakanlah setiap membuat XML diawali dengan heading standard
XML. Formatnya adalah
<?xml version=1.0 encoding=iso-8859-1?>
b. Dokumen XML harus memilliki root tag
Dokumen XML yang baaik harus memiliki root tag. Yaitu tag yang
melingkupi keseluruhan dari dokumen. Tag-tag yang lain, disebut child
tag, berada didalam root membentuk hirarki seperti gambar 2.1
h. Menyisipkan komentar
Pada bahasa pemrograman atau scripting kita mengenal adanya
komentar (comment). Komentar adalah kalimat/baris yang tidak
dieksekusi oleh compiler, browser atau parser. Untuk menyisipkan
komentar pada dokumen XML caranya adalah sebagai berikut:
<!Baris ini tidak di eksekusi oleh parser -->
i. Menggunakan karakter illegal pada XML
Sama seperti pada HTML, anda tidak bisa menggunakan karakter
seperti kurung siku (< atau >), petik tunggal (), dan petik ganda () .
Contoh dibawah ini akan menghasilkan error kalau di eksekusi oleh
browser.
<syarat>jika jumlah < 1000 maka</syarat>
j. Namespace XML
Dari pembahasan terdahulu kita mengetahui bahwa tag-tag pada XML
tidak didefinisikan secara baku tetapi kita buat sendiri sesuai keinginan
kita. Karena itu akan sering terjadi konflik pada dua dokumen yang
menggunakan nama tag yang sama tetapi mewakili dua hal yang
berbeda. Contoh: bila ada dokumen yang mendiskripsikan tentang
kebutuhan material pembuatan gardu jaga dari bambu
<bambu>
<jenis>Jawa</jenis>
<panjang>2</panjang>
</bambu>
1.2. LATIHAN
a. Latihan 1 memformat XML dengan CSS
Buatlah file baru dengan code sebagai berikut :
2.3 TUGAS 1
Silahkan anda buat tampilan seperti di bawah ini dengan mengenerate dari file
jurusan.xml, bukan langsung dari database
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link
href="http://fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400
,700italic,700,900italic,900"
rel="stylesheet" type="text/css">
</head>
<body>
MODUL PRAKTIKUM REKAYASA WEB OLEH
25
SITI ASMIATUN, M.KOM
<section class="container">
<section class="login-form">
<section class="container">
<section class="login-form">
<form method="post" action="check.php"
role="login">
<input type="email" name="user"
placeholder="Username" required class="form-control input-lg" />
<input type="password"
name="password" placeholder="Password" required class="form-control input-
lg" />
<button type="submit" name="go"
class="btn btn-lg btn-primary btn-block">Sign in</button>
</form>
</section>
</section>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
<?php
# Koneksi ke server
$db = mysql_connect("localhost","root","");
if (!$db) {
die('Tidak dapat tersambung dengan database: ' . mysql_error());
}
# Koneksi ke database
mysql_select_db("t_mhs",$db);
$user = $_POST['user'];
$password = md5($_POST['password']);
$query = mysql_query("SELECT * FROM login where username='$user'");
$result = mysql_fetch_array($query);
$row = mysql_num_rows($query);
if(($user == "") && ($password == ""))
{
print "<center>Anda belum memasukkan username dan password !";
exit;
}
if($row != 0)
{
if($password != $result['password'])
{
print "<center>Password salah !";
}
else
{
header("location: home.php");
}
}
else
{
print "<center>Maaf, Username tidak terdaftar !<br>Silahkan login ulang
<a href='index.php'><font
color=blue>disini</a></font>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sistem Informasi Akademik Universitas Semarang</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
SIA-Universitas Semarang
</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Mahasiswa</a>
</li>
<li>
MODUL PRAKTIKUM REKAYASA WEB OLEH
<a href="#">Jurusan</a> 29
SITI</li>
ASMIATUN, M.KOM
<li>
<a href="#">Mata Kuliah</a>
</li>
Untuk menampilkan halaman utama, buka halaman login dan masukkan
username dan password sesuai dengan data di database. Jika validasi
login berhasil maka halaman utama akan menampilkan gambar sebagai
berikut :
session_start();
session_destroy();
header("Location: index.html");
?>
Copy syntax sql diatas, dan paste pada panel sql di database
localhost/phpmyadmin kemudian klik go. Dan untuk menampilkan data
mahasiswa kedalam website back-end berikut source code nya :
<?php
# Koneksi ke server
$db = mysql_connect("localhost","root","");
if (!$db) {
die('Tidak dapat tersambung dengan database: ' . mysql_error());
}
# Koneksi ke database
mysql_select_db("t_mhs",$db);
?>
<!-- div judul content-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-
primary">Aksi</button>
</div>
</div>
</div>
</div>
<!-- div akhir modal popup-->
<!--tabel daftar mahasiswa-->
<table class="table table-condensed table-bordered table-hover" cellpadding="0"
cellspacing="0">
<!-- judul kolom tabel-->
<thead>
<tr><th style="width:20px">#</th>
<th style="width:120px">NIM</th>
<th style="width:200px">Nama</th>
<th>Alamat</th>
<th style="width:120px">Kelas</th>
<th style="width:120px">Status</th>
<th style="width:40px"></th>
</tr>
</thead>
<!-- akhir judul kolom tabel-->
<tbody>
<!-- Page untuk memanggil content yang sesuai dengan menu -->
<?php
$pagee=$_GET['page'];
switch ($pagee){
case 1 :
include
"viewmhs.php";
break;
default :
echo "<h1>Halaman
Administrator</h1>
<p>Website ini digunakan untuk pengelolaan data mahasiswa
dan mata kuliah mahasiswa. Diharapkan dengan website ini dapat
mempermudah</p>
<p>pengelolaan data di
dalam civitas akademik.<code>#USM</code>.</p>
<a href='#menu-toggle' class='btn btn-default' id='menu-
toggle'>Hidden Menu</a>";
}
?>
<section class="login-form">
<form method="post"
action="home.php?page=7&act=save" role="login">
<input type="text" name="nim"
placeholder="NIM" value='<?php echo $result['nim'];?>' required class="form-control input-lg"
/>
<input type="text" name="nama"
placeholder="Nama" value='<?php echo $result['nama'];?>' required class="form-control
input-lg" />
<input type="text" name="alamat"
placeholder="Alamat" value='<?php echo $result['alamat'];?>' required class="form-control
input-lg" />
<input type="text" name="jenis"
placeholder="Jenis Kelamin" value='<?php echo $result['jenis_kelamin'];?>' required
class="form-control input-lg" />
<select required name='status'
class="form-control input-lg" >
<option >-Status-</option>
<option
value=1>Aktif</option>
<option value=0>Tidak
Aktif</option>
</select>
<button type="submit" name="go"
class="btn btn-lg btn-primary btn-block">Save</button>
</form>
</section>
<?php
# Koneksi ke server
$db = mysql_connect("localhost","root","");
if (!$db) {
die('Tidak dapat tersambung dengan database: ' . mysql_error());
}
# Koneksi ke database
mysql_select_db("t_mhs",$db);
$nim=$_POST['nim'];
$nama=$_POST['nama'];
$alamat=$_POST['alamt'];
$jenis=$_POST['jenis'];
$status=$_POST['status'];
if ($_POST['act']='save'){
$q = "INSERT INTO mahasiswa
VALUES('','$nim','$nama','$alamat','$jenis_kelamin','$status')";
}
else{
$q = "UPDATE mahasiswa SET nama='$nama', alamat='$alamat',
jenis_kelamin='$jenis', status='$status' where NIM='$nim')";
}
$result = mysql_query($q);
if ($result) {
echo '<h2>Data sukses tersimpan </h2>';
}
else {echo '<h2>Tidak dapat menyiimpan database</h2>';
}
?>
$xmlstr = $datta.'.xml';
$data = new SimpleXMLElement($xmlstr, null, true);
foreach ($data as $row) {
if ($datta=='jurusan'){
$Kode_Makul = $row -> Kode_Makul;
$Nama_Makul = $row -> Nama_Makul;
$Sks = $row -> Sks;
$Jurusan = $row -> Jurusan;
$Fakultas = $row -> Fakultas;
$Web = $row -> Web_Jurusan;
}else if ($datta=='mahasiswa'){
$Kode_mhs = $row -> Kode;
$NIM = $row -> NIM;
$nama = $row -> Nama;