Assalamualaikum wr. wb. Ketemu lagi dengan saya, pada kesempatan kali ini saya akan menulis tutorial tentang pembuatan Template E-Commerce dengan bootstrap, berhubung ini hanya  sebuah template maka kita hanya akan bermain dilingkungan client side saja (HTML, CSS, Javascript/Jquery) tanpa PHP maupun MySQL, be...

Membuat Template E-Commerce Responsive dengan Bootstrap [Part 1]

Assalamualaikum wr. wb.

Ketemu lagi dengan saya, pada kesempatan kali ini saya akan menulis tutorial tentang pembuatan Template E-Commerce dengan bootstrap, berhubung ini hanya  sebuah template maka kita hanya akan bermain dilingkungan client side saja (HTML, CSS, Javascript/Jquery) tanpa PHP maupun MySQL, berikut penampakannya.

sebelum lanjut ke tutorial berikut saya jelaskan tentang penggunaan grid system pada bootstrap agar nantinya mudah untuk melanjutkan tutorial. bootstrap menggunakan grid system untuk mengatur tata letak element html. sederhanya grid itu adalah kotak-kotak, jadi bootstrap memisahkan tampilan kedalam kotak-kotak. setiap baris terdiri dari 12 kotak/kolom.

contoh.

pada gambar diatas baris pertama memiliki 2 kotak, yaitu kotak col-md-8 dan kotak col-md-4 jumlah total = col-md12, setiap  baris harus memiliki 12 kotak/kolom. kita bebas mengkombinasikan kotak berapa saja yang kita inginkan asalkan jumlah akhir perbaris adalah 12. lihat lagi contoh baris 2, terdapat 3  kotak/kolom yaitu col-md-4 sebanyak 3 jadi  col-md4 x 3 = col-md-12,  kemudian pada baris terakhir, terdapat 2 kotak yaitu col-md-6 sebanyak 2 kotak jadi totalnya col-md-6  x 2 = col-md-12. dan setiap 12 kotak dibungkus oleh class  row.

berikut code dari gambar diatas.

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

kira-kira seperti itu, untuk lebih jelasnya bisa dilihat di situsnya sendiri http://getbootstrap.com/css/.

selanjutnya kita akan mendesain template e-commerce perbaris/row. download dulu perlengkapanya disini, pada tutorial ini saya menggunakan bootstrap yang telah dicostumize dari situs http://bootswatch.com/

ok pertama buat file index.html

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css">
<script src="bootstrap-3.3.4-dist/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- semua code akan diletakkan disini -->

</body>
</html>

includekan semua plugin2nya.
ok mulai, pertama kita buat navbar atau menu bagian atas.

<!-- navbar fixed atas -->
   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed navbar-default" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href='#'><span class="glyphicon glyphicon glyphicon-shopping-cart"><span> Rp. 10.000</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<form class="navbar-form navbar-left">
				<input type="text" class="form-control" style="width:100%;"placeholder="Search...">
			</form>
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Best Produk</a></li>
            <li><a href="#contact">How to buy</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Member <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Login</a></li>
                <li><a href="#">Sign Up</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      </div>
    </nav>
<!-- end off navbar fixed atas -->

hasilnya

selanjutnya kita buat div container sebagai penampung div-div lain, jadi untuk kedepannya semua div akan diletakkan didalam div ini.

<!-- CONTAINER -->
<div class="container">

<!-- letakkan semua code disini -->

</div>
<!-- AKHIR DARI CONTAINER -->

container sudah jadi, sekarang kita akan membuat baris pertama, yaitu bagian logo produk. pada baris ini kita akan menggunakan 1 kotak saja yaitu col-sm-12.

(pada penjelasan diatas saya menggunakancontoh  col-md-*dan untuk penerapan saya menggunakan col-sm-*) apa perbedaan dari md dan sm ?

md dan sm adalah class ukuran layar (md akronim dari Medium Device yaitu layar dengan ukuran(≥992px) sedangakan sm adalah akronim dari Small Device yaitu layar dengan ukuran (≥768px), 

ok lanjut ke tutorial. baris pertama .

<!-- baris pertama -->
<div class='row'>
		<div class='col-sm-12'>
			<img src="gherus.png" class="img-responsive">
		</div>
</div>
<!-- akhir baris pertama -->

hasilnya.

selanjutnya baris kedua, carousel dan tabel keranjang kecil.

<!-- baris kedua -->
	<div class="row">
		<div class="col-sm-8 col-xs-12">
			<div class="panel panel-success">
				<div class="panel-heading"><span class="glyphicon glyphicon-star-empty"></span> Our Produk !</div>
				<div class="panel-body">
				<!-- bootstrap carousel -->
				<div id="myCarousel" class="carousel slide" data-ride="carousel">
					<!-- Carousel indicators -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>   
					<!-- Wrapper for carousel items -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="img/1.jpg">
							<div class="carousel-caption">
							  <h3>Ghebuk </h3>
							  <p>Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  </p>
							</div>
						</div>
						<div class="item">
							<img src="img/2.jpg">
							<div class="carousel-caption">
							  <h3>Rap-Orap</h3>
							  <p>Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  </p>
							</div>
						</div>
						<div class="item">
							<img src="img/3.jpg">
							<div class="carousel-caption">
							  <h3>Krepek Tette</h3>
							  <p>Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  Lorem ipsum dolor sit amet consectetur…
							  </p>
							</div>
						</div>
					</div>
					<!-- Carousel controls -->
					<a class="carousel-control left" href="#myCarousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
					</a>
					<a class="carousel-control right" href="#myCarousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</a>
				</div>
				<!-- end bootsrap carousel -->
				</div><!-- body panel pertama akhirnya -->
			</div>
		</div>
		<div class="col-sm-4 col-xs-12">
		<div class="panel panel-success">
				<div class="panel-heading"><span class="glyphicon glyphicon-shopping-cart"></span> Cart !</div>
				<div class="panel-body"> 
					<table class="table">
						<tr class="success">
							<th>Barang </th>
							<th>Jumlah </th>
						</tr>
						<tr>
							<td>Krupuk</td>
							<td><span class="badge badge-success">2</span></td>
						</tr>
						<tr>
							<td>Nang-nginang</td>
							<td><span class="badge badge-success">5</span></td>
						</tr>
						<tr>
							<td>Ghebuk</td>
							<td><span class="badge badge-success">3</span></td>
						</tr>
						<tr>	
							<td class="success"></td>
							<td class="success"><span class="label label-success">Rp. 10.000 </span></td>
						</tr>
					</table>
					<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal"> View Cart </button>
					<button type="button" class="btn btn-success btn-sm"  >Chek Out </button>
				</div>
			</div>
		</div>
	</div>
<!-- akhir baris kedua -->

 part 1 sampai disini dulu.


About Author

d-newbie

Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi


Comment & Discussions

  • andy hakim
    bagus bangnget ciodingnya ,
    saya mau tanya sedikit , apabila kita buat div di dalam row tidak mengikuti grid system , apakah masih bisa resposive terhadap berbagai device , seperti table dan andoid?

  • d-newbie
    tergantung pengaturan width sama heightnya gan..... bisa asal pake auto atau %


  • BFP
    kok gak bisa didownload ya :(

  • d-newbie
    copy aj scriptnya gan

  • Eros Sutrisno
    permisi.. saya sudah mengikuti prosedur persis seperti tutorial di atas, tetapi hasilnya "gherus.png"-nya berada di belakang fixed nav, tks

  • Please LOGIN before if you want to give the comment.