AplicacionPHP PDF

DESARROLLO DE APLICACIÓNES WEB EN PHP
Estructura de contenidos
INTRODUCCIÓN........................................................................3
SESIÓN 1: 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
SESIÓN 2: Desarrollando la Interface Gráfica de Usuario (GUI).
Plantilla.................................................................................. 20
1. Vista del proyecto..................................................................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 DE LAS CLASES DEL MODELO........ 57
1. Clase Paciente.......................................................................58
2. Clase Cita.............................................................................59
3. Clase Conexion......................................................................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
5. Método consultarCitaPorId()....................................................63
6. Método consultarCitasPorDocumento()......................................63
7. Método consultarPaciente().....................................................64
8. Método agregarPaciente().......................................................64
9. Método consultarMedicos()......................................................65
SESIÓN 6: CODIFICACIÓN DE LAS CLASES DEL
CONTROLADOR....................................................................... 66
1. Bootstrap y clase Controlador..................................................66
2. Agregar Cita.........................................................................69
3. Consultar Cita.......................................................................74
4. Cancelar Cita........................................................................75
SESIÓN 7: INCLUYENDO JAVASCRIPT, AJAX Y JQUERY.......... 78
1. Consultar Paciente.................................................................78
2. Ingresar Paciente...................................................................83
3. Datepicker............................................................................89
SESIÓN 8: INCLUYENDO 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
4. Llenar el select de consultorio..................................................99
5. Consultar Citas......................................................................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
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, 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
Administración
datos tratamientos
Médico
Gestionar citas
Generar reportes
Empleado
3
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.
Adicional a esto, el DBMS que se utilizara 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.
4
• 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
Para ambos casos, se mostrara la pantalla de inicio del XAMPP.
5
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.
• Antes de ejecutar este programa, se debe inicializar el servidor

MySql.
• Luego de instalar la herramienta MySQL GUI Tools damos clic
sobre el botón de inicio y seleccionamos el programa MySQL Query
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 continuación se nos muestra la ventana principal de MySQL Query Browser
6
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.
7
• 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.
8
• 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.
9
• 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 referencial,
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.
10
• 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.
11
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.
12
• MEDICOS.
• CONSULTORIOS.
• Finalmente, ya tenemos creada la base de datos y las tablas y lo podemos

verificar en el Panel Schemata.
13
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 +.
14
• 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.
15
• 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.
16
• 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.
17
• 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.
18
• 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.
19
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
Administración
datos tratamientos
Médico
Gestionar citas
Generar reportes
Empleado
20
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.
21
• 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.
22
• 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.
23
• 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 distribución de los elementos en nuestra página.
Vamos a crear la siguiente estructura.
24
ENCABEZADO
MENÚ CONTENIDO
• 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…
25
• 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.
26
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.
27
• 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.
28
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.
29
• 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.
30
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.
31
• 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.
32
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.
3.2. 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.
33
• 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.
34
3.3. 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
35
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.
36
• Como podemos observar, aún aparece el menú sobre el contenido y adicional

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.
37
• 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.
38
• 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 <a> 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.
39
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.
40
• 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
41
• 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.
42
• 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.
43
• 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.
44
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…
45
• 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.
46
• 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.
47
• El resultado se muestra en la imagen.
48
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.
49
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 tecnologí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 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.
o Fecha. Por ahora se ingresara en un input, pero más adelante se
utilizara una herramienta de jquery llamada Datepicker.
o 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.
50
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.
51
• 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.
52
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.
53
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 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 consultar.php es el siguiente.
54
• 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.
55
• 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.
56

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.
57
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.
58
• 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.
59
• 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.
60
3. Clase Conexion.
• Vamos a crear la clase Conexion de acuerdo al siguiente diagrama de clases.

archivo, solamente que en este caso se llamara Conexion.php.
• El código de Conexion.php se muestra a continuación.
61
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.

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
62
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.
63
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.
8. Método agregarPaciente().
• Este método permite ingresar los datos de un nuevo paciente a la base de datos.
64
9. Método consultarMedicos().
• Este método permite consultar todos los médicos que están registrados en la base
de datos.
• Dentro de la clase GestorCita, quedan pendientes algunos métodos, pero

para entenderlos mejor, los codificaremos a medida que los vayamos
necesitando.
65

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…
66
• 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.
67
• 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.
68
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.
69
• 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.
70
• 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.
71
• 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.
72
• 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.
73
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.
74
• 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.
75
• 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.
consultarCitasPorDocumento() perteneciente a la clase GestorCitas, y
mostraremos la página cancelarCitas.php.

76
• 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.
77
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
78
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 jquery-
1.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.
79
• 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.
80
• 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.
81
• Ahora vamos a crear el método consultarPaciente() dentro de la clase Controlador.

consultarPaciente() dentro de la clase GestorCitas, y mostraremos la página
consultarPaciente.php.

• Al hacer la prueba tanto con un paciente que exista, como con uno que no
exista, obtendremos los siguientes resultados.
82
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.
83
• 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.
84
• 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.
85
• 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.
86
• Si todo ha salido bien, al momento de dar clic sobre el botón Ingresar Paciente,
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.

87

• 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.
88
• 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.
89
• 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.
90
• 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.
91
• 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.
92
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.
93
• 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.
94
• 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.
95
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.
96
• 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.
97
• 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 citas que
posee el médico esa fecha.
98
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.
99
• 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.
100
• 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.
101
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.
102
• 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 celda donde se encuentra la palabra cancelar.
• Ahora es necesario crear la función confirmarCancelar() dentro del archivo

script.js. Dicha función contiene el siguiente código.
• A continuación insertaremos el código en el archivo index.php, que se
103
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 del

controlador. Este tendrá el siguiente código.
• 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.
104
• 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.
105
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.
106
• 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í.
107
• 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.
108
• De esta forma concluimos el desarrollo del caso de uso Gestionar Citas.
109
Control de documento
Construcción Objeto de Aprendizaje
Desarrollador de contenido Leydy Carolina Muñoz
Experto temático
Asesor pedagógico Rafael Neftalí Lizcano Reyes
Claudia Milena Hernández
Producción Multimedia Luis Fernando Botero Mendoza
Victor Hugo Tabares
Programadores Daniel Eduardo Martínez
Líder expertos temáticos Ana Yaqueline Chavarro Parra
Líder línea de producción Santiago Lozada Garcés
110

AplicacionPHP PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

AplicacionPHP PDF

Caricato da

Copyright:

Formati disponibili

DESARROLLO DE APLICACIÓNES WEB EN PHP

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje

SESIÓN 1: CONSTRUYENDO LA BASE DE DATOS

1. Activación de los servicios en XAMPP

• Para ello se ejecuta el acceso directo a XAMPP , o se ejecuta el programa

2. Construcción de la base de datos.

• Antes de ejecutar este programa, se debe inicializar el servidor

• En la pantalla inicial nos muestra las opciones para ingresar al

• A continuación se nos muestra la ventana principal de MySQL Query Browser

Para administrar la base de datos MySQL, es necesario tener un usuario. Cuando

Con la herramienta MySql Query Browser en ejecución, se procede a la

• En el cuadro de dialogo se ingresa el nombre de la base de datos, Citas, y

• Verificamos que la base de datos ha sido creada, observando su nombre en

3. Creación de las tablas.

• La primera tabla que se crea es PACIENTES.

• Se da clic derecho sobre la base de datos citas, y en el menú contextual se

• Inmediatamente se abre el cuadro de dialogo MySQL Table Editor.

• Más abajo aparecen tres pestañas.

• Verifiquemos primero la pestaña Table Options. El campo que más interesa

• Retornemos nuevamente a la pestaña Columns and Indices.

• Column Name: En este espacio le asignamos el nombre al atributo,

• Para saber si el atributo es o no llave primaria, identificamos el

* Datatype: En este campo se determina el tipo de dato y la longitud

• Más abajo dentro del cuadro de diálogo encontraremos otras tres

En la primera pestaña podremos asignar índices a la base de datos, por

Por ahora no trabajaremos sobre ninguna de esas pestañas, y guardaremos

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

• Finalmente, ya tenemos creada la base de datos y las tablas y lo podemos

En la tabla TRATAMIENTOS existe una llave foránea en el campo

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

• Nos aparece el cuadro de dialogo Add Foreign Key. En el campo Foreign

• Luego de agregar la llave foránea, es el momento de llenar el resto de campos.

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

• Se da clic en Apply Changes, y si todo se realizo correctamente, no se

La base de datos también se hubiera podido realizar con la herramienta

• Abrimos el navegador Web, y escribimos la siguiente URL.

• En la parte superior encontramos unas pestañas de opciones, allí se debe

• Luego de organizarla, podemos ver el resultado.

• Nos aparece la estructura de la tabla, y unas opciones, de las cuales

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

• Se realiza la consulta, y si observamos nuevamente la tabla PACIENTES,

• 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.

SESIÓN 2: Desarrollando la Interface Gráfica de

En la sesión anterior creamos la base de datos, las tablas y las relaciones

1. Vista del proyecto.

Para la vista utilizaremos básicamente 3 tecnologías que son HTML para

2. Estructura del proyecto.

• El paso 1 es escoger el proyecto.

• En el paso 2 se asigna el nombre y la ubicación al proyecto.

• En el paso 3 no se modifican los valores.

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

• Damos clic sobre finish.

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.

• Luego damos clic sobre el ícono

• 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.

• En la estructura identificamos cuatro bloques.

Para obtener más información de CSS pueden consultar la siguiente referencia

• En el cuadro de dialogo New Cascading Style Sheet en el campo File Name se