Sebelum
lanjut ke tutorial bagian 2 membuat web event organizer dengan CI. pastikan
anda
a. Di
application->config->config.php-> ganti $config['base_url'] = '’
dengan
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = $root;
b. Di
application->config->config.php-> ganti $config['index_page'] = 'index.php'; dengan
$config['index_page'] = '';
c. Di application->config->autoload.php->
$autoload['libraries'] = array(); dengan
$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array(); dengan $autoload['helper'] = array('url', 'file', 'form');
d. Buat folder "template" di dalam "application->views->admin"
e. Buat folder "datatables" di dalam folder "template" yang di buat tadi. setelah itu buat file
css.php dan js.php
css.php dan js.php
f. Buat file header.php, body.php,
footer.php, menu.php di dalam folder template yang sudah
dibuat
dibuat
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
js.php
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable();
});
</script>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Event Organizer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="<?php echo base_url(); ?>public/css/bootstrap.min.css">
<!-- Google fonts - Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<!-- theme stylesheet-->
<link rel="stylesheet" href="<?php echo base_url(); ?>public/css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="<?php echo base_url(); ?>public/css/custom.css">
<!-- Favicon-->
<link rel="shortcut icon" href="<?php echo base_url(); ?>public/img/favicon.ico">
<!-- Font Awesome CDN-->
<!-- you can replace it by local Font Awesome-->
<script src="https://use.fontawesome.com/99347ac47f.js"></script>
<!-- Font Icons CSS-->
<link rel="stylesheet" href="https://file.myfontastic.com/da58YPMQ7U5HY8Rb6UxkNf/icons.css">
<?php
if(isset($css))
$this->load->view($css);
?>
</head>
body.php
<?php $this->load->view('admin/template/header'); ?>
<body>
<div class="page home-page">
<!-- Main Navbar-->
<header class="header">
<nav class="navbar">
<!-- Search Box-->
<div class="container-fluid">
<div class="navbar-holder d-flex align-items-center justify-content-between">
<!-- Navbar Header-->
<div class="navbar-header">
<!-- Navbar Brand --><a href="index.html" class="navbar-brand">
<div class="brand-text brand-big hidden-lg-down"><span>Bootstrap </span><strong>Dashboard</strong></div>
<div class="brand-text brand-small"><strong>BD</strong></div></a>
<!-- Toggle Button--><a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
</div>
<!-- Navbar Menu -->
<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
<!-- Search-->
<!-- Logout -->
<li class="nav-item"><a href="<?php echo base_url()."login/logout";?>" class="nav-link logout">Logout<i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="page-content d-flex align-items-stretch">
<!-- Side Navbar -->
<?php $this->load->view('admin/template/menu'); ?>
<div class="content-inner">
<!-- Page Header-->
<?php $this->load->view($content); ?>
<!-- Page Footer-->
<footer class="main-footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Your company © 2017-2019</p>
</div>
<div class="col-sm-6 text-right">
<p>Design by <a href="https://bootstrapious.com/admin-templates" class="external">Bootstrapious</a></p>
<!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
<!-- Javascript files-->
<?php
$this->load->view('admin/template/footer');
if (isset($js))
$this->load->view($js);
?>
</body>
</html>
footer.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/tether.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery.cookie.js"> </script>
<script src="<?php echo base_url(); ?>public/js/jquery.validate.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/front.js"></script> menu.php
<nav class="side-navbar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="avatar"><img src="public/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="title">
<h1 class="h4">Mark Stephen</h1>
<p>Web Designer</p>
</div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">Main</span>
<ul class="list-unstyled">
<li class="active"> <a href="./"><i class="icon-home"></i>Home</a></li>
<li><a href="#dashvariants" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Dropdown </a>
<ul id="dashvariants" class="collapse list-unstyled">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
</li>
<li> <a href="tables.html"> <i class="icon-grid"></i>Tables </a></li>
<li> <a href="charts.html"> <i class="fa fa-bar-chart"></i>Charts </a></li>
<li> <a href="forms.html"> <i class="icon-padnote"></i>Forms </a></li>
<li> <a href="login.html"> <i class="icon-interface-windows"></i>Login Page</a></li>
<li> <a href="<?php echo base_url()?>user" class="site_title"> <i class="icon-user"></i>User</a></li>
</ul><span class="heading">Extras</span>
<ul class="list-unstyled">
<li> <a href="#"> <i class="icon-flask"></i>Demo </a></li>
<li> <a href="#"> <i class="icon-screen"></i>Demo </a></li>
<li> <a href="#"> <i class="icon-mail"></i>Demo </a></li>
<li> <a href="#"> <i class="icon-picture"></i>Demo </a></li>
</ul>
</nav>
selanjutnya baca 3. Tutorial Codeigniter : Membuat Web Event Organizer (User/Admin & Login)
0 Response to "2. Tutorial Codeigniter : Membuat Web Event Organizer (Setting & Templating) "
Post a Comment