I'm new in codeigniter, I feel trouble about layout/template/themes in codeigniter.
I don't know when should using one of them..
What is the best way that i can do? if i want to make a website with free a html/css template like
goodnatured
|--img
|--img01.jpg
|--css
|--style.css
|--js
|--jquery.js
|--index.html
Anyone can tell me a tutorial, suggest, ... thanks
I just write little additional library(application/libraries/display_lib.php) for rendering tempates and similar page blocks.
Something like this:
class Display_Lib{
private $_CI;
private $_template_data;
public function __construct()
{
$this->_CI =& get_instance();
}
public function set($key, $value)
{
$this->_template_data[$key] = $value;
}
public function get($key)
{
return $this->_template_data[$key];
}
public function get_template_data()
{
return $this->_template_data;
}
public function display_page($view, $data = array())
{
$this->set('content', $this->_CI->load->view($view, $data, TRUE));
$this->_CI->load->view('templates/main_template', $this->get_template_data());
}
}
Set this library in auto load:
$autoload['libraries'] = array('session', 'database', 'display_lib');
And call it in controller:
class Main extends CI_Controller{
public function index()
{
$some_data = array();
$this->display_lib->display_page('views/main_view', $some_data);
}
}
Template example:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header></header>
<div class="auth_wrapper">
<div class="content">
<?=$content;?>
</div>
<div class="buffer"></div>
</div>
<footer></footer>
</body>
</html>
And application/views/main_view simple exmaple:
<div>Come content will be here</div>
This lib allow to use templates and render views from controllers.
Templates handle the layout of your page. You create a template that will contain your meta, header, footer, and a space for the body. The body get injected in the template, this is where the content change.
The idea is that most of the site don't change, only the body changes. This is where templates are useful, they save you time and increase consistency.
See this template library, it's pretty good: http://getsparks.org/packages/template/show
Themes is combined with a template as templates often define the layout and a theme just 'skin' the layout. A theme include assets and styles that will modify the template further more.
Cheers
Make a template.php, header.php, footer.php. Below is template.php, Similarly make header and footer and place them all in views folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header><?=$this->load->view('header');?></header>
<div class="wrapper">
<div class="content">
<?=$main?>
</div>
</div>
<footer><?=$this->load->view('footer');?></footer>
</body>
</html>
In your Controller function:
function index(){
$data = array();
$data['main'] = "home"; #this view is home.php in views folder, the content part of template.php
$this->load->view('template', $data); #this is the template file being rendered.
}
This is the most simple way of using templates in CI I think.
Related
I'm trying to understand how use Thymeleaf, I have a structure like this:
I have a default.html that work like the most general page, I put there some inclusion like general css, bootstrap and so on.. The I replace using th:replace the footer and a navbar. I use this page as base line for all the other pages.
My problem is: how can I use this page for all the other pages?
For example if I have 2 pages, page A and B and both of them need bootstrap, the app's css and so on, I don't want write the code to include them twice, but only once. So to do that I think I have to put page A inside default.html if I want show A and B in the other case.
At least, I done in this way using JSP.
How can I do it? Is it possible using Thymeleaf?
I tried to do somenthig like that but id doesn't work
DEFAULT.HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title th:text="#{application_name}"></title>
<link rel="icon" type="image/x-icon" th:href="#{/static/favicon.ico}"/>
<script th:src="#{/webjars/jquery/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="#{/css/mio.css}"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/css/font-awesome.min.css}"/>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<div class="container">
<div layout:fragment="content">
<p>Your page content goes here</p>
</div>
</div>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
It is totally possible!
We have some steps to do it with Thymeleaf:
Configurations:
1 - Include the thymeleaf layout dialect into your project:
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.1.2</version>
</dependency>
2 - I do not know how is your webConfig, but with Spring, we have to add this configuration to template engine:
#Bean
public TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setEnableSpringELCompiler(true);
//your templateResolver
engine.setTemplateResolver(templateResolver());
//here it is!
engine.addDialect(new LayoutDialect());
return engine;
}
The default html:
<!DOCTYPE html>
<html lang="pt-BR"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
<!-- Necessary to thymeleaf layout dialect-->
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/layout/stylesheets/vendors/bootstrap.css}" />
</head>
<body>
<header>your Heder here</header>
<!--Here what you want, it gonna find the other html that contains "maincode"-->
<section layout:fragment="maincode"></section>
<footer>yourFooter</footer>
<script th:src="#{/javascript/vendors/jquery-2.2.4.min.js}"></script>
<script th:src="#{/layout/javascripts/bootstrap.min.js}"></script>
<th:block layout:fragment="javascript-extra"></th:block>
</body>
</html>
The other html:
<!DOCTYPE html>
<html lang="pt" xmlns="http://w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
<!--Tell who is the default html-->
layout:decorate="layout/defaultHtml">
<body>
<section layout:fragment="maincode">
bla bla bla
</section>
</body>
</html>
Any question, just ask!
Hi I am newbie learning laravel 4 for creating an application. I am trying to link twitter bootstrap3 files to views using laravel blades. I installed a new laravel application folder.
To remove public from url path i removed all the file in public folder and kept outside of public folder. I changed paths as per the above changes in index.php file.As per my needs i will have two sections in my application one is for users and another is for admin.
So for this i changed my routes.php file like this below.
Route::get('/', 'HomeController#index');
Route::get('/admin', 'AdminController#index');
I created two controllers one for users and another for admin named as HomeController and AdminController. Both files will look like below.
HomeController for Users
<?php
class HomeController extends BaseController {
public function index()
{
return View::make('index');
}
}
AdminController for admin section
<?php
class AdminController extends BaseController {
public function index()
{
return View::make('admin.index');
}
}
Now i created admin folder under views folder for admin section. Thats why i kept admin.index to call admin index page when the url is like this http://localhost/laravel/admin.
Now i created assets folder which has css folder for css files, js folder js files and images folder for images. I want to link these css and js files to my admin view. So i created a layout.blade.php like below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Laravel</title>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<script type="text/javascript" src="{{ asset('assets/js/jquery-1.10.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
</head>
<body>
#yield('content')
</body>
</html>
After this i changed my view into like this below.
#extends('layout')
#section('content')
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<p>Here Comes Admin Section</p>
</div>
</div>
</div>
#stop
But the assets are not linking. May i know where i am going wrong.
If your asset folder is inside public folder of laravel then user this:
Suppose your folder structure is public/assets/css/bootstrap: Then
<script src="{{ URL::asset('assets/css/bootstrap.css') }}"></script>
Use a virtual host on your server or local machine to remove public from your URL. It's pretty straightforward. Simply Google on how to setup a virtual host for Laravel.
Once you have your virtual host setup, simply place your assets folder in your public directory.
Then in your Blade layout, use:
<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.css') }}">
I'm trying to make an image gallery. I have one controller with two functions and every function load one view. When I call index I can watch images but when I call the other one (tg) I can't watch them.
Images are in a folder named imagenes and its path is example.com/codeigniter.
The controller:
class Galeria extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->view('vgaleria');
}
public function tg()
{
$this->load->view('tgaleria');
}
}
The default controller is this one.
The view that I can't watch images:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Galería de imágenes</title>
<style type="text/css">
</style>
<script src="<?php echo base_url();?>javascript/funciones.js"
language="javascript" input="type/text">
</script>
</head>
<body>
<div id="imgs">
<img src="imagenes/imagen1.jpg" id="eimg">
</div>
<input type="button" id="bant" onclick="imginter('arrancar')"
value="Arrancar">
</button>
<input type="button" id="bsig" onclick="imgparar()" value="Parar"></button>
</body>
</html>
How can I watch images?
Thanks.
Try this:
<img src="<?php echo base_url(); ?>imagenes/imagen1.jpg" id="eimg">
Would also depend if you have removed your index.php from the url using .htaccess. Otherwise use site_url().
file: app/route.php
Route::get('/', function()
{
return View::make('home');
});
file: app/views/home.blade.php
{{-- Blade comment. --}}
#extends('layouts.base')
#section('head')
<link rel="stylesheet" href="second.css" />
#stop
#section('body')
<h1>Heading</h1>
<p>Hello Home!</p>
#stop
file: app/views/layouts/base.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
#section('head')
<link rel="stylesheet" href="style.css" />
#show
</head>
<body>
#yield('body')
</body>
</html>
When I access to laravel.localhost/
It only output
#extends('layouts.base')
but however, if I remove the
{{-- Blade comment. --}}
then it works perfectly.
May I know what is the issue?
The first line in your extended blade view must be the #extends directive.
Yes it is a convention by the devs.
Look at BladeCompiler.php on line 119.
protected function compileExtends($value)
{
// By convention, Blade views using template inheritance must begin with the
// #extends expression, otherwise they will not be compiled with template
// inheritance. So, if they do not start with that we will just return.
if (strpos($value, '#extends') !== 0)
{
return $value;
}
I'm trying to load a view specific stylesheet in an asp.net mvc3 application (just learning this stuff!), so in my _Layout.cshtml I have:
<head>
<!--- All the common css & JS declarations here -->
#ViewBag.PageIncludes
</head>
<body>
Then in my controller I have:
public ActionResult Index()
{
ViewBag.PageIncludes = "<link rel='stylesheet' type='text/css' href='../Content/viewspecificstylesheet.css')' />";
return View();
}
However, when I view the page, even though the declaration is in the head, the text is rendered in the body, and thus rendered as text.
A couple of questions as a result:
Why, even though I declare in the head is this rendered in the body?
What is the best practice for loading a specific stylesheet for a given view/controller?
Thanks
You could use sections:
<head>
<!--- All the common css & JS declarations here -->
#RenderSection("Styles", false)
</head>
<body>
...
</body>
and then in the Index.cshtml view:
#section Styles {
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/viewspecificstylesheet.css")" />
}
<div>This is the index view</div>
and your controller no longer needs to worry about styles which is purely view specific responsibility:
public ActionResult Index()
{
return View();
}