Segunda semana... y esto pasa de divertido a MUY divertido!

Pues eso! esto ya se complica y vamos aprnediendo de los pequeños detalles que nos dajamos olvidados por el 'ansia' de programar!

El lunes 15 de noviembre empezamos con "Java para web y Flex" y como no, hay que dar pequeños conceptos de lenguajes de programación, de caracteristicas y estas cositas que muchas veces olvidamos que tienen... conceptos tales como Sobrecarga, Polimorfismo, Herencia, Encapsulación. Conceptos básicos que todo programador debe tener presentes a la hora de hacer una programación fácil.

Después de un comienzo teórico, toca instalar NetBeens. La herramienta que usaremos en el curso para poder programar JSP's y Servlet's.

JSP es la parte 'printanble' del programa. Aunque una definición exacta es dificil, podemos decir que es la parte que dibuja en HTML lo que necesitamos mostrar.

¿Servlet? Servlet's son la parte donde se envia y recibe los datos de la pagina JSP. Sin embargo, veremos que tambien pueden ejecutar desde el inicio de una aplicación cambiando unos parametros de inicio de NetBeens. Se puede resumir que es la parte de ejecución e interpretación de código, pero que no está pensada para 'dibujar' en la pagina HTML (aunque sí se puede hacer, no es lo recomendable).

Antes de empezar con sus funcionamientos, quiero recalcar la importancia de las carpetas de proyecto. Los JSP deben crearse en las carpetas de WEB y los Servlet's en la carpeta de Servlet (en SourcePackages).

Para poder mandar la información de un JSP a un Servlet para que la interprete hay que enlazar ambos ficheros. La forma de hacerlo es a traves de la propiedad "action" de los formularios. Ej: form id="miFormulario" action="miServletName" /form

Tambien podemos ejecutar un JSP desde otro, en vez de un Servlet. Entonces lo que tenemos que poner en el action es el nuevo fichero de JSP, pero esta vez no podemos olvidar la extensión del fichero (con los Servlet no hay que hacerlo). Ej: form id="miFormulario" action="miFicheroJSP.jsp" /form

Pero si lo que necesitamos es ejecutar al inicio un Servlet en vez de un JSP, entonces lo que tenemos que hacer es ir a Propiedades del proyecto --> Run --> en la ventana que aparece Display Browser ponemos nuestro Servlet con la extensión .java

El martes seguimos con NetBeens pero algo mucho más práctico, ejercicios y ejemplos para entender mejor toda la teoria del dia anterior.

Además vemos conceptos como .sendRedirect (no manda los datos, sólo 'dibuja' la petición sin devolver nada) y .forward (manda los datos y reconoce los objetos).

Merece la pena mencionar sobre las colecciones (también dimos un repaso sobre ellas) que es recomendable el uso de la propiedad .iterator() en vez de bucles.

Vamos a instalar! Pues ahora nos toca MySQL y Xamp. Por fin datos! es lo ideal para una Administradora de BBDD jejeje.

Una vez instalados los programas, pues nos toca crear la conexión! En vez de poner aquí una parrafada enorme os recomiendo revisar la documentación subida en el site de Google.

El miércoles es un dia para practicaaaaar! y eso hacemos, tenemos que afianzar todos nuestros conocimientos y nada mejor que un ejercicio grande donde esten recogidos todos los conceptos de estos dias. Tenemos que hacer un Quizz.

Este ejercicio consta de varias partes. Por un lado, tenemos la primera página donde se nos van a mostrar una serie de preguntas que están dadas de alta en una base de datos de MySQL. En esa misma página, una vez cargadas las preguntas, se muestra un formulario de Alta de Preguntas (ideal para profesores) para ir añadiendo más preguntas a nuestra BBDD.

Nuestra pagina tiene dos botones uno para registrar la pregunta y otro para realizar el test. Al dar a este último botón, se debe abrir otra pagina con todas las preguntas, pero esta vez habilitadas para ser seleccionada una respuesta (Radio Button). Por supuesto, una vez terminado el cuestionario tiene que ser corregido.

Vamos a ver como seria la interfaz gráfica del ejercicio:

Sin Preguntas cargadas el formulario seria este.

a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUE_0uHzbGsmMuZGyR9z-g2V6v5dwj9TuE2ihAasjGCpb7PEfeAvDiangKWRG6YUlh0W83z0PTGBJIQEFFwUUugK61A-UPP3TbmdJ1aM2QaG2DgidQQ9v99YVo2WLqQvmBqASxIo90i0b/s1600/Index_SinPreg.jpg">
/a

Si ya tuviéramos alguna pregunta guardada en nuestra BBDD, la página de inicio sería algo así:



Al pulsar el botón de 'Incluir test' guarda en la BBDD (veremos como hacerlo un poco más abajo). Y si se pulsa el botón de hacer el examen muestra un formulario para responder tipo test. Véase la imagen de abajo.




"Todo esto esta muy bien, ¡¡¡pero como se hace!!!" se preguntará el lector. Sí, sí, vamos a ello... pero sin prisas ¿eh?. Vamos paso a paso. Empezaremos por la parte de cargar las preguntas (si las hay) y de guardarlas, es decir, por la parte SQL.

Es muy importante antes de ver ningún tipo de código en la aplicación que se tengan claros unos conceptos muy básicos de SQL. ¿Sabes qué son y cómo se hacen un CREATE, SELECT, UPDATE, DELETE e INSERT en lenguaje SQL? Si ya lo tienes claro, puedes saltarte este paso pero si crees que te falta algún concepto o tienes alguna pequeña duda, te recomiendo que le éches un vistazo a este enlace 'Repaso de lenguaje SQL Básico'...

Una vez claro lo que son y como se hacen estas operaciones básicas de SQL vamos a dar un pequeño paseo por la programación.

Para cargar las preguntas al iniciar tenemos que hacer un SELECT de nuestra base de datos para recoger nuestros registros y mostrarlos. Consejo: Procura NO usar "SELECT * FROM tabla". Si sólo necesitamos parte de las columnas de la tabla no ¿para qué recoger todos? coge sólo lo que necesites. Y si necesitas todos los campos, hazlo uno a uno por sus nombres ¿por qué? las razones son: Optimizar, Rendimiento y Seguridad.

span style="font-style:italic;"
//Recordar que hay que importar algunas librerias de SQL cuando estamos en un JSP
%@page import="java.sql.ResultSet"%
%@page import="java.sql.Connection"%
%@page import="java.sql.DriverManager"%
%@page import="java.sql.SQLException"%
%@page import="java.sql.Statement"%

%
Connection conn=null;
Statement stm= null;
try{
//crear el driver
Class.forName("com.mysql.jdbc.Driver").newInstance();

//obtener el manejador
// localhost, que en este caso es "prueba",
//el usuario mysql es admin la password es adminadmin
conn=DriverManager.getConnection("jdbc:mysql://localhost/quizz", "root", "");

//obtener el statement
stm = conn.createStatement();
String sql;

//consulta
sql="SELECT * from tblpreguntasrespuestas order by idtblPreguntasRespuestas";

//ejecutar la consulta
ResultSet rst = stm.executeQuery(sql);

while(rst.next()) {
// Columnas. Pintamos el HTML de nuestra Pregunta y Respuestas
out.println("Pregunta: " + rst.getString(2) + "
");
out.println("A. " + rst.getString(3) + "
");
out.println("B. " + rst.getString(4) + "
");
out.println("C. " + rst.getString(5) + "
");
out.println("D. " + rst.getString(6) + "
");

}

//Cerramos el statement
stm.close();

}catch(SQLException err){
System.out.println("Error SQLException: "+ err.getMessage() + "\n" + err.toString()); }
catch(Exception e){System.out.println(e.getMessage());}

finally{
//cerrar la conexion
if (conn!=null){
try{
conn.close();
}catch(Exception e){}
}
}
%
/span

Al pulsar 'Incluir test' ya no hacemos un select, sino que la sentencia requerida es INSERT. Como su nombre indica, esto nos insertará los datos del formulario en la tabla correspondiente. Para el INSERT tanto la creación y cierre de las conexiones como la mayoría del código es igual que lo anterior. Sin embargo si que cambia tanto la sentencia SQL como la propiedad del statement para ejecución. En nuestro caso sería algo asi:

//consulta SQL a ejecutar. Siendo request.getParameter("txtPregunta") el valor insertado en el formulario anterior en la caja 'txtPregunta'

sql="INSERT INTO tblpreguntasrespuestas (Pregunta, Respuesta1, Respuesta2, Respuesta3, Respuesta4, Correcta) VALUES ('" + request.getParameter("txtPregunta")+ "','" + request.getParameter("txtRespuesta1") + "','" + request.getParameter("txtRespuesta2") + "','" + request.getParameter("txtRespuesta3")+ "','" + request.getParameter("txtRespuesta4") + "','" + request.getParameter("txtRespuestaCorrecta")+ "')";

/////////////////////////
//ejecutar la consulta//
///////////////////////
//Remarco esto porque es IMPORTANTE fijarse que cambia respecto al SELECT
stm.executeUpdate(sql);

Sólo recordar que cuando se implementa código en un Servlet también hay que incluir las librerías pertinentes para SQL. Serían de esta forma:

import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

¿Qué os ha parecido? intenso ¿no? Por esta razón este ejercicio nos ocupó todo el miercoles y la tarde del viernes. A algunos incluso, parte del lunes... siempre hay alguna 'chorrada' que se atasca o deja de funcionar de repente. Pero lo importante es aprender avanzando! Animo muchach@s!!!

El jueves fue un poco más relajado ya que la clase fue de inglés. Una profesora escocesa que hizo pasar un rato divertido! Fue una toma de contacto perfecta, ha hecho que la gente de clase hablaran unos con otros y nos conocieramos mejor. Te das cuenta que es un buen grupo el que se ha juntado.

El viernes fue practicar un poco lo que habiamos dado el resto de la semana y vimos la validación de formularios y control de errores con la etiqueta span y los elementos .getElement(byName) y .getElement(byId).