How to create Master Page(Layout) with base design style - codeigniter

I'm new in CodeIgniter. I want to create Master Page or Layout with base style that will be contain Menu, footer and etc. I don't want to write repeating content in all pages and load it automatically for all pages. For example, I can create Master Page in asp.net or Layout in asp.net mvc. I'm sure I can do it in CodeIgniter.

lets assume you have an html page
<html>
<head>
<title> Hello World </title>
</head>
<body>
<div id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div id="main-content">
<!-- this is the dynamic part -->
</div>
<div id="footer">
Copy Right 2013 Hello World
</div>
</body>
</html>
you could split it into
1- header
2- menu
3- main content
4- footer
you basically put
<html>
<head>
<title> Hello World </title>
</head>
<body>
in one view called "view_header"
then you put
<div id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div id="main-content">
in a view called "view_menu"
and then you put
</div>
<div id="footer">
Copy Right 2013 Hello World
</div>
</body>
</html>
in a view called "view_footer"
then in your controller
$this->load->view('view_header');
$this->load->view('view_menu');
$this->load->view('YOUR_VIEW');
$this->load->view('view_footer');
The other solution, which I see is better: create a view called view_template.php
<html>
<head>
<title> Hello World </title>
</head>
<body>
<div id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div id="main-content">
<?php $this->load->view($content); ?>
</div>
<div id="footer">
Copy Right 2013 Hello World
</div>
</body>
</html>
in the controller lets say you want to call a view called About
$data = array('content'=>'about');
$this->load->view('view_template',$data);

Dynamic Layout
You would create a new Controller with a public $template variable
Your extended Controller will then inherit the $template variable from the Master Controller.
MY_Controller
class MY_Controller extends CI_Controller
{
public $template=null;
public function __construct()
{
if(is_null($this->template)){
$this->template = 'layouts/default';
}
}
}
Admin_controller
class Admin_Controller extends MY_Controller
{
public function __construct()
{
//Still inherits from MY_Controller
//this time, any controller extending Admin_Controller
//will point to 'views/layouts/admin'
if(is_null($this->template)){
$this->template = 'layouts/admin';
}
}
}
-
class User extends MY_Controller
{
public function index()
{
//$this->template is inherited
//from MY_Controller
//which point to 'views/layouts/default'
//We can also load a view as data
//ie no master layout, INTO our master layout
//note we don't pass $this->template
//and set the third param as true
$dynamic_sidebar = $this->load->view('views/sidebar/dynamic', array(
'data' => 'some_data'
), true);
return $this->load->view($this->template, array(
'partial' => 'users/index' //partial view,
'dynamic_sidebar' => $dynamic_sidebar
));
}
}
Views/Layouts/default
<body>
//load the main view
//in our example we have also loaded
//a dynamic sidebar with this view
<?php $this->load->view($partial); ?>
<?php $this->load->view($dynamic_sidebar); ?>
//load a static view
//views/sidebar/static
<?php $this->load->view('sidebar/static'); ?>
</body>

Following the idea of a master page in Laravel, we can do this:
Controller code
$this->load->view('show');
View "show.php"
Set values for master page and then pass the variables to master page. Keep your master page codes inside ob_start() & ob_get_clean().
<?php $page_title = "My first page"; ?>
<?php ob_start(); ?>
Your header stylesheet links and scripts
<?php $page_header = ob_get_clean(); ?>
<?php ob_start(); ?>
<div>
<h1>This is a Header</h1>
<?php $this->load->view('Partials/list'); ?>
</div>
<?php $page_content = ob_get_clean(); ?>
<?php ob_start(); ?>
Your footer html or scripts
<?php $page_footer = ob_get_clean(); ?>
<?php $this->load->view('Layout/app',array(
'page_title' => $page_title,
'page_header' => $page_header,
'page_content' => $page_content,
'page_footer' => $page_footer
)); ?>
Partial view "Partials/list.php"
In case you don't want your code to be crowded. You can create some partial views to keep things simple.
<ul>
<li>LIst item 1</li>
<li>LIst item 2</li>
<li>LIst item 3</li>
</ul>
Master Page "Layout/app.php"
<html>
<head>
<title><?= v($page_title) ?></title>
<?= v($page_header) ?>
</head>
<body>
<?= v($page_content) ?>
<?= v($page_footer) ?>
</body>
</html>
<?php
function v(&$var)
{
return isset($var) ? $var : '';
}
So that will genarate code:
<html>
<head>
<title>My first page</title>
Your header stylesheet links and scripts
</head>
<body>
<div>
<h1>This is a Header</h1>
<ul>
<li>LIst item 1</li>
<li>LIst item 2</li>
<li>LIst item 3</li>
</ul>
</div>
Your footer html or scripts
</body>
</html>

What we probably do is separate view files for header, menu, footer, etc.. that is common for all pages. And include them inside each view. like
$this->view('header');
$this->view('menu');
//Some specific content
$this->view('footer');
If you need same functionality without copying the above to all views, you need to create a function in your controller as follows:
private function myviewfunction($current_view)
{
$this->load->view('header');
$this->load->view('menu');
$this->load->view($current_view);
$this->load->view('footer');
return NULL;
}
and call this function in all your pages (methods)
$this->myviewfunction('about'); //About is the specific view for the method

Related

Pass data from view to view and display in view laravel?

In Controller :
$data = [
'name' => 'Jony',
'age'. => 18
];
return View::make("user/detail", compact('data'));
In view/user/detail.blade.php
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Details</h1>
<div class="user-informatio">
//
I want to display view : user.blade.php
//
</div>
</body>
</html>
In view/user/user.blade.php
<div>{{ $data['name'] }}</div> <br/>
<div>{{ $data['age'] }}</div>
I want to pass $data from detail.blade.php to user.blade.php and display user.blade form inside detail.blade.
Please give me any ideas.Thanks
You can #include user.blade.php file in it.
<div class="user-informatio">
//
I want to display view : user.blade.php
//
#include('user.user', $data)
</div>
try this
return view('user/detail')->with('data', $data);
then in the view just use $data

yield is not showing nothing

Im with some doubts about how to strucure the views folder on laravel. For example a blog site where we have this structure in the homepage:
Header (where we have a menu with: a link to homepage, search bar to search for posts, sign in and login buttons)
Then a section with the last 5 posts.
Then a section with the most viewed posts.
And then a footer.
How we can structure this homepage in terms of views? For example maybe we can something like this:
-views
- layouts
- header.blade.php
- footer.blade.php
- posts
- lastposts.blade.php
- mostviewed.blade.php
- single.blade.php
- layout.blade.php
Do you think its ok? Because Im testing this and it is not working. For example in the layout.blade.php I have:
<!DOCTYPE html>
<html lang="en">
<head>
....
<link href="css/app.css" rel="stylesheet">
</head>
<body>
#include('layouts.nav')
#yield('lastposts')
#yield('mostviewed')
#include(layouts.footer')
</body>
</html>
And I get the header and the footer when I access the page corretly, but the both #yields dont show nothing.
In the lastposts.blade.php to show the last 5 posts I have:
#extends('layout')
#section('lastposts')
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
#endsection
I have the same logic for the mostviewed.blade.php, but again, the #yield('mostviewed') dont show nothing.
Do you know what is not corret?
Routes file:
Route::get('/', function () {
return view('layout');
}
I have just this route because I just have the homepage for now.
You created the wrong view. The parent view is layout, it doesn't know about mostviewed and lastposts. That's why you wrote #extends('layout'), that way when you create your content view, it will know that it has to extend stuff from layout.
Route::get('/', function () {
return view('posts.mostviewed');
}

view to view in HMVC Code Igniter

i have some problem with hmvc in codeigniter because im newbie with hmvc.
i have a template bootstrap with ci , so the problem like i not able to show my view
my view name index.php in directory "theme" :
<!DOCTYPE html>
<html lang="en">
<head>
<?php echo $this->load->view('theme/header') ?>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<?php echo $this->load->view('theme/navbar') ?>
</nav>
<div id="wrapper">
<div id="page-wrapper">
<?php $this->load->view($content) ?>
</div>
</div>
<?php echo $this->load->view('theme/footer') ?>
</body>
My Controller name dashboard in directory "theme" :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dashboard extends CI_Controller{
function __construct()
{
parent::__construct();
}
function index()
{
$data['content'] = 'dashboard';
return $this->load->view('theme/index', $data);
}
}
i the error is in :
<?php echo $this->load->view('theme/navbar') ?>
and
<?php echo $this->load->view('theme/footer') ?>
the error Says :
"A PHP Error was encountered"
"Severity: 4096"
"Message: Object of class MY_Loader could not be converted to string"
"Filename: theme/index.php"
"Line Number : 8"
Please help
dont use echo
just $this->load->view('viewfile')
example if your view file is on application/view/theme/footer then it is
$this->load->view('theme/footer')
if you want to convert it to string you can pass a boolean true in Third parameter$this->load->view('theme/footer',array(),true)
Please refer to this codeigniter's view's documentation

How to give link to a file in subfolder in codeigniter

This is my page in View.
<!DOCTYPE html>
<?php $this->load->view('partials/page_head');?>
<body>
<div class="wrapper">
<header>
<div class="logo">Logo</div>
</header>
<?php $this->load->view('partials/menu');?>
<div id="content">
<?php $this->load->view('partials/', $subview); ?>
</div>
<footer>© 2012 Codeigniter.tv</footer>
</div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
This is my menu page inside partials folder.
<menu>
<ul>
<li>Listing</li>
<li>Detail</li>
</ul>
</menu>
Below is the controller part.
<?php
class Example extends CI_Controller {
public $data = array('subview' => 'Oops, forgot to set a subview');
public function __construct(){
parent::__construct();
$this->load->helper('url');
}
public function listing() {
$this->data['subview'] = 'listing';
$this->load->view('layouts/layout', $this->data);
}
public function detail() {
$this->data['subview'] = 'detail';
$this->load->view('layouts/layout', $this->data);
}
}
I could not display the content in the file 'listing.php' which is in partials folder. When i run the project in localhost it saying not found. Can anyone help me to correct my problems.
modify views as bellow.
<!DOCTYPE html>
<?php $this->load->view('partials/page_head');?>
<body>
<div class="wrapper">
<header>
<div class="logo">Logo</div>
</header>
<?php $this->load->view('partials/menu');?>
<div id="content">
<?php $this->load->view('partials/'.$subview); ?>
</div>
<footer>© 2012 Codeigniter.tv</footer>
</div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>') </script>
</body>
</html>
modify your menu file as below
<menu>
<ul>
<li>Listing</li>
<li>Detail</li>
</ul>
</menu>

CodeIgniter Skeleton, submenus lost path to css and js

I decided to use CodeIgniter-Skeleton-master (author Anvoz) for build my web site.
I added new menus and sub menus on this example.
With setup new menus I haven't problem, because I copy example of Todo, make Todo1 and it works without any problem.
But, on all added submenus I entered under Todo1 displayed web page cannot proper access to css and js files and navbar is displayed without css and js.
Problem was caused what site url() grab controller name todo1 and css and js is in the wrong path !
Example:
todo1 ->path : http://localhost/ci3a/ ->this work ok instead all used css and js path is added onto this and have acess to their files
todo1/aboutus ->path : http://localhost/ci3a/todo1 ->this controller name-todo1 cause wrong path and css and js files cannot be used!
Organisation of files :
application
assets, contain css, images and js subfolders
system
In application/config/
assets.php I have:
$config['assets_url'] = 'assets/';
autoload.php I have:
$autoload['helper'] = array('url');
config.php I have:
$config['base_url'] = '';
$config['index_page'] = '';
routes.php I have:
$route['default_controller'] = "skeleton";
$route['404_override'] = '';
In application/skeleton/ i have
controllers and views folders
In controllers folder I have main controller skeleton.php
In application/views/header.php I have navbar menu structure.
Here I put the copy of todo menu->todo1 with 2 submenus, who work but dont display css and js
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Todo1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Todo1</li>
<li>About us</li>
<li>Where we are</li>
</ul>
</li>
I added similar functions as index (in todo1.php controller) for this new submenuus)
public function aboutus()
{
$this->load->library('template');
$this->template->set_layout('pagelet');
$this->template->set_title('Todo example');
$this->template->load_view('todo1/aboutus');
}
I dont know how to eliminate this controller name who make css, image and js unaccesible.
I tried to make new folder todo1 under root and copy access subfolder into it but the problem stayed.
In web browser, i cought errors:
GET http://localhost/ci3a/todo1/aboutus [HTTP/1.1 200 OK 63ms]
GET http://localhost/ci3a/todo1/assets/css/bootstrap.min.css [HTTP/1.1 404
Not Found 141ms]
and x similar errors
Can you someone help me ?
to load your css and js
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
so that your folder structurer would be like this
1. application
2. assets
- css
1. bootstrap.css
- js
1. bootstrap.js
- images
1. slider.jpg
2. logo.jpg
3. system
4. .htacess
5. index.php
in controller just load your particular view only
public function aboutus()
{
$this->template->set_title('Todo example');
$this->template->load_view('todo1/header');
$this->template->load_view('todo1/aboutus');//this should contain only about us details
$this->template->load_view('todo1/fotter');
}
so in header.php file
<!DOCTYPE html>
<html>
<head>
<title>my site ----</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
in so in fotter.php file
<div class="foot">
<div class="social">
<div class="news_letter">
<p>Sign Up For Newsletter</p>
<div class="new_div">
<form action="#" class="form_news" method="post">
<input type="email" class="news_input" placeholder="E-Mail" name="email" required>
<input type="submit" class="news_button" value="Subscribe" name="news_but" >
</form>
</div>
</div>
<div class="follow">
<p>Follow Me</p>
<ul class="soc">
<li><a class="soc-facebook" href="#" target="_blank"></a></li>
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-linkedin soc-icon-last" href="#"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="copyright navbar navbar-default">
<div class="copy_in">
<div class="foot_nav navbar-text">
<ul>
<li class="list_border">Home</li>
<li class="list_border">About Us</li>
<li class="list_border">Products</li>
<li class="list_border">Corsair</li>
<li>Contact Us</li>
</ul>
</div>
<div class="foot_copy_text">
<p class="navbar-text">
© 2015 - comany name. Solution By : My office name
</p>
</div>
</div>
</div>
</div>
</body>
in between (ex:about us page)
<div class="container">
<h1>Im About us</h1>
<!-- rest of code here -->
</div>
ex: contact
<div class="container">
<h1>Im contact</h1>
<!-- rest of code here -->
</div>

Resources