Kategori Random

Membuat tampilan CodeIgniter dengan Bootstrap

Posted : 08 Februari 2015 | 16:16:26 , Dibaca 58815 kali

Kembali lagi dengan tutorial diblog saya, kali ini kita akan membahas penggabungan bootstrap dengan codeigniter. Pada artikel sebelumnya kita telah membuat sebuah project baru di codeigniter jika belum baca silakan baca : Memulai Project Pertama di Framework CodeIgniter dan  Memulai Project Pertama di Framework CodeIgniter : Part II baca juga mengenai bootstrap di link ini Mengenal lebih jauh twitter bootstrap baik mari kita mulai saja ke topik bahasan kita.

Langkah awal kita sediakan segala file pendukung untuk project kita

  1. Bootstrap
  2. JQuery
  3. CodeIgniter

Untuk tampilan bootstrap kita bisa lihat beberap templatenya di website bootstrap nya bisa lihat disini : http://getbootstrap.com/getting-started/#examples ada beberapa jenis template yang telah disediakan oleh bootstrap tinggal kita pilih salah satu aja.

Contoh Template di Website Boostrap

Tinggal klik aja salah satu templatenya trus setelah kebuka View Page Source, pada tutorial kali ini saya ambil contoh yang Static top navbar dan code seperti dibawah ini.

<!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="">
    <link rel="icon" href="../../favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-static-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">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>


    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Nah sekarang kita akan gabungkan code diatas dengan codeigniter kita pecah semua bagian-bagian dan foldernya. Struktur foldernya dapat dilihat seperti 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

buat controllernya dan simpan di folder application/controllers/ beri nama home.php, skrip codenya 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('vhome',$data);
	}
}

# nama file home.php
# folder apllication/controller/

Kemudian buat file view nya beri nama vhome.php simpan di folder application/views/ code skripnya yang diatas sedikit kita modif dan buat seperti dibawah ini :

<? $this->load->view('header');?>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</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');?>

pada skrip diatas terdapat dua file include views yaitu header dan footer, mengapa saya buat seperti itu agar pemanggilannya lebih mudah dan skrip terlihat lebih rapi saja. Jika suatu saat kita akan menambah sebuah halaman kita tinggal include kan file view ini, nah tambah kedua file tersebut seperti code dibawah ini dan simpan di folder application/views/

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="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="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="#">CI-Bootstrap</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>

footer.php

    <!-- Bootstrap core and JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

bagaimana sampai kesini masih bisa kan, jika langkah demi langkah dijalankan dengan benar maka kita sekarang tinggal ngetes skripnya apakah jalan atau tidak. Jalankan dibrowser http://localhost/ci_bootstrap/home dan hasilnya akan tampil seperti dibawah ini

Gambar tampilan akhir

Demikian tutorial kali ini semoga bermanfaat. :D
Tetap semangat untuk belajar

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 648 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 1184 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 3949 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 7550 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 2066 hits )