ToDoVel [Parte 12] Rotas Nomeadas, Links Entre Páginas e Corrigindo Assets

Observação: Este tutorial refere-se ao Laravel-4-BETA, estando totalmente DESATUALIZADO para a versão atual. Muita coisa mudou no framework…

Na página de listagem de tasks seria bom termos um link para a página de criação de task.
Também, já que estaremos na página de criação de task, seria bom exibirmos o layout correto da página.

Rotas Nomeadas

Rotas nomeadas são rotas com nome.
Simples assim.
A idéia é que, as vezes, durante o ciclo de vida de um projeto, as rotas podem mudar de url e/ou podem mudar de controllers.
Assim, a cada alteração, você pode precisar ter que refazer várias referências ao longo do seu código.
Se você utiliza nomes (apelidos) para suas rotas, não há essa necessidade.

Vamos no arquivo routes.php dar um nome a rota da home e a rota para criar tasks.

Route::any('/', array("as" => "home",
		      function() { return View::make('hello'); }
		)
);

Route::get('task/add', array("as" => "addTask", "uses" => 'TaskController@getAdd'));

Note a leve mudança na estrutura da definição da rota.
Originalmente passamos a url no primeiro parâmetro e uma closure ou controller no segundo parâmetro.
Com rotas nomeadas no segudo parâmetro passamos um array de dois elementos.
O elemento “as”, que irá receber o nome para essa rota.
O outro elemento é a closure ou o controller que será utilizado.

Criando Links Entre Páginas

Atualmente, o Laravel 4 fornece 4 formas várias formas (mas eu só conheço 4) diferentes de se conseguir criar links ou descobrir a URL de alguma rota.
Para exemplificá-las, fiz a seguinte alteração no arquivo list_tasks.blade.php

<p>
   <a href="{{ URL::to('task/add') }}">Adicionar Task</a> <br />
   {{ Html::link('task/add', 'Adicionar Task') }} <br />
   <a href="{{ URL::action('TaskController@getAdd') }}">Adicionar Task</a> <br />
   <a href="{{ URL::route('addTask') }}">Adicionar Task</a> <br />
</p>
  1. {{ URL::to(‘task/add’) }} – Retorna a URL para a rota definida
  2. {{ Html::link(‘task/add’, ‘Adicionar Task’) }} – Cria um link para a rota definida
  3. {{ URL::action(‘TaskController@getAdd’) }} – Retorna a URL associada a um controle
  4. {{ URL::route(‘addTask’) }} – Retorna a URL de uma rota nomeada

O resultado final entre essas 4 formas é o mesmo, a diferença está na manutenção do código.
Imagine o seguinte cenário:
Se eu for lá no arquivo routes.php e alterar a rota ‘task/add’ para ‘task/adicionar’, o primeiro e o segundo link param de funcionar na hora, pois eles estão fazendo referência a uma rota que não existe mais.
Se, aproveitando a alteração eu mudar também o nome do controle de ‘TaskController@getAdd’ para ‘TaskController@getAdicionar’, também matei o terceiro link.
O único link que sobreviveu as alterações foi o quarto link pois, diferente dos outros, ele faz referência ao nome da rota – que não alterei nos exemplos.

O que eu gostaria de exemplificar aqui é a grande vantagem que temos em utilizar rotas nomeadas.
Se você não pode garantir que suas URLS ou Controllers não vão mudar ao longo do ciclo de vida do projeto, vale a pena nomear suas rotas para evitar futuras dores de cabeça com links quebrados.
Viva a facilidade de manutenção!

Corrigindo Assets

No nosso template, template.blade.php, estamos passando referências para nossos assets e não URLS verdadeiras.
Ou seja, ao invés de passarmos http://todovel/assets/css/bootstrap.css estamos passando apenas assets/css/bootstrap.css.
Isso significa dizer que, em URLS com muitas sub-URLS, como é o caso do http://todovel/task/add a referência pode se quebrar, fazendo com que o navegador não encontre os assets e a página fique feia 🙁

Conheço 3 formas de referencias para os assets, vou colocá-las lá no rodapé do template.blade.php para importar JavaScript:

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

{{ Html::script("assets/js/jquery.js") }}
<script src="{{ URL::to('/') }}/assets/js/bootstrap-transition.js"></script>
<script src="{{ Request::root() }}/assets/js/bootstrap-transition.js"></script>
  1. {{ Html::script(“assets/js/jquery.js”) }} – Cria a tag Script, importando o arquivo
  2. {{ URL::to(‘/’) }} – Retorna URL da página inicial, a URL raíz do site
  3. {{ Request::root() }} – Retorna a URL raíz do site

O primeiro exemplo é o mais legal de se usar, mas ai já passa a ser questão de gosto.

Para CSS é a mesma coisa.
O único item diferente é o primeiro, que para CSS é {{ Html::style(“caminho do css”) }}.

Na dúvida, você pode ver o código fonte do projeto no GitHub:
https://github.com/frenetic/todovel

13 thoughts on “ToDoVel [Parte 12] Rotas Nomeadas, Links Entre Páginas e Corrigindo Assets

  1. Olha eu novamente, e aqui já me respondeu a uma pergunta que te fiz no último post 😛 .

    Só uma coisa, não entendi muito o pq no meu só funciona com HTML (tudo em maiusculas) enquanto eu vejo no seu exemplo Html ? Será que teve alguma mudança no framework em si quanto a isso?

    []’s

    1. O framework mudou do beta 4 para o lançamento oficial.
      Durante as fases do beta o HTML já saiu, já entrou, já foi html, já foi Html, saiu novamente, voltou como HTML.
      Galera tava louca 😛

  2. consegui o link fazendo uma mescla do exemplo 2 e 4, ficou assim:

    {{ HTML::link(URL::route(‘addTarefa’), ‘Adicionar tarefa’) }}

    1. Junior, esse mesmo comportamento pode ser obtido com

      {{ HTML::linkRoute(‘addTarefa’, ‘Adcionar Tarefa’) }}

  3. O 4º link morre sim, no exemplo das rotas nomeadas.

    ===================

    Route::get(‘task/add’, array(‘as’ => ‘addTask’, ‘uses’ => ‘TaskController@getAdd’));

    ===================

    Se ele faz uma referencia a um metodo que não existe mais (getAdd() trocado por getAdicionar()) como pode funcionar?

  4. xiiii num consegui pegar o bootstrap com css não….
    já tentei um monte de jeito aqui e nada..

    fui acessar a pasta do assets/css/bootstrap só tinha dois arquivos o docs e o pigments-manni

    qnd abro o link do assets/css/bootstrap.css manda pra uma pagina de erro

    e agora?

  5. Para o CSS e JS e usei URL::asset, por exemplo:

    link href=”{{ URL::asset(‘assets/css/bootstrap.css’) }}” rel=”stylesheet”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *