Sena Desarrollo Aplicaciones Web

DESARROLLO DE APLICACINES WEB EN PHP
Estructura de contenidos
INTRODUCCIN........................................................................3
SESIN 1: CONSTRUYENDO LA BASE DE DATOS..................... 3
1. Activacin de los servicios en XAMPP........................................4
2. Construccin de la base de datos.............................................6
3. Creacin de las tablas............................................................8
4. Creacin de relaciones............................................................14
SESIN 2: Desarrollando la Interface Grfica de Usuario (GUI).
Plantilla.................................................................................. 20
1. Vista del proyecto..................................................................21
2. Estructura del proyecto...........................................................21
3. Maquetacin.........................................................................24
SESIN 3: DESARROLLANDO LA INTERFACE GRFICA DE USUARIO
(GUI). INICIO Y ASIGNAR CITA............................................. 45
1. Inicio...................................................................................45
2. Asignar Cita..........................................................................49
SESIN 4: DESARROLLANDO LA INTERFACE GRFICA DE USUARIO
(GUI). CONSULTAR CITA Y CANCELAR CITA........................... 53
1. Consultar cita........................................................................54
2. Cancelar cita.........................................................................55
SESIN 5: CODIFICACIN DE LAS CLASES DEL MODELO........ 57
1. Clase Paciente.......................................................................58
2. Clase Cita.............................................................................59
3. Clase Conexion......................................................................61
FAVA - Formacin en Ambientes Virtuales de Aprendizaje
SENA - Servicio Nacional de Aprendizaje
Desarrollo de Aplicacines Web en PHP
4. Clase GestorCita.....................................................................62
5. Mtodo consultarCitaPorId()....................................................63
6. Mtodo consultarCitasPorDocumento()......................................63
7. Mtodo consultarPaciente().....................................................64
8. Mtodo agregarPaciente().......................................................64
9. Mtodo consultarMedicos()......................................................65
SESIN 6: CODIFICACIN DE LAS CLASES DEL CONTROLADOR.
66
1. Bootstrap y clase Controlador..................................................66
2. Agregar Cita.........................................................................69
3. Consultar Cita.......................................................................74
4. Cancelar Cita........................................................................75
SESIN 7: INCLUYENDO JAVASCRIPT, AJAX Y JQUERY.......... 78
1. Consultar Paciente.................................................................78
2. Ingresar Paciente...................................................................83
3. Datepicker............................................................................89
SESIN 8: INCLUYENDO JAVASCRIPT, AJAX Y JQUERY 2....... 93
1. Llenar el select de mdicos.....................................................93
2. Llenar el select de horas.........................................................94
3. Mtodo consultarHorasDisponibles().........................................96
4. Llenar el select de consultorio..................................................99
5. Consultar Citas......................................................................100
6. Cancelar Citas.......................................................................102
SESIN 9: GENERACIN DEL REPORTE DE LA CITA................ 106
1. Generacin del reporte de asignacin de cita.............................106
2
INTRODUCCIN
El presente tutorial es una gua paso a paso sobre el desarrollo completo
de un caso de uso en el lenguaje de programacin PHP, comprende desde
el desarrollo de la base de datos hasta la generacin de reportes.
El caso de uso que servir de fuente para el desarrollo de la aplicacin
es Gestionar citas, caso de uso del Sistema Gestin de Citas que se ha
venido desarrollando:
Sistema Gestin
CITAS
Administracin
datos pacientes
Mdico
Administracin
datos tratamientos
Gestionar citas
Generar reportes
Empleado
3
SESIN 1: CONSTRUYENDO LA BASE DE DATOS

Herramientas de desarrollo.
Para la construccin del sistema de informacin se utilizarn tecnologas web tales
como.
HTML.
CSS.
JavaScript.
Ajax.
PHP.
MySQL.
Apache.
NetBeans.
PHP es un lenguaje de programacin del lado del servidor, por tal motivo es necesario
utilizar un servidor web, sobre el cual se instalar el intrprete de PHP.
Adicional a esto, el DBMS que se utilizara ser MySQL.
Por esta razn se utilizar un programa llamado XAMPP, el cual contiene estas tres
herramientas configuradas para su utilizacin.
El enlace de descarga del XAMPP es.
http://www.apachefriends.org/es/xampp.html
1. Activacin 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 estn activos los servicios y es posible empezar a trabajar.
Para verificar que los servicios se estn 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. Construccin de la base de datos.

El primer paso para la construccin del sistema de informacin, es la
construccin de la base de datos. Para este proyecto se utilizar MySQL
como DBMS.
Para la creacin de la base de datos se utilizara la herramienta MySQL GUI
Tools, y especficamente la herramienta MySQL Query Browser.

MySql.
Antes de ejecutar este programa, se debe inicializar el servidor
Luego de instalar la herramienta MySQL GUI Tools damos clic

sobre el botn 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 modificacin y se da clic en el botn
OK.
A continuacin 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 raz cuyo
Username es root.
Algunos programas de este tipo solicitan al momento de la instalacin una contrasea 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 ejecucin, se procede a la

creacin de la base de datos cuyo diseo 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 opcin 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 botn OK.
Verificamos que la base de datos ha sido creada, observando su nombre en

el Panel Schemata.
3. Creacin 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 opcin 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 algn
comentario acerca de la base de datos, En este caso no se utilizara.
9
Ms abajo aparecen tres pestaas.
Verifiquemos primero la pestaa Table Options. El campo que ms interesa

all es Table Engine, en el cual seleccionaremos la opcin 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 pestaa 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,

tambin 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.
Ms abajo dentro del cuadro de dilogo encontraremos otras tres

pestaas.
En la primera pestaa 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 pestaa podemos crear las llaves forneas y las relaciones
de la tabla con otras. Pero ese aspecto lo veremos despus que hayamos
creado todas las tablas.
En la tercera pestaa podemos modificar los detalles del atributo que est
seleccionado.
11
Por ahora no trabajaremos sobre ninguna de esas pestaas, y guardaremos

la tabla creada dando clic sobre el botn Apply Changes.
.
Nos debe aparecer un cuadro de dialogo con la consulta SQL generada para
la creacin de la tabla. Se da clic sobre el botn Execute.
Si todo ha salido bien, no se debe mostrar ningn 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. Creacin de relaciones.
Ya tenemos listas la base de datos y las tablas, pero falta un detalle muy
importante y es la relacin entre las tablas a travs de llaves forneas.
Observando el diseo de la base de datos, nos damos cuenta que.
En la tabla TRATAMIENTOS existe una llave fornea en el campo

TraPaciente, el cual tiene una referencia al campo PacIdentificacion de la
tabla PACIENTES.
En la tabla CITAS existen tres llaves forneas.
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 fornea de la tabla TRATAMIENTOS damos clic derecho
sobre la tabla TRATAMIENTOS y seleccionamos la opcin Edit Table.
Seleccionamos la pestaa 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 fornea, luego se da clic sobre
OK.
Luego de agregar la llave fornea, es el momento de llenar el resto de campos.

En la seccin Foreign Key Settings se asigna la opcin No Actin 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 fornea, 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 fornea 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 ningn error.
Ahora se realizar el mismo proceso con la tabla CITAS. Pero en este caso,
dicha tabla posee tres claves forneas, por lo tanto el proceso se repite tres
veces. Como se muestra en las imgenes.
15
Se da clic en Apply Changes, y si todo se realizo correctamente, no se

generara ningn error.
1. Verificacin del diseo de la base de datos.
Pero vamos a utilizar PHPMyAdmin, para ver el diseo de la base de datos despus
de haber sido creada.
La base de datos tambin 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 pgina del phpmyadmin abierta, seleccionamos la base de datos
citas.
16
En la parte superior encontramos unas pestaas de opciones, all se debe

seleccionar Diseador.
All nos aparece el diseo de la base de datos, En este grfico las tablas
aparecen contradas y desubicadas; pero las podemos reubicar, simplemente
arrastrndolas; tambin las podemos expandir con las opciones del men
superior.
Luego de organizarla, podemos ver el resultado.
Para terminar esta sesin, 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 botn

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 mdicos.
Realizamos el mismo proceso para agregar dos consultorios.
De esta forma terminamos la construccin de la base de datos, y esta sesin.
19
SESIN 2: Desarrollando la Interface Grfica de

Usuario (GUI). Plantilla
En la sesin anterior creamos la base de datos, las tablas y las relaciones
presentadas en el diseo, con la ayuda de las herramientas MySQL Query Browser
y PHPMyAdmin.
En esta sesin construiremos la interface grfica de usuario teniendo en cuenta el
patrn Modelo Vista Controlador.
Recordemos que el caso de uso que se desarrollar en el presente tutorial es
Gestionar citas.
Sistema Gestin
CITAS
Administracin
datos pacientes
Mdico
Administracin
datos tratamientos
Gestionar citas
Generar reportes
Empleado
20
1. Vista del proyecto.

Para el desarrollo de nuestro sistema de informacin, utilizaremos el patrn
Modelo Vista Controlador.
La particularidad del patrn Modelo Vista Controlador es que separa los datos de
una aplicacin, la interfaz de usuario, y la lgica de control en tres componentes
distintos.
Para ms informacin y ejemplos sobre este patrn, consultar las siguientes
referencias bibliogrficas.
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 bsicamente 3 tecnologas 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 opcin FileNew 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 ubicacin al proyecto.

Por lo tanto en el campo Project Name se introduce GestionOdolontologica.
En Sources Folder deber aparecer la ruta del directorio raz de Xampp, ms
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 seccin 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 patrn Modelo, Vista, Controlador, solamente una
pgina ser accesible desde el navegador, dicha pgina 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 pgina correcta.
En la seccin derecha nos muestra el rea de edicin de cdigo.
Vamos a probar su funcionamiento escribiendo la lnea de cdigo.

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 FilesNewFolder
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. Maquetacin.
La maquetacin es la distribucin de los elementos en nuestra pgina.
Vamos a crear la siguiente estructura.
24
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 ms informacin de CSS pueden consultar la siguiente referencia
bibliogrfica.
http://www.librosweb.es/css/index.html
Vamos a crear una plantilla inicial con la estructura definida, la cual servir de base
para las pginas 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 Vistahtml.
Damos clic derecho sobre la carpeta html y en el men contextual seleccionamos la
opcin NewPHP 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 Vistacss.
Damos clic derecho sobre la carpeta css y en el men contextual seleccionamos la
opcin NewCascading 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 cdigo 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

maquetacin.
Inicialmente la plantilla tendr el aspecto mostrado en la imagen.
El cdigo es el siguiente y debe ser ingresado en el archivo plantilla.php.
27
Con esta estructura de maquetacin, el tamao 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
declaracin.
Los selectores ms utilizados cuando se crea un estilo son.
Selector de tipo o etiqueta. Se aplica a todos los elementos de la pgina 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 pgina cuyo atributo class coincida con el
nombre del selector.
En una misma pgina 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 pgina cuyo id coincida con el nombre del selector.
En una misma pgina HTML no deben existir dos elementos con el mismo id.
El color gris se lo aplicaremos a la etiqueta body a travs del selector body
en la hoja de estilos.
Recordemos que la hoja de estilos es el archivo Vistacssestilos.css
Agregamos el siguiente cdigo en el archivo de estilos.
28
Muchas veces no conocemos ni el nombre ni el cdigo 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 cdigo 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 cdigo 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 opcin pondremos
sans-serif. Esta letra tendr un tamao de 1em. El color de fondo es blanco.
Va a tener un borde color gris de un pixel solido, la alineacin ser justificada,
tendr un margen superior e inferior de 10px y los laterales ser automtico
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 pgina 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 Vistaimagenes.
Para crear la imagen del encabezado se utilizo un programa editor de

imgenes y se cre una imagen con un tamao de 900px x 150px, con imgenes
alusivas a los servicios odontolgicos.
Teniendo la imagen creada, la copiaremos en la carpeta Vistaimgenes.

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 caractersticas que posee el selector #encabezado,

su cdigo para generar los estilos es el siguiente.
31
El resultado se muestra en la imagen.
El banner fue agregado, pero el ttulo de la pgina no aparece en una posicin

adecuada, por lo tanto es necesario centrarlo y ubicarlo ms 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 tambin se le pueden asignar otras

propiedades como color o tamao.
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, adems se le establecern mrgenes tanto
externos como internos, (padding).
La estructura de dicho estilo es la siguiente.
El resultado con este cambio se muestra a continuacin.
33
Continuaremos ahora con el ttulo de la pgina 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.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
35
necesario desplazar a la derecha el margen del contenido, esa modificacin

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 posicin 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 modificacin.
Observemos la hoja plantilla con el cambio en el estilo. Se observa el color

azul.
36
Como podemos observar, an 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 mrgenes internos (padding) y
eliminar el estilo de vieta 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 botn, 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 tamao de la letra, centrar el texto, tambin
se establecer un interlineado para qu el texto quede a buena distancia de
los bordes superior e inferior del botn.
Teniendo en cuenta esas caractersticas 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, adems que el enlace acte
sobre cualquier regin del botn.
La etiqueta <a> es un elemento en lnea que se ajusta a su contenido. Podemos
cambiar este comportamiento aplicndole 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 quedara con la siguiente estructura.
Guarden y actualicen y observen los resultados.
Nuestra plantilla prcticamente esta lista, solo falta agregarle algunos

comportamientos al men.
El primer comportamiento es un cambio de fondo al botn 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 ratn por encima.
active: Cuando hacemos clic sobre el.
visited: Cuando ya hemos ido a esa direccin.
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 botn 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 tambin a

una clase para identificar la pgina en la cual nos encontremos.
El estilo queda definido de la siguiente forma.
Si guardamos y actualizamos nos daremos cuenta que no ha surtido ningn

cambio la pgina web, eso es debido a que an no se ha defino la clase en
la etiqueta li respectiva de acurdo a la pgina en la cual estamos trabajando.
Por lo tanto a cada pgina 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 opcin 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 botn 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 botn 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 botn Close del cuadro de dialogo Template Manager.
43
Damos clic derecho sobre el archivo plantilla.php y en el men contextual

seleccionamos la opcin 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 sesin, la cual nos da como resultado la

plantilla con la cual trabajaremos el sitio web.
44
SESIN 3: DESARROLLANDO LA INTERFACE

GRFICA DE USUARIO (GUI). INICIO Y ASIGNAR
CITA
En la sesin 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 continuacin.
En esta sesin construiremos las pginas Inicio y Asignar cita, del sistema de
informacin.
1. Inicio.
La pgina de inicio es solamente informativa, y me ofrece una descripcin
general de las acciones que se realizarn con el sistema de informacin.
Lo primero que debemos hacer es crear una nueva pgina web a partir de la
plantilla. Los pasos son los siguientes.
Dar clic derecho sobre la carpeta html, en el men contextual seleccionar la
opcin NewOther
45
Se abre el cuadro de dialogo New File, all en la seccin Categories

seleccionamos la carpeta Gestion Odontologica y en File Types
seleccionamos la opcin plantilla.php.
Damos clic en el botn 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
informacin 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 pginas se debe mostrar, se consulta la variable
accion, la cual llega a travs 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 opcin del men que se seleccione, se muestre la pgina correcta,
teniendo en cuenta que el controlador an no est listo.
Abrimos
la
continuacin.
pgina
index.php, all encontrbamos la lnea de cdigo

y cambiamos all la referencia como se muestra a
Ahora si vamos a trabajar sobre el contenido

de la pgina.
Vamos a modificar el ttulo de la pgina y le
pondremos Informacin General.
El contenido de la pgina tendr un par de
prrafos con la informacin general del sistema
de informacin.
Por tal motivo el cdigo que se debe
reemplazar en la pgina de inicio se muestra a
continuacin.
47
El resultado se muestra en la imagen.
48
2. Asignar Cita.
Vamos a continuar ahora con la pgina para asignar una cita.
Generamos una nueva pgina a partir de la plantilla, como lo hicimos
anteriormente y como nombre le pondremos asignar.php
El ttulo de la pgina lo modificamos y le asignamos el valor Asignar Cita.
En el men eliminamos el atributo class=activa de la opcin inicio y se la
asignamos a la opcin 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 mdico 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, automticamente 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 ningn
tipo de observacin, por lo tanto automticamente se debe asignar
el valor Ninguna, por tal motivo este campo no se solicitara en este
formulario.
49
Para ms informacin sobre la creacin 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 botn para verificar su existencia en
la base de datos. Como el dato del paciente se va a verificar, el contenido
se cambiar dinmicamente, por lo tanto incluiremos un div cuyo id ser
paciente. En este se harn las modificaciones cuando se requiera.
Para verificar la existencia del usuario en la base de datos, utilizaremos la tecnologa
AJAX, pero esto lo haremos en otra seccin.
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 ms 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 mdicos 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
automticamente, teniendo en cuenta la disponibilidad de acuerdo al
mdico y la fecha, ya que no pueden haber dos citas a la misma hora
con el mismo mdico y en la misma fecha, por ahora no se cargar
automticamente.
50
o Consultorio. Ser un select que cargara los datos de la base de

datos, por ahora no se cargarn automticamente.
En ese orden de ideas, el cdigo de la pgina asignar.php es el siguiente.
51
El resultado es el siguiente.
De esta forma hemos creado las 2 primeras pginas de nuestro sitio,

recordemos que esta es solo la parte visual, porque mucho del contenido
ser cargado dinmicamente.
52
SESIN 4: DESARROLLANDO LA INTERFACE

GRFICA DE USUARIO (GUI). CONSULTAR CITA
Y CANCELAR CITA
En la sesin anterior creamos las pginas Inicio y Asignar cita, las cuales tienen el
aspecto mostrado en las imgenes.
En esta sesin construiremos las pginas Consultar cita y Cancelar cita, del sistema
de informacin.
53
1. Consultar cita.
Vamos a continuar ahora con la pgina para consultar una cita.
Generamos una nueva pgina a partir de la plantilla, como lo hicimos en la
sesin anterior y como nombre le pondremos consultar.php
El ttulo de la pgina lo modificamos y le asignamos el valor Consultar Cita.
En el men eliminamos el atributo class=activa de la opcin inicio y se la
asignamos a la opcin 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
dinmico que informar acerca de las citas del usuario.
El cdigo de la pgina consultar.php es el siguiente.
54
El resultado se muestra a continuacin.
2. Cancelar cita.

Vamos a continuar ahora con la pgina para cancelar una cita.
Generamos una nueva pgina a partir de la plantilla, como lo hicimos

en la sesin anterior y como nombre le pondremos cancelar.php
El ttulo de la pgina lo modificamos y le asignamos el valor Cancelar
Cita.
En el men eliminamos el atributo class=activa de la opcin
inicio y se la asignamos a la opcin 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 dinmico que informar acerca de las citas del
usuario.

El cdigo de la pgina cancelar.php es el siguiente.
55
El resultado se muestra a continuacin.
De esta forma finalizamos con la creacin de la interfaz grfica de

usuario.

En la prxima crearemos las clases correspondientes al Modelo.
56
SESIN 5: CODIFICACIN DE LAS CLASES DEL

MODELO
En la sesin anterior creamos las pginas Consultar cita y Cancelar cita, las cuales
tienen el aspecto mostrado en las imgenes.
En esta sesin 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 opcin 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
GestinOdontolgica y la carpeta sea Modelo, y finalizamos con el botn
Finish.
58
El cdigo de la clase se muestra a continuacin.
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 cdigo de Cita.php se muestra a continuacin.
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 cdigo de Conexion.php se muestra a continuacin.
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 informacin, por
tal motivo debe tener referencia a las tres clases creadas anteriormente, para
poderlas manipular.
El diagrama de la clase GestorCita se muestra a continuacin.

archivo, solamente que en este caso se llamara GestorCita.php.
A continuacin encontramos el cdigo para la creacin de la clase GestorCita
y del mtodo agregarCita
62
5. Mtodo consultarCitaPorId().
Este mtodo permite obtener todos los datos de una cita especfica, para mostrarlos
luego como reporte.
Como la idea es mostrar al paciente todos los datos de la cita, incluyendo datos del
consultorio, paciente y mdico, la consulta que se realizara en este caso involucra
varias tablas.
El cdigo de este mtodo se muestra a continuacin.
6. Mtodo consultarCitasPorDocumento().
Este mtodo permite obtener todos los datos de las citas correspondientes a un
paciente especfico, de acuerdo a su nmero de documento.
63
7. Mtodo consultarPaciente().
Este mtodo permite obtener todos los datos de un paciente especfico, de acuerdo
a su nmero de documento.
8. Mtodo agregarPaciente().
Este mtodo permite ingresar los datos de un nuevo paciente a la base de datos.
64
9. Mtodo consultarMedicos().
Este mtodo permite consultar todos los mdicos que estn registrados en la base
de datos.
Dentro de la clase GestorCita, quedan pendientes algunos mtodos, pero

para entenderlos mejor, los codificaremos a medida que los vayamos
necesitando.
65
SESIN 6: CODIFICACIN DE LAS CLASES DEL

CONTROLADOR
En la sesin anterior creamos todas las clases del modelo descritas en el diagrama
de clases.
En esta sesin codificaremos el controlador, para darle funcionalidad al sistema de

informacin.
En este sistema de informacin, el controlador estar definido por dos archivos, el
primero de ellos es el bootstrap, correspondiente a la pgina index.php, la cual
define la navegabilidad dentro del sistema de informacin, 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 mtodo 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 opcin 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
GestinOdontolgica y la carpeta sea Controlador, y finalizamos con el
botn Finish.
El primer mtodo que vamos a crear es verPagina(ruta: string). Su cdigo

se muestra a continuacin.
Este mtodo me sirve para mostrar las pginas correspondientes a las vistas,
pero como la clase Controlador se instancia a travs 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 continuacin crearemos una instancia de la clase Controlador.
Recordemos que cuando creamos la vista, incluimos el siguiente cdigo al

archivo index.php.
Cada una de esas comparaciones corresponde a la opcin seleccionada del

men, pero como en este momento estamos trabajando con un controlador,
es necesario hacer unas modificaciones para trabajar la navegabilidad a
travs de la clase controlador, por tal motivo el vamos a incluir el siguiente
cdigo al archivo index.php, reemplazando el mostrado en la imagen anterior.
Podemos probar el sistema de informacin y podemos verificar que tenemos

navegabilidad como al principio, pero esta vez a travs de la clase controlador.
68
2. Agregar Cita.
Ahora vamos a crear el mtodo AgregarCita() dentro de la clase Controlador.
Este mtodo recibe el documento del paciente, el documento del mdico, 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 enva null, al estado
de la cita enviamos la palabra Solicitada, y a observaciones enviamos la palabra
Ninguna.
El cdigo de dicho mtodo es el siguiente.
Con el mtodo agregarCita() en el controlador, es necesario modificar el

bootstrap, teniendo en cuenta que la accin del formulario que enva los
datos de la cita posee la siguiente referencia.
En ese orden de ideas, incluiremos en el bootstrap el siguiente cdigo.
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
generara un error.
69
Al enviar los datos, y si todo ha salido correctamente, nos aparecer una

pgina en blanco, esta pgina no da ninguna informacin y en el siguiente
punto haremos la modificacin necesaria para que muestre al menos los
datos de la cita. Pero podemos verificar, a travs de PhpMyAdmin, en la base
de datos que el registro se inserto correctamente.
Pero el sistema de informacin debe generar un reporte en caso de que la

cita haya quedado bien enviada.
Este reporte se debe mostrar en una nueva pgina, y ms adelante
crearemos la opcin de imprimir para entregarle el soporte fsico al paciente.
Su estructura podra ser similar a la siguiente.
70
Lo primero que debemos hacer crear una nueva pgina 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 cdigo de este nuevo archivo lo encontramos a continuacin.
71
Como podemos observar en este cdigo, en la lnea 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 mtodo agregarCita() de la clase
Controlador para que me muestre la plantilla que creamos anteriormente,
mostrando los datos de la cita ingresada anteriormente.
El cdigo del mtodo agregarCita() se muestra a continuacin.
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 informacin de
las citas asignadas al paciente formateadas en una tabla, por tal motivo, antes de
proceder a crear el mtodo 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 cdigo se muestra en la imagen.
La razn principal por la que esta pgina no fue creada como plantilla
obedece a que ms adelante este contenido se incluir dinmicamente dentro de la
misma pgina consultar.php
Ahora vamos a crear el mtodo consultarCitas() dentro de la clase Controlador.
Este mtodo recibe el documento del paciente, con el cual llamaremos al mtodo
consultarCitasPorDocumento() perteneciente a la clase GestorCitas, y
mostraremos la pgina 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 dinmicamente en la misma pgina consultar, le
daremos el estilo ms adelante.
4. Cancelar Cita.
Igual que en el punto 3, se debe mostrar la informacin 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 cdigo se muestra en la imagen.
Como podemos ver esta pgina por ahora tiene prcticamente el mismo
cdigo que consultarCitas.php, solo tiene de mas una columna con la palabra
Cancelar, podramos pensar en reutilizar el cdigo anterior, eso sera posible, pero
es nececesario diferenciar, posiblemente a travs de una variable.
Ahora vamos a crear el mtodo cancelarCitas() dentro de la clase Controlador.
consultarCitasPorDocumento() perteneciente a la clase GestorCitas, y
mostraremos la pgina 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 sesin continuaremos trabajando con el controlador y el

bootstrap para realizar los procesos necesarios.
77
SESIN 7: INCLUYENDO JAVASCRIPT, AJAX Y

JQUERY
En la sesin 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 informacin, como asignacin, bsqueda y cancelacin de
citas.
En esta sesin empezaremos a realizarle algunos ajustes al sistema de informacin,
apoyndonos en las herramientas Javascript, Ajax y Jquery.
1. Consultar Paciente.
Cuando una cita se asigna, esta ir asociada a un paciente especfico, pero
dicho paciente debe estar registrado en la base de datos del sistema de
informacin, 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 opcin al usuario de ingresar los datos
de dicho paciente.
La estructura que hasta el momento tenemos es la siguiente.
Y el cdigo de esta parte se muestra a continuacin.
Lo que se pretende es que el usuario ingrese el documento del paciente y de
78
clic sobre el botn Consultar. Inmediatamente se realiza la consulta a la base

de datos, validando la informacin del paciente, en base a esa validacin se
mostrara en esta misma pgina especficamente en el div con el id paciente,
la informacin del paciente, y en caso que no exista, mostrara el mensaje con
la opcin 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 pgina 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 bibliogrficas.
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 pginas
que lo utilizarn 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 botn del formulario

identificado con el name e id asignarConsultar.
A dicho botn 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
botn Consultar, inmediatamente el flujo del programa ira hasta la funcin
consultarPaciente() en JavaScript.
Vamos a codificar dicha funcin.
Lo primero que debemos hacer es crear el archivo que contendr el cdigo
JavaScript, por lo tanto nos ubicamos sobre la capeta js y damos clic derecho.
En el men contextual seleccionamos la opcin NewJavaScript File
En caso de que esta opcin no est disponible en el men contextual,
seleccionamos la opcin 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 tambin en los archivos asignar.php, consultar.php,
cancelar.php de la siguiente forma.
Vamos codificar la funcin 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 informacin del mismo en la misma pgina, de lo
contrario se mostrara un mensaje indicando que no existe y un botn que
permita crearlo.
Para realizar estas acciones, utilizaremos una funcin de jquery llamada
load la cual realiza la peticin y reemplaza el contenido html de un elemento
especifico de la pgina.
El cdigo de esta funcin se muestra a continuacin.
A continuacin 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 sesin anterior, crearemos el archivo dentro de la carpeta

html de tipo PHP Web Page.
El nombre del archivo ser consultarPaciente.php y su cdigo se muestra en la

imagen.
81
Ahora vamos a crear el mtodo consultarPaciente() dentro de la clase Controlador.

consultarPaciente() dentro de la clase GestorCitas, y mostraremos la pgina
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 botn cuyo texto es Ingresar Paciente.
Cuando el usuario de clic sobre dicho botn, se debe mostrar un cuadro de
dialogo con el formulario de ingreso de los datos del paciente.
Para la creacin de este formulario, utilizaremos una herramienta de jquery
llamada dialog.
Vamos a descargar el archivo desde la siguiente direccin.
http://jqueryui.com/demos/dialog/#modal-form
En este enlace podrn ver una simulacin del comportamiento deseado,
adems encuentran la documentacin de esta herramienta.
En la parte superior de esta pgina encontraran el enlace
Damos clic sobre dicho enlace y se nos abre una pgina en la cual
seleccionaremos las opciones, Core, Widget, Position y Dialog, como se
muestran en la imagen.
83
A la derecha estn 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 almacenarn 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 opcin es dar clic derecho sobre la carpeta y

seleccionar la opcin del men contextual Extraer en dialog\
Despus 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 codificacin 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 botn Ingresar Paciente.
El cdigo de este formulario se muestra a continuacin.
85
Pero para hacer funcionar este contenido dentro de un elemento del tipo
dialog, es necesario agregar unas lneas de cdigo JavaScript. Vamos a
agregarlas dentro del archivo script.js como se muestra a continuacin.
86
Si todo ha salido bien, al momento de dar clic sobre el botn Ingresar Paciente,
se mostrara un nuevo cuadro de dialogo con el formulario y el documento del
paciente que an no est registrado.
Vamos a codificar en JavaScript las funciones insertarPaciente() y cancelar(),

las cuales estn asociadas a los botones del formulario.
El cdigo se muestra a continuacin.
Ahora vamos a crear el mtodo agregarPaciente() dentro de la clase Controlador.

87

Con estas modificaciones trataremos de insertar el paciente con los datos

que se muestran a continuacin.
Si todo ha salido bien, se mostrara le mensaje confirmndolo.
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 documentacin de esta herramienta en la
pgina. http://jqueryui.com/demos/datepicker/
Si damos clic sobre Download, accedemos a la pgina 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 almacenarn 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 opcin es dar clic derecho sobre la carpeta y

seleccionar la opcin del men contextual Extraer en datepicker\
Despus 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 codificacin 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 lneas de cdigo 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 modificacin 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 ao, para un acceso
sencillo a la seleccin de estas. Por tal motivo modificaremos el cdigo 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 prxima sesin continuaremos con el formulario de asignacin de citas,
con la opcin ver citas y cancelar citas.
92
SESIN 8: INCLUYENDO JAVASCRIPT, AJAX Y

JQUERY 2
En la sesin 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 ms ptima.
En esta sesin continuaremos con el formulario de asignacin de citas, cargando
los datos de los mdicos, y las citas disponibles de acuerdo a la fecha seleccionada.
1. Llenar el select de mdicos.

Al momento de asignar una cita se debe seleccionar el mdico que la atender,
cuando construimos la vista del sistema de informacin, esta seleccin se
trabajo de manera esttica, ingresando en el documento html los mdicos
que en el momento se encontraban en la base de datos, pero ocurre que
si ingresan nuevos mdicos 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 cdigo que controla estas actividades.
Vamos a realizar la siguiente modificacin a ese segmento de cdigo 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 accin de cargar la pgina asignar.php est controlada de la
siguiente manera.
La vamos a modificar para que quede de la siguiente forma.
A continuacin crearemos el mtodo cargarAsignar() en la clase Controlador.

Este tendr el siguiente cdigo.
Con estos cambios, al momento de ingresar a la pgina para asignar una

cita, dinmicamente se cargaran los mdicos existentes en la base de datos.
2. Llenar el select de horas.

Para llenar el select con las los horarios disponibles de un mdico cierto da,
es necesario que se tenga seleccionado tanto un mdico como una fecha,
por tal motivo es necesario que al momento de cambiar el mdico 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 realizarn en el archivo asignar.php, y se muestran en
las imgenes.
94
Vamos a crear ahora la funcin cargarHoras() dentro del archivo script.js.

Dicha funcin posee el siguiente cdigo.
Vamos a asignarle un manejador al evento mousedown del select hora

para validar que estn seleccionados el mdico y la fecha. Para que en caso
de no estar seleccionado, nos muestre una alerta. Anteriormente tenamos el
siguiente segmento de cdigo.
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
dinmicamente.
Vamos a reemplazar entonces el segmento de cdigo anterior por el siguiente.
Ahora vamos a agregar en JavaScript la funcin seleccionarHora() la cual

tendr el siguiente cdigo.
95
3. Mtodo consultarHorasDisponibles().
En la sesin 5 trabajamos con las clases del modelo, y entre ellas codificamos
la clase GestorCita. Dentro de esta clase quedaron pendientes algunos
mtodos, los cuales no se codificaron en dicha sesin y se irn codificando
a continuacin.
El mtodo consultarHorasDisponibles() permite consultar el listado de
horas disponibles para atender una cita un mdico en una fecha especfica.
Antes de proceder a codificar este cdigo, es necesario crear una nueva tabla
en la base de datos la cual almacenar las horas en las cuales se atendern
citas en el consultorio odontolgico.
Abrimos el programa

En la sesin 1 se explico detalladamente cmo crear tablas y campos, por
lo tanto si hay dudas con respecto a este proceso, es necesario remitirse a esta
sesin.
Luego de abrir MySQL Query Browser, dan clic derecho sobre la base de
datos citas y seleccionan la opcin 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 travs de MySQL
Query Browser o PHPMyAdmin.
Los datos que deben ingresar son los siguientes.
Ahora si procedemos a la creacin del mtodo consultarHorasDisponibles()

dentro de la clase GestorCitas, el cual tiene el siguiente cdigo.
97
En este momento tenemos nuestro componente JavaScript, nuestro mtodo

dentro de la clase GestorCita, entonces nos falta crear el mtodo dentro de
nuestro controlador y acceder a l a travs del index.php. Adicional a ello,
tambin 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 cdigo.
A continuacin crearemos el mtodo consultarHorasDisponibles(), el cual

es miembro de la clase Controlador. Este posee el cdigo mostrado en la
imagen.
Pero para que este cdigo funcione es necesario hacer la modificacin 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, tambin se mostrara un alert, y si ambos campos
poseen datos, se mostrara un listado con las horas disponibles para citas que
posee el mdico esa fecha.
98
4. Llenar el select de consultorio.

Este proceso tiene los mismos pasos que se realizaron al llenar el select de
mdicos.
Actualmente tenemos el siguiente cdigo que controla esta actividad.
Vamos a realizar la siguiente modificacin a ese segmento de cdigo como

se muestra en la imagen.
99
Pero para que todo esto funciones como se desea, es necesario modificar el
mtodo cargarAsignar() del controlador.
Este tendr las modificaciones sealadas en la imagen.
5. Consultar Citas.
Ya hemos terminado prcticamente todos los procesos correspondientes a la
asignacin de una cita, ahora trabajaremos sobre la opcin Consultar cita.
En la sesin 6, se trabajo este punto, el cual muestra un formulario para
ingresar el documento del paciente y en otra pgina mostraba las citas que
tenia asignadas.
Esto lo modificaremos de tal forma que al usuario dar clic sobre el botn
consultar, el resultado se cargue dinmicamente en la misma pgina.
El primer cambio lo realizaremos en el archivo consultar.php, all tenemos
un botn el cual posee el siguiente cdigo.
Pero este cdigo lo reemplazaremos por el siguiente.
A continuacin necesitamos crear la funcin consultarCita() dentro del

archivo script.php. Esta funcin contendr el cdigo mostrado en la imagen.
El siguiente cambio, se debe realizar en el archivo index.php, ya que

anteriormente, el documento del paciente llegaba a travs de la matriz $_
POST, y con los cambios anteriores llegara en la matriz $_GET.
Con estos cambios, la carga se realizara dinmicamente, 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 informacin correspondiente a la cita seleccionada.
Vamos a realizarle la siguiente modificacin al archivo consultarCitas.php,
justo en la celda donde se encuentra la palabra Ver.
A continuacin insertaremos el cdigo en el archivo index.php, que se
encargara de llamar al mtodo adecuado del controlador, cuando la accin
sea verCita. El cdigo a insertar en el index.php se muestra en la imagen.
Ahora crearemos el mtodo verCita() dentro del controlador. Este tendr

el siguiente cdigo.
Si todo ha quedado bien, al momento de dar clic sobre el enlace Ver en

alguna de las citas, nos aparecer la informacin 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 sesin.
El primer cambio lo realizaremos en el archivo cancelar.php, all tenemos un
botn el cual posee el siguiente cdigo.
Pero este cdigo lo reemplazaremos por el siguiente.
A continuacin necesitamos crear la funcin cancelarCita() dentro del archivo
script.php. Esta funcin contendr el cdigo 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 travs de la matriz $_
POST, y con los cambios anteriores llegara en la matriz $_GET.
Con estos cambios, la carga se realizara dinmicamente, 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 modificacin al archivo cancelarCitas.php,
justo en la celda donde se encuentra la palabra cancelar.
Ahora es necesario crear la funcin confirmarCancelar() dentro del archivo
script.js. Dicha funcin contiene el siguiente cdigo.
A continuacin insertaremos el cdigo en el archivo index.php, que se
103
encargara de llamar al mtodo adecuado del controlador, cuando la accin

sea confirmarCancelar. El cdigo a insertar en el index.php se muestra en
la imagen.
Ahora crearemos el mtodo confirmarCancelarCita()

controlador. Este tendr el siguiente cdigo.
dentro
del
Para finalizar, es necesario crear el mtodo cancelarCita() dentro de la

clase GestorCita.
Dicho mtodo tendr el siguiente cdigo.
Si todo ha quedado bien, al momento de dar clic sobre el enlace Cancelar en

alguna de las citas, nos aparecer un mensaje de confirmacin.
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 sesin, en la prxima sesin
implementaremos el reporte para generar un pdf con los datos de la cita
asignada.
105
SESIN 9: GENERACIN DEL REPORTE DE LA

CITA
En la sesin anterior le asignamos dinamismo a las pginas consultar y cancelar,
de tal forma que al ingresar el documento de un paciente, aparecieran las citas
asignadas, adicional a ello creamos todo el cdigo necesario para cancelar una cita
asignada.
En esta sesin generaremos el reporte en pdf de la asignacin de la cita para poderlo
imprimir.
1. Generacin del reporte de asignacin de cita.

Lo primero que haremos ser agregar un enlace que me permitir generar el reporte,
esta modificacin la haremos al archivo confirmarCita.php y ser el mostrado en
la imagen.
A continuacin modificaremos el index.php para ejecutar la accin. El cdigo se

muestra a continuacin.
Ahora crearemos el mtodo generarReporte() dentro de la clase Controlador.

Dicho mtodo tendr el cdigo 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 librera llamada html2pdf, de la cual
podemos consultar la informacin y descargar desde el siguiente enlace. http://
html2pdf.fr/es/default
Para descargar la librera, damos clic sobre la imagen mostrada en dicha pgina
web.
Damos clic sobre la opcin

En
la
siguiente
pgina
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 opcin Extraer aqu.
107
La estructura de la carpeta pdf quedara as.
Dentro de la carpeta Vistahtml crearemos una nueva Php Web Page, la cual
tendr el nombre reporteCita.php, el cdigo 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
Construccin Objeto de Aprendizaje
Desarrollador de contenido
Experto temtico
Leydy Carolina Muoz
Asesor pedaggico
Rafael Neftal Lizcano Reyes

Claudia Milena Hernndez
Produccin Multimedia
Luis Fernando Botero Mendoza

Victor Hugo Tabares
Programadores
Daniel Eduardo Martnez
Lder expertos temticos
Ana Yaqueline Chavarro Parra
Lder lnea de produccin
Santiago Lozada Garcs
110

Sena Desarrollo Aplicaciones Web

Caricato da

Informazioni sul documento

Descrizione originale:

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

Sena Desarrollo Aplicaciones Web

Caricato da

Copyright:

Formati disponibili

DESARROLLO DE APLICACINES WEB EN PHP

FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

SESIN 1: CONSTRUYENDO LA BASE DE DATOS

1. Activacin de los servicios en XAMPP

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

2. Construccin de la base de datos.

Antes de ejecutar este programa, se debe inicializar el servidor

Luego de instalar la herramienta MySQL GUI Tools damos clic

En la pantalla inicial nos muestra las opciones para ingresar al

A continuacin se nos muestra la ventana principal de MySQL Query Browser

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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

Con la herramienta MySql Query Browser en ejecucin, se procede a la

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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. Creacin de las tablas.

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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.

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

Ms abajo aparecen tres pestaas.

Verifiquemos primero la pestaa Table Options. El campo que ms interesa

Retornemos nuevamente a la pestaa Columns and Indices.

En el primer espacio que encontramos all procedemos a crear

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

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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

Ms abajo dentro del cuadro de dilogo encontraremos otras tres

En la primera pestaa podremos asignar ndices a la base de datos, por

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

Por ahora no trabajaremos sobre ninguna de esas pestaas, y guardaremos

Si todo ha salido bien, no se debe mostrar ningn mensaje de error.

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

En la tabla TRATAMIENTOS existe una llave fornea en el campo

Seleccionamos la pestaa Foreign Keys y damos clic sobre +.

SENA - Servicio Nacional de Aprendizaje

Desarrollo de Aplicacines Web en PHP

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

Luego de agregar la llave fornea, es el momento de llenar el resto de campos.

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