Layout Template and Routes

Asked

Viewed 931 times

4

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

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

Basically all system actions work by going through the following order:

User triggers some action on js it validates and sends to php, on php it makes the necessary queries and validations and returns to the js be able to update the html with the data.

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

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

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

and now 

 menu();
 rodape();

This menu takes the file menu.html and click on every page that is a
<div id='menu'></div> using the function .load() of jQuery.

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

My doubts:

1° - It is possible to create a template type the blade of laravel using only HTML/JS/CSS?

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

php javascript jquery html css
  • 1

    I found curious how you identified part of your MVC in the client (JS and CSS), part in the server (php) and part in both (HTML). Usually when talking about MVC, it is either the client architecture (Angular, Backbone, Ember) or the server architecture (Cakephp, Symfony, and Laravel itself, among many others).

  • 1

    of course, I started studying laravel and saw that the structure was quite different, I do not see how something so bad this organization actually helps me a lot when it comes to providing maintenance.

  • I’m not even saying it’s bad. I’m sorry if it sounded that way.

1 answer

5


1° - It is possible to create a Laravel Blade template using HTML/JS/CSS only?

Yes, there are several libraries for this, but the most famous, and most complete is Handlebars.js: http://handlebarsjs.com/

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 model 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 a Javascript MVC framework

The Angularjs solves the architecture you detailed, but much more powerful and complete.

Angularjs has two-handed data Binding: when changing the model, the view updates "automatically". So, you don’t have to worry about passing data to the template and you don’t have to deal with DOM elements directly (for example, adding a new <li> in a list, Angular does it alone if you set the template as such). Take this 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 you get server data (it can be from your PHP project or any API), HTML is automatically updated.

Angular is from Google and is one of the hottest libraries at the moment. In fact, in the world of web development there is no talk of anything other than Angular (and Node, and others 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>

Browser other questions tagged php javascript jquery html css

You are not signed in. Login or sign up in order to post.