Creacion de un CRUD utilizando POO (Parte 1)

Buenas Tardes.

Pido perdón por tener tan abandonado mi Blog. Razones laborales y familiares me han impedido llenar con mas contenido este medio, pero después de recibir buenos comentarios por parte de ustedes pues me he motivado aun mas a seguir aportando un poquito de mi conocimiento para que otros también se nutran de este mundo maravilloso como lo es el desarrollo Web.

Entonces como diría un maestro mio pongámonos manos en el código.

Bueno lo prometido es deuda, hoy vamos a iniciar con nuestro sistema CRUD (Create, Read, Update y Delete). Vamos a tomar la base de datos con la que hemos venido trabajado en las publicaciones anteriores, la cual la llamamos aprendizajephp y en la cual tenemos una única tabla que se llama estudiantes.

Si no la tienen por favor vean las publicaciones anteriores y créenla, es muy sencilla.

Lo primero que vamos a realizar es un simple menú donde van a estar las opciones de nuestra aplicación, no va a llevar nada de CSS, ustedes mismos pueden ir diseñando sus propias interfaces. Creamos en la raíz de nuestra carpeta nuestro archivo index.php el cual va a quedar de la siguiente forma:

Como se puede observar estamos utilizando 4 hipervinculos los cuales apuntan a 4 archivos .php, y los cuales tendrán la funcionalidad que describe cada uno. Dando el siguiente aspecto a nuestro index:

 Listo, Concentrémonos en la primera opción, Crear Estudiante, como se dan cuenta el href al que hace referencia es el archivo add_estudiante.php, así que vamos a crearlo en la misma raíz de la aplicación.

Generando el siguiente aspecto:

IMPORTANTE: Que a nuestros objetos html les coloquemos un nombre y un id, ya que de esta forma podremos distinguirlos y podemos diferenciarlos a la hora de enviar sus valores ya sea via POST o GET. De esto hablaremos cuando realicemos nuestra primera inserción a la base de datos.

Hasta aquí no hemos hecho nada nuevo. Pero que tal si antes de ingresar la información a la base de datos queremos hacer unas pequeñas validaciones, como por ejemplo que el campo identificación y el nombre del estudiante no estén vacíos. Es aqui cuando hacemos uso de JavaScript.

Lo primero que vamos a hacer es crear nuestro archivo .js el cual voy a llamar funciones.js y lo ubicaremos en un directorio que llamare tambien js, asi:

y el cual contendrá lo siguiente:

Expliquemos un poco que significa cada cosa. en JavaScript los métodos inician con la palabra reservada function, el nombre de la función mas los parámetros encerrados dentro de paréntesis (los parámetros son opcionales para nuestro ejemplo observamos que no lleva) y por ultimo abre y cierra con llaves, esa es una estructura básica de las funciones en JavaScript.

function nombre_funcion(parametros opcionales){ }

Ahora expliquemos el bloque que se encuentra dentro. Recuerdan que arriba les colocaba como importante lo del nombre y el id de cada objeto html, bueno aquí vemos un ejemplo super claro de su uso.

Habíamos dicho que queremos validar el campo de la identificación y el nombre del empleado como obligatorios es decir que no ingresen vacíos a la base de datos, para identificar cual es el campo identificación del estudiante hacemos uso del metodo getElementById el cual nos permite seleccionar un elemento del formulario por medio del valor del atributo id que le hayamos asignado, es decir para este caso idest y para el nombre del estudiante el id nombre, y luego preguntamos si su valor es igual a 0.

la sintaxis seria:  if(document.getElementById("idest").value==0){

El Alert es para enviar por pantalla el mensaje que queremos que el usuario vea al cumplirse la validación.

alert("Por favor Digite la identificacion del estudiante");

getElementById tiene un atributo que se llama focus() el cual nos ubica el cursor en el objeto que nosotros le indiquemos, en este ejemplo lo ubicamos en el textbox donde se encontró el error.

document.getElementById("idest").focus();

luego return false; con el cual le decimos a la aplicación que se detenga hasta ese punto y no verifique el resto de las validaciones, esto es para darle un poco de rendimiento a nuestro desarrollo.

Y por ultimo hacemos un submit a la pagina para enviar los valores asi:

document.form.submit();

Ahora modificaremos nuestro archivo add_estudiante.php para hacer uso del .js

El primer cuadro señalado es la forma en que agregamos nuestro archivo javascript para poder hacer uso de el, se coloca dentro de las etiquetas <head> y le damos la ruta en el atributo src.
El segundo cuadro señalado es el objeto form en el cual vamos a agrupar nuestros objetos html para poder llamarlos desde el js. Esta ubicado antes de el objeto <table> y cierra despues de </table>
Y el ultimo cuadro es el atributo onclick del objeto input de tipo button, aquí escribiremos el nombre de la función la cual llamamos valida_estudiante, y si todo va bien hacemos la prueba, dejamos en blanco el textbox de la identificacion del estudiante y obtendremos lo siguiente:

Sencillo verdad. Bueno creo que se nos extendió un poco nuestra entrada así que en la próxima terminaremos la inserción de nuestro estudiante.