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.