BAB II PERANCANGAN APLIKASI

Transkripsi

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 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 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 1

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 2

3 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 3.1 XAMPP Control Panel v Gambar 2.4 Tampilan Xampp setelah di aktifkan 3

4 7. Setelah itu, buka browser anda lalu ketikkan muncul tampilan berikut ini : Gambar 2.5 Tampilan localhost/phpmyadmin (XAMPP) 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 4

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 5

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 6

7 Table 2.3 Table Produk Field_name Type Length / Value Ket kd_produk Char 6 Primmary Key nm_produk Varchar 40 Type Char 5 Stock Int 3 Harga Double - Table 2.4 Table detail_produk Field_name Type Length / Value Ket kd_produk Char 6 Primmary Key Foto Char 10 Table 2.5 Table booking Field_name Type Length / Value Ket 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 Field_name Type Length / Value Ket kd_booking Char 12 Primmary Key kd_produk Char 6 Foreign Key Qty Int 3 Foreign Key 7

8 Table 2.7 Table Sementara Field_name Type Length / Value Ket kd_sementara Int 11 Auto_Increment kd_booking Char 2 Foreign Key kd_customer Char 10 Foreign Key kd_produk Char 6 Qty Int 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 8

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 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"> if(isset($_get['berhasil_simpan'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil ditambahkan. "; else if(isset($_get['berhasil_edit'])){ 9

10 echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil diperbaharui. "; else if(isset($_get['berhasil_hapus'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data produk berhasil dihapus. "; <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" datawidget="collapse" data-toggle="tooltip" title="collapse"><i class="fa faminus"></i></button>  <button type="button" class="btn btn-box-tool" datawidget="remove" data-toggle="tooltip" title="remove"><i class="fa fatimes"></i></button>   <div class="box-body table-responsive pad"> <p>berikut ini adalah data Produk / Rumah pada Perumahan Kota Serang Baru (KSB) :</p><hr> if($dataadmin['hak_akses']=="admin"){ echo "<a href='home.php?page=tambah_produk' class='btn btnsuccess'><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> if($dataadmin['hak_akses']=="admin"){ echo "<th width=''20%'>aksi</th>"; 10

11 </tr> </thead> <tbody align="center"> $no=1; $queryproduk = mysqli_query($koneksi, "SELECT * FROM produk ORDER BY kd_produk ASC"); while($dataproduk = mysqli_fetch_array($queryproduk)){ <tr> <td> echo $no </td> <td> echo $dataproduk['kd_produk'] </td> <td> echo $dataproduk['type'] </td> <td> echo $dataproduk['stok'] </td> <td> echo $dataproduk['harga'] </td> 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 faimage'></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> $no++; </tbody> </table>  f. Untuk menambah produk, maka buat juga file di dalam file Admin dengan nama produk_tambah include "produk_autonumber.php" <section class="content-header"> <h1> Tambah Produk / Rumah <small>hak Akses echo $dataadmin['hak_akses'] </small> </h1> <ol class="breadcrumb"> <li><a href="home.php"><i class="fa fa-dashboard"></i> 11

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>  <form action="produk_simpan.php" method="post" autocomplete="off" name="frm" id="frm" enctype="multipart/formdata"> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title"><i class="fa fa-plus"></i> Formulir Tambah Data</h3>  <div class="box-tools pull-right">  <button type="button" class="btn btn-box-tool" datawidget="collapse" data-toggle="tooltip" title="collapse"><i class="fa fa-minus"></i></button>  <button type="button" class="btn btn-box-tool" datawidget="remove" data-toggle="tooltip" title="remove"><i class="fa fa-times"></i></button>  <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-creditcard"></i></span> <input type="text" name="kd_produk" class="form-control" value=" echo $id_baruproduk " required readonly> <br> <label class="label-control">type Rumah</label> <div class="input-group"> <span class="input-group-addon"><i class="fa facheck"></i></span> <input type="text" name="type" class="form-control" placeholder="masukkan Type Rumah" required> <br> <label class="label-control">stok</label> <div class="input-group"> <span class="input-group-addon"><i class="fa faopencart"></i></span> <input type="text" name="stok" class="form-control" placeholder="masukkan Stok Rumah" required> 12

13 <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 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 farepeat"></i> Batal</button> </form> </section> e. Untuk menambah foto produk, maka buat juga file di dalam file Admin dengan nama produk_tambah_foto $kd_produk = $_GET['kd_produk']; <section class="content-header"> <h1> Tambah Foto Produk / Rumah <small>hak Akses Admin</small> </h1> <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> 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 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 class="box-body"> 13

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> $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> echo $no </td> <td><img src="../images/produk/ echo $dataproduk['foto'] " width="100%"></td> <td> 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 fatimes'></span> Hapus</a>" </td> </tr> $no++; </tbody> </table>  <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 class="box-body"> <label class="label-control">kode Produk</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-creditcard"></i></span> <input type="text" name="kd_produk" class="form-control" value=" echo $kd_produk " required readonly> <br> <label class="label-control">tambah Foto</label> <div class="input-group"> <span class="input-group-addon"><i class="fa faimage"></i></span> <input type="file" name="foto" class="form-control" id="preview_foto" required> 14

15 <img src="#" id="foto" width="200" alt="" /> <div class="box-footer"> <button type="submit" class="btn btn-success"><i class="fa fasave"></i> Simpan</button> </form> </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> f. Untuk mengedit produk seperti merubah deskripsi produk, dll maka bisa masukan listing program seperti dibawah ini $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 echo $dataadmin['hak_akses'] </small> </h1> 15

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>  <form action="produk_edit_auth.php" method="post" autocomplete="off" name="frm" id="frm" enctype="multipart/formdata"> <div class="box box-primary"> <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" datawidget="collapse" data-toggle="tooltip" title="collapse"><i class="fa fa-minus"></i></button>  <button type="button" class="btn btn-box-tool" datawidget="remove" data-toggle="tooltip" title="remove"><i class="fa fa-times"></i></button> 16

17  <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-creditcard"></i></span> <input type="text" name="kd_produk" class="form-control" value=" echo $dataproduk['kd_produk'] " required readonly> <br> <label class="label-control">type Rumah</label> <div class="input-group"> <span class="input-group-addon"><i class="fa facheck"></i></span> <input type="text" name="type" class="form-control" value=" echo $dataproduk['type'] " required> <br> <label class="label-control">stok</label> <div class="input-group"> <span class="input-group-addon"><i class="fa faopencart"></i></span> <input type="text" name="stok" class="form-control" value=" echo $dataproduk['stok'] " required> <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" value=" echo $dataproduk['harga'] " required> <div class="box-footer"> <button type="submit" class="btn btn-warning"><i class="fa fa- 17

18 save"></i> Perbaharui</button> <button type="reset" class="btn btn-danger"><i class="fa farepeat"></i> Batal</button> </form> </section> e. Untuk menyimpan produk yang sudah ditambahkan atau sudah di edit, maka masukin listing program dibawah ini 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']; 18

19 $sumber_foto = $_FILES['foto']['tmp_name']; $ukuran_max_foto = ; 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 >"; f. Untuk menyimpan foto yang telah kita tambahkan, masukan listing program dibawah ini include "../config/koneksi.php"; $kd_produk = $_POST['kd_produk']; //autonumber foto detail produk $sql=mysqli_query($koneksi, "SELECT MAX(foto) FROM detail_produk"); 19

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 = ; 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); //mengcopy 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>"; 20

21 else { //echo "<script>document.location='home.php?page=produk&gagal'< /script>"; 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 <section class="content-header"> <h1> Admin <small>hak Akses 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-user"></i> Admin</li> </ol> </section>  <section class="content"> <div class="row"> <div class="col-xs-12"> 21

22 if(isset($_get['berhasil_simpan'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data admin berhasil ditambahkan. "; else if(isset($_get['melebihi_ukuran_foto'])){ echo " <div class='alert alert-danger alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Maaf!</h4> Ukuran foto anda melebihi batas ukuran foto. Pastikan ukuran foto tidak lebih dari 1Mb "; else if(isset($_get['password_tidak_sama'])){ echo " <div class='alert alert-danger alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Maaf!</h4> Password tidak sama, silahkan ulangi kembali "; <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" datawidget="collapse" data-toggle="tooltip" title="collapse"><i class="fa fa-minus"></i></button>  <button type="button" class="btn btn-box-tool" datawidget="remove" data-toggle="tooltip" title="remove"><i class="fa fa-times"></i></button>   <div class="box-body table-responsive pad"> <p>berikut ini adalah data admin pada Perumahan Kota Serang Baru (KSB) :</p><hr> if($dataadmin['hak_akses']=="admin"){ echo "<a href='home.php?page=tambah_admin' class='btn btnsuccess'><span class='fa fa-plus'></span> Tambah Data</a><br><br>"; 22

23 <table id="example1" class="table table-bordered tablestriped"> <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"> $no=1; $queryadmin2 = mysqli_query($koneksi, "SELECT * FROM admin"); while($dataadmin2 = mysqli_fetch_array($queryadmin2)){ <tr> <td> echo $no </td> <td><img src="../images/admin/ echo $dataadmin2['foto_admin'] " alt="" class="img-circle" width="125px"></td> <td> echo $dataadmin2['kd_admin'] </td> <td> echo $dataadmin2['nm_admin'] </td> <td> echo $dataadmin2['username'] </td> <td> echo $dataadmin2['hak_akses'] </td> </tr> $no++; </tbody> </table>  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 <div class="row"> <div class="col-xs-12">  <div id="carousel-example-generic" class="carousel slide" dataride="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> <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="4" class=""></li> 23

24 </ol> <div class="carousel-inner"> <div class="item active"><img src="images/carousel1.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/carousel2.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/carousel3.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/carousel4.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/carousel5.jpg" alt="first slide" width="100%"> <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> <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 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 unit rumah dan komersial telah dan sedang dibangun beserta fasilitas dan infrastruktur pendukungnya. </h4> <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>  <br><br> 24

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 class="col-xs-6 col-md-3 text-center"> <i class="fa fa-home fa-5x"></i><br> <h2 style="margin-top:-2px"> Unit</h2> <h4 style="margin-top:-10px; color:#333">have Been Sold</h4> <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 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 id="produk">  <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" dataride="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> <li data-target="#carousel-example-generic2" data-slide-to="3" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"><img src="images/produk/prd001_01.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd001_02.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd001_03.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd001_04.jpg" 25

26 alt="first slide" width="100%"> <a class="left carousel-control" href="#carousel-examplegeneric2" data-slide="prev"> <span class="fa fa-angle-left"></span> </a> <a class="right carousel-control" href="#carousel-examplegeneric2" data-slide="next"> <span class="fa fa-angle-right"></span> </a> <div class="caption text-center"> <h2><strong>rumah Type 36</strong></h2> $queryproduk36 = mysqli_query($koneksi, "SELECT harga, stok FROM produk WHERE type='36'"); $dataproduk36 = mysqli_fetch_array($queryproduk36); <h4>harga Mulai 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> echo $dataproduk36['stok'] </strong></h2> <form action="customer_pilih_rumah.php" method="post" autocomplete="off"> 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> "; 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 class="col-xs-12 col-md-6"> <div class="thumbnail"> <div id="carousel-example-generic3" class="carousel slide" dataride="carousel"> <ol class="carousel-indicators"> 26

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> <li data-target="#carousel-example-generic3" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic3" data-slide-to="3" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"><img src="images/produk/prd002_01.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd002_02.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd002_03.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd002_04.jpg" alt="first slide" width="100%"> <a class="left carousel-control" href="#carousel-examplegeneric3" data-slide="prev"> <span class="fa fa-angle-left"></span> </a> <a class="right carousel-control" href="#carousel-examplegeneric3" data-slide="next"> <span class="fa fa-angle-right"></span> </a> <div class="caption text-center"> <h2><strong>rumah Type 45</strong></h2> $queryproduk45 = mysqli_query($koneksi, "SELECT harga, stok FROM produk WHERE type='45'"); $dataproduk45 = mysqli_fetch_array($queryproduk45); <h4>harga Mulai echo "Rp. ". number_format($dataproduk45['harga'],0,",",".")." "; </h4> <p>hunian impian kini akan menjadi milik anda. Di fasilitasi dengan fasilitas terbaik kami dengan type rumah 45 cocok menjadi hunian terbaik anda</p> <h4 style="margin-top:-3px">stok Rumah</h4> <h2 style="margin-top:-5px"><strong> echo $dataproduk45['stok'] </strong></h2> <form action="customer_pilih_rumah.php" method="post" autocomplete="off"> 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='prd002'> <div class='input-group-btn'> <button type='submit' class='btn btn-primary'>book Now</button> "; 27

28 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 class="row">  <div class="col-xs-12 col-md-6"> <div class="thumbnail"> <div id="carousel-example-generic4" class="carousel slide" dataride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic4" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic4" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic4" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic4" data-slide-to="3" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"><img src="images/produk/prd003_01.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd003_02.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd003_03.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd003_04.jpg" alt="first slide" width="100%"> <a class="left carousel-control" href="#carousel-examplegeneric4" data-slide="prev"> <span class="fa fa-angle-left"></span> </a> <a class="right carousel-control" href="#carousel-examplegeneric4" data-slide="next"> <span class="fa fa-angle-right"></span> </a> <div class="caption text-center"> <h2><strong>rumah Type 60</strong></h2> $queryproduk60 = mysqli_query($koneksi, "SELECT harga, stok FROM produk WHERE type='60'"); $dataproduk60 = mysqli_fetch_array($queryproduk60); <h4>harga Mulai echo "Rp. ". number_format($dataproduk60['harga'],0,",",".")." "; </h4> <p>hunian impian kini akan menjadi milik anda. Di fasilitasi 28

29 dengan fasilitas terbaik kami dengan type rumah 60 cocok menjadi hunian terbaik anda</p> <h4 style="margin-top:-3px">stok Rumah</h4> <h2 style="margin-top:-5px"><strong> echo $dataproduk60['stok'] </strong></h2> <form action="customer_pilih_rumah.php" method="post" autocomplete="off"> 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='prd003'> <div class='input-group-btn'> <button type='submit' class='btn btn-primary'>book Now</button> "; 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 class="col-xs-12 col-md-6"> <div class="thumbnail"> <div id="carousel-example-generic5" class="carousel slide" dataride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic5" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic5" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic5" data-slide-to="2" class=""></li> <li data-target="#carousel-example-generic5" data-slide-to="3" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"><img src="images/produk/prd004_01.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd004_02.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd004_03.jpg" alt="first slide" width="100%"> <div class="item"><img src="images/produk/prd004_04.jpg" alt="first slide" width="100%"> <a class="left carousel-control" href="#carousel-examplegeneric5" data-slide="prev"> 29

30 <span class="fa fa-angle-left"></span> </a> <a class="right carousel-control" href="#carousel-examplegeneric5" data-slide="next"> <span class="fa fa-angle-right"></span> </a> <div class="caption text-center"> <h2><strong>rumah Type 70</strong></h2> $queryproduk70 = mysqli_query($koneksi, "SELECT harga, stok FROM produk WHERE type='70'"); $dataproduk70 = mysqli_fetch_array($queryproduk70); <h4>harga Mulai echo "Rp. ". number_format($dataproduk70['harga'],0,",",".")." "; </h4> <p>hunian impian kini akan menjadi milik anda. Di fasilitasi dengan fasilitas terbaik kami dengan type rumah 70 cocok menjadi hunian terbaik anda</p> <h4 style="margin-top:-3px">stok Rumah</h4> <h2 style="margin-top:-5px"><strong> echo $dataproduk70['stok'] </strong></h2> <form action="customer_pilih_rumah.php" method="post" autocomplete="off"> 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='prd004'> <div class='input-group-btn'> <button type='submit' class='btn btn-primary'>book Now</button> "; else { echo " <a href='index.php?page=daftar&belum_daftar'><button type='button' class='btn btn-primary btn-lg'>book Now</button></a> "; </form>   </section> 30

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 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-book"></i> Booking</li> </ol> </section>  <section class="content"> <div class="row"> <div class="col-xs-12"> if(isset($_get['berhasil_konfirmasi'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> 31

32 Data booking berhasil Dikonfirmasi. "; <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 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"> $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> echo $no </td> <td> echo $databooking['kd_booking'] </td> <td> echo $databooking['nm_customer'] </td> <td> echo $databooking['alamat'] </td> <td> echo $databooking['no_hp'] </td> <td>rp. echo "". number_format($databooking['penghasilan'],0,",",".")." "; </td> <td> if($databooking['status_booking']=="belum Transaksi"){ echo "<label class='label label-danger'>belum Transaksi</label>"; else if($databooking['status_booking']=="menunggu Konfirmasi"){ 32

33 echo "<label class='label label-warning'>menunggu Konfirmasi</label>"; else { echo "<label class='label label-success'>sudah Dikonfirmasi</label>"; </td> <td> 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> $no++; </tbody> </table>  Gambar 2.14 Tampilan Booking pada Menu Admin 33

34 2.4 Rancangan Laporan a. Buat file dalam file Admin dengan nama Customer_laporan.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"; $query=mysqli_query($koneksi, "SELECT * FROM customer"); 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"); 34

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>  <section class="content"> <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 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-gear"></i> Backup Tabel</li> 35

36 </ol> </section> <br> if(isset($_get['berhasil_backup'])){ echo " <div class='alert alert-success alert-dismissible'> <button type='button' class='close' data-dismiss='alert' ariahidden='true'> </button> <h4><i class='icon fa fa-check'></i> Selamat!</h4> Data tabel yang anda pilih berhasil di Backup. "; <div class="box box-primary"> <div class="box-header"> <h3 class="box-title"><i class='fa fa-desktop'></i> Form Backup Tabel</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 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> <br> <button type="submit" class="btn btn-block btn-primary">backup Sekarang</button> </form>  36

37 <br><br> 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 37

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 38

39 39