Melanjutkan belajar membuat website menggunakan CodeIgniter atau CI bagian ke 2. Sebelum ke tahap ini diharapkan sudah mencoba belajar pada CodeIgniter Untuk Membuat Website (bag1) tutorial sebelumnya.
Siapkan template untuk tampilan website toko online yang akan dibuat.
Link download template1 Disini
Link download template2 Disini
Implementasikan template yang sudah didownload. Ekstrak file templateTokoOnline.zip. Buka folder templateTokoOnline. Copy kan folder “shop-cart” ke folder XAMPP/htdocs. Buka browser ketikkan url http://localhost/shop-cart
Integrasi template dengan CodeIgniter
– Buka folder “shop-cart” template
– Copy folder assets, style.css, favicon.ico ke dalam folder CodeIginiter “toko_online
Sekarang fokus ke folder project “toko_online“
– Buka folder “application”
– Buka folder “config”
– Buka file “config.php“
– Ubah $config[‘base_url’] = ”; menjadi $config[‘base_url’] = ‘http://localhost/toko_online/‘
– Buka file “routes.php”
– Ubah $route[‘default_controller’] = “home”
– Copykan file “index.html” dengan mengganti nama menjadi “home.php” yang ada dalam folder template “shop-cart” ke dalam folder “view” yang ada dalam folder “toko_online/application“
– Masuk ke folder “application/controllers“
– Buat file “home.php“
– Ketikkan coding berikut :
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index() {
$this->load->view('home');
}
}
Jalankan kembali dibrowser dengan url “http://localhost/toko_online“
Jika berhasil maka ketika dijalankan akan tampil sesuai screenshoot diatas.
Selanjutnya mengatur konfigurasi url.
– Buka folder “application/config“
– Buka file “autoload.php“
– Ubah menjadi $autoload[‘helper’] = array(‘url’);
Memisahkan antara header, body, footer pada view.
– Masuk ke folder view
– Buka file home.php
– Ubah coding home.php seperti berikut :
<!DOCTYPE html> <html lang="en"> <?php require_once 'req_header.php';?> <body> <!-- Upper Header Section --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="topNav"> <div class="container"> <div class="alignR"> <div class="pull-left socialNw"> <a href="#"><span class="icon-twitter"></span></a> <a href="#"><span class="icon-facebook"></span></a> <a href="#"><span class="icon-youtube"></span></a> <a href="#"><span class="icon-tumblr"></span></a> </div> <a class="active" href="<?php echo base_url();?>index.php/home"> <span class="icon-home"></span> Home</a> <a href="#"><span class="icon-user"></span> My Account</a> <a href="register.html"><span class="icon-edit"></span> Free Register </a> <a href="contact.html"><span class="icon-envelope"></span> Contact us</a> <a href="cart.html"><span class="icon-shopping-cart"></span> 2 Item(s) - <span class="badge badge-warning"> $448.42</span></a> </div> </div> </div> </div> <!-- Lower Header Section --> <div class="container"> <div id="gototop"> </div> <header id="header"> <div class="row"> <div class="span4"> <h1> <a class="logo" href="<?php echo base_url();?>index.php/home"><span>Toko Online | BelajarAplikasi</span> <img src="<?php echo base_url();?>assets/img/logo-bootstrap-shoping-cart.png" alt="toko online"> </a> </h1> </div> <div class="span4"></div> <div class="span4 alignR"> <strong> Support (24/7) : 0800 1234 678 </strong> <span class="btn btn-mini">[ 2 ] <span class="icon-shopping-cart"></span></span> <span class="btn btn-warning btn-mini">$</span> <span class="btn btn-mini">£</span> <span class="btn btn-mini">€</span> </div> </div> </header> <!-- Navigation Bar Section --> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="<?php echo base_url();?>index.php/home">Home </a></li> <li class=""><a href="list-view.html">List View</a></li> <li class=""><a href="grid-view.html">Grid View</a></li> <li class=""><a href="three-col.html">Three Column</a></li> <li class=""><a href="four-col.html">Four Column</a></li> <li class=""><a href="general.html">General Content</a></li> </ul> <form action="#" class="navbar-search pull-left"> <input type="text" placeholder="Search" class="search-query span2"> </form> <ul class="nav pull-right"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="icon-lock"></span> Login <b class="caret"></b></a> <div class="dropdown-menu"> <form class="form-horizontal loginFrm"> <div class="control-group"> <input type="text" class="span2" id="inputEmail" placeholder="Email"> </div> <div class="control-group"> <input type="password" class="span2" id="inputPassword" placeholder="Password"> </div> <div class="control-group"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="shopBtn btn-block">Sign in</button> </div> </form> </div> </li> </ul> </div> </div> </div> </div> <!-- Body Section --> <div class="row"> <div id="sidebar" class="span3"> <div class="well well-small"> <ul class="nav nav-list"> <li><a href="products.html"><span class="icon-chevron-right"></span>Fashion</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Watches</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Fine Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Fashion Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Engagement & Wedding</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Men's Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Vintage & Antique</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Loose Diamonds </a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Loose Beads</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>See All Jewelry & Watches</a></li> <li style="border:0"> </li> <li><a class="totalInCart" href="cart.html"><strong>Total Amount <span class="badge badge-warning pull-right" style="line-height:18px;">$448.42</span></strong></a></li> </ul> </div> <div class="well well-small alert alert-warning cntr"> <h2>50% Discount</h2> only valid for online order. <a class="defaultBtn" href="#">Click here </a> </div> <div class="well well-small" ><a href="#"><img src="<?php echo base_url();?>assets/img/paypal.jpg" alt="payment method paypal"></a></div> <a class="shopBtn btn-block" href="#">Upcoming products <small>Click to view</small></a> <ul class="nav nav-list promowrapper"> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/bootstrap-ecommerce-templates.png" alt="bootstrap ecommerce templates"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> <li style="border:0"> </li> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/shopping-cart-template.png" alt="shopping cart template"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> <li style="border:0"> </li> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/bootstrap-template.png" alt="bootstrap template"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> </ul> </div> <div class="span9"> <div class="well np"> <div id="myCarousel" class="carousel slide homCar"> <div class="carousel-inner"> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/bootstrap_free-ecommerce.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Bootstrap shopping cart</h4> <span>Very clean simple to use</span> </div> </div> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/carousel1.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Bootstrap Ecommerce template</h4> <span>Highly Google seo friendly</span> </div> </div> <div class="item active"> <img style="width:100%" src="<?php echo base_url();?>assets/img/carousel3.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Twitter Bootstrap cart</h4> <span>Very easy to integrate and expand.</span> </div> </div> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/bootstrap-templates.png" alt="bootstrap templates"> <div class="carousel-caption"> <h4>Bootstrap templates integration</h4> <span>Compitable to many more opensource cart</span> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div> </div> <!-- New Products --> <div class="well well-small"> <h3>New Products </h3> <hr class="soften"/> <div class="row-fluid"> <div id="newProductCar" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/bootstrap-ring.png" alt="bootstrap-ring"></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/i.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/g.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/s.png" alt=""></a> </div> </li> </ul> </div> <div class="item"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/i.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/f.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/h.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/j.jpg" alt=""></a> </div> </li> </ul> </div> </div> <a class="left carousel-control" href="#newProductCar" data-slide="prev">‹</a> <a class="right carousel-control" href="#newProductCar" data-slide="next">›</a> </div> </div> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/b.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <div class="actionList"> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/c.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <div class="actionList"> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/a.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </li> </ul> </div> </div> <!-- Featured Products --> <div class="well well-small"> <h3><a class="btn btn-mini pull-right" href="products.html" title="View more">VIew More<span class="icon-plus"></span></a> Featured Products </h3> <hr class="soften"/> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/d.jpg" alt=""></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/e.jpg" alt=""></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/f.jpg" alt=""/></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> </ul> </div> </div> <div class="well well-small"> <a class="btn btn-mini pull-right" href="#">View more <span class="icon-plus"></span></a> Popular Products </div> <hr> <div class="well well-small"> <a class="btn btn-mini pull-right" href="#">View more <span class="icon-plus"></span></a> Best selling Products </div> </div> </div> <!-- Clients --> <section class="our_client"> <hr class="soften"/> <h4 class="title cntr"><span class="text">Manufactures</span></h4> <hr class="soften"/> <div class="row"> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/1.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/2.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/3.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/4.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/5.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/6.png"></a> </div> </div> </section> <div class="row"> <div id="sidebar" class="span3"> <div class="well well-small"> <ul class="nav nav-list"> <li><a href="products.html"><span class="icon-chevron-right"></span>Fashion</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Watches</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Fine Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Fashion Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Engagement & Wedding</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Men's Jewelry</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Vintage & Antique</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Loose Diamonds </a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>Loose Beads</a></li> <li><a href="products.html"><span class="icon-chevron-right"></span>See All Jewelry & Watches</a></li> <li style="border:0"> </li> <li> <a class="totalInCart" href="cart.html"><strong>Total Amount <span class="badge badge-warning pull-right" style="line-height:18px;">$448.42</span></strong></a></li> </ul> </div> <div class="well well-small alert alert-warning cntr"> <h2>50% Discount</h2> only valid for online order. <a class="defaultBtn" href="#">Click here </a> </div> <div class="well well-small" ><a href="#"><img src="<?php echo base_url();?>assets/img/paypal.jpg" alt="payment method paypal"></a></div> <a class="shopBtn btn-block" href="#">Upcoming products <small>Click to view</small></a> <ul class="nav nav-list promowrapper"> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/bootstrap-ecommerce-templates.png" alt="bootstrap ecommerce templates"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> <li style="border:0"> </li> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/shopping-cart-template.png" alt="shopping cart template"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> <li style="border:0"> </li> <li> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <img src="<?php echo base_url();?>assets/img/bootstrap-template.png" alt="bootstrap template"> <div class="caption"> <h4><a class="defaultBtn" href="product_details.html">VIEW</a> <span class="pull-right">$22.00</span></h4> </div> </div> </li> </ul> </div> <div class="span9"> <div class="well np"> <div id="myCarousel" class="carousel slide homCar"> <div class="carousel-inner"> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/bootstrap_free-ecommerce.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Bootstrap shopping cart</h4> <span>Very clean simple to use</span> </div> </div> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/carousel1.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Bootstrap Ecommerce template</h4> <span>Highly Google seo friendly</span> </div> </div> <div class="item active"> <img style="width:100%" src="<?php echo base_url();?>assets/img/carousel3.png" alt="bootstrap ecommerce templates"> <div class="carousel-caption"> <h4>Twitter Bootstrap cart</h4> <span>Very easy to integrate and expand.</span> </div> </div> <div class="item"> <img style="width:100%" src="<?php echo base_url();?>assets/img/bootstrap-templates.png" alt="bootstrap templates"> <div class="carousel-caption"> <h4>Bootstrap templates integration</h4> <span>Compitable to many more opensource cart</span> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div> </div> <!-- New Products --> <div class="well well-small"> <h3>New Products </h3> <hr class="soften"/> <div class="row-fluid"> <div id="newProductCar" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/bootstrap-ring.png" alt="bootstrap-ring"></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/i.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="#" class="tag"></a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/g.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/s.png" alt=""></a> </div> </li> </ul> </div> <div class="item"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/i.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/f.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/h.jpg" alt=""></a> </div> </li> <li class="span3"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/j.jpg" alt=""></a> </div> </li> </ul> </div> </div> <a class="left carousel-control" href="#newProductCar" data-slide="prev">‹</a> <a class="right carousel-control" href="#newProductCar" data-slide="next">›</a> </div> </div> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/b.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <div class="actionList"> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/c.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <div class="actionList"> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/a.jpg" alt=""></a> <div class="caption cntr"> Manicure & Pedicure <strong> $22.00</strong> <h4><a class="shopBtn" href="#" title="add to cart"> Add to cart </a></h4> <div class="actionList"> <a class="pull-left" href="#">Add to Wish List </a> <a class="pull-left" href="#"> Add to Compare </a> </div> <br class="clr"> </div> </div> </li> </ul> </div> </div> <!-- Featured Products --> <div class="well well-small"> <h3><a class="btn btn-mini pull-right" href="products.html" title="View more">VIew More<span class="icon-plus"></span></a> Featured Products </h3> <hr class="soften"/> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/d.jpg" alt=""></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/e.jpg" alt=""></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <a class="zoomTool" href="product_details.html" title="add to cart"><span class="icon-search"></span> QUICK VIEW</a> <a href="product_details.html"><img src="<?php echo base_url();?>assets/img/f.jpg" alt=""/></a> <div class="caption"> <h5>Manicure & Pedicure</h5> <h4> <a class="defaultBtn" href="product_details.html" title="Click to view"><span class="icon-zoom-in"></span></a> <a class="shopBtn" href="#" title="add to cart"><span class="icon-plus"></span></a> <span class="pull-right">$22.00</span> </h4> </div> </div> </li> </ul> </div> </div> <div class="well well-small"> <a class="btn btn-mini pull-right" href="#">View more <span class="icon-plus"></span></a> Popular Products </div> <hr> <div class="well well-small"> <a class="btn btn-mini pull-right" href="#">View more <span class="icon-plus"></span></a> Best selling Products </div> </div> </div> <!-- Clients --> <section class="our_client"> <hr class="soften"/> <h4 class="title cntr"><span class="text">Manufactures</span></h4> <hr class="soften"/> <div class="row"> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/1.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/2.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/3.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/4.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/5.png"></a> </div> <div class="span2"> <a href="#"><img alt="" src="<?php echo base_url();?>assets/img/6.png"></a> </div> </div> </section> <?php require_once 'req_footer.php';?> </body> </html>
– Buat file “req_header.php”
– Ketikkan coding seperti berikut :
<head> <meta charset="utf-8"> <title>Toko Online | BelajarAplikasi</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Bootstrap styles --> <link href="<?php echo base_url();?>assets/css/bootstrap.css" rel="stylesheet"/> <!-- Customize styles --> <link href="<?php echo base_url();?>style.css" rel="stylesheet"/> <!-- font awesome styles --> <link href="<?php echo base_url();?>assets/font-awesome/css/font-awesome.css" rel="stylesheet"> <!--[if IE 7]> <link href="css/font-awesome-ie7.min.css" rel="stylesheet"> <![endif]--> <!--[if lt IE 9]> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shim.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <![endif]--> <!-- Favicons --> <link rel="shortcut icon" href="<?php echo base_url();?>assets/ico/favicon.ico"> </head>
– Buat file “req_footer.php“
– Ketikkan coding berikut ini :
<!--Footer--> <footer class="footer"> <div class="row-fluid"> <div class="span2"> <h5>Your Account</h5> <a href="#">YOUR ACCOUNT</a> <a href="#">PERSONAL INFORMATION</a> <a href="#">ADDRESSES</a> <a href="#">DISCOUNT</a> <a href="#">ORDER HISTORY</a> </div> <div class="span2"> <h5>Iinformation</h5> <a href="contact.html">CONTACT</a> <a href="#">SITEMAP</a> <a href="#">LEGAL NOTICE</a> <a href="#">TERMS AND CONDITIONS</a> <a href="#">ABOUT US</a> </div> <div class="span2"> <h5>Our Offer</h5> <a href="#">NEW PRODUCTS</a> <a href="#">TOP SELLERS</a> <a href="#">SPECIALS</a> <a href="#">MANUFACTURERS</a> <a href="#">SUPPLIERS</a> </div> <div class="span6"> <h5>The standard chunk of Lorem</h5> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </div> </div> </footer> </div> <!-- /container --> <div class="copyright"> <div class="container"> <a href="#"><img src="<?php echo base_url();?>assets/img/maestro.png" alt="payment"></a> <a href="#"><img src="<?php echo base_url();?>assets/img/mc.png" alt="payment"></a> <a href="#"><img src="<?php echo base_url();?>assets/img/pp.png" alt="payment"></a> <a href="#"><img src="<?php echo base_url();?>assets/img/visa.png" alt="payment"></a> <a href="#"><img src="<?php echo base_url();?>assets/img/disc.png" alt="payment"></a> <span>Copyright © 2013 bootstrap ecommerce shopping template</span> </div> </div> <a href="#" class="gotop"><i class="icon-double-angle-up"></i></a> <!-- Placed at the end of the document so the pages load faster --> <script src="<?php echo base_url();?>assets/js/jquery.js"></script> <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> <script src="<?php echo base_url();?>assets/js/jquery.easing-1.3.min.js"></script> <script src="<?php echo base_url();?>assets/js/jquery.scrollTo-1.4.3.1-min.js"></script> <script src="<?php echo base_url();?>assets/js/shop.js"></script>
Jalankan kembali toko_online menggunakan CodeIginiter pada browser “http://localhost/toko_online“
nb : base_url() -> digunakan untuk pemanggilan url yang ada pada konfigurasi config.php.
Lakukan hal yang sama untuk semua template yang ada. Selamat mencoba ketemu lagi untuk konfigurasi database pada Belajar Membuat Website dengan CI (bag 3) selanjutnya. Selamat mencoba, Happy Coding 🙂
Hanya seorang yang suka ngoding terutama website
Permisi, mau tanya, saya sudah mencoba sesuai pelajaran 1 dan 2, setelah saya jalankan bisa. Tetapi saat mengerjakan pelajaran ke 3, terjadi eror sebagai berikut:
1. Notice: use of underfined constant core-assumed ‘core’ in D:\xampp\htdocs\Toko_Online\index.php on line 315
2. Notice: use of underfined constant Toko_Online-assumed ‘Toko_Online’ in D:\xampp\htdocs\Toko_Online\index.php on line 315
3. Warning: division by zero in D:\xampp\htdocs\Toko_Online\index.php on line 315
4. Notice: use of underfined constant php-assumed ‘php’ in D:\xampp\htdocs\Toko_Online\index.php on line 315
5. Warning: require_once(): failed opening required ‘BASEPATHphp’ (include_path=’D:\xampp\php\PEAR’) in D:\xampp\htdocs\Toko_Online\index.php on line 315
6. Fatal error: require_once(): failed opening required ‘BASEPATHphp’ (include_path=’D:\xampp\php\PEAR’) in D:\xampp\htdocs\Toko_Online\index.php on line 315
Mohon bantuannya. Terima kasih
apakah database sudah terkoneksi dengan baik ? coba pastikan terlebih dahulu mysql connection database.
mungkin untuk detail message error bisa di screenshot.
makasih sudah berkunjung 🙂
bagian 3 apa sudah dihapus ya linknya?
masih, ini link nya, belajar ci bag 3
makasih sudah berkunjung 🙂
pada tahap
– Masuk ke folder “application/controllers“
– Buat file “home.php“
– Ketikkan coding berikut :
masuk
http://localhost/toko_online/
terjadi error seperti di bawah ini:
Parse error: syntax error, unexpected variable “$config” in C:\xampp\htdocs\toko_online\application\config\config.php on line 38
Parse error: syntax error, unexpected variable “$config” in C:\xampp\htdocs\toko_online\application\config\config.php on line 38
ini kenapa ya???mohon pencerahannya
terimakasih