BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan...

50
12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan (untuk table cukup di berikan contoh langkah-langkah pembuatan satu table saja). A. Database PLN Ketikan pada kotak “Buat basis data”, lalu klik tombol “Buat”. Buat database dengan nama “pln”. Setelah membuat database baru, akan terlihat daftar tabel yang masih kosong (sisi sebelah kiri) Gambar 14. Tampilan Database PLN B. Tabel Admin Tabel “admin”: Field Name Type Size Keterangan username Varchar 11 Primary Key, AUTO_INCREMENT nama Varchar 30 password Varchar 30 Ketika telah masuk kedalam database pln, maka kita ketikkan nama tabel beserta jumlah field yang ada pada tabel.

Transcript of BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan...

Page 1: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

12

BAB II

RANCANGAN APLIKASI

2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database

dan table yang dibutuhkan (untuk table cukup di berikan contoh langkah-langkah pembuatan satu table saja). A. Database PLN

Ketikan pada kotak “Buat basis data”, lalu klik tombol “Buat”.

Buat database dengan nama “pln”. Setelah membuat database baru, akan terlihat daftar tabel yang masih kosong (sisi sebelah kiri)

Gambar 14. Tampilan Database PLN

B. Tabel Admin

Tabel “admin”:

Field Name Type Size Keterangan

username Varchar 11 Primary Key,

AUTO_INCREMENT

nama Varchar 30

password Varchar 30

Ketika telah masuk kedalam database pln, maka kita

ketikkan nama tabel beserta jumlah field yang ada pada

tabel.

Page 2: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

13

Gambar 15. Tampilan Tabel Admin

Jika sudah mengisi nama tabel dan jumlah field klik tombol “Simpan”

Bila Primary Key, bersifat AUTO_INCREMENT, maka ceklis

pada pilihan AUTO_INCREMENT. Lalu Klik tombol Simpan.

Tampilan ketika berhasil membuat tabel:

Gambar 16. Tampilan Auto Increment pada Tabel Admin

Lanjutkan pengerjaan database “pln”, Lalu Buat Kembali

beberapa table berikut ini dengan menggunakan

phpMyAdmin (lihat contoh pengerjaan pada pembuatan

table admin):

Page 3: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

14

Tabel “absen” :

Field Name Type Size Keterangan

id_absen Int 11 Primary Key,

AUTO_INCREMENT

id_peserta Varchar 10

nama Varchar 50

id_daerah Varchar 15

id_diklat Varchar 15

tgl_absensi Varchar 15

keterangan Varchar 100

status Enum - (‘Hadir’, ’Tidak Hadir’, ’Sakit’,

’Izin’)

Tabel “daerah” :

Field Name Type Size Keterangan

id_daerah varchar 10 Primary Key,

AUTO_INCREMENT

nama_daerah varchar 50

Tabel “diklat” :

Field Name Type Size Keterangan

id_diklat Varchar 15 Primary Key,

AUTO_INCREMENT

nama_diklat Varchar 50

lokasi_pelaksanaan Varchar 30

tgl_mulai Varchar 15

tgl_selesai Varchar 15

Tabel “peserta” :

Field Name Type Size Keterangan

id_peserta Int 11 Primary Key,

AUTO_INCREMENT

rencana_penjadwalan Varchar 20

jabatan Varchar 20

nama Varchar 30

alamat Varchar 100

jk Enum - (‘Laki-Laki’, ‘Perempuan’,”,”)

no_hp Varchar 15

id_daerah Varchar 15

id_diklat Varchar 15

tempat_lahir Varchar 30

tanggal_lahir Varchar 20

eviden Varchar 50

sertifikat Varchar 50

Page 4: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

15

2.2. Rancangan Form Master Berisi tentang langkah-langkah pembuatan Form

Master yang dibutuhkan (cukup di berikan contoh langkah-

langkah pembuatan satu form saja).

A. Membuat Form Master

Pada tampilan master ini, penulis memasukkan Data

Peserta Diklat dalam menu Perencanaan.

Gambar 17. Tampilan Peserta

Buatlah peserta.php, berikut kode script nya

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

Page 5: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

16

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Data Peserta

Diklat</h2></center><hr>

<a href="tambah_peserta.php" class="notika-

icon notika-support">Tambah Peserta Baru</a>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>Id Peserta</th>

<th>Nama</th>

<th>Alamat</th>

<th>Jenis Kelamin</th>

Page 6: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

17

<th>No Handphone</th>

<th>Lokasi Pelaksanaan</th>

<th>Judul Diklat</th>

<th>Tempat Lahir</th>

<th>Tanggal Lahir</th>

<th>Jabatan</th>

<th>Eviden</th>

<th>Rencana Penjadwalan</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<?php

$no = 1;

$query = mysqli_query ($koneksi, "SELECT *

FROM peserta");

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

?>

<tr>

<td><center><?php echo $no++

?></center></td>

<td><?php echo $data['id_peserta'];?></td>

<td><?php echo $data['nama'];?></td>

<td><?php echo $data['alamat'];?></td>

<td><?php echo $data['jk'];?></td>

<td><?php echo $data['no_hp'];?></td>

Page 7: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

18

<?php

$id_daerah= $data['id_daerah'];

$select = mysqli_query($koneksi,"SELECT

* FROM daerah WHERE id_daerah='$id_daerah'");

$baris = mysqli_fetch_array($select) ?>

<td> <?php echo $baris['nama_daerah'];?></td>

<?php

$id_diklat= $data['id_diklat'];

$select = mysqli_query($koneksi,"SELECT

* FROM diklat WHERE id_diklat='$id_diklat'");

$baris2 = mysqli_fetch_array($select) ?>

<td> <?php echo $baris2['nama_diklat'];?></td>

<td><?php echo $data['tempat_lahir'];?></td>

<td><?php echo $data['tanggal_lahir'];?></td>

<td><?php echo $data['jabatan'];?></td>

<td> <a href="eviden/<?php echo

$data['eviden'];?>"><?php echo $data['eviden'];?></a>

</td>

<td><?php echo

$data['rencana_penjadwalan'];?></td>

<td> <div class='badge badge-primary'>

<a href="edit_peserta.php?id_peserta=<?=

$data["id_peserta"]; ?>" style="color:white;">Edit</a></div>

<div class='badge badge-danger'>

<a href="hapus_peserta.php?id_peserta=<?=

$data["id_peserta"]; ?>" style="color:white;">Hapus

</a></div></td>

Page 8: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

19

</tr>

<?php

}

?>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

Lanjutkan pengerjaan master lainnya, Lalu buat kembali

melalui berbagai codingan yang tertera (lihat contoh

pengerjaan pada pembuatan Rancangan Form Master):

Page 9: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

20

B. Membuat Form Master Daerah

Gambar 18. Tampilan Daerah

Berikut kode script nya:

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

Page 10: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

21

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Data Daerah

Diklat</h2></center><hr>

<a href="tambah_daerah.php" class="notika-

icon notika-edit">Tambah Daerah Baru</a>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>Id Daerah</th>

<th>Nama Daerah</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<?php

Page 11: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

22

$no = 1;

$query = mysqli_query ($koneksi, "SELECT *

FROM daerah");

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

?>

<tr>

<td><center><?php echo $no++

?></center></td>

<td><?php echo $data['id_daerah'];?></td>

<td><?php echo $data['nama_daerah'];?></td>

<td> <div class='badge badge-primary'>

<a href="edit_daerah.php?id_daerah=<?=

$data["id_daerah"]; ?>" style="color:white;">Edit</a></div>

| <div class='badge badge-danger'>

<a href="hapus_daerah.php?id_daerah=<?=

$data["id_daerah"]; ?>" style="color:white;">Hapus

</a></div></td>

</tr>

<?php

}

?>

</tbody>

<tfoot>

<tr>

<tr>

</tr>

</tr>

</tfoot>

Page 12: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

23

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

C. Membuat Form Master Diklat

Gambar 19. Tampilan Data Diklat

Berikut kode script nya:

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

Page 13: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

24

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center><h2>Data Diklat</h2></center><hr>

<a href="tambah_diklat.php" class="notika-

icon notika-edit">Tambah Diklat Baru</a>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

Page 14: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

25

<tr>

<th>No</th>

<th>Id Diklat</th>

<th>Nama Diklat</th>

<th>Lokasi Pelaksanaan</th>

<th>Tanggal Mulai</th>

<th>Tanggal Selesai</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<?php

$no = 1;

$query = mysqli_query ($koneksi, "SELECT *

FROM diklat");

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

?>

<tr>

<td><center><?php echo $no++

?></center></td>

<td><?php echo $data['id_diklat'];?></td>

<td><?php echo $data['nama_diklat'];?></td>

<td><?php echo

$data['lokasi_pelaksanaan'];?></td>

<td><?php echo $data['tgl_mulai'];?></td>

<td><?php echo $data['tgl_selesai'];?></td>

Page 15: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

26

<td> <div class='badge badge-primary'>

<a href="edit_diklat.php?id_diklat=<?=

$data["id_diklat"]; ?>" style="color:white;">Edit</a></div> |

<div class='badge badge-danger'>

<a href="hapus_diklat.php?id_diklat=<?=

$data["id_diklat"]; ?>" style="color:white;">Hapus

</a></div></td>

</tr>

<?php

}

?>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

Page 16: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

27

D. Membuat Form Master Rekap Absen

Gambar 20. Tampilan Data Absensi Peserta Diklat

Pada tampilan master ini, penulis mengelola data

Absensi Peserta Diklat dalam menu Pelaksanaan.

Berikut kode script nya:

<?php include 'topbar.php'; include 'footer.php'; include 'koneksi.php'; ?> <!-- Main Menu area End--> <!-- Start Status area --> <div class="notika-status-area"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="wb-traffic-inner notika-shadow sm-res-mg-t-30 tb-res-mg-t-30"> <div class="website-traffic-ctn" > <div class="data-table-area"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="data-table-list">

Page 17: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

28

<div class="basic-tb-hd"> <center> <h2>Data Absensi Peserta Diklat</h2></center><hr>

</div> <div class="table-responsive"> <table id="data-table-basic" class="table table-striped"> <thead> <tr> <th>No</th> <th>Id Peserta</th> <th>Nama</th> <th>Id Daerah</th> <th>Id Diklat</th> <th>Tanggal Absensi</th> <th>Status</th> <th>Keterangan</th> </tr> </thead> <tbody> <?php $no = 1; $query = mysqli_query ($koneksi, "SELECT * FROM absen"); while($data = mysqli_fetch_array($query)){ ?> <tr> <td><center><?php echo $no++ ?></center></td> <td><?php echo $data['id_peserta'];?></td> <td><?php echo $data['nama'];?></td> <td><?php echo $data['id_daerah'];?></td> <td><?php echo $data['id_diklat']; ?></td> <td><?php echo $data['tgl_absensi'];?></td> <td><?php echo $data['keterangan'];?></td> <td><?php echo $data['status'];?></td> </tr> <?php }

Page 18: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

29

?> </tbody> <tfoot> <tr> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> </div> <div class="sparkline-bar-stats1"></div> </div> </div>

Page 19: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

30

E. Membuat Form Master Input Absen Peserta

Gambar 21. Tampilan Input Absen Peserta

Di halaman Input Absen Peserta Diklat, admin Pilih

Peserta yang ingin di tampilkan.

Berikut kode scriptnya:

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

Page 20: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

31

<div class="notika-status-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Data Absensi Peserta

Diklat</h2></center><hr>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>Id Peserta</th>

<th>Nama</th>

<th>Id Daerah</th>

<th>Id Diklat</th>

Page 21: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

32

<th>Tanggal Absensi</th>

<th>Status</th>

<th>Keterangan</th>

</tr>

</thead>

<tbody>

<?php

$no = 1;

query = mysqli_query ($koneksi, "SELECT *

FROM absen");

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

?>

<tr>

<td><center><?php echo $no++

?></center></td>

<td><?php echo $data['id_peserta'];?></td>

<td><?php echo $data['nama'];?></td>

<td><?php echo $data['id_daerah'];?></td>

<td><?php echo $data['id_diklat']; ?></td>

<td><?php echo $data['tgl_absensi'];?></td>

<td><?php echo $data['keterangan'];?></td>

<td><?php echo $data['status'];?></td>

</tr>

<?php

Page 22: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

33

}

?>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

Page 23: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

34

F. Membuat Form Master Peserta dalam Menu

Pelaksanaan

Gambar 22. Tampilan Data Peserta Diklat

Berikut kode script nya:

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="wb-traffic-inner notika-shadow sm-res-mg-

t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

Page 24: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

35

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Data Peserta Diklat</h2></center><hr>

<a href="tambah_peserta2.php" class="notika-icon

notika-support">Upload Sertifikat Diklat</a><hr>

<a href="cetak_laporan.php" class="notika-icon

notika-print">&nbsp;Cetak Data</a><hr>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>Id Peserta</th>

<th>Nama</th>

<th>Alamat</th>

<th>Jenis Kelamin</th>

<th>No Handphone</th>

<th>Lokasi Pelaksanaan</th>

<th>Judul Diklat</th>

<th>Tempat Lahir</th>

<th>Tanggal Lahir</th>

<th>jabatan</th>

<th>Sertifikat Diklat</th>

<th>Action</th>

</tr>

Page 25: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

36

</thead>

<tbody>

<?php

$no = 1;

$query = mysqli_query ($koneksi, "SELECT * FROM

peserta");

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

?>

<tr>

<td><center><?php echo $no++ ?></center></td>

<td><?php echo $data['id_peserta'];?></td>

<td><?php echo $data['nama'];?></td>

<td><?php echo $data['alamat'];?></td>

<td><?php echo $data['jk'];?></td>

<td><?php echo $data['no_hp'];?></td>

<?php

$id_daerah= $data['id_daerah'];

$select = mysqli_query($koneksi,"SELECT *

FROM daerah WHERE id_daerah='$id_daerah'");

$baris = mysqli_fetch_array($select) ?>

<td> <?php echo $baris['nama_daerah'];?></td>

<?php

$id_diklat= $data['id_diklat'];

$select = mysqli_query($koneksi,"SELECT *

FROM diklat WHERE id_diklat='$id_diklat'");

$baris2 = mysqli_fetch_array($select) ?>

<td> <?php echo $baris2['nama_diklat'];?></td>

<td><?php echo $data['tempat_lahir'];?></td>

Page 26: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

37

<td><?php echo $data['tanggal_lahir'];?></td>

<td><?php echo $data['jabatan'];?></td>

<td> <a href="sertifikat/<?php echo

$data['sertifikat'];?>"><?php echo $data['sertifikat'];?></a> </td>

<td> <div class='badge badge-primary'>

<div class='badge badge-danger'>

<a href="hapus_peserta.php?id_peserta=<?= $data["id_peserta"];

?>" style="color:white;">Hapus </a></div></td>

</tr>

<?php

}

?>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

Page 27: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

38

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

G. Membuat Form Master Admin dalam Menu

Pelaksanaan

Gambar 23. Tampilan Data Admin

Berikut kode scriptnya :

<?php

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

Page 28: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

39

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="wb-traffic-inner notika-shadow sm-res-mg-

t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Data Admin</h2></center><hr>

<a href="tambah_admin.php" class="notika-icon

notika-support">Tambah Admin Baru</a>

</div>

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>NIK</th>

<th>Nama</th>

<th>Action</th>

</tr>

</thead>

<tbody>

Page 29: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

40

<?php

$no = 1;

$query = mysqli_query ($koneksi, "SELECT * FROM

admin");

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

?>

<tr>

<td><center><?php echo $no++ ?></center></td>

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

<td><?php echo $data['nama'];?></td>

<td> <div class='badge badge-primary'>

<a href="edit_admin.php?username=<?=

$data["username"]; ?>" style="color:white;">Edit</a></div> |

<div class='badge badge-danger'>

<a href="hapus_admin.php?username=<?=

$data["username"]; ?>" style="color:white;">Hapus

</a></div></td>

</tr>

<?php

}

?>

</tbody>

<tfoot>

<!-- <tr>

<th>No</th>

<th>NIK</th>

<th>Nama</th>

<th>Action</th>

Page 30: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

41

</tr> -->

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

Page 31: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

42

H. Membuat Form Master Logout pada Halaman

Admin

Gambar 24. Tampilan Logout Admin

Berikut kode scriptnya:

<?php

session_start();

session_destroy();

echo "<script>

alert('Anda Yakin Inggin Logout');

document.location.href = 'index.php';

</script>";

?>

Page 32: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

43

I. Membuat Form Master Rekap Absensi pada

Halaman Peserta

Gambar 25. Tampilan Rekap Absensi Kehadiran Diklat

Berikut kode scriptnya:

<?php

session_start();

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="container">

<div class="notika-status-area">

<div class="row">

Page 33: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

44

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Rekap Absensi Kehadiran Diklat<br><?php

echo $_SESSION['nama']; ?></h2></center><hr>

</div>

<script type="text/javascript">

//fungsi displayTime yang dipanggil di bodyOnLoad

dieksekusi tiap 1000ms = 1detik

function tampilkanwaktu(){

//buat object date berdasarkan waktu saat ini

var waktu = new Date();

//ambil nilai jam,

//tambahan script + "" supaya variable sh bertipe string

sehingga bisa dihitung panjangnya : sh.length

var sh = waktu.getHours() + "";

//ambil nilai menit

var sm = waktu.getMinutes() + "";

//ambil nilai detik

Page 34: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

45

var ss = waktu.getSeconds() + "";

//tampilkan jam:menit:detik dengan menambahkan

angka 0 jika angkanya cuma satu digit (0-9)

document.getElementById("clock").innerHTML =

(sh.length==1?"0"+sh:sh) + ":" + (sm.length==1?"0"+sm:sm)

+ ":" + (ss.length==1?"0"+ss:ss);

}

</script>

<body

onload="tampilkanwaktu();setInterval('tampilkanwaktu()',

1000);">

<span id="clock" style="margin-left: 24cm;font-family:

cursive;font-weight: bold;font-size: 30px;color:

green;"></span><br><br>

<div class="tanggal" style="font-weight: bold;margin-left:

0cm;font-family: cursive;"><?php

$hari = date('l');

/*$new = date('l, F d, Y', strtotime($Today));*/

if ($hari=="Sunday") {

echo "Minggu";

}elseif ($hari=="Monday") {

echo "Senin";

}elseif ($hari=="Tuesday") {

echo "Selasa";

}elseif ($hari=="Wednesday") {

echo "Rabu";

}elseif ($hari=="Thursday") {

Page 35: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

46

echo("Kamis");

}elseif ($hari=="Friday") {

echo "Jum'at";

}elseif ($hari=="Saturday") {

echo "Sabtu";

}

?>,

<?php

$tgl =date('d');

echo $tgl;

$bulan =date('F');

if ($bulan=="January") {

echo " Januari ";

}elseif ($bulan=="February") {

echo " Februari ";

}elseif ($bulan=="March") {

echo " Maret ";

}elseif ($bulan=="April") {

echo " April ";

}elseif ($bulan=="May") {

echo " Mei ";

}elseif ($bulan=="June") {

echo " Juni ";

}elseif ($bulan=="July") {

echo " Juli ";

}elseif ($bulan=="August") {

echo " Agustus ";

Page 36: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

47

}elseif ($bulan=="September") {

echo " September ";

}elseif ($bulan=="October") {

echo " Oktober ";

}elseif ($bulan=="November") {

echo " November ";

}elseif ($bulan=="December") {

echo " Desember ";

}

$tahun=date('Y');

echo $tahun;

?>

</div>

<!-- DataTales Example -->

<div class="card shadow mb-4">

<div class="card-body">

<div class="table-responsive">

<table id="data-table-basic" class="table table-

striped">

<thead>

<tr>

<th>No</th>

<th>Tanggal Absensi</th>

<th>Nama Diklat</th>

<th>Lokasi Pelaksanaan</th>

Page 37: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

48

<th>Status</th>

<th>Keterangan</th>

</tr>

</thead>

<tbody>

<?php

$id_peserta = $_SESSION['id_peserta'];

$no = 1;

$query = mysqli_query ($koneksi, "SELECT

a.tgl_absensi as tg, a.keterangan as kt, d.nama_diklat

as nd, d.lokasi_pelaksanaan as lp, a.status as s FROM

absen a, diklat d WHERE a.id_diklat= d.id_diklat and

a.id_peserta='$id_peserta'");

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

?>

<tr>

<td><center><?php echo $no++

?></center></td>

<td><?php echo $data['tg'];?></td>

<td><?php echo $data['kt'];?></td>

<td><?php echo $data['nd'];?></td>

<td><?php echo $data['lp'];?></td>

<td><?php echo $data['s'];?></td>

</tr>

<?php

Page 38: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

49

}

?>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

Page 39: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

50

J. Membuat Form Master Sertifikat Diklat pada

Halaman Peserta

Gambar 26. Tampilan Download Sertifikat Peserta Diklat

Berikut kode scriptnya:

<?php

session_start();

include 'topbar.php';

include 'footer.php';

include 'koneksi.php';

?>

<!-- Main Menu area End-->

<!-- Start Status area -->

<div class="notika-status-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

Page 40: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

51

<div class="wb-traffic-inner notika-shadow sm-

res-mg-t-30 tb-res-mg-t-30">

<div class="website-traffic-ctn" >

<div class="data-table-area">

<div class="container">

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-

12">

<div class="data-table-list">

<div class="basic-tb-hd">

<center> <h2>Download Sertifikat Peserta

Diklat</h2></center><hr>

</div>

<script type="text/javascript">

//fungsi displayTime yang dipanggil di bodyOnLoad

dieksekusi tiap 1000ms = 1detik

function tampilkanwaktu(){

//buat object date berdasarkan waktu saat ini

var waktu = new Date();

//ambil nilai jam,

//tambahan script + "" supaya variable sh bertipe string

sehingga bisa dihitung panjangnya : sh.length

var sh = waktu.getHours() + "";

//ambil nilai menit

var sm = waktu.getMinutes() + "";

//ambil nilai detik

Page 41: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

52

var ss = waktu.getSeconds() + "";

//tampilkan jam:menit:detik dengan menambahkan

angka 0 jika angkanya cuma satu digit (0-9)

document.getElementById("clock").innerHTML =

(sh.length==1?"0"+sh:sh) + ":" + (sm.length==1?"0"+sm:sm)

+ ":" + (ss.length==1?"0"+ss:ss);

}

</script>

<body

onload="tampilkanwaktu();setInterval('tampilkanwaktu()',

1000);">

<span id="clock" style="margin-left: 24cm;font-family:

cursive;font-weight: bold;font-size: 30px;color:

green;"></span><br><br>

<div class="tanggal" style="font-weight: bold;margin-left:

0cm;font-family: cursive;"><?php

$hari = date('l');

/*$new = date('l, F d, Y', strtotime($Today));*/

if ($hari=="Sunday") {

echo "Minggu";

}elseif ($hari=="Monday") {

echo "Senin";

}elseif ($hari=="Tuesday") {

echo "Selasa";

}elseif ($hari=="Wednesday") {

echo "Rabu";

}elseif ($hari=="Thursday") {

echo("Kamis");

Page 42: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

53

}elseif ($hari=="Friday") {

echo "Jum'at";

}elseif ($hari=="Saturday") {

echo "Sabtu";

}

?>,

<?php

$tgl =date('d');

echo $tgl;

$bulan =date('F');

if ($bulan=="January") {

echo " Januari ";

}elseif ($bulan=="February") {

echo " Februari ";

}elseif ($bulan=="March") {

echo " Maret ";

}elseif ($bulan=="April") {

echo " April ";

}elseif ($bulan=="May") {

echo " Mei ";

}elseif ($bulan=="June") {

echo " Juni ";

}elseif ($bulan=="July") {

echo " Juli ";

}elseif ($bulan=="August") {

echo " Agustus ";

Page 43: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

54

}elseif ($bulan=="September") {

echo " September ";

}elseif ($bulan=="October") {

echo " Oktober ";

}elseif ($bulan=="November") {

echo " November ";

}elseif ($bulan=="December") {

echo " Desember ";

}

$tahun=date('Y');

echo $tahun;

?>

</div>

<!-- DataTales Example -->

<div class="card shadow mb-4">

<div class="card-body">

<hr><hr>

<h4><b>Klik Icon di bawah ini untuk download

sertifikat peserta Diklat</b></h4><br>

<?php

$id_peserta= $_SESSION['id_peserta'];

$select = mysqli_query($koneksi,"SELECT * FROM

peserta WHERE id_peserta='$id_peserta'");

$baris = mysqli_fetch_array($select) ?>

<a download="../admin/sertifikat/<?php echo

$baris['sertifikat'];?>" href="../admin/sertifikat/<?php echo

Page 44: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

55

$baris['sertifikat'];?>"><imgsrc="img/pdf.png"

width="100px" alt=""></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="sparkline-bar-stats1"></div>

</div>

</div>

K. Membuat Form Master Logout pada Halaman

Peserta

Page 45: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

56

Gambar 27. Tampilan Logout

Berikut kode scriptnya:

<?php

session_start();

session_destroy();

echo "<script>

alert('Anda Berhasil Logout');

document.location.href = 'index.php';

</script>";

?>

Page 46: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

57

2.3. Rancangan Laporan

Berisi tentang langkah-langkah pembuatan Form

Laporan yang dibutuhkan (cukup di berikan contoh langkah-

langkah pembuatan satu form saja).

Gambar 28. Tampilan Data Peserta Diklat

Pada tampilan Laporan ini, penulis mengelola data

Peserta dalam menu Selesai dan cetak data peserta.

Lalu, klik cetak data.

Kemudian, akan keluar tampilan berikut:

Gambar 29. Tampilan Cetak Data Laporan

Page 47: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

58

Berikut kode scriptnya:

<?php

require('fpdf17/fpdf.php');

class myPDF extends FPDF{

function header(){

$this->SetFont('Arial','B',18);

$this ->Cell(276,10,'PT.PLN (Persero) APP

KARAWANG',0,0,'C');

$this->ln();

$this->SetFont('Times','U',16);

$this ->Cell(276,10,'Jl.Raya Kosambi, Klari,

Kabupaten Karawang - Jawa Barat',0,1,'C');

$this->ln(10);

$this->SetFont('Times','BU',20);

$this ->Cell(276,5,'LAPORAN PESERTA

DIKLAT',0,0,'C');

$this->ln(10);

}

function headerTable(){

$this->SetFont('Times','B',10);

$this->Cell(1,10,'',0,0,'C');

$this->Cell(10,10,'No',1,0,'C');

$this->Cell(20,10,'Id Peserta',1,0,'C');

$this->Cell(30,10,'Nama',1,0,'C');

$this->Cell(20,10,'Jabatan',1,0,'C');

$this->Cell(65,10,'Judul Diklat',1,0,'C');

$this->Cell(30,10,'Lokasi',1,0,'C');

$this->Cell(40,10,'Tanggal

Pelaksanaan',1,0,'C');

$this->Cell(30,10,'Eviden',1,0,'C');

$this->Cell(30,10,'Penjadwalan',1,0,'C');

$this->Cell(30,10,'Status',1,0,'C');

$this->Ln();

}

function viewTable(){

Page 48: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

59

$this->SetFont('Times','',10);

$no = 1;

$koneksi=mysqli_connect('localhost','root','','pl

n');

$select = mysqli_query($koneksi,"SELECT

absen.status, peserta.id_peserta, peserta.nama,

peserta.jabatan,

peserta.eviden,peserta.rencana_penjadwalan,

daerah.nama_daerah, diklat.nama_diklat,

diklat.tgl_mulai

FROM absen

JOIN peserta ON absen.id_peserta = peserta.id_peserta

JOIN daerah ON peserta.id_daerah = daerah.id_daerah

JOIN diklat ON peserta.id_diklat = diklat.id_diklat ");

while($baris = mysqli_fetch_array($select)){

$this->Cell(1,10,'',0,0,'C');

$this->Cell(10,5,''.$no++.'',1,0,'C');

$this->Cell(20 ,5, $baris['id_peserta']

,1,0,'C');

$this->Cell(30 ,5, $baris['nama'],1,0,'C');

$this->Cell(20 ,5, $baris['jabatan']

,1,0,'C');

$this->Cell(65 ,5, $baris['nama_diklat']

,1,0,'C');

$this->Cell(30 ,5, $baris['nama_daerah']

,1,0,'C');

$this->Cell(40 ,5, $baris['tgl_mulai']

,1,0,'C');

$this->Cell(30 ,5, $baris['eviden']

,1,0,'C');

$this->Cell(30 ,5,

$baris['rencana_penjadwalan'] ,1,0,'C');

$this->Cell(30 ,5, $baris['status']

,1,0,'C');

Page 49: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

60

$this->Ln();

}

}

}

$pdf = new myPDF();

$pdf->AliasNbPages();

$pdf->AddPage('L','Legal',0);

$pdf->headerTable();

$pdf->viewTable();

$pdf->Output();

?>

Page 50: BAB II RANCANGAN APLIKASI 2.1. Rancangan Database ......12 BAB II RANCANGAN APLIKASI 2.1. Rancangan Database Berisi tentang langkah-langkah pembuatan database dan table yang dibutuhkan

61

2.4. Rancangan Backup Data Berisi tentang langkah-langkah pembuatan backup

data yang dibutuhkan (cukup di berikan contoh langkah-

langkah pembuatan backup data satu saja).

Apabila data tersimpan di database, maka database harus di

ekspor sehingga format berbentuk .sql, sebagai berikut:

Gambar 30. Ekspor Database

Gambar 31. Backup Database menjadi SQL