Web dinámica versión final |

Antes de disponerme a añadir la funcionalidad a la página (formulario, usuarios y foro), retoqué un poco más la web, centrando todo el contenido textual. Al ser una página de scroll vertical, era más conveniente una presentación centrada. También retoqué las imágenes con Photoshop (luminosidad en las fotos, recortes, resolución y tamaño) ampliando además el catálogo de imágenes del carousel y añadí el logo de wordpress que enlazaba con el blog de la asignatura. El primer paso fué la lógica del Formulario. Éste venía dado por la propia plantilla y le añadí la validación de los campos con las etiquetas «required», «title» y «pattern» en cada input. Añdadí el botón de Borrar los campos y con un script con ajax, dí la funcionalidad que quería al botón Enviar. Lo que más me costó de esta parte fue el que no redireccionase a la página a process.php si no que se quedase en la página de http://www.ribadeodental.com y que a la vez, enviase la información al servidor para que llegase el correo a nuestra bandeja de entrada (Esto se consigue con la funciónmail() una vez recuperados los campos en la clase process.php). Para ello utilicé tras varios intentos este script:

$(‘form’).on(‘submit’, function (e) {

e.preventDefault();

$.ajax({
type: ‘post’,
url: ‘process.php’,
data: $(‘form’).serialize(),
success: function () {

bootbox.alert(function() {
console.log(«Alert Callback»);
}); }
});document.forms[«formContacto»].reset();

});

});
</script>

Para que el mensaje de alerta se viese con un estilo Bootstrap, utilicé http://bootboxjs.com/ Tras ésto, pasé a realizar la sección de Regístrate partiendo de la base del tutorial que encontré en la página http://untame.net/ y con las transparencias de clase, consiguiendo así hacer un registro de usuarios con Bootstrap. También me apoyé para hacer la parte del administrador en la página http://www.sattsoft.com/tutorials/contents/1/37/creating-search-function-using-php-and-mysql.html . Esta página me dio la idea de hacer también un botón de editar, que modifique los campos de cada paciente (sigue en proceso). En la parte de la zona privada de cada usuario, se le indica su nombre y se le recuerda cuándo se ha citado con el dentista, además del tratamiento o prueba a la que se va a someter dicho día. Cuando un usuario se ha dado de alta, es evidente que aún no tiene asignada una cita, por lo que aparecera en pantalla: Como quería que la web fuese más dinámica, añadí una zona de foro (con la ayuda del tutorial: http://tutorialzine.com/2010/06/simple-ajax-commenting-system/ ) donde RibadeoDental responde a los diferentes pacientes que tengan dudas sobre su salud dental y a su vez ponga periódicamente consejos sobre ésta. También he enfatizado en que cada comentario sea asignado a cada usuario y así no haya modificaciones de identidad y se asigne el comentario al usuario logeado. En cuanto a seguridad, una persona que intente acceder a dicha zona de usuario o al foro no podrá acceder, ya que en ambos casos se comprueba si el usuario está logeado. Si no lo está, lo redireciona a la página de registro directamente, evitando que gente externa a la clínica pueda acceder. He intentado que la página no tuviese pérdida alguna, siendo el proceso de registro, acceso y cierre de cuenta lo más simple (ayudado por iconos), para que el usuario no se sienta perdido en la navegación. Ha sido probada por personas de diferentes rangos de edad y han verificado el correcto acceso a cada sección, tanto zona de usuarios como zona de comentarios.