SENA DESARROLLO APLICACIONES WEB

DESARROLLO DE APLICACIÓNES WEB EN PHP

Estructura de contenidos INTRODUCCIÓN .......................................................................3 SESIÓN 1: CONSTRUYENDO CONSTRUYENDO LA BASE DE DATOS ..... ........... ........... ......... .... 3 1. Activación de los servicios en XAMPP .......................................4 2. Construcción de la base de datos. ...........................................6 3. Creación de las tablas. ..........................................................8 4. Creación de relaciones. ............................. .......................................................... .............................14 14 SESIÓN 2: Desarrollando la Interface Gráfica de Usuario (GUI). Plantilla ............................................................................. ................................................................................. .... 20 1. Vista del proyecto. ............................. ............................................................. ...................................21 ...21 2. Estructura

del proyecto. .........................................................21

3. Maquetación. .......................................................................24 SESIÓN 3: DESARROLLANDO LA INTERFACE GRÁFICA DE USUARIO (GUI). INICIO Y ASIGNAR CITA ............................................ 45 1. Inicio. .................................................................................45 2. Asignar Cita. ........................................................................49 SESIÓN 4: DESARROLLANDO LA INTERFACE GRÁFICA DE USUARIO (GUI). CONSULTAR CITA Y CANCELAR CITA .......................... 53 1. Consultar

cita. ......................................................................54

2. Cancelar cita. .......................................................................55 SESIÓN 5: CODIFICACIÓN CODIFICACIÓN DE LAS CLASES DEL MODELO ...... ........ 57 1. Clase Paciente. ............................. ............................................................ ........................................58 .........58 2. Clase Cita. ...........................................................................59 3. Clase Conexion. ............................ ........................................................... ........................................61 .........61

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de

Aprendizaje

Desarrollo de Aplicaciónes Web en PHP

4. Clase

GestorCita............................ ........................................................... ........................................62 ........62

5. Método consultarCitaPorId(). ............................ .................................................. ......................63 63 6. Método consultarCitasPorDocumento()................................. ....................................63 ....63 7. Método consultarPaciente(). ...................................................64 8. Método agregarPaciente(). ............................... ..................................................... ......................64 64 9. Método consultarMedicos(). ............................... .................................................... .....................65 65 SESIÓN 6: CODIFICACIÓN DE LAS CLASES DEL CONTROLADOR 66 1. Bootstrap y clase Controlador Controlador.. ........................... ................................................ .....................66 66 2. Agregar Cita. .......................................................................69 3. Consultar Cita. .....................................................................74 4. Cancelar Cita. ......................................................................75 SESIÓN 7: INCLUYENDO JAVASCRIPT, JAVASCRIPT, AJAX Y JQUERY ......... 78 1. Consultar Paciente. ...............................................................78 2. Ingresar Ing resar Paciente. ................................ ................................................................ .................................83 .83 3. Datepicker. ..........................................................................89 SESIÓN 8: INCLUYENDO JAVASCRIPT, JAVASCRIPT, AJAX Y JQUERY 2 ...... 93 1. Llenar el select de médicos. ...................................................93 2. Llenar el select de horas. .......................................................94 3. Método consultarHorasDisponibles(). .............................. ....................................... .........96 96 4. Llenar el select de consultorio. ............................ ................................................ ....................99 99 5. Consultar Citas. .............................. ............................................................. ......................................100 .......100 6. Cancelar Citas. .....................................................................102 SESIÓN 9: GENERACIÓN DEL REPORTE DE LA CITA ............... 106 1. Generación del reporte de asignación de cita. ........................... 106

2 FAVA - Formación en Ambientes Virtuales de Aprendizaje


Aprendizaje


4. Clase

GestorCita............................ ........................................................... ........................................62 ........62

5. Método consultarCitaPorId(). ............................ .................................................. ......................63 63 6. Método consultarCitasPorDocumento()................................. ....................................63 ....63 7. Método consultarPaciente(). ...................................................64 8. Método agregarPaciente(). ............................... ..................................................... ......................64 64 9. Método consultarMedicos(). ............................... .................................................... .....................65 65 SESIÓN 6: CODIFICACIÓN DE LAS CLASES DEL CONTROLADOR 66 1. Bootstrap y clase Controlador Controlador.. ........................... ................................................ .....................66 66 2. Agregar Cita. .......................................................................69 3. Consultar Cita. .....................................................................74 4. Cancelar Cita. ......................................................................75 SESIÓN 7: INCLUYENDO JAVASCRIPT, JAVASCRIPT, AJAX Y JQUERY ......... 78 1. Consultar Paciente. ...............................................................78 2. Ingresar Ing resar Paciente. ................................ ................................................................ .................................83 .83 3. Datepicker. ..........................................................................89 SESIÓN 8: INCLUYENDO JAVASCRIPT, JAVASCRIPT, AJAX Y JQUERY 2 ...... 93 1. Llenar el select de médicos. ...................................................93 2. Llenar el select de horas. .......................................................94 3. Método consultarHorasDisponibles(). .............................. ....................................... .........96 96 4. Llenar el select de consultorio. ............................ ................................................ ....................99 99 5. Consultar Citas. .............................. ............................................................. ......................................100 .......100 6. Cancelar Citas. .....................................................................102 SESIÓN 9: GENERACIÓN DEL REPORTE DE LA CITA ............... 106 1. Generación del reporte de asignación de cita. ........................... 106



Aprendizaje


INTRODUCCIÓN El presente tutorial es una guía paso a paso sobre el desarrollo completo de un caso de uso en el lenguaje de programación PHP, PHP, comprende desde el desarrollo de la base de datos hasta la generación de reportes. El caso de uso que servirá de fuente para el desarrollo de la aplicación es “Gestionar citas”, caso de uso del Sistema Gestión de Citas que se ha venido desarrollando:

Sistema Gestión CITAS Administración datos pacientes

Médico

Administración datos tratamientos Gestionar citas

Generar reportes

Empleado



Aprendizaje


SESIÓN 1: CONSTRUYENDO LA BASE DE DATOS Herramientas de desarrollo. Para la construcción del sistema de información se utilizarán tecnologías web tales como. •

HTML.

•

CSS.

•

JavaScript.

•

Ajax.

•

PHP.

•

MySQL.

•

Apache.

•

NetBeans.

PHP es un lenguaje de programación del lado del servidor, por tal motivo es necesario utilizar un servidor web, sobre el cual se instalará el intérprete de PHP. Adicionall a esto, el Adiciona el DBMS que que se utilizara utilizara será será MySQL. Por esta razón se utilizará un programa llamado XAMPP, el cual contiene estas tres herramientas configuradas para su utilización. El enlace de descarga del XAMPP es. http://www.apachefriends.org/es/xampp.html

1. Activación de los servicios en XAMPP Luego de instalado el XAMPP, es necesario activar los servicios con que cuenta. •

•

Para ello se ejecuta el acceso directo a XAMPP , o se ejecuta el programa xampp-control.exe, el cual, generalmente, se encuentra en la carpeta C:\xampp. Luego de ello se muestra la ventana del XAMPP Control Panel Application , y en esta se debe dar clic sobre los botones Start, tanto de Apache, como de MySQL.



Aprendizaje


•

Con este proceso ya están activos los servicios y es posible empezar a trabajar.

Para verificar que los servicios se están ejecutando, se abre el navegador, (Internet Explorer, Opera, Google Chrome), y en la barra de direcciones se copia una de estas 2 direcciones. •

http://localhost

•

http://127.0.0.1

de inicio del del XAMPP . Para ambos casos, se mostrara la pantalla de



Aprendizaje


2. Construcción de la base de datos. El primer paso para la construcción del sistema de información, es la construcción de la base de datos. Para este proyecto se utilizará MySQL como DBMS. Para la creación de la base de datos se utilizara la herramienta MySQL GUI Tools, y específicamente la herramienta MySQL Query Browser. •

MySql.

Antes de ejecutar este programa, se debe inicializar el servidor

Luego de instalar la herramienta MySQL GUI Tools Tools damos clic sobre el botón de inicio y seleccionamos el programa MySQL Query Browser.. Browser •

En la pantalla inicial nos muestra las opciones para ingresar al programa como el Server Host, Port, Username, Password. •

A este cuadro no se le realiza ninguna modificación y se da clic en el botón OK.

•

A continuac continuación ión se nos muestra la ventana principa principall de MySQL Query Browser



Aprendizaje


Para administrar la base de datos MySQL, es necesario tener un usuario. Cuando se instala el XAMPP o el WAMP, entre otros, por defecto se crea un usuario raíz cuyo Username es root. Algunos programas de este tipo solicitan al momento de la instalación una contraseña o Password para el usuario root.En ese caso, esa palabra deberá ser ingresada en el campo Password.

Con la herramienta MySql Query Browser en ejecución, se procede a la creación de la base de datos cuyo diseño se muestra en la imagen.

•

Lo primero que se debe hacer es crear la base de datos Citas. Para ello, dentro del MySql Gui Tools se da clic derecho sobre el Panel Schemata y en el menú contextual se selecciona la opción Create New Schema .



Aprendizaje


•

•

En el cuadro de dialogo se ingresa el nombre de la base de datos, Citas, y se acepta dando clic sobre el botón OK.

Verificamos que la base de datos ha sido creada, observando su nombre en el Panel Schemata .

3. Creación de las tablas. •

La primera tabla que se crea es PACIENTES .



Aprendizaje


•

•

Se da clic derecho sobre la base de datos citas , y en el menú contextual se selecciona la opción Create New Table .

Inmediatamente se abre el cuadro de dialogo MySQL Table Editor .

Este cuadro de dialogo tiene los componentes necesarios para crear cada una de las tablas de la base de datos. •

•

•

Lo primero que encontramos es el campo Table Name . Allí se ingresara el nombre de la tabla, que para el primer caso será PACIENTES . Enseguida de este campo se encuentra Database , en el cual se especifica la base de datos en la cual se creara la tabla, para este caso será citas. Hay un tercer campo llamado Comment, por si se desea realizar algún comentario acerca de la base de datos, En este caso no se utilizara.



Aprendizaje


•

•

Más abajo aparecen tres pestañas.

Verifiquemos primero la pestaña Table Options . El campo que más interesa allí es Table Engine , en el cual seleccionaremos la opción InnoDB .

Se selecciona este motor debido a que es muy fiable y soporta integridad referencial, programas almacenados, transacciones.

Se selecciona este motor debido a que es muy fiable y soporta integridad referenci al, programas almacenados, transacciones.

•

Retornemos nuevamente a la pestaña Columns and Indices.

En el primer espacio que encontramos allí procedemos a crear cada uno de los atributos de la tabla, teniendo en cuenta los siguientes campos. •

Column Name: En este espacio le asignamos el nombre al atributo, también en este campo es posible determinar si el mismo es o no llave primaria. •



Aprendizaje


Para saber si el atributo es o no llave primaria, identificamos el ícono que se encuentra a la izquierda de su nombre, si es una llave corresponde a la llave primaria, si es un rombo no es llave primaria; si se necesita cambiar el tipo de llave primaria a campo normal, se da clic sobre la llave y viceversa. •

En algunas tablas se pueden encontrar varias llaves primarias, esto se presenta cuando una tabla posee llave compuesta.

* Datatype: En este campo se determina el tipo de dato y la longitud que posee. * NOT NULL: Con este campo se determina si este atributo es obligatorio o no. * AUTO INC: Con este campo determinamos si este atributo será autoincrementable. * Default Value: En algunos atributos es conveniente tener un valor por defecto, y es justo en este campo donde ese valor se asigna. En ese orden de ideas, se insertaran los atributos correspondientes a la tabla PACIENTES, como se muestra en la imagen. •

Más abajo dentro del cuadro de diálogo encontraremos otras tres pestañas. •

En la primera pestaña

podremos asignar índices a la base de datos, por defecto el programa se encarga de crear un índice con la llave primaria. En la segunda pestaña podemos crear las llaves foráneas y las relaciones de la tabla con otras. Pero ese aspecto lo veremos después que hayamos creado todas las tablas. En la tercera pestaña

podemos modificar los detalles del atributo que esté

seleccionado.



Aprendizaje


Por ahora no trabajaremos sobre ninguna de esas pestañas, y guardaremos la tabla creada dando clic sobre el botón Apply Changes . . •

Nos debe aparecer un cuadro de dialogo con la consulta SQL generada para la creación de la tabla. Se da clic sobre el botón Execute .

•

Si todo ha salido bien, no se debe mostrar ningún mensaje de error.

•

Se debe realizar el mismo proceso para crear las tablas.

•

TRATAMIENTOS.

•

CITAS.



Aprendizaje


•

MEDICOS.

•

CONSULTORIOS .

•

Finalmente, ya tenemos creada la base de datos y las tablas y lo podemos verificar en el Panel Schemata .



Aprendizaje


4. Creación de relaciones. Ya tenemos listas la base de datos y las tablas, pero falta un detalle muy importante y es la relación entre las tablas a través de llaves foráneas. Observando el diseño de la base de datos, nos damos cuenta que.

En la tabla TRATAMIENTOS existe una llave foránea en el campo TraPaciente, el cual tiene una referencia al campo PacIdentificacion de la tabla PACIENTES . En la tabla CITAS existen tres llaves foráneas. La primera la encontramos en el campo CitPaciente , el cual tiene una referencia al campo PacIdentificacion de la tabla PACIENTES . La segunda la encontramos en el campo CitMedico , el cual tiene una referencia al campo MedIdentificacion de la tabla MEDICOS. La tercera la encontramos en el campo CitConsultorio , el cual tiene una referencia al campo ConNumero de la tabla CONSULTORIOS . •

•

Para crear la llave foránea de la tabla TRATAMIENTOS damos clic derecho sobre la tabla TRATAMIENTOS y seleccionamos la opción Edit Table.

Seleccionamos la pestaña Foreign Keys y damos clic sobre +.



Aprendizaje


•

•

•

•

•

Nos aparece el cuadro de dialogo Add Foreign Key . En el campo Foreign Key Name se le asigna el nombre a la llave foránea, luego se da clic sobre OK.

Luego de agregar la llave foránea, es el momento de llenar el resto de campos. En la sección Foreign Key Settings se asigna la opción No Actión a On Delete y Cascade a On Update . En el campo Ref. Table , se selecciona la tabla con la cual se está haciendo referencia con la llave foránea, que en este caso es PACIENTES . Inmediatamente en el campo Reference Column , se asigna la llave primaria de la tabla PACIENTES , pero falta asignar la tabla column en la cual se asigna el atributo que será la llave foránea de la tabla TRATAMIENTOS.

•

En este campo se selecciona TraPaciente.

•

Se da clic sobre Apply Changes ; Luego se ejecuta la consulta.

•

Si todo está bien, no aparecerá ningún error.

•

Ahora se realizará el mismo proceso con la tabla CITAS. Pero en este caso, dicha tabla posee tres claves foráneas, por lo tanto el proceso se repite tres veces. Como se muestra en las imágenes.



Aprendizaje


•

Se da clic en Apply Changes , y si todo se realizo correctamente, no se generara ningún error.

1. Verificación del diseño de la base de datos.

Pero vamos a utilizar PHPMyAdmin, para ver el diseño de la base de datos después de haber sido creada.

La base de datos también se hubiera podido realizar con la herramienta PHPMyAdmin, que posee el programa XAMPP, pero allí es necesario realizar las relaciones entre las tablas manualmente. •

Abrimos el navegador Web, y escribimos la siguiente URL. http://localhost/phpmyadmin

•

Con la página del phpmyadmin abierta, seleccionamos la base de datos citas.



Aprendizaje


•

•

•

•

En la parte superior encontramos unas pestañas de opciones, allí se debe seleccionar Diseñador .

Allí nos aparece el diseño de la base de datos, En este gráfico las tablas aparecen contraídas y desubicadas; pero las podemos reubicar, simplemente arrastrándolas; también las podemos expandir con las opciones del menú superior.

Luego de organizarla, podemos ver el resultado.

Para terminar esta sesión, vamos a ingresar un par de datos a las tablas PACIENTES , MEDICOS y CONSULTORIOS .

•

Iniciemos con la tabla PACIENTES .

•

Dentro de phpmyadmin ubicamos y seleccionamos la tabla PACIENTES .

•

Nos aparece la estructura de la tabla, y unas opciones, de las cuales seleccionamos Insertar .



Aprendizaje


•

•

Se ingresan los datos personales de los dos pacientes y se da clic en el botón Continuar .

Se realiza la consulta, y si observamos nuevamente la tabla PACIENTES , nos aparecen los datos de los 2 pacientes que creamos.



Aprendizaje


•

Realizamos el mismo proceso para agregar dos médicos.

•

Realizamos el mismo proceso para agregar dos consultorios.

•

De esta forma terminamos la construcción de la base de datos, y esta sesión.



Aprendizaje


SESIÓN 2: Desarrollando la Interface Gráfica de Usuario (GUI). Plantilla En la sesión anterior creamos la base de datos, las tablas y las relaciones presentadas en el diseño, con la ayuda de las herramientas MySQL Query Browser y PHPMyAdmin. En esta sesión construiremos la interface gráfica de usuario teniendo en cuenta el patrón Modelo Vista Controlador. Recordemos que el caso de uso que se desarrollará en el presente tutorial es Gestionar citas.

Sistema Gestión CITAS Administración datos pacientes

Médico

Administración datos tratamientos Gestionar citas

Generar reportes

Empleado



Aprendizaje


1. Vista del proyecto. Para el desarrollo de nuestro sistema de información, utilizaremos el patrón Modelo Vista Controlador. La particularidad del patrón Modelo Vista Controlador es que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. Para más información y ejemplos sobre este patrón, consultar las siguientes referencias bibliográficas. http://tednologia.com/mvc-en-php/ http://trucosphp.wikispaces.com/MVC http://www.jc-mouse.net/proyectos/mvc-modelo-vista-y-controlador-en-php

Para la vista utilizaremos básicamente 3 tecnologías que son HTML para el contenido, CSS para los estilos de nuestro sitio web y JavaScript para las validaciones. Como IDE utilizaremos NetBeans. •

Es necesario tener inicializados tanto el servidor apache como el servidor MySql.

2. Estructura •

del proyecto.

Vamos a crear la estructura de carpetas del proyecto para ir agregando los archivos de cada una de las capas (Modelo, Vista, Controlador).

•

Para ello abrimos NetBeans .

•

Seleccionamos la opción FileàNew Project…

•

El paso 1 es escoger el proyecto.

•

En el campo Categories seleccionamos PHP y en Projects seleccionamos PHP Aplication .



Aprendizaje


•

En el paso 2 se asigna el nombre y la ubicación al proyecto. Por lo tanto en el campo Project Name se introduce GestionOdolontologica. En Sources Folder deberá aparecer la ruta del directorio raíz de Xampp, más el nombre de la carpeta donde se albergara el proyecto la cual corresponde con el nombre del mismo.

•

En el paso 3 no se modifican los valores.

•

En el paso 4 no se selecciona ninguno de los frameworks descritos.



Aprendizaje


•

Damos clic sobre finish .

•

Inmediatamente aparece la estructura del proyecto.

•

En la sección izquierda está la carpeta Source Files y dentro de ella encontramos index.php , que a partir de este momento llamaremos bootstrap, el cual es el archivo que por defecto se abre al iniciar el sitio.

Como nuestro sitio va a utilizar el patrón Modelo, Vista, Controlador, solamente una página será accesible desde el navegador, dicha página es index.php, la cual será el bootstrap o controlador principal de nuestro sitio web. En ese orden de ideas, todas las llamadas van al bootstrap (index.php). Desde éste se llama al controlador para mostrar la página correcta.

En la sección derecha nos muestra el área de edición de código.

•

Vamos a probar su funcionamiento escribiendo la línea de código.

•

Echo “Hola Mundo”;

•

Luego damos clic sobre el ícono

•

Vamos a crear las tres carpetas principales, una llamada Modelo , otra llamada Vista, y la última llamada Controlador .



Aprendizaje


•

Para ello damos clic derecho sobre la carpeta Source Files àNewàFolder…

•

Creamos la carpeta Modelo.

•

Hacemos lo mismo para las carpetas Vista y Controlador .

•

Dentro de la carpeta Vista creamos las carpetas html, imagenes , css, js.

3. Maquetación. La maquetación es la distribu ción

de los elementos en nuestra página.

Vamos a crear la siguiente estructura.



Aprendizaje


ENCABEZADO

CONTENIDO

MENÚ

•

En la estructura identificamos cuatro bloques.

•

El primero corresponde al contenedor y esta delineado en rojo.

•

El segundo elemento es un encabezado.

•

El tercer elemento es un menú.

•

El cuarto elemento es el contenido.

Para obtener más información de CSS pueden consultar la siguiente referencia bibliográfica. http://www.librosweb.es/css/index.html

•

•

•

Vamos a crear una plantilla inicial con la estructura definida, la cual servirá de base para las páginas del sitio. Para ello necesitamos crear un par de archivos. El primer archivo que crearemos se llamará plantilla.php, este archivo se creara dentro de la carpeta Vistaàhtml. Damos clic derecho sobre la carpeta html y en el menú contextual seleccionamos la opción NewàPHP Web Page…



Aprendizaje


•

•

•

•

•

•

En el cuadro de dialogo New PHP Web Page en el campo File Name se escribe plantilla, verificamos que el campo Folder tenga la ruta Vista/html. Damos clic en Finish.

El segundo archivo que crearemos será estilos.css, pero dicho archivo será creado dentro de la carpeta Vistaàcss. Damos clic derecho sobre la carpeta css y en el menú contextual seleccionamos la opción NewàCascading Style Sheet…

En el cuadro de dialogo New Cascading Style Sheet en el campo File Name se escribe estilos, verificamos que el campo Folder tenga la ruta Vista/css. Damos clic en Finish.



Aprendizaje


Vamos a modificar el código del bootstrap, para desde allí poder tener acceso al contenido de la plantilla. Como se muestra en la imagen.

•

Vamos a crear un contenido inicial en la plantilla para ver los resultados de la maquetación.

•

Inicialmente la plantilla tendrá el aspecto mostrado en la imagen.

•

El código es el siguiente y debe ser ingresado en el archivo plantilla.php .



Aprendizaje


•

Con esta estructura de maquetación, el tamaño del contenedor principal será fijo, por lo tanto es necesario asignarle un color al fondo que no vamos a manipular y que se encuentra por fuera del contenedor.

Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración”. Los selectores más utilizados cuando se crea un estilo son. Selector de tipo o etiqueta. Se aplica a todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Selector de clase. El nombre del selector de clase va antecedido con un punto (.) y se aplica a todos los elementos de la página cuyo atributo class coincida con el nombre del selector.

En una misma página HTML pueden existir varios elementos con el mismo atributo class. Selectores de ID. El nombre del selector ID va antecedido con un numeral (#) y se aplica al elemento de la página cuyo id coincida con el nombre del selector.

En una misma página HTML no deben existir dos elementos con el mismo id. •

El color gris se lo aplicaremos a la etiqueta body a través del selector body en la hoja de estilos.

Recordemos que la hoja de estilos es el archivo Vistaàcssàestilos.css

•

Agregamos el siguiente código en el archivo de estilos.



Aprendizaje


Muchas veces no conocemos ni el nombre ni el código rgb, de los colores utilizados en nuestro sitio web, pero podemos ayudarnos con paletas de colores, o tambien existe un programa muy útil que me permite conocer el código rgb de cualquier color únicamente pasando el mouse sobre la superficie. Esta utilidad se llama colorpic. http://www.iconico.com/colorpic/

•

•

para que este cambio surta efecto es necesario crear el enlace entre la plantilla y la hoja de estilos. Esto lo hacemos agregando el código marcado en el archivo html.

Prueban el programa y el resultado será el siguiente.



Aprendizaje


• •

•

•

Vamos ahora a crear un selector de id para el contenedor principal. El tipo de letra será Lucida Sans Unicode, como segunda opción pondremos sans-serif. Esta letra tendrá un tamaño de 1em. El color de fondo es blanco. Va a tener un borde color gris de un pixel solido, la alineación será justificada, tendrá un margen superior e inferior de 10px y los laterales será automático y el ancho será de 900px. En ese orden de ideas, el estilo se definirá de la siguiente manera y será agregado a la hoja de estilos.

Luego de agregar el estilo el resultado será el siguiente.



Aprendizaje


3.1. Encabezado. •

• •

•

El encabezado tendrá una imagen de fondo, como un banner y un texto, el cual ya está incluido como contenido en la página web. Vamos a crear los estilos para el selector tipo id #encabezado . Este selector tendrá como estilos un ancho de 900, altura de 150, y una imagen de fondo.

Como estamos trabajando la arquitectura Modelo Vista Controlador, es necesario que la imagen que se muestre en el encabezado, este almacenada en la carpeta Vistaàimagenes.

Para crear la imagen del encabezado se utilizo un programa editor de imágenes y se creó una imagen con un tamaño de 900px x 150px, con imágenes alusivas a los servicios odontológicos.

• •

•

Teniendo la imagen creada, la copiaremos en la carpeta Vistaàimágenes . Esto se puede realizar desde el explorador e archivos, o arrastrando la imagen desde el explorador de archivos a la carpeta en netbeans.

Teniendo la imagen y las características que posee el selector #encabezado , su código para generar los estilos es el siguiente.



Aprendizaje


•

•

El resultado se muestra en la imagen.

El banner fue agregado, pero el título de la página no aparece en una posición adecuada, por lo tanto es necesario centrarlo y ubicarlo más abajo. Estas modificaciones se realizan en el selector h1, el cual quedará entonces con la siguiente estructura.



Aprendizaje


Con la etiqueta h1, centraremos el texto y también se le pueden asignar otras propiedades como color o tamaño.

•

El encabezado ya tiene la apariencia adecuada, por lo tanto podemos continuar trabajando con otra de las secciones.

1.1. •

Contenido

Continuaremos ahora con el contenido de la plantilla, lo primero que hacemos es asignarle un borde de un pixel, además se le establecerán márgenes tanto externos como internos, (padding).

•

La estructura de dicho estilo es la siguiente.

•

El resultado con este cambio se muestra a continuación.



Aprendizaje


•

Continuaremos ahora con el título de la página el cual se define con el selector h2.

•

Este tendrá color azul, y un borde inferior de color gris.

•

El estilo quedara definido de la siguiente manera.

•

El resultado es el siguiente.



Aprendizaje


3.2. Menú •

•

•

Ya tenemos listo el contenido, pero de acuerdo a la imagen de la plantilla, el menú debe estar ubicado a la izquierda y el contenido a la derecha, por lo tanto realizaremos esas modificaciones. Vamos a definir un estilo de tipo id para el menú, el cual flotara a la izquierda y tendrá un ancho de 120px, este será el contenedor que ubicara el menú a la izquierda. El estilo es el siguiente.

Recordemos que dentro de la plantilla tenemos una lista cuyo id es menu, por lo tanto este estilo afectara únicamente dicha lista.

•

Guarden y actualicen para observar los cambios.

•

Como podemos ver, el contenido se ha traslapado con el menú, por lo tanto es



Aprendizaje


necesario desplazar a la derecha el margen del contenido, esa modificación se realiza en el selector div#contenido .

•

•

•

•

•

Se le ha asignado un desplazamiento al margen izquierdo, ahora ya no traslapara el menú. Observemos los resultados.

Los elementos del menú ya se encuentran ubicados en la posición deseada, pero no poseen el aspecto correspondiente, por tal motivo vamos a utilizar CSS para modificar su aspecto. Para ir observando los cambios efectuados a la lista vamos a asignarle un fondo diferente al selector menú, este color se eliminara al final, por lo tanto el selector contara con la siguiente modificación.

Observemos la hoja plantilla con el cambio en el estilo. Se observa el color azul.



Aprendizaje


•

•

Como podemos observar, aún aparece el menú sobre el contenido y adi cional a ello no aparecen al mismo nivel, pero vamos a modificarlo para lograr un mejor aspecto. Lo primero que debemos hacer es asignarle un margen externo al contenedor del menú, eliminarle todos los márgenes internos (padding) y eliminar el estilo de viñeta a la lista. Con estos cambios la estructura del selector #menu será la siguiente.

En la imagen podemos observar el cambio.



Aprendizaje


•

Ahora le aplicaremos estilo a cada uno de los elementos de la lista, para que tenga el aspecto de botón, por lo tanto debemos crear un selector descendente para la etiqueta li dentro del selector #menu, de esta forma #menu li.

El selector descendente aplica el conjunto de estilos a los elementos que se encuentran dentro de otros elementos definidos en la regla.

•

•

•

•

•

Definiendo el selector de esta forma, el estilo únicamente se aplicara a los elementos li que se encuentren dentro de una etiqueta con id menu. Lo que haremos en cada elemento del menú será asignarle un borde gris de un pixel, definir un color de fondo azul, establecer un margen inferior, que separe los botones, disminuir el tamaño de la letra, centrar el texto, también se establecerá un interlineado para qué el texto quede a buena distancia de los bordes superior e inferior del botón. Teniendo en cuenta esas características la estructura quedara así.

Ahora si podemos eliminar el background-color del selector #menu para que no se muestre ese fondo azul. Con estas modificaciones, el resultado es el siguiente.



Aprendizaje


•

Ya el menú de la plantilla va tomando forma, pero es necesario realizar las siguientes modificaciones. Es necesario que el texto del enlace no esté subrayado, que el color del texto sea negro, además que el enlace actúe sobre cualquier región del botón.

La etiqueta es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento aplicándole a los enlaces del menú la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo el contenedor.

•

Con estos cambios, el selector quedaría con la siguiente estructura.

•

Guarden y actualicen y observen los resultados.

•

•

Nuestra plantilla prácticamente esta lista, solo falta agregarle algunos comportamientos al menú. El primer comportamiento es un cambio de fondo al botón cada que el mouse pasa sobre él.



Aprendizaje


Antes de proceder a cambiarle el aspecto a cada elemento del menú es necesario tener en cuenta este aspecto. Los enlaces tienen cuatro estados: link: Sin visitar. hover: Cuando pasamos el cursor del ratón por encima. active: Cuando hacemos clic sobre el. visited: Cuando ya hemos ido a esa dirección.

Estos estados corresponden a pseudoelementos, y podemos cambiar la apariencia de los enlaces con CSS. Teniendo en cuenta esto, debemos recurrir al pseudoelemento hover ya que queremos que el comportamiento del botón cambie únicamente cuando el mouse pase sobre él.

•

•

El estilo queda definido de la siguiente manera.

El resultado se muestra en la imagen, teniendo en cuenta que el mouse esta sobre el segundo enlace.



Aprendizaje


•

•

•

•

•

•

El estilo que acabamos de crear, #menu li:hover , lo aplicaremos también a una clase para identificar la página en la cual nos encontremos. El estilo queda definido de la siguiente forma.

Si guardamos y actualizamos nos daremos cuenta que no ha surtido ningún cambio la página web, eso es debido a que aún no se ha defino la clase en la etiqueta li respectiva de acurdo a la página en la cual estamos trabajando. Por lo tanto a cada página web se le debe modificar su etiqueta li en el documento plantilla.php , en este caso le asignaremos la clase a el li de inicio.

La plantilla ya ha quedado lista, pero es necesario guardarla como plantilla para agregarla cada que la necesitemos. Damos clic sobre el menú Tools y seleccionamos la opción Templates



Aprendizaje


Inmediatamente se nos muestra el cuadro de dialogo Template Manager . •

Para no modificar la estructura de NetBeans, vamos a crear una nueva carpeta para almacenar nuestra plantilla, para ello damos clic sobre el botón New Folder . •



Aprendizaje


•

•

•

•

•

Inmediatamente nos aparece una nueva carpeta, pero el nombre que posee es New Folder , pero este nombre no es descriptivo, por tal motivo vamos a cambiarlo. Para ello damos clic sobre el botón Rename.

Se nos muestra el cuadro de dialogo Rename Template . En ambos campos de ese cuadro escribimos Gestion Odontologica . Y damos clic en OK.

La carpeta ya ha sido creada, el paso a seguir es agregar la plantilla, pero ese proceso lo realizamos por otro medio. Damos clic sobre el botón Close del cuadro de dialogo Template Manager .



Aprendizaje


•

•

•

Damos clic derecho sobre el archivo plantilla.php y en el menú contextual seleccionamos la opción Save As Template .

Nos aparece el cuadro de dialogo Save As Template en el cual seleccionamos la carpeta que acabamos de crear y damos clic en OK.

De esta forma finalizamos esta sesión, la cual nos da como resultado la plantilla con la cual trabajaremos el sitio web.



Aprendizaje


SESIÓN 3: DESARROLLANDO LA INTERFACE GRÁFICA DE USUARIO (GUI). INICIO Y ASIGNAR CITA En la sesión anterior creamos la plantilla que nos servirá de base para la vista o interface grafica de usuario del sitio web. El resultado de dicho proceso se muestra a continuación.

En esta sesión construiremos las páginas Inicio y Asignar cita, del sistema de información.

1. Inicio. La página de inicio es solamente informativa, y me ofrece una descripción general de las acciones que se realizarán con el sistema de información. •

•

Lo primero que debemos hacer es crear una nueva página web a partir de la plantilla. Los pasos son los siguientes. Dar clic derecho sobre la carpeta html, en el menú contextual seleccionar la opción NewàOther…



Aprendizaje


•

•

•

Se abre el cuadro de dialogo New File, allí en la sección Categories seleccionamos la carpeta Gestion Odontologica y en File Types seleccionamos la opción plantilla.php . Damos clic en el botón Next >.

Inmediatamente se abre el cuadro de dialogo New plantilla.php . En el campo File Name escribimos inicio .



Aprendizaje


•

•

Nos aseguramos que los campos Project , Folder y Created File , tengan la información correcta. Luego damos clic en Finish.

Dentro de nuestro sitio vamos a tener acceso a cuatro secciones, y esto se realiza desde el controlador, el cual a la vez se llama desde el bootstrap, pero para conocer a cual de las páginas se debe mostrar, se consulta la variable accion, la cual llega a través de la URLy se obtiene en la matriz $_GET.

Primero que todo vamos a modificar el bootstrap de tal forma que de acuerdo a la opción del menú que se seleccione, se muestre la página correcta, teniendo en cuenta que el controlador aún no está listo. Abrimos la

página

index.php, allí encontrábamos la línea de código y cambiamos allí la referencia como se muestra a

continuación.

Ahora si vamos a trabajar sobre el contenido de la página. •

Vamos a modificar el título de la página y le pondremos Información General. •

El contenido de la página tendrá un par de párrafos con la información general del sistema de información. •

Por tal motivo el código que se debe reemplazar en la página de inicio se muestra a continuación. •



Aprendizaje


•

El resultado se muestra en la imagen.



Aprendizaje


2. Asignar Cita. •

•

•

•

Vamos a continuar ahora con la página para asignar una cita. Generamos una nueva página a partir de la plantilla, como lo hicimos anteriormente y como nombre le pondremos asignar.php El título de la página lo modificamos y le asignamos el valor Asignar Cita . En el menú eliminamos el atributo class=”activa” de la opción inicio y se la asignamos a la opción Asignar cita.

Para asignar una cita, es necesario ingresar los datos en un formulario, pero primero verifiquemos que campos posee la tabla CITAS, y con base en ello crearemos el formulario. •

CitNumero: Este campo es autoincrementable, por tal motivo no es necesario solicitarlo. •

CitFecha: Este campo corresponde a la fecha en que se atenderá la cita, por tal motivo es necesario solicitarla. •

CitHora: Este campo corresponde a la hora en que se atenderá la cita, por tal motivo es necesario solicitarla. •

CitPaciente: En este campo se ingresa la cedula, es necesario asegurarnos que el usuario existe, de lo contrario es necesario crearlo. •

CitMedico: En este campo se ingresa el documento del médico que atenderá la cita, por lo tanto es necesario solicitarlo. •

CitConsultorio: En este campo se ingresara el consultorio en el cual se atenderá la cita, por lo tanto es necesario solicitarlo. •

CitEstado: Este campo determina el estado actual de la cita, el cual puede tener tres valores que son. Solicitada, Atendida, Cancelada. •

Cuando se solicita una cita, automáticamente el estado será Solicitada, por tal motivo este campo no se solicita en este formulario. •

CitObservaciones: Al momento de solicitar una cita, no se da ningún tipo de observación, por lo tanto automáticamente se debe asignar el valor Ninguna, por tal motivo este campo no se solicitaría en este formulario. •



Aprendizaje


Para más información sobre la creación de formularios, puede revisar la siguiente referencia web. http://librosweb.es/xhtml/capitulo8.html

•

•

•

Creamos un formulario cuyas propiedades sean id=”frmasignar”, action=”index.php?accion=guardarCita” y method=”post” .

El formulario se tabulará dentro de una tabla, para darle un aspecto visual correcto. El primer campo corresponde a los datos del usuario, que en primera instancia seria un campo para la cedula y un botón para verificar su existencia en la base de datos. Como el dato del paciente se va a verificar, el contenido se cambiará dinámicamente, por lo tanto incluiremos un div cuyo id será paciente. En este se harán las modificaciones cuando se requiera.

Para verificar la existencia del usuario en la base de datos, utilizaremos la tecn ología AJAX, pero esto lo haremos en otra sección.

•

Los siguientes elementos corresponden a la cita, y contendrá los elementos mostrados en el siguiente orden. o

o

o

Medico. Sera un select, que cargara los datos de la base de datos, pero por ahora no se realizara dicha carga, sino que incluiremos en el formulario sus valores. Fecha. Por ahora se ingresara en un input, pero más adelante se utilizara una herramienta de jquery llamada Datepicker. Hora. Esta se creara dentro de un select, teniendo en cuenta que el horario de los médicos inicia a las 8 a. m. y finaliza a las 2 p.m. y las citas se atienden cada 20 minutos. Este select se cargará automáticamente, teniendo en cuenta la disponibilidad de acuerdo al médico y la fecha, ya que no pueden haber dos citas a la misma hora con el mismo médico y en la misma fecha, por ahora no se cargará automáticamente.



Aprendizaje


o

•

Consultorio. Será un select que cargara los datos de la base de datos, por ahora no se cargarán automáticamente.

En ese orden de ideas, el código de la página asignar.php es el siguiente.



Aprendizaje


•

•

El resultado es el siguiente.

De esta forma hemos creado las 2 primeras páginas de nuestro sitio, recordemos que esta es solo la parte visual, porque mucho del contenido será cargado dinámicamente.



Aprendizaje


SESIÓN 4: DESARROLLANDO LA INTERFACE GRÁFICA DE USUARIO (GUI). CONSULTAR CITA Y CANCELAR CITA En la sesión anterior creamos las páginas Inicio y Asignar cita, las cuales tienen el aspecto mostrado en las imágenes.

En esta sesión construiremos las páginas Consultar cita y Cancelar cita, del sistema de información.



Aprendizaje


1. Consultar •

•

•

•

•

•

cita.

Vamos a continuar ahora con la página para consultar una cita. Generamos una nueva página a partir de la plantilla, como lo hicimos en la sesión anterior y como nombre le pondremos consultar.php El título de la página lo modificamos y le asignamos el valor Consultar Cita . En el menú eliminamos el atributo class=”activa” de la opción inicio y se la asignamos a la opción Consultar cita.

Para consultar una cita, es necesario ingresar el documento del pacie nte, por lo tanto en este momento ese es el único campo que se requiere dentro del formulario. Ya con base en el resultado obtenido, se mostrara el contenido dinámico que informará acerca de las citas del usuario. El código de la página consultar.php es el siguiente.



Aprendizaje


•

El resultado se muestra a continuación.

2. Cancelar cita. •

Vamos a continuar ahora con la página para cancelar una cita.

Generamos una nueva página a partir de la plantilla, como lo hicimos en la sesión anterior y como nombre le pondremos cancelar.php •

El título de la página lo modificamos y le asignamos el valor Cancelar Cita. •

En el menú eliminamos el atributo class=”activa” de la opción inicio y se la asignamos a la opción Cancelar cita. •

Para consultar una cita, es necesario ingresar el documento del paciente, por lo tanto en este momento ese es el único campo que se requiere dentro del formulario. Ya con base en el resultado obtenido, se mostrara el contenido dinámico que informará acerca de las citas del usuario. •

•

El código de la página cancelar.php es el siguiente.



Aprendizaje


•

El resultado se muestra a continuación.

De esta forma finalizamos con la creación de la interfaz gráfica de usuario. •

•

En la próxima crearemos las clases correspondientes al Modelo.



Aprendizaje


SESIÓN 5: CODIFICACIÓN DE LAS CLASES DEL MODELO En la sesión anterior creamos las páginas Consultar cita y Cancelar cita, las cuales tienen el aspecto mostrado en las imágenes.

En esta sesión construiremos todas las clases que corresponden al modelo, como se muestra en el diagrama de clases.



Aprendizaje


1. Clase Paciente. •

Vamos a crear la clase Paciente de acuerdo al siguiente diagrama de clases.

•

Para ello nos ubicamos sobre la carpeta Modelo y damos clic derecho.

•

En el menú contextual seleccionamos la opción PHP Class…

•

Nos mostrara el cuadro de dialogo New PHP Class , en el cual en el campo File Name ingresamos Paciente , verificamos que el proyecto sea GestiónOdontológica y la carpeta sea Modelo, y finalizamos con el botón Finish .



Aprendizaje


•

El código de la clase se muestra a continuación.

2. Clase Cita. •

Vamos a crear la clase Cita de acuerdo al siguiente diagrama de clases.



Aprendizaje


•

•

Seguimos las mismas instrucciones que en el paso anterior para crear el archivo, solamente que en este caso se llamara Cita.php . El código de Cita.php se muestra a continuación.



Aprendizaje


3. Clase Conexion. •

•

•

Vamos a crear la clase Conexion de acuerdo al siguiente diagrama de clases.

Seguimos las mismas instrucciones que en el paso anterior para crear el archivo, solamente que en este caso se llamara Conexion.php . El código de Conexion.php se muestra a continuación.



Aprendizaje


4. Clase •

•

•

•

GestorCita.

La clase GestorCita es la que se encarga de gestionar todos los procesos relacionados con acceso a datos, que realiza el sistema de información, por tal motivo debe tener referencia a las tres clases creadas anteriormente, para poderlas manipular. El diagrama de la clase GestorCita se muestra a continuación.

Seguimos las mismas instrucciones que en el paso anterior para crear el archivo, solamente que en este caso se llamara GestorCita.php . A continuación encontramos el código para la creación de la clase GestorCita y del método agregarCita



Aprendizaje


5. Método consultarCitaPorId(). •

•

•

Este método permite obtener todos los datos de una cita específica, para mostrarlos luego como reporte. Como la idea es mostrar al paciente todos los datos de la cita, incluyendo datos del consultorio, paciente y médico, la consulta que se realizara en este caso involucra varias tablas. El código de este método se muestra a continuación.

6. Método consultarCitasPorDocumento(). •

•

Este método permite obtener todos los datos de las citas correspondientes a un paciente específico, de acuerdo a su número de documento. El código de este método se muestra a continuación.



Aprendizaje


7. Método consultarPaciente(). •

•

Este método permite obtener todos los datos de un paciente específico, de acuerdo a su número de documento. El código de este método se muestra a continuación.

8. Método agregarPaciente(). •

Este método permite ingresar los datos de un nuevo paciente a la base de datos.

•

El código de este método se muestra a continuación.



Aprendizaje


9. Método consultarMedicos(). •

•

•

Este método permite consultar todos los médicos que están registrados en la base de datos. El código de este método se muestra a continuación.

Dentro de la clase GestorCita , quedan pendientes algunos métodos, pero para entenderlos mejor, los codificaremos a medida que los vayamos necesitando.



Aprendizaje


SESIÓN 6: CODIFICACIÓN DE LAS CLASES DEL CONTROLADOR En la sesión anterior creamos todas las clases del modelo descritas en el diagrama de clases.

En esta sesión codificaremos el controlador, para darle funcionalidad al sistema de información. En este sistema de información, el controlador estará definido por dos archivos, el primero de ellos es el bootstrap , correspondiente a la página index.php , la cual define la navegabilidad dentro del sistema de información, este a su vez, crea un objeto de la clase Controlador , la cual estará definida en el archivo controlador. php ubicada dentro de la carpeta Controlador , y ejecuta el método correspondiente.

1. Bootstrap y clase Controlador. •

Vamos a crear la clase Controlador de acuerdo al siguiente diagrama de clases.

•

Para ello nos ubicamos sobre la carpeta Controlador y damos clic derecho.

•

En el menú contextual seleccionamos la opción PHP Class…



Aprendizaje


•

•

•

•

•

Nos mostrara el cuadro de dialogo New PHP Class , en el cual en el campo File Name ingresamos Controlador , verificamos que el proyecto sea GestiónOdontológica y la carpeta sea Controlador , y finalizamos con el botón Finish .

El primer método que vamos a crear es verPagina(ruta: string) . Su código se muestra a continuación.

Este método me sirve para mostrar las páginas correspondientes a las vistas, pero como la clase Controlador se instancia a través del bootstrap , es necesario hacer las modificaciones al archivo index.php . Vamos a borrar todo el contenido de index.php y lo modificaremos de la siguiente forma. Primero es necesario hacer referencia a todas las clases creadas tanto en el Modelo como en el Controlador de la siguiente forma.



Aprendizaje


•

•

•

•

A continuación crearemos una instancia de la clase Controlador.

Recordemos que cuando creamos la vista, incluimos el siguiente código al archivo index.php.

Cada una de esas comparaciones corresponde a la opción seleccionada del menú, pero como en este momento estamos trabajando con un controlador, es necesario hacer unas modificaciones para trabajar la navegabilidad a través de la clase controlador, por tal motivo el vamos a incluir el siguiente código al archivo index.php, reemplazando el mostrado en la imagen anterior.

Podemos probar el sistema de información y podemos verificar que tenemos navegabilidad como al principio, pero esta vez a través de la clase controlador.



Aprendizaje


2. Agregar Cita. •

•

•

•

•

•

•

•

Ahora vamos a crear el método AgregarCita() dentro de la clase Controlador. Este método recibe el documento del paciente, el documento del médico, la fecha y hora de la cita y el consultorio. Con estos datos construye un objeto de la clase cita, pero hay que tener en cuenta que, el numero de la cita lo genera mysql, por lo tanto allí se envía null , al estado de la cita enviamos la palabra “Solicitada”, y a observaciones enviamos la palabra “Ninguna”. El código de dicho método es el siguiente.

Con el método agregarCita() en el controlador, es necesario modificar el bootstrap , teniendo en cuenta que la acción del formulario que envía los datos de la cita posee la siguiente referencia.

En ese orden de ideas, incluiremos en el bootstrap el siguiente código.

Vamos a verificar que los datos de la cita se insertan en la base de datos, por tal motivo llenamos el formulario. El dato que se ingresara en el documento del paciente debe existir en la tabla paciente, porque de lo contrario, como no hemos realizado validaciones, se generaría un error.



Aprendizaje


•

•

•

Al enviar los datos, y si todo ha salido correctamente, nos aparecerá una página en blanco, esta página no da ninguna información y en el siguiente punto haremos la modificación necesaria para que muestre al menos los datos de la cita. Pero podemos verificar, a través de PhpMyAdmin, en la base de datos que el registro se inserto correctamente.

Pero el sistema de información debe generar un reporte en caso de que la cita haya quedado bien enviada. Este reporte se debe mostrar en una nueva página, y más adelante crearemos la opción de imprimir para entregarle el soporte físico al paciente. Su estructura podría ser similar a la siguiente.



Aprendizaje


•

•

•

Lo primero que debemos hacer crear una nueva página web con la estructura de la plantilla. Para ello seguimos los pasos para crear dentro de la carpeta html un nuevo archivo basado en la plantilla. A este nuevo archivo lo llamaremos confirmarCita.php El código de este nuevo archivo lo encontramos a continuación.



Aprendizaje


•

•

•

Como podemos observar en este código, en la línea 22 aparece una variable llamada $result , de la cual no se tiene referencia, pero a la cual se tendrá alcance desde el controlador . Por este motivo es necesario modificar el método agregarCita() de la clase Controlador para que me muestre la plantilla que creamos anteriormente, mostrando los datos de la cita ingresada anteriormente. El código del método agregarCita() se muestra a continuación.



Aprendizaje


•

•

Es el momento de realizar la prueba, por lo tanto llenamos el formulario de citas.

Luego de enviar, si todo ha salido bien, se mostrará el resultado.



Aprendizaje


3. Consultar Cita. •

•

•

Cuando el usuario hace la consulta de la cita, se debe mostrar la información de las citas asignadas al paciente formateadas en una tabla, por tal motivo, antes de proceder a crear el método dentro del controlador , vamos a crear el documento php que mostrará el resultado. En este caso no crearemos el archivo a partir de la plantilla, sino que crearemos dentro de la carpeta html un nuevo archivo de tipo PHP Web Page.

El nombre del archivo será consultarCitas.php y su código se muestra en la imagen.

La razón principal por la que esta página no fue creada como plantilla obedece a que más adelante este contenido se incluirá dinámicamente dentro de la misma página consultar.php •

•

Ahora vamos a crear el método consultarCitas() dentro de la clase Controlador . Este método recibe el documento del paciente, con el cual llamaremos al método consultarCitasPorDocumento() perteneciente a la clase GestorCitas, y mostraremos la página consultarCitas.php.



Aprendizaje


•

•

•

•

El código de dicho método es el siguiente.

Para que esto funcione, es necesario realizar el cambio en el archivo index. php de la siguiente forma.

Al hacer la prueba tanto con un paciente que posea citas como con uno que no posea, obtendremos los siguientes resultados.

En este momento no se tiene formato, como dijimos anteriormente, este contenido se insertara dinámicamente en la misma página consultar, le daremos el estilo más adelante.

4. Cancelar Cita. Igual que en el punto 3, se debe mostrar la información de las citas asignadas al paciente formateadas en una tabla, por tal motivo, vamos a crear un nuevo documento php que mostrará el resultado. •

Nuevamente crearemos el archivo dentro de la carpeta html de tipo PHP Web

Page.



Aprendizaje


•

El nombre del archivo será cancelarCitas.php y su código se muestra en la imagen.

Como podemos ver esta página por ahora tiene prácticamente el mismo código que consultarCitas.php, solo tiene de mas una columna con la palabra Cancelar, podríamos pensar en reutilizar el código anterior, eso sería posible, pero es nececesario diferenciar, posiblemente a través de una variable. •

•

•

•

Ahora vamos a crear el método cancelarCitas() dentro de la clase Controlador . Este método recibe el documento del paciente, con el cual llamaremos al método consultarCitasPorDocumento() perteneciente a la clase GestorCitas, y mostraremos la página cancelarCitas.php. El código de dicho método es el siguiente.




Aprendizaje


•

•

Al hacer la prueba tanto con un paciente que posea citas como con uno que no posea, obtendremos los siguientes resultados.

En la siguiente sesión continuaremos trabajando con el controlador y el bootstrap para realizar los procesos necesarios.



Aprendizaje


SESIÓN 7: INCLUYENDO JAVASCRIPT, AJAX Y JQUERY En la sesión anterior trabajamos con los archivos del controlador , tanto el bootstrap como la clase Controlador . Se ingreso y verifico el acceso a datos a los diferentes procesos del sistema de información, como asignación, búsqueda y cancelación de citas. En esta sesión empezaremos a realizarle algunos ajustes al sistema de información, apoyándonos en las herramientas Javascript , Ajax y Jquery.

1. Consultar Paciente. •

•

Cuando una cita se asigna, esta irá asociada a un paciente específico, pero dicho paciente debe estar registrado en la base de datos del sistema de información, de lo contrario, si dicho paciente no existe, será necesario ingresarlo al sistema. Lo primero que haremos será consultar si el paciente existe en la base de datos, en caso de no existir, se dará la opción al usuario de ingresar los datos de dicho paciente.

•

La estructura que hasta el momento tenemos es la siguiente.

•

Y el código de esta parte se muestra a continuación.

•

Lo que se pretende es que el usuario ingrese el documento del paciente y de



Aprendizaje


clic sobre el botón Consultar. Inmediatamente se realiza la consulta a la base de datos, validando la información del paciente, en base a esa validación se mostrara en esta misma página específicamente en el div con el id paciente, la información del paciente, y en caso que no exista, mostrara el mensaje con la opción de crearlo. •

•

•

Como vamos a utilizar JQuery, vamos a crear dentro de la carpeta Vista del proyecto, una nueva carpeta llamada jquery. En ese orden de ideas, dentro de la carpeta Vista encontraremos las carpetas css, html, imagenes , jquery y js.

Vamos a descargar un framework de ajax llamado jquery. Este se descarga desde la página www.jquery.com. Dicho archivo el cual se llama jquery1.8.1.min.js , deberá ser guardado dentro de la carpeta jquery que creamos en el punto anterior.

Para tener un mayor acercamiento a los temas de javascript, ajax y jquery, pueden consultar las siguientes referencias bibliográficas. http://librosweb.es/javascript/index.html http://librosweb.es/ajax/index.html

http://librosweb.es/javascript/index.html •

Luego de descargado el archivo, es necesario incluirlo dentro de las páginas que lo utilizarán dentro de nuestro sitio web, por tal motivo lo incluiremos dentro de los archivos asignar.php, consultar.php, cancelar.php de la siguiente forma.



Aprendizaje


•

•

•

•

•

•

•

•

Continuemos con el archivo asignar.php, ubiquemos el botón del formulario identificado con el name e id asignarConsultar . A dicho botón le agregaremos un manejador del evento clic de la siguiente forma.

Este manejador de eventos nos indica que cada que se dé clic sobre el botón Consultar , inmediatamente el flujo del programa ira hasta la función consultarPaciente() en JavaScript. Vamos a codificar dicha función. Lo primero que debemos hacer es crear el archivo que contendrá el código JavaScript, por lo tanto nos ubicamos sobre la capeta js y damos clic derecho. En el menú contextual seleccionamos la opción NewàJavaScript File… En caso de que esta opción no esté disponible en el menú contextual, seleccionamos la opción Other , para buscar la plantilla.

El nombre del archivo será script.js .



Aprendizaje


•

•

•

•

•

•

•

Este archivo va a controlar todas las funciones javascript que implementaremos en nuestro sitio, por tal motivo al igual que hicimos con el archivo de jquery, debemos incluir este también en los archivos asignar.php, consultar.php, cancelar.php de la siguiente forma.

Vamos codificar la función consultarPaciente() dentro del archivo script.js Recordemos que la idea es que al momento de consultar un paciente, si este existe se nos muestre la información del mismo en la misma página, de lo contrario se mostrara un mensaje indicando que no existe y un botón que permita crearlo. Para realizar estas acciones, utilizaremos una función de jquery llamada load la cual realiza la petición y reemplaza el contenido html de un elemento especifico de la página. El código de esta función se muestra a continuación.

A continuación crearemos un nuevo documento php que mostrará el resultado de la consulta o en su defecto un mensaje indicando que el paciente no existe. Como hicimos en la sesión anterior, crearemos el archivo dentro de la carpeta

html de tipo PHP Web Page. •

El nombre del archivo será consultarPaciente.php y su código se muestra en la imagen.



Aprendizaje


•

•

•

•

•

Ahora vamos a crear el método consultarPaciente() dentro de la clase Controlador . Este método recibe el documento del paciente, con el cual llamaremos al método consultarPaciente() dentro de la clase GestorCitas, y mostraremos la página consultarPaciente.php. El código de dicho método es el siguiente.


Al hacer la prueba tanto con un paciente que exista, como con uno que no exista, obtendremos los siguientes resultados.



Aprendizaje


2. Ingresar Paciente. •

•

Como podemos observar, cuando el paciente no existe, se muestra el mensaje y adicional a ello un nuevo botón cuyo texto es “Ingresar Paciente” . Cuando el usuario de clic sobre dicho botón, se debe mostrar un cuadro de dialogo con el formulario de ingreso de los datos del paciente. Para la creación de este formulario, utilizaremos una herramienta de jquery llamada dialog.

•

Vamos a descargar el archivo desde la siguiente dirección. http://jqueryui.com/demos/dialog/#modal-form

•

•

•

En este enlace podrán ver una simulación del comportamiento deseado, además encuentran la documentación de esta herramienta.

En la parte superior de esta página encontraran el enlace Damos clic sobre dicho enlace y se nos abre una página en la cual seleccionaremos las opciones, Core, Widget, Position y Dialog, como se muestran en la imagen.



Aprendizaje


•

•

A la derecha están las opciones de descarga, seleccionan las que se muestran en la imagen, y al final dan clic sobre el Enlace Download .

El archivo lo llamaran dialog.zip y lo almacenarán en la carpeta jquery del proyecto, la cual, si utilizan xampp, se encontrara en la ruta C:\xampp\ htdocs\GestionOdontologica\Vista\jquery .



Aprendizaje


•

Descomprimen la carpeta. Una opción es dar clic derecho sobre la carpeta y seleccionar la opción del menú contextual Extraer en dialog\

Después de haber descomprimido el archivo, la estructura dentro del proyecto debe ser la misma que se muestra en la imagen, si no la tienen así, entonces el sistema no funcionara correctamente.

•

•

•

Arranquemos con la codificación para implementar este elemento. Lo primero que debemos hacer es incluir los archivos necesarios dentro del archivo asignar.php de la siguiente forma.

Dentro de este mismo archivo crearemos al final del documento un nuevo formulario dentro de un div, Dicho formulario solamente se moistrara como cuadro de dialogo cuando el usuario da clic sobre el botón Ingresar Paciente . El código de este formulario se muestra a continuación.



Aprendizaje


•

Pero para hacer funcionar este contenido dentro de un elemento del tipo dialog , es necesario agregar unas líneas de código JavaScript. Vamos a agregarlas dentro del archivo script.js como se muestra a continuación.



Aprendizaje


•

•

•

•

•

Si todo ha salido bien, al momento de dar clic sobre el botón Ingresar Pacient e, se mostrara un nuevo cuadro de dialogo con el formulario y el documento del paciente que aún no está registrado.

Vamos a codificar en JavaScript las funciones insertarPaciente() y cancelar() , las cuales están asociadas a los botones del formulario. El código se muestra a continuación.

Ahora vamos a crear el método agregarPaciente() dentro de la clase Controlador . El código de dicho método es el siguiente.



Aprendizaje


•

•

•


Con estas modificaciones trataremos de insertar el paciente con los datos que se muestran a continuación.

Si todo ha salido bien, se mostrara le mensaje confirmándolo.



Aprendizaje


•

Podemos verificarlo, consultando el paciente.

3. Datepicker. •

•

•

•

•

•

•

Vamos a incluir ahora a nuestro proyecto una nueva herramienta de jquery llamada Datepiker . Esta herramienta permitirá mostrar un calendario y con este seleccionar tanto la fecha de nacimiento al momento de ingresar los datos del paciente, como la fecha de la cita al momento de asignar una cita. Podemos ver el funcionamiento y la documentación de esta herramienta en la página. http://jqueryui.com/demos/datepicker/ Si damos clic sobre Download, accedemos a la página de descarga, (igual que en el punto anterior). Allí seleccionamos las opciones Core y Datepicker . En Theme seleccionan No theme, y descargan igualmente

El archivo lo llamaran datepicker.zip y lo almacenarán en la carpeta jquery del proyecto, la cual, si utilizan xampp, se encontrara en la ruta C:\xampp\ htdocs\GestionOdontologica\Vista\jquery .



Aprendizaje


•

Descomprimen la carpeta. Una opción es dar clic derecho sobre la carpeta y seleccionar la opción del menú contextual Extraer en datepicker\

Después de haber descomprimido el archivo, la estructura dentro del proyecto debe ser la misma que se muestra en la imagen, si no la tienen así, entonces el sistema no funcionara correctamente.

•

•

•

•

Arranquemos con la codificación para implementar este elemento. Lo primero que debemos hacer es incluir los archivos necesarios dentro del archivo asignar.php de la siguiente forma.

Luego de ello es necesario asignarle el comportamiento a los input correspondientes a las fechas. Esto se hace en JavaScript, por tal motivo le agregaremos las siguientes líneas de código al archivo script.js .

Si todo ha salido bien, al momento de dar clic sobre el input de la fecha de la cita o de la fecha de nacimiento, se debe mostrar un calendario para seleccionar la fecha.



Aprendizaje


•

•

•

•

Tenemos listo el calendario, pero es necesario realizar unas modificaciones. La primera modificación es limitar el acceso de datos a estos inputs, por tal motivo le agregaremos la propiedad readonly a estos elementos como se muestra en la imagen.

El formato de fecha de mySql, tiene la siguiente estructura aaaa-mm-dd, por lo tanto debemos asignarle este formato al datepicker , adicional a esto, mostraremos en los datepickers un menú para el mes y el año, para un acceso sencillo a la selección de estas. Por tal motivo modificaremos el código de esas funciones en JavaScript de la siguiente forma.

Al hacer la prueba aparece la nueva apariencia, y el valor con el formato definido.



Aprendizaje


•

•

De esta forma hemos agregado herramientas de jquery que facilitan y mejoran la apariencia de nuestro sitio web. En la próxima sesión continuaremos con el formulario de asignación de citas, con la opción ver citas y cancelar citas.



Aprendizaje


SESIÓN 8: INCLUYENDO JAVASCRIPT, AJAX Y JQUERY 2 En la sesión anterior con las herramientas JavaScript, Ajax y Jquery, realizamos la consulta para verificar la existencia del paciente y en caso de que no existiera, utilizamos una herramienta llamada dialog para agregar un nuevo usuario. Adicional a ello, utilizamos una herramienta llamada datepicker para asignar fechas de manera más óptima. En esta sesión continuaremos con el formulario de asignación de citas, cargando los datos de los médicos, y las citas disponibles de acuerdo a la fecha seleccionada.

1. Llenar el select de médicos. •

•

•

•

Al momento de asignar una cita se debe seleccionar el médico que la atenderá, cuando construimos la vista del sistema de información, esta selección se trabajo de manera estática, ingresando en el documento html los médicos que en el momento se encontraban en la base de datos, pero ocurre que si ingresan nuevos médicos o se retiran, este listado se debe modificar; por este motivo, es necesario que esos datos se carguen de la base de datos. Actualmente tenemos el siguiente código que controla estas actividades.

Vamos a realizar la siguiente modificación a ese segmento de código como se muestra en la imagen.

Pero para que todo esto funciones como se desea, es necesario hacer unas modificaciones tanto al index.php , como al controlador .



Aprendizaje


•

•

•

•

•

•

Iniciemos con el archivo index.php . Actualmente la acción de cargar la página asignar.php está controlada de la siguiente manera.

La vamos a modificar para que quede de la siguiente forma.

A continuación crearemos el método cargarAsignar() en la clase Controlador . Este tendrá el siguiente código.

Con estos cambios, al momento de ingresar a la página para asignar una cita, dinámicamente se cargaran los médicos existentes en la base de datos.

2. Llenar el select de horas. •

•

•

Para llenar el select con las los horarios disponibles de un médico cierto día, es necesario que se tenga seleccionado tanto un médico como una fecha, por tal motivo es necesario que al momento de cambiar el médico o la fecha de la cita, se carguen las horas dentro del select. Vamos a asignarle un manejador al evento change tanto del select medico, como del input fecha . Dichos cambios se realizarán en el archivo asignar.php, y se muestran en las imágenes.



Aprendizaje


•

•

•

•

•

Vamos a crear ahora la función cargarHoras() dentro del archivo script.js . Dicha función posee el siguiente código.

Vamos a asignarle un manejador al evento mousedown del select hora para validar que estén seleccionados el médico y la fecha. Para que en caso de no estar seleccionado, nos muestre una alerta. Anteriormente teníamos el siguiente segmento de código.

Pero lo vamos a modificar, para asignarle el manejador de eventos, adicional a ello vamos a eliminar todas las opciones, ya que estas se cargaran dinámicamente. Vamos a reemplazar entonces el segmento de código anterior por el siguiente.

Ahora vamos a agregar en JavaScript la función seleccionarHora() la cual tendrá el siguiente código.



Aprendizaje


3. Método consultarHorasDisponibles(). •

•

•

•

En la sesión 5 trabajamos con las clases del modelo, y entre ellas codificamos la clase GestorCita . Dentro de esta clase quedaron pendientes algunos métodos, los cuales no se codificaron en dicha sesión y se irán codificando a continuación. El método consultarHorasDisponibles() permite consultar el listado de horas disponibles para atender una cita un médico en una fecha específica. Antes de proceder a codificar este código, es necesario crear una nueva tabla en la base de datos la cual almacenará las horas en las cuales se atenderán citas en el consultorio odontológico. Abrimos el programa

•

En la sesión 1 se explico detalladamente cómo crear tablas y campos, por lo tanto si hay dudas con respecto a este proceso, es necesario remitirse a esta sesión.

•

•

Luego de abrir MySQL Query Browser , dan clic derecho sobre la base de datos citas y seleccionan la opción Create New Table .

Esta tabla se llamara horas, tendrá un campo llamado hora, el cual es la llave primaria y el tipo de datos será TIME. Ingresan esos datos y aplican cambios.



Aprendizaje


•

•

•

Vamos ahora a ingresarle datos a esta tabla, bien sea a través de MySQL Query Browser o PHPMyAdmin . Los datos que deben ingresar son los siguientes.

Ahora si procedemos a la creación del método consultarHorasDisponibles() dentro de la clase GestorCitas , el cual tiene el siguiente código.



Aprendizaje


•

•

•

•

•

En este momento tenemos nuestro componente JavaScript, nuestro método dentro de la clase GestorCita , entonces nos falta crear el método dentro de nuestro controlador y acceder a él a través del index.php . Adicional a ello, también necesitamos como en las anteriores ocasiones un script en php que cargue las horas disponibles para incluirlas en el select. Dentro de la carpeta Vista, dentro de la carpeta html vamos a crear un nuevo PHP Web File . A este archivo le asignaremos el nombre consultarHoras. php y tendrá el siguiente código.

A continuación crearemos el método consultarHorasDisponibles() , el cual es miembro de la clase Controlador . Este posee el código mostrado en la imagen.

Pero para que este código funcione es necesario hacer la modificación en el index.php como se muestra en la imagen.

Si hacemos la prueba nos encontramos que al dar clic sobre el select de la hora, si no hay un medico seleccionado, se mostrara un alert , igual si no hay una fecha seleccionada, también se mostrara un alert , y si ambos campos poseen datos, se mostrara un listado con las horas disponibles para cit as que posee el médico esa fecha.



Aprendizaje


4. Llenar el select de consultorio. •

•

•

Este proceso tiene los mismos pasos que se realizaron al llenar el select de médicos. Actualmente tenemos el siguiente código que controla esta actividad.

Vamos a realizar la siguiente modificación a ese segmento de código como se muestra en la imagen.



Aprendizaje


•

•

Pero para que todo esto funciones como se desea, es necesario modificar el método cargarAsignar() del controlador. Este tendrá las modificaciones señaladas en la imagen.

5. Consultar Citas. •

•

•

•

•

•

•

•

Ya hemos terminado prácticamente todos los procesos correspondientes a la asignación de una cita, ahora trabajaremos sobre la opción Consultar cita . En la sesión 6, se trabajo este punto, el cual muestra un formulario para ingresar el documento del paciente y en otra página mostraba las citas que tenia asignadas. Esto lo modificaremos de tal forma que al usuario dar clic sobre el botón consultar , el resultado se cargue dinámicamente en la misma página. El primer cambio lo realizaremos en el archivo consultar.php, allí tenemos un botón el cual posee el siguiente código.

Pero este código lo reemplazaremos por el siguiente.

A continuación necesitamos crear la función consultarCita() dentro del archivo script.php . Esta función contendrá el código mostrado en la imagen.

El siguiente cambio, se debe realizar en el archivo index.php , ya que anteriormente, el documento del paciente llegaba a través de la matriz $_ POST, y con los cambios anteriores llegara en la matriz $_GET.

Con estos cambios, la carga se realizaría dinámicamente, mostrando un resultado como el de la imagen.



Aprendizaje


•

•

•

•

•

Observemos que a la derecha de la tabla de citas aparece la palabra Ver . Vamos a generar un enlace, de tal forma que al dar clic sobre dicho enlace se nos muestre toda la información correspondiente a la cita seleccionada. Vamos a realizarle la siguiente modificación al archivo consultarCitas.php , justo en la celda donde se encuentra la palabra Ver.

A continuación insertaremos el código en el archivo index.php , que se encargara de llamar al método adecuado del controlador , cuando la acción sea verCita . El código a insertar en el index.php se muestra en la imagen.

Ahora crearemos el método verCita() dentro del controlador . Este tendrá el siguiente código.

Si todo ha quedado bien, al momento de dar clic sobre el enlace Ver en alguna de las citas, nos aparecerá la información de la cita de la siguiente forma.



Aprendizaje


6. Cancelar Citas. •

•

•

•

En este proceso se deben realizar unos cambios muy similares a los realizados en el punto 5 de esta sesión. El primer cambio lo realizaremos en el archivo cancelar.php, allí tenemos un botón el cual posee el siguiente código.

Pero este código lo reemplazaremos por el siguiente.

A continuación necesitamos crear la función cancelarCita() dentro del archivo script.php . Esta función contendrá el código mostrado en la imagen.



Aprendizaje


•

•

•

•

•

•

El siguiente cambio, se debe realizar en el archivo index.php , ya que anteriormente, el documento del paciente llegaba a través de la matriz $_ POST, y con los cambios anteriores llegara en la matriz $_GET.

Con estos cambios, la carga se realizaría dinámicamente, mostrando un resultado como el de la imagen.

Como podemos observar, a la derecha de la tabla encontramos la palabra Cancelar , dicha palabra actuara como enlace, y permitirá cancelar una cita en especial. Vamos a realizarle la siguiente modificación al archivo cancelarCitas.php , justo en la la celda donde donde se encuentra la palabra palabra cancelar. cancelar.

Ahora es necesario necesario crear la la función función confirmarCancelar() dentro del archivo script.js . Dicha función contiene el siguiente código.

A continua continuación ción insertare insertaremos mos el código en el archivo index.php , que se



Aprendizaje


encargara de llamar al método adecuado del controlador, cuando la acción sea confirmarCancelar . El código a insertar en el index.php se muestra en la imagen.

•

•

•

•

Ahora crearemos el método confirmarCancelarCita() dentro controlador . Este tendrá el siguiente código.

del

Para finalizar, es necesario crear el método cancelarCita() dentro de la clase GestorCita . Dicho método tendrá el siguiente código.

Si todo ha quedado bien, al momento de dar clic sobre el enlace Cancelar en alguna de las citas, nos aparecerá un mensaje de confirmación.



Aprendizaje


•

•

•

Si confirmamos, y se ha cancelado la cita, aparecerá un alert que lo indica.

Inmediatamente se actualiza el listado de las citas Asignadas que posee el paciente. Con este proceso concluimos esta sesión, en la próxima sesión implementaremos el reporte para generar un pdf con los datos de la cita asignada.



Aprendizaje


SESIÓN 9: GENERACIÓN DEL REPORTE DE LA CITA En la sesión anterior le asignamos dinamismo a las páginas consultar y cancelar, de tal forma que al ingresar el documento de un paciente, aparecieran las citas asignadas, adicional a ello creamos todo el código necesario para cancelar una cita asignada. En esta sesión generaremos el reporte en pdf de la asignación de la cita para poderlo imprimir.

1. Generación del reporte de asignación de cita. •

•

•

Lo primero que haremos será agregar un enlace que me permitirá generar el reporte, esta modificación la haremos al archivo confirmarCita.php y será el mostrado en la imagen.

A continuación modificaremos el index.php para ejecutar la acción. El código se muestra a continuación.

Ahora crearemos el método generarReporte() dentro de la clase Controlador . Dicho método tendrá el código mostrado en la imagen.



Aprendizaje


•

•

•

Nos falta por ultimo codificar el archivo reporteCita.php, el cual generara el reporte. Para generar los reportes utilizaremos una librería llamada html2pdf , de la cual podemos consultar la información y descargar desde el siguiente enlace. http:// html2pdf.fr/es/default Para descargar la librería, damos clic sobre la imagen mostrada en dicha página web.

•

Damos clic sobre la opción

•

En

•

•

la

siguiente

página

damos

clic

sobre

el

enlace

Crearemos una carpeta llamada pdf dentro de la ruta C:\xampp\htdocs\ GestionOdontologica\Vista y allí guardaremos el archivo descargado. Luego de descargado, lo debemos descomprimir dando clic derecho sobre él y seleccionando la opción Extraer aquí .



Aprendizaje


•

•

•

La estructura de la carpeta pdf quedara así.

Dentro de la carpeta Vistaàhtml crearemos una nueva Php Web Page, la cual tendrá el nombre reporteCita.php, el código de este archivo se muestra en la imagen.

El resultado del reporte se muestra en la imagen.



Aprendizaje


•

De esta forma concluimos el desarrollo del caso de uso Gestionar Citas.



Aprendizaje

SENA DESARROLLO APLICACIONES WEB

Recommend Documents