Cyberpreneurship€¦ · Web viewCyberpreneurship membuat website . e-commerce. Oleh :...

Cyberpreneurship

CYBERPRENEURSHIP MEMBUAT WEBSITE

E-COMMERCE

Oleh :Laurentinus

SEKOLAH TINGGI MANAJEMEN INFORMASI DAN KOMPUTER

(STMIK) ATMA LUHUR

PANGKALPINANG

2017

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 :

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 :



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>

<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"/><meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1"><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=""/>

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

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

  </head><body>

<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></body></html>

Cyberpreneurship

3. Tambahkan Code tersebut ke file index.php didalam tag <body> untuk desain Header :

<header>  <div class="container">

<div class="row">  <div class="logo span3">

<a class="brand" href="#"><img src="img/logo2.png" alt="Logo"></a>

</div> 

<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> </ul></li></ul>

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

</header>

Setelah di save kemudian dijalankan di browser dengan ketik url : localhost/tokoonline.

Cyberpreneurship

4. Tambahkan Code tersebut ke file index.php dibawah tag </header> untuk desain 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>

Setelah di save kemudian dijalankan di browser dengan ketik url : localhost/tokoonline maka image slider telah ditambahkan ke website sebagai berikut :

Cyberpreneurship

5. Lanjut ke bagian Konten, Tambahkan Code tersebut ke file index.php dibawah tag <!—end: Slider --> :

<div id="wrapper">  <div class="container">  <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>

Cyberpreneurship





//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";

} ?> 

<hr>

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

<hr>

 <div class="row">

<div class="icons-box-vert-container">

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

Cyberpreneurship

</div></div>

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


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


<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> </div><div class="clear"></div>

</div>  <hr>

</div> </div>

Cyberpreneurship

6. Lanjut ke bagian Footer, Tambahkan Code tersebut ke file index.php dibawah tag <!—end: wrapper --> :

<div id="footer-menu" class="hidden-tablet hidden-phone">  <div class="container">

<div class="row"></div>

</div> </div>

<div id="footer">  <div class="container">

<div class="row">

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

 <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:[email protected]">[email protected]</a>

</div> 

<div class="span6"><h3>Follow Us!</h3>

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

Cyberpreneurship

</div></div>

</div> </div>

<div id="copyright">  <div class="container"> <p>Copyright © <a href="#">Distro Pangkalpinang 2017</a></p>

</div> </div>

Cyberpreneurship€¦ · Web viewCyberpreneurship membuat website . e-commerce. Oleh :...

Documents

Transcript of Cyberpreneurship€¦ · Web viewCyberpreneurship membuat website . e-commerce. Oleh :...