Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
en:tutorials:minitutorial:1.1.x [2009/01/07 20:17] – bibo | en:tutorials:minitutorial:1.2.x [2011/02/28 15:37] – ilon |
---|
====== 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 [[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. |
===== Implementing an action ===== | ===== Implementing an action ===== |
| |
Let's implement a default action. An action is a process which generates a page. It is implemented as a method in a class called a "controller", and a controller can implement several actions. Open the @@F@example/modules/example/controllers/default.classic.php@@ file: | Let's implement a default action. An action is a process which generates a page. It is implemented as a method in a class called a "controller". A controller can implement several actions. |
| |
| Open @@F@example/modules/example/controllers/default.classic.php@@ file: |
| |
<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> |
| |
We state here that we retrieve a @@C@jResponseHtml@@ object throw the @@M@getResponse()@@ method because of the "html" type as it is indicated. Then we return it to indicate that its content must be returned to the browser. | What this code means is that **index** action of **default** controller retrieves a @@C@jResponseHtml@@ object through the @@M@getResponse()@@ method by passing "html" as argument. After processing, the action returns this response thus indicating that its content must be returned to the browser. |
| |
| |
@@C@jResponseHtml@@ has a @@P@body@@ property, which is a @@C@jTpl@@ object. jTpl is a template engine provided by Jelix. In the controller, you see that the @@C@assignZone()@@ method is called. It says: get the content of the 'check_install' zone which is stored in the 'jelix' module, and put this content into the template variable named @@V@MAIN@@. You will see what is a zone later. 'Check_install' zone is a zone which show the main content of the start page. As we don't need it anymore, delete this line so you will have this in your controller: | @@C@jResponseHtml@@ has a @@P@body@@ property, which is a @@C@jTpl@@ object. jTpl is a template engine provided by Jelix. |
| |
| In the action code above, you see a call to @@C@assignZone()@@ method. This means : get the content of the 'check_install' zone which is stored in the 'jelix' module, and assign this content to the template variable named @@V@MAIN@@ (You will see what is a zone in details later). 'Check_install' is a zone which shows results of install checkings. If those results are ok, you don't need it anymore. delete this line so you will have this in your controller: |
| |
<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'); |
==== Response object ==== | ==== Response object ==== |
| |
The @@C@jResponseHtml@@ object generates a HTML response (a HTML page). It generates automatically the @@<head>@@ part of HTML, from some of its properties. Let's define the title of the page. Add this in the @@M@index()@@ method, before the return: | a @@C@jResponseHtml@@ object generates an HTML response (an HTML page). It automatically generates the @@<head>@@ part of HTML, from some of its properties. |
| |
| Let's define the title of the page. Add this in the @@M@index()@@ method, just before returning the response object : |
| |
<code php> | <code php> |
</code> | </code> |
| |
Reload the page. The title of the page is now display in your browser title bar. But the 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 [[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|}} |
| |
| |
| |
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: |
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 ===== |