Both sides previous revisionPrevious revisionNext revision | Previous revision |
en:tutorials:minitutorial:1.1.x [2009/01/07 21:43] – bibo | en:tutorials:minitutorial:1.2.x [2012/04/15 08:37] (current) – laurent |
---|
====== Mini Tutorial ====== | ====== Mini Tutorial ====== |
| |
The goal of this tutorial is to quickly show how you can develop an application with Jelix 1.1. | The goal of this tutorial is to quickly show how you can develop an application with Jelix 1.2. |
| |
| |
===== Download and installation ===== | ===== Download and installation ===== |
| |
First, [[en:download:stable:1.1#developer-edition|download the "developer" edition of Jelix]]. Jelix requires at least PHP 5.2 (See [[en:manual-1.1:installation:requirements|here a detailed list of requirements]]) | First, [[en:download:stable:1.2#developer-edition|download the "developer" edition of Jelix]]. Jelix requires at least PHP 5.2 (See [[http://docs.jelix.org/en/manual-1.2/installation/requirements|here a detailed list of requirements]]) |
| |
Then, unpack the archive file you have downloaded, with your archiver software companion. For example, with tar: | Unpack the archive file you have downloaded, with your archiver software companion. For example, with tar (replace x with you'r version): |
| |
<code bash> | <code bash> |
tar xzf jelix-1.1-dev.tar.gz | tar xzf jelix-1.2.x.x-dev.tar.gz |
</code> | </code> |
| |
After this, you have a directory @@F@jelix-1.1/lib/@@ in which you'll find all libraries used by jelix, and jelix itself. | After this, you have a directory @@F@jelix-1.2.x.x-dev/lib/@@ in which you'll find all libraries used by jelix, and jelix itself. |
| |
For the purpose of this tutorial, move jelix-1.1 folder in a directory of your web site. So that it will be accessible with a browser, at this URL for example: @@http://localhost/jelix-1.1/@@ (You can rename @@F@jelix-1.1/@@ as you wish). | For the purpose of this tutorial, move jelix-1.2.x.x-dev folder in a directory of your web site. So that it will be accessible with a browser, at this URL for example: @@http://localhost/jelix-1.2.x.x-dev/@@ (You can rename @@F@jelix-1.2.x.x-dev/@@ as you wish, for the rest of this guide, we assume you rename this directory to "jelix".). |
| |
===== Jelix scripts ===== | ===== Jelix scripts ===== |
| |
<code bash> | <code bash> |
cd lib/jelix-scripts/ # under linux | cd jelix/lib/jelix-scripts/ # under linux |
cd lib\jelix-scripts\ # under windows | cd jelix\lib\jelix-scripts\ # under windows |
</code> | </code> |
| |
To invoke help: | To invoke help: |
<code bash> | <code bash> |
php jelix.php help // generic help, lists all commands available | php jelix.php help # generic help, lists all commands available |
php jelix.php help command_name // specific command help | php jelix.php help command_name # specific command help |
</code> | </code> |
| |
</code> | </code> |
| |
You are now ready for prime. Your application is accessible at this URL: @@http://localhost/jelix-1.1/example/www/@@. Enter this URL in your browser. you should see: | You are now ready for prime. Your application is accessible at this URL: @@http://localhost/jelix/example/www/@@. Enter this URL in your browser. you should see: |
| |
{{en:tutorials:minitutorial:start_page_white_en.png}} | {{en:tutorials:minitutorial:start_page_white_en.png}} |
| |
Noticed this message saying that a CSS file is missing ? Copy the @@F@jelix-1.1/lib/jelix-www@@ directory into @@F@jelix-1.1/example/www@@ by renaming it to "jelix" (on a dedicated apache server, it is better to create an alias). This directory is important because it contains some files needed by jForms or other components. | Noticed this message saying that a CSS file is missing ? Copy the @@F@jelix/lib/jelix-www@@ directory into @@F@jelix/example/www@@ by renaming it to "jelix" (on a dedicated apache server, it is better to create an alias). This directory is important because it contains some files needed by jForms or other components. |
| |
Now you should see: | Now you should see: |
| |
{{en:tutorials:minitutorial:start_page_en.png}} | {{:en:tutorials:minitutorial:start_page_en-1.2.png?500}} |
| |
If there are some error messages in the "installation check" section, fix them. | If there are some error messages in the "installation check" section, fix them. |
| |
<code php> | <code php> |
class defaultCtrl extends jController { | /** |
| * @package example |
| * @subpackage example |
| * @author yourname |
| * @copyright 2010 yourname |
| * @link http://www.yourwebsite.undefined |
| * @license All right reserved |
| */ |
| |
| class defaultCtrl extends jController { |
| /** |
| * |
| */ |
function index () { | function index () { |
$rep = $this->getResponse('html'); | $rep = $this->getResponse('html'); |
| |
<code php> | <code php> |
class defaultCtrl extends jController { | /** |
| * @package example |
| * @subpackage example |
| * @author yourname |
| * @copyright 2010 yourname |
| * @link http://www.yourwebsite.undefined |
| * @license All right reserved |
| */ |
| |
| class defaultCtrl extends jController { |
| /** |
| * |
| */ |
function index () { | function index () { |
$rep = $this->getResponse('html'); | $rep = $this->getResponse('html'); |
</code> | </code> |
| |
Reload the page. The page title should now correctly display in your browser title bar. But still your page contains this: | Reload the page. The page title should now display accordingly in your browser title bar. But still your page contains this: |
| |
{{en:tutorials:minitutorial:minituto_1_en.png}} | {{en:tutorials:minitutorial:minituto_1_en.png}} |
| |
How is this possible although we don't have anything in our controller ? | How is this possible whereas we don't define any content in our controller ? |
| |
We saw that @@M@getResponse('html')@@ returns a @@C@jResponseHtml@@ object. However, it is possible to return an other object for the "html" type. It can be an other object which inherits from @@C@jResponseHtml@@, and which set things which are common for all actions. For example: CSS style sheets, the main template etc. This is very useful because you don't need to repeat this settings in your actions. And because this is very useful, the @@createapp@@ command creates a such class and a default template. This sort of classes are stored in the @@F@responses/@@ directory of the application, and are declared in the configuration file. | We have seen before that @@M@getResponse('html')@@ returns a @@C@jResponseHtml@@ object. However, it could return another object for the "html" type. It could be an instance of a class inheriting from @@C@jResponseHtml@@ and which set common things for all 'html' actions. Think about defining common CSS style sheets and JS scripts, your application main template etc. This class is very useful as you don't need to repeat this settings through all your actions. And because this is very useful, the @@createapp@@ command creates such a class and a default template. it is stored in the @@F@responses/@@ directory of your application, and is declared in the configuration file. |
| |
Let's see the content of @@F@example/responses/myHtmlResponse.class.php@@ created by @@createapp@@: | Let's see the content of @@F@example/responses/myHtmlResponse.class.php@@ created by @@createapp@@: |
| |
<code php> | <code php> |
| /** |
| * @package example |
| * @subpackage |
| * @author yourname |
| * @copyright 2010 yourname |
| * @link http://www.yourwebsite.undefined |
| * @license All right reserved |
| */ |
| |
| |
| require_once (JELIX_LIB_CORE_PATH.'response/jResponseHtml.class.php'); |
| |
class myHtmlResponse extends jResponseHtml { | class myHtmlResponse extends jResponseHtml { |
| |
public $bodyTpl = 'exemple~main'; | public $bodyTpl = 'example~main'; |
| |
| function __construct() { |
| parent::__construct(); |
| |
| // Include your common CSS and JS files here |
| } |
| |
protected function doAfterActions() { | protected function doAfterActions() { |
| // Include all process in common for all actions, like the settings of the |
| // main template, the settings of the response etc.. |
| |
$this->body->assignIfNone('MAIN','<p>no content</p>'); | $this->body->assignIfNone('MAIN','<p>no content</p>'); |
} | } |
</code> | </code> |
| |
This "customized" response set up in @@P@bodyTpl@@ the default template which will be used to generate the @@<body>@@ content of all pages : "exemple~main". This is the @@F@main.tpl@@ file in the example module. "exemple~main" is called a selector. A [[en:manual-1.1:selectors|Jelix selector]] is a shortcut to refer to a resource of a module. Here is the content of this template: | This "customized" response assigns to its @@P@bodyTpl@@ member the default template which will be used to generate the @@<body>@@ content of all pages : "example~main". This is the @@F@main.tpl@@ file in the example module. "example~main" is called a selector. A [[http://docs.jelix.org/en/manual-1.2/selectors|Jelix selector]] is a shortcut to refer to a resource of a module. Here is the content of @@F@example/module/example/templates/main.tpl@@: |
| |
<code html> | <code html> |
<h1 class="apptitle">example<br/><span class="welcome">{@jelix~jelix.newapp.h1@}</span></h1> | <h1 class="apptitle">Title for example<br/><span class="welcome">{@jelix~jelix.newapp.h1@}</span></h1> |
{$MAIN} | {$MAIN} |
</code> | </code> |
@@{$MAIN}@@ is an instruction which says: display the content of the template variable named @@V@MAIN@@. {@jelix~jelix.newapp.h1@} is an instruction which says: display the localized string (a string which value depends on the lang) identified by the "jelix.newapp.h1" key and stored in the "jelix" module. | @@{$MAIN}@@ is an instruction which says: display the content of the template variable named @@V@MAIN@@. {@jelix~jelix.newapp.h1@} is an instruction which says: display the localized string (a string which value depends on the lang) identified by the "jelix.newapp.h1" key and stored in the "jelix" module. |
| |
The method @@M@doAfterActions@@ is called after each action. In the example, it assigns @@"<p>no content</p>"@@ to the MAIN template variable if this variable doesn't exist yet (so, if it is not set by the action). | @@M@doAfterActions@@ method is called after each action. In the example, it assigns @@"<p>no content</p>"@@ to the MAIN template variable if this variable doesn't exist yet (so, if it is not set by the action). |
| |
Now you know why there is a content displaying on the start page. Now let's modify the template with this content: | Now you know why there is a content displaying on the start page. Now let's modify the template with this content: |
| |
<code php> | <code php> |
| /** |
| * @package example |
| * @subpackage |
| * @author yourname |
| * @copyright 2010 yourname |
| * @link http://www.yourwebsite.undefined |
| * @license All right reserved |
| */ |
| |
| |
| require_once (JELIX_LIB_CORE_PATH.'response/jResponseHtml.class.php'); |
| |
class myHtmlResponse extends jResponseHtml { | class myHtmlResponse extends jResponseHtml { |
| |
public $bodyTpl = 'example~main'; | public $bodyTpl = 'example~main'; |
| |
public function __construct() { | function __construct() { |
parent::__construct(); | parent::__construct(); |
global $gJConfig; | global $gJConfig; |
$this->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jelix.css'); | $this->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jelix.css'); |
| // Include your common CSS and JS files here |
} | } |
| |
protected function doAfterActions() { | protected function doAfterActions() { |
| // Include all process in common for all actions, like the settings of the |
| // main template, the settings of the response etc.. |
| |
$this->body->assignIfNone('MAIN','<p>no content</p>'); | $this->body->assignIfNone('MAIN','<p>no content</p>'); |
} | } |
} | } |
| |
</code> | </code> |
| |
Now you see: | Now you see: |
| |
{{en:tutorials:minitutorial:minituto_2_en.png}} | {{:en:tutorials:minitutorial:minituto_2_en-1.2.png|}} |
| |
==== Your first content ==== | ==== Your first content ==== |
| |
<code php> | <code php> |
| /** |
| * @package example |
| * @subpackage example |
| * @author yourname |
| * @copyright 2010 yourname |
| * @link http://www.yourwebsite.undefined |
| * @license All right reserved |
| */ |
| |
class defaultCtrl extends jController { | class defaultCtrl extends jController { |
| /** |
| * |
| */ |
function index () { | function index () { |
$rep = $this->getResponse('html'); | $rep = $this->getResponse('html'); |
So here, we put "<p>Hello !</p>" in the "MAIN" template variable. We now see: | So here, we put "<p>Hello !</p>" in the "MAIN" template variable. We now see: |
| |
{{en:tutorials:minitutorial:minituto_3_en.png}} | {{:en:tutorials:minitutorial:minituto_3_en-1.2.png|}} |
| |
| |
You see now: | You see now: |
| |
{{en:tutorials:minitutorial:minituto_4_en.png}} | {{:en:tutorials:minitutorial:minituto_4_en-1.2.png|}} |
| |
===== Retrieving parameters ===== | ===== Retrieving parameters ===== |
| |
Now type: | Now type: |
http://localhost/jelix-1.1/example/www/index.php?name=Max | http://localhost/jelix/example/www/index.php?name=Max |
| |
You will see: | You will see: |
| |
{{en:tutorials:minitutorial:minituto_5_en.png}} | {{:en:tutorials:minitutorial:minituto_5_en-1.2.png|}} |
| |
| |
To execute a specific action, you should add in the url the module name, the controller name, and the method name of the action. For our example, we can type: | To execute a specific action, you should add in the url the module name, the controller name, and the method name of the action. For our example, we can type: |
| |
http://localhost/jelix-1.1/example/www/index.php/example/default/index | http://localhost/jelix/example/www/index.php/example/default/index |
| |
If it doesn't work, perhaps your server is not configured to accept pathinfo. You can then configure it or activating the "simple" url engine in the configuration of the application, and then type: | If it doesn't work, perhaps your server is not configured to accept pathinfo. You can then configure it or activating the "simple" url engine in the configuration of the application, and then type: |
| |
http://localhost/jelix-1.1/example/www/index.php?module=example&action=default:index | http://localhost/jelix/example/www/index.php?module=example&action=default:index |
| |
See the manual for details. | See the manual for details. |
You can change it later if you want. | You can change it later if you want. |
| |
You can also change the "DocumentRoot" of the web site and to set it to the @@F@jelix-1.1/exemple/www@@ directory, or move the content of the @@F@example/www@@ to the root of your web site. | You can also change the "DocumentRoot" of the web site and to set it to the @@F@jelix/exemple/www@@ directory, or move the content of the @@F@example/www@@ to the root of your web site. |
| |
===== Conclusion ===== | ===== Conclusion ===== |