Creacion de un CRUD utilizando POO (Parte 5)

Buenos dias a Todos.

Agradeciéndoles por sus comentarios y opiniones acerca del material que comparto con ustedes a través de este medio.

Vamos a realizar unos pequeños cambios antes de seguir con el desarrollo de nuestra aplicación CRUD.


Lo Primero que vamos a modificar es la estructura del archivo index.php que inicialmente Contienes las 4 opciones (Creación, consulta, modificación y eliminación), eliminamos las 2 ultimas para que quede de la siguiente forma:

 

¿Y por que? lo que pretendo es aprovechar la opción de la consulta que vimos en la entrada anterior (ver aqui) y en el momento que se cargue el estudiante que buscamos aparezcan junto a el las 2 opciones que eliminamos del menu, es decir, Editar y eliminar.

Segundo paso, creamos una carpeta llamada img, donde vamos a almacenar las imágenes que utilizamos para nuestro proyecto, y pegamos dentro de ella 2 imágenes (eliminar.gif, editar.gif)

Como tercer paso modificaremos también el archivo consulta_estudiante.php ubicado en la carpeta ajax, al cual le agregaremos 2 columnas mas, donde mostraremos las 2 opciones mencionadas, de esta forma:

Si vemos en la imagen estamos utilizando primero un elemento <a> osea un hipervínculo, pero si nos fijamos en el href colocamos javascript:void(0), es decir que no devuelva nada, por que vamos a utilizar es la propiedad onclick para ejecutar funciones javascript como lo hemos venido haciendo. Y dentro del hipervínculo colocamos un elemento <img> para mostrar nuestras imagenes.

Dando como resultado lo siguiente:

Ahora vamos a agregarle mas cosas a nuestros hipervinculos para que empiece a ser funcional. Empecemos con la etiqueta title, de esta forma:

Logrando que cuando se ubique el puntero del mouse sobre alguna de las 2 imagenes nos muestre una leyenda como esta:

Ahora, vamos a empezar con lo que mas nos interesa que es poder editar o eliminar nuestros estudiantes.
Por ser mas sencillo comencemos por eliminar a un estudiante.

Abrimos el archivo funciones.js de la carpeta js y agregamos la función elimina_estudiante a la cual le pasamos como parámetro el ID del estudiante:

Vamos a nuestra clase estudiantes.php y creamos el objeto con el cual pretendemos eliminar a nuestro estudiante:

Ahora creamos dentro de la carpeta ajax el archivo elimina_estudiante.php

 

Y por ultimo en el archivo consulta_estudiante.php colocamos en el evento onclick de la etiqueta <a> lo siguiente:

Y listo, refrescamos el navegador, damos click en eliminar y si todo sale bien debe salir un mensaje como este:

Espero les haya gustado, en la próxima entrada concluiremos con la edicion de estudiantes.

Pueden descargar los archivos desde el siguiente link https://drive.google.com/file/d/0B4OTPQtHJvwlVWMycGpPUjlnM1k/edit?usp=sharing

4.5/5 – 81 Walter Jimenez