diktat-rekayasa-web - Mia Website

HANDOUT PRAKTIKUM
REKAYASA WEB
FAKULTAS ILMU KOMUNIKASI DAN KOMPUTER
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
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
1
MODUL 1
1.1. PENGENALAN XML
a.
Teori Singkat
XML
kependekan
dari
eXtensible
Markup
Language,
dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C
pada bulan Februari 1998. Teknologi yang digunakan pada XML sebenarnya
bukan teknologi baru, tapi merupakan turunan dari SGML yang telah
dikembangkan pada awal 80-an dan telah banyak digunakan pada
dokumentasi
teknis
proyek-proyek
berskala besar.
Ketika
HTML
dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian
paling penting pada SGML dan dengan berpedoman pada pengembangan
HTML menghasilkan markup language yang tidak kalah hebatnya dengan
SGML.
Seperti halnya HTML, XML juga menggunakan elemen yang
ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’),
tag penutup(diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen(parameter
yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya
bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai
didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut
sesuai kehendak kita. Untuk lebih jelasnya lihat contah dibawah:
<pesan>
<dari>Bapak Tri</dari>
<buat>Ibu Yun</buat>
<buat>Kaprodi TI</buat>
<buat>Fakultas ILKOM</buat>
<subyek>Rapat Akhir Bulan</subyek>
<isi>Mohon kehadiran nya untuk rapat akhir bulan untuk pembahasan
jadwal sidang</isi>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
2
</pesan>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
3
pada contoh diatas <pesan>, <dari> <buat>,dan <isi> bukanlah tag standard
yang telah di tetapkan dalam XML. Tag-tag itu kita buat sendiri sesuai
keinginan kita. Sampai di sini XML tidak melakukan apapun. Yang ada
hanyalah informasi yang di kemas dengan tag-tag XML. Kita harus
membuat software
lagi untuk
untuk
mengirim,
menerima
atau
menampilkan informasi di dalamnya.
Gambar 1.1 Tampilan dokumen xml pada browser
XML untuk saat ini bukan merupakan pengganti HTML. Masingmasing dikembangkan untuk tujuan yang berbeda. Kalau HTML digunakan
untuk menampilkan informasi dan berfokus pada bagaimana informasi
terlihat, XML mendeskripsikan susunan informasi dan berfokus pada
informasi itu sendiri. XML terutama dibutuhkan untuk menyusun dan
menyajikan informasi dengan format yang tidak mengandung format
standard layaknya heading, paragraph, table dan lain sebagainya. Sama
dengan HTML, File XML berbentuk teks sehingga bila diperlukan kita bisa
membacanya tanpa memerlukan bantuan software khusus. Hal ini
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
4
memudahkan pengembang aplikasi yang menggunakan XML untuk
mendebug programnya. XML lebih fleksible dibanding HTML dalam hal
kemampuannya menyimpan informasi dan data. Pada XML kita bisa
menyimpan data baik dalam atribut maupun sebagai isi elemen yang
diletakkan diantara tag pembuka dan tag penutup. Kelebihan lain yang
dimiliki XML adalah bahwa informasi bisa di pertukarkan dari satu system
ke system lain yang berbeda platform. Misalnya dari Windows ke Unix, atau
dari PC ke Machintosh bahkan dari internet ke handphone dengan
teknologi WAP.
b.
Bagian-bagian dari Dokumen XML
Sebuah dokumen XML terdiri dari bagian bagian yang disebut dengan node.
Node-node itu adalah:
1. Root node yaitu node yang melingkupi keseluruhan dokumen. Dalam
satu dokumen XML hanya ada satu root node. Node-node yang lainnya
berada di dalam root node.
2. Element node yaitu bagian dari dokumen XML yang ditandai dengan
tag pembuka dan tag penutup, atau bisa juga sebuah tag tunggal elemen
kosong seperti <anggota nama=”budi”/> . Root node biasa juga disebut
root element
3. Attribute note termasuk nama dan nilai atribut ditulis pada tag awal
sebuah elemen atau pada tag tunggal.
4. Text node, adalah text yang merupakan isi dari sebuah elemen, ditulis
diantara tag pembuka dan tag penutup
5. Comment node adalah baris yang tidak dieksekusi oleh parser
6. Processing Instruction node, adalah perintah pengolahan dalam
dokumen XML. Node ini ditandai awali dengan karakter <? Dan
diakhiri dengan ?>. Tapi perlu diingat bahwa header standard XML
<?xml
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
5
version=”1.0” encoding=”iso-8859-1”?> bukanlah processing instruction
node. Header standard bukanlah bagian dari hirarki pohon dokumen
XML.
7. NameSpace Node, node ini mewakili deklarasi namespace
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
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
6
c. Tag pada XML harus lengkap berpasangan
Pada HTML beberapa element tidak harus berpasangan. Tapi di dalam
sintaks XML harus memliki tag penutup untuk setiap tag yang kita buat.
<p> Paragraph pertama </p>
d. XML membedakan huruf besar dengan huruf kecil
Pada XML, <tanggal> berbeda dengan <Tanggal>. Tag pembuka dan tag
penutup harus sama susunan huruf besar dan kecilnya.
e. Penulisan tag harus benar
Penulisan tag pada XML harus mengikuti aturan Last In First Out
(LIFO). seperti yang kita bahas terdahulu, pada XML kita tidak bisa
membuat tag yang saling bersilang seperti dibawah ini
<p><b>Huruf Tebal</p></b>
tapi harus disusun seperti ini
<p><b>Huruf tebal</b></p>
f. XML mempertahankan spasi seperti apa adanya
g. Nilai atribut harus diletakkan diantara tanda petik
Seperti HTML, XML memiliki atribut. Nilai atribut harus diletakkan
diantara dua tanda petik. Tidak masalah apakah tanda petik tunggal
atau tanda petik ganda. Contoh dibawah ini dua-duanya benar
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
7
<pesan dari=”lusy”> atau <pesan dari=’lusy’>
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 :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
8
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="cobacss.css"?>
<buku>
<resensi>
<judul>Basis Data</judul>
<ulasan>Buku ini di tulis oleh Mr. X dengan mengulas relasi secara
tuntas</ulasan>
</resensi>
<resensi>
<judul>Web Programming</judul>
<ulasan>Buku ini di tulis oleh Mr. X dengan mengulas Ajax PHP secara
tuntas</ulasan>
</resensi>
</buku>
Lalu simpanlah dengan nama buku.xml. Kemudian buat file baru untuk
mengatur tampilan dari data xml diatas dengan sourcecode sebagai
berikut :
buku
{
background-color: #ffffff;
width: 100%;
}
resensi
{
display: block;
background-color: #DDDDDD;
margin-bottom: 5pt;
}
judul
{
background-color: #999999;
margin-bottom: 12pt;
}
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
9
ulasan
{
color: #0000FF;
font-size: 12pt;
}
Dan simpan dengan nama cobacss.css, dan kedua file tersebut simpanlah
di dictonary C:xampp/htdocs/latihan. Kemudia untuk menampilkan ke
web browser, ketikkan alamat url dengan alamat
localhost/latihan/buku.xml maka browser akan menampilkan sebagai
berikut :
2.2 Hasil Latihan memformat xml dengan css
b. Latihan 2 parsing XML didalam PHP
Buatlah file dokumen xml dengan sourcecode sebagai berikut :
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<buku isbn="978-1594489501">
<judul>Bumi Manusia</judul>
<pengarang>Pramoedya Ananta Toer</pengarang>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
10
<penerbit>Lentera Dipantara</penerbit>
<harga>90000</harga>
</buku>
<buku isbn="979-1594329501">
<judul>Anak Semua Bangsa</judul>
<pengarang>Pramoedya Ananta Toer</pengarang>
<penerbit>Lentera Dipantara</penerbit>
<harga>94000</harga>
</buku>
<buku isbn="980-1594489213">
<judul>Jejak Langkah</judul>
<pengarang>Pramoedya Ananta Toer</pengarang>
<penerbit>Lentera Dipantara</penerbit>
<harga>98000</harga>
</buku>
<buku isbn="985-1518789501">
<judul>Rumah Kaca</judul>
<pengarang>Pramoedya Ananta Toer</pengarang>
<penerbit>Lentera Dipantara</penerbit>
<harga>84000</harga>
</buku>
</books>
Simpanlah dengan nama buku.xml. Kemudian buatlah file new dengan
code sebagai berikut :
<html>
<head><title>Daftar Buku</title></head>
<body>
<h3>Daftar Buku Terbaru</h3>
<?php
$books = new SimpleXMLElement('buku.xml', null, true);
echo "<table border='1'>
<tr>
<th>Judul</th>
<th>Pengarang</th>
<th>Penerbit</th>
<th>Harga</th>
<th>ISBN</th>
</tr>";
foreach($books as $buku){
echo "<tr>
<td width='200'>{$buku->judul}</td>
<td width='200'>{$buku->pengarang}</td>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
11
<td width='130'>{$buku->penerbit}</td>
<td width='80'>{$buku->harga}</td>
<td width='130'>{$buku['isbn']}</td>
</tr>";
}
echo "</table>";
?>
</body>
</html>
Dan simpanlah file tersebut dengan nama buku.php dan simpanlah kedua
file ke dalam dictonary C:/xampp/htdocs/latihan. Kemudian panggilah file
terebut dengan mengetikkan alamat url localhost/latihan/buku.xml, jika
berhasil akan menampilkan gambar berikut :
Gambar 3.1 Hasil Parsing xml dengan php
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
12
MODUL 2
2.1 INSERT DATA DENGAN XML
Pada kesempatan ini, kita akan mencoba menginputkan sebuah data kedalam
database menggunakan xml. Tahapan untuk menginputkan data ke database
sebagai berikut
a. Buatlah database mahasiswa di database lokal pc anda, kemudian buatlah
tabel t_mhs dengan struktur database seperti dibawah ini :
Gambar 2.1 Struktur tabel mahasiswa
b. Buatlah file koneksi.php dan simpan didalam satu folder dictonary
C:/xampp/htdocs/latihan. Source code koneksi.php sebagai berikut :
<?php
function koneksi_db(){ //untuk koneksi database
$host = "localhost";
$database ="t_mhs";
$user = "root";
$password = "";
$link=mysql_connect($host,$user,$password);
mysql_select_db($database,$link); if(!$link){
echo "Error : ".mysql_error(); }
else{ return $link; }
}
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
13
c. Kemudian untuk input data mahasiswa, buatlah form input data
mahasiswa dan save dengan nama form.php di directory yang sama,
source codenya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>
FORM NILAI MAHASISWA
</title>
</head>
<body>
<form action="./add_mhs.php" method="post">
<h2><center>.:: SELAMAT DATANG ::.</center></h2>
<fieldset>
<legend><strong>DATA NILAI MAHASISWA</strong></legend><br>
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" placeholder="Masukkan NIM
Lengkap Anda" required size="30"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Masukkan Nama
Lengkap Anda" required size="30"></td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td><select name="jurusan">
<option>Teknik Informatika (S1)</option>
<option>Sistem Informasi (S1)</option>
<option>Managemen Informatika (D3)</option>
<option>Teknik Komputer (D3)</option>
<option>Komputerisasi Akuntansi (D3)</option>
</td>
</tr>
<tr>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
14
<td>Semester</td>
<td>:</td>
<td><input type="radio" name="semester" value="I">I
<input type="radio" name="semester" value="II">II
<input type="radio" name="semester" value="III">III
<input type="radio" name="semester" value="IV">IV
<input type="radio" name="semester" value="V">V
<input type="radio" name="semester" value="VI">VI
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" name="jenis" value="Laki-Laki">Laki-Laki
<input type="radio" name="jenis"
value="Perempuan">Perempuan
</td>
</tr>
<tr>
<td>Masukkan Nilai</td>
<td>:</td>
<td><input type="number" name="nilai" min="0" max="100"
required></td>
</tr>
</table>
</fieldset>
<br>
<center>
<input type="submit" name="simpan" value="SIMPAN">
<input type="reset" name="hspus" value="HAPUS">
</center>
</form>
</body>
</html>
Untuk menampilkan form input mahasiswa, ketikkan alamat
localhost/latihan/form.php pada browser. Dan jika berhasil, hasilnya
sebagai berikut :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
15
Gambar 2.2 Tampilan input nilai mahasiswa
d. Dan untuk perintah insert hasil input penilaian mahasiswa ke database
menggunnakan source code sebagai berikut :
<?php
include('koneksi.php');
header('Content-Type:text/xml');
if(isset($_POST['nim'],$_POST['nama'],$_POST['jurusan'],$_POST['semester'],$
_POST['jenis'],$_POST['nilai'])){
$link=koneksi_db();
$sql='INSERT INTO t_mhs
VALUES("'.$_POST['nim'].'","'.$_POST['nama'].'","'.$_POST['jurusan'].'","'.$_POS
T['semester'].'","'.$_POST['jenis'].'","'.$_POST['nilai'].'")';
$res=mysql_query($sql,$link);
if($res){
echo '<xml>';
echo '<data>';
echo '<status>1</status><message>data Insert</message>';
echo '</data>';
echo '</xml>';
}else{
echo
'<xml><error><no>'.mysql_errno().'</no><message>'.mysql_error().'</message
></error></xml>';
}
}else{
echo '<xml><error><no>404</no><message>one or more parameter
needed</message></error></xml>';
}
?>
Simpan source code diatas dengan nama add_mhs.php di directory yang sama.
Dan coba inputkan penilaian mahasiswa dengan memanggil
localhost/latihan/form.php pada url browser. Jika input form nilai mahasiswa
berhasil, maka akan tampil sebagai berikut :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
16
Gambar 2.3 Tampilan hasil insert data mahasiswa
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
17
2.2 BACKUP DATA DARI MYSQL KE XML
Backup data dibutuhkan untuk menyediakan data kedalam format lain ketika
data tersebut sangat diperlukan misalnya untuk migrasi sistem karena terjadi
kerusakan. Praktikum kali ini akan membahas tentang backup data dari mysql ke
dalam format xml. Tahapan backup data sebagai berikut :
a. Siapkan sebuah tabel untuk sample data, buatlah table jurusan dengan struktur
tabel seperti dibawah ini :
2.4 Struktur tabel jurusan
b. Isi tabel jurusan dengan data sebagai berikut :
2.5 Data tabel jurusan
c. Kemudian untuk mem backup tabel jurusan tersebut buatlah file
jurusan.php pada notepad++ dan ke dalam direktory
C:/xampp/htdocs/latihan, dengan source ocde sebagai berikut :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
18
<?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("xml",$db);
$result = mysql_query("select * from jurusan", $db);
# Membuat object SimpleXMLElement
$xml = new SimpleXMLElement('<xml/>');
# Menambah isi kolom node pada object XML
while($row = mysql_fetch_assoc($result)) {
$mydata = $xml->addChild('program_studi');
$mydata->addChild('Id',$row['id_jurusan']);
$mydata->addChild('Jurusan',$row['nama_jurusan']);
$mydata->addChild('Fakultas',$row['fakultas']);
$mydata->addChild('Email_Jurusan',$row['email_jurusan']);
$mydata->addChild('Web_Jurusan',$row['web_jurusan']);
$mydata>addChild('Nomor_Telepon_Jurusan',$row['no_telepon_jurusan']);
}
# Menutup koneksi MySQL
mysql_close($db);
# Kondisi jika file XML ada
if(file_exists("jurusan.xml")){
echo "File XML untuk jurusan sudah ada";
}
else{
# Membuat File XML
$fp = fopen("jurusan.xml","wb");
# Menulis node XML
fwrite($fp,$xml->asXML());
# Menutup koneksi database
fclose($fp);
echo "File XML jurusan.xml sudah
terconvert.
Silahkan anda buka file jurusan.xml";
}
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
19
Untuk membackup tabelnya, buka browser dan isikan urlnya dengan
alamat localhost/latihan/jurusan.php. Jika berhasil , maka akan tampil
sebagai berikut :
2.6 Hasil backup tabel jurusan
Setelah muncul pesan diatas, untuk melihat hasil backup, ganti alamat
urlnya menjadi localhost/latihan/jurusan.xml dan akan keluar data tabel
jurusan dengan struktur xml di browser anda.
2.3 TUGAS 1
Silahkan anda buat tampilan seperti di bawah ini dengan mengenerate dari file
jurusan.xml, bukan langsung dari database
2.7 Tampilan generate file jurusan.xml
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
20
MODUL 3
3.1.
MULTI TABLE DENGAN MYSQL DAN CONVERT KE XML
Multitable digunakan untuk menarik data dari dua atau lebih tabel yang ada
di database. Masih berhubungan dengan tabel jurusan yang telah dibuat di
modul 2 sebelumnya, untuk praktikum modul 3 kali ini tahapan multitable
adalah sebagai berikut :
a.
buatlah tabel matkul didalam database yang sama dengan jurusan,
struktur tabelnya berikut ini :
3.1 Struktur tabel matkul
b. Dari struktur tabel diatas, isilah dengan data berikut ini :
3.2 Isi tabel matkul
c.
Kemudian buatlah sebuah file double.php dan simpanlah di folder
localhost/latihan seperti modul sebelumnya dengan source code nya
sebagai berikut :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
21
<?php
$db = mysql_connect("localhost","root","");
if (!$db) {
die('Tidak dapat tersambung dengan database: ’ . mysql_error());
}
mysql_select_db("xml",$db);
#perintah query untuk multi table antara tabel jurusan dan matkul
$result = mysql_query("select
a.kode_mk,a.nama_mk,a.sks,b.nama_jurusan,b.fakultas,
b.web from makul a, jurusan b where a.id_progdi=b.id_jurusan", $db);
$xml = new SimpleXMLElement('<xml/>');
while($row = mysql_fetch_assoc($result)) {
$mydata = $xml->addChild('join');
$mydata->addChild('Kode_Makul',$row['kode_mk']);
$mydata->addChild('Nama_Makul',$row['nama_mk']);
$mydata->addChild('Sks',$row['sks']);
$mydata->addChild('Jurusan',$row['nama_jurusan']);
$mydata->addChild('Fakultas',$row['fakultas']);
$mydata->addChild('Web_Jurusan',$row['web_jurusan']);
}
mysql_close($db);
if(file_exists("double.xml")){
echo "File XML untuk Double sudah ada";
}
else{
$fp = fopen("double.xml","wb");
fwrite($fp,$xml->asXML());
fclose($fp);
echo "File XML double.xml sudah terconvert.
Silahkan anda buka file double.xml";
}
?>
File double.php tersebut digunakan untuk convert semua data yang ada di
database kedalam format xml. Untuk melihat hasilnya ketikkan alamat url
pada browser dengan localhost/latihan/double.php. Jika tidak error maka
akan keluar pesan berikut :
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
22
3.3 Pesan convert data multi table jurusan dan matkul
Setelah itu untuk mengecek data yang sudah terconvert kedalam xml,
silahkan akses melalui localhost/latihan/double.xml pada browser maka
akan keluar gambar sebagai berikut :
Gambar 3.4 Hasil convert multi table
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
23
3.2. TUGAS 2
Buatlah tampilan data double.xml diatas menjadi sebuah tabel seperti gambar
dibawah ini :
Gambar 3.5 Tampilan hasil convert multitable
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
24
MODUL 4
4.1. Implementasi template Bootstrap untuk back-end
Untuk membuat website back-end agar tidak mendesain
ulang websitenya bisa memanfaatkan penggunaan template. Banyak
template free yang tersedia di google, hanya saja untuk mata kuliah
ini akan menggunakan template Bootstrap karena template bootstrap
sudah menggunakan HTML 5 yang lebih responsive ketika website
diakses di PC, HP, atau tablet. Berikut tahapan untuk membuat
website back-end :
a. Membuat halaman Login
Untuk membuat halaman login kita perlu sebuah folder assets
dan file index.php. Folder asset berisi style css bootstrap dan
image yang dibutuhkan halaman login. Berikut source code
halaman login.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" />
<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">
<link rel="stylesheet" type="text/css"
href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
</head>
<body>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
<section class="container">
<section class="login-form">
25
<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 inputlg" />
<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>
Simpan file tersebut didalam folder back-end dengan nama
index.php. Jika semua file template sudah lengkap maka
tampilan loginnya seperti gambar berikut :
Gambar 4.1 Halaman Login
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
26
b. Buatlah tabel login dengan struktur tabel sebagai berikut :
Kemudian isilah tabel tersebut dengan nama masing-masing
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
27
c. Membuat validasi login ke sistem
Buat file baru dengan nama check.php dan source code nya sebagai
berikut :
<?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>";
}
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
28
d. Membuat halaman utama
Halaman utama berisi menu-menu yang tersedia untuk website backend. Karena halaman utama ini merupakan template Bootstrap jadi
utama ini membutuhkan file-file tambahan yaitu css, font, dan js.
Source code halaman utama sebagai berikut :
<!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>
SITI</li>
ASMIATUN, M.KOM
<li>
<a href="#">Mata Kuliah</a>
</li>
29
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 :
Gambar 4.2 Halaman Utama
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
30
e. Menambahkan Session pada Login dan Logout
Kegunaan session adalah untuk melakukan aktivitas yang berhubungan
dengan interaksi user pada sebuah web server php. Untuk kali ini saya
akan jelaskan penggunaan session untuk login dan logout. Untuk
menambahkan session login tambahkan lah syntax berikut :
1. session_start(); pada record paling atas di file check.php untuk
memulai session ketika login
2. Masih pada file check.php, tambahkan juga syntax
$_SESSION['username'] = $_POST['user'];
diatas syntax
header("location: home.php");
untuk memberikan value session username ketika berhasil login
3. Kemudian untuk validasi session di halaman utama, tambahkan
syntax
<?php
session_start();
if (!isset($_SESSION['username'])){
header("Location:index.php");
}
?>
Pada record paling atas di file home.php, untuk mengakhiri session
ketika logout, buatlah file logout.php di notepad dan isikan source
code sebagai berikut :
<?php
session_start();
session_destroy();
header("Location: index.html");
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
31
f. Membuat Content Daftar Mahasiswa
Content daftar mahasiswa digunakan untuk menampilkan data
mahasiswa dari database, sebelum menampilkan data mahasiswa,
buatlah tabel mahasiswa di database anda berikut struktur tabel
mahasiswanya :
CREATE TABLE `mahasiswa` (
`kd_mhs` int(11) NOT NULL auto_increment,
`nim` varchar(14) NOT NULL,
`nama` varchar(50) NOT NULL,
`alamat` varchar(160) NOT NULL,
`jenis_kelamin` varchar(25) NOT NULL,
`status` tinyint(1) NOT NULL,
PRIMARY KEY (`kd_mhs`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2223 ;
INSERT INTO `mahasiswa` (`kd_mhs`, `nim`, `nama`, `alamat`,
`jenis_kelamin`, `status`) VALUES
(1, 'G231140082', 'Winanda Nor Risky', 'Semarang', 'Laki-laki', 1),
(2, 'G231130059', 'Sukma Ade', 'Semarang', 'Perempuan', 1),
(3, 'G231130057', 'M.Satriya J', 'Semarang', 'Laki-laki', 1);
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-->
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
32
<div class="container">
<div class="row">
<h3>
Data Mahasiswa
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" datatarget="#myModal">Tambah Data</button>
</h3>
<div id="data-mahasiswa"></div>
</div>
</div>
<!-- akhir div judul content-->
<!-- div tombol tambah-->
<div id="dialog-mahasiswa" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div
class="modal-header">
<button type="button" class="close" data-dismiss="modal"
ariahidden="true">×</button>
<h3 id="myModalLabel">Tambah Data Mahasiswa</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"
ariahidden="true">Batal</button>
<button id="simpan-mahasiswa" class="btn btn-success">Simpan</button>
</div>
</div>
<!-- div akhir tombol tambah-->
<!-- div modal popup-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
33
<button type="button" class="close" datadismiss="modal" aria-label="Tutup"><span ariahidden="true">×</span></button>
<h4 class="modal-title">Judul modal</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Tutup</button>
<button type="button" class="btn btnprimary">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>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
34
<?php
$i = 1;
$jml_per_halaman = 5;
$jml_data = mysql_num_rows(mysql_query("SELECT * FROM mahasiswa"));
$jml_halaman = ceil($jml_data / $jml_per_halaman);
#perintah query untuk menampilkan ndata mahasiswa
$query = mysql_query("SELECT * FROM mahasiswa LIMIT 0, $jml_per_halaman");
$halaman = 1; //tambahan
#kondisi untuk data satatus mahasiswa jika 1 maka aktif jika 0 maka tidak aktif
while($data = mysql_fetch_array($query)) {
if($data['status']==1) {
$status = "Aktif";
} else {
$status = "Tidak Aktif"; }
?>
<!-- kolom untuk menampilkan data mahsiswa -->
<tr><td><?php echo $i ?></td>
<td><?php echo $data['nim'] ?></td>
<td><?php echo $data['nama'] ?></td>
<td><?php echo $data['alamat'] ?></td>
<td><?php echo $data['jenis_kelamin'] ?></td>
<td><?php echo $status ?></td>
<!--kolom untuk edit dan delete data mahasiswa per record-->
<td>
<a href="#dialog-mahasiswa" id="<?php echo $data['kd_mhs'] ?>" class="ubah" datatoggle="modal"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"
id="<?php echo $data['kd_mhs'] ?>" class="hapus"><span class="glyphicon glyphiconremove"></span></a></td>
</tr>
<?php
$i++; }
?>
</tbody>
</table>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
35
<!--akhir tabel daftar mahasiswa-->
<!-- div pengaturan halaman-->
<div class="pagination pagination-right">
<ul>
<?php
$no_hal_tampil = 5;
// lebih besar dari 3
if ($jml_halaman <= $no_hal_tampil) {
$no_hal_awal = 1;
$no_hal_akhir = $jml_halaman;
}
else {
$val = $no_hal_tampil - 2; //
$mod = $halaman % $val; //
$kelipatan = ceil($halaman/$val);
$kelipatan2 = floor($halaman/$val);
if($halaman < $no_hal_tampil) {
$no_hal_awal = 1;
$no_hal_akhir = $no_hal_tampil;
}
elseif ($mod == 2) {
$no_hal_awal = $halaman - 1;
$no_hal_akhir = $kelipatan * $val + 2;
} else {
$no_hal_awal = ($kelipatan2 - 1) * $val + 1;
$no_hal_akhir = $kelipatan2 * $val + 2;
}
if($jml_halaman <= $no_hal_akhir) {
$no_hal_akhir = $jml_halaman;
}
}
for($i = $no_hal_awal; $i <= $no_hal_akhir; $i++) {
$aktif = $i == $halaman ? ' active' : '';
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
36
<li class="halaman<?php echo $aktif ?>" id="<?php echo $i ?>"><a href="#"><?php echo
$i ?></a></li>
<?php
}
?>
</ul>
</div>
<!-- div akhir pengaturan halaman-->
Simpan source code diatas dengan nama viewmhs.php. Setelah itu
untuk memanggil tampilan daftar mahasiswa tersebut, tambahkan
syntax berikut
<!-- 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='menutoggle'>Hidden Menu</a>";
}
?>
Tambahkan source code diatas di file home.php setelah syntax
<div class="col-lg-12">
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
37
Jika berhasil maka data yang akan ditampilkan seperti gambar dibawah
ini :
Gambar 4.2 Tampilan daftar mahasiswa
4.2.
TUGAS 3
a. Tambahkan menu halaman utama dengan menu backup dan restore
b. Tampilkan data jurusan dan mata kuliah ke dalam content halaman
utama
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
38
4.3.INSERT DATA
Insert data disini akan diimplemensaikan untuk insert data mahasiswa.
Untuk tahapan insert data mahasiswa sebagai berikut :
a. Bukalah file viewmhs.php dan tambahkan source code berikut di
dalam <div class="modal-body"> untuk menampilkan form tambah
data mahasiswa
<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>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
39
Sebelumnya perhatikan action="home.php?page=7, menunjukkan bahwa
pada file home.php perlu ditambahkan link pada bagian case 7
dengan include file untuk perintah insert.
b. Kemudian untuk perintah insert data ke dalam database, buatlah file
baru dengan nama savemhs.php dengan source code berikut :
<?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>';
}
?>
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
40
MODUL 5
5.1. RESTORE DATA XML KE MYSQL
Restore data bertujuan untuk mengembalikan data dengan format
tertentu ke salah satu tabel yang ada di database. Terkait dengan modul
sebelumnya yang membahas tentang backup data dari mysql ke dalam format
xml, modul kali ini akan membahas tentang restore data dari hasil backup data
pada modul sebelumnya dengan format xml. Untuk tahapan restore data
sebagai berikut :
a. Buatlah file
restore.php untuk tampilan restore dengan source code
dibawah ini
<form action="home.php?page=4" method="post" enctype="multipart/formdata">
<h2>Upload File</h2>
<label for="fileSelect">Pilih Data:</label>
<select name='data'>
<option value='0'>-Pilih-</option>
<option value='mahasiswa'>Data Mahasiswa</option>
<option value='jurusan'>Data Jurusan</option>
<option value='makul'>Data Mata Kuliah</option>
</select>
<input type="submit" name="submit" value="Process">
</form>
Kemudian tambahkam case untuk menampilkan contect diatas
dihalaman utama. Jika berhasil maka akan menampilkan gambar di bawah
ini.
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
41
Gambar 4.5 Tampilan form restore data
Selanjutnya lihat bagian action pada source code diatas, page=4
menunjukkan bahwa form pilihan data diatas mengarahkan ke page 4. Untuk
menampilkan page 4 kita perlu menambahkan switch case di halaman
content file home.php.
b. Buatlah file proses_restore.php untuk memproses restore data dengan
source code berikut
<?php
//phpinfo();
$datta=$_POST['data'];
$con=mysql_connect("localhost", "root","");
mysql_select_db("t_mhs", $con) or die(mysql_error());
$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;
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
42
$alamat = $row -> Alamat;
$Jenis = $row -> Jenis_Kelamin;
$Status = $row -> Status;
}else {
$ID = $row -> Id;
$Kode_Mk = $row -> Kode_Mk;
$Sks = $row -> SKS;
$id_progdi = $row -> Id_progdi;
}
if ($datta=='jurusan'){
$sql
="insert
into
jurusan
values
('$Kode_Makul','$Nama_Makul','$Sks','$Web')";
}else if ($datta=='mahasiswa'){
$sql
="insert
into
mahasiswa
values
('$Kode_mhs','$NIM','$nama','$alamat','$Jenis','$Status')";
}else{
$sql ="insert into makul values ('$ID','$Kode_Mk','$Sks','$id_progdi')";
}
$result = mysql_query($sql);
if(!$result){
echo 'Import Error';
}
else {
echo 'Succes';
}
}
Kemudian tambahkan case 4 pada bagian content home.php
dengan include proses_restore.php untuk memanggil file restore ketika form
pilihan data restore di proses. Jika berhasil maka akan tampil seperti gambar
dibawah ini.
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
43
Gambar 2.6 Tampilan proses restore succes
MODUL PRAKTIKUM REKAYASA WEB OLEH
SITI ASMIATUN, M.KOM
44