Konfigurasi Dasar & Membuat Halaman Beranda (index) – CodeIgniter

`

Pada part 2 ini akan melanjutkan part sebelumnya (cara install framework PHP CodeIgniter + sedikit pengertiannya), setelah berhasil terinstal, tentu kita perlu mengkonfigurasi sebelum CI dapat digunakan.

Selain konfigurasi dasar, saya akan memeberitahukan sedikit tentang memasukkan template HTML ke framework CI ini melalui XAMPP, template HTML yang saya gunakan ini merupakan template yang pernah saya jelaskan di tutorial cara membuat website responsive menggunakan Bootstrap, silahkan ikuti dulu tutorial tersebut, atau siapkan template HTML kamu jika sudah memiliki template HTML sendiri.

Ketika selesai menginstal CI kemarin, saya mengganti nama foldernya menjadi tutorialcirio di folder htdocs, artinya URL yang dapat di akses untuk project ini menjadi localhost/tutorialcirio/. Silahkan kunjungi url sesuai nama folder yang kamu buat, misalnya jika nama foldernya contoh maka url-nya menjadi localhost/contoh/.

Konfigurasi Dasar CodeIgniter

Konfigurasi dasar ini diperlukan sebelum mulai menggunakan CI, supaya lebih nyaman nanti ketika menggunakannya. Apa aja sih yang perlu di konfigurasi di awal ?

autoload.php

Pertama, saya akan menjelaskan file autoload.php. Silahkan buka folder project-nya -> application -> config, Disitu terdapat banyak file yang perlu di konfigurasi, silahkan buka file autoload.php di code editor misalnya Sublime Text atau Atom. Cari $autoload['helper'] = array();kemudian tambahkan ‘url’ dan ‘file’ didalam array, maka menjadi seperti ini: $autoload['helper'] = array('url', 'file');jangan lupa simpan perubahan.

config.php

Selanjutnya adalah file config.php yang berada di folder application -> config, carilah $config['base_url'] = '';kemudian masukkan url sesuai dengan nama project, maka menjadi $config['base_url'] = 'http://localhost/tutorialcirio/';jangan lupa gunakan http.

Catatan: Jika situs web kamu sudah online, kamu dapat merubahnya menjadi url nama domain.

Scroll sedikit kebawah sampai ke bagian $config['index_page'] = 'index.php';lalu hapus index.php didalamnya, maka menjadi $config['index_page'] = '';ini juga merupakan salah satu langkan untuk menghilangkan index.php pada halaman beranda / homepage.

routes.php

Sekarang bukalah file routes.php yang ada di folder application -> config, scroll sampai menemukan $route['default_controller'] = 'welcome';kemudian ubahlah ‘welcome‘ dengan nama controller yang ingin dijadikan sebagai controller bawaan yang dimuat pertama kali (biasanya ini merupakan controller untuk halaman beranda / homepage).

Walaupun sekarang kita belum mebuat controller untuk homepage, ubah aja ‘welcome‘ menjadi ‘home‘ (atau menjadi apapun yang jelas nanti kamu harus membuat controller dengan nama yang disimpan disini, saya contohkan dengan ‘home‘) maka menjadi $route['default_controller'] = 'home';jangan lupa simpan perubahan.

Jadi, ketika sebelumnya disini menggunakan ‘welcome‘ yang artinya akan menampilkan controller ‘welcome‘ sebagai bawaan ketika kamu mengunjungi localhost/tutorialcirio (yaitu menampilkan pesan ‘welcome message‘). Kita akan ganti dengan menampilkan halaman beranda seperti pada umumnya website ketika kita mengunjungi url hompage.

Membuat Controller ‘home

Karena tadi kita sudah merubah default controller dari ‘welcome‘ menjadi ‘home‘, maka sekarang kita perlu membuat controller ‘home‘. Silahkan buat file baru dan simpan di dalam folder application -> controllers dengan nama home.php (atau nama apapun yang kamu inginkan). Sekarang, salin code berikut dan tempelkan di dalam file controller home.php tersebut:

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

class home extends CI_Controller {

   public function index()
   {
      $this->load->view('home');
   }
}

Pastikan kamu merubah ‘home‘ menjadi nama controller yang kamu tentukan tadi di routes.php default controller, misalnya tadi kamu tentukan ‘beranda‘ sebagai default controller di routes.php maka disini pun menjadi class beranda extends CI_Controller{}.

Sedikit penjelasan buat yang belum mengerti, maksud dari controller ini adalah sistem yang akan dibaca ketika mengunjungi halaman index (homepage) karena kita sudah tentukan sebagai default controller jika menemukan halaman homepage. Sebelum diatur seperti ini, kita menampilkan halaman welcome message tapi sekarang kita akan ubah menjadi halaman homepage seperti pada umumnya situs web.

Perhatikan bagian $this->load->view('home');ini artinya controller tersebut akan menampilkan apapun yang ada di file home.php pada folder application -> views. Karena kita belum membuat file nama home.php di folder application -> views, maka sekarang ketika kamu kunjungi url localhost/tutorialcirio pasti belum menampilkan apapun atau hanya menampilkan halaman tidak ditemukan. Gak perlu kahwatir, sekarang kita akan membuatnya.

Membuat Views ‘home.php

Disinilah kita mulai membangun template HTML yang ingin ditampilkan di url tutorialcirio sebagai halaman homepage, karena saya sudah memiliki template HTML yang pernah saya buat di tutorial sebelumnya (cara membuat website responsive menggunakan Bootstrap) maka saya tinggal salin aja template-nya kesini. Kalo kamu belum punya, silahkan ikuti tutorial tersebut atau gunakan template HTML yang kamu miliki.

Sebelum mulai membuat template di home.php, alangkah baiknya kita membuat folder assets terlebih dahulu untuk dijadikan wadah penyimpanan folder CSS dan JS nanti. Ini akan terlihat lebih rapih dan profesional, biasanya orang-orang memberi nama fodernya ‘assets‘ (kamu bisa beri nama sesuai selera). Silahkan buat folder baru di dalam folder project (tutorialcirio) dengan nama assets (pastikan semuanya huruf kecil dan tanpa spasi, karena ini akan menjadi link yang dipanggil sebagai source).

Kemudian buat 2 folder baru lagi didalam folder assets dengan nama css dan js, atau kamu juga bisa sekalian membuat folder images yang nanti akan kita gunakan untuk menyimpan semua gambar yang akan digunakan.

Nah, sekarang mulailah berkarya di home.php yang ada di folder views tadi. Sebetulnya namanya tidak harus home.php juga sih, tapi karena tadi di controller ‘home‘ saya membuatnya $this->load->view('home');maka saya harus membuat file dengan nama home.php di folder views. Tapi jika ingin diganti juga silahkan, pastikan kamu samakan apa yang ditampilkan di code tersebut sama dengan nama file yang ada di folder views (misalnya diganti menjadi $this->load->view('beranda');pastikan kamu membuat file beranda.php di folder views) karena file tersebutlah yang akan di load / di muat.

Sekali lagi, karena saya sudah memiliki template HTML homepage-nya maka saya cukup tempelkan aja template tersebut di home.php 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Tutorial Rio Bermano</title>

    <!-- Bootstrap -->
    <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
    <link href="media/image/fav.png" rel="shortcut icon">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Navigasi &rarr;</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Rio Bermano</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="pages/portfolio.html">Portfolio</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Artikel</a></li>
                <li><a href="#">Download</a></li>
                <li><a href="#">Tutorial</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Terlaris</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Cari...">
            </div>
            <button type="submit" class="btn btn-default">Cari</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Penulis Blog</a></li>
                <li><a href="#">Pekerjaan</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Kustom</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

<div class="container-fluid atas">
  <div class="container">
    <div class="row">
      <div class="col-md-6 text-atas">
        <h1>Contoh Judul</h1>
        <p>rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover. rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover</p>
        <p><a href="https://posciety.com" target="_blank" class="btn btn-default btn-lg">Tombol Nih</a></p>
      </div>
      <div class="col-md-6">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/stsQT6Z8Fzw"></iframe>
        </div>
      </div>
    </div>
  </div>
</div><!-- akhir class atas -->

<div class="container">
  <div class="row">
    <div class="col-sm-12 judul text-center">
      <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img src="media/image/foto/foto1.jpg" class="img-responsive">
    </div>
    <div class="col-md-8">
      <p>Lorem Ipsum 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 Lorem Ipsum 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 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>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="col-sm-12 judul text-center">
    <h1>My Skills</h1>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></h1>
          <h2>Skill 1</h2>
          <p>90%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h1>
          <h2>Skill 2</h2>
          <p>85%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></h1>
          <h2>Skill 3</h2>
          <p>80%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-star" aria-hidden="true"></span></h1>
          <h2>Skill 4</h2>
          <p>75%</p>
        </div>
      </div>
    </div>
  </div><!-- akhir class row skill pertama-->
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span></h1>
          <h2>Skill 1</h2>
          <p>90%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h1>
          <h2>Skill 2</h2>
          <p>85%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-off" aria-hidden="true"></span></h1>
          <h2>Skill 3</h2>
          <p>80%</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body text-center">
          <h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></h1>
          <h2>Skill 4</h2>
          <p>75%</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid myprojects">
  <div class="container">
    <div class="col-sm-12 judul-myprojects text-center">
      <h1>My Projects</h1>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 text-center">
        <button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="col-sm-12 judul-our-services">
    <h2 class="text-center">Our Services</h2>
  </div>
  <div class="col-md-6 col-sm-12 service-kiri">
    <div class="item-service">
      <ul>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-6 col-sm-12 service-kanan">
    <div class="item-service">
      <ul>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
        <li>
          <div class="gambar-item-service">
            <img src="media/image/service/service1.png">
          </div>
          <div class="deskripsi-item-service">
            <p>Lorem Ipsum 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>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div> <!-- AKHIR CONTAINER FLUID OUR SERVICE -->

<div class="container testimonial">
  <div class="row">
    <div class="col-xs-12">
    <h2 class="text-center">Testimonial</h2>
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

  <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 1</h4>
                <p>Lorem Ipsum 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</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 2</h4>
                <p>Lorem Ipsum 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</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 3</h4>
                <p>Lorem Ipsum 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</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 4</h4>
                <p>Lorem Ipsum 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</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Sebelumnya</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Selanjutnya</span>
          </a>
      </div>
    </div>
  </div>
</div>
<!-- akhir .testimonial -->

<!-- Our Partners MD -->
<div class="container our-partners hidden-xs hidden-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/7.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/8.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-md-1">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
  </div>
</div>
<!-- akhir .Our Partners MD -->

<!-- Our Partners XS -->
<div class="container our-partners visible-xs">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
  </div>
</div>
<!-- akhir .Our Partners XS -->

<!-- Our Partners SM -->
<div class="container our-partners visible-sm">
  <div class="col-xs-12 judul-our-services">
    <h2 class="text-center">Our Partners</h2>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img src="media/image/logo-partners/1.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/2.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/3.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/4.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/5.jpg" class="img-responsive">
    </div>
    <div class="col-xs-2">
      <img src="media/image/logo-partners/6.jpg" class="img-responsive">
    </div>
  </div>
</div>
<!-- akhir .Our Partners SM -->

<div class="container-fluid">
  <div class="row copyright text-center">
    <p>All Rights Reserved 2016 | <a href="">Tutorial Rio Bermano</a></p>
  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url(); ?>assets/js/jqueryo.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
  </body>
</html>

Inilah template yang pernah saya buat ketika menjelaskan tentang membuat website responsive dengan Bootstrap, perhatikan pada setiap link / source yang dipanggil terdapat base_url <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">ini tidak berbeda jauh dengan cara memanggil file pada HTML. Tapi karena kita sudah tentukan base_url tadi di config.php maka saya gak perlu repot-repot lagi menulis url full, dan perhatikan juga disitu terdapat /assets/ karena file CSS dan JS yang saya gunakan untuk template ini disimpan di folder assets yang kita sudah buat tadi.

Pokoknya, dimanapun kamu membuat folder assets atau dimanapun kamu menyimpan link eksternal seperti CSS & JS, pastikan kamu memanggilnya dengan benar. Lihat disini cara memanggil file pada HTML (termasuk memanggil file di luar folder localhost / siteroot).

Selesai, sekarang kamu sudah berhasil melakukan konfigurasi dasar dan membuat halaman beranda. Kunjungi url project (localhost/tutorialcirio) di browser untuk melihat hasilnya.

Masih bingung ? Lihat : Video tutorial konfigurasi dasar & membuat homepage CodeIgniter.

Selamat mencoba !

Lihat Post Lainnya:
Komentar
Memuat...