-
Download the jade4php example website and unzip it to your project folder. It doesn't really matter where this folder is or what you call it, but I would recommend somewhere in your home folder.
A live demo of the example project is available at www.jade4php.com including an online source code explorer.
-
Download and install node.js from nodejs.org. This will also install the Node Package Manager (npm) that you will use to install the jade dependencies for your projects.
-
Open a terminal window and navigate to the folder where you installed the example website in step (1) and type:
npm install
This will install the node.js dependencies defined in package.json for your project so that you can run jade using grunt.
The package.json file:
{
"name": "jade4php-example",
"version": "0.0.0",
"description": "An example jade4php project",
"homepage": "http://www.jade4php.com",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": {
"name": "Brian Etherington",
"email": "brian.etherington@outlook.com",
"url": "http://www.jade4php.com"
},
"repository": {
"type": "git",
"url": "git://github.com/BookArt/jade4php-example.git"
},
"bugs": {
"url": "https://github.com/BookArt/jade4php-example/issues"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/BookArt/jade4php-example/blob/master/LICENSE-MIT"
}
],
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-jade4php": "^1.0.0"
},
"private": true
}
-
Install grunt-cli using the node package manager npm (already installed with node in step 2 above):
npm install -g grunt-cli
You will use grunt to run jade to compile your templates presently. For further information about grunt and what it can do, see gruntjs.com.
The grunt tasks are defined in Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
compile: ['htdocs/templates/**/*.phtml'],
},
jade4php: {
compile: {
options: {
pretty: true
},
expand: true,
cwd: 'jade',
src: ['**/*.jade', '!_**/*.jade', '!layout/*.jade', '!mixins/*.jade', '!includes/*.jade'],
dest: 'htdocs/templates/',
ext: '.phtml'
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-jade4php');
grunt.registerTask('default', ['clean','jade4php']);
};
-
In the terminal window, type grunt to run the default task:
grunt
Running "clean:compile" (clean) task
>> 8 paths cleaned.
Running "jade4php:compile" (jade4php) task
File htdocs/templates/amazium.phtml created.
File htdocs/templates/conditional.phtml created.
File htdocs/templates/forms.phtml created.
File htdocs/templates/intro.phtml created.
File htdocs/templates/menu.phtml created.
File htdocs/templates/paras.phtml created.
File htdocs/templates/setup.phtml created.
File htdocs/templates/tables.phtml created.
Done, without errors.
What just happened ?
The templates in jade4php_example/jade folder were compiled as .phtml files to the jade4php_example/htdocs/templates folder.
Have a look at the jade templates and the equivalent .phtml files to see what has been generated.
-
If you do not already have one, you will need a Web Server with support for PHP.
If you want to get up and running quickly, you can use the development web server built into PHP. Download and install PHP from php.net/downloads.php.
Full instructions for configuration and installation can be found at php.net/manual/en/install.php.
You will be using the Command Line PHP so make sure the path to the PHP executable is in your PATH environment if you are using Microsoft Windows.
Open a second terminal window, navigate to the jade4php projects folder and type...
cd htdocs
php -S localhost:8000
This will start a web server on port 8000 with the document root set to your project's htdocs folder. In a browser, type:
localhost:8000/phpinfo.php
This should display information about the installed version of PHP. If you receive an error, go back and check your installation and configuration of PHP.
If you have successfully installed PHP, then in your browser you can now type:
localhost:8000/index.php
This will display the home page of the example website..
Alternatively, PHP support can be added to a number of web servers (IIS, Xitami, and so on), but most commonly Apache HTTP Server is used. Go to httpd.apache.org/docs/current/install.html for information on how to install and configure Apache.
-
Find the jade folder in your jade4php project folder and edit intro.jade to change some text and save the edited file. In the first terminal window, type grunt to update the changed templates.
grunt
Running "clean:compile" (clean) task
>> 8 paths cleaned.
Running "jade4php:compile" (jade4php) task
File htdocs/templates/amazium.phtml created.
File htdocs/templates/conditional.phtml created.
File htdocs/templates/forms.phtml created.
File htdocs/templates/intro.phtml created.
File htdocs/templates/menu.phtml created.
File htdocs/templates/paras.phtml created.
File htdocs/templates/setup.phtml created.
File htdocs/templates/tables.phtml created.
Done, without errors.
As before, the jade templates have been compiled to your htdocs/templates folder.
-
Refresh your browser to see the changes.
-
The Template Class
The job of managing template variables and displaying the HTML code is delegated to Template.class.php.
This code is based upon original code by Brian Lozier and has been greatly simplified by me for the purpose of managing the .phtml templates generated by Jade.
I am grateful to Brian for his article Beyond The Template Engine. At the time I first read the article, I leaned more towards a more feature rich template engine (Smarty) than the vanilla PHP he proposed. But with the advent of Jade, I think that Brian's ideas about PHP templating fit the bill perfectly.
<?php
class Template {
private $vars = [];
public function assign($name, $value) {
$this->vars[$name] = $value;
}
public function fetch($file) {
extract($this->vars);
ob_start();
include($file);
$contents = ob_get_contents();
ob_end_clean();
return $contents;
}
public function display($file) {
echo $this->fetch($file);
}
}
-
Using the template class with /tables.php:
<?php
include "lib/Template.class.php";
$template = new Template();
$table = [
['id' => 1, 'first_name' => 'Bruce', 'last_name' => 'Wayne', 'location' => 'Gotham City'],
['id' => 2, 'first_name' => 'Clarke', 'last_name' => 'Kent', 'location' => 'Metropilis'],
['id' => 3, 'first_name' => 'Oliver', 'last_name' => 'Queen', 'location' => 'Star City'],
['id' => 4, 'first_name' => 'Diana', 'last_name' => 'Prince', 'location' => 'Themyscira']
];
$template->assign('table', $table);
$template->display('templates/tables.phtml');
-
The corresponding jade code in jade/tables.jade...
This is an example of a table generated in PHP on the server.
table
thead
tr
th(scope='col') #ID:
th(scope='col') First Name:
th(scope='col') Last Name:
th(scope='col') Location:
tbody.striped
- id = '#'+php("$row['id']")
- first_name = php("$row['first_name']")
- last_name = php("$row['last_name']")
- location = php("$row['location']")
:php foreach($table as $row):
tr
td!= id
td!= first_name
td!= last_name
td!= location
:php endforeach;
