Cargando

Ir a contenido

X



Laravel

En este curso vamos a abordar uno de los frameworks más robustos de PHP, partiendo desde lo básico que es su instalación hasta la implementación de código complejo.


Escrito por may 04 2014 05:14

Subir Imagen con Redactor



Las librerías Javascript hacen que nuestros entornos de front-end sean mucho más ricos y dinámicos, al trabajar con Laravel debemos asegurarnos no solo que nuestra aplicación sea fácil de entender por otros desarrolladores que integren nuestro equipo, sino que también los usuarios tengan una gran experiencia de navegación.

Uno de los componentes básicos son los editores de texto para que los usuarios puedan escribir con algunas herramientas más propias de software de ofimática, entre ellos tenemos Redactor que ha ido ganando adeptos gracias a su facilidad de integración con nuestros proyectos.

En esta sección veremos cómo integrar Redactor en un formulario y poder preparar una ruta que nos permita subir una imagen en una aplicación hecha en Laravel.

¿Qué necesitamos?
Lo primero que necesitamos hacer es descargar Redactor de su repositorio en GitHub, basta con una rápida búsqueda en Google para obtenerlo, luego debemos copiarlo en el directorio public/js de nuestra aplicación estándar de Laravel y el archivo css correspondiente de la librería lo copiaremos en el directorio public/css, una vez tengamos esto podremos continuar con el curso.


Crear la ruta


Como toda vista en Laravel debemos primero crear la ruta que nos permitirá acceder a nuestro recurso en este caso formulario, primero vamos a indicar el nombre de la vista, vamos a utilizar Redactor de forma que identifiquemos este ejemplo, veamos en la siguiente imagen como nos queda la vista:


laravel_redactor.jpg



Construyendo el Formulario


Ya que tenemos nuestra ruta para acceder a la vista, ahora debemos crearla, para ello vamos a generar un archivo llamado redactor.php y lo colocaremos en el directorio app/views, dentro de este vamos a colocar la cabecera que debe hacer los llamados a las librerías correspondientes, aparte de Redactor, también necesitaremos jQuery pero este último lo podemos utilizar de la CDN de Google.

Veamos en la siguiente imagen como nos queda:


Vemos que creamos un campo con un id llamado “miCampo”, luego en la parte de script a este id le aplicamos un método constructor redactor() y dentro le indicamos que debe utilizar las funciones de subir imágenes de la librería.

Rutas Finales


Ahora debemos crear una ruta que tome los datos que recibimos de Redactor para guardar la imagen en el servidor y poder mostrarla en el campo de ingreso de texto, para ello vamos a aprovechar y utilizar JSON, veamos en la siguiente imagen como queda:


laravel_redactor3.jpg



Aquí vemos que validamos que recibamos el archivo, si no hay errores entonces movemos el archivo al destino final y luego generamos una respuesta en JSON con un link que Redactor puede utilizar para mostrarnos la imagen que acabamos de subir.

Por último generamos la ruta que nos va a mostrar la pantalla del formulario para que podamos seguir trabajando luego de subir la imagen:


laravel_redactor4.jpg



Con estos sencillos pasos podemos subir una imagen utilizando Redactor en nuestras aplicaciones hechas con Laravel, este procedimiento también puede aplicarse con otro tipo de archivos diferentes a imágenes, solo debemos cambiar lo que recibe el JSON por el nombre del archivo con su extensión.


¿Te ayudó este Tutorial?


3 Comentarios


Cristina Garcia
jun 10 2014 15:51
De fábula este curso. Muchas gracias Solvetic!!!! (Y jacosta :) )

Enrique Martin
jul 21 2014 13:58
Es la leche este curso. Mil millones de gracias Jacosta y Solvetic!!!!
DE 10.
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!


  Información

  •   Publicado may 04 2014 05:14
  •   Actualizado sep 07 2015 14:30
  •   Visitas 15.1K
  •   Nivel
    Profesional

X