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

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 :

Form Login

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

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');

Kemudian buat 1 File, view_login, yang kita akan gunakan sebagai form Login saat pertama kali aplikasi dibuka.

<!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>

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

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

application/views/layout_dashboard/import-doctype.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>

application/views/layout_dashboard/info-breadcumbs.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>

application/views/layout_dashboard/sidebar.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>

application/views/layout_dashboard/maintemplate.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>

Download File

Comments

comments

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


Adli Luthfiansyah Says: August 19, 2012 at 12:06 pm

Kalau boleh tau sesuai penjelasan perubahan konfigurasi pada file index.php diatas. kalau boleh saya tau file index.phpnya ada dimana ya
- Reply
  
  CITSTUDIO'S MODERATOR Says: August 22, 2012 at 9:39 am
  
  untuk index.php nya ada di root
  /index.php

Setyo Budi Says: November 15, 2012 at 4:26 am

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

Setyo Budi Says: November 16, 2012 at 10:17 am

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

arafir syah Says: January 8, 2013 at 12:53 pm

mas link downloadnya sudah tidak bisa ya?boleh dikirimkan keemail mas
Trima kasih
- Reply
  
  CITSTUDIO'S MODERATOR Says: January 8, 2013 at 4:58 pm
  
  mohon sabar ya mas, soalnya sedang dalam masa develop.
  
  jadi ketika sudah selesai, nanti kita kirimkan. Sengaja kita tidak publish dulu, menunggu semuanya beres
  
  Trims

Tutorial CodeIgniter
_{Aplikasi Travel Bagian 1 - Template}