Laravel, parte 12: Javascript, Css e imágenes

15 Dic

Una aplicación web está compuesta por un front y un back, el primero es toda la funcionalidad que se ejecuta en el cliente, en el navegador del usuario; mientras que el segundo es todo lo relacionado con el servidor y la base de datos.

Hasta ahora hemos visto cómo trabaja Laravel desde el lado del servidor, claro está Laravel es un framework de PHP, y PHP es parte del back. Sin embargo mediante los helpers Laravel nos facilita bastante el trabajo del cliente.

Archivos de acceso público

Dijimos que Laravel nos brinda la posibilidad de acceder a una acción con una url personalizada, a diferencia de una aplicación tradicional en donde la url apunta a un archivos específico. Sin embargo en Laravel esto también es posible.

Dentro de nuestro proyecto deberíamos tener una carpeta de nombre ‘public’ a la misma altura de ‘app’. Bueno, dentro de ésta nosotros podemos tener aquellos archivos de carácter, valga la redundancia ‘público’. Con esto me refiero a que yo puedo subir dentro de la carpeta ‘public’ un archivo PDF con el nombre ‘archivo.pdf’ y luego acceder al mismo mediante la url de mi página y el nombre de mi archivo. Por ejemplo:

http://localhost:8000/archivo.pdf

Dentro de esta carpeta ‘public’ deberían estar todos los archivos de tipo .js y .css, o imágenes como .jpg, .png, .gif, etc. O también otro tipo de archivos menos frecuentes como música, vídeos, pdf, etc.

Para ello vamos a ir a nuestra carpeta ‘public’ y dentro crearemos otras sub carpetas llamadas: ‘images’, ‘css’ y ‘js’.

Dentro de ‘images’ guardaremos la siguiente imagen:

Dentro de ‘css’ vamos a crear una hoja de estilos llamada style.css, con el siguiente código:

#principito {
   box-shadow: 2px 2px 10px #000;
   -moz-box-shadow: 2px 2px 10px #000;
   -webkit-box-shadow: 2px 2px 10px #000;
}

Y dentro de ‘js’ una librería de jquery con el nombre jquery.js, la versión que más te guste.

Ahora vamos a ir dentro de app -> views y vamos a crear una carpeta llamada ‘test’, y dentro de ésta, un archivo con el nombre: test.blade.php. Este archivo tendrá el siguiente código:

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> Laravel </title>
    {{ HTML::style('css/style.css') }}
    {{ HTML::script('js/jquery.js') }}
    <script type="text/javascript">
       $(document).ready(function(){
       $("#principito").hover(function(){
          $(this).animate({
                'opacity': 0.1
             }, 1000);
          }, function(){
             $(this).animate({
                'opacity': 1.0
             }, 500);
          });
       });
    </script>
 </head>
 <body>
    <div>
       {{ HTML::image('images/el_principito.jpeg', "Imagen no encontrada", array('id' => 'principito', 'title' => 'El principito')) }}
    </div>
 </body>
</html>

Ahora analicemos el código.

Por empezar tendremos un helper para cargar nuestra hoja de estilos:

{{ HTML::style('css/style.css') }}

Este helper recibirá un parámetro con la ruta donde se encuentra el archivo .css, dentro de la carpeta public. El mismo generará un código con este aspecto:

<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/style.css">

También tendremos un segundo helper para cargar la librería de jquery:

{{ HTML::script('js/jquery.js') }}

El código generado será algo así:

<script src="http://localhost:8000/js/jquery.js"></script>

Y la imagen de El principito:

{{ HTML::image('images/el_principito.jpeg', "Imagen no encontrada", array('id' => 'principito', 'title' => 'El principito')) }}

Este helper recibirá dos parámetros. El primer será la ruta a la imagen a cargar, el segundo el alt (atributo que se visualizará si no se carga la imagen), y finalmente un tercer parámetro opcional con un array con atributos adicionales, en donde vamos a incluir el title y el id del elemento.

El resultado será algo así:

<img src="http://localhost:8000/images/el_principito.jpeg" id="principito" title="El principito" alt="Imagen no encontrada">

Ahora podemos crear la acción que carga esta vista yendo a app -> routes.php y agregando:

Route::get('test', function(){
   return View::make('test.test');
});

Yo lo hice de esta manera, para que sea más rápido, pero si preferís crear un controlador con una acción para testear este ejemplo, mejor.

Saludos!

Anterior: Laravel, parte 11: Modelos y relaciones

Siguiente: Laravel, parte 13: Ajax

Redes sociables

    20 thoughts on “Laravel, parte 12: Javascript, Css e imágenes

    1. Enhorabuena, has realizado un buen trabajo. Buen tutorial, está muy bien explicado y me ha sido de gran ayuda para comenzar con Laravel.

      Muchas gracias! Revisaré los demás manuales que seguro que están bien.

    2. muy buenos tutoriales, me sirvio muchisimo, haber si realizas algun tutorial de peticiones ajax en laravel, que yo no lo pillo, Muchas gracias por tus tutoriales!!!

    3. Hey, esta muy bien explicado muchas gracias, me gustaría saber como podría hacer algo similar pero para mostrar un archivo pdf que he cargado previamente al servidor, la intención es poder visualizar el archivo en un target _blank en el aplicativo.

      gracias por su tiempo :)

      • Creo, si entendí bien, querés un enlace que abra un PDF en una nueva ventana. Supongo que sería algo así:

        {{ link_to (‘archivo.pdf’, ‘Ver PDF’, array(‘target’ => ‘_blank’)) }}

        El helper link_to te permité agregar un tercer parámetro opcional con los atributos que quieras.

        Saludos!

    4. muchas gracias me sirvió de mucho tu explicación.
      me sacaste de un problema XP

    5. Gracias por estos fantásticos tutoriales.

      He seguido los pasos y me visualiza el mensaje “Imagen no encontrada”

      Los archivos estan dentro de public

      Con firebug puedo ver:

      “NetworkError: 404 Not Found – http://localhost/laravel/public/js/jquery.js
      “NetworkError: 404 Not Found – http://localhost/laravel/public/css/style.css
      “NetworkError: 404 Not Found – http://localhost/laravel/public/images/el_principito.jpeg

      En el codigo HTML tiene

      Gracias de antemano por su ayuda

      • Gracias a vos por comentar.

        Miguel, esa carpeta public, representa, valga la redundancia, todos los archivos públicos de tu proyecto, osea a lo que tiene acceso el visitante, por ejemplo si hubiese un archivo PDF dentro de public se accedería como:

        tusitio.com/archivo.pdf

        Por tanto, si el navegador tira ese error por pantalla, es porque no se está accediendo correctamente.

        La forma correcta sería, por ejemplo, para acceder a una imagen:

        La barra al principio está haciendo referencia a la url raíz del proyecto, y el navegador nunca debería enterarse que existe esa carpeta public.

        Saludos!

        • Buenos días:

          En la vista pongo el siguiente código.

          {{ HTML::image(‘images/el_principito.jpeg’, “Imagen no encontrada”, array(‘id’ => ‘principito’, ‘title’ => ‘El principito’)) }}

          El HTML contiene (Sin las comillas)

          “http://localhost/laravel/public/images/el_principito.jpeg”

          Si coloco en la barra de direcciones del navegador

          “http://localhost/laravel/images/el_principito.jpeg”

          de acuerdo a lo que menciona, debería verse la imagen, verdad? sin embargo visualiza el siguiente error

          Symfony \ Component \ HttpKernel \ Exception \ NotFoundHttpException

          Gracias por su ayuda.

          • Podrías indicarme cuál es la ruta que ingresas en tu navegador, cuando accedés a la raíz de tu aplicación?

    6. Fernando, quedo de ti eternamente agradecido. Felicitaciones por la calidad y super agilidad, en la ayuda brindada.

      Cuando tenga el honor de conocerte, te invitaré a unos cuántos cafes.

      Te escribo desde Madrid.

    7. Geniales tutoriales, me estan ayudando un montón!

      Me ha parecido un tanto raro el uso que aplicas a la etiqueta ‘alt’ que en mi entender debería describir en modo texto el contenido de la imagen por si ésta no se carga, no? Lo digo por si hay alguien que empieza, que supongo que no es el caso, para no confundirles :)

      Un saludo y enhorabuena de nuevo! Nos podemos apuntar a la paella? ja ja

      • Sí, en realidad ese es el texto que va a visualizar por pantalla, en caso de que no se cargue la imagen.

    Comments are closed.