INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO

SANTIAGO ANTÚNEZ DE MAYOLO

DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO

SANTIAGO ANTÚNEZ DE MAYOLO

“Ser Excelentes”

PROGRAMA DE ESTUDIOS

DISEÑO Y PROGRAMACIÓN WEB

UNIDAD DIDÁCTICA:

Programación de Componentes de Software

DOCENTE:
María Magdalena Gómez Galindo

Proyecto Final Titulado:

REGISTRO DE NACIDOS EN LA POSTA DE

SALUD “El SOCORRO” DEL DISTRITO DE
CHILCA

ELABORADO POR:

LAZO GOMEZ, Sofía

RODRIGUEZ GÓMEZ, Sayuri

i
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

PERIODO ACADÉMICO 2024 - I

Dedicatoria

ii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

Agradecimientos

iii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

ÍNDICE
N° Pág.
Caratula i
Dedicatoria ii
Agradecimientos iii
Índice iv
Introducción vii
CAPÍTULO I
IDENTIFICACIÓN Y REQUERIMIENTOS

1.1. Título del Proyecto 08

1.2. Misión, Visión 08

1.3. Planteamiento del Problema 08

1.4. Objetivo 09

1.5. Diseño del Proyecto 10

1.6. Descripción de Herramientas 11

1.6.1. Servidor Local 11

1.6.2. Entorno de Desarrollo 11

1.6.3. Lenguaje de Programación 12

1.6.4. Navegador Web 12

1.6.5. Gestor de Base de Datos 12

CAPÍTULO II

DISEÑO DE BASE DE DATOS

2.1. Diagrama de Base de Datos: Nombre de Base de Datos 13

2.2. Creación de Base de Datos Nombre de Base de Datos 14

iv
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

2.3. Creación de Tablas 14

2.3.1. Tabla Denominado: Nombre de la Tabla 15

2.3.2. Tabla Denominado: Nombre de la Tabla 15

2.3.1. Tabla Denominado: Nombre de la Tabla 16

2.3.1. Primary Key 16

2.3.2. Foreign Key 17

2.4. Creación de Restricciones de Tablas 17

2.4.1. Unique 17

2.4.2. Default 17

2.4.1. Check 18

2.5. Creación de Diagrama EER 18

2.6. Insertando Datos a las Tablas 19

2.6.1. Tabla Denominado: Nombre de la Tabla 19

2.6.2. Tabla Denominado: Nombre de la Tabla 19

2.6.1. Tabla Denominado: Nombre de la Tabla 19

2.7. Realizando Consultas a la Base de Datos: Nombre 20

2.7.1. Consulta de la tabla: Nombre de la Tabla 20

2.7.2. Consulta de la tabla: Nombre de la Tabla 20

2.7.3. Consulta de la tabla: Nombre de la Tabla 20

CAPÍTULO III

DESARROLLO DEL PROYECTO EN PHP DE NETBEANS

3.1. Diseño del Proyecto Denominado: Nombre del Proyecto 22

3.2. Creación del Proyecto Denominado: Nombre del Proyecto 22

v
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

3.3. Creación de Carpetas del Proyecto 23

3.3.1. Carpeta Denominada: Nombre de la Carpeta 21

 Código del Archivo: Nombre del Archivo 21

 Código del Archivo: Nombre del Archivo 21
 Código del Archivo: Nombre del Archivo 21

3.3.2. Carpeta Denominada: Nombre de la Carpeta 23

 Código del Archivo: Nombre del Archivo 23

 Código del Archivo: Nombre del Archivo 24
 Código del Archivo: Nombre del Archivo 25

3.3.3. Carpeta Denominada: Nombre de la Carpeta 26

 Código del Archivo: Nombre del Archivo 26

 Código del Archivo: Nombre del Archivo 27

3.3.4. Archivo Denominado: Index 29

3.3.5. Insertando la Carpeta de Librería Denominado: Nombre de la Librería 30

3.4. CRUD 31

3.4.1. Qué es CRUD y Qué Permite Hacer 31

3.4. Dificultades o Limitaciones 31

CAPÍTULO IV

EJECUCIÓN Y RESULTADOS

4.1. Ejecución del Proyecto Denominado: Nombre Nombre 33

4.2. Evidenciar Resultados de la Ejecución del Formulario 34

4.2.1. Evidencia del Create (Crear – Insertar Nuevo Registro) 34

4.2.2. Evidencia del Read (Leer – Buscar Registros) 35

4.2.3. Evidencia del Update (Actualizar – Modificar Registros) 35

4.2.4. Evidencia del Delete (Borrar – Borrar Registros) 36

vi
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

CAPÍTULO V

Conclusiones y Recomendaciones

Conclusiones 40

Recomendaciones 41

Referencias Bibliográficas 42

Anexo 43

Anexar la Codificación completa desde la Base de Datos y PHP Organizada 44

Introducción
Poner la introducción del proyecto

vii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

CAPÍTULO I
IDENTIFICACIÓN Y REQUERIMIENTOS
1.1. Título del Proyecto

El titulo de mi proyecto final se denomina:

Registro de Nacidos en la Posta de Salud “El Socorro”, del Distrito de

Chilca

1.2. Misión, Visión

La misión de la empresa es:

Misión
"En Salón & Spa Susy, nos comprometemos a realzar la belleza única de cada cliente,
brindando servicios de alta calidad que reflejen las últimas tendencias y técnicas innovadoras
en el mundo de la belleza. Nos esforzamos por crear un ambiente acogedor y relajante donde
nuestros clientes puedan experimentar momentos de cuidado personal excepcionales.
Nuestra
misión es impulsar la confianza y el bienestar, superando las expectativas de nuestros clientes
y construyendo relaciones a largo plazo basadas en la confianza y la satisfacción.

Visión
"Nos visualizamos como el destino preferido en el ámbito de la belleza, donde la excelencia
y la creatividad se encuentran. Buscamos ser reconocidos por nuestra capacidad para inspirar
la confianza y realzar la belleza individual de cada persona. Aspiramos a ser líderes en la
industria, continuando con nuestro compromiso de ofrecer servicios de vanguardia,
capacitación constante para nuestro talentoso equipo y una experiencia única para nuestros
clientes. Visualizamos un futuro en el que Salón & spa Susi sea sinónimo de innovación,
calidad y un estándar inigualable en servicios de belleza y bienestar.
1.3. Planteamiento del Problema
El salón de belleza "SUSI" no cuenta con un sistema de reserva para gestionar las citas de sus
clientes, lo que genera:

 Aglomeraciones y demoras en la atención al cliente.

 Insatisfacción del cliente debido a la falta de organización y planificación.

viii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

 Desorganización en la programación de los estilistas y servicios.

 Tiempo de espera prolongado

I. Preguntas sobre el problema

 ¿Cómo podemos mejorar la eficiencia en la gestión de citas en el salón de
belleza "Susi"?
 ¿Cómo podemos mejorar la organización y planificación en la programación
de los estilistas y servicios?
 ¿Cómo podemos mejorar la organización y planificación en la programación
de los estilistas y servicios?

 ¿Cómo podemos resolver el tiempo de espera de los clientes?

1.4. Objetivo

 Diseñar e implementar un sistema de reserva eficiente para el salón de belleza "Susi”.

 Mejorar la satisfacción del cliente.
 Disminuir la pérdida de turnos y citas olvidadas.
 Reducir el tiempo de espera de los clientes.

II. Justificación: La implementación de un sistema de reserva en el salón de belleza

"Susi" permitirá mejorar la eficiencia en la gestión de citas, reducir las aglomeraciones y
demoras en la atención al cliente, y aumentar la satisfacción del cliente. Esto se
traducirá en una mayor competitividad y rentabilidad para el negocio.

1.5. Diseño del Proyecto

I. Alcance:
 El proyecto se centrará en el diseño e implementación de un sistema de reserva
para el salón de belleza "Susi".
 El sistema de reserva será accesible para los clientes a través y una página
web.
II. Requisitos funcionales
 El sistema de reserva debe permitir a los clientes programar citas con los
estilistas y servicios disponibles.
 El sistema de reserva debe permitir a los clientes cancelar o reprogramar citas
con anticipación.
 El sistema de reserva debe permitir a los clientes cancelar o reprogramar citas
con anticipación.
III. Requisitos no funcionales:

ix
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

• El sistema de reserva debe ser fácil de usar y accesible para los clientes y
estilistas.
• El sistema de reserva debe ser escalable y adaptable a las necesidades del salón
de belleza.
• El sistema de reserva debe ser escalable y adaptable a las necesidades del salón
de belleza.
IV. Diseño del Sistema
 Las páginas web se diseñarán con una interfaz fácil de usar y accesible para
los clientes.
 La base de datos se diseñará utilizando un sistema de gestión de bases de datos
relacionales como MySQL.
 El sistema de reserva se desarrollará utilizando tecnologías web como HTML,
CSS, JavaScript, PHP.
1.6. Descripción de Herramientas
1.6.1 Servidor local:
 Xampp. - Nos permite la creación y prueba de páginas web u otros elementos de
programación.
1.6.2 Entorno de desarrollo:
 Apache NetBeans IDE 21. – Es de código abierto que proporciona editores de
código, asistentes y plantillas. Puede ayudar a los desarrolladores a crear aplicaciones
en Java, PHP y otros lenguajes de programación.
1.6.3 Lenguaje de Programación.
 PHP. - Es un lenguaje de programación popular y ampliamente utilizado en la creación
de aplicaciones web, gracias a su facilidad de uso, flexibilidad y compatibilidad con
una amplia variedad de servidores web y bases de datos.
 HTML. - Es un lenguaje de marcado de hipertexto fundamental para la creación de
páginas web. Es un estándar abierto y gratuito que se utiliza para estructurar y dar
formato a los contenidos de una página web.
 JavaScript. - Es un lenguaje de programación poderoso y flexible que se utiliza para
agregar funcionalidad e interactividad a las páginas web, así como para desarrollar
aplicaciones web y móviles complejas.
 CSS. - Es un lenguaje de hoja de estilos en cascada que se utiliza para describir la
presentación de un documento escrito en un lenguaje de marcado, como HTML o
XML. Permite controlar la apariencia y el diseño de una página web de manera flexible
y personalizable.
1.6.4 Navegador web.

x
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

 Microsoft Edge. - Es un navegador web rápido, seguro y fácil de usar, que se integra
bien con Windows 10. Aunque tiene algunas limitaciones, es una buena opción para
aquellos que buscan un navegador rápido y seguro.
1.6.5 Gestor de base de datos.
 MySQL Server. - Es un sistema de gestión de bases de datos relacionales rápido,
escalable y seguro, que se utiliza ampliamente en aplicaciones web y empresariales.

CAPÍTULO II
2.1Diagrama de Base de Datos: Salón de Belleza

2.2 Creación de Base de Datos: estetica

create database estetica;

2.2Creación de Tablas
2.2.1 Tabla Denominado: empleado
create table empleado (

xi
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

id_empleado INT (8) not null,

nombre VARCHAR(100) NOT NULL,
telefono VARCHAR(15),
correo VARCHAR(100),
especialidad VARCHAR(100)
)engine=InnoDB;

2.2.2 Tabla Denominado: Cliente

create table cliente (
id_cliente INT (8) not null,
id_servicio char(5) null,
nombre VARCHAR(100) not null,
telefono VARCHAR(15) not null,
correo VARCHAR(20) not null,
direccion VARCHAR(255) not null ) engine=InnoDB;

2.2.3 Tabla Denominado: Servicio

CREATE TABLE servicio (
id_servicio char(5) null,
id_cita INT (5) not null,
id_empleado INT (8) not null,
nombre VARCHAR(40) not null,
precio DECIMAL(10, 2) not null
)engine=InnoDB;

2.2.4 Tabla Denominado: Cita

create table cita (
id_cita INT (5) not null,
id_cliente INT (8) not null,
nombre varchar(100) not null,
id_servicio char(5) not null,
fecha DATE not null,
hora TIME not null,
estado char (10) not null
)engine=InnoDB;
2.2.5 Tabla Denominado: Producto
CREATE TABLE producto(
id_producto char(5) not null,
nombre VARCHAR(100) not null,
precio DECIMAL(10, 2) not null,
cantidad char (2)not null
)engine=InnoDB;

xii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

2.2.6 Tabla Denominado: Servicio

CREATE TABLE servicio (
id_servicio char(5) null,
id_cita INT (5) not null,
id_empleado INT (8) not null,
nombre VARCHAR(40) not null,
precio DECIMAL(10, 2) not null
)engine=InnoDB;
2.2.7 Llave Primaria: Cliente
alter table cliente
add constraint PK_cliente
primary key (id_cliente);
2.2.8 Llave Primaria: Empleada
alter table empleado
add constraint PK_empleado
primary key (id_empleado);
2.2.9 Llave Primaria: Servicios
alter table servicio
add constraint PK_servicio
primary key (id_servicio);
2.2.10 Llave Primaria: Producto
alter table producto
add constraint PK_producto
primary key (id_producto);
2.2.11 Llave Primaria: Cita
alter table cita
add constraint PK_cita
primary key (id_cita);
2..2.12 Llave Primaria: Cliente
2..2.13 Llave Primaria: Cliente

xiii
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

1.7.

1.8.

xiv
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

15
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

16
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

17
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

18
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

19
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

20
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

21
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

22
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

23
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

24
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

25
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

26
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

27
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

28
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

29
 INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICA PÚBLICO
SANTIAGO ANTÚNEZ DE MAYOLO
DISEÑO Y PROGRAMACIÓN WEB
UNIDAD DIDÁCTICA: PROGRAMACIÓN DE COMPONENTES DE SOFTWARE
“Ser excelentes”
______________________________________________________________

30