Template Layout and Routes

Question

Template Layout and Routes

Navigation

#1 by (5 votes)

4

I'm working on a system that uses MVC as follows,

 View       ->  HTML,CSS
 Model      ->  PHP
 Controller ->  JS

Basically, all system actions work in the following order:

User triggers some action in js it validates and sends to php, in php it does the necessary queries and validations and returns to js can update html with data. >

My concern is that with the increase of the pages my layout gets more and more "Polluted, full of code repetitions, totally Ante-DRY , rsrs."

To try to improve this situation, I created a file called funcoes.js , in it are the functions of general use, and the functions of initialization of the app, for example:

 versao();
 validaUsuario();
 permissoesUsuario();
 favoritos();

Now

 menu();
 rodape();

This menu takes the file menu.html and loads all pages that are a <div id='menu'></div> using the .load() function of jQuery .

The footer works the same way. But using load or append always has some delay / render failure of html .

My questions:

1 ° - Can you create a template type blade of laravel using only HTML/JS/CSS ?

2 ° - I know that to use routes we must have mod_rewrite of php enabled and use .htacess , how could I use routes using my default MVC ?

php javascript html jquery css

asked by anonymous 17.09.2015 / 21:59

1 answer

How to create a simple interpreter? [closed] Jquery Autocomplete

score 5 · Accepted Answer

1st - Is it possible to create a laravel blade type template using only HTML / JS / CSS?

Yes, there are several libraries for this, but the most famous, used, and most complete is Handlebars.js: link

Example

Template:

<script id="some-template" type="text/x-handlebars-template">
  <table>
    <thead>
      <th>Username</th>
      <th>Real Name</th>
      <th>Email</th>
    </thead>
    <tbody>
      {{#users}}
        <tr>
          <td>{{username}}</td>
          <td>{{firstName}} {{lastName}}</td>
          <td>{{email}}</td>
        </tr>
      {{/users}}
    </tbody>
  </table>
</script>

Adding the template and transforming the template into HTML:

var source   = $("#some-template").html();
var template = Handlebars.compile(source);
var data = { users: [
    {username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
    {username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
    {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
  ]};
$("#content-placeholder").html(template(data));

However, the real recommendation is to use an MVC JavaScript framework

AngularJS solves the architecture you've detailed, but in a much more powerful and complete way.

AngularJS has two-way data binding: When you change the model, the view updates " automatically ". So, you do not have to worry about passing data to the template or dealing with elements of the DOM directly (for example, adding a new

in a list, Angular does it yourself if you set the template as such). Here is an example of a loop:

<!-- Itera no array produtos, criando um <li>Nome do Produto</li> para cada produto -->
<ul>
  <li ng-repeat="produto in produtos">{{produto.nome}}</li>
</ul>

When retrieving data from the server (it can be from your PHP project or any API), HTML is updated automatically.

Angular is from Google and is one of the hottest libraries right now. In fact, in the web development world, there is no other thing to talk about nowadays, other than Angular (and Node, and other related).

A basic example:

<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"/><script>angular.module("app", [])
        .controller("HomeCtrl", function HomeCtrl($scope) {
          $scope.botao = "Texto do Botão";
        });
    </script>
  </head>
  <body ng-controller="HomeCtrl">
    <!-- O que você digitar aqui será refletido automaticamente no botão -->
    <input ng-model="botao"/>
    <button>{{botao}}</button>
  </body>
</html>