View
4
Download
0
Category
Preview:
Citation preview
Cyberpreneurship
CYBERPRENEURSHIP MEMBUAT WEBSITE
E-COMMERCE
Oleh :Laurentinus
SEKOLAH TINGGI MANAJEMEN INFORMASI DAN KOMPUTER
(STMIK) ATMA LUHUR
PANGKALPINANG
2017
Page 1
Cyberpreneurship
A. Gambaran Sistem yang Akan Dibangun
Desain yang akan kita buat di pertemuan ini yaitu halaman Template (index.php), yang
berfungsi untuk menampung semua menu front-end yang nanti dibuat diatas. Tampilan Draft
Website yang akan dibuat :
Page 2
Sistem
Beranda / Produk Testimoni KeranjangTentang Kami Login
Detail Beli
Keranjang
Checkout
Sign UpCheckout
Cyberpreneurship
B. Menyiapkan Data1. Silahkan download data toko online yang disediakan lewat URL :
https://www.dropbox.com/sh/mswyuoukvpmpil4/AAA6LG-737jNYqScUJcypN_1a?dl=0
2. Pada folder C:/xampp/htdocs Buat folder baru dengan nama “tokoonline” 3. Copy semua data toko online ke dalam folder C:/xampp/htdocs/tokoonline
C. Desain Database1. Buka http://localhost/phpmyadmin/ 2. Buat database baru dengan cara Pilih menu Databases dan masukkan nama database,
lalu tekan tombol Create. Kita masukkan nama databasenya : toko_online 3. Jika berhasil membuat database bernama toko_online. Selanjutnya buat tabel sebagai
berikut :
4. Insert data barang, caranya klik tabel “barang” klik menu Insert. Masukkan data-data berikut :
Page 3
Cyberpreneurship
D. Membuat File Koneksi Database1. Buat folder baru bernama config di dalam folder htdocs/tokoonline2. Buat file baru bernama koneksi.php di dalam folder config yang baru dibuat3. Isi dari file koneksi.php adalah sebagai berikut :
E. Merancang Template Bootstrap1. Buat File dengan nama index.php pada folder localhost/tokoonline/2. Tambahkan Code tersebut ke file index.php untuk membuat coding dasar :
<?php require_once("config/koneksi.php"); if (!isset($_SESSION)) { session_start(); } ?><!DOCTYPE html><html lang="en"><head>
<!-- start: Meta --><meta charset="utf-8"><title>DistroIT | Distro Online telengkap dan terpercaya di Pangkalpinang </title> <meta name="description" content="Distro Pangkalpinang, terlengkap,
information, technology, jababeka, baru, murah"/><meta name="keywords" content="Kaos, Murah, Pangkalpinang, Baru,
terlengkap, harga, terjangkau" /><meta name="author" content="Laurentinus"/><!-- end: Meta --><!-- start: Mobile Specific --><meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"><!-- end: Mobile Specific --><!-- start: Facebook Open Graph --><meta property="og:title" content=""/><meta property="og:description" content=""/><meta property="og:type" content=""/><meta property="og:url" content=""/><meta property="og:image" content=""/><!-- end: Facebook Open Graph -->
<!-- start: CSS --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"><link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"><link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Droid+Serif">
Page 4
Cyberpreneurship
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Economica:700,400italic">
<!-- end: CSS --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body>
<!-- start: Java Script --><!-- Placed at the end of the document so the pages load faster --><script src="js/jquery-1.8.2.js"></script><script src="js/bootstrap.js"></script><script src="js/flexslider.js"></script><script src="js/carousel.js"></script><script src="js/jquery.cslider.js"></script><script src="js/slider.js"></script><script defer="defer" src="js/custom.js"></script><!-- end: Java Script --></body></html>
Page 5
Cyberpreneurship
3. Tambahkan Code tersebut ke file index.php didalam tag <body> untuk desain Header :
<!--start: Header --><header> <!--start: Container --> <div class="container">
<!--start: Row --><div class="row"> <!--start: Logo --> <div class="logo span3">
<a class="brand" href="#"><img src="img/logo2.png" alt="Logo"></a>
</div> <!--end: Logo -->
<!--start: Navigation --><div class="span9">
<div class="navbar navbar-inverse"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-
collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="index.php?page=beranda">Home</a></li> <li><a href="index.php?page=beranda">Produk Kami</a></li> <li><a href="index.php?page=testimoni">Testimoni</a></li>
<li><a href="index.php?page=keranjang">Keranjang</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-
toggle="dropdown">Login <b class="caret"></b></a><ul class="dropdown-menu"> <li><a href="index.php?page=login">Login</a></li> <li><a href="index.php?page=sign_up">Sign Up</a></li> <!--<li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li>--></ul></li></ul>
</div></div></div></div><!--end: Navigation --></div><!--end: Row --></div><!--end: Container-->
</header><!--end: Header-->
Setelah di save kemudian dijalankan di browser dengan ketik url : localhost/tokoonline.
Page 6
Cyberpreneurship
4. Tambahkan Code tersebut ke file index.php dibawah tag </header> untuk desain Slider :
<!-- start: Slider --><div class="slider-wrapper"> <div id="da-slider" class="da-slider">
<div class="da-slide"><h2>T-Shirt Casual</h2><p>Kami menyediakan kaos sport dan casual yang nyaman anda kenakan
setiasp hari juga update dengan perkermbangan mode di era sekarang ini.</p> <a href="#" class="da-link">Lihat Produk</a>
<div class="da-img"><img src="img/parallax-slider/kaos.png" alt="image01" /></div>
</div> <div class="da-slide">
<h2>Jacket & Sweater</h2> <p>Kami memiliki banyak koleksi jacket dan sweater, mulai dari rider
jacket hingga casual jacket dan juga casual sweater yang cocok dipakai sehari hari.</p>
<a href="#" class="da-link">Lihat Produk</a><div class="da-img"><img src="img/parallax-slider/jaket5.png"
alt="image02" /></div> </div> <div class="da-slide">
<h2>Pants & Jeans</h2><p>Kami memiliki koleksi jeans dan celana santai yang bisa anda
gunakan sehari hari dengan harga yang terjangkau anda bisa memiliki koleksi kami.</p>
<a href="#" class="da-link">Lihat Produk</a><div class="da-img"><img src="img/parallax-slider/jeans.png"
alt="image03" /></div> </div> <div class="da-slide">
<h2>Custom T-Shirt</h2><p>Kami menerima pembuatan kaos custom sesuai dengan design keinginan
anda dengan harga yang bisa di sesuaikan dengan kebutuhan anda.</p><a href="#" class="da-link">Lihat Produk</a><div class="da-img"><img src="img/parallax-slider/kaos.png"
alt="image04" /></div> </div> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav></div></div><!-- end: Slider -->
Setelah di save kemudian dijalankan di browser dengan ketik url : localhost/tokoonline maka image slider telah ditambahkan ke website sebagai berikut :
Page 7
Cyberpreneurship
5. Lanjut ke bagian Konten, Tambahkan Code tersebut ke file index.php dibawah tag <!—end: Slider --> :
<!--start: Wrapper--><div id="wrapper"> <!--start: Container --> <div class="container"> <!-- start: Hero Unit - Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> <p>Kami adalah distro online terlengkap dan terpercaya, dengan harga terjangkau kurang dari 100rb anda sudah dapat memiliki produk kami. Selamat Berbelanja Customer..
</p> <p><a class="btn btn-success btn-large" href="produk.php">Mulai Berbelanja »</a></p> </div> <!--<div class="title"><h3>Keranjang Anda</h3></div> <div class="hero-unit"> </div> -->
Page 8
Cyberpreneurship
<!-- end: Hero Unit -->
<!-- start: Row -->
//POST -> Ke halaman Lain (aman)//GET -> URL Domain localhost/pmb?page=”beranda”
//localhost/pmb// if(kondisi){// statement }
<?php
if(isset($_GET['page'])){ $halaman = $_GET['page'];
}else{ $halaman = "";
}
if($halaman == ""){ //Jika $halaman tidak didapatkaninclude "page/beranda.php";
}elseif(!file_exists("page/$halaman.php")){ //Jika $halaman didapatkan tetapi File tidak ada echo "Halaman yg dicari tidak ditemukan";
}else{//$halaman didapatkan dan File tersediainclude "page/$halaman.php";
} ?> <!-- end: Row -->
<hr>
<!-- start Clients List --> <div class="clients-carousel">
<ul class="slides clients"><li><img src="img/logos/1.png" alt=""/></li><li><img src="img/logos/2.png" alt=""/></li><li><img src="img/logos/3.png" alt=""/></li><li><img src="img/logos/4.png" alt=""/></li><li><img src="img/logos/5.png" alt=""/></li><li><img src="img/logos/6.png" alt=""/></li><li><img src="img/logos/7.png" alt=""/></li><li><img src="img/logos/8.png" alt=""/></li><li><img src="img/logos/9.png" alt=""/></li><li><img src="img/logos/10.png" alt=""/></li></ul>
</div> <!-- end Clients List -->
<hr>
<!-- start: Row --> <div class="row">
<!-- start: Icon Boxes --><div class="icons-box-vert-container">
<!-- start: Icon Box Start --><div class="span6">
<div class="icons-box-vert"><i class="ico-ok ico-color circle-color big"></i><div class="icons-box-vert-info"><h3>Kemudahan Berbelanja</h3><p>Dapatkan kemudahan berbelanja di DistroIT Pangkalpinang,
Kami menyediakan kebutuhan untuk fasion anda.</p></div><div class="clear"></div>
Page 9
Cyberpreneurship
</div></div><!-- end: Icon Box-->
<!-- start: Icon Box Start --><div class="span6"> <div class="icons-box-vert">
<i class="ico-cup ico-white circle-color-full big-color"></i><div class="icons-box-vert-info"><h3>Juara Pengiriman Delivery</h3><p>Dapatkan kemudahan pengiriman barang ke rumah anda dengan
minimal belanja 300 ribu radius 10km dari kantor kami.</p></div>
<div class="clear"></div> </div></div><!-- end: Icon Box -->
<!-- start: Icon Box Start --><div class="span6"> <div class="icons-box-vert">
<i class="ico-ipad ico-color circle-color big"></i><div class="icons-box-vert-info"><h3>Berbelanja Dengan Gadget</h3><p>Anda bisa memesan produk kami melalui gadget kesayangan
anda, belanja di DistroIT Pangkalpinang praktis dan mudah.</p></div><div class="clear"></div>
</div></div><!-- end: Icon Box -->
<!-- start: Icon Box Start --><div class="span6"> <div class="icons-box-vert">
<i class="ico-thumbs-up ico-white circle-color-full big-color"></i>
<div class="icons-box-vert-info"><h3>Sosial Media</h3><p>Follow twitter dan fan page facebook kami untuk mendapatkan
update promo special setiap harinya.</p> </div>
<div class="clear"></div> </div> </div> <!-- end: Icon Box --></div><!-- end: Icon Boxes --><div class="clear"></div>
</div> <!-- end: Row --> <hr>
</div> <!--end: Container--></div><!-- end: Wrapper -->
Page 10
Cyberpreneurship
6. Lanjut ke bagian Footer, Tambahkan Code tersebut ke file index.php dibawah tag <!—end: wrapper --> :
<!-- start: Footer Menu --><div id="footer-menu" class="hidden-tablet hidden-phone"> <!-- start: Container --> <div class="container">
<!-- start: Row --><div class="row"></div><!-- end: Row -->
</div> <!-- end: Container --></div><!-- end: Footer Menu -->
<!-- start: Footer --><div id="footer"> <!-- start: Container --> <div class="container">
<!-- start: Row --><div class="row">
<!-- start: About --> <div class="span3">
<h3>Tentang DistroIT</h3><p>DistroIT adalah toko online yang bergerak di bidang fasion, sasaran
kami semua kalangan baik muda maupun tua, mulai dari anak - anak dan orang dewasa.</p>
</div> <!-- end: About -->
<!-- start: Photo Stream --> <div class="span3">
<h3>Alamat Kami</h3>Jl. Jend. Sudirman Kel. Selindung Kec. Pangkalbalam Kota
pangkalpinang<br /> Telp : 0717-433506<br /> Email : <a href="mailto:laurentinus99@gmail.com">laurentinus99@gmail.com</a>
</div> <!-- end: Photo Stream -->
<div class="span6"><!-- start: Follow Us --><h3>Follow Us!</h3>
Page 11
Cyberpreneurship
<ul class="social-grid"> <li>
<div class="social-item"> <div class="social-info-wrap"> <div class="social-info"> <div class="social-info-front social-twitter"> <a href="http://twitter.com"></a> </div> <div class="social-info-back social-twitter-hover"> <a href="http://twitter.com"></a> </div> </div>
</div></div>
</li> <li>
<div class="social-item"> <div class="social-info-wrap">
<div class="social-info"> <div class="social-info-front social-facebook">
<a href="http://facebook.com"></a> </div> <div class="social-info-back social-facebook-hover"> <a href="http://facebook.com"></a> </div></div>
</div></div>
</li> <li>
<div class="social-item"> <div class="social-info-wrap">
<div class="social-info"> <div class="social-info-front social-dribbble">
<a href="http://dribbble.com"></a> </div> <div class="social-info-back social-dribbble-hover"> <a href="http://dribbble.com"></a> </div></div>
</div></div>
</li> <li>
<div class="social-item"> <div class="social-info-wrap">
<div class="social-info"> <div class="social-info-front social-flickr">
<a href="http://flickr.com"></a> </div> <div class="social-info-back social-flickr-hover"> <a href="http://flickr.com"></a> </div></div>
</div></div>
</li></ul><!-- end: Follow Us --><!-- start: Newsletter --><!-- <form id="newsletter"><h3>Newsletter</h3><p>Please leave us your email</p><label for="newsletter_input">@:</label><input type="text" id="newsletter_input"/><input type="submit" id="newsletter_submit" value="submit"></form> --><!-- end: Newsletter -->
Page 12
Cyberpreneurship
</div></div><!-- end: Row -->
</div> <!-- end: Container --></div><!-- end: Footer -->
<!-- start: Copyright --><div id="copyright"> <!-- start: Container --> <div class="container"> <p>Copyright © <a href="#">Distro Pangkalpinang 2017</a></p>
</div> <!-- end: Container --></div><!-- end: Copyright -->
Page 13
Recommended