CodeIgniter merupakan
aplikasi sumber terbuka yang berupa framework PHP dengan model MVC(Model, View,
Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter
memudahkan Developer untuk membuat aplikasi web dengan cepat mudah dibandingkan
dengan membuatnya dari awal.
Bootstrap adalah
sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan
web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh
Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open
source dengan lisensi MIT.
baik langsung saja pada pembuatan boostrap, pertama kita
lakukan kita harus mendownload boostrap yang kita ingin jika sudah di download
kemudian file assets copy di folder projek kita.
disini kita akan memisahkan file html atau boostrap menjadi
satu.
berikut gambar dari
file assets:
Buka text editor kemudian buka projek codeigniter.
kemudian buat file header di VIEW dengan cara klik kanan new file terus buka file index.html di folder assets.
pada gambar di atas saya hanya menggcopy coding untuk menu di file header kemudian simpan dengan header.php
Berikut scrip untuk file 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">
<title>Bootstrap 3, from LayoutIt!</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>
kemudia buat file content di VIEW, di conten ini saya menambahkan code untuk slide show yg ada pada boostrap.
berikut codingnya:
<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">
<img alt="Carousel Bootstrap First" src="<?php echo base_url ();?>assets/img/2.jpg">
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item active">
<img alt="Carousel Bootstrap Second" src="<?php echo base_url ();?>assets/img/ahmad.jpg">
</div>
<div class="item">
<img alt="Carousel Bootstrap Third" src="<?php echo base_url ();?>assets/img/ahmad1.jpg">
</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>
<div class="row">
<div class="col-md-6">
<h3>
PEMOGRAMAN WEB ITU ASYIK Lhoo...,,,
</h3>
<p>
Data mahasiswa
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th>
No
</th>
<th>
Nama
</th>
<th>
Nim
</th>
<th>
Alamat
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Ahmad didipu
</td>
<td>
131314004
</td>
<td>
telaga
<td>
Pelajar
</td>
</tr>
<tr class="active">
<td>
2
</td>
<td>
hariyono
</td>
<td>
131314009
</td>
<td>
Paguyaman
<td>
Pelajar
</td>
</tr>
<tr class="success">
<td>
3
</td>
<td>
Fatma
</td>
<td>
131314008
</td>
<td>
Paguyaman
<td>
Pelajar
</td>
</tr>
<tr class="warning">
<td>
4
</td>
<td>
putra
</td>
<td>
131314026
</td>
<td>
moodu
<td>
Pelajar
</td>
</tr>
<tr class="danger">
<td>
5
</td>
<td>
Balgis
</td>
<td>
131314006
</td>
<td>
Marisa
<td>
Pelajar
</td>
</tr>
</tbody>
</table>
</div>
</div>
Footer
Berikut kode untuk 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>
setelah membuat content kemudian kita akan tutup boostrap di file footer yaitu dengan menambahkan
</body>
</html>
di akhir coding.
berikut coding untuk footer:
berikut coding untuk footer:
<div class="row">
<div class="col-md-12">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
setelah itu buka d browser.
berikut hasil dari boostrap yang saya buat:
terimah kasih sudah berkunjung di blog ini.
Semoga bermanfaat dan selamat mencoba.
Tidak ada komentar:
Posting Komentar