1. No category

Proyecto
NOVA
Por: David Cabedo Cortés – 2º DAW
Proyecto nova es solamente el nombre dado al proyecto final de desarrollo de una
página web, en la cual los usuarios pueden registrarse para administrar cosas comunes
del día a día, tales como una agenda de contactos, o tareas pendientes (o notas) que al
usuario le gustaría anotar para poder visitar más tarde, etc.
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
1
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Índice
INTRODUCCIÓN ..................................................................................................................................... 3
TECNOLOGÍAS UTILIZADAS .................................................................................................................... 4
HTML/HTML5........................................................................................................................................... 5
CSS/CSS3 .................................................................................................................................................. 6
PHP .......................................................................................................................................................... 7
JAVASCRIPT ................................................................................................................................................. 8
JQUERY ...................................................................................................................................................... 9
DATATABLES .............................................................................................................................................. 10
BOOTSTRAP 3 ............................................................................................................................................ 11
MYSQL .................................................................................................................................................... 12
ANÁLISIS DEL PROBLEMA: DISEÑO E/R DE LA BASE DE DATOS ............................................................ 13
MODELO RELACIONAL.................................................................................................................................. 14
AGENDA ................................................................................................................................................. 14
EVENTOSCALENDARIO ........................................................................................................................... 14
GMAIL .................................................................................................................................................... 14
LOGINUSER ............................................................................................................................................ 14
ROLES ..................................................................................................................................................... 14
TAREAS................................................................................................................................................... 14
TWITTER................................................................................................................................................. 14
USUARIO ................................................................................................................................................ 14
CLAVES FORÁNEAS ...................................................................................................................................... 15
DICCIONARIO DE TABLAS .............................................................................................................................. 16
DISEÑO E IMPLEMENTACIÓN ............................................................................................................... 20
LOGIN .................................................................................................................................................... 21
PANTALLA PRINCIPAL................................................................................................................................... 24
CONTACTOS............................................................................................................................................... 25
TAREAS..................................................................................................................................................... 27
VISTA DE ADMINISTRADOR............................................................................................................................ 29
ARCHIVOS QUE SE ENTREGAN ............................................................................................................. 33
COMENTARIOS .................................................................................................................................... 34
FUENTES Y OTRAS PÁGINAS ................................................................................................................. 35
2
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Introducción
El Proyecto nova ha sido desarrollado en el lenguaje HTML y HTML5, que
forman las bases de todo el proyecto. Otro de los grandes pilares empleados en el
desarrollo de este proyecto ha sido el lenguaje del lado del servidor, llamado PHP, el
cuál se encarga de las llamadas a la base de datos para recuperar todos los datos
necesarios para la correcta visualización de éstos.
La aplicación controla el acceso de los usuarios por medio de sesiones (que se
establecen cuando el usuario hace login en la página web), y con los respectivos
controles de sesión en las cabeceras de cada parte de la página web, para impedir que
un usuario que no se haya dado de alta pueda acceder a los menús de la página sin
autorización.
También se guarda un registro de conexiones de cada usuario que inicie sesión
en la página. Al hacer login, se guarda en la base de datos la hora de ingreso. Así se
puede llevar un control de los usuarios que entran y cuáles son las horas con más
tráfico.
La aplicación está compuesta por dos tipos de usuarios: los usuarios normales,
que tienen acceso a las funciones de la página web, y los administradores, los cuales
tiene acceso a un menú extra que permite poder administrar los usuarios.
El menú de administración (solamente para los usuarios administradores)
permite ver todos los usuarios que hay registrados en la página, (para llevar un
monitoreo de los usuarios que se registran, para evitar duplicidad de usuarios, etc), la
posibilidad de cambiar su rol (de usuario normal a administrador), insertar usuarios
manualmente o editarlos por si algún usuario ha tenido algún tipo de problema con el
registro, etc.
En todas las partes de la página web siempre está disponible el menú vertical,
para que sea más sencilla la navegación por la página web.
3
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Tecnologías Utilizadas
En este apartado se procederá a enumerar todas las tecnologías que han
intervenido en el desarrollo de la página web, así como también comentar el por qué
utilizar estas tecnologías y no otras, sus ventajas e inconvenientes y algunas pequeños
fragmentos del código fuente de cada una de éstas tecnologías.
Las tecnologías utilizadas en este proyecto son las siguientes:

HTML/HTML5

CSS/CSS3

PHP

Javascript

jQuery

Datatables

Bootstrap 3

MySQL
En lo que respecta al editor de código, he optado por programar en Sublime
Text 2, una herramienta gratuita, ligera y muy potente.
4
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
HTML/HTML5
HTML5 es la quinta revisión importante del lenguaje básico de la World Wide Web,
HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML
(text/html), la variante conocida como HTML5 y una variante XHTML conocida como
sintaxis XHTML5 que deberá ser servida como XML.1 2 Esta es la primera vez que
HTML y XHTML se han desarrollado en paralelo.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso
típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las
etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo
<nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan
nuevas funcionalidades a través de una interfaz estandarizada, como los elementos
<audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D
en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE).
Hay muchos atributos y etiquetas nuevas los cuales son utilizadas
constantemente en desarrollo de mi proyecto de curso. Ha sido muy importante la
interacción de esta tecnología con Bootstrap 3.
Esta parte del código hace referencia a la ventana de administración de los usuarios
del sistema, sólo accesible por el administrador. En ella se pueden apreciar etiquetas
como “data-toggle”, una etiqueta nueva añadida en HTML5.
5
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
CSS/CSS3
CSS u Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas de
estilo utilizado para describir el aspecto y el formato de mi página web. El proyecto
cuenta con bastantes archivos de aspecto diferentes, cada uno con configuraciones
únicas para cada sección de la página.
El uso de varias hojas de estilo me ha permitido poder editar la página web de una
manera dinámina, sin tener que especificar en cada hoja qué tipo de estilo quiero que
tenga cada parte de ésta.
Prácticamente todo el código se mueve por “clases”, para así poder aplicar un mismo
estilo a varios elementos a la vez dentro de la página web.
En esta captura se pueden apreciar diferentes tipos de estilos propios de CSS3, y las
clases (por ejemplo, aquí son llamadas con “btn” delante) repiten el nombre de
algunos elementos como guía, ya que éstas por ejemplo, sirven para dar estilos a los
botones, y así poder hacerlos más agradables e intuitivos de cara al usuario.
6
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
PHP
PHP es un lenguaje de programación de uso general de código del lado del
servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue
uno de los primeros lenguajes de programación del lado del servidor que se podían
incorporar directamente en el documento HTML en lugar de llamar a un archivo
externo que procese los datos. El código es interpretado por un servidor web con un
módulo de procesador de PHP que genera la página Web resultante.
PHP ha sido clave para la creacion de la página web, ya que prácticamente
todos los datos que se muestran en ésta (tales como Contactos, Usuarios registrados,
etc) son obtenidos directamente de la base de datos por medio de unas consultas
realizadas. Éstas consultas estan almacenadas en un fichero del tipo librería de php
(extensión .inc) y a su vez, en funciones que tienen el nombre de la acción que se va a
realizar (por ejemplo: getUsers() ). La interacción de php con la base de datos del tipo
MySQL ha permitido poder realizar una página web dinámica en su contenido, y ha
facilitado la introducción de éstos datos mediante las funciones pertinentes.
7
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Javascript
La utilización de Javascript (abreviado js) ha sido una buena elección a la hora de
mejorar el contenido de la web. Sus funciones en mi proyecto no han sido muy
directas como pueden haber sido el uso de php o bootstrap, pero ha tenido una gran
importancia a la hora de mejorar la funcionalidad de la página web.
Se utiliza principalmente en su forma del lado del cliente, implementado como
parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas
web dinámicas aunque existe una forma de JavaScript del lado del servidor (Serverside JavaScript o SSJS). Dada la complejidad que tiene utilizar javascript en el lado
servidor, no lo he visto óptimo para mi proyecto, aunque no descarto que para futuros
proyectos pueda ser una buena elección a tener en cuenta.
Aunque la mayor parte de las funciones estaban predefinidas, no he descartado la
posibilidad de utilizar esta tecnología. Las librerías de javascript que he utilizado en
este proyecto son bastante complejas en temas de funcionamiento, ya que son
muchísimas las funciones diferentes que hacen que funcione todo correctamente.
Llevó un tiempo poder leer toda la documentación y decidir qué utilizar o qué no
utilizar, pero creo que el resultado final ha sido bueno.
8
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
jQuery
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite
simplificar la manera de interactuar con los documentos HTML, manipular el árbol
DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica
AJAX a páginas web.
La principal función que ha tenido jQuery en mi proyecto ha sido la de mejorar el
aspecto visual y la funcionalidad con la que se muestran los datos importados desde la
base de datos y ordenados en una tabla de HTML5. jQuery combinado con el plug-in
denominado “Datatables”, hacen que esta información pueda ser mucho más
dinámica y usable.
9
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Datatables
DataTables es un plugin para jQuery que nos permite darle dinamismo a
nuestras tablas de una forma sencilla y aumentando la vistosidad de nuestras tablas.
Con solo un par de líneas, cambiaremos completamente la apariencia de nuestra tabla.
Añade muchísimas funcionalidades nuevas a las tablas estáticas de HTML, tales
como poder filtrar los resultados sin recargas de página (lo cual es molesto si tienes
que filtrar resultados varias veces), paginación de resultados limitando las filas que se
pueden ver a la vez en la tabla (limitando estos resultados a un numero predefinido de
resultados, o podemos especificar nosotros mismo mediante las funciones que incluye,
cuantos resultados podemos mostrar a la vez), etc.
Este es un ejemplo de como funciona este plug-in junto con jQuery. En el se
especifican varios atributos para que formatee la tabla de acuerdo con unos
parámetros concretos. Un plug-in muy útil y muy potente. Ha sido una de las mejores
opciones a la hora de mostrar los datos en una tabla, ya que el dinamismo es muy
bueno y muy amigabla con el usuario.
10
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Bootstrap 3
Bootstrap es un framework front-end para un desarrollo responsivo, el cual es muy
interesante a parte por todas las funcionalidades que ofrece del tipo de css para el
estilo de la página, su función más importante es que prioriza el contenido que se va a
mostrar en el caso de que la página sea vista desde un dispositivo móvil.
Actualmente, la industria del teléfono móvil ha cobrado mucho poder con respecto a
sus anteriores años, sobretodo ahora con los nuevos “smartphone” y los sistemas
operativos tales como android o WindowsPhone, que llevan el uso del teléfono a un
nuevo nivel.
Muchas de las páginas web de hoy en día son vistas por personas con sus dispositivos
móviles, o sus “tablets” por el hecho de que sean personas sin mucho tiempo o demás,
con lo cual desarrollar las páginas web pensando en que va a ser útil y visible desde un
Smartphone es muy importante. Bootstrap 3 nos ofrece la posibilidad de hacer este
tipo de páginas utilizando sus etiquetas y sus hojas de estilo.
11
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
MySQL
MySql es un sistema de gestión de bases de datos. Existen varias interfaces de
programación de aplicaciones que permiten, a aplicaciones escritas en diversos
lenguajes de programación, acceder a las bases de datos MySQL, incluyendo C, C++,
C#, Pascal, Delphi (vía dbExpress), Eiffel, Smalltalk, Java (con una implementación
nativa del driver de Java), Lisp, Perl, PHP, Python, Ruby, Gambas, REALbasic (Mac y
Linux), (x)Harbour (Eagle1), FreeBASIC, y Tcl; cada uno de estos utiliza una interfaz de
programación de aplicaciones específica.
Para mi proyecto me he decantado por usar PHP para acceder a esta información, y la
base de datos ha sido gestionada por PhpMyAdmin, que es una herramienta escrita en
PHP con la intención de manejar la administración de MySQL a través de páginas web,
utilizando Internet.
Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar
tablas, borrar, editar y añadir campos, ejecutar cualquier sentencia SQL, administrar
claves en campos, administrar privilegios, etc.
Aquí podemos apreciar una pequeña muestra del código que se encarga de realizar las
consultas en PHP, llamando a la base de datos MySQL (utilizando la sentencia
mysqli_query()) para recoger unos datos (en concreto, el log de conexiones del usuario
al sistema) y guardamos esta salida de la base de datos en un objeto del tipo
SalidaBaseDatos.
12
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Análisis del problema: Diseño E/R de la base de datos
Como podemos apreciar, todas las tablas van relacionadas por su email con el email
principal declarado en la tabla usuario, el cual es llave primaria. Esto limita a que no se
puedan repetir los usuarios con un mismo email (es decir, solo un email único por
usuario), así se puede evitar el “spam” de usuarios basura con correos repetidos o algo
por el estilo.
Todas las relaciones están configuradas del tipo “on update: cascade, on delete:
cascade”. Esto significa que si, por ejemplo, un administrador cambiase la dirección de
email de un usuario, automáticamente se realizaría una actualización de dicha cuenta
de correo en todas las tablas en las que haya registrado su correo (como puede ser la
inserción de contactos, o el correo de gmail), lo cual hace mucho más fácil los cambios
que pueda sufrir ya que solo con un cambio en la tabla de usuarios, se vería reflejado
en todas las tablas restantes.
Lo mismo sucede en caso de borrar a un usuario en concreto (o a todos si se desea). La
base de datos automáticamente borrará todo rastro de ese usuario o usuarios y todos
los datos almacenados en la base de datos con relación a dicho usuario.
13
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Modelo relacional
AGENDA:
(idagenda,
emailContacto,
direccionContacto, emailUsuario )
telfContacto,
nombreContacto,
EVENTOSCALENDARIO: (id, inicio, final, nombre, descrip, emailUsuario)
GMAIL: (idGmail, emailGmail, passGmail, emailUser)
No me gusta el hecho de tener que guardar los datos como email y password de un
servidor de correos en la página web, pero para utilizar una conexión del tipo IMAP, era
necesario guardar estos datos para que el usuario, en su próxima conexión, pudiese
tener acceso a sus correos sin necesidad de que tuviese que teclear de nuevo su email y
contraseña.
LOGINUSER: (idLog, conexion, emailUser)
Guardar las horas en las que los usuarios se conectan en la base de datos es algo
interesante ya que te permite llevar un control de los usuarios, en sus horas de entrada.
Una de las ideas fue guardar también desde qué navegador e IP accedían al servicio,
pero al final me decanté por registrar solo la hora de entrada.
ROLES: (idRol, rol, email)
TAREAS: (idTarea, fechaIntroduccion, nombreTarea, descripTarea, fechaModifica,
emailUsuario)
TWITTER: (id, twitter, email)
USUARIO: (user_id, login, password, email)
14
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Claves Foráneas
AGENDA-> EMAILUSUARIO -> USUARIO
EVENTOSCALENDARIO->EMAILUSUARIO -> USUARIO
GMAIL-> EMAILUSER -> USUARIO
LOGINUSER-> EMAILUSER ->USUARIO
ROLES->EMAIL -> USUARIO
TAREAS->EMAILUSUARIO ->USUARIO
TWITTER-> EMAIL->USUARIO
15
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Diccionario de tablas
16
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
17
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
18
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
La idea principal era utilizar stored procedures (procedimientos almacenados) de la
base de datos para realizar las consultas, en lugar de escribir la consulta en la librería
php. Es una forma mucho más limpia de realizar operaciones con una base de datos, ya
que si hubiesen cambios en la consulta, solo habría que modificar el procedimiento
almacenado de la base de datos, y no tener que ir a modificar la consulta sql en la
librería php (si la aplicación es pequeña no supone un problema, pero cuando hay
muchas funciones y muy diferentes, puede convertirse en un problema).
19
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Diseño e implementación
A lo largo de la explicación se irán mostrando capturas de pantalla para que se pueda
comprobar como el usuario interactuará con la página web para utilizar sus servicios
(Las capturas están tomadas desde un usuario con permisos de administrador. Hay
unas ventanas que sólo son accesibles a aquellos usuarios que tengan privilegios de
administrador. El resto de usuarios comunes sólo podrán ver aquellas partes de la
página web que no requieran de este privilegio).
En mi página web, hay un archivo denominado “funcionesGlobal.inc”. Es nada más que
la librería de funciones que PHP utilizará para poder hacer peticiones y plasmar los
datos en la pantalla. En un principio, esto estaba dividido (las funciones de interacción
con la base de datos con las de carga de menús y código HTML que iba a estar
plasmado en cada una de las páginas) pero por algunos problemas con reescritura de
funciones y llamadas, tuve que globalizar todas las funciones de las cuales dispone la
página web en un único archivo. Esto no supone un problema, ya que me he tomado
mi tiempo para poder comentar cada una de las funciones y agruparlas por bloques de
código, para que sea más fácil la distinción de las funciones que se van a encargar de
recopilar los datos necesarios de la base de datos con las de la impresión HTML.
20
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
LOGIN
Nada más entrar en la aplicación, el usuario va a poder ver un formulario de login para
poder acceder a la aplicación y sus funcionalidades.
El login es la pantalla que dará acceso a la página web y a sus funcionalidades sólo a los
usuarios registrados. En esta pantalla interviene la función que se encargará de
verificar la validez del usuario, y así poder darle permiso para acceder. Esta función es
“confirmaLogin”, la cual recibe por parámetros el email y contraseña del usuario.
La función realizará la petición correspondiente a la base de datos para así poder
recuperar la información específica del usuario para poder comprobar si el email y
contraseña introducidos son correctos.
21
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Por otro lado, si el usuario no está dado de alta en la página web, puede
realizar un registro por medio de la ventana de registro, dando click en el botón de
registro de la pantalla de login.
22
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
El usuario simplemente tiene que rellenar el formulario. El campo de la cuenta de
Twitter es opcional. Era una funcionalidad implantada en la página web la cual servía
para que, si el usuario tiene una cuenta, le muestre una ventana con los últimos tweets
que el mismo ha publicado.
El administrador del sistema tiene total libertad para agregar, modificar o eliminar a
cualquier usuario del sistema, incluso otros administradores (excepto él mismo).
23
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Pantalla Principal
La pantalla principal es lo primero que el usuario podrá apreciar cuando inicie sesión.
En la imagen de arriba se puede comprobar como aparece un gran apartado en el
medio con el título de GMAIL. En él se pueden ver los últimos correos que ha recibido
el usuario, con una columna que hace referencia a si ha sido visualizado o no, titulo,
autor y fecha y hora de envío. Actualmente está configurado para que las funciones
IMAP importen sólo 15 mensajes como máximo.
A la derecha de Gmail podemos ver tareas programadas. Son las tareas que el usuario
ha podido dar de alta y las va a poder visualizar en esta pantalla. Las tareas que el
usuario puede guardar son como recordatorios o notas sobre cosas que hacer.
A la izquierda está el menú vertical que dan paso a diferentes secciones de la página
web. Como se puede ver, hay dos secciones que sólo están disponibles en caso de ser
administrador. “User Admin” y “Descarga el Código”.
En esta pantalla principal hacen intervención el objeto Tarea.inc¸ y funciones cómo
getCorreo,
imprimeHead,
menusVertical,
menuUsuarioDropDown
y
dropDownMessages. Todas estas funciones en conjunto hacen posible la visualización
de la página.
24
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Contactos
En esta ventana, el usuario puede ver una agenda de contactos. El usuario puede ver
los contactos que tiene agregados hasta el momento (mostrando un máximo de 5
contactos). Puede actualizar sus contactos con nuevos datos, eliminar o hacer una
búsqueda para filtrarlos y poder buscar a uno en concreto. Parte del código que hace
posible esto es, por ejemplo, la función getContactos.
Pasandole el correo del usuario que tiene la sesión activa, la función se encargará de
obtener los contactos para dicho usuario.
25
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
También es posible añadir o editar contactos. La página web está diseñada para
poder insertar, ver, actualizar o borrar los contactos guardados.
Para acceder a la ventana de edición de contactos, primero hay que seleccionar un
contacto de la lista y darle click al botón actualizar.
26
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Tareas
Es posible agregar tareas nuevas, actualizar o eliminar las existentes mediante la
página tareas.php. Es una simple página en la cual se mostrarán las tareas que el
usuario haya ido agregando a su usuario.
Puede realizar las mismas funciones que con los contactos de la agenda. Puede
eliminarlas seleccionando una (o varias) de ellas, o puede actualizarlas. También puede
insertarlas desde esta misma página.
27
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
28
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Vista de administrador
Una de las partes más interesantes y que proporcionan a la página cierta
funcionalidad de cara a los usuarios administradores es la vista del administrador. En
ella se pueden ver los usuarios registrados en el sistema, editarlos, crear nuevos o
explorar el registro de conexiones de los usuarios. Seleccionando uno de ellos se
puede cargar su log de conexiones (dando clic en el botón conexiones), o incluso
borrarlo si es necesario.
Un posible ejemplo del código PHP que proporciona esta utilidad es el siguiente:
Este código como se puede comprobar, cargará la página, y solo dejará pasar al usuario
si posee una cuenta con privilegios de administrador. Como se puede apreciar,
interviene la clase SalidaBaseDatos, que simplemente lo que hace es recoger la salida
29
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
de la base de datos en caso de que todo haya ido bien, o en caso contrario, devolver
un false en la parte del error.
Un ejemplo de una de las funciones encargadas de realizar tareas de
administrador es la función insertUser
30
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Todas las funciones importantes encargadas de hacer que toda la estructura de la
página web funcione, están alojadas en funcionesGlobal.inc. También se trabaja con
varias clases de objetos como contacto.inc o tarea.inc.
Como se puede apreciar en esta captura de pantalla, contacto tiene sus atributos
privados, un constructor y todos los métodos getters y setters. La manera que tiene
PHP de procesar esta información recibida después de realizar la llamada desde la
función getUsers, por ejemplo, es guardando el resultado de esa llamada dentro del
objeto llamado salidaBaseDatos, un objeto especialmente diseñado para prevenir
fallos o errores no controlados provenientes de la base de datos.
31
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Se puede ver que es un objeto simple, simplemente tiene un atributo llamado salida,
que es donde se guardará el resultado de la llamada a la base de datos, un atributo
error que está por defecto a false, pero en caso de que haya un error en la llamada,
pasará a ser true en la parte de captura de error (try-catch), y el atributo message, que
en caso de que se produzca un error, obtendremos el mensaje y lo guardaremos aquí
dentro para poder visualizarlo (o no) más tarde.
32
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Archivos que se entregan
Los archivos que se entregan en este proyecto es la página web completa (a excepción
de algunas partes de la página web que no funcionan del todo correctamente una vez
alojadas en el hosting web para acceder mediante la dirección del dominio).
Un archivo SQL llamado nova.sql el cual creará la base de datos con todas sus tablas y
datos de prueba para poder visualizar las funcionalidades de la página web.
Todos los archivos de la página web, ya sea la versión con las cadenas de conexión
utilizadas para trabajar con phpmyadmin en modo local, o los archivos configurados
para trabajar con la base de datos phpmyadmin de mi dominio.
Esta memoria también es entregada junto a todo el proyecto de curso.
33
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Comentarios
Este proyecto lo veo más bien como una fase principal de lo que podría llegar a diseñar
en un futuro. Aunque solo es como una fase “beta” de una idea que tengo en mi
mente, creo que a partir de ahora (quizás empleando otras tecnologías como .net, eso
ya está reservado para futuros planteamientos acerca de una nueva web de
administración) podré utilizar como referencia esta estructura creada aquí, o quizás las
funciones o demás conocimientos adquiridos durante el desarrollo de la página web.
Muchas son las horas invertidas en adquirir conocimientos (puede que igual o más
horas que para desarrollar la página) porque antes de ponerme a diseñar como tal,
tuve que mirar mucha documentación acerca de las diferentes tecnologías como ASPX
o PHP, y decidir qué encajaría mejor en el diseño de esta página. Al final opté por
utilizar PHP. ASP.NET puede ofrecer quizás una manera diferente de programar una
página web, ya que ofrece controles web para trabajar en el lado servidor (los cuales
quedan ocultos al usuario) y controles de usuario para poder trabajar con las etiquetas
HTML. Al final me decanté por PHP y HTML ya que no es muy complicado de utilizar, y
el hecho de querer desarrollar en ASP.NET me obligaba a instalarme visual studio para
poder trabajar cómodamente.
34
Proyecto NOVA
Estudiante del 2º año de Desarrollo de Aplicaciones Web
Fuentes y otras páginas
Bootstrap 3: http://getbootstrap.com/
jQuery:
http://jquery.com/
Datatables:
https://datatables.net/
Base de datos y apache para servidor local:
Xampp:
https://www.apachefriends.org/es/index.html
Editor de código:
SublimeText: http://www.sublimetext.com/
NetBeans:
https://netbeans.org/
Páginas que han ayudado en la resolución de problemas surgidor a lo largo del
proyecto:
GitHub:
https://github.com/
StackOverflow:
http://stackoverflow.com/
Foros del web:
http://www.forosdelweb.com/
Betabeers:
http://betabeers.com/
Bootsnipp:
http://bootsnipp.com/
35