Slim is a PHP micro framework that helps you quickly write simple yet powerful web applications and APIs. Twig is a fast, secure, and flexible PHP template engine. The challenge is to use these two components and use Quasar Framework too.
Challenge
Quasar uses the Vue framework. This means it uses {{
and }}
so you can for example get defined data parameters in your layout. However, twig also uses that syntax.
Bellow is how you can create a working environment of all three.
Quasar, SlimPhp, Twig
This repository will provide you with a working implemenation of:
It is intended to explain how you can use the three of them together to have the power of SlimPHP for the backend, the secure flexibility of Twig for the PHP gui templates, and the vast collection of component of Quasar for the GUI.
Requirements & Installation
For this repository, you need to have at least PHP7 and composer installed. To get this 'site' up and running, clone the GIT repository. Then go to the base directory and execute the command
composer install
. This will create a 'vender' folder. When that is done, you can start the embeded php server withphp -S localhost:8080 -t public
. Open the browser and browse to that URL to view the result.SlimPhp
I'm not going to explain an installation of SlimPHP. Instead I point to the documentation online found here. In the repository of this explantion, you will find a more MVC based structure (without an integration to a database). In short this is what happens when you open the url
http://localhost:8080/index.php
. This may not be programmatically correct, but works for the explanation...\config\routes.php
tells to go tocontrollerHome
..\config\dependencies.php
at the bottom, there is a definition forcontrollerHome
which passes aview
andlogger
to the classHomeController
in the namespaceSample\Controllers
composer.json
says that theSample
application files are found in..\src\Sample
, so the controller class is found in..\src\Sample\Controlles
in a file calledHomeController.php
Twig
Above was explained where the url goes to. The next step is that a template, from Twig, is called to display something. The installation of Twig is described in the documentation of SlimPHP. The documentation for Twig can be found here. The next steps are done, continuing where we left of, to display something.
invoke
function. This calls therender
for twig template and passes the response, template name, and if desired some parameters..\src\Sample\Views
, according to the file..\config\bootstrap.php
where the directory is defined. This definition is used in..\config\dependencies.php
..\src\Sample\Views\home\main.twig
there is a line{% extends 'layout.twig' %}
which means that this file is included in..\src\Sample\Views\layout.twig
. If you look carefully, you will see it is added in the location marked as{% block blMainContent %}{% endblock %}
{{ strMessage }}
in this file, is being replaced with the content of the variable 'strMessage' which is passed to the templateQuasar
Finally, Quasar is used for the GUI. This sample doesn't really show any nice styling and such, but all documenation on components can be found here. This repository is making use of CDN implemenation. It is described in the Quasar documentation too on this page. In short, this is what is done.
..\src\Sample\Views\layout.twig
a link is added to an icon set..\src\Sample\Views\layout.twig
a link is added the animations..\src\Sample\Views\layout.twig
a link is added to the quasar CSS (in this case MAT)..\src\Sample\Views\layout.twig
a link is added to vue (in the body!)..\src\Sample\Views\layout.twig
a link is added to quasar (in the body, after vue!)These steps enable the use of Quasar. If you would do only this, you will get the styling, but not the objects. So you need to initiate quasar and vue which here is done with this code.
the Magic
Now the magic begins to finalize the implementation so the data property
strMessage2
found in themain.twig
can also be used. As mentioned earlier, Vue also uses{{
and}}
so that is a problem. To bypass this, in the definition of Vue, shown above, a line is added.delimiters: ['[[', ']]']
is telling Vue to use[[
and]]
instead, so this is what you see inmain.twig
.