Just started using Codeigniter (yesterday) and am wondering what templating features people are using?
Is it possible to create a view and just load it whenerever necessary?
Thanks,
Jonesy
The idea of templating is to create a shared layout with a common header. footer etc and then just have a "body" that changes per-page.
At the most basic level you can just include header and footer inside each of your views like this:
load->view('header'); ?>
This is my page.
load->view('footer'); ?>
That can be fine but start building an application of any real size and you'll find problems.
There are million ways of doing templating, but the way I have used for years is this Template library. It's seen me through 20-30 projects varying projects and is used by many so you know it's tried and tested.
Is it possible to create a view and just load it whenerever necessary?
Yes. This is the typical behavior of the MVC structure, not just in CI. Your views are presentation layers that should be mostly devoid of logic/processing.
Another way to do this is the following.
In your controller, load your template like so
$template_data = array('contains', 'data', 'for', 'template',
'while', 'the', 'specific' => array('may', 'contain',
'data', 'for', 'the', 'view_file'));
$this->load->view('template/needed.php');
In your template, you now have the $template_data array to populate it [if need be!]. You may now load the specific view like so
<div id="yield">
<?php echo $this->view('specific/viewer.php', $template_data['specific']); ?>
</div>
Note:
The template/needed.php should be in the application/views folder.
The specific/viewer.php file should also be in your views directory (i.e. the path to this file should be something like WEB_ROOT/application/views/specific/viewer.php)
The beauty of this is that any view file could be used as a template if need be.
Related
I am trying to create a custom gitbook theme and in that I also want to change the layout so that the book I create using the theme have the layout that I want. I copied the default templates dir in my assests dir of the custom theme and then modified the layout.html and header.html files as I wanted. Then to include the modified template files, I added the following attribute to the index.js file
module.exports = {
book: {
assets: "./assests",
templates: {
"layout":"templates/layout.html",
"header":"templates/includes/book/header.html",
},
......
......
However with this configuration, the generated book is not picking the template file changes. However I do see the css/js changes that I had done.
For the record, layout and header template files do exist if you're going the "unadvised" (emphasizing the unadvised nature of this) route of:
Add "theme": "./customtheme" to your book.json file.
Create your customtheme folder in the root with the files from the Gitbook repo
Edit from there
This is so far the only way I've found edit your favicon, sidebar, header, and layout files. It's not recommended because you're no longer using the files in the repo, so updates could break it, but some things either aren't easy or possible to make changes without doing something messy and hacky like this. Hopefully simple things like updating a favicon, header, or sidebar could be made to be easier in the future. I've only found this solution after many, many google searches and plugin comparisons, so maybe some one has a better solution that I haven't found yet.
Templates "layout" and "header" don't exist. You can only change:
site: template for the website
glossary: template for the glossary
langs: template for the choice of languages
page: template for the ebook
Changing templates is really not advised, you should use plugins to only extend html,css,js using: https://github.com/GitbookIO/plugin/blob/master/index.js#L2
I just took over a web application from another developer, and I'm trying to clean it up. Currently there is only a single HTML file, and it is over 1,000 lines long. It contains at least a dozen Backbone templates, and I would really like to separate them into their own files. I'm not an expert in Backbone, and I've been searching the internet for a good while without finding much help. It seems that there should be a very simple, elegant, and even recommended way of doing this, but I have yet to discover it.
So, say we've got some code like this in index.html:
<script type="text/template" id="myTemplate1">
<p>Hello</p>
</script>
<script type="text/template" id="myTemplate2">
<p>World!</p>
</script>
How can I place them in separate files, such that Backbone will still be able to access them?
Edit:
Hi Anatoliy, thank you for your help. I've had some time to play around with this today, but I'm not sure where to put things. I inherited this code:
define(function (require, exports, module) {
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Handlebars = require('handlebars'),
jqueryUI = require('jquery-ui');
var myView = Backbone.View.extend({
tagName: 'div',
className: 'myView',
template: Handlebars.compile($('#myView').html()),
So where would you recommend putting the code you suggested? I tried inserting it in the Handlebars.compile() function with no luck. Thank you for your help, I just can't seem to find much of anything on the internet in terms of examples or guides.
Use require-js. Specifically with require-handlebars plugin (or whichever templating engine you prefer)
https://github.com/SlexAxton/require-handlebars-plugin
That way you get to put your templates into separate files, then load them in by doing:
define(['hbs!your/template/file'], function(tpl){
var html = tpl({data: 'stuff'});
});
I used this approach mentioned by require-handlebars-plugin but when trying to precompile them to use in production. using require-handlebars-plugin wasn't straight forward I managed to do this but after I spent much time debugging this, , my advice is to precompile templates from the beginning because changing this before production wasn't hasslefree.
You can use approach like:
http://nuunoo.wordpress.com/2013/06/08/javascript-pre-compiled-templates-with-handlebars-js/
and use grunt task for automating this:
https://github.com/gruntjs/grunt-contrib-handlebars
Hello everyone and thank you for taking time to read this.
I've been using Phalcon for quite a while for a high performance JSON/XML API.
The backend managing this application was/is still driven by an oudated version of symfony, but it is gonna be dropped in favour for Phalcon and the Volt Template engine.
Now my problem is the following:
Imagine a base application and a basic template and the application is modularized. Most modules are gonna be developed by different teams but they all have to integrate niceley, which from the program logic side is not a problem.
But imagine the following:
You have a simple page, some forms, head, navigation, etc, etc.
Now someone wants to add a module which injects a template block into the footer for whatever purpose. For example adding a TagCloud (for SEO purposes) into the footer.
The idea here is, that the plugin has way to edit any template files other than the ones it brings itself.
How can this be achieved without having to change the base templates after the initial development?
The idea is basically to hook into a event, lets call it TEMPLATE_RENDER for simplicity.
TEMPLATE_RENDER is fired, every listener that is registered for it now has its chance to add stuff to the template like additional blocks etc. All without having to manually change the core templates.
It would be sufficient if there is a way to simply add a bunch of template files together in Volt and output the compiled result.
EDIT:
Okay, after some thought what I'm looking for in Volt is this:
Compiler#compileMultipleFiles(String... files);
So it can be used like this:
$compiler->compileMultipleFiles('/path/to/template1','/path/to/template2', ...);
Which would do nothing else "in theory" than take everything in file1, file2, ..., fileN and put it into one large file and then compile that as a single template. If it is not yet possible I could emulate that function by simple having each files contents combined into a single file or cache variable and use compileString() but that would break any relative paths in the template, which would be a problem.
I could also compile each template down manually, but than I would end up with an pure html document without the ability to append to blocks in the main template.
Apparently there is no such function directly.
You can however use an array and iterate over this area at the end of the primary template and dynamically include any file passed into there.
I believe that you're looking for a Volt include. You can leave some tests in your templates like:
{% if foo.enabled %}
{% include "foo/bar.volt" %}
{% endif %}
If you need something more complex than this you can use template inheritance also.
So I'm building an Ember.js application. I've got more than two routers now, so it's becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.
I can't seem to figure out how to have handlebar templates outside of the html! The other thing is that I'd like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.
So to clarify:
I already stuff templates in index.html via <script> tags, I don't like it.
I don't want to jump back 20 years and put HTML in strings inside my javascript.
AJAXing static views seems ridiculous.
Without adding anything to the stack I don't see how you could do it other then putting them in index.html or in code one way or the other.
With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.
You could compile your templates in code like so:
App.View = Em.View.create({
template: Em.Handlebars.compile('{{outlet}}');
});
or if you are extending the view:
App.View = Em.View.extend({
defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});
or you could register them like so
App.register('template', 'ViewName', Ember.Handlebars.compile(template));
The best way I've found so far is to use a command line tool like Grunt. You set the paths where your templates are (so you can organize your handlebars files nicely), and grunt will automatically compile all the views into a single, minified JS file that you can include, whenever you create or modify a template.
Because your templates are already compiled you can ship your application with a much smaller version of handlebars.
You can see an example of a configured Grunt file for that here : https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
I am using Joomla! CMS to develop a website. In the not-so-distant past I customized a template to schlep up a website. It was fun and interesting to tear apart the code to de-joomla!-fy the template. So interesting that in fact, I am flirting with the idea of making my own template from scratch.
So, if I am to pursue this, where do I start? Do you know of any really good reference material, or should I just play with the code all day until things work out? I prefer to do tons of reading (for the concepts) before I go at it.
Create a HTML page with the layout you want, inclusive of stylesheets and Javascript
(1.5/2.5 is Mootools based)
(Joomla 3.x is jQuery based)
Adding Javascript
Keep the template initially very basic.
Save this page as index.php page.
The default directory layout is:
css
html
com_<componentname>/ mod_<modulename> (used to override the base templates of Components and Modules)
images
js
templateDetails.xml
index.php
favicon.ico
Change/Add the different Joomla constructs
Also updating the related templateDetails.xml with positions and file locations etc.
See a current template for an example of the layout.
Ex.
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
Header section:
<jdoc:include type="head" />
Your different Modules:
<?php if($this->countModules('search')) : ?>
<jdoc:include type="modules" name="search" />
<?php endif; ?>
<jdoc:include type="module" name="breadcrumbs" />
Your Main Content tag is:
<jdoc:include type="component" />
To allow your template the ability to display debug information add:
<jdoc:include type="modules" name="debug" />
For more advanced additions to a template have a look at the default templates (ja_purity, Beez).
To override component and module layouts copy the layout files of the component or module into a similarly named directory below the html directory of your template and change it.
Edit...
Extra utilities.
To highlight the used module names in a browser add tp=1 to the end of your URL ex. yourdomain.com?tp=1
To View an inactive but installed Template add template=template_name. ex. yourdomain.com?template=Beez
These two can be combined, like this. yourdomain.com?template=Beez&tp=1
For more information look at:
Joomla Template Tutorial Part 1 - Joomla Template Concepts
How to Create Your First Joomla Template
Joomla! Docs: Template Development
Google Joomla templates
The time-honored method of learning how to do code/templates/anything is to "steal" from someone who already knows how to do it and then modify that until:
you're happy with the outcome; and/or
you've learned enough to be able to go it alone.
I suggest that would be the quickest route to success. Theory is fine but you'll learn faster by doing, and making mistakes.