Angular 2 avanzado: Gestión de archivos en PHP

Borrar archivos de la API

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tomaremos los datos provenientes de nuestra API de archivos para obtener la información específica de un archivo y enviarla a otro punto de la API que puede seleccionar ese archivo y removerlo del sistema.
08:30

Transcripción

En esta lección, vamos a aprender a borrar archivos y de paso vamos a aprender algunos trucos para el manejo y envío de eventos dentro de Angular. Yo acá tengo mi aplicación que está leyendo una carpeta. Puedes ver que al lado izquierdo tengo la aplicación. Al lado derecho tengo la carpeta que está leyendo. Y, por ejemplo, acá tengo dos archivos. Voy a copiar y pegar algunos. Y ahora que tengo varias copias voy a refrescar mi aplicación que va a tener la información de todas estas copias y todos los archivos que se encuentran en la carpeta. Lo que vamos a hacer es que vamos a aprender cómo eliminar cada uno de estos archivos utilizando, en este caso, el botón que ya tenemos definido para borrar. Para eso vamos a ir al código de nuestra aplicación y vamos a buscar el componente que se encarga de administrar cada uno de los ítems que están desplegándose en pantalla. Vamos a buscar, específicamente, el componente llamado "item-archivo". Y vamos a buscar su plantilla. Vemos que acá se está desplegando la opción de editar y la acción de borrar, que son los íconos que nos están apareciendo dentro de la aplicación: estos dos botones. Vamos a asignarle un evento al ícono de borrar. Vamos a buscar la opción de borrar y le vamos a asignar un evento. En Angular, los eventos se definen a través de paréntesis y el nombre del evento. Por ejemplo, "(clic)". Y vamos a asignarle un método. En este caso, vamos a ponerle "borrar()" y vamos a definir el valor que se encuentra dentro de este ítem. Así que, vamos a utilizar la información que ya tenemos de "itemInfo" y la vamos a inyectar dentro de este método. Vamos a pasar, entonces, a la parte de código que se encuentra dentro de "item-archivo.component.ts" y vamos a generar un método que se active cada vez que hacemos clic. En este caso: "borrar". Así que vamos a crearlo y vamos a insertar un método llamado "borrar()" que va a devolver nada, así que le definimos la propiedad "void". Y nosotros acá nos vamos a conectar con un archivo externo. Ese archivo externo puede eliminar cualquier archivo que se encuentre dentro de una carpeta. Pero para poder hacerlo, necesitamos definirle un parámetro que es la ruta del archivo que queremos eliminar. Así que son dos partes: La primera: necesitamos conectarnos con un archivo externo. Y la segunda: decirle cuál debe ser el archivo que debe escoger para eliminar. Entonces, nosotros vamos a incluir algunos elementos adicionales dentro de nuestro código para podernos conectar remotamente con un documento. Para eso necesitamos incluir los módulos de HTTP de Angular. Yo ya tengo ese código listo. Lo vamos de una vez a importar cuatros diferentes elementos que va a ser: "Http", "Response", "RequestMethod", "Request". Todos ellos desde el módulo central de Angular, específicamente, "http". Ahora, esto nos va a permitir a nosotros conectarnos con archivos externos. También vamos a necesitar definir dentro del constructor de nuestra clase la variable "http" para tenerla disponible dentro de nuestra aplicación. Y una vez que tengamos todo esto listo vamos a ir a el método "borrar()". Ahora, en "borrar()" vamos a llamar a "this.http" que ya tenemos creado. Vamos a llamar a el método "request()" que nos permite a nosotros acceder datos externos. Una vez que hagamos la llamada a "request()", la cual, dentro de un momento, vamos a trabajar, voy a agregarle una promesa a través del método "subscribe()", y vamos a ejecutar un código en cuanto tengamos una respuesta. Vamos entonces a editar cuál va a ser nuestra petición o nuestro "request". Dentro de esto, yo voy a utilizar un objeto que se va a llamar "new Request". Vamos a definir este "Request" y le vamos a incluir unos parámetros en formato JSON. Los parámetros que vamos a definir va a ser la forma en que vamos a llamar este archivo. Por ejemplo, necesitamos asegurarnos de que el método que estamos utilizando sea el método "Get". Así que vamos a definirle que la propiedad "method" de esta llamada va a ser de tipo "RequestMethod.Get". Así definimos y nos aseguramos el tipo de llamada que vamos a hacer de este archivo que estamos invocando. También vamos a definir el archivo a través de la propiedad "url". En este caso voy a dejar este espacio en blanco. Y por último, voy a definir a través de un parámetro llamado "search" los valores de posibles variables que quiero enviar. Ahora, nosotros estamos utilizando un archivo externo que se encuentra dentro de mi servidor y yo voy a incluir acá la ruta a este archivo. El archivo se llama "borrar-archivos.php" y este documento me permite a mí borrar cualquier archivo en cuanto yo le defina la ruta. Ahora, una vez que ya tenemos definido cuál es el archivo que voy a llamar, le voy a enviar dentro de el parámetro "search" algunos valores para que pueda reconocerlo. En este caso, mi documento va a recibir un valor específico que es una variable llamada "ruta-archivo". Aquí es donde yo le voy a definir la ruta del archivo que quiero borrar. Si recordamos la forma en que estamos invocando este método, vamos a ver que nosotros llamamos, al hacer clic sobre alguno de los elementos, alguno de los archivos que tenemos, vamos a llamar "borrar", pero también estamos inyectando un dato. En este dato se encuentra la información sobre un archivo. Lo vamos a utilizar para decir cuál es el archivo que queremos borrar. Vamos a crear la instancia de este dato que estamos recibiendo como ítem. Y acá vamos a tener la información de el documento que estamos eligiendo para borrar. Sabemos que dentro de este objeto tenemos un valor que se llama ruta, y allí está la ruta en la que se encuentra nuestro documento... Tengo un error de sintaxis acá, vamos a agregar un "+". Ahora, ya tenemos la ruta del documento. También tenemos el nombre del documento, así que lo voy a agregar, pero lo voy a concatenar con un "/" para que me quede, por ejemplo, "micarpeta/archivo.php". Por ejemplo, para que tengamos el nombre. Así es como vamos a saber qué archivo borrar. Entonces, llamamos un archivo, le definimos el valor de el objetivo que queremos borrar, y ya tenemos nuestro código básico. Ahora, cuando nosotros utilizamos el método "subscribe()", nos permite a nosotros ejecutar un código en el momento en que tenemos una respuesta. Vamos a definir a un par de parámetros, acá, y vamos a decir que "res", que va a ser nuestra respuesta, sea de tipo "Response", y cuando tengamos una respuesta de el archivo que vamos a invocar, ejecutemos un código. En este caso, solamente vamos a poner "console.log()" para recibir información, vamos a poner acá un dato... De hecho podemos también poner la respuesta que estamos recibiendo. Listo, estamos preparados para borrar archivos y también la respuesta dentro de nuestro servidor. Vamos a revisar, entonces, los archivos que se encuentran en nuestra carpeta de ejemplo. Acá están los archivos que nosotros vamos a trabajar. También vamos a revisar la aplicación. Vemos que la aplicación está desplegando los mismos datos. Ahora vamos a refrescar y vamos a elegir un archivo para eliminar. Por ejemplo, voy a eliminar este archivo que se llama acá "copia (2)". Vemos que se ha eliminado un archivo. "copia (3)"... se ha eliminado. "copia (4)", "copia (5)", "copia (6)", "copia (7)", "copia (8)", copia (9)"... ...y también "copia". Todos estos archivos no están desapareciendo secretamente, no es que estoy utilizando algún tipo de elemento mágico. Simplemente que se está ejecutando mi código PHP y yo le estoy dando las instrucciones para que cada uno de estos archivos se borren. Y tenemos acá, ahora sí, refrescamos y vemos que ya se han eliminado todos los archivos, y que estamos borrando archivos a través de Angular 2 y PHP.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Formadores:
Fecha de publicación:19/04/2017
Duración:3:20 horas (33 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.