If you still have problems, please let us know, by sending an email to suhendra@citstudio.com . Thank you!

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

by / Monday, 23 July 2012 / Published in Tutorial CodeIgniter

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]

Download File

Comments

comments

Powered by Facebook Comments

Tagged under:

6 Responses to “Tutorial PHP : Membuat Aplikasi dengan CodeIgniter Part-4 (Template)”

  1. Adli Luthfiansyah says : Reply

    Kalau boleh tau sesuai penjelasan perubahan konfigurasi pada file index.php diatas. kalau boleh saya tau file index.phpnya ada dimana ya

  2. Setyo Budi says : Reply

    File view_login disimpan di folder mana yaa… plus link Download kok ga bisa. Makasih

  3. Setyo Budi says : Reply

    Mas nama file 1 view_login disimpan dimana? Link Download share Source Code dan Database tidak bisa, bgm? Tq

  4. arafir syah says : Reply

    mas link downloadnya sudah tidak bisa ya?boleh dikirimkan keemail mas
    Trima kasih

Leave a Reply

 

TOP Partly powered by CleverPlugins.com
%d bloggers like this:
×

citstudio-labs

We Are currently develop for Bandung Rentcar. http://www.pvjrental.com/. Click on link to see our progress.

citstudio-portfolio-konsultan-it-bandung-pvjrental

More information please send us email : suhendra@citstudio.com

Phone : (62) 888 0183 0193

Comments

comments

Powered by Facebook Comments

Web Design BangladeshPremium WordPress ThemesWeb Development