CODEWITHSUNDEEP
phpvuejs2twigslim-3quasar-framework
Edgar Koster
Edgar Koster

Reputation: 549

Howto use Quasar with SlimPHP and Twig

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.

Upvotes: 2

Views: 991

Answers (1)

Edgar Koster
Edgar Koster

Reputation: 549

Quasar, SlimPhp, Twig

This repository will provide you with a working implemenation of:

  • SlimPhp
  • Twig template engine
  • Quasar framework (powered by Vue)

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 with php -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.

  • the file ..\config\routes.php tells to go to controllerHome
  • in ..\config\dependencies.php at the bottom, there is a definition for controllerHome which passes a view and logger to the class HomeController in the namespace Sample\Controllers
  • composer.json says that the Sample application files are found in ..\src\Sample, so the controller class is found in ..\src\Sample\Controlles in a file called HomeController.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.

  • in the controller class file, you can see that there is an invoke function. This calls the render for twig template and passes the response, template name, and if desired some parameters
  • the template location is configured to ..\src\Sample\Views, according to the file ..\config\bootstrap.php where the directory is defined. This definition is used in ..\config\dependencies.php
  • when you look at ..\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 template

Quasar

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.

  • in ..\src\Sample\Views\layout.twig a link is added to an icon set
  • in ..\src\Sample\Views\layout.twig a link is added the animations
  • in ..\src\Sample\Views\layout.twig a link is added to the quasar CSS (in this case MAT)
  • in ..\src\Sample\Views\layout.twig a link is added to vue (in the body!)
  • in ..\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.

<div id='q-app'>
<q-layout>
    <q-layout-header>
        header
    </q-layout-header>
    <q-page-container>
        {% block blMainContent %}{%  endblock %}
    </q-page-content>
    <q-layout-footer>
        footer
    </q-layout-container>
</q-layout>
</div>

<script>
new Vue({
    el: '#q-app',
    delimiters: ['[[', ']]'],
    data: function () {
        return {}
    },
    methods: {}
})
</script>

the Magic

Now the magic begins to finalize the implementation so the data property strMessage2 found in the main.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 in main.twig.

Upvotes: 2

Related Questions