Belajar Membuat Header, Menu, dan Content Di CodeIgniter
pada blog kali saya akan mengajarkan tentang apa itu CI (code igniter)
CodeIgniter merupakan aplikasi sumber terbuka yang berupa framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP
nah pada blog ini saya akan mengajarkan bagaimana membuat Header, Menu dan Content di CI
langsung saja, dimana langkah pertama pastikan anda sudah menginstal xampp,di sini saya menggunakan xampp, untuk menjalankan apache dan mysqlnya dimana agar suatu database bisa berjalan
setelah itu copy folder CodeIgniter-3.0.3 kedalam htdocs, tapi sebelum itu rubah nama folder CodeIgniter-3.0.3, sesuai yg kita inginkan disini saya merubahnya menjadi Latihan_1, jika anda belum mempunya CodeIgniter-3.0.3 saya sarankan anda agar mendownload.
kemudian buat file baru di dalam views yg ada di CodeIgniter-3.0.3 yg sudah kita rubah nama tadi, lalu tambahkan script berikut file baru yg ada di dalam views tersebut, untuk toolsnya saya menggunakan sublime text3 tapi kita juga dapat menggunakan notepad atau notepad++
berikut adalah scriptnya
<head>
<title>Halaman Utama</title>
</head>
<div class="header">
<header> <h1> <center> Welcome To Header </h1> </header> <center>
<head>
<title>Header</title>
<style type="text/css">
::selection { background-color: #E13300; color: white; }
::-moz-selection { background-color: #E13300; color: white; }
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#body {
margin: 0 15px 0 15px;
}
p.footer {
text-align: right;
font-size: 11px;
border-top: 1px solid #f0f0f0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
</style>
<div class="menu-wrap">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Kumpulan Articel</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<h2> di atas Merupakan cara menampilkan :<i><p> header, content, menu, dan footer </i> di CodeIgniter (CI)
</h2>
<footer class="mbr-section mbr-section--relative mbr-section--fixed-size" id="footer1-2" style="background-color: rgb(68, 68, 68);">
<div class="mbr-section__container container">
<div class="mbr-footer mbr-footer--wysiwyg row">
<div class="col-sm-12">
<font color="white"> <p class="mbr-footer__copyright">Copyright © 2016 || TEKNIK IINFORMATIKA <p align="right"> ilyas Ahmad </a></p>
</font>
</div>
</div>
</div>
</html>
setelah itu save file tersebut, untuk menyimpan filenya gunakan .php disini saya menyimpanya dengan nama web.php
kemudian tambahkan funcion di dalam controllers welcome
public function web()
{
$this->load->view('web');
{
$this->load->view('web');
setelah semuanya selesai jalankan di dalam browser
dan hasilnya seperti gambar di atas
terima kasih
cara memisahkan BOOSTRAP DI CI (codeigniter)
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>
Mari BelajarWeb
</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>
ilyas
</td>
<td>
131314021
</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 jalankan pada browser
untuk hasilnya akan tampil seperti ini
- 16.21
- 0 Comments
