Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap

08.32
A+ A- Print Email
Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap


Kali ini Cuma Coder akan membahasa tutorial Membuat Tampilan Codeigniter Dengan Bootstrap . Untuk yang belum tahu apa itu Bootstap, Bootstrap adalah front-end framework yang  bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Dengan bootstap kita dapan membangun web dengan tampilan responsif. Sehingga web yang kita buat dengan bootstap bisa menyesuaikan secara otomatis dengan layar gadget. Untuk membuat tampilan codeigniter dengan bootstap sangatlah mudah. Yang kita butuhkan hanyalah CSS dan Jquery Bootstap yang dapat didownload langsung di web resminya Bootstrap .


Dalam tutorial ini kita sebaiknya mengatur url codeigniter seperti yang ada di artikel cuma coder yang berjudul Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3) . 

Untuk membuat tampilan codeigniter dengan bootstap kita hanya meload css beserta javascript bootstrap yang telah kita download. Untuk peletakan file css dan javascript bootstrap bisa kita buat didalam folder assets pada folder project codeigniter kita. contohnya seperti skema dibawah ini.

ci_bootstrap/
|-- application/ 
|-- assets/ 
|---- css/ 
|------ bootstrap.min.css 
|------ style.css 
|---- js/ 
|------ bootstrap.min.js 
|------ jquery.min.js 
|---- fonts/ 
|------ glyphicons-halflings-regular.eot 
|------ glyphicons-halflings-regular.svg 
|------ glyphicons-halflings-regular.ttf 
|------ glyphicons-halflings-regular.woff
|------ glyphicons-halflings-regular.woff2 
|-- system/ 
|-- index.php 
|-- .htaccess


Untuk template bisa kita gunakan contoh yang ada di http://getbootstrap.com/getting-started/#examples . Untuk tampilan bootstrap kita akan membuat tiga buah file view yaitu 
1. home.php ( Tampilan untuk isi konten )
2. header.php ( Tampilan untuk header dan juga untuk meload css beserta javascript bootstrap)
3. footer.php ( Tampilan footer)

Silahkan buat juga controller home dengan source code seperti dibawah ini : 

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Home extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
 
 
    /**
     * Cotoh penggunaan bootstrap pada codeigniter::index()
     */
    public function index()
    {
        $this->load->view('home');
    }
}
 
# nama file home.php
# folder apllication/controller/

Source code home.php : 

<? $this->load->view('header');?>
 
    <div class="container">
 
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Membuat Tampilan CodeIgniter Dengan Bootstrap</h1>
        <p></p>
        <p></p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
 
    </div> <!-- /container -->
<? $this->load->view('footer');?>

Source code header.php : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title>CodeIgniter dengan Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>
 
  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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="#">Cuma Coder</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="#about"><i class="glyphicon glyphicon-info-sign"></i> About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Source code footer.php : 

    <!-- Bootstrap core and JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?=base_url()?>assets/js/jquery.min.js"></script>
    <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
  </body>
</html>
Jadi kesimpulannya kita hanya meload css dan javascript bootstrap untuk membuat tampilan codeigniter dengan bootstrap. Semoga tutorial ini bermanfaat.










Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap


Kali ini Cuma Coder akan membahasa tutorial Membuat Tampilan Codeigniter Dengan Bootstrap . Untuk yang belum tahu apa itu Bootstap, Bootstrap adalah front-end framework yang  bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Dengan bootstap kita dapan membangun web dengan tampilan responsif. Sehingga web yang kita buat dengan bootstap bisa menyesuaikan secara otomatis dengan layar gadget. Untuk membuat tampilan codeigniter dengan bootstap sangatlah mudah. Yang kita butuhkan hanyalah CSS dan Jquery Bootstap yang dapat didownload langsung di web resminya Bootstrap .


Dalam tutorial ini kita sebaiknya mengatur url codeigniter seperti yang ada di artikel cuma coder yang berjudul Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3) . 

Untuk membuat tampilan codeigniter dengan bootstap kita hanya meload css beserta javascript bootstrap yang telah kita download. Untuk peletakan file css dan javascript bootstrap bisa kita buat didalam folder assets pada folder project codeigniter kita. contohnya seperti skema dibawah ini.

ci_bootstrap/
|-- application/ 
|-- assets/ 
|---- css/ 
|------ bootstrap.min.css 
|------ style.css 
|---- js/ 
|------ bootstrap.min.js 
|------ jquery.min.js 
|---- fonts/ 
|------ glyphicons-halflings-regular.eot 
|------ glyphicons-halflings-regular.svg 
|------ glyphicons-halflings-regular.ttf 
|------ glyphicons-halflings-regular.woff
|------ glyphicons-halflings-regular.woff2 
|-- system/ 
|-- index.php 
|-- .htaccess


Untuk template bisa kita gunakan contoh yang ada di http://getbootstrap.com/getting-started/#examples . Untuk tampilan bootstrap kita akan membuat tiga buah file view yaitu 
1. home.php ( Tampilan untuk isi konten )
2. header.php ( Tampilan untuk header dan juga untuk meload css beserta javascript bootstrap)
3. footer.php ( Tampilan footer)

Silahkan buat juga controller home dengan source code seperti dibawah ini : 

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Home extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
 
 
    /**
     * Cotoh penggunaan bootstrap pada codeigniter::index()
     */
    public function index()
    {
        $this->load->view('home');
    }
}
 
# nama file home.php
# folder apllication/controller/

Source code home.php : 

<? $this->load->view('header');?>
 
    <div class="container">
 
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Membuat Tampilan CodeIgniter Dengan Bootstrap</h1>
        <p></p>
        <p></p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
 
    </div> <!-- /container -->
<? $this->load->view('footer');?>

Source code header.php : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title>CodeIgniter dengan Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>
 
  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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="#">Cuma Coder</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="#about"><i class="glyphicon glyphicon-info-sign"></i> About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Source code footer.php : 

    <!-- Bootstrap core and JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?=base_url()?>assets/js/jquery.min.js"></script>
    <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
  </body>
</html>
Jadi kesimpulannya kita hanya meload css dan javascript bootstrap untuk membuat tampilan codeigniter dengan bootstrap. Semoga tutorial ini bermanfaat.



















Label:
,

















Posting Komentar






































        

      









Langganan:
Posting Komentar (Atom)
















































Author Name






















Formulir Kontak









Nama





Email
*





Pesan
*


































Diberdayakan oleh Blogger.