MODUL PRAKTIKUM - 2023

PEMROGRAMAN WEB 2
PHP & MYSQL

Oleh :
M. Dedy Rosyadi, M.Kom

UNIVERSITAS ISLAM KALIMANTAN MUHAMMAD ARSYAD AL BANJARI

FAKULTAS TEKNOLOGI INFORMASI – PROGRAM STUDI TEKNIK INFORMATIKA
 ATURAN KEGIATAN PRAKTIKUM

PELAKSANAAN
1. Berpakaian rapi selama mengikuti kegiatan praktikum.
2. Mengikuti kegiatan praktikum dari awal sampai selesai.
3. Diwajibkan membawa laptop selama kegiatan praktikum.

KEPERLUAN SOFTWARE
1. Install/update aplikasi browser seperti Google chrome, Mozilla Firefox atau
Microsoft Edge. Pastikan browser kalian support untuk HTML 5
2. Install aplikasi text editor Visual Studio Code
link download : https://code.visualstudio.com/download

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 2
M. Dedy Rosyadi, M.Kom
Pengantar Modul Aplikasi
Materi ini mejelaskan tentang langkah-langkah pembuatan aplikasi sederhana menggunakan
Bahasa pemrograman PHP dan database MYSQL.

Apa saja yang dipelajari dalam modul ini ?

Dalam modul ini terdapat beberapa materi yang akan dipelajari, yaitu :
1. Membuat tampilan dengan admin template SB-Admin 2. Untuk download admin
template silahkan buka link berikut ini.
https://startbootstrap.com/theme/sb-admin-2
2. Membuat halam login.
3. Membuat fungsi create, read, update, delete & print dengan Bahasa pemrograman
PHP.
4. Menampilkan data dengan datatables. Untuk dokumentasi lengkap cara penggunaan
bisa lihat pada link berikut ini.
https://datatables.net/
5. Membuat select/list data dengan select2. Untuk dokumentasi lengkap cara
penggunaan bisa lihat pada link berikut ini.
https://select2.org/
6. Cetak data dengan library FPDF. Untuk dokumentasi lengkap bisa lihat pada link
berikut ini.
http://www.fpdf.org/

Sebelum memulai Praktek membuat aplikasi, siapkan beberapa keperluan yang akan kita
gunakan untuk menunjang proses kegiatan praktikum agar dapat berjalan dengan lancar
1. Browser (google chrome, firefox).
2. Text Editor (visual studio code, sublime text).
3. Local Server / XAMPP.
4. Library yang diperlukan sesuai dengan yang telah disebutkan diatas.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 3
M. Dedy Rosyadi, M.Kom
Tampilan Aplikasi
Halaman Login
Pada aplikasi memiliki 2 level login yaitu admin dan operator. Perbedaan level akan
membedakan pada bagian navigasi.

Halaman Dashboard
Pada bagian dashboard terdapat informasi jumlah data yang terdapat pada masing-masing
table. Jika level user bukan admin maka menu user pada bagian sidebar tidak ditampilkan.

Halaman User Show

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 4
M. Dedy Rosyadi, M.Kom
Pada halaman user show hanya menampilkan field username dan level saja. Untuk
menambah data user baru klik tombol tambah data. Tombol hapus tidak aktif sesuai dengan
data user yang login, jadi user yang sedang login tidak bisa menghapus usernya sendiri.

Halaman User add

Halaman user add digunakan untuk menambahkan data user baru. Pada aplikasi ini
penggunaan username bersifat uniqe, jadi satu nama username hanya boleh digunakan oleh
satu user.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 5
M. Dedy Rosyadi, M.Kom
Halaman User Edit
Pada halaman user edit, proses penyimpanan data update terbaru dibuat terpisah. Misal
untuk melakukan perubahan data level pada user maka harus melakukan penyimpanan
dengan klik tombol simpan pada blok komponen level user.

Halaman Mahasiswa Show

Pada halaman show terdapat tampilan data menggunakan datatables lengkap dengan fitur
pencarian, limit jumlah data, sortir data, pagination dan informasi jumlah data. Klik tambah
data untuk menambahkan data mahasiswa baru. Untuk hapus atau edit data terdapat pada
setiap baris data.
Pada halaman ini juga terdapat dua jenis tombol cetak dengan metode yang berbeda.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 6
M. Dedy Rosyadi, M.Kom
Halaman Mahasiswa Add
Halaman ini digunakan untuk menambahkan data baru. Pada pilihan jurusan dan pilihan jenis
kelamin menggunakan fungsi dari select2 dengan data statis atau data langsung dituliskan
pada bagian <option>.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 7
M. Dedy Rosyadi, M.Kom
Halaman Mahasiswa Edit
Halaman ini digunakan untuk edit data mahasiswa. Data sebelumnya akan ditampilkan di
form setelah user melakukan klik pada tombol edit di halaman mahasiswa show.

Cetak data Mahasiswa dengan library FPDF

Laporan ini digunakan untuk mencetak semua data yang ada pada table menggunakan library
FPDF. Terdapat kekurangan pada laporan ini karena jika terdapat data text yang panjang tidak
secara otomatis melakukan wrap text / multi line pada kolom table.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 8
M. Dedy Rosyadi, M.Kom
Cetak Data Mahasiswa dengan window.print()
Laporan ini digunakan untuk mencetak semua data yang ada pada table menggunakan
metode window.print(). Jika terdapat text yang panjang maka secara otomatis akan
melakukan wrap pada text/multi line pada kolom table.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 9
M. Dedy Rosyadi, M.Kom
Database
Buat database baru, silahkan tentukan nama database kalian masing-masing. Kemudian
buat table baru dengan struktur table sebagai berikut :

Table Mahasiswa

Table User

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 10
M. Dedy Rosyadi, M.Kom
Membuat Struktur Folder Project
Buat folder project pada local server kalian masing-masing, pada project ini saya
menggunakan nama folder “praktikum2022”. Setelah membuat folder project selanjutnya
buka folder kalian di text editor dan masukan folder library yang kita gunakan untuk keperluan
dalam pembuatan aplikasi.

SB Admin 2
Jika sudah mendownload tempate SB Admin 2 silahkan extract folder tersebut. Kita akan
menggunakan admin template SB Admin 2 untuk membuat tampilan aplikasi, beberapa folder
yang digunakan adalah sebagai berikut :

copy folder tersebut dan paste kedalam folder project yang sudah dibuat.

Datatables
Datatable digunakan untuk menampilkan data dengan fitur yang tambahan yang sudah
tersedia seperti limit jumlah data perhalaman, informasi jumlah data, pencarian, pagination,
dan sortir data berdasarkan field.

Untuk menampilkan data dengan datatables, kita akan menggunakan library datatables
bawaan dari SB Admin 2 yang sudah disediakan pada folder “vendor”.

Select2
Select2 digunakan untuk membuat select dalam bentuk list yang terdapat fitur pencarian
didalam select. Fitur ini bisa digunakan apabila terdapat banyak list data yang ditampilkan
didalam element select.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 11
M. Dedy Rosyadi, M.Kom
Untuk praktikum ini list data yang kita gunakan masih menggunakan data statis. Untuk contoh
kedepannya akan kita coba memasukkan data dari table kemudian ditampilkan didalam
select.

Ada beberapa file dari select2 yang harus kita download untuk keperluan project ini
- file CSS dari select2
- file CSS untuk styling bootstrap v4
- file JS dari select2
Untuk keperluan file tersebut sudah saya sediakan dalam folder contoh project.

Penempatan file CSS dan JS

libraryFPDF
Library FPDF digunakan untuk keperluan pembuatan laporan, silahkan download library FPDF
pada link berikut ini http://www.fpdf.org/en/dl.php?v=184&f=zip
Setelah itu extract folder library FPDF kedalam folder project aplikasi kita.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 12
M. Dedy Rosyadi, M.Kom
File Connection
Sesuaikan dengan configurasi local server kalian masing-masing. Nama database sesuaikan
dengan nama database yang kalian buat sebelumnya. Untuk pengguna windows silahkan
hapus database password.
<?php
$databaseHost = 'localhost';
$databaseName = 'praktikum2022_5c';
$databaseUsername = 'root';
$databasePassword = 'root';

$con = mysqli_connect(
"$databaseHost",
"$databaseUsername",
"$databasePassword",
"$databaseName"
);

if (mysqli_connect_errno()) {
echo '<h1>Koneksi database error : ' . mysqli_connect_errno() . '</h1>';
}

Source Code Aplikasi

Halaman logincheck.php

<?php
session_start();
if (isset($_SESSION['status']) != "login") {
header("location:../index.php");
}

Halaman Index.php
Pada halaman index.php digunakan sebagai interface login.

<?php
include 'connection.php';
$result = mysqli_query($con, "SELECT * FROM user");
$cek = mysqli_num_rows($result);
if ($cek == 0) {
echo "
<script>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 13
M. Dedy Rosyadi, M.Kom
 alert('Belum ada data USER, silahkan buat USER baru.');
window.location.href = 'admin/index.php?page=user-add';
</script>";
}
?>

<?php

if (isset($_POST['login'])) {
$username = $_POST['username'];
$inputpass = md5($_POST['password']);

include 'connection.php';
$result = mysqli_query($con, "SELECT * FROM user WHERE username='$username'");
$cek = mysqli_num_rows($result);
if ($cek > 0) {
$data = mysqli_fetch_assoc($result);
session_start();
$_SESSION['username'] = $data['username'];
$_SESSION['level'] = $data['level'];
$_SESSION['status'] = 'login';
$pass = $data['password'];
if ($pass == $inputpass) {
header('Location:admin/index.php');
exit;
} else {
$error = true;
}
} else {
$error = true;
}
}
?>

<!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, shrink-to-
fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 14
M. Dedy Rosyadi, M.Kom
 <title>Web App</title>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"
type="text/css" />
<link

href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600
,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />

<link href="css/sb-admin-2.min.css" rel="stylesheet" />

</head>

<body class="bg-gradient-primary">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-6 col-lg-6 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">

<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Login User</h1>
<img src="img/logo.png" alt="Logo UNISKA" width="120px"
class="mb-2">
<hr>
</div>
<form class="user" method="POST">
<div class="form-group">
<input type="text" class="form-control form-control-user"
name="username" placeholder="Username"
required>
</div>
<div class=" form-group">
<input type="password" class="form-control form-control-user"
name="password"
placeholder="Password" required>
</div>

<input type="submit" name="login" value="Login" class="btn btn-

primary btn-user btn-block">

<hr>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 15
M. Dedy Rosyadi, M.Kom
 <?php if (isset($error)) : ?>
<div class="alert alert-danger alert-dismissible fade show"
role="alert">
<strong>Login gagal</strong> Periksa kembali Username dan
Password
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<?php endif; ?>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>

<script>
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function() {
$(this).remove();
});
}, 5000);
</script>
</body>
</html>

Folder template
Buat folder baru dengan nama “template”. Folder template terdapat tiga file, yaitu :
- header.php : untuk bagian struktur atas pada halaman.
- footer.php : untuk bagian struktur bawah pada hamana.
- js.php : untuk pemanggilan library javascript yang diperlukan.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 16
M. Dedy Rosyadi, M.Kom
File ini digunakan untuk template yang akan kita panggil pada setiap halaman.

header.php
<!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, shrink-to-
fit=no" />
<meta name="description" content="Aplikasi Praktikum Web" />
<meta name="author" content="Dedy Rosyadi" />
<title>Web App</title>
<link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet"
type="text/css" />
<link

href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600
,600i,700,700i,800,800i,900,900i"
rel="stylesheet" />
<link rel="stylesheet" href="../css/sb-admin-2.min.css">
<link rel="stylesheet" href="../vendor/datatables/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="../css/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="../css/select2/dist/css/select2-bootstrap4.min.css">
<link rel="stylesheet" href="../css/custom.css">
</head>

footer.php
</div>
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright &copy; FTI UNISKA 2022</span>
</div>
</div>
</footer>
</div>

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabel"
aria-hidden="true">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 17
M. Dedy Rosyadi, M.Kom
 <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Logout dari aplikasi?</h5>
<button class="close" type="button" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">x</span>
</button>
</div>
<div class="modal-body">
Pilih "Logout" untuk melanjutkan keluar dari aplikasi.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">
Cancel
</button>
<a class="btn btn-primary" href="logout.php">Logout</a>
</div>
</div>
</div>
</div>

<?php include 'js.php'; ?>

<script>
$(document).ready(function() {
$('[data-bs-toggle="tooltip"]').tooltip();
});

$(document).ready(function() {
$('#viewUser').DataTable();
});

$(document).ready(function() {
$('#viewMahasiswa').DataTable({
"columnDefs": [{
"targets": [4, 5, 6, 7],
"orderable": false
}]
});
});

$("#jenisKelamin,#jurusan").select2({
theme: 'bootstrap4',

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 18
M. Dedy Rosyadi, M.Kom
 placeholder: "- Pilih -"
});
</script>
</body>
</html>

js.php
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../js/sb-admin-2.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="../vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="../js/select2/select2.min.js"></script>

Folder User
Buat folder baru dengan nama “user”. Folder template terdapat tiga file, yaitu :
- show.php : untuk menampilkan data user.
- add.php : untuk menambahkan data user baru.
- edit.php : untuk edit data user.
- delete.php : untuk hapus data user.
File ini digunakan untuk melakukan semua pemrosesan data untuk user.

show.php
<?php session_start(); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>

<div class="row">
<div class=" col-md-4">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">Informasi</h6>
</div>
<div class="card-body">
<ul>
<li>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 19
M. Dedy Rosyadi, M.Kom
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit,
voluptate.</p>
</li>
<li>
<p>Lorem ipsum dolor sit.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">User</h6>

</div>
<div class="card-body">
<a href="?page=user-add" class="btn btn-sm btn-success"><i class="fas fa-
plus"></i> Tambah Data</a>
<hr>
<div class="table-responsive mt-3">
<table class="table table-bordered table-hover display" id="viewUser"
style="width: 100%">
<thead>
<tr>
<th>username</th>
<th>level</th>
<th>Aksi</th>
</tr>
</thead>

<tbody>
<?php
include '../connection.php';
$query = mysqli_query($con, 'SELECT * FROM user');
while ($data = mysqli_fetch_array($query)) { ?>

<tr>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['level']; ?></td>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 20
M. Dedy Rosyadi, M.Kom
 <?php
$user = $data['username'];
$useraktif = $_SESSION['username'];
?>
<td>
<a class="btn text-primary" href="?page=user-edit&id=<?php echo
$data['id']; ?>">
<i class="fas fa-edit"></i>
</a>
<a class="btn text-danger <?php if ($user == $useraktif) echo
'disabled'; ?>"
href="?page=user-delete&id=<?php echo $data['id']; ?>"
onclick="return confirm('Anda yakin mau menghapus item ini
?')">
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

add.php
<?php
if (isset($_POST['submit'])) {
$u = $_POST['username'];
$p = md5($_POST['password']);
$l = $_POST['level'];
$result = mysqli_query($con, "SELECT * FROM user WHERE username='$u'");
$cek = mysqli_num_rows($result);
if ($cek > 0) {
echo "<script>
alert('Gunakan username dengan nama yang lain!');
window.location.href = '?page=user-add';
</script>";
exit;

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 21
M. Dedy Rosyadi, M.Kom
 }
$insert = mysqli_query($con, "INSERT INTO user(username,password,level)
VALUES('$u','$p','$l')");

if ($insert) {
echo "<script>window.location.href = '?page=user-show';</script>";
}
}
?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">

<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">User</h6>
</div>
<div class="card-body">
<form method="POST">
<div class="row mb-3">
<label for="level" class="col-sm-2 col-form-label">Level</label>
<div class="col-sm-10">
<select name="level" id="level" class="form-control" name="level"
required>
<option value="-" selected disabled>- Pilih -</option>
<option value="administrator">Administrator</option>
<option value="operator">Operator</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="username" class="col-sm-2 col-form-label">Username</label>
<div class="col-sm-10">
<input name="username" type="text" class="form-control" id="username"
required>
</div>
</div>

<div class="row mb-3">

<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 22
M. Dedy Rosyadi, M.Kom
 <input type="password" class="form-control" id="password"
name="password" required>
</div>
</div>
<hr>
<div class="row">
<div class="col offset-sm-2">
<button type="submit" class="btn btn-primary" name="submit"><i
class="fas fa-save"></i>
Simpan</button>
<a href="?page=user-show" class="btn btn-danger"><i class="fas fa-
chevron-left"></i>
Kembali</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

edit.php
<?php
$id = $_GET['id'];
include '../connection.php';
$result = mysqli_query($con, "SELECT * FROM user WHERE id=$id");

while ($data = mysqli_fetch_array($result)) {

$u = $data['username'];
$p = $data['password'];
$l = $data['level'];
}

if (isset($_POST['submitLevel'])) {
$l = $_POST['level'];
$update = mysqli_query($con, "UPDATE user SET level='$l' WHERE id=$id");

echo "<script>window.location.href = '?page=user-show';</script>";

}

if (isset($_POST['submitUsername'])) {
$u = $_POST['username'];
$update = mysqli_query($con, "UPDATE user SET username='$u' WHERE id=$id");

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 23
M. Dedy Rosyadi, M.Kom
 echo "<script>window.location.href = '?page=user-show';</script>";
}

if (isset($_POST['submitPassword'])) {
$passLama = md5($_POST['passwordLama']);
$passBaru = md5($_POST['passwordBaru']);

if ($passLama != $p) {
echo "<script>alert('Password tidak sesuai')</script>";
} else {
$update = mysqli_query($con, "UPDATE user SET password='$passBaru' WHERE
id=$id");
echo "<script>alert('Password berhasil diganti')</script>";
echo "<script>window.location.href = '?page=user-show';</script>";
}
}

?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>
<div class="row">
<div class="col-md-10">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">User</h6>

</div>
<div class="card-body">
<form method="post">
<div class="row mb-3">
<label for="level" class="col-sm-2 col-form-label">Level</label>
<div class="col-sm-10">
<select name="level" id="level" class="form-control" name="level"
required>
<option value="-" disabled>- Pilih -</option>
<option value="administrator" <?php if ($l == 'administrator') echo
'selected'; ?>>Administrator
</option>
<option value="operator" <?php if ($l == 'operator') echo
'selected'; ?>>Operator</option>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 24
M. Dedy Rosyadi, M.Kom
 </select>
</div>
<div class="col offset-sm-2">
<button type="submit" class="btn btn-sm btn-primary mt-2"
name="submitLevel"><i class="fas fa-save"></i>
Simpan</button>
</div>
</div>
</form>
<hr>
<form method="post">
<div class="row mb-3">
<label for="username" class="col-sm-2 col-form-label">Username</label>
<div class="col-sm-10">
<input name="username" type="text" class="form-control" id="username"
value="<?php echo $u; ?>" required>
</div>
<div class="col offset-sm-2">
<button type="submit" class="btn btn-sm btn-primary mt-2"
name="submitUsername"><i
class="fas fa-save"></i>
Simpan</button>
</div>
</div>
<hr>
</form>

<form method="post">
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Password
Lama</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password"
name="passwordLama" required>
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Password
Baru</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password"
name="passwordBaru" required>
</div>
<div class="col offset-sm-2">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 25
M. Dedy Rosyadi, M.Kom
 <button type="submit" class="btn btn-sm btn-primary mt-2"
name="submitPassword"><i
class="fas fa-save"></i>
Simpan</button>
</div>
</div>
</form>
<hr>
<div class="row">
<div class="col offset-sm-2">
<a href="?page=user-show" class="btn btn-danger"><i class="fas fa-
chevron-left"></i>
Kembali</a>
</div>
</div>

</div>
</div>
</div>
</div>

delete.php
<?php
include "../connection.php";
$id = $_GET['id'];
$result = mysqli_query($con, "DELETE FROM user WHERE id=$id");

echo "<meta http-equiv='refresh' content='0; url=?page=user-show'>";

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 26
M. Dedy Rosyadi, M.Kom
Folder admin
Didalam folder admin terdapat empat file, yaitu :
- dashboard.php : untuk konten dashboard user.
- index.php : untuk route navigasi halaman.
- sidebar.php : untuk menu navigasi.
- logout.php : untuk keluar dari aplikasi.

dashboard.php
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>

<div class="row">
<div class="col-xl-4 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Mahasiswa
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
<?php
include '../connection.php';
$count = "SELECT * from mahasiswa";

if ($result = mysqli_query($con, $count)) {

$rowcount = mysqli_num_rows($result);
echo $rowcount;
}
?>
</div>
</div>
<div class="col-auto">
<i class="fas fa-user-graduate fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 27
M. Dedy Rosyadi, M.Kom
 <div class="col-xl-4 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
DOSEN
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
0
</div>
</div>
<div class="col-auto">
<i class="fas fa-user-tie fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>

<div class="col-xl-4 mb-4">

<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
USER
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
<?php
include '../connection.php';
$count = "SELECT * from user";

if ($result = mysqli_query($con, $count)) {

$rowcount = mysqli_num_rows($result);
echo $rowcount;
}
?>
</div>
</div>
<div class="col-auto">
<i class="fas fa-user fa-2x text-gray-300"></i>
</div>
</div>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 28
M. Dedy Rosyadi, M.Kom
 </div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">Materi Praktikum</h6>

</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h2>Materi praktikum </h2>
<ul>
<li>Menggunakan admin template (sbadmin2)</li>
<li>Membuat aplikasi create, read, update, delete, print dengan
bahasa pemrograman (PHP)</li>
<li>Menggunakan Datatables untuk menampilkan data</li>
<li>Menggunakan select2 untuk menampilkan daftar select/list</li>
<li>Membuat fungsi print menggunakan library FPDF dan
windows.print</li>
</ul>
</div>
<div class="col-md-6">
<h2>Ruang Lingkup Aplikasi</h2>
<ul>
<li>Login
<ul>
<li>level : admin</li>
<li>level : operator</li>
</ul>
</li>
<li>Menampilkan data dengan datatables</li>
<li>Fungsi simpan Data</li>
<li>Fungsi edit Data</li>
<li>Fungsi hapus berdasarkan baris data</li>
<li>Fungsi cetak (semua data)</li>
</ul>
</div>
</div>
</div>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 29
M. Dedy Rosyadi, M.Kom
 </div>
</div>
</div>

index.php
<?php
include('../logincheck.php');
session_start();
include '../template/header.php';
?>

<body id="page-top">
<div id="wrapper">
<?php include 'sidebar.php'; ?>

<div id="content-wrapper" class="d-flex flex-column">

<div id="content">
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-
top shadow">
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-
circle mr-3">
<i class="fa fa-bars"></i>
</button>

<ul class="navbar-nav ml-auto">

<div class="topbar-divider d-none d-sm-block"></div>

<li class="nav-item dropdown no-arrow">

<a class="nav-link dropdown-toggle" href="#" id="userDropdown"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">
<strong>Halo, </strong>
<?php if (isset($_SESSION['username']) != '') : echo
$_SESSION['username'];
endif; ?>
</span>
<img class="img-profile rounded-circle"
src="../img/undraw_profile.svg" />
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-
in" aria-labelledby="userDropdown">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 30
M. Dedy Rosyadi, M.Kom
 <a class="dropdown-item" href="#" data-toggle="modal" data-
target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-
400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>

<div class="container-fluid">
<?php
include '../connection.php';
error_reporting(0);
switch ($_GET['page']) {
case 'dashboard':
$title = 'Dashboard';
include 'dashboard.php';
break;

case 'mahasiswa-show':
$title = 'Data Mahasiswa';
include '../mahasiswa/show.php';
break;
case 'mahasiswa-add':
$title = 'Input Data Mahasiswa';
include '../mahasiswa/add.php';
break;
case 'mahasiswa-delete':
include '../mahasiswa/delete.php';
break;
case 'mahasiswa-edit':
$title = 'Edit Data Mahasiswa';
include '../mahasiswa/edit.php';
break;
case 'mahasiswa-print':
include '../mahasiswa/print.php';
break;
case 'mahasiswa-print2':
include '../mahasiswa/print2.php';
break;

case 'user-show':

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 31
M. Dedy Rosyadi, M.Kom
 $title = 'Data User';
include '../user/show.php';
break;

case 'user-add':
$title = 'Input Data User';
include '../user/add.php';
break;
case 'user-edit':
$title = 'Edit Data User';
include '../user/edit.php';
break;

case 'user-delete':
include '../user/delete.php';
break;

case 'admin-logout':
include 'logout.php';
break;

default:
$title = 'Dashboard';
include 'dashboard.php';
break;
}
?>
</div>

<?php include '../template/footer.php'; ?>

</body>

</html>

sidebar.php
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center"
href="index.html">
<div class="sidebar-brand-icon">
<i class="fas fa-warehouse"></i>
</div>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 32
M. Dedy Rosyadi, M.Kom
 <div class="sidebar-brand-text mx-3 text-left small">
PRAKTIKUM
<br />
WEB 2
</div>
</a>

<hr class="sidebar-divider my-0" />

<li class="nav-item active">

<a class="nav-link" href="?page=dashboard">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span>
</a>
</li>

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-
target="#dataMahasiswa" aria-expanded="true"
aria-controls="dataMahasiswa">
<i class="fas fa-fw fa-user-graduate"></i>
<span>Mahasiswa</span>
</a>
<div id="dataMahasiswa" class="collapse" aria-labelledby="dataMahasiswa" data-
parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="?page=mahasiswa-show">Data Mahasiswa</a>
<a class="collapse-item" href="?page=mahasiswa-add">Input Data</a>
</div>
</div>
</li>

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-
target="#dataDosen" aria-expanded="true"
aria-controls="collapsedataDosenTwo">
<i class="fas fa-fw fa-user-tie"></i>
<span>Dosen</span>
</a>
<div id="dataDosen" class="collapse" aria-labelledby="dataDosen" data-
parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="#">Data Dosen</a>
<a class="collapse-item" href="#">Input Data</a>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 33
M. Dedy Rosyadi, M.Kom
 </div>
</div>
</li>

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-
target="#laporan" aria-expanded="true"
aria-controls="laporan">
<i class="fas fa-fw fa-file"></i>
<span>Laporan</span>
</a>
<div id="laporan" class="collapse" aria-labelledby="laporan" data-
parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" target="_blank"
href="../mahasiswa/print2.php">Data Mahasiswa</a>
<a class="collapse-item" href="#">Data Dosen</a>
</div>
</div>
</li>

<?php
session_start();
if ($_SESSION['level'] == 'administrator') {
echo '
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-
target="#user" aria-expanded="true"
aria-controls="user">
<i class="fas fa-fw fa-user"></i>
<span>User</span>
</a>
<div id="user" class="collapse" aria-labelledby="user" data-
parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="?page=user-show">Data User</a>
<a class="collapse-item" href="?page=user-add">Input User</a>
</div>
</div>
</li>
';
}
?>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 34
M. Dedy Rosyadi, M.Kom
 <hr class="sidebar-divider d-none d-md-block" />
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>

logout.php
<?php
session_start();
session_destroy();
header("location: ../index.php");

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 35
M. Dedy Rosyadi, M.Kom
Folder mahasiswa
Didalam folder admin terdapat empat file yaitu :
- show.php : untuk menampilkan data mahasiswa
- add.php : untuk menambahkan data mahasiswa baru.
- edit.php : untuk edit data mahasiswa.
- delete.php : untuk hapus data mahasiswa
- print.php : cetak data menggunakan library fpdf
- print2.php : cetak data menggunakan metode window.print;
- print3.php : cetak data detail menggunakan metode window.print

show.php
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>

<div class="row">
<div class="col">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">Mahasiswa</h6>

</div>
<div class="card-body">
<a href="?page=mahasiswa-add" class="btn btn-sm btn-success"><i class="fas
fa-plus"></i> Tambah Data</a>
<a href="../mahasiswa/print.php" class="btn btn-sm btn-primary"
target="_blank"><i class="fas fa-print"></i>
Cetak
FPDF</a>
<a href="../mahasiswa/print2.php" class="btn btn-sm btn-warning"
target="_blank"><i class="fas fa-print"></i>
Cetak
window.print</a>
<hr>

<div class="table-responsive mt-3">

<table class="table table-bordered table-hover" id="viewMahasiswa"
style="width: 100%">
<thead>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 36
M. Dedy Rosyadi, M.Kom
 <tr>
<th>NIM</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>

<tbody>
<?php
include '../connection.php';
$query = mysqli_query($con, 'SELECT * FROM mahasiswa');
while ($data = mysqli_fetch_array($query)) { ?>

<tr>
<td><?php echo $data['nim']; ?></td>
<td class="text-nowrap"><?php echo $data['nama']; ?></td>
<td><?php echo $data['jurusan']; ?></td>
<td><?php echo $data['jenis_kelamin']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td><?php echo $data['telepon']; ?></td>
<td><?php echo $data['email']; ?></td>
<td>
<a class="btn text-primary" href="?page=mahasiswa-edit&id=<?php
echo $data['id']; ?>"><i
class="fas fa-edit"></i>
</a>
<a class="btn text-danger" href="?page=mahasiswa-delete&id=<?php
echo $data['id']; ?>"
onclick="return confirm('Anda yakin mau menghapus item ini
?')"><i class="fas fa-trash"></i>
</a>
<a class="btn text-success"
href="../mahasiswa/print3.php?id=<?php echo $data['id']; ?>"
target="_blank"><i class="fas fa-print"></i>
</a>
</td>
</tr>

<?php

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 37
M. Dedy Rosyadi, M.Kom
 }
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

add.php
<?php
if (isset($_POST['submit'])) {
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$jurusan = $_POST['jurusan'];
$jenisKelamin = $_POST['jenisKelamin'];
$alamat = $_POST['alamat'];
$telepon = $_POST['telepon'];
$email = $_POST['email'];
$insert = mysqli_query($con, "INSERT INTO
mahasiswa(nim,nama,jurusan,jenis_kelamin,alamat,telepon,email)
VALUES('$nim','$nama','$jurusan','$jenisKelamin','$alamat','$telepon','$email')");

if ($insert) {
echo "<script>window.location.href = '?page=mahasiswa-show';</script>";
}
}
?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">

<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>
<div class="row">
<div class="col">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">Mahasiswa</h6>

</div>
<div class="card-body">
<form method="POST">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 38
M. Dedy Rosyadi, M.Kom
 <div class="row mb-3">
<label for="nim" class="col-sm-2 col-form-label">NIM</label>
<div class="col-sm-10">
<input name="nim" type="text" class="form-control" id="nim" required>
</div>
</div>

<div class="row mb-3">

<label for="nama" class="col-sm-2 col-form-label">Nama Lengkap</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nama" name="nama"
required>
</div>
</div>

<div class="row mb-3">

<label for="jurusan" class="col-sm-2 col-form-label">Jurusan</label>
<div class="col-sm-10">
<select name="jurusan" id="jurusan" class="form-control"
name="jurusan" required>
<option value="-" selected disabled>- Pilih -</option>
<option value="TI">Teknik Informatika</option>
<option value="SI">Sistem Informasi</option>
</select>
</div>
</div>

<div class="row mb-3">

<label for="jenisKelamin" class="col-sm-2 col-form-label">Jenis
Kelamin</label>
<div class="col-sm-10">
<select name="jenisKelamin" id="jenisKelamin" class="form-control"
name="jenisKelamin" required>
<option value="-" selected disabled>- Pilih -</option>
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select>
</div>
</div>

<div class="row mb-3">

<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="alamat" name="alamat">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 39
M. Dedy Rosyadi, M.Kom
 </div>
</div>

<div class="row mb-3">

<label for="telepon" class="col-sm-2 col-form-label">Telepon</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="telepon"
name="telepon">
</div>
</div>

<div class="row mb-3">

<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<hr>

<div class="row">

<div class="col offset-sm-2">

<button type="submit" class="btn btn-primary" name="submit"><i
class="fas fa-save"></i>
Simpan</button>
<a href="?page=mahasiswa-show" class="btn btn-danger"><i class="fas
fa-chevron-left"></i>
Kembali</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

edit.php
<?php
$id = $_GET['id'];
$result = mysqli_query($con, "SELECT * FROM mahasiswa WHERE id=$id");

while ($data = mysqli_fetch_array($result)) {

$nim = $data['nim'];

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 40
M. Dedy Rosyadi, M.Kom
 $nama = $data['nama'];
$jurusan = $data['jurusan'];
$jenisKelamin = $data['jenis_kelamin'];
$alamat = $data['alamat'];
$telepon = $data['telepon'];
$email = $data['email'];
}

if (isset($_POST['submit'])) {
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$jurusan = $_POST['jurusan'];
$jenisKelamin = $_POST['jenisKelamin'];
$alamat = $_POST['alamat'];
$telepon = $_POST['telepon'];
$email = $_POST['email'];

$update = mysqli_query($con, "UPDATE mahasiswa SET

nim='$nim',nama='$nama',jurusan='$jurusan',jenis_kelamin='$jenisKelamin',alamat='$a
lamat',telepon='$telepon',email='$email' WHERE id=$id");

echo "<script>window.location.href = '?page=mahasiswa-show';</script>";

}
?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">

<h1 class="h3 mb-0 text-gray-800"><?= $title ?></h1>
</div>
<div class="row">
<div class="col">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-
content-between">
<h6 class="m-0 font-weight-bold text-primary">Mahasiswa</h6>
</div>
<div class="card-body">
<form method="POST">
<div class="row mb-3">
<label for="nim" class="col-sm-2 col-form-label">NIM</label>
<div class="col-sm-10">
<input name="nim" type="text" class="form-control" id="nim"
value="<?php echo $nim; ?>" required
placeholder="oke">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 41
M. Dedy Rosyadi, M.Kom
 </div>
</div>

<div class="row mb-3">

<label for="nama" class="col-sm-2 col-form-label">Nama Lengkap</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nama" name="nama"
value="<?php echo $nama; ?>" required>
</div>
</div>

<div class="row mb-3">

<label for="jurusan" class="col-sm-2 col-form-label">Jurusan</label>
<div class="col-sm-10">
<select name="jurusan" id="jurusan" class="form-control"
name="jurusan" required>
<option value="-" disabled>- Pilih -</option>
<option value="TI" <?php if ($jurusan == "TI") echo 'selected';
?>>Teknik Informatika</option>
<option value="SI" <?php if ($jurusan == "SI") echo 'selected';
?>>Sistem Informasi</option>
</select>
</div>
</div>

<div class="row mb-3">

<label for="jenisKelamin" class="col-sm-2 col-form-label">Jenis
Kelamin</label>
<div class="col-sm-10">
<select name="jenisKelamin" id="jenisKelamin" class="form-control"
name="jenisKelamin" required>
<option value="-" disabled>- Pilih -</option>
<option value="L" <?php if ($jenisKelamin == 'L') echo 'selected';
?>>Laki-laki</option>
<option value="P" <?php if ($jenisKelamin == 'P') echo 'selected';
?>>Perempuan</option>
</select>
</div>
</div>

<div class="row mb-3">

<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 42
M. Dedy Rosyadi, M.Kom
 <input type="text" class="form-control" id="alamat" name="alamat"
value="<?php echo $alamat; ?>" required>
</div>
</div>

<div class="row mb-3">

<label for="telepon" class="col-sm-2 col-form-label">Telepon</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="telepon" name="telepon"
value="<?php echo $telepon; ?>"
required>
</div>
</div>

<div class="row mb-3">

<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email"
value="<?php echo $email; ?>" required>
</div>
</div>
<hr>
<div class="row">
<div class="offset-sm-2">

<button type="submit" class="btn btn-sm btn-primary" name="submit"><i

class="fas fa-save"></i>
Simpan</button>
<a href="?page=mahasiswa-show" class="btn btn-sm btn-danger"><i
class="fas fa-chevron-left"></i>
Kembali</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

delete.php
<?php
include "../connection.php";
$id = $_GET['id'];

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 43
M. Dedy Rosyadi, M.Kom
$result = mysqli_query($con, "DELETE FROM mahasiswa WHERE id=$id");

echo "<meta http-equiv='refresh' content='0; url=?page=mahasiswa-show'>";

print.php
<?php
require('../fpdf184/fpdf.php');
$pdf = new FPDF('L', 'mm', 'A4');
$pdf->SetLeftMargin(20);
$pdf->AddPage();
$pdf->SetFont('Arial', 'B', 16);
$pdf->Cell(0, 10, 'LAPORAN DATA MAHASISWA', 0, 10, 'C');
$pdf->Cell(10, 7, '', 0, 1, 'C');
$pdf->SetFont('Arial', 'B', 10);
$pdf->Cell(10, 8, 'No.', 1, 0, 'C');
$pdf->Cell(20, 8, 'NIM', 1, 0, 'C');
$pdf->Cell(50, 8, 'Nama Lengkap', 1, 0, 'C');
$pdf->Cell(18, 8, 'Jurusan', 1, 0, 'C');
$pdf->Cell(10, 8, 'JK', 1, 0, 'C');
$pdf->Cell(60, 8, 'Alamat', 1, 0, 'C');
$pdf->Cell(25, 8, 'Telepon', 1, 0, 'C');
$pdf->Cell(50, 8, 'Email', 1, 1, 'C');
$pdf->SetFont('Arial', '', 10);

include '../connection.php';
$no = 1;
$result = mysqli_query($con, "SELECT * FROM mahasiswa");
while ($data = mysqli_fetch_array($result)) {
$pdf->Cell(10, 8, $no++, 1, 0, 'C');
$pdf->Cell(20, 8, $data['nim'], 1, 0, 'C');
$pdf->Cell(50, 8, $data['nama'], 1, 0);
$pdf->Cell(18, 8, $data['jurusan'], 1, 0, 'C');
$pdf->Cell(10, 8, $data['jenis_kelamin'], 1, 0, 'C');
$pdf->Cell(60, 8, $data['alamat'], 1, 0);
$pdf->Cell(25, 8, $data['telepon'], 1, 0);
$pdf->Cell(50, 8, $data['email'], 1, 1);
}
$pdf->Output();

print2.php
<style>
* {
font-family: Arial, Helvetica, sans-serif;

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 44
M. Dedy Rosyadi, M.Kom
}

table {
border-collapse: collapse;
border-color: black;
}
</style>
<h2 align="center">Laporan Data Mahasiswa</h2>
<div class="table-responsive mt-3">
<table border="1" width="100%" align="center" cellpadding="8">
<thead>
<tr>
<th width="10%">NIM</th>
<th width="25%">Nama</th>
<th width="5%">Jurusan</th>
<th width="5%">Jenis Kelamin</th>
<th width="35%">Alamat</th>
<th width="10%">Telepon</th>
<th width="10%">Email</th>
</tr>
</thead>

<tbody>
<?php
include '../connection.php';
$query = mysqli_query($con, 'SELECT * FROM mahasiswa');
while ($data = mysqli_fetch_array($query)) { ?>

<tr>
<td align="center"><?php echo $data['nim']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td align="center"><?php echo $data['jurusan']; ?></td>
<td align="center"><?php echo $data['jenis_kelamin']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td align="center"><?php echo $data['telepon']; ?></td>
<td><?php echo $data['email']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 45
M. Dedy Rosyadi, M.Kom
<script>
window.print();
</script>

print3.php
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}

table {
border-collapse: collapse;
border-color: black;
}
</style>
<h2 align="center">Laporan Detail Mahasiswa</h2>
<div class="table-responsive mt-3">
<table border="1" width="70%" align="center" cellpadding="8">
<tbody>
<?php
$id = $_GET['id'];
// $id = 11;
include '../connection.php';
$query = mysqli_query($con, "SELECT * FROM mahasiswa WHERE id = $id");
while ($data = mysqli_fetch_array($query)) { ?>
<tr>
<td width=25%>NIM</td>
<td width=75%><?php echo $data['nim'] ?></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td><?php echo $data['nama'] ?></td>
</tr>
<tr>
<td>Jurusan</td>
<td>
<?php
if ($data['jurusan'] == "TI") {
echo "Teknik Informatika";
} else {
echo "Sistem Informasi";
}
?>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 46
M. Dedy Rosyadi, M.Kom
 </td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>

<?php
if ($data['jenis_kelamin'] == "L") {
echo "Laki-laki";
} else {
echo "Perempuan";
}
?>
</td>
</tr>
<tr>
<td>Alamat</td>
<td><?php echo $data['alamat'] ?></td>
</tr>
<tr>
<td>Telepon</td>
<td><?php echo $data['telepon'] ?></td>
</tr>
<tr>
<td>Email</td>
<td><?php echo $data['email'] ?></td>
</tr>

<!-- <tr>

<td align="center"><?php echo $data['nim']; ?></td>

<td><?php echo $data['nama']; ?></td>
<td align="center"><?php echo $data['jurusan']; ?></td>
<td align="center"><?php echo $data['jenis_kelamin']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td align="center"><?php echo $data['telepon']; ?></td>
<td><?php echo $data['email']; ?></td>
</tr> -->
<?php
}
?>
</tbody>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 47
M. Dedy Rosyadi, M.Kom
 </table>
</div>

<script>
window.print();
</script>

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 48
M. Dedy Rosyadi, M.Kom
 Kesimpulan

Pada modul ini terdapat materi tentang langkah-langkah cara pembuatan aplikasi berbasis
web sederhana menggunakan bahasa pemrograman PHP. Berikut beberapa rangkuman
materi yang dibahas pada modul praktikum ini :
1. Membuat database menggunakan MySQL.
2. Membuat aplikasi sederhana dengan fungsi Create, Read, Update, Delete & Print
menggunakan bahasan pemrograman PHP.
3. Memanfaatkan admin template SB Admin 2 untuk membuat tampilan yang lebih baik.
4. Memanfaatkan library datatables untuk menampilkan data dengan fitur limit jumlah
data, informasi jumlah data, pencarian data, sortir data & pagination.
5. Memanfaatkan library select2 untuk membuat list data yang lebih dinamis.
6. Memanfaatkan library FPDF untuk membuat fungsi cetak data.
7. Menggunakan window.print sebagai opsi pilihan untuk fungsi cetak data.

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 49
M. Dedy Rosyadi, M.Kom
 Penutup

Demikian modul ini dibuat semoga bermanfaat dan dapat menambah wawasan bagi orang
yang membacanya. Dan penulis mohon maaf apabila masih terdapat banyak kekurangan dan
kesalahan.

Sekian, terimakasih.

M. Dedy Rosyadi, M.Kom

FAKULTAS TEKNOLOGI INFORMASI

Modul Praktikum Web (HTML, CSS, JS & Bootstrap) 50
M. Dedy Rosyadi, M.Kom