Perancangan Aplikasi Jasa Foto Siang Malam Berbasis Internet Commerce

(1)

LISTING PROGRAM

1. Beranda ( index.php)

<!DOCTYPE html> <html lang="en"> <head>

</head>

<a class="navbar-brand" href="#">Siang Malam</a> </div>

<div class="collapse navbar-collapse" id="lauraMenu"> <ul class="nav navbar-nav navbar-right navbar-border"> <li class="active"><a href="#main-header">Beranda</a></li> <li><a href="#about">Tentang Kami</a></li>

(2)

</ul> </div> </div> </nav> </header>

<h2>Hallo welcome to <span>Siang Malam Studio</span></h2> <p>A Creative Photographer <br></p>

</div>

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

2. Tentang Kami (index.php)

<span class="deco">Siang</span><span class="deco">Malam</span> </h2>

</div>

<p><br>

Siang Malam adalah kelompok bisnis penyedia jasa dalam bidang fotografi, yang mengusung tema dan konssep yang unik serta tepat bagi anda untuk mengabadikan kenangan terinfah bersama pasangan serta moment bahagia keceriaan keluarga yang sangat ternilai. Siang Malam Foto telah berdiri sekitar 14 tahun yang lalu dengan tim photograpy yang memiliki passion yang sangat tinggi serta mengusung misinya dalam mengabadikan momen terbaik dari customernya dengan konsep yang unik serta menarik. Tak lengkap rasanya bila kenangan indah dengan pasangan serta momen keceriaan bersama keluarga sampai terlewatkan dan hilang begitu saja jika tak diabadikan. Sebab keluarga merupakan tempat dimana kita memiliki kenangan dari lahir hingga dewasa dan berkumpul besama orang-orang yang kita sayangi.

Siang Malam melayani untuk foto Wedding, Prawedding, Wisuda, Fotokelas, dll. </p>

<p>"KAMI SANGAT MENGUTAMAKAN KEPUASAN DALAM PELAYANAN TERHADAP KLIEN KAMI" </p>

(3)

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

3. Album Foto (index.php)

<h2 class="title text-center"><span class="deco">Album Foto</span></h2>

</div>

</div>

</div>

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

4. Paket Harga (index.php)

(4)

<h3 class="head-title black"><span class="deco">Tabel Paket Harga</span><br>

</h3> <p></p> </div><br> <br>

<ul>

<li class="heading-one"> <h2>Prawedding Photo</h2> <span>Rp 800.000</span> </li>

<li>1 Fotografer</li> <li>1 Asisten</li>

<li>2 Jam Sesi Foto (indoor/outdoor)</li> <li>2 Print Canvas + Frame Vintage</li> <li>10 Print 4R + Frame</li>

</div>

<ul>

<li class="heading-two"> <h2>Specta Wedding</h2> <span>Rp 1.800.000</span> </li>

<li>1 Fotografer</li> <li>1 Videografer</li> <li>1 Asisten</li>

<li>1 Hari Sesi Foto (akad/resepsi)</li> <li>2 Print Seal Canvas + Frame</li> <li>Album Foto</li>

</div>

<ul>

<li class="heading-three"> <h2>Royal Wedding</h2> <span>Rp 2.000.000</span> </li>

<li>2 Fotografer</li> <li>1 Videografer</li> <li>1 Asisten</li>

(5)

</div>

<li class="heading-six"> <h2>Maternity</h2>

<li>Max : 2 Orang</li>

<li>4 Foto Free Design </li> <li>3 Background</li>

</ul> </div>

<li class="heading-five"> <h2>Pasphoto</h2>

<li>1 Foto Print</li> <li>+Rp 10.000 (CD)</li>

</div>

<li class="heading-six"> <h2>Foto Kelas</h2> <span>Rp 300.000</span> </li>

<li>Max : 30 Orang</li>

<li>+Rp 25.000/Orang (20x40 Panorama)</li> <li>6 File + 6 Print 15 inch</li>

</ul> </div>

<li class="heading-four"> <h2>Wisuda</h2>

<li>Max : 3 Orang</li> <li>1 Kostum / 1 Layar</li> <li>1 Print 15 inch</li> <li>+Rp 100.000 (Frame)</li>

(6)

</div>

<li class="heading-six"> <h2>Foto Family</h2> <span>Rp 350.000</span> </li>

<li>Free ( Frame,Disk,Print)</li> <li>1 Background</li>

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

</div> </div>

</section>

5. Pembayaran (index.php)

<center><h3 class="head-title black"><span class="deco">Formulir Pembayaran</span></h3></center>

<div class="col-md-4 col-md-offset-4"> <label>Email</label>

<div class="col-md-4 col-md-offset-4"> <label>Alamat</label>

<div class="col-md-4 col-md-offset-4"> <label>No Telepon</label>

<div class="col-md-4 col-md-offset-4"> <label>Nama Rekening</label>

(7)

<option value="Mandiri">Mandiri</option> <option value="BNI">BNI</option>

<option value="Bank Jabar">Bank Jabar</option> <option value="Danamon">Danamon</option>

<option value="Permata">Permata</option> </select>

</div>

<td><label for="gambar">Gambar</label></td>

</tr> <tr>

<td><label for ="deskripsi">Deskripsi</label></td>

</tr> </div>

</div>

$(document). ready(function () { $('#lookup').dataTable(); });

function bacaGambar (input){

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

$('#gambar_preview').attr('src',e.target.result); }

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

}

$("#preview_gambar").change(function(){ bacaGambar(this);

});

(8)

image.src = "images/no-image.png"; return true;

}

$(document).ready(function(){

$('[data-toggle="tooltip"]').tooltip();}); </script>

} </form>

6. Hubungi Kami (index.php)

<h2 class="head-title black"><span class="deco">Hubungi Kami</span></h2>

</div>

<div id="sendmessage">Your message has been sent. Thank you!</div>

</div>

<div class="col-md-4 col-sm-6"> <h3 class="cont-title">Visit Us</h3> <div class="location-info">

<p class="white"><span aria-hidden="true" class="fa fa-map-marker"></span>Jl Jenderal Sudirman, No. 123 ( Simpang 4) Badak Bejuang, Tebing Tinggi</p>

<p class="white"><span aria-hidden="true" class="fa fa-phone"></span>Phone: 0621-24-824 / 0812-6202-4077</p>

<p class="white"><span aria-hidden="true" class="fa fa-envelope"></span>Email: <a href="" class="link-dec">@Siangmalamstudio123.com</a></p>

</div> </div>

(9)

<div class="row"> <div class="col-md-6"> <div class="footer"> <div class="credits"> <!--

All the links in the footer should remain intact.

You can delete the links only if you purchased the pro version.

Licensing information: https://bootstrapmade.com/license/

Purchase the pro version with

working PHP/AJAX contact form:

https://bootstrapmade.com/buy/?theme=Laura -->

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

<a

href="https://www.facebook.com/Siangmalamstudio123/?fref=ts"> <i class="fa fa-facebook"></i> : Siang Malam Studio

</a> </li> <li>

<a href="https://www.instagram.com/siangmalamstudio/"> <i class="fa fa-instagram"></i> :

SiangMalamStudio </a>

</li> </ul> </div> </div>

</div>

</footer>

(10)

</html>

7. Galeri

<?php

include("koneksi.php"); ?>

<!doctype <html> <head>

<title>Galery Fotokelas</title>

href="assets/css/fancybox/jquery.fancybox.css">

<body>

<a class="navbar-brand" href="index.html">Siang Malam</a> </div>

<li class="current"><a href="index.php">Beranda</a></li> </ul>

</div> </div>

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

<div class="container"> <?php

$per_hal = 12;

$jumlah_record = mysql_query("SELECT COUNT(*) FROM `tabel_fotokelas`");

$jum = mysql_result($jumlah_record, 0); $halaman = ceil($jum/$per_hal);

$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;

(11)

$query = mysql_query("SELECT * FROM `tabel_fotokelas` LIMIT $start, $per_hal");

if ($query === FALSE) { die(mysql_error()); }

$no = 1;

while ($de=mysql_fetch_array($query)) { $id = $de['id'];

$gambar = $de['gambar']; echo "

<div class=\"col-md-3\"> <div

class=\"thumbnail\">

<img

style=\"height:250px\" class=\"img-responsive\" src=\"assets/img/$gambar\"></img>

</div> </div>

"; }

?> <center>

<ul class="pagination"> <li><a

href="galeryfotokelas.php?page=<?php echo $page -1 ?>">« </a></li>

</ul> <?php

for ($x=1;$x<=$halaman;$x++) { ?>

href="galeryfotokelas.php?page=<?php echo $x ?>"><?php echo $x ?></a></li>

</ul> <?php

} ?>

href="galeryfotokelas.php?page=<?php echo $page +1 ?>">» </a></li>

</ul> </center> </div>

</div> </body> </html>>

8. Style.css

/*

Theme Name: Laura

Theme URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/

(12)

Author URL: https://bootstrapmade.com */

body {

line-height: 1.4;

font-family: 'Roboto', sans-serif; font-size: 18px;

letter-spacing: 0.5px; font-size: 15px;

font-weight: 400; }

ol, ul {

list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {

content: ''; content: none; }

table {

border-collapse: collapse; border-spacing: 0;

} a {

outline: none; }

a:hover, a:focus, a:active{ text-decoration: none; outline: none;

}

.header {

background: url('../img/sm.jpg') no-repeat fixed; background-size: cover;

min-height: 630px; position: relative; }

.navbar-default {

background-color: transparent; border: 0px;

padding: 20px 0; transition: all 0.3s; }

.navbar-brand { font-size: 36px;

font-family: 'Satisfy', cursive; }

.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {

color: #fff; outline: none; }

.navbar-default .navbar-nav > li > a{ font-size: 14px;

(13)

outline: none; }

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {

color: #fffde0;

background-color: transparent; }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {

color: #fffde0;

background-color: transparent; }

.top-nav-collapse { padding: 0;

background: rgba(50,60,70, 0.9); }

.bg-color{

background-color: RGBA(0, 0, 0, 0.67); min-height: 650px;

}

.navbar-border{ }

.banner-text{

border-left: 5px solid #BE2525; padding: 15px 40px;

color: #fff;

margin-top: 170px; }

.banner-text h2, .banner-text p{ font-size: 40px;

font-weight: 400;

font-family: 'Questrial', sans-serif; }

.banner-text h2 span{

.overlay-detail{ margin: 0 auto; }

.overlay-detail a i { text-align: center; position: absolute; bottom: -140px; font-size: 24px; color: #fff; width: 40px; height: 40px;

border: 1px solid #fff; line-height: 40px; border-radius: 50%; }

.deco{

(14)

background: url('../img/about-banner.jpg') no-repeat; background-size: cover;

margin-bottom: -3px; }

.section-padding{ padding: 60px 0px; }

.title{

font-size: 24px; margin-bottom: 50px; }

.title-text{

padding: 0px 25px 0px 0px;

border-right: 5px solid #BE2525; font-size: 24px;

}

.about-text p{ color: #444; }

.abt-list li{

padding: 5px 0px; font-size: 18px; font-weight: 400; }

#portfolio{

background-color: #f0f1e9; }

.grid-padding{ padding: 0 8px; }

.grid-padding img{

margin-bottom: 15px; }

.padding-right-zero{

padding-right: 0px !important; }

#myGrid{

margin-top: 50px; }

.test-sec blockquote { background: #eee;

.test-sec blockquote::after { content: '';

position: absolute; bottom: -14px; margin-left: 10px;

border-top: 14px solid #eee;

border-left: 14px solid transparent; border-right: 14px solid transparent; }

blockquote {

(15)

font-size: 17.5px;

border-left: 5px solid RGBA(0, 0, 0, 0.18); }

.test-sec .carousel-info span { display: block;

}

.test-sec span.testimonials-name { color: #62646f;

font-weight: 600; margin: 16px 0 5px; }

#contact {

width: 100%;

background-color: RGBA(8, 7, 7, 0.92); }

#contact .btn-primary { background: #BE2525;

border: 1px solid #BE2525; }

.validation { color: red; display:none; margin: 0 0 20px; font-weight:400; font-size:13px; }

#sendmessage { color: green;

border:1px solid green; background: #fff;

display:none; text-align:center; padding:15px; font-weight:600; margin-bottom:15px; }

#errormessage { color: red; display:none;

border:1px solid red; text-align:center; padding:15px; font-weight:600; margin-bottom:15px; background: #fff; }

#sendmessage.show, #errormessage.show, .show { display:block;

}

footer {

(16)

.footer a {

color: #BE2525; }

.footer__navigation li, .social-list li{ display: inline-block;

}

.contact-sec h2 { font-size: 28px; color: #fff; font-weight: 600; padding: 15px 0px; }

.footer__navigation li a {

display: inline-block; color: #767676;

font-weight: 600;

font-variant-ligatures: common-ligatures; font-size: 1.2em;

line-height: 1.625em; margin-top: 0;

margin-bottom: 1.625em; padding-right: 10px; }

.contact-sec p { color: #fff; font-size: 18px;

padding: 16px 0px 24px; }

.contact-sec i{

padding-right: 15px; }

.contact-sec a { color: #FFF;

background-color: RGBA(174, 142, 142, 0.7); display: inline-block;

padding: 16px 34px; font-size: 18px;

transition: all 0.5s ease-in 0s; }

.carousel-info, blockquote { float: left;

}

.social-list li{

transition: 0.2s linear;

-webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; opacity: .5;

display: inline-block; margin: 0;

}

.social-list li a{

font-size: 28px; margin-right: 15px; }

(17)

}

.footer__lower {

margin-top: 3.25em; }

.type--fine-print{ color: #767676; }

.navbar-toggle {

position: relative; background-color: #fff; border-radius: 4px; }

.navbar-nav > li > a { padding-top: 24px; padding-bottom: 24px; }

.navbar-brand{

margin-top: 9px; }

.grid-item { width: 200px; }

.grid-item--width2 { width: 400px; } /*********************************** ************************************ Responsive media queries

************************************ ***********************************/

@media (min-width: 551px) and (max-width: 980px){ .title-text{

}

@media (min-width: 100px) and (max-width: 550px) { .navbar-nav > li > a {

padding-top: 15px; padding-bottom: 15px;

}

.navbar-brand{

margin-top: 0px; }

.carousel-info { margin-bottom: 30px; }

.type--fine-print{

text-align: center; }

.text-center-xs{

text-align: center !important; }

.social-list{

.banner-text h2, .banner-text p { font-size: 30px;

}

.title-text{

(18)

} /****/

.portfolio-box {

.padding-right-zero {

padding-right: 0px; }

#contact {

background-color: white; }

.validation { color: red; display:none; margin: 0 0 20px; font-weight:400; font-size:13px; }

#sendmessage { color: green;

border:1px solid green; display:none;

text-align:center; padding:15px; font-weight:600; margin-bottom:15px; }

#errormessage { color: red; display:none;

border:1px solid red; text-align:center; padding:15px; font-weight:600; margin-bottom:15px; }

#sendmessage.show, #errormessage.show, .show { display:block;

} .black {

color: #000 !important; font-weight: 600;

}

.btn-send {

border-radius: 0px; color: white;

(19)

a:hover {

lor: black; }

.cont-title {

font-size: 24px; padding:15px 0px; }

.location-info p span { display: inline-block; }

.location-info p span { width: 40px;

font-size: 24px; color: black;

vertical-align: middle; }

.location-info p { margin-bottom: 5px; }

.location-info p { font-size: 18px; line-height: 32px; color: black; }

.contact-icon-container { position: absolute; top: -38px;

right: 0;

padding-right: 20px; font-size: 320px; color: #555;

line-height: 300px;

-ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);

(20)

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan di bawah ini, menerangkan bahwa Tugas Akhir Mahasiswa

Program Diploma 3 Teknik Informatika :

Nama

: Endang Syuarda

NIM

: 142406092

Program Studi : D3 Teknik Informatika

Judul TA : Perancangan Aplikasi Jasa Foto Siang Malam Berbasis Internet

Commerce

Telah melakukan test Program Tugas Akhir Mahasiswa tersebut di atas tanggal

19 Juli 2017.

Dengan Hasil : Sukses/Gagal

Demikian diterangkan untuk digunakan sebagai syarat pendaftaran Ujian Meja

Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA

USU Medan.

Medan, Juli 2017

Dosen Pembimbing,

(21)

KARTU BIMBINGAN TUGAS AKHIR

Nama Mahasiswa

: Endang Syuarda

Nomor Induk Mahasiswa

: 142406092

Judul Tugas Akhir

: Perancangan Aplikasi Jasa Foto Siang Malam

Berbasis Internet Commerce

Dosen Pembimbing

: Dr. Syahriol Sitorus, M.IT

Tanggal Mulai Bimbingan

: 07 Maret 2017

Tanggal Selesai Bimbingan : 19 Juli 2017

No

Tanggal

Pembahasan Asistensi

(Bab, Tentang, Saran)

Paraf Dosen

Pembimbing

1 07 Maret

2017

Pengajuan Judul

2 22 Maret

2017

Pengajuan Proposal

3 27 Maret

2017

Acc Proposal

4 04 Juli

2017

Bab 1

5 04 Juli

2017

Bab2

6 04 Juli

2017

(22)