Kamis, 28 Mei 2015

Tutorial PHP : Membuat Aplikasi dengan CodeIgniter Part-4 (Template)

11.47    No comments
Sebelum kita benar-benar membuat Aplikasi, kita persiapkan terlebih dahulu konsep template dari aplikasi yang akan kita buat. Gambaran umum kita akan membuat aplikasi dengan template seperti ini :
management-travel-1
Form Login
management-travel-1
Form Administrasi / Dashboard
Dengan Struktur Folder yang akan kita buat seperti gambar dibawah :

Yang pertama kita lakukan adalah, Merubah sedikit file konfigurasi pada file index.php
[php] define('APP_NAME', "C-ITSTAR TRAVEL");
define('TM_PREFIX', "citstudio_");
define('ASSETS', TM_PREFIX."assets/");
define('C_CSS', ASSETS."css/");
define('C_JS', ASSETS."js/");
define('C_IMAGES', ASSETS."images/");
define('ADMIN_LAYOUT', "layout_dashboard/");
define('ENVIRONMENT', 'development');
[/php] Kemudian buat 1 File, view_login, yang kita akan gunakan sebagai form Login saat pertama kali aplikasi dibuka.
[php] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="<?php echo base_url().'images/fav_icon.png';?>" />
<style type="text/css">@import url("<?php echo base_url() . C_CSS.'reset.css'; ?>");</style>
<style type="text/css">@import url("<?php echo base_url() . C_CSS.'login.css'; ?>");</style>
<title>Login</title>
<script src="<?php echo base_url().C_JS.'jquery-1.7.2.min.js';?>"></script>
<script>
// var auto_refresh = setInterval(
// function()
// {
// $('#load_tweets').load('reminder/reminder_kontrak');
// }, 2000);
</script>
</head> <body bgcolor="#f3f3f3">
<div id="main_box">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<div align="center">
<img src="<?php echo base_url().C_IMAGES.'logo2.png';?>" />
</div>
</td>
<td width="30%">
<div align="center">
<img src="<?php echo base_url().C_IMAGES.'logo_cit.png';?>" />
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="reminder_box">
<center><br />
<div id="load_tweets"></div>
</center>
</div>
</td>
<td width="30%">
<div id="login_box">
<h1>Login</h1>
<?php
$attributes = array('name' => 'login_form', 'id' => 'login_form');
echo form_open('login/proses_login', $attributes);
?>
<?php
$message = $this->session->flashdata('message');
echo $message == '' ? '' : '<p id="message">' . $message . '</p>';
?>
<p>
<label for="username">Username:</label>
<input type="text" name="username" size="20" class="form_field"
value="<?php echo set_value('username');?>"/>
</p>
<?php echo form_error('username', '<p class="field_error">', '</p>');?>
<p>
<label for="password">Password:</label>
<input type="password" name="password" size="20" class="form_field"
value="<?php echo set_value('password');?>"/>
</p>
<?php echo form_error('password', '<p class="field_error">', '</p>');?>
<p>
<br><input type="submit" name="submit" id="submit" value="Login" />
</p>
</form>
</div>
</td>
</tr>
</table>
</div>
<div id="footer" align="center">
Copyright &copy; 2012 CITSTUDIO<br />
<a href="http://www.citstudio.com">www.citstudio.com</a>
</div>
</body>
</html>
[/php]
Kemudian buat 1 folder dibawah folder application/views beri nama layout_dashboard. Setelah itu buat beberapa File didalamya
  • header.php, Berfungsi sebagai potongan halaman pada pagian header template
  • import-doctype.php, Berfungsi sebagai potongan halaman pada pagian header template yang berisi definisi-definisi dari penggunaan javascript dan css
  • info-breadcumbs.php, Berfungsi sebagai potongan halaman pada pagian informasi umum mengenai user, dan nama halaman yang diakses
  • sidebar.php
  • maintemplate.php, Merupakan Template Utama aplikasi.

application/views/layout_dashboard/header.php

[php] <hgroup>
<h1 class="site_title"><a href="index.html">C-ITSTAR TRAVEL</a></h1>
<h2 class="section_title">DASHBOARD</h2>
</hgroup>
[/php]

application/views/layout_dashboard/import-doctype.php

[php] <head>
<meta charset="utf-8"/>
<title>{title}</title>
<link rel="stylesheet" href="<?php echo base_url().ASSETS; ?>administrator/css/layout.css" type="text/css" media="screen" /> <!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">@import url("<?php echo base_url().C_CSS; ?>themes/smoothness/jquery.ui.all.css");</style>
<style type="text/css">@import url("<?php echo base_url().C_CSS; ?>themes/smoothness/jquery-ui-1.8.17.custom.css");</style>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery-ui-1.8.17.custom.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/ui/jquery.ui.autocomplete.js"></script>
<!-- CSS + JS PLUGIN - GRID //-->
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url().C_JS; ?>jquery/grid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/grid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/grid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<?php echo base_url().C_JS; ?>jquery/grid/js/jquery.jqGrid.min.js"></script>
<title>{title}</title>
<style type="text/css">
.ui-datepicker {z-index:1200;}
</style>
<script src="<?php echo base_url().ASSETS; ?>administrator/js/hideshow.js" type="text/javascript"></script>
<script src="<?php echo base_url().ASSETS; ?>administrator/js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url().ASSETS; ?>administrator/js/jquery.equalHeight.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tablesorter").tablesorter();
}
);
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
<script type="text/javascript">
$(function(){
$('.column').equalHeight();
});
</script>
</head>
[/php]

application/views/layout_dashboard/info-breadcumbs.php

[php] <div class="user">
<p>Administrator (<a href="#">3 Messages</a>)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">
<a href="index.html">Website Admin</a> <div class="breadcrumb_divider"></div> <a class="current">Dashboard</a></article>
</div>
[/php]

application/views/layout_dashboard/sidebar.php

[php] <script type="text/javascript">
function loadUrl(url){
$("#main").load(url);
}
$(function(){
$("#accordion").accordion({
autoHeight: false,
navigation: true
});
});
</script>
<form class="quick_search">
<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
<hr/>
<h3>Admin</h3>
<ul class="toggle">
<li class="icn_settings"><a href="#">Options</a></li>
<li class="icn_security"><a href="#">Security</a></li>
<li class="icn_jump_back"><a href="#">Logout</a></li>
</ul>
<footer>
<hr />
<p><strong>Copyright &copy; 2012 C-ITSTUDIO</strong></p>
</footer>
[/php]

application/views/layout_dashboard/maintemplate.php

[php] <!doctype html>
<html lang="en">
<?php $this->load->view(ADMIN_LAYOUT.'1_docheader'); ?>
<body>
<header id="header">
<?php $this->load->view(ADMIN_LAYOUT.'2_header'); ?>
</header> <!-- end of header bar --> <section id="secondary_bar">
<?php $this->load->view(ADMIN_LAYOUT.'4_info-breadcumbs'); ?>
</section><!-- end of secondary bar -->
<aside id="sidebar" class="column">
<?php $this->load->view(ADMIN_LAYOUT.'3_sidebar'); ?>
</aside><!-- end of sidebar -->
<section id="main" class="column">
<h4 class="alert_info">{information_message}</h4>
<?php $this->load->view($mainview); ?>
<div class="spacer"></div>
</section>
</body>
</html>
[/php]

0 komentar:

Posting Komentar