Mungpung masih segar dari ingatan, saya akan kembali mencoba memaparkan kelanjutan mengenai dasa-dasar codeigniter dengan menggunakan codeigniter 2.0.2. masih mengenai MVC kali ini saya akan mencoba memaparkan langkah-langkah dalam mendesign sebuah form, misal form login. dan untuk kesekian kalinya mohonn kiranya dikoreksi jika ada kesalahan atau kekurangan pada pemaparan yang saya berikan hehehehehe maklum asli masih belajar.
baiklah kita mulai...
mula-mula kita asumsikan bahwa kita sudah memiliki sebuah sourcecode .css (buanyaaak sekali template free yang bisa kita pakai ), kita simpan file css tersebut dalam sebuah folder yang kita buat di rootfolder (lihat gambar)
Kita buat folder public dengan sub folder css, images, dan js yang masing-masing akan diisi oleh file-file pendukung
Untuk file css bisa dicopy simpan dengan nama default.css di webci202/public/css/:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #000000 url(images/img12.jpg) repeat top left;
text-align: justify;
font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #7F7772;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
input, textarea {
padding: 5px;
border: 1px solid #626262;
font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-weight: normal;
color: #AAFF00;
}
h1 {
letter-spacing: -3px;
font-size: 2.6em;
}
h2 {
letter-spacing: -2px;
font-size: 2em;
}
h3 {
margin-bottom: 2em;
font-size: 1em;
font-weight: bold;
}
p, ol, ul {
margin: 0 0 2em 0;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #AAFF00;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
img {
border: none;
}
img.left {
float: left;
margin: 8px 20px 0px 0px;
border: 2px solid #434343;
}
/* Header */
#wrapper {
background: url(images/img14.jpg) no-repeat center top;
}
#header {
width: 900px;
height: 128px;
margin: 0 auto;
}
#logo h1, #logo p {
float: left;
color: #AAFF00;
}
#logo h1 {
height: 88px;
padding: 20px 90px 0 0;
font-size: 4em;
}
#logo p {
margin: 0 0 0 -80px;
padding: 55px 0 0 0;
line-height: normal;
letter-spacing: -1px;
font-size: 1.2em;
font-weight: bold;
}
#logo a {
text-decoration: none;
color: #AAFF00;
font-weight: bold;
}
/* RSS */
#rss {
padding: 30px 39px 20px 0;
text-align: right;
}
#rss a {
padding: 0 0 3px 24px;
background: url(images/img03.gif) no-repeat;
text-decoration: none;
font-weight: bold;
}
#rss a:hover {
text-decoration: underline;
}
/* Search */
#search {
float: right;
width: 200px;
height: 28px;
background: #FFFFFF url(images/img02.gif) no-repeat;
}
#search #x {
display: none;
}
#search #s {
padding: 6px 5px 5px 35px;
width: 160px;
height: auto;
background: none;
border: none;
font: normal 1em Arial, Helvetica, sans-serif;
color: #000;
}
#search br {
display: none;
}
/* Menu */
#menu {
width: 950px;
height: 60px;
margin: 0 auto;
background: #6AA2FD url(images/img04.gif);
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
text-transform: uppercase;
}
#menu a {
display: block;
float: left;
background: url(images/img15.gif) no-repeat right 100%;
padding: 18px 30px 0 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
height: 60px;
background: url(images/img16.gif) repeat-x right 30%;
color: #000000;
}
#menu .current_page_item {
}
#menu .current_page_item a {
color: #FFFFFF;
}
/* Page */
#page {
width: 890px;
margin: 0 auto;
padding: 30px 0;
}
/* Ads */
#ads {
float: right;
width: 160px;
padding: 0 0 0 20px;
}
/* Content */
#content {
float: left;
width: 430px;
}
.post {
margin-bottom: 50px;
}
.post .title {
}
.post .title h2 {
font-size: 2.2em;
}
.post .title p {
margin: 0;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding-top: 30px;
}
.post .links {
width: 410px;
height: 29px;
margin: 0;
padding: 6px 0 0 20px;
background: #F3F3F3 url(images/img08.gif) no-repeat;
}
.post .links a {
padding: 0 23px;
text-decoration: none;
font-weight: bold;
}
.post .links a:hover {
text-decoration: underline;
}
.post .links .more {
background: url(images/img09.gif) no-repeat;
}
.post .links .comments {
background: url(images/img10.gif) no-repeat;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
backgrounda: #F3F3F3 url(images/img13.jg) repeat-y left top;
}
#sidebar li ul {
padding: 15px 20px;
line-height: 200%;
}
#sidebar li li {
margin: 0;
padding-left: 15px;
background: url(images/img07.gif) no-repeat 0 11px;
}
#sidebar h2 {
width: 210px;
height: 30px;
padding: 5px 0 0 30px;
background: #FFB700 url(images/img05.gif);
letter-spacing: -1px;
font-size: 1.6em;
color: #FFFFFF;
}
/* Calendar */
#calendar_wrap {
padding: 15px 20px;
}
#calendar table {
width: 100%;
background: #1F1F1D;
border: 1px solid #11110F;
text-align: center;
}
#calendar thead {
background: #161616;
}
#calendar tbody td {
background: #0F0F0D;
border: 1px solid #11110F;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #today {
background: #121210;
border: 1px solid #11110F;
font-weight: bold;
color: #AAFF00
}
/* Footer */
#footer {
clear: both;
width: 950px;
margin: 0 auto;
padding: 30px 0;
background: url(images/img11.gif) no-repeat;
}
#footer p {
margin: 0 0 5px 0;
text-align: center;
line-height: normal;
font-size: .9em;
}
#footer a {
text-decoration: none;
}
Kita mulai membuat function controller dan disimpan dengan nama file c_pages.php
<?
class C_pages extends CI_controller {
function index () {
$this ->load->helper("form");
$this ->load->helper("url");
$this ->load->helper("html");
$this->load->view("v_default");
}
}
?>
Kemudian kita buat view-view yang akan di gunakan untuk tampilannya.
Simpan dengan nama file v_header.php
!-- start header -->
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">POEKNAPEUTING</a></h1>
<p><a href="http://www.freecsstemplates.org/">KU CSS TEMPLATE GRATIS</a></p>
</div>
<div id="rss"><a href="#">Subscribe to RSS Feed</a></div>
<div id="search">
<form id="searchform" method="get" action="">
<fieldset>
<input type="text" name="s" id="s" size="15" value="" />
<input type="submit" id="x" value="Search" />
</fieldset>
</form>
</div>
</div>
<!-- end header -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Kemudian simpan dengan nama v_content.php
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">About this Template</a></h2>
<p><small>Posted on August 15, 2011 by <a href="#">Latihan menggunakan CSS</a></small></p>
</div>
<div class="entry">
<p><img src="../../public/images/banjir.jpg" alt="" width="112" height="112" class="left" />Ieu teh template anu temana <strong>Tingalieun Peuting</strong>, anu ngagunakeun script CSS Gratisan ku <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. anu di rilis ku <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, mangga ah geura cobian hatur lumayan kanggo latihan :)</p>
<p>templet ieu tiasa di tingali di <a href="http://www.freewpthemes.net/preview/level2/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Contoh Tag </a></h2>
<p><small>di post keun kaping 15 Agustus, 2011 ku <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<h3>dinu H3 bawaan hideung lestreng:</h3>
<blockquote>
<p>“ukuran anu di gunakeun pikeun tulisan ieu ngagunakeun format H3.”</p>
</blockquote>
<h3>Bulleted List:</h3>
<ul>
<li>Poekpeuting caang bulan .</li>
<li>Caang beurang panonpoe .</li>
<li>Bulet anu di gunakeun.</li>
</ul>
<h3>Numbered List:</h3>
<ol>
<li>Nomor Hiji .</li>
<li>Nomor dua .</li>
<li>Nomor tilu jeung saterusna</li>
<li>dst..</li>
</ol>
</div>
<p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
</div>
<!-- end content -->
Kemudian simpan dengan nama v_sidebar.php
<div id="sidebar">
<ul>
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Lorem Ipsum</a> (1) </li>
<li><a href="#">Uncategorized</a> (4) </li>
</ul>
</li>
<li id="calendar">
<h2>Calendar</h2>
<div id="calendar_wrap">
<table id="wp-calendar" summary="Calendar">
<caption>
August 2011
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="July" colspan="3" id="prev"><a href="#">« Jul</a></td>
<td class="pad"> </td>
<td abbr="September" colspan="3" id="next" class="pad"><a href="#">Sep »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td> <td>2</td> <td>3</td><td>4</td> <td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td> <td>9</td> <td>10</td>
<td>11</td><td>12</td>
</tr>
<tr>
<td>13</td> <td>14</td> <td id="today">15</td>
<td>16</td><td>17</td> <td>18</td> <td>19</td>
</tr>
<tr>
<td>20</td><td>21</td><td>22</td> <td>23</td>
<td>24</td><td>25</td><td>26</td> </tr>
<tr>
<td>27</td><td>28</td><td>29</td><td>30</td>
<td>31</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque erat</a></li>
<li><a href="#">Ut nonummy rutrum semuot</a></li>
<li><a href="#">Pellentesque quam quis nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent condimentum nisl</a></li>
</ul>
</li>
<li>
<h2>Ultrices Fringilla Metus</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque erat</a></li>
<li><a href="#">Ut nonummy rutrum semuot</a></li>
<li><a href="#">Pellentesque quam quis nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent condimentum nisl</a></li>
</ul>
</li>
</ul>
</div>
Kemudian simpan dengan nama file v_footer.php
<div id="footer">
<p class="legal">
©2011 POEKNAPEUTING •
Di Disgn ku <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
•
Icons ku <a href="http://famfamfam.com/">FAMFAMFAM</a>. </p>
<p class="links">
<a href="http://validator.w3.org/check/referer" class="xhtml" title="This page validates as XHTML">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
•
<a href="http://jigsaw.w3.org/css-validator/check/referer" class="css" title="This page validates as CSS">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a>
</p>
</div>
Kemudian kita buat file view html-nya dengan nama v_default.php
<html>
<head>
<title><? $apptittle; ?></title>
<link href="<?php echo base_url() ?>public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"><? $this->load->view("v_header"); ?></div>
<div id="sidebar"><? $this->load->view("v_sidebar"); ?></div>
<div id="content"><? $this->load->view("v_content"); ?></div>
<div id="footer"><? $this->load->view("v_footer"); ?></div>
</body>
</html>
Selanjutnya kita akan membuat tampilan form login dan jika berhasil akan memanggil tampilan diatas.
Kita mulai dengan menambah function form pada controller di file c_pages.php
function form ($nmform) {
$this ->load->helper("url");
$this ->load->helper("html");
$appdata["vhome"] = $nmform;
$this->load->view("v_default1", $appdata);
}
Kemudian buat view pendukung header, content, sidebar dan footernya
<!-- start header -->
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">POEKNAPEUTING</a></h1>
<p> </p>
</div>
</div>
Simpan dengan nama v_header1.php
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2> </h2>
</div>
</div>
<div class="post"></div>
</div>
<!-- end content -->
Simpan dengan nama v_content1.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
Simpan dengan nama v_footer1.php
<div id="sidebar"></div>
Simpan dengan nama v_sidebar1.php
Kita buat v_difault1.php sebagai view html nya
<html>
<head>
<title><? $apptittle; ?></title>
<link href="<?php echo base_url() ?>public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"><? $this->load->view("v_header1"); ?></div>
<div id="sidebar"><? $this->load->view("v_sidebar1"); ?></div>
<div id="content"><? $this->load->view($vhome); ?></div>
<div id="content"><? $this->load->view("v_content1"); ?></div>
<div id="footer"><? $this->load->view("v_footer1"); ?></div>
</body>
</html>
Kemudian file v_login1.php
<?
$this ->load->helper("form");
echo form_open("c_pages/index/v_userdata");
echo "Username : ".form_input("nama");
echo br();
echo "Password : ".form_password("passw");
echo br();
echo form_submit("btnsubmit","Login");
echo form_close();
?>
Dan terakhir kita buat v_userdata.php
<?
echo "Username : ".$nama;
echo br();
echo "Password : ".$passw;
?>
Dan jika kita klick login maka akan muncul
selamat mencoba... Insya Allah selanjutnya saya akan membahas conecting to database hehehehe( sambil membuka paririmbon)