CRUD KRS Online menggunakan framework MetroUI

21
Pemrograman Berbasis Web Pemrograman Berbasis Web TUGAS 5 PEMOGRAMAN BERBASIS WEB CRUD “KRS ONLINE” Disusun oleh: (Muhamad Lundy Alfandiarto) (1210651002) JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2013

description

tutorial untuk membuat sistem informasi akademik mahasiswahttp://muhammadlundy.blogspot.com/2014/05/crud-krs-online-dengan-framework-metroui.html

Transcript of CRUD KRS Online menggunakan framework MetroUI

Page 1: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

TUGAS 5

PEMOGRAMAN BERBASIS WEB

CRUD “KRS ONLINE”

Disusun oleh:

(Muhamad Lundy Alfandiarto)

(1210651002)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2013

Page 2: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

1. Tujuan

Memahami konsep dasar MetroUI dan penggunaannya sebagai templating pada website

2. Teori

Tampilan user interface dari operating system windows 8 dan 8.1 yang mengusung

desain kotak-kotak yang simple ternyata banyak disukai pengguna windows diseluruh

dunia. Oleh sebab itu, Sergey Vimenov yang berkebangsaan Ukraine beserta timnya

membuat framework terbaru, namanya Metro UI CSS.

Metro UI memiliki gaya khas kotak-kotak yang tidak memiliki border-radius dan

embel-embel box-shadow yang sedikit namun bisa dikatakan tampilannya mirip bootstrap

namun tak serupa.

Berbeda dengan bootstrap, Metro UI memiliki lebih banyak padding pada bagian

konten ketimbang pada komponen itu sendiri hingga tak salah semua orang bisa

membuatnya tanpa menggunakan framework.

Ada beberapa kelebihan dan kekurangan yang harus kalian ketahui jika menggunakan

Framework ini :

Kelebihan

1. Font yang digunakan adalah Segoe-UI termasuk heading hingga normal style.

2. Plugins yang disediakan cukup banyak.

3. Terdapat global style yang biasanya digunakan untuk CSS Default pada setiap

component.

4. Responsive template

Kekurangan

1. Penggunaan plugins diluar Metro juga akan membuat semua plugins yang

terpasang tidak dapat berfungsi.

2. Pemasangan plugins metro juga tergolong rumit.

3. Jika ingin menggunakan tampilan metro maka pada setiap bodynya akan

dipasang class=”metro”

4. Struktur HTML yang terlalu banyak

5. Sering terjadinya konflik antara Framework Metro UI dengan Tampilan website

default.

Page 3: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

3. Tugas

1. Buatlah sebuah aplikasi CRUD dengan PHP tentang mahasiswa, mata kuliah, dan KRS.

2. Form tampilan menggunakan Metro UI.

ALUR PROGRAM:

1. Mahasiswa harus login terlebih dahulu

2. Setelah sukses login, mahasiswa akan berada pada tampilan home SIA. Terdapat tiga

button KRS Mahasiswa untuk melihat KRS , Detail Mahasiswa untuk melihat dan edit

informasi tentang mahasiswa dan LOG OUT untuk keluar dari SIA

Page 4: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

3. Jika ingin mengedit identitas mahasiswa, maka user harus klik button Detail Mahasiswa.

Kemudian ganti data yang salah, misalnya nama

Kemudian klik button UPDATE maka data akan berubah seperti ini:

Page 5: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

4. Button KRS Mahasiswa untuk melihat Kartu Rencana Studi, karena mahasiswa belum

mengambil mata kuliah , tampilannya masih kosong seperti ini:

Jika ingin mengambil mata kuliah, mahasiswa(user) harus klik link AMBIL MK, dan jika

ingin log out maka klik link LOG OUT.

Berikut tampilan saat memilih atau mengambil mata kuliah:

Jadwal diatas hanya sebagian karena hanya sebagai contoh. Pada tiap-tiap baris mata kuliah

terdapat link AMBIL untuk mengambil mata kuliah sesuai baris yang di klik. Kemudian ada

link LOGOUT untuk keluar dari SIA

Page 6: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

5. Ketika link AMBIL di klik maka akan muncul tampilan KRS dan jadwal yang diambil.

Jika ingin mengambil mata kuliah lagi, klik link AMBIL MK dan ambil mata kuliah yang

ingin diambil

Page 7: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

Jika mahasiswa(user) ingin menghapus mata kuliah, klik link DELETE pada baris MK yang

ingin dihapus, maka data akan terhapus.

Jika selesai mengambil mata kuliah mahasiswa (user) bisa keluar dari program dengan klik

link LOGOUT

Pada proses AMBIL MK, data mata kuliah dan mahasiswa yang mengambil MK tersebut

akan disimpan pada table krs di database seperti berikut:

TUTORIAL:

1. Buat database dengan nama krs terlebih dahulu dengan query dibawah ini:

create database krs;

2. Buat table mhs untuk menyimpan data mahasiswa, matakuliah untuk menyimpan data

mata kuliah, dan table krs untuk menyimpan data mahasiswa dan mata kuliah yang

diambilnya

create table mhs(

nim varchar(12),

password varchar(12),

nama_mhs varchar(35),

semester int(1),

jurusan varchar(30),

alamat varchar(45),

tanggal_lahir date,

primary key (nim)

);

Page 8: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

create table matakuliah(

kode_mk varchar(6),

nama_mk varchar(30),

semester int(1),

sks int(2),

dosen varchar(45),

kelas varchar(5),

jam time,

primary key (kode_mk)

);

create table krs(

kode_mk varchar(6),

nama_mk varchar(30),

semester int(1),

sks int(2),

dosen varchar(45),

kelas varchar(5),

jam time,

status varchar(10),

nim varchar(12),

nama_mhs varchar(35),

primary key (kode_mk)

);

3. Isi table mhs dan matakuliah

Table mhs (sebagai user)

Table matakuliah (sebagai jadwal matakuliah)

Page 9: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

4. Masuk pada bagian designer untuk menghubungkan atribut

Hubungkan primary key(nim) yang ada di table mhs dengan foreign key(nim) yang ada

di table krs dan hubungkan primary key(kode_mk) di table matakuliah dengan

primary key(kode_mk) pada table krs seperti berikut:

5. Buat file koneksi.php untuk menghubungkan file php dengan database yang sudah dibuat

<?php

//tiga parameter sebagai acuan

$servername = "localhost";

$username = "root";

$password = "";

$databasename = "KRS";//nama database

//membuat koneksi ke mysql dengan tiga parameter

$db = mysql_connect("$servername", "$username", "$password")

or die

("I cannot connect to the database because : " . mysql_error());

//memanggil nama databasenya

mysql_select_db("$databasename", $db)

or die

("I cannot select the database '$databasename' because : " . mysql_error());

?>

Page 10: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

6. Buat form untuk login dengan nama form.php, berikut source codenya:

<html>

<head><title>LOGIN</title>

<!—- code untuk memanggil framework MetroUI -->

<link rel="stylesheet" href="css/metro-bootstrap.css">

<script src="js/jquery/jquery.min.js"></script>

<script src="js/jquery/jquery.widget.min.js"></script>

<script src="js/metro/metro.min.js"></script>

</head>

<body bgcolor="#32425C">

<!—- code untuk tampilan header dengan CSS inline -->

<div style="background-color:#008287;position:fixed;top:0;width:100%; height:65px;">

<header style="position:fixed;top:0;width:100%;height:60px;background-color:#32353A

;">

<!—- tulisan pada bagian header dengan CSS inline -->

<p style="color:white;font:20px segoe ui;text-align:center;">UNIVERSITAS MUHAMMADIYAH

JEMBER</p>

</header>

</div>

<!—- pemanggilan class metro supaya tampilan form menjadi metro(kotak2) -->

<form class="metro" method="post">

<!—- tampilan judul dengan CSS inline -->

<div style="margin:auto;padding:10px;background-color:#008287;width:35%;">

<h1 align="center" style="padding-top:150px; color:white;">Sistem Informasi

Akademik</h1></br>

</div>

<table style="background-color:#EEEEEE; width:35%; height:22%;" align="center" >

<tr> <!—- inputfield untuk NIM dan pemanggilan class input pada MetroUI -->

<td align="center"><input class="input-control text" style="width:55%;"

type="text" name="username" placeholder="NIM"></td>

</tr>

<tr> <!—- inputfield untuk Password dan pemanggilan class input pada MetroUI -->

<td align="center" ><input class="input-control password" style="width:55%"

type="password" name="password" placeholder="Password"></td>

</tr>

<tr> <!—- button dengan pemanggilan class button MetroUI -->

<td align="center" ><input class="default && large" type="submit"

name="submit" value="SIGN IN"></td>

</tr>

</table>

</form>

<?php //kondisi jika button submit diklik

if(isset($_POST['submit'])){

$nim=$_POST['username']; //mendapakan nilai dari inputfield

$pass=$_POST['password']; /mendapatkan nilai dari inputfield

//link menuju file home.php dengan nim dan password = nilai yang di inputkan

echo "<script>window.location.href='home.php?nim=$nim && password=$pass'</script>";

}

?>

Page 11: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<!—- tampilan footer dengan CSS inline -->

<div style="background-color:#008287;position:fixed;bottom:0;width:100%;height:65px;">

<footer style="position:fixed;bottom:0;width:100%;height:60px;background-color:

#232A2B;">

<!—- tulisan dibagian footer dengan CSS inline -->

<p style="color:white; font: 16px segoe ui; text-align:center;">Powered by UPT -

Pusat Data dan Informasi</p>

</footer>

</div>

</body>

</html>

7. Kemudian buat file php untuk tampilan home dengan nama home.php , berikut source codenya <?php //kondisi jika nim dan password sesuai dengan data pada database mhs

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$username=$_GET['nim']; //mengambil nilai nim dari URL

$password=$_GET['password']; //mengambil nilai password dari URL

//memilih data berdasarkan nim dan password yang didapat dari URL

$query=mysql_query("select *from mhs where nim='$username' and password='$password'");

$cek=mysql_num_rows($query); //mengecek ketersedian data

$row=mysql_fetch_assoc($query); //menyimpan data dalam bentuk assoc supaya efisien

if($cek){ //kondisi jika variable cek benar(data ada)

echo "Anda berhasil login"; //muncul pemberitahuan

}else{ //jika tidak data tidak ada

//akan dikembalikan ke tampilan form login

echo "<script>window.location.href='form.php';</script>";

}

?>

<html>

<head>

<title>HOME</title>

<!—- code untuk memanggil framework MetroUI -->

<link rel="stylesheet" href="css/metro-bootstrap.css">

<script src="js/jquery/jquery.min.js"></script>

<script src="js/jquery/jquery.widget.min.js"></script>

<script src="js/metro/metro.min.js"></script>

</head>

<body bgcolor="#32425C">

<!—- code untuk tampilan header dengan CSS inline -->

<div style="background-color:#008287;position:fixed;top:0;width:100%;height:65px;">

<header style="position:fixed;top:0;width:100%;height:60px;background-color:

#32353A;">

<!—- tulisan pada bagian header dengan CSS inline -->

<p style="color:white;font:20px segoe ui;text-align:center;">Sistem Informasi

Akademik - UNIVERSITAS MUHAMMADIYAH JEMBER </p>

<div class="metro" align="right"> <!—- button logout untuk keluar dr SIA -->

<button onclick="window.location='form.php'" class="default && small">LOG

OUT</button>

</div>

</header>

</div>

Page 12: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<!—- pemanggilan class metro supaya tampilan form menjadi metro(kotak2) -->

<form class="metro" method="post">

<!—- tampilan judul form dengan CSS inline -->

<div style="margin:auto; padding:10px; background-color:#008287; width:35%;">

<h1 align="center" style="padding-top:150px; color:white;">Selamat

Datang</h1>

</div>

<!—- table untuk menampilkan detail mahasiswa dengan CSS inline -->

<table style="background-color:#EEEEEE; width:35%; height:32%;" align="center" >

<tr>

<td align="right" bgcolor="#DCDCDC">NIM</td>

<td bgcolor="#DCDCDC" align="center" >:</td>

<!—- memanggil data pada database dengan variable $row diikuti atributnya -->

<td width="65%"><?php echo $row['nim'];?></td>

</tr>

<tr>

<td align="right" bgcolor="#DCDCDC">Nama</td>

<td bgcolor="#DCDCDC" align="center" >:</td>

<!—- memanggil data pada database dengan variable $row diikuti atributnya -->

<td width="65%"><?php echo $row['nama_mhs'];?></td>

</tr>

<tr>

<td align="right" bgcolor="#DCDCDC">Alamat</td>

<td bgcolor="#DCDCDC" align="center" >:</td>

<!—- memanggil data pada database dengan variable $row diikuti atributnya -->

<td width="65%"><?php echo $row['alamat'];?></td>

</tr>

<tr>

<td align="right" bgcolor="#DCDCDC">Tanggal Lahir</td>

<td bgcolor="#DCDCDC" align="center" >:</td>

<!—- memanggil data pada database dengan variable $row diikuti atributnya -->

<td width="65%"><?php echo $row['tanggal_lahir'];?></td>

</tr>

<tr>

<td align="right" bgcolor="#DCDCDC">Jurusan</td>

<td bgcolor="#DCDCDC" align="center" >:</td>

<!—- memanggil data pada database dengan variable $row diikuti atributnya -->

<td width="65%"><?php echo $row['jurusan'];?></td>

</tr>

</table>

<!—- table untuk button dengan CSS inline -->

<table style="background-color:#EEEEEE;" align="center" border="0" cellspacing="0"

cellpadding="0">

<tr align="center">

<!—- button KRS Mahasiswa dengan class metroUI -->

<td><input class="default && large" type="submit" name="submit" value="KRS

Mahasiswa"></td>

<td> </td>

<!—- button Detail Mahasiswa dengan class metroUI -->

<td><input class="default && large" type="submit" name="update" value="Detail

Mahasiswa"></td>

</tr>

Page 13: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

</table>

</form>

<?php //membuat kondisi untuk button

if(isset($_POST['submit'])){ //kondisi untuk button dengan name=submit

//link menuju file krs.php dengan nim = nilai yg didapat dr URL

echo "<script>window.location.href='krs.php?nim=$username'</script>";

}

if(isset($_POST['update'])){ //kondisi untuk button dengan name=update

//link menuju file update.php dengan nim = nilai yg didapat dr URL

echo"<script>window.location.href='update.php?nim=$username'</script>";

}

?>

<!—- tampilan footer dengan CSS inline -->

<div style="background-color:#008287;position:fixed;bottom:0;width:100%; height:65px;

">

<footer style="position:fixed;bottom:0;width:100%;height:60px;background-color:

#232A2B;">

<!—- tulisan dibagian footer dengan CSS inline -->

<p style="color:white; font: 16px segoe ui; text-align:center;">Powered by UPT -

Pusat Data dan Informasi</p>

</footer>

</div>

</body>

</html>

8. Buat file untuk menampilkan daftar mata kuliah dengan nama matakuliah.php <?php

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$username=$_GET['nim']; //mengambil nilai dari URL

//query untuk menampilkan data dari table matakuliah di urutkan berdasarkan kode_mk

$query=mysql_query("select * from matakuliah order by kode_mk");

?>

<html>

<head>

<title>Mata Kuliah</title>

<!—- code untuk memanggil framework MetroUI -->

<link rel="stylesheet" href="css/metro-bootstrap.css">

<script src="js/jquery/jquery.min.js"></script>

<script src="js/jquery/jquery.widget.min.js"></script>

<script src="js/metro/metro.min.js"></script>

</head>

<body bgcolor="#32425C">

<!—- code untuk tampilan header dengan CSS inline -->

<div style="background-color:#008287;position:fixed;top:0;width:100%; height:65px;

">

<header style="position:fixed;top:0;width:100%;height:60px; background-color:

#32353A;">

<!—- tulisan pada bagian header dengan CSS inline -->

<p style="color:white; font: 20px segoe ui; text-align:center;">Daftar Mata

Kuliah</p>

</header>

</div>

Page 14: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<!—- pemanggilan class metro supaya tampilan form menjadi metro(kotak2) -->

<form class="metro" method="post">

<!—- pemanggilan class table supaya tampilan table menjadi metro(kotak2) -->

<div class="table" style="padding-top:65px; padding-bottom:45px;">

<!—- table dengan tampilan striped dan CSS inline -->

<table class="table-striped" style="background-color:#EEEEEE;width:60%; height:

auto;" align="center" >

<!—- baris pertama dari tabel -->

<tr align="center" bgcolor="#459BB6" >

<td>Action</td>

<td>NO. MK</td>

<td>Nama MataKuliah</td>

<td>Semester</td>

<td>SKS</td>

<td>Dosen</td>

<td>Kelas</td>

<td>Jam</td>

</tr>

<?php //pengulangan penyimpanan semua data kedalam array

while ($row1 = mysql_fetch_array ($query)) {

extract($row1); //mengubah array kedalam variable $row1

echo"

<tr align='center'> //baris kedua dr table

<td> //link menuju file insert.php dg kode_mk = kode_mk yg diklik

// dan nim = nilai yg didapat dr URL

<a href='insert.php?kode_mk=$kode_mk && nim=$username'>AMBIL</a>

</td>

//pemanggilan data dengan memanggil atribut pada table matakuliah

<td> ".$kode_mk." </td>

<td> ".$nama_mk." </td>

<td> ".$semester." </td>

<td> ".$sks." </td>

<td> ".$dosen." </td>

<td> ".$kelas." </td>

<td> ".$jam." </td>

</tr>

";

}

echo "

//tampilan link LOGOUT dengan CSS inline

<div style='margin:auto; padding:14px; padding-left:696px; background-

color:#008287; width:60%;'>

//link LOGOUT menuju file form.php atau form login

<a href='form.php' style='background-color:#32425C; color:white; padding:10

25 6 25;'> LOGOUT </a>

</div>

";

?>

</table>

</div>

</form>

Page 15: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<!—- tampilan footer dengan CSS inline -->

<div style="background-color:#008287; position:fixed; bottom:0; width:100%;

height:65px;">

<footer style="position:fixed; bottom:0; width:100%; height:60px; background-

color:#363F48;">

<!—- tulisan dibagian footer dengan CSS inline -->

<p style="color:white; font: 16px segoe ui; text-align:center;">Sistem

Informasi Akademik - UNIVERSITAS MUHAMMADIYAH JEMBER </br>

Powered by UPT - Pusat Data dan Informasi</p>

</footer>

</div>

</body>

</html>

9. Buat file insert.php untuk proses insert ke database <?php

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$username=$_GET['nim']; //mengambil nilai dari URL

//query untuk menampilkan data dari table mhs dg nim = nilai yg didpt dr URL

$selectmhs="select * from mhs where nim='$username'";

$resultmhs=mysql_query($selectmhs) or die ('Error, load data mahasiswa

failed.'.mysql_error());

//menyimpan data yg dipilih kedalam array assoc

$rowmhs=mysql_fetch_assoc($resultmhs);

$kode_mk=$_GET['kode_mk']; //mengambil nilai dari URL

//query untuk menampilkan data dari table matakuliah dg kode_mk = nilai yg didpt dr

URL

$select="select * from matakuliah where kode_mk='$kode_mk'";

$result=mysql_query($select) or die ('Error, load data matakuliah

failed.'.mysql_error());

//menyimpan data yg dipilih kedalam array assoc

$row=mysql_fetch_assoc($result);

//memanggil data dan disimpan sebagai variable

$kode_mk= $row['kode_mk'];

$nama_mk=$row['nama_mk'];

$semester=$row['semester'];

$sks=$row['sks'];

$dosen=$row['dosen'];

$kelas=$row['kelas'];

$jam=$row['jam'];

$status="BELUM";

$nim=$rowmhs['nim'];

$nama=$rowmhs['nama_mhs'];

//query untuk insert data kedalam table krs

$insert="insert into krs values('$kode_mk','$nama_mk',$semester,$sks,'$dosen',

'$kelas','$jam','$status','$nim','$nama')";

Page 16: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

//kondisi jika variable sukses dijalankan

if(mysql_query($insert)){

//menuju link krs.php dg nim = nilai yg didapat dr URL

echo"<script>window.location.href='krs.php?nim=$username';</script>";

}else{

//jika variable tidak sukses dijalankan maka keluar peringatan dan program akan

menampilkan matakuliah.php dg nim = nilai yg didpat dr URL

echo"<script>alert('Error!! Mata kuliah sudah diambil!');</script>";

echo"<script>window.location.href=’ matakuliah.php?nim=$username';</script>"; }

?>

10. Buat file krs.php untuk menampilkan matakuliah yang diambil mahasiswa <?php

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$username=$_GET['nim']; //mengambil nilai dari URL

//query untuk memilih data mahasiswa dimana nim = nilai yg didapat dari URL

$querymhs=mysql_query("select * from mhs where nim='$username'");

//menyimpan data kedalam array assoc dg variable row

$row=mysql_fetch_assoc($querymhs);

//query untuk menampilkan semua data yang ada di table krs

$querysql=mysql_query("select *from krs");

?>

<html>

<head><title>KRS</title>

<!—- code untuk memanggil framework MetroUI -->

<link rel="stylesheet" href="css/metro-bootstrap.css">

<script src="js/jquery/jquery.min.js"></script>

<script src="js/jquery/jquery.widget.min.js"></script>

<script src="js/metro/metro.min.js"></script>

</head>

<body bgcolor="#32425C">

<!—- code untuk tampilan header dengan CSS inline -->

<div style="background-color:#008287; position:fixed; top:0; width:100%;

height:65px;">

<header style="position:fixed;top:0;width:100%;height:60px; background-

color:#32353A;">

<!—- tulisan pada bagian header dengan CSS inline -->

<p style="color:white; font: 20px segoe ui; text-align:center;">Kartu Rencana

Studi (KRS)</p>

</header>

</div>

<!—- pemanggilan class metro supaya tampilan form menjadi metro(kotak2) -->

<form class="metro" method="post">

<!—- pemanggilan class table supaya tampilan table menjadi metro(kotak2) -->

<div class="table" style="padding-top:70px;">

<!—- table dengan CSS inline untuk menampilkan data mahasiswa-->

<table style="background-color:#EEEEEE; width:80%; height:auto; " align="center" >

<tr>

<td width="150px">NIM</td>

<td>:</td>

<td><?php echo $row['nim'];?></td> <!—- menampilkan data nim dr database -->

Page 17: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<td width="100px">Semester</td>

<td>:</td>

<!—- menampilkan data semester dr database -->

<td width="150px"><?php echo $row['semester'];?></td>

</tr>

<tr>

<td width="150px">NAMA</td>

<td>:</td>

<!—- menampilkan data nama_mhs dr database -->

<td><?php echo $row['nama_mhs'];?></td>

<td width="100px">Jurusan</td>

<td>:</td>

<!—- menampilkan data jurusan dr database -->

<td width="150px"><?php echo $row['jurusan'];?></td>

</tr>

</table>

<!—- table dg CSS inline untuk menampilkan data matakuliah yg diambil -->

<table style="background-color:#EEEEEE; width:80%; height:auto; " align="center" >

<!—- baris 1 pd table -->

<tr align="center" bgcolor="#459BB6" >

<td>NO. MK</td>

<td>Nama MataKuliah</td>

<td>Semester</td>

<td>SKS</td>

<td>Dosen</td>

<td>Kelas</td>

<td>Jam</td>

<td>Status</td>

<td>Action</td>

</tr>

<?php

//pengulangan penyimpanan semua data kedalam array

while ($row1 = mysql_fetch_array ($querysql)) {

extract($row1); //mengubah array kedalam variable $row1

echo"

//baris kedua

<tr align='center'>

//pemanggilan data dengan memanggil atribut pada table krs

<td> ".$kode_mk." </td>

<td> ".$nama_mk." </td>

<td> ".$semester." </td>

<td> ".$sks." </td>

<td> ".$dosen." </td>

<td> ".$kelas." </td>

<td> ".$jam." </td>

<td> ".$status." </td>

//link menuju file delete.php dg kode_mk = kodemk yg diklik dan nim =

nilai yang didapat dari URL

<td><a href ='delete.php?kode_mk=$kode_mk &&

nim=$username'>DELETE</a></td>

</tr>

";

Page 18: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

}

echo "

//tampilan link dengan CSS inline

<div style='margin:auto; padding:10px; background-color:#EEEEEE; width:80%;

align:center;'>

//link untuk ambil mk menuju matakuliah dg nim = nilai yg didapat dari URL

<a href ='matakuliah.php?nim=$username'>AMBIL MK</a>

//spasi

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp

;&emsp;

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp

;&emsp;

KRS Mahasiswa

//spasi

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp

;

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp

;&emsp;

//link untuk keluar dari SIA menuju form.php

<a href ='form.php'>LOG OUT</a>

</div>

";

?>

</table>

</div>

</form>

<!—- tampilan footer dengan CSS inline -->

<div style="background-color:#008287; position:fixed; bottom:0; width:100%;

height:65px;">

<footer style="position:fixed; bottom:0; width:100%; height:60px; background-

color:#363F48;">

<!—- tulisan dibagian footer dengan CSS inline -->

<p style="color:white; font: 16px segoe ui; text-align:center;">Sistem Informasi

Akademik - UNIVERSITAS MUHAMMADIYAH JEMBER </br>

Powered by UPT - Pusat Data dan Informasi</p>

</footer>

</div>

</body>

</html>

Page 19: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

11. Buat file delete.php untuk proses delete data <?php

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$kode_mk=$_GET['kode_mk']; //mengambil nilai dari URL

$username=$_GET['nim']; //mengambil nilai dari URL

//kondisi jika kode_mk terpenuhi

if(isset($_GET['kode_mk'])){

//query untuk menghapus data dari table krs dimana kode_mk = nilai yang didapat dari

URL

$sqldelete = 'DELETE FROM krs WHERE kode_mk= "'.$_GET['kode_mk'].'" ';

mysql_query($sqldelete) or die('Delete data failed. ' . mysql_error());

//setelah proses delete dilakukan, maka program menuju file krs.php dengan nim =

nilai yg didapat dari URL

echo "<script>window.location.href='krs.php?nim=$username';</script>";

}

?>

12. Terakhir buat file update.php untuk proses edit data mahasiswa <?php

include "koneksi.php"; //memanggil isi file koneksi.php dengan keyword include

$username=$_GET['nim']; //mengambil nilai dari URL

//query untuk mimilih data mahasiswa dimana nim = nilai yang didapat dari URL

$selectmhs="select * from mhs where nim='$username'";

$resultmhs=mysql_query($selectmhs) or die ('Error, load data mahasiswa

failed.'.mysql_error());

//kemudian disimpan dalam array assoc

$rowmhs=mysql_fetch_assoc($resultmhs);

?>

<html>

<head><title>Detail Mahasiswa</title>

<!—- code untuk memanggil framework MetroUI -->

<link rel="stylesheet" href="css/metro-bootstrap.css">

<script src="js/jquery/jquery.min.js"></script>

<script src="js/jquery/jquery.widget.min.js"></script>

<script src="js/metro/metro.min.js"></script>

</head>

<body bgcolor="#32425C">

<!—- code untuk tampilan header dengan CSS inline -->

<div style="background-color:#008287; position:fixed; top:0; width:100%;

height:65px;">

<header style="position:fixed; top:0; width:100%; height:60px; background-

color:#32353A;">

<!—- tulisan pada bagian header dengan CSS inline -->

<p style="color:white; font: 20px segoe ui; text-align:center;">Detail

Mahasiswa</p>

<!—- tampilan button LOGOUT dengan class default dan ukuran small dari MetroUI -->

<div class="metro" align="right">

<button onclick="window.location='form.php'" class="default && small">LOG

OUT</button>

</div>

</header>

</div>

Page 20: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<!—- pemanggilan class metro supaya tampilan form menjadi metro(kotak2) -->

<form class="metro" method="post">

<!—- tampilan judul dengan CSS inline -->

<div style="margin:auto; padding:10px; background-color:#008287; width:35%;">

<h1 align="center" style="padding-top:150px; color:white;">Update Mahasiswa</h1>

</div>

<!—- table untuk mengedit data mahasiswa -->

<table style="background-color:#EEEEEE; width:35%; height:32%;" align="center" >

<tr>

<td width="95px">NIM</td>

<td>:</td>

<!—- inputfield untuk mengedit nim -->

<td><input size="45px" type="text" name="nim" value="<?php echo

$rowmhs['nim']; ?>" disabled></td>

</tr>

<tr>

<td width="95px">Password</td>

<td>:</td>

<!—- inputfield untuk mengedit password -->

<td><input size="45px" type="text" name="password" value="<?php echo

$rowmhs['password']; ?>"></td>

</tr>

<tr>

<td width="95px">Nama</td>

<td>:</td>

<!—- inputfield untuk mengedit nama mahasiswa -->

<td><input size="45px" type="text" name="nama" value="<?php echo

$rowmhs['nama_mhs']; ?>"></td>

</tr>

<tr>

<td width="95px">Alamat</td>

<td>:</td>

<!—- inputfield untuk mengedit alamat -->

<td><input size="45px" type="text" name="alamat" value="<?php echo

$rowmhs['alamat']; ?>"></td>

</tr>

<tr>

<td width="95px">Tanggal Lahir</td>

<td>:</td>

<!—- inputfield untuk mengedit tanggal lahir -->

<td><input size="45px" type="date" name="tanggal " value="<?php echo

$rowmhs['tanggal_lahir']; ?>"></td>

</tr>

<tr>

<td width="95px">Jurusan</td>

<td>:</td>

<!—- inputfield untuk mengedit jurusan -->

<td><input size="45px" type="text" name="jurusan" value="<?php echo

$rowmhs['jurusan']; ?>"></td>

</tr>

Page 21: CRUD KRS Online menggunakan framework MetroUI

Pemrograman Berbasis Web

Pemrograman Berbasis Web

<tr>

<!—- button dengan name = update -->

<td colspan="3" align="center"><input class="default"type="submit"

name="update" value="UPDATE"></td>

</tr>

</table>

<?php

if(isset($_POST['update'])){ //kondisi jika button “update” diklik

$pass=$_POST['password']; //mengambil nilai dari inputfield password

$nama=$_POST['nama']; //mengambil nilai dari inputfield nama

$alamat=$_POST['alamat']; //mengambil nilai dari inputfield alamat

$tanggal=$_POST['tanggal’]; //mengambil nilai dari inputfield tanggal

$jurusan=$_POST['jurusan']; //mengambil nilai dari inputfield jurusan

//query untuk update data pada table mhs dimana data data yg diupdate berdasarkan

nim = nilai yg didapat dari URL

$sql = "update mhs set password='$pass', nama_mhs='$nama', jurusan='$jurusan',

alamat='$alamat', tanggal_lahir='$tanggal' where nim='$username'";

mysql_query($sql) or die('Update data failed. ' . mysql_error());

//link menuju home.php dengan nim dan password = nilai yang didapat dari URL

echo "<script>window.location.href='home.php?nim=$username && password=$pass';

</script>";

}

?>

</form>

<!—- tampilan footer dengan CSS inline -->

<div style="background-color:#008287; position:fixed; bottom:0; width:100%;

height:65px;">

<footer style="position:fixed; bottom:0;width:100%;height:60px; background-

color:#232A2B;">

<!—- tulisan dibagian footer dengan CSS inline -->

<p style="color:white; font: 16px segoe ui; text-align:center;">Powered by UPT -

Pusat Data dan Informasi</p>

</footer>

</div>

</body>

</html>

Setelah semua file dibuat, letakkan file-file tersebut di dalam direktori framework MetroUI.

Jika belum punya framework MetroUI, bisa download di sini: http://metroui.org.ua/

Demikian tutorial CRUD KRS Online yang saya buat, semoga usaha saya bermanfaat dan di

nilai baik oleh dosen saya :D

Terima kasih…