Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

28 May 2017 | Tags: , , , ,


Apabila kita mengunjungi halaman website, kita akan melihat tata letak atau layout yang konsisten pada tiap halamannya. Struktur menu, warna, jenis font selalu sama pada setiap halaman. Yang berbeda mungkin konten yang disajikan berbeda-beda. Layout merupakan salah satu identitas dari website sehingga konsistensi tiap halaman sangat diperlukan. Agar bisa menjaga konsistensi tersebut kita memerlukan tempate dari website. Kali ini kita akan membahas cara membuat template web dengan CodeIgniter dan Bootstrap.

Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

Teknik yang kita gunakan untuk membuat template adalah teknik split, seperti pembuatan theme di WordPress. Sederhananya kita membuat halaman web template secara utuh, kemudian kita bagi menjadi beberapa bagian. Pada contoh Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap, kita membaginya menjadi bagian header dan footer saja, biar lebih mudah dipahami.

Pada pembahasan kali ini kami mengasumsikan anda sudah mengerti konsep framework CodeIgniter dan Bootstrap. Jika belum silahkan mempelajari tutorialnya pada website tersebut atau di W3School dan Tutorial Republic.

Langkah-Langkah Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

1. Donwload Bootstrap
Download Bootsrap  situs http://getbootstrap.com/getting-started/,  kemudian anda extract sehingga terdapat folder bootsrap yang didalamnya berisi sub folder: css, fonts, dan js.

2. Donwload CodeIgniter
Download CodeIgniter versi dari situs https://www.codeigniter.com/ (pada materi ini menggunakan versi 3.1.4). Kemudian anda extract sehingga menghasilkan struktur file bootstrap secara utuh. Kemudian pindahkan codeigniter ke web root anda (folder tempat menaruh file-file PHP).

3. Buat Folder Assets
Setelah anda memindahkan file CodeIgniter ke web root, buat folder baru dengan nama assets (bisa dengan nama lain) dalam codeigniter yang posisinya sejajar dengan folder application, system  . Kemudian pindahkan folder bootstrap kedalam folder Assets. Sehingga strukturnya menjadi seperti gambar dibawah ini:

Struktur Folder Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

Dimana saya bisa mendapatkan file selain bootstrap seperti tampak diatas? Tenang, semua file tersebut bisa anda dapatkan mengunjungi contoh template bootstrap di http://getbootstrap.com/getting-started/#examples. Anda tinggal buka salah satu contohnya dan lihat source code html-nya untuk mendapatkan file-file pendukungnya. Untuk file Jquery, bisa cari di google.

4. Ubah Config
Ubah file application->config->config.php, cari $config[‘base_url’] dan isikan nilainya dengan nama folder aplikasi yang anda buat.

$config['base_url'] = 'http://localhost/simpak/';

5. Ubah Routes
Ubah file application->config->routes.php, cari $route[‘default_controller’] dan isikan nilainya dengan nama controller yang akan menjadi defaulnya.

$route['default_controller'] = 'front';

Nilai ini maksudnya controller yang menjadi default dari aplikasi adalah front.

6. Buat Controller Front
Seperti yang kita bahas pada routes, kita akan membuat controller front. Controller ini untuk mengatur halaman web nantinya. Silahkan buat controller front di: application->controller->Front.php. Adapun isinya adalah:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Front extends CI_Controller {

	/**
	 * Front Controller.
	 * by: Komang.My.ID
	 */
	public function index()
		{
			$this->load->view('themes/header');
			$this->load->view('pages/home');
			$this->load->view('themes/footer');
		}
	public function why()
		{
			$this->load->view('themes/header');
			$this->load->view('pages/why');
			$this->load->view('themes/footer');
		}		
	public function services()
		{
			$this->load->view('themes/header');
			$this->load->view('pages/services');
			$this->load->view('themes/footer');
		}		
	public function about()
		{
			$this->load->view('themes/header');
			$this->load->view('pages/about');
			$this->load->view('themes/footer');
		}	
	public function contact()
		{
			$this->load->view('themes/header');
			$this->load->view('pages/contact');
			$this->load->view('themes/footer');
		}		
}

6. Buat Template
Seperti yang kita bahas diawal, kita akan menggunakan teknik split seperti theme wordpress dengan membagi template menjadi bagian header dan footer.

Untuk membuat template, anda bisa memilih salah satu contoh di http://getbootstrap.com/getting-started/#examples, kemudian anda tinggal mengganti path file css dan js-nya. Misalnya:

<link href=”../../dist/css/bootstrap.min.css” rel=”stylesheet“>

diganti dengan

<link href=”<?php echo base_url()?>assets/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

Halaman Template Full

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Simple Template with CodeIgniter & Bootstrap</title>
	<link href="<?php echo base_url()?>assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">    
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="<?php echo base_url()?>assets/asie/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<?php echo base_url()?>assets/custom.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="<?php echo base_url()?>assets/asie/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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-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="#">MyComp.INC</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="<?php echo base_url()?>"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="<?php echo base_url()?>front/why"><i class="glyphicon glyphicon-tasks"></i> Why</a></li>
            <li><a href="<?php echo base_url()?>front/services"><i class="glyphicon glyphicon-cog"></i> Services</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-info-sign"></i> Info <span class="caret"></span></a>
              <ul class="dropdown-menu">
              	 <li><a href="<?php echo base_url()?>front/about"><i class="glyphicon glyphicon-user"></i> About</a></li>
                <li><a href="<?php echo base_url()?>front/contact"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
    <!-- Begin containter -->

      <div class="page-header">
        <h1>Judul Halaman</h1>
      </div>
      <p>Isi Halaman</p>

     <!-- End Container -->
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Contoh Template Sederhana dengan CodeIgniter dan Bootstrap. By:Komang.My.ID</p>
      </div>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo base_url()?>assets/jquery/jquery-3.2.1.min.js"></script>
    <script>window.jQuery || document.write('<script src="<?php echo base_url()?>assets/vendor/jquery.min.js"><\/script>')</script>
    <script src="<?php echo base_url()?>assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<?php echo base_url()?>assets/asie/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

6. Split Template
Setelah template full kita buat, sekarang tinggal menjadi menjadi bagian header dan footer saja. Caranya sederhana, tinggal kita potong file template utuh menjadi beberapa bagian. Kemudian file tersebut anda taruh d folder: views-themes

Buat file header.php (application->views->themes->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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Simple Template with CodeIgniter &amp; Bootstrap</title>
	<link href="<?php echo base_url()?>assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">    
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="<?php echo base_url()?>assets/asie/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<?php echo base_url()?>assets/custom.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="<?php echo base_url()?>assets/asie/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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-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="#">MyComp.INC</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="<?php echo base_url()?>"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="<?php echo base_url()?>front/why"><i class="glyphicon glyphicon-tasks"></i> Why</a></li>
            <li><a href="<?php echo base_url()?>front/services"><i class="glyphicon glyphicon-cog"></i> Services</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-info-sign"></i> Info <span class="caret"></span></a>
              <ul class="dropdown-menu">
              	 <li><a href="<?php echo base_url()?>front/about"><i class="glyphicon glyphicon-user"></i> About</a></li>
                <li><a href="<?php echo base_url()?>front/contact"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
<div class="container">

Buat file footer.php (application->views->themes->footer.php)

    </div>
 <footer class="footer">
      <div class="container">
        <p class="text-muted">Contoh Template Sederhana dengan CodeIgniter dan Bootstrap. By:<a href="http://www.komang.my.id"> Komang.My.ID</a></p>
      </div>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo base_url()?>assets/jquery/jquery-3.2.1.min.js"></script>
    <script>window.jQuery || document.write('<script src="<?php echo base_url()?>assets/vendor/jquery.min.js"><\/script>')</script>
    <script src="<?php echo base_url()?>assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<?php echo base_url()?>assets/asie/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

6. Buat Halaman Web
Setelah membuat template-nya, sekarang kita tinggal membuatkan halaman yang akan ditujukan untuk pengunjung nantinya. Semua halaman akan ditempatkan pada folder views->pages

File home.php (application->views->pages->home.php)

<div class="page-header">
        <h1>Like sleeping on a cloud (Sealy)</h1>
      </div>
      <p><strong>Lorem Ipsum </strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

File why.php (application->views->pages->whye.php)

  <div class="page-header">
        <h1>Why Us</h1>
      </div>
<p>
Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti "Bagian isi disini, bagian isi disini", sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat "Lorem Ipsum" akan berujung pada banyak situs web yang masih dalam tahap pengembangan. Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja, kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)
</p>

File services.php (application->views->pages->services.php)

  <div class="page-header">
        <h1>Services</h1>
      </div>
<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;</p>
<h3>Section 1.10.32 of &quot;de Finibus Bonorum et Malorum&quot;, written by Cicero in 45 BC</h3>
<p>&quot;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?&quot;</p>
<h3>1914 translation by H. Rackham</h3>
<p>&quot;But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?&quot;</p>
<h3>Section 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot;, written by Cicero in 45 BC</h3>
<p>&quot;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.&quot;</p>
<h3>1914 translation by H. Rackham</h3>
<p>&quot;On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.&quot;</p>

File about.php (application->views->pages->about.php)

      <div class="page-header">
        <h1>About</h1>
      </div>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section 1.10.32.</p>
      <p>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 &quot;de Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>

    </div>

File contact.php (application->views->pages->contact.php)

  <div class="page-header">
        <h1>Contact Us</h1>
      </div>

<form class="form-horizontal">
 <div class="form-group">
    <label class="control-label col-sm-2" for="fullname">Fullname:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="fullname" placeholder="Enter Full Name">
    </div>
  </div>	
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>

	  <div class="form-group">
    <label class="control-label col-sm-2" for="message">Message:</label>
    <div class="col-sm-10">
      <textarea class="form-control" id="message" placeholder="Enter Message"></textarea>
    </div>
  </div>
 
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Download Template Web dengan CodeIgniter dan Bootstrap

Share via Facebook / Twitter / Google + untuk Download


Komentar via Facebook tentang Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

Komentar tentang Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap

  • Silahkan tulis saran, komentar dan pertanyaan dibawah!

    Your email address will not be published. Required fields are marked *