BAB II PERANCANGAN APLIKASI...Buka folder XAMPP yang sudah didownload dengan cara klik dua kali pada file tersebut Gambar 2.1 Software Xampp yang sudah di download 2 3. Pilih bahasa

1

BAB II

PERANCANGAN APLIKASI

Sebelum belajar membuat program aplikasi, anda harus mempersiapkan dulu PHP dan MySQL-nya yaitu dengan cara menginstal paket XAMPP. Dengan begitu kebutuhan untuk belajar membangun aplikasi berbasis web dapat dilakukan,karena didalam satu paket XAMPP sudah tersedia dukungan PHP,MySQL,Apache dan juga phpmyadmin.

2.1. Rancangan Database

Sebelum kita merancang database, hal pertama yang perlu kita lakukan adalah penginstallan XAMPP sebagai salah satu penunjang agar program yang kita buat menjadi lebih maksimal. Berikut langkah – langkah untuk menginstall XAMPP ; 1. Software XAMPP dapat diperoleh secara gratis dari

www.ApacheFriends.org website tersebut anda bisa mendownload paket server XAMPP dengan versi yang sesuai system operasi yang anda pakai.

2. Buka folder XAMPP yang sudah didownload dengan cara klik dua kali pada file tersebut

Gambar 2.1 Software Xampp yang sudah di download

http://www.apachefriends.org/

http://www.apachefriends.org/

2

3. Pilih bahasa tampilannya,yaitu;English,klik tombol ok dan klik next untuk melanjutkannya.

Gambar 2.2 Penginstallan XAMPP

4. Jika sudah di install, xampp bisa dibuka dan digunakan.

Gambar 2.3 Xampp telah di install

3

Gambar 3.1 XAMPP Control Panel v3.3.1.0

5. Untuk membuat SIMBOOKRUDI (Sistem Informasi Booking Perumah Subsidi), kita membutukan 7 tabel, yaitu ; Tabel Customer

Tabel Admin Tabel Produk Tabel Detail Produk Tabel Booking

Tabel Detail Booking Tabel Sementara Semua tabel akan berelasi datanya,lewat kode kunci utama yang menjadi kunci tamu pada tabel yang membutuhkan.

6. Pastikan module APACHE dan MYSQL sudah anda jalankan (start), seperti pada gambar berikut ini :

Gambar 2.4 Tampilan Xampp setelah di aktifkan

4

Gambar 2.5 Tampilan localhost/phpmyadmin (XAMPP)

7. Setelah itu, buka browser anda lalu ketikkan http://localhost/phpmyadmin/sehingga muncul tampilan berikut ini :

8. Pilih menu Basis data, buat database dengan nama simbookrudi, kemudian Create

Gambar 2.6 Create database simbookrudi (XAMPP)

9. Setelah di Create, database yang kita buat akan muncul disebelah kiri, kemudian klik nama database yang tadi sudah kita buat.

10. Jika sudah, langkah selanjutnya yaitu membuat table. Table pertama yang

akan kita buat adalah table Customer

http://localhost/phpmyadmin/

5

Pada kolom nama, masukan nama Customer, kemudian masukan jumlah kolom 15 (atau bisa sesuai kebutuhan), kemudian klik kirim

Gambar 2.7 Create Table Customer

11. Setelah dibuat, maka akan muncul kolom sejumlah 15 sesuai dengan permintaan yang telah kita buat

Gambar 2.8 kolom table

6

12. Isi kolom dengan keterangan berikut ;

Table 2.1 Table Customer

Field_name Type Length / Value Ket kd_customer Char 10 Primary Key Nik Char 16

Nama Varchar 40

Jk Enum (‘L’,’P’)

no_hp Varchar 13

Alamat Text -

tempat_lahir Varchar 25

tgl_lahir Date Date

Pekerjaan Varchar Varchar

Penghasilan Double -

upload_ktp Char 18

upload_kk Char 17

upload_slip_gaji Char 19

kd_admin Char 6 Foreign Key

status_akun Enum (‘Belum aktif’,’aktif)

13. Jika sudah di isi, kemudian klik simpan

14. Table customer telah dibuat.

15. Buat table selanjutnya dengan cara yang sama seperti pembuatan table customer.

Table 2.2 Table Admin

Field_name Type Length / Value Ket

kd_admin Char 6 Primmary Key Nama Varchar 40

user_name Varchar 25

Password Varchar 50

hak_akses Enum ‘admin’, ‘marketing’, manager ‘marketing’

foto_admin Char 10

7

Table 2.3 Table Produk


kd_produk Char 6 Primmary Key nm_produk Varchar 40

Type Char 5

Stock Int 3

Harga Double -

Table 2.4 Table detail_produk


kd_produk Char 6 Primmary Key Foto Char 10

Table 2.5 Table booking


kd_booking Char 12 Primmary Key kd_customer Char 6 Foreign Key kd_produk Char 6 Foreign Key kd_admin Char 6 Foreign Key Qty Int 3

status_booking Enum ‘belum transaksi’, ‘belum dikonfirmasi’, ‘sudah dikonfirmasi’

bukti_transfer Char 16

Subtotal Double -

tgl_booking Date -

Table 2.6 Table detail_booking


kd_booking Char 12 Primmary Key kd_produk Char 6 Foreign Key Qty Int 3 Foreign Key

8

Table 2.7 Table Sementara


kd_sementara Int 11 Auto_Increment kd_booking Char 2 Foreign Key kd_customer Char 10 Foreign Key kd_produk Char 6

Qty Int 5

2.2 Rancangan Form Master

1. Rancangan Form Produk

Gambar 2.9 Tampilan Running Program Produk

Gambar diatas adalah gambar tampilan form produk pada website yang telah kami buat. Langkah – langkah untuk membuat tampilan produk seperti gambar diatas, yaitu ;

a. Buka App Sublime Text, kemudian pilih File, pilih New File

Gambar 2.10 Buat File Baru

9

b. Setelah buat file baru, rename file tersebut dengan nama Admin c. Perlu diketahui, yang mempunyai hak akses menambah, mengedit,

menyimpan produk adalah admin, maka file produk ini dibuat didalam file Admin

d. Klik kanan pada file Admin, kemudian pilih New File, beri nama Produk.php

Gambar 2.11 Membuat File dalam File Admin.php

e. Ketikan listing program berikut didalam file produk.php

<section class="content-header"> <h1>

Produk / Rumah <small>Hak Akses <?php echo $dataadmin['hak_akses'] ?></small>

</h1> <ol class="breadcrumb"> <li><a href="home.php"><i class="fa fa-dashboard"></i>

Dashboard</a></li> <li class="active"><i class="fa fa-home"></i> Produk / Rumah</li>

</ol> </section>

 <section class="content">

<div class="row"> <div class="col-xs-12"> <?php if(isset($_GET['berhasil_simpan'])){ echo "

<div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-

hidden='true'>×</button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil ditambahkan.

</div> ";

} else if(isset($_GET['berhasil_edit'])){

10

echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-

hidden='true'>×</button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil diperbaharui.

</div> ";

} else if(isset($_GET['berhasil_hapus'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-

hidden='true'>×</button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil dihapus.

</div> ";

} ?>

<div class="box box-primary">

<div class="box-header"> <h3 class="box-title"><i class='fa fa-desktop'></i> Lihat Data</h3>

 <div class="box-tools pull-right">

 <button type="button" class="btn btn-box-tool" data-

widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa- minus"></i></button>

 <button type="button" class="btn btn-box-tool" data-

widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa- times"></i></button>

</div> 

</div>  <div class="box-body table-responsive pad"> <p>Berikut ini adalah data Produk / Rumah pada Perumahan Kota

Serang Baru (KSB) :</p><hr> <?php

if($dataadmin['hak_akses']=="Admin"){ echo "<a href='home.php?page=tambah_produk' class='btn btn-

success'><span class='fa fa-plus'></span> Tambah Data</a>"; }

?> <br><br>

<table id="example1" class="table table-bordered table-striped">

<thead> <tr> <th>No</th> <th>Kode Produk</th> <th>Type</th> <th>Stok</th> <th>Harga</th> <?php

if($dataadmin['hak_akses']=="Admin"){ echo "<th width=''20%'>Aksi</th>";

11

f. Untuk menambah produk, maka buat juga file di dalam file Admin dengan nama produk_tambah

} ?>

</tr> </thead> <tbody align="center"> <?php $no=1; $queryproduk = mysqli_query($koneksi, "SELECT * FROM

produk ORDER BY kd_produk ASC"); while($dataproduk = mysqli_fetch_array($queryproduk)){

?> <tr> <td><?php echo $no ?></td> <td><?php echo $dataproduk['kd_produk'] ?></td> <td><?php echo $dataproduk['type'] ?></td> <td><?php echo $dataproduk['stok'] ?></td> <td><?php echo $dataproduk['harga'] ?></td> <?php

if($dataadmin['hak_akses']=="Admin"){ echo "

<td> <a

href='home.php?page=tambah_foto_produk&kd_produk=$dataproduk[k d_produk]' class='btn btn-sm btn-primary'><span class='fa fa- image'></span> Tambah Foto</a>

<a href='home.php?page=edit_produk&kd_produk=$dataproduk[kd_produ k]' class='btn btn-sm btn-warning'><span class='fa fa-edit'></span> Edit</a>

<a href='produk_hapus.php?kd_produk=$dataproduk[kd_produk]' class='btn btn-sm btn-danger' onClick=\"return confirm('Yakin akan menghapus data ini?')\"><span class='fa fa-times'></span> Hapus</a>

</td> ";

} ?>

</tr> <?php $no++;} ?>

</tbody> </table>

</div> </div> 

</div> </div>

<?php include "produk_autonumber.php" ?>


Tambah Produk / Rumah <small>Hak Akses <?php echo $dataadmin['hak_akses']

?></small> </h1> <ol class="breadcrumb">

<li><a href="home.php"><i class="fa fa-dashboard"></i>

12

Dashboard</a></li> <li><a href="home.php?page=produk"><i class="fa fa-home"></i>

Produk / Rumah</a></li> <li class="active"><i class="fa fa-plus"></i> Tambah Produk /

Rumah</li> </ol>

</section>

<section class="content"> <div class="row">

<div class="col-xs-12"> <div class="callout callout-info">

<h4>Infomasi!</h4> <p>Pastikan anda mengisi formulir dibawah ini dengan baik &

benar.</p> </div>

<form action="produk_simpan.php" method="post"

autocomplete="off" name="frm" id="frm" enctype="multipart/form- data">

<div class="box box-primary"> <div class="box-header"> <h3 class="box-title"><i class="fa fa-plus"></i> Formulir

Tambah Data</h3>



widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>


widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>

</div>  </div> <div class="box-body table-responsive pad">

<label class="label-control">Kode Produk</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-credit-

card"></i></span> <input type="text" name="kd_produk" class="form-control"

value="<?php echo $id_baruproduk ?>" required readonly> </div><br>

<label class="label-control">Type Rumah</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-

check"></i></span> <input type="text" name="type" class="form-control"

placeholder="Masukkan Type Rumah" required> </div><br>

<label class="label-control">Stok</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-

opencart"></i></span> <input type="text" name="stok" class="form-control"

placeholder="Masukkan Stok Rumah" required>

13

e. Untuk menambah foto produk, maka buat juga file di dalam file Admin dengan nama produk_tambah_foto

</div><br>

<label class="label-control">Harga</label> <div class="input-group"> <span class="input-group-addon">Rp. </span> <input type="number" name="harga" class="form-control"

placeholder="Masukkan Harga" required> </div>

</div> <div class="box-footer"> <button type="submit" class="btn btn-success"><i class="fa

fa-save"></i> Simpan</button> <button type="reset" class="btn btn-danger"><i class="fa fa-

repeat"></i> Batal</button> </div>

</div> </form>

</div> </div>

</section>

<?php $kd_produk = $_GET['kd_produk']; ?>


Tambah Foto Produk / Rumah <small>Hak Akses Admin</small>


Dashboard</a></li> <li><a href="home.php?page=produk"><i class="fa fa-home"></i>

Produk / Rumah</a></li> <li class="active"><i class="fa fa-plus"></i> Tambah Foto Produk /

Rumah</li> </ol>

</section>

<section class="content"> <div class="row">

<div class="col-xs-12"> <div class="callout callout-info">

<h4>Infomasi!</h4> <p>Pastikan anda mengisi formulir dibawah ini dengan baik &

benar.</p> </div>

<div class="row">

 <div class="col-xs-4"> <div class="box box-primary"> <div class="box-header">

<h3 class="box-title">Foto yang Berhasil Disimpan</h3> </div> <div class="box-body">

14

<table class="table table-bordered"> <thead> <tr>

<th width="20%">No</th> <th width="60%">Foto</th> <th width="20%">Aksi</th>

</tr> </thead> <tbody> <?php

$no=1; $queryproduk = mysqli_query($koneksi, "SELECT * FROM

detail_produk WHERE kd_produk='$kd_produk'"); if(mysqli_num_rows($queryproduk)==0){

echo " <tr><td colspan='3' align='center'>Data Kosong</td></tr>

"; } while($dataproduk = mysqli_fetch_array($queryproduk)){

?> <tr>

<td><?php echo $no ?></td> <td><img src="../images/produk/<?php echo

$dataproduk['foto'] ?>" width="100%"></td> <td><?php echo "<a

href='produk_hapus_foto.php?kd_produk=$dataproduk[kd_produk]&fot o=$dataproduk[foto]' class='btn btn-sm btn-danger' onClick=\"return confirm('Yakin akan menghapus data ini?')\"><span class='fa fa- times'></span> Hapus</a>" ?></td>

</tr> <?php $no++;} ?>

</tbody> </table>

</div> </div>

</div> 

<div class="col-lg-8"> <form action="produk_simpan_foto.php" method="post"

enctype="multipart/form-data"> <div class="box box-primary"> <div class="box-header">

<h3 class="box-title"><i class="fa fa-plus"></i> Formulir Tambah Foto Produk</h3>

</div> <div class="box-body">

<label class="label-control">Kode Produk</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-credit-

card"></i></span> <input type="text" name="kd_produk" class="form-control"

value="<?php echo $kd_produk ?>" required readonly> </div><br>

<label class="label-control">Tambah Foto</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-

image"></i></span> <input type="file" name="foto" class="form-control"

id="preview_foto" required>

15

f. Untuk mengedit produk seperti merubah deskripsi produk, dll maka bisa masukan listing program seperti dibawah ini

<img src="#" id="foto" width="200" alt="" /> </div>

</div> <div class="box-footer">

<button type="submit" class="btn btn-success"><i class="fa fa- save"></i> Simpan</button>

</div> </div>

</form> </div>

</div> </div>

</div> </section>

<script src="../bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript">

//preview_gambar function bacaGambar(input) {

if (input.files && input.files[0]) { var reader = new FileReader();

reader.onload = function (e) { $('#foto').attr('src', e.target.result);

}

reader.readAsDataURL(input.files[0]); }

} $("#preview_foto").change(function(){

bacaGambar(this); });

</script>

<?php

$kd_produk = $_GET['kd_produk'];

$queryproduk = mysqli_query($koneksi, "SELECT * FROM produk WHERE kd_produk='$kd_produk'");

$dataproduk = mysqli_fetch_array($queryproduk);

?>

<section class="content-header">

<h1>

Perbaharui Produk / Rumah

<small>Hak Akses <?php echo $dataadmin['hak_akses'] ?></small>

</h1>

16

<ol class="breadcrumb">

<li><a href="home.php"><i class="fa fa-dashboard"></i> Dashboard</a></li>

<li><a href="home.php?page=produk"><i class="fa fa-home"></i> Produk / Rumah</a></li>

<li class="active"><i class="fa fa-plus"></i> Perbaharui Produk / Rumah</li>

</ol>

</section>

<section class="content">

<div class="row">

<div class="col-xs-12">

<div class="callout callout-info">

<h4>Infomasi!</h4>

<p>Pastikan anda mengisi formulir dibawah ini dengan baik & benar.</p>

</div>

<form action="produk_edit_auth.php" method="post"

autocomplete="off" name="frm" id="frm" enctype="multipart/form- data">


<div class="box-header">

<h3 class="box-title"><i class="fa fa-plus"></i> Formulir Perbaharui Data</h3>



<div class="box-tools pull-right">



<button type="button" class="btn btn-box-tool" data- widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>



<button type="button" class="btn btn-box-tool" data- widget="remove" data-toggle="tooltip" title="Remove"><i class="fa

fa-times"></i></button>

17


</div>

<div class="box-body table-responsive pad">

<label class="label-control">Kode Produk</label>

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-credit- card"></i></span>

<input type="text" name="kd_produk" class="form-control" value="<?php echo $dataproduk['kd_produk'] ?>" required readonly>

</div><br>

<label class="label-control">Type Rumah</label>


<span class="input-group-addon"><i class="fa fa- check"></i></span>

<input type="text" name="type" class="form-control" value="<?php echo $dataproduk['type'] ?>" required>

</div><br>

<label class="label-control">Stok</label>


<span class="input-group-addon"><i class="fa fa- opencart"></i></span>

<input type="text" name="stok" class="form-control" value="<?php echo $dataproduk['stok'] ?>" required>

</div><br>

<label class="label-control">Harga</label>


<span class="input-group-addon">Rp. </span>

<input type="number" name="harga" class="form-control" value="<?php echo $dataproduk['harga'] ?>" required>

</div>

</div>

<div class="box-footer">

<button type="submit" class="btn btn-warning"><i class="fa fa-

18

e. Untuk menyimpan produk yang sudah ditambahkan atau sudah di

edit, maka masukin listing program dibawah ini

save"></i> Perbaharui</button>

<button type="reset" class="btn btn-danger"><i class="fa fa- repeat"></i> Batal</button>

</div>

</div>

</form>

</div>

</div>

</section>

<?php

include "../config/koneksi.php";

$kd_produk = $_POST['kd_produk'];

//autonumber foto detail produk

$sql=mysqli_query($koneksi, "SELECT MAX(foto) FROM detail_produk");

$row=mysqli_fetch_row($sql);

if ($row){

$angkaawal=substr($row[0],7);

$angkaint=(int)$angkaawal;

$angkabaru=$angkaint + 1;

if(substr($row[0],0,6) == $kd_produk){

$id_barufotoproduk=$kd_produk."_".str_pad($angkabaru,2,"0", STR_PAD_LEFT);

} else {

$id_barufotoproduk=$kd_produk."_01";

}

}

$foto = $_FILES['foto']['name'];

$ukuran_foto = $_FILES['foto']['size'];

19

f. Untuk menyimpan foto yang telah kita tambahkan, masukan listing program dibawah ini

$sumber_foto = $_FILES['foto']['tmp_name'];

$ukuran_max_foto = 1000000;

if($ukuran_foto > $ukuran_max_foto){ //jika melebihi ukuran

maksimal foto (>1Mb)

echo "<script>document.location='home.php?page=produk&melebihi_ukur an_foto'</script>";

} else {

copy($sumber_foto,"../images/produk/".$foto); //meng-copy foto dari sumber foto ke folder img yang ada di project

rename("../images/produk/".$foto, "../images/produk/".$id_barufotoproduk.".jpg"); //mengganti nama foto yang sudah di copy di folder project

$simpan = mysqli_query($koneksi, "INSERT INTO detail_produk

VALUES('$kd_produk','$id_barufotoproduk.jpg')");

if($simpan){

//echo "<script>document.location='home.php?page=produk&berhasil_simpa

n'</script>";

} else {

//echo "<script>document.location='home.php?page=produk&gagal'</script >";

}

}

?>

<?php

include "../config/koneksi.php";

$kd_produk = $_POST['kd_produk'];

//autonumber foto detail produk

$sql=mysqli_query($koneksi, "SELECT MAX(foto) FROM

detail_produk");

20

$row=mysqli_fetch_row($sql);

if ($row){

$angkaawal=substr($row[0],7);

$angkaint=(int)$angkaawal;

$angkabaru=$angkaint + 1;

if(substr($row[0],0,6) == $kd_produk){

$id_barufotoproduk=$kd_produk."_".str_pad($angkabaru,2,"0", STR_PAD_LEFT);

} else {

$id_barufotoproduk=$kd_produk."_01";

}

}

$foto = $_FILES['foto']['name'];

$ukuran_foto = $_FILES['foto']['size'];

$sumber_foto = $_FILES['foto']['tmp_name'];

$ukuran_max_foto = 1000000;

if($ukuran_foto > $ukuran_max_foto){ //jika melebihi ukuran

maksimal foto (>1Mb)

echo "<script>document.location='home.php?page=produk&melebi

hi_ukuran_foto'</script>";

} else {

copy($sumber_foto,"../images/produk/".$foto); //meng-

copy foto dari sumber foto ke folder img yang ada di project

rename("../images/produk/".$foto, "../images/produk/".$id_barufotoproduk.".jpg"); //mengganti nama foto yang sudah di copy di folder project

$simpan = mysqli_query($koneksi, "INSERT INTO

detail_produk

VALUES('$kd_produk','$id_barufotoproduk.jpg')");

if($simpan){

//echo "<script>document.location='home.php?page=produk&berhasi l_simpan'</script>";

21

2. Membuat Form Master Admin

Gambar 2.12 Tampilan Running Dasboard Admin

a. Untuk membuat tampilan seperti gambar diatas, maka kita perlu memasukan listing program dalam file Admin.php yang sudah kita buat tadi

} else {

//echo "<script>document.location='home.php?page=produk&gagal'< /script>";

}

}

?>

<section class="content-header"> <h1> Admin <small>Hak Akses <?php echo $dataadmin['hak_akses'] ?></small>


Dashboard</a></li> <li class="active"><i class="fa fa-user"></i> Admin</li>

</ol> </section>


<div class="row"> <div class="col-xs-12">

22

<?php if(isset($_GET['berhasil_simpan'])){ echo " <div class='alert alert-success alert-dismissible'>

<button type='button' class='close' data-dismiss='alert' aria- hidden='true'>×</button>

<h4><i class='icon fa fa-check'></i> Selamat!</h4> Data admin berhasil ditambahkan.

</div> ";

} else if(isset($_GET['melebihi_ukuran_foto'])){ echo " <div class='alert alert-danger alert-dismissible'>


<h4><i class='icon fa fa-check'></i> Maaf!</h4> Ukuran foto anda melebihi batas ukuran foto. Pastikan ukuran

foto tidak lebih dari 1Mb </div> ";

} else if(isset($_GET['password_tidak_sama'])){ echo " <div class='alert alert-danger alert-dismissible'>


<h4><i class='icon fa fa-check'></i> Maaf!</h4> Password tidak sama, silahkan ulangi kembali

</div> ";

} ?>


<div class="box-header"> <h3 class="box-title"><i class='fa fa-desktop'></i> Lihat

Data</h3>



widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>


widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>


</div>  <div class="box-body table-responsive pad"> <p>Berikut ini adalah data admin pada Perumahan Kota Serang

Baru (KSB) :</p><hr> <?php

if($dataadmin['hak_akses']=="Admin"){ echo "<a href='home.php?page=tambah_admin' class='btn btn-

success'><span class='fa fa-plus'></span> Tambah Data</a><br><br>";

}

23

3. Membuat Form Master Customer a. Untuk membuat form master customer, maka kita harus membuat

file baru dengan nama Customer, lalu masukan listing program berikut

?> <table id="example1" class="table table-bordered table-

striped"> <thead> <tr> <th>No</th> <th>Foto Admin</th> <th>Kode admin</th> <th>Nama Admin</th> <th>Username</th> <th>Akses</th>

</tr> </thead> <tbody align="center"> <?php

$no=1; $queryadmin2 = mysqli_query($koneksi, "SELECT * FROM

admin"); while($dataadmin2 = mysqli_fetch_array($queryadmin2)){

?> <tr>

<td><?php echo $no ?></td> <td><img src="../images/admin/<?php echo

$dataadmin2['foto_admin'] ?>" alt="" class="img-circle" width="125px"></td>

<td><?php echo $dataadmin2['kd_admin'] ?></td> <td><?php echo $dataadmin2['nm_admin'] ?></td> <td><?php echo $dataadmin2['username'] ?></td> <td><?php echo $dataadmin2['hak_akses'] ?></td>

</tr> <?php $no++;} ?>

</tbody> </table>

</div> </div> 

</div> </div>

<div class="row"> <div class="col-xs-12"> 

<div id="carousel-example-generic" class="carousel slide" data- ride="carousel">

<ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0"

class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"

class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2"



class=""></li>

24

</ol> <div class="carousel-inner"> <div class="item active"><img src="images/carousel1.jpg"

alt="First slide" width="100%"></div> <div class="item"><img src="images/carousel2.jpg" alt="First slide"

width="100%"></div> <div class="item"><img src="images/carousel3.jpg" alt="First slide"



width="100%"></div> </div> <a class="left carousel-control" href="#carousel-example-generic"

data-slide="prev"> <span class="fa fa-angle-left"></span>

</a> <a class="right carousel-control" href="#carousel-example-generic"

data-slide="next"> <span class="fa fa-angle-right"></span>

</a> </div>

</div> </div>

<section class="content" id="fasilitas">

<div class="row" style="background-color:#ecf0f5"> <div class="container">

<h2 align="center">Welcome to Kota Serang Baru (KSB)</h2> <hr width="15%" style="color:#000">

 <div class="row"> <div class="col-xs-6">

<h4 align="justify"> Kota Serang Baru, pengembangan Kota Baru Terpadu seluas 2.600

Hektar dari Jl. Raya Cibarusah Cikarang. Kawasan terintegrasi yang merangkum hunian perumahan, komersil dan fasilitas yang lengkap dan modern.<br><br>

Semenjak diluncurkan, Kota Serang Baru telah mengalami pertumbuhan yang pesat, lebih dari 15.000 unit rumah dan komersial telah dan sedang dibangun beserta fasilitas dan infrastruktur pendukungnya.

</h4> </div> <div class="col-xs-6">

<h4 align="justify"> Kota Serang Baru digagas dengan konsep TOD (Transit Oriented

Development). Untuk mendukung mobilitas penghuni, Kota Serang Baru telah didukung dan dilengkapi dengan KRL Commuterline, dan sarana stasiun yang modern dan nyaman.<br><br>

Berkat penerapan konsep EcoCulture, Kota Serang Baru menjadi sebuah kota lestari yang sempurna. Jadilah bagian dari sebuah kota yang mengutamakan partisipasi masyarakat untuk keberlanjutan generasi berikutnya.

</h4> </div>

</div> 

<br><br>

25

 <div class="row"> <div class="col-xs-6 col-md-3 text-center">

<i class="fa fa-map fa-5x"></i><br> <h2 style="margin-top:-2px">2.600 Ha</h2> <h4 style="margin-top:-10px; color:#333">Development

Area</h4> </div> <div class="col-xs-6 col-md-3 text-center">

<i class="fa fa-home fa-5x"></i><br> <h2 style="margin-top:-2px">15.000 Unit</h2> <h4 style="margin-top:-10px; color:#333">Have Been Sold</h4>

</div> <div class="col-xs-6 col-md-3 text-center">

<i class="fa fa-road fa-5x"></i><br> <h2 style="margin-top:-2px">Integrated</h2> <h4 style="margin-top:-10px; color:#333">Facilities &

Infrastructure</h4> </div> <div class="col-xs-6 col-md-3 text-center">

<i class="fa fa-train fa-5x"></i><br> <h2 style="margin-top:-2px">Transit</h2> <h4 style="margin-top:-10px; color:#333">Oriented Development

(TOD)</h4> </div>

</div> 

<div id="produk"></div> 

<br><br>

<h2 align="center">Our Products</h2> <hr width="15%" style="color:#000">

<div class="row">  <div class="col-xs-12 col-md-6">

<div class="thumbnail"> <div id="carousel-example-generic2" class="carousel slide" data-

ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic2" data-slide-to="0"

class="active"></li> <li data-target="#carousel-example-generic2" data-slide-to="1"

class=""></li> <li data-target="#carousel-example-generic2" data-slide-to="2"


class=""></li> </ol> <div class="carousel-inner"> <div class="item active"><img

src="images/produk/PRD001_01.jpg" alt="First slide" width="100%"></div>

<div class="item"><img src="images/produk/PRD001_02.jpg" alt="First slide" width="100%"></div>


<div class="item"><img src="images/produk/PRD001_04.jpg"

26

alt="First slide" width="100%"></div> </div> <a class="left carousel-control" href="#carousel-example-

generic2" data-slide="prev"> <span class="fa fa-angle-left"></span>

</a> <a class="right carousel-control" href="#carousel-example-

generic2" data-slide="next"> <span class="fa fa-angle-right"></span>

</a> </div>

<div class="caption text-center">

<h2><strong>Rumah Type 36</strong></h2> <?php $queryproduk36 = mysqli_query($koneksi, "SELECT harga, stok

FROM produk WHERE type='36'"); $dataproduk36 = mysqli_fetch_array($queryproduk36);

?> <h4>Harga Mulai <?php echo "Rp. " .

number_format($dataproduk36['harga'],0,",",".") ." "; ?></h4> <p>Hunian impian kini akan menjadi milik anda. Di fasilitasi

dengan fasilitas terbaik kami dengan type rumah 36 cocok menjadi hunian terbaik anda</p>

<h4 style="margin-top:-3px">Stok Rumah</h4> <h2 style="margin-top:-5px"><strong><?php echo

$dataproduk36['stok'] ?></strong></h2> <form action="customer_pilih_rumah.php" method="post"

autocomplete="off"> <?php

if(!empty($kd_customer)){ echo "

<div class='input-group input-group-lg'> <input type='text' name='qty' class='form-control'

placeholder='Masukkan banyaknya rumah yg akan dibooking' required> <input type='hidden' name='kd_produk' value='PRD001'> <div class='input-group-btn'>

<button type='submit' class='btn btn-primary'>Book Now</button>

</div> </div>

"; } else { echo "

<a href='index.php?page=daftar&belum_daftar'><button type='button' class='btn btn-primary btn-lg'>Book Now</button></a>

"; }

?> </form>

</div> </div>

</div> 

 <div class="col-xs-12 col-md-6">


ride="carousel"> <ol class="carousel-indicators">

27

<li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic3" data-slide-to="1" class=""></li>



</ol> <div class="carousel-inner"> <div class="item active"><img





</div> <a class="left carousel-control" href="#carousel-example-




</a> </div>














</div> </div>

";

28

} else { echo "


"; }

?> </form>

</div> </div>

</div>  </div> 

<div class="row">  <div class="col-xs-12 col-md-6">















</a> </div>






29









</div> </div>

"; } else { echo "


"; }

?> </form>

</div> </div>

</div> 

 <div class="col-xs-12 col-md-6">












generic5" data-slide="prev">

30

<span class="fa fa-angle-left"></span> </a> <a class="right carousel-control" href="#carousel-example-


</a> </div>









autocomplete="off"> <?php if(!empty($kd_customer)){ echo "




</div> </div>

"; } else {

echo " <a href='index.php?page=daftar&belum_daftar'><button

type='button' class='btn btn-primary btn-lg'>Book Now</button></a> ";

} ?>

</form> </div>

</div> </div> 

</div> 

</div> </div>

</section>

31

Gambar 2.13 Tampilan Running Daasboard Customer

2.3 Rancangan Form Transaksi

a. Buat File di dalam File Admin sama seperti yang sudah dijelaskan

sebelumnya dengan nama booking, lalu masukan listing program seperti dibawah ini

<section class="content-header"> <h1> Booking <small>Hak Akses <?php echo $dataadmin['hak_akses'] ?></small>


Dashboard</a></li> <li class="active"><i class="fa fa-book"></i> Booking</li>

</ol> </section>


<div class="row"> <div class="col-xs-12"> <?php

if(isset($_GET['berhasil_konfirmasi'])){ echo "

<div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-

hidden='true'>×</button> <h4><i class='icon fa fa-check'></i> Selamat!</h4>

32

Data booking berhasil Dikonfirmasi. </div> ";

} ?>

<div class="box box-primary"> <div class="box-header">

<h3 class="box-title"><i class='fa fa-desktop'></i> Lihat Data</h3>


 <button type="button" class="btn btn-box-tool" data-widget="collapse"

data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>  <button type="button" class="btn btn-box-tool" data-widget="remove"

data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div> 

</div>  <div class="box-body table-responsive pad"> <p>Berikut ini adalah data booking / Rumah pada Perumahan Kota Serang

Baru (KSB) :</p><hr>

<table id="example1" class="table table-bordered table-striped"> <thead> <tr>

<th>No</th> <th>Kode Booking</th> <th>Nama Customer</th> <th>Alamat</th> <th>No Handphone</th> <th>Penghasilan</th> <th>Status</th> <th width="10%">Aksi</th>

</tr> </thead> <tbody align="center">

<?php $no=1; $querybooking = mysqli_query($koneksi, "SELECT * FROM booking,

customer WHERE booking.kd_customer = customer.kd_customer AND customer.status_akun='Aktif' ORDER BY booking.kd_booking ASC");

while($databooking = mysqli_fetch_array($querybooking)){ ?> <tr> <td><?php echo $no ?></td> <td><?php echo $databooking['kd_booking'] ?></td> <td><?php echo $databooking['nm_customer'] ?></td> <td><?php echo $databooking['alamat'] ?></td> <td><?php echo $databooking['no_hp'] ?></td> <td>Rp. <?php echo "" .

number_format($databooking['penghasilan'],0,",",".") ." "; ?></td> <td>

<?php if($databooking['status_booking']=="Belum Transaksi"){ echo "<label class='label label-danger'>Belum Transaksi</label>";

} else if($databooking['status_booking']=="Menunggu Konfirmasi"){

33

Gambar 2.14 Tampilan Booking pada Menu Admin

echo "<label class='label label-warning'>Menunggu Konfirmasi</label>";

} else { echo "<label class='label label-success'>Sudah Dikonfirmasi</label>";

} ?>

</td> <td> <?php echo "<a

href='home.php?page=detail_booking&kd_booking=$databooking[kd_booking]' class='btn btn-sm btn-primary'><span class='fa fa-info-circle'></span> Detail</a>" ?>

</td> </tr> <?php $no++;} ?>

</tbody> </table>

</div> </div> 

</div> </div>

34

2.4 Rancangan Laporan a. Buat file dalam file Admin dengan nama Customer_laporan.php

<?php require "../plugins/fpdf/fpdf.php";

class PDF extends FPDF{ function header(){

$this->SetTitle('Laporan Data Peserta '); $this->Image('../images/squarebanner2.png',40,4,35); $this->SetFont('Arial','B',14); $this->Cell(275,10,'Laporan Customer',0,0,'C'); $this->Ln(7); $this->SetFont('Arial','B',14); $this->Cell(275,10,'Perumahan Kota Serang Baru

(KSB)',0,0,'C');

}

$this->Ln(7); $this->SetFont('Arial','B',14); $this->Cell(275,10,'Tahun '.date('Y'),0,0,'C'); $this->Ln(20);

function body(){ $this->SetFont('Arial','B',12);

$this->Cell(10,10,'No','1','','C'); $this->Cell(35, 10,'Kode Customer','1','','C'); $this->Cell(50,10,'Nama Siswa','1','','C'); $this->Cell(65,10,'Tempat Tanggal Lahir','1','','C'); $this->Cell(32,10,'Jenis Kelamin','1','','C'); $this->Cell(45,10,'Pekerjaan','1','','C'); $this->Cell(38,10,'Penghasilan','1','','C'); $this->Ln();

$this->SetFont('Arial','',12); $no=1;

include "../config/koneksi.php"; include "../config/formatdateindo.php";

customer");

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

while($data=mysqli_fetch_array($query)){ $this->Cell(10,10,$no,'1','','C'); $this->Cell(35,10,$data['kd_customer'],'1','','C'); $this->Cell(50,10,$data['nm_customer'],'1','','C'); $this->Cell(65,10,$data['tempat_lahir'] . ", ".

tgl_indo($data['tgl_lahir']),'1','','C'); $this->Cell(32,10,$data['jk'],'1','','C'); $this->Cell(45,10,$data['pekerjaan'],'1','','C'); $this->Cell(38,10,"Rp. " .

number_format($data['penghasilan'],0,",",".") ." ",'1','1','C'); $no++;}

} }

$pdf = new PDF(); $pdf->AliasNbPages(); $pdf->AddPage('L','A4',0); $pdf->body(); //$pdf->ttd(); $pdf->Output("Laporan Data Peserta Didik " . "Paud Tahun " . date('Y') .

".pdf","I");

35

Gambar 2.15 Tampilan Laporan Customer

2.5 Rancangan Backup Data a. Buat file dalam file admin dengan nama backup.php

Berikut ini listing program nya :

?>

<br><br><br>


<div class="row"> <div class="col-xs-6 col-xs-offset-3"> <div class="row">

<section class="content-header"> <h1> Backup Tabel <small>Hak Akses <?php echo $dataadmin['hak_akses'] ?></small>


Dashboard</a></li> <li class="active"><i class="fa fa-gear"></i> Backup Tabel</li>

36

</ol> </section>

</div>

<br>

<?php if(isset($_GET['berhasil_backup'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' aria-

hidden='true'>×</button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data tabel yang anda pilih berhasil di Backup.

</div> ";

} ?>


<div class="box-header"> <h3 class="box-title"><i class='fa fa-desktop'></i> Form Backup Tabel</h3>


 <button type="button" class="btn btn-box-tool" data-widget="collapse"

data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>  <button type="button" class="btn btn-box-tool" data-widget="remove"

data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div> 

</div>  <div class="box-body table-responsive pad"> <p>Silahkan pilih tabel yang akan anda backup</p><hr>

<form action="backup_auth.php" method="post">

<label class="label-control">Nama Tabel</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-table"></i></span> <select class="form-control" name="nm_table" required>

<option value="">-== Pilih Disini ==-</option> <option value="booking">Booking</option> <option value="customer">Customer</option> <option value="detail_booking">Detail Booking</option> <option value="detail_produk">Detail Produk</option> <option value="produk">Produk</option>

</select> </div><br>

<button type="submit" class="btn btn-block btn-primary">Backup

Sekarang</button> </form>

</div> </div> 

</div>

37

Gambar 2.16 Tampilan Backup Data

Setelah mengetik listing program kemudian running tampilan seperti diatas, lalu langkah selanjutnya pilih nama tabel yang akan di backup data nya pada halaman admin tersebut. Setelah dipilih lalu klik button backup sekarang, lalu akan muncul tampilan berikut ini

Gambar 2.17 Tampilan Backup Data

</div>

<br><br>

38

selamat data tabel yang dipilih berhasil di backup, kemudian cek apakah data

tersebut sudah dibackup apa tidak , kita bisa cek folder xampp -> htdocs ->

simbookrudi -> db

Gambar 2.18 Tampilan folder Backup Data

39

BAB II PERANCANGAN APLIKASI...Buka folder XAMPP yang sudah didownload dengan cara klik dua kali pada file tersebut Gambar 2.1 Software Xampp yang sudah di download 2 3. Pilih bahasa

Documents