Perancangan Aplikasi Penjualan Berbasis E-Market Di NFD Hijab Store

1

LAMPIRAN 1
LIST PROGRAM

1. Halaman Utama (index.php)






NFD Hijab |A Super Cool Hijaby













Universitas Sumatera Utara

2

















Toggle

navigation




//Ubah gambar logo



Universitas Sumatera Utara

3





Home




Product


Square
Instant




Blog


#NFDSQUAD
#NFDQandA




Universitas Sumatera Utara

4


About










We


are

N

F

D

HIJAB, a super cool hijaby.
We are affordably, stylish, and
simple . Because have a lot of hijab is fun.











Testimonials







Universitas Sumatera Utara

5





"Terimakasih


NFD

Hijab, kualitas barang bagus, paket juga dipacking rapi dan cepat
sampai. Bahan jilbab tidak menipu, very recommended buat anak muda
yang mau berhijab tetapi tetep kece.
Wira

Nofrina-

Langsa, Aceh"






"Mba,

jilbabnya


dah nyampe 2 hari yg lalu, bagus ternyata. Ternyata tokonya asli
ya, gak tipu-tipu, dikirim beneran. Besok saya pasti pesan lagi.
Mauliani-Balikpapan"






"Response lumayan,
dan service oke, harga bersaing. pertahankan the best value ini,
semoga bisa makin baik kedepannya.Dinda-Palembang, SumSel"




Universitas Sumatera Utara

6





"Selalu puas kalau
beli di NFD Hijab, pelayanan dan pengiriman sangat recommended
cara kerjanya. Hijabnya juga kualitas jempolan, gapernah bosen
shopping disini. Opik-Jakarta Selatan, Jakarta"


























Universitas Sumatera Utara

7







About Us


From faith to heart, the oldsaying has been an inspiration for us to provide you window of us.
Through each of our products,
we believe that it will make you confident that every Muslim woman
should have it.
Starting

from

social media, our ...

Read

more...



The Best Testimonial

We

update

four

of

the

best

testimonial every month. So, Post your photo with our product on
your instagram and give your best testimony, don't forget tag
@nfd_hijab. LOVE YOU !!!



Contact Us


Address: Gg. Rasmin,Jl. Gatot Subroto (Belakang Universitas Tjut

Universitas Sumatera Utara

8

Nyak Dhien), Sei Sikambing C. II, Medan Helvetia, Kota Medan,
Sumatera Utara 20123


WhatsApp: 0852 9600 2159
Line:
Bnf25



Information



IG: @nfd_hijab


Cust Service: farahnandra25@gmail.com


class="fa

fa-calendar">

Mon - Fri: 09.00 - 17.00 WIB



a

{

background:

#f8f8f8;

border-color:

#9d426b;

color: #5d5d5d; }
.nav .open > a:hover, .nav .open > a:focus { background: #9d426b;
border-color: #9d426b; color: #fff; }
ul.navbar-nav li a i { line-height: 35px; color: #aaa; }
ul.navbar-nav li a:hover i, ul.navbar-nav li a:focus i { color:
#fff; }
.dropdown-menu {
border: 0;
-moz-border-radius:

0;

-webkit-border-radius:

0;

border-

radius: 0;

Universitas Sumatera Utara

14

-moz-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); -webkit-boxshadow: 0 6px 10px rgba(0, 0, 0, .15); box-shadow: 0 6px 10px
rgba(0, 0, 0, .15);
}
.dropdown-menu > .active > a { background: #fff; color: #5d5d5d; }
.dropdown-menu > .active > a:hover, .dropdown-menu > .active >
a:focus { background: #f8f8f8; color: #9d426b; }
ul.navbar-nav li .dropdown-menu a { padding-top: 15px; paddingbottom: 15px; }
ul.navbar-nav

li.active

.dropdown-menu

a

{

background:

#fff;

color: #5d5d5d; border: 0; }
ul.navbar-nav li.active .dropdown-menu a:hover,
ul.navbar-nav

li.active

.dropdown-menu

a:focus

{

background:

#9d426b; color: #fff; border: 0; }
ul.navbar-nav li.active .dropdown-menu > .active > a { background:
#f8f8f8; color: #9d426b; border: 0; }
ul.navbar-nav li.active .dropdown-menu > .active > a:hover,
ul.navbar-nav

li.active

.dropdown-menu

>

.active

>

a:focus

{

background: #9d426b; color: #fff; border: 0; }
.navbar>.container .navbar-brand { margin-left: 0; }
.navbar-brand {
width: 245px;
height: 106px;
background: url(../img/logonfd3.png) left center no-repeat;
text-indent: -99999px;
}
/***** Slider *****/
.slider-container {
margin: 0 auto;
background: #f8f8f8 url(../img/pattern.jpg) left top repeat;
-moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px
15px 0 rgba(0,0,0,.05) inset;

Universitas Sumatera Utara

15

-webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px
15px 0 rgba(0,0,0,.05) inset;
box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0
rgba(0,0,0,.05) inset;
}
.slider {
padding-left: 5px;
padding-right: 5px;
}
.flexslider {
margin-top: 45px;
margin-bottom: 55px;
border: 6px solid #fff;
-moz-border-radius:

0;

-webkit-border-radius:

0;

border-

radius: 0;
-moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 -5px 15px 0
rgba(0,0,0,.05);
-webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 -5px 15px
0 rgba(0,0,0,.05);
box-shadow:

0

5px

15px

0

rgba(0,0,0,.05),

0

-5px

15px

0

rgba(0,0,0,.05);
}
.flexslider .slides > li {
position: relative;
}
.flex-caption {
position: absolute;
left: 0;
bottom: 20px;
width: 95%;
padding: 10px 20px;
background: #1d1d1d; /* browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
font-size: 14px;
line-height: 24px;

Universitas Sumatera Utara

16

color: #eaeaea;
text-align: left;
font-style: italic;
}
.flex-direction-nav a {
width: 60px;
height: 60px;
padding-top: 17px;
background: #9d426b;
color: #fff;
text-shadow: none;
}
.flex-direction-nav a:before { font-size: 26px; }
.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {
text-align: center; }

/***** Slider 2 *****/
.slider-2-container {
padding: 180px 0;
}
.slider-2-text {
padding: 30px 0 43px 0;
background: #1d1d1d; /* browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
color: #fff;
}
.slider-2-text h1 {
padding-left: 30px;
padding-right: 30px;
font-family: 'Lobster', cursive;
font-size: 30px;
color: #fff;

Universitas Sumatera Utara

17

font-weight: bold;
}
.slider-2-text p {
padding-left: 30px;
padding-right: 30px;
font-size: 18px;
font-style: italic;
}

/***** Presentation *****/
.presentation-container {
margin-top: 30px;
}
.presentation-container h1 {
font-family: 'Lobster', cursive;
font-size: 30px;
color: #5d5d5d;
font-weight: bold;
}
.presentation-container p {
font-size: 18px;
font-style: italic;
}

/***** Services *****/
.services-container {
margin-top: 10px;
}
.services-title {
margin-top: 40px;
background: url(../img/line.png) left center repeat-x;

Universitas Sumatera Utara

18

}
.services-title h2 {
width: 200px;
margin: 0 auto;
background: #fff;
font-family: 'Lobster', cursive;
font-size: 24px;
color: #5d5d5d;
font-weight: bold;
}
.service {
margin-top: 40px;
padding: 15px 15px 20px 15px;
background: #f8f8f8;
border-bottom: 2px solid #9d426b;
}
.service:hover {
box-shadow:

0

5px

15px

0

rgba(0,0,0,.05),

0

1px

25px

0

rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-o-transition:

all

.5s;

-moz-transition:

all

.5s;

-webkit-

transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.service .service-icon {
font-size: 50px;
line-height: 50px;
color: #5d5d5d;
}
.service .service-icon i { vertical-align: middle; }
.service h3 {
margin-top: 13px;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
color: #5d5d5d;

Universitas Sumatera Utara

19

font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.service p {
padding-bottom: 7px;
line-height: 24px;
}

/***** Latest work *****/
.work-container {
margin-top: 50px;
}
.work-title {
background: url(../img/line.png) left center repeat-x;
}
.work-title h2 {
width: 220px;
margin: 0 auto;
background: #fff;
font-family: 'Lobster', cursive;
font-size: 24px;
color: #5d5d5d;
font-weight: bold;
}
.work {
margin-top: 40px;
padding-bottom: 20px;
background: #f8f8f8;
border-bottom: 2px solid #9d426b;
}
.work:hover img {

Universitas Sumatera Utara

20

opacity: 0.7;
-o-transition:

all

.3s;

-moz-transition:

all

.3s;

-webkit-

transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.work:hover {
box-shadow:

0

5px

15px

0

rgba(0,0,0,.05),

0

1px

25px

0

rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-o-transition:

all

.5s;

-moz-transition:

all

.5s;

-webkit-

transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.work .work-bottom {
margin-top: 15px;
}
.work h3 {
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.work p {
padding-left: 15px;
padding-right: 15px;
line-height: 24px;
font-style: italic;
}

/***** Testimonials *****/
.testimonials-container {

Universitas Sumatera Utara

21

margin-top: 50px;
padding-bottom: 70px;
}
.testimonials-title {
background: url(../img/line.png) left center repeat-x;
}
.testimonials-title h2 {
width: 180px;
margin: 0 auto;
background: #fff;
font-family: 'Lobster', cursive;
font-size: 24px;
color: #5d5d5d;
font-weight: bold;
}
.testimonial-list {
margin-top: 30px;
text-align: left;
}
.testimonial-list .tab-pane { overflow: hidden; }
.testimonial-list .testimonial-image {
float: left;
width: 10%;
margin: 10px 0 0 0;
}
.testimonial-list

.testimonial-image

img

{

max-width:

64px;

border: 3px solid #eaeaea; }
.testimonial-list .testimonial-text {
float: left;
width: 90%;
font-size: 14px;
line-height: 30px;
font-style: italic;

Universitas Sumatera Utara

22

}
.testimonial-list .nav-tabs {
border: 0;
text-align: right;
}
.testimonial-list .nav-tabs li {
float: none;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
}
.testimonial-list .nav-tabs li a {
width: 12px;
height: 12px;
padding: 0;
background: #eaeaea;
border: 0;
-moz-border-radius:

0;

-webkit-border-radius:

0;

border-

radius: 0;
}
.testimonial-list .nav-tabs li a:hover { border: 0; background:
#ddd; }
.testimonial-list .nav-tabs li.active a { background: #9d426b; }

/***** Footer *****/
footer {
margin: 0 auto;
padding-bottom: 10px;
background: #f8f8f8 url(../img/pattern.jpg) left top repeat;
-moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset; -webkitbox-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset; box-shadow: 0 5px
15px 0 rgba(0,0,0,.05) inset;
}

Universitas Sumatera Utara

23

.footer-box {
margin-top: 20px;
text-align: left;
}
.footer-box h4 {
margin-top: 20px;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.footer-box-text p {
line-height: 24px;
}
.footer-box-text-contact i {
padding-right: 7px;
}
.footer-box-text-subscribe form {
padding-bottom: 10px;
}
.footer-box-text-subscribe input[type="text"] {
width: 95%;
height: 26px;
}
/* Flickr feed */
.flickr-feed {
margin: 16px 0 0 0;
}
.flickr-feed a {

Universitas Sumatera Utara

24

display: inline-block;
width: 54px;
margin: 0 4px 4px 0;
}
.flickr-feed a:hover { opacity: 0.7; }
.flickr-feed a img { border: 2px solid #eaeaea; }

.footer-border {
margin-top: 30px;
border-top: 1px dashed #ddd;
}
.footer-copyright {
margin-top: 15px;
line-height: 24px;
text-align: left;
}
.footer-social {
margin-top: 5px;
text-align: right;
}
.footer-social a { margin: 0 0 0 10px; font-size: 26px; color:
#888; }
.footer-social a:hover, .footer-social a:focus { color: #9d426b; }

/***** Page title *****/
.page-title-container {
margin: 0 auto;
padding: 30px 0 35px 0;
background: #f8f8f8 url(../img/pattern.jpg) left top repeat;
text-align: left;
-moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px
15px 0 rgba(0,0,0,.05) inset;
-webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px
15px 0 rgba(0,0,0,.05) inset;

Universitas Sumatera Utara

25

box-shadow: 0 5px 15px 0 rgba(0,0,0,.05) inset, 0 -5px 15px 0
rgba(0,0,0,.05) inset;
}
.page-title-container h1 {
display: inline;
margin-left: 10px;
font-family: 'Lobster', cursive;
font-size: 24px;
color: #5d5d5d;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
vertical-align: middle;
}
.page-title-container p {
display: inline;
margin-left: 5px;
font-size: 14px;
font-style: italic;
vertical-align: middle;
}
.page-title-container i {
font-size: 46px;
color: #ccc;
vertical-align: middle;
}

/* ----- ABOUT PAGE ----- */
/***** About us text *****/
.about-us-container {
margin-top: 20px;
}
.about-us-text {

Universitas Sumatera Utara

26

padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
.about-us-text h3 {
margin-top: 25px;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.about-us-text p {
line-height: 28px;
font-size: 13px;
}
/***** Meet our team *****/
.team-container {
margin-top: 30px;
}
.team-title {
background: url(../img/line.png) left center repeat-x;
}
.team-title h2 {
width: 220px;
margin: 0 auto;
background: #fff;
font-family: 'Lobster', cursive;
font-size: 24px;
color: #5d5d5d;
font-weight: bold;
}

Universitas Sumatera Utara

27

.team-box {
margin-top: 40px;
padding-bottom: 15px;
background: #f8f8f8;
border-bottom: 2px solid #9d426b;
}
.team-box:hover img {
opacity: 0.7;
-o-transition:

all

.3s;

-moz-transition:

all

.3s;

-webkit-

transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.team-box:hover {
-moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0
rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px
0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
box-shadow:

0

5px

15px

0

rgba(0,0,0,.05),

0

1px

25px

0

rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-o-transition:

all

.5s;

-moz-transition:

all

.5s;

-webkit-

transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.team-box h3 {
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.team-box p {
padding-left: 15px;

Universitas Sumatera Utara

28

padding-right: 15px;
line-height: 24px;
font-style: italic;
}
.team-social a { margin: 0 5px; font-size: 26px; }

/* ----- CONTACT PAGE ----- */
/***** Form *****/
.contact-us-container {
margin-top: 20px;
padding-bottom: 50px;
text-align: left;
}
.contact-us-container h3 {
margin-top: 25px;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.contact-us-container p {
line-height: 28px;
font-size: 13px;
}
.contact-form {
padding-top: 25px;
padding-bottom: 30px;
}
.contact-form form {

Universitas Sumatera Utara

29

margin-top: 25px;
}
.contact-form form .form-group {
margin-bottom: 20px;
}
.contact-form input[type="text"] { width: 95%; height: 34px; }
.contact-form textarea { width: 95%; height: 170px; padding-top:
6px; padding-bottom: 6px; }
.contact-form label { font-size: 13px; font-weight: 400; }
.contact-form label .error-label { font-style: italic }
.contact-form button { margin-top: 5px; padding: 0 45px; }
/***** Google map *****/
.contact-address {
padding-bottom: 15px;
}
.contact-address .map {
margin: 20px 0 40px 0;
height: 300px;
border: 5px solid #f8f8f8;
}

/* ----- SERVICES PAGE ----- */
/***** Services full width text *****/
.services-full-width-container {
margin-top: 20px;
}
.services-full-width-text {
padding-top: 10px;
text-align: left;
}

Universitas Sumatera Utara

30

.services-full-width-text h3 {
margin-top: 25px;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.services-full-width-text p {
line-height: 28px;
font-size: 13px;
}
/***** Services half width text *****/
.services-half-width-container {
margin-top: 20px;
}
.services-half-width-text {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
.services-half-width-text h3 {
margin-top: 25px;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.services-half-width-text p {

Universitas Sumatera Utara

31

line-height: 28px;
font-size: 13px;
}
/***** Call to action *****/
.call-to-action-container {
margin-top: 20px;
padding-bottom: 50px;
}
.call-to-action-text {
padding-top: 25px;
padding-bottom: 15px;
background: #f8f8f8;
text-align: left;
overflow: hidden;
}
.call-to-action-text:hover {
-moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,.05), 0 1px 25px 0
rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.05), 0 1px 25px
0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
box-shadow:

0

3px

10px

0

rgba(0,0,0,.05),

0

1px

25px

0

rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-o-transition:

all

.5s;

-moz-transition:

all

.5s;

-webkit-

transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.call-to-action-text p {
float: left;
width: 80%;
padding-left: 25px;
line-height: 30px;
font-size: 18px;
font-style: italic;
}

Universitas Sumatera Utara

32

.call-to-action-text .call-to-action-button {
float: left;
width: 20%;
padding-right: 25px;
margin-bottom: 10px;
text-align: right;
}

/* ----- PORTFOLIO PAGE ----- */
.portfolio-container {
margin-top: 20px;
padding-bottom: 50px;
}
.portfolio-filters {
padding-top: 35px;
padding-bottom: 10px;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
color: #5d5d5d;
font-weight: bold;
text-align: left;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.portfolio-filters a { color: #5d5d5d; }
.portfolio-filters a:hover, .portfolio-filters a.active { color:
#9d426b; }
.portfolio-box {
width: 255px;
margin: 40px 15px 0 15px;
}
.portfolio-box img {
cursor: pointer;

Universitas Sumatera Utara

33

-o-transition: all .3s; -moz-transition: all .3s; -webkittransition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.portfolio-box:hover img { opacity: 0.7; }
.portfolio-box-container {
position: relative;
background: #f8f8f8;
border-bottom: 2px solid #9d426b;
}
.portfolio-box-container:hover {
box-shadow:

0

5px

15px

0

rgba(0,0,0,.05),

0

1px

25px

0

rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
-o-transition:

all

.5s;

-moz-transition:

all

.5s;

-webkit-

transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.portfolio-box-icon {
position: absolute;
top: 10px;
right: 10px;
width: 35px;
height: 35px;
padding-top: 7.5px;
padding-left: 3px;
background: #1d1d1d; /* browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
font-size: 20px;
color: #fff;
line-height: 20px;
-moz-border-radius: 19px; -webkit-border-radius: 19px; borderradius: 19px;
}
.portfolio-box-text {
padding: 0 15px 20px 15px;
}

Universitas Sumatera Utara

34

.portfolio-box-text h3 {
margin-top: 20px;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
color: #5d5d5d;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.portfolio-box-text p {
line-height: 24px;
font-style: italic;
}

3. Halaman Produk Untuk Square (square.php)







NFD Hijab |A Super Cool Hijaby






Universitas Sumatera Utara

35



















Universitas Sumatera Utara

36







Toggle

navigation




//Ubah gambar logo





Home




Product


Square
Instant

Universitas Sumatera Utara

37





Blog


#NFDSQUAD
#NFDQandA



About











Product   /
Square






Universitas Sumatera Utara

38