Pemrograman Web II
Tempalate
Bootsrap Pada CodeIgniter (CI)
Langkah
pertama yang di lakukan adala menjalankan xampp. Kemudian ganti nama folder codeigniter sesuai keinginan anda.
Untuk saya sendiri nama folder-nya saya ganti dengan nama Latihan_2. kemudian copy
kan folder tersebut ke xampp->htdocs. Pada template bootsrap terdapat
folder assets, copy kan folder assets tersebut ke dalam folder Latihan_2 yang telah anda letakan ke dalam direktori
xampp . Selanjutnya
buka/jalankan browser dan ketikan localhost dan nama folder
CodeIgniter yang sudah anda ganti dan sudah anda letakan ke dalam folder xampp.
Misalnya localhost/Latihan_2 .
berikut
ini tampilan utama dari CodeIgniter. 
Kemuidan
buka text editor-nya. Untuk text editor anda bisa menggunakan notepad++,
sublime text. Di sini saya menggunakan sublimetext sebagai text editor-nya.
kemudian masukkan folder tadi ke dalam sublime text. Caranya pada menu bar klik
project->add folder to project.
Seperti tampak pada gambar berikut ini
Pada
application->config buka file config.php, kemudian copy kan link yang ada di
browser tadi, misalkan http://localhost/Latihan_1 ke dalam base-url seperti gambar di bawah ini
Pada folder assets
terdapat file index di mana file tersebut merupakan tampilan/index tempalate
bootsrap yang akan kita gunakan, dan kode yang ada pada file index ini akan
kita copy kan ke dalam file-file yang akan kita buat pada folder view.
Sekarang pada
folder view saya akan membuat file header.php. dan mencopy kan kode yang ada
pada file index tadi.
Perlu anda ingat
bahwa praktikum kali ini saya hanya membahas tentang CV (Controller dan
View) di sini kita hanya akan bermain di
controller dan view, dan ini sangat
dasar sekali pada CodeIgniter. Saya akan membagi tahu tentang pemanggilan
function. Kode yang ada pada file index
tadi akan kita pilah ke dalam tiga bagian file yaitu header content dan footer.
Kemudian akan kita panggil function nya pada controller.
Berikut kode
header
# Header
<!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">
<title> Tampilan Boostrap</title>
<meta name="description" content="Source code generated
using layoutit.com">
<meta name="author" content="LayoutIt!">
<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">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar inverse" role="navigation">
<div
class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a
href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
|
|
|
|
<li
class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-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>
<a href="#">Separated link</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left"
role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">
Submit
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-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>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="carousel slide" id="carousel-322977">
<ol class="carousel-indicators">
<li data-slide-to="0"
data-target="#carousel-322977">
</li>
<li data-slide-to="1" data-target="#carousel-322977"
class="active">
</li>
<li data-slide-to="2"
data-target="#carousel-322977">
</li>
</ol>
<div class="carousel-inner">
<div class="item">
div class="carousel-caption">
</div>
</div>
<div class="item active">
<img alt="Carousel Bootstrap Second" src="<?php echo
base_url (); ?>assets/img/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img alt="Carousel Bootstrap Third" src="<?php echo
base_url (); ?>assets/img/6.jpg">
<div class="carousel-caption">
</div>
</div>
</div> <a class="left carousel-control"
href="#carousel-322977" data-slide="prev"><span
class="glyphicon
glyphicon-chevron-left"></span></a> <a
class="right carousel-control" href="#carousel-322977"
data-slide="next"><span class="glyphicon
glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
|
|
Pada folder config
kita buka file autoload.php dan menambahkan kode url pada $autoload[‘helper’]. Yaitu seperti berikut ini
Karena jika tidak
di tambahnkan url pada autoload nya maka kita tidak dapat memanggil base_url
nya. pada kode di atas kita akan mamanggil base_url nya, jika kita tidak
memanggil base_url maka tampilan tempalte akan seperti berikut ini
Jadi kita harus
memanggil base_url nya agar template nya terlihat rapih. Berikut kode pemanggilannya. Kode base_url nya di letakkan
sebelum kode css. Bisa kita lihat pada gambar di bawah ini.
Tampilan bootsrap
ketika base_url nya di panggil.
Untuk pemanggilan
url gambar kode nya sama seprti di atas, tinggal kita copy kan kode base_url
nya pada gambar yang ingin di panggil. Yaitu seperti ini
# Content
<div
class="row">
<div
class="col-md-6">
<h3>
1. Lorem ipsum dolor sit
amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna.
In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum
velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed
iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id
sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat
lectus, id bibendum diam velit et dui.</em> Proin massa magna,
vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi
erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices
massa, et feugiat ipsum consequat eu.</small>
</p>
</div
<div class="col-md-6">
<h3>
2. Lorem ipsum dolor sit
amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna.
In hac habitasse platea dictumst. eu sem sapien, sed vestibulum velit. Nam
purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere
diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin
consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id
bibendum diam velit .</small>
</p>
</div>
</div>
|
|
Untuk membuat content.php sama seperti cara pembuatan
header.php tadi, yaitu di folder view
buat file baru dengan nama content, dan berikut kode nya
|
|
|
|
|
|
<div
class="row">
<div
class="col-md-12">
<table
class="table">
<thead>
<tr>
<th>
No
</th>
<th
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB – Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
2
</td>
<td>
TB – Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
3
</td>
|
|
|
|
<td>
TB – Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr
<tr class="warning">
<td>
4
</td>
<td>
TB – Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
5
</td>
<td>
TB – Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
</div>
|
|
# Footer
<div
class="row">
<div
class="col-md-12">
<form
role="form">
<div
class="form-group">
<label
for="exampleInputEmail1">
Email
address
</label>
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div
class="form-group">
<label
for="exampleInputPassword1">
Password
</label>
<input type="password" class="form-control"
id="exampleInputPassword1">
</div>
<div
class="form-group">
<label for="exampleInputFile">
File
input
</label>
<input type="file"
id="exampleInputFile">
<p
class="help-block">
Example
block-level help text here.
</p>
</div>
<div class="checkbox">
<label>
<input
type="checkbox">
Check
me out
</label>
</div>
<button type="submit" class="btn btn-default">
Submit
</button>
</form>
</div>
</div>
</div>
</body>
</html>
|
|
Berikut kode untuk footer
Setelah selesai memilah kode yang ada pada
file index, selanjutnya kita akan memanggil function nya, yaitu buka file
welcome.php yang ada pada folder controller dan ketikkan kode berikut ini
<?php
defined('BASEPATH') OR exit('No direct
script access allowed');
class Welcome extends
CI_Controller {
public function latihan()
{
//function
yang di panggil
$this->load->view('header');
$this->load->view('content');
$this->load->view('footer');
}
}
|
|
Berikut output nya
setelah di jalankan.
Sekian dulu yaaa pembahan kita tentang Tempalate
bootsrap.
Tidak ada komentar:
Posting Komentar