ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
GUÍA DE LABORATORIO NRO. 07
PROGRAMA: FACULTAD DE INGENIERÍA Y ARQUITECTURA
EXPERIENCIA CURRICULAR: INGENIERÍA WEB
CICLO: VI
TURNO: A1
SEMESTRE: 2025-1
AUTORES: (Nombre del/los estudiantes)
DOCENTE: Mg. Franklin Román Nano
SESIÓN Nº: 7
LUGAR: Laboratorio Cómputo
PROTOCOLO DE SEGURIDAD/ NORMAS BÁSICAS PARA EL TRABAJO EN EL
LABORATORIO
✔ Está prohibido comer o beber.
✔ Debe haber orden en la mesa de trabajo
✔ Debe portar la guia de laboratório (taller/sala de audiências/otros
- En relacion al laboratório
✔ El horario del laboratorio, aunque amplio, es limitado.
✔ Leerse cuidadosamente las instrucciones de su manejo. Si no están, deben pedirse al profesor
✔ Haber leído con atención el guion de la práctica antes de entrar en el laboratorio
✔ Los generadores de las prácticas que impliquen montajes eléctricos no deben ponerse en
marcha hasta que el profesor haya revisado el circuito montado
✔ Otros.
I. TEMA: Lenguaje de programación HTML
II. RESULTADO DE APRENDIZAJE:
Diseña la arquitectura de un software web para una organización.
III. OBJETIVO DE LA PRACTICA:
✔ Desarrollar una página web estática con PHP con tablas, imágenes y párrafos.
IV. LECTURAS PREVIAS A LA PRACTICA/FUNDAMENTO TEÓRICO SOBRE EL
TEMA
Con la fusión de HTML, CSS y JavaScript, las herramientas esenciales para crear la web tal
como la conocemos hoy estaban disponibles, pero aún había un desafío por resolver. Estos
Pág. 1 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
lenguajes se habían desarrollado por separado y, como resultado, evolucionaron de manera
independiente sin tener en cuenta los avances de los demás. La solución llegó con la
introducción de una nueva especificación conocida como HTML5. HTML5 unifica todas estas
tecnologías empleadas en el desarrollo web. De ahora en adelante, HTML define la estructura
del documento, CSS da formato a esa estructura y su contenido para su visualización en
pantalla, y JavaScript proporciona la capacidad de procesamiento necesaria para crear
aplicaciones web completamente operativas.
Considera las siguientes lecturas previas y materiales complementarios disponibles en el
Blackboard:
✔ El gran libro de HTML5, CSS3 y JavaScript (3ra Edición) de J.D. Gauchat
✔ Desarrollo de Aplicaciones Web con HTML, PHP y MYSQL (1ra Edición) de la Editorial
Ritisa
✔ Aprender PHP, MySQL y JavaScript
✔ Guía de instalación de visual studio code - xampp y php
✔ Estructura básica de un documento en HTML
✔ Desarrollo y programación en entornos web (1ra Edición) de Editorial Alfaomega
V. METODOLOGÍA:
✔ Ingresar al blackboard para descargar el archivo que contiene la lista de extensiones para el
entorno de Visual Studio Code y las páginas recomendadas para el desarrollo del laboratorio.
✔ Instalar o actualizar el IDE de Visual Studio Code y XAMPP.
✔ Ingresar al entorno de desarrollo integrado: Visual Studio Code.
✔ Instalar y configurar las extensiones recomendadas.
✔ Elaborar un informe con las evidencias del desarrollo del laboratorio.
VI. RECURSOS:
✔Laboratorio de cómputo (computadora y proyector multimedia) con conexión a internet.
Pág. 2 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
✔Utilizar el IDE de Visual Studio Code para el desarrollo del curso.
✔Utilizar las extensiones del entorno de desarrollo integrado: Visual Studio Code
✔Utilizar los servicios brindados por XAMPP.
✔Utilizar la plataforma Blackboard para acceder a la información de la experiencia curricular.
✔Utilizar los navegadores web para consultar la documentación de los lenguajes requeridos
VII.Protocolos de seguridad: Conoce los siguientes protocolos del laboratorio de cómputo.
✔No comer o beber mientras se está trabajando en el laboratorio.
✔No se debe dejar pasar al laboratorio a ninguna persona sin el permiso el responsable del
laboratorio o Docente por más corta que sea su estadía.
✔Leer el procedimiento de laboratorio antes de iniciar la experiencia para conocer de ante
mano los peligros con los que va a trabajar.
VIII. DESARROLLO DE ACTIVIDADES:
VIII.1.Descripción
▪ La actividad se realiza de forma individual
▪ El trabajo de laboratorio consiste en desarrollar aplicaciones web estáticas con el
lenguaje de programación PHP y el lenguaje HTML.
▪ El estudiante hará uso de las herramientas digitales (Visual Studio Code, XAMPP,
navegador web a elección del estudiante).
▪ Realizara la consulta de la documentación en las páginas oficiales de los lenguajes
elegidos.
▪ El estudiante debe organizar sistemáticamente la información requerida con el fin de
resolver la pregunta del trabajo de laboratorio. Es importante leer y comprender el
contenido de las guías y lecturas recomendadas acerca de los lenguajes requeridos para
la asignatura.
8.2. Proceso del trabajo de laboratorio
A continuación, siga los pasos indicados para desarrollar las actividades en la ficha de trabajo
respectivo:
Pág. 3 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
1. Entrar al xampp-control y activamos el mysql y le a start, esperamos a que se inicia y luego 8 min
damos a admin.
2. Se abrirá la siguiente ventana: 5 min
Le damos a nuevo y le damos el nombre de “bdalumos” a nuestra BD y le damos a crear
Pág. 4 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
3. Luego creamos la tabla con el nombre de Alumnos que tendrá 4 columnas
1 min
A continuación, les daremos nombres a las columnas creadas
Pág. 5 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
Pág. 6 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
Le damos a guardar
4. Una vez creada nuestra tabla vamos vamos a conectarla la nuestro programa de php.
Creamos un php llamado conexión 1 min
Pág. 7 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
Aquí crearemos una función llamada conexión que va a retornar la conexión y poder usarla en
otros php luego asignamos nuestro host y el nombre de la BD. En mi caso el host es localhost.
Luego agregamos el usuario y el pass que tengo de forma predeterminada. Guardamos.
5. Crear una pequeña página web donde ingresaremos datos a la BD y luego mostraremos.
creemos un archivo php llamado alumnos y llamamos a la conexión.php que creamos 1 min
anteriormente y esta estará ejecutando la consulta de la tabla alumnos.
6. Creamos un pequeño formulario usando Bootstrap donde ingresaremos los datos del alumno. 15 min.
7. también creamos la trabal donde se iran mostrando los datos que ingresemos en el formulario 1 min.
Pág. 8 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
8. Guardamos y ejecutamos. 5 min.
9. Ahora vamos a mostrar los datos que se vayan ingresando, donde crearemos un arreglo que ira 1 min.
recorriendo la tabla utilizando la consunta echa anteriormente:
Pág. 9 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
También agregamos los botones para actualizar y eliminar.
10.Ahora creamos un php para poder insertar los datos en la BD: 5 min.
Pág. 10 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
Empezamos llamando a la conexión y luego guardamos los datos ingresados en el formulario en
variables que crearemos ahí mismo (debes poner el mismo nombre que tiene en la base de
datos), luego hacemos la consulta sql donde insertamos las variables en la tabla alumnos. Y al
final cuando se complete la conexión te envie de nuevo a alumnos.php.
Ahora para terminar debemos agregar esa línea de código para que lo que se ingrese en el
formulario se envié a insertar.php..
11.GUARDAMOS Y EJECUTAMOS: 5 min.
Pág. 11 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
12.Continuando con la página web ahora debemos implementar las opciones de actualizar y 10 min.
eliminar datos de la BD.
creamos un php llamado actualizar.php donde nos va redirigir cuando le demos al botón de
actualizar, donde vamos a llamar a los datos del usuario seleccionado utilizando su id que es el
código del estudiante.
13.Ahora creamos un nuevo formulario donde iran los datos el alumno a modificar y los datos 15 min.
nuevos que ingresemos seran enviados al update.php que crearemos a continuacion.
14.creamos un update.php, donde recibiremos los datos ingresados en el formulario de 1 min.
actualizar.php y utilizando una nueva consulta sql actualizamos los datos con los datos
Pág. 12 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
ingresados y utilizando el código del alumno para poder ubicar a alumno seleccionado. Al final
nos redirigimos al php de alumnos si la consulta fue exitosa.
15.Ahora creamos el delete.php para borrar los datos que seleccionemos. En este vamos a recibir el 5 min.
id del alumno y con el usamos la consulta sql para borrar el dato y al final si es exitoso nos
redirigimos a alumnos.php
16.para finalizar regresamos a alumnos.php y agregamos lo siguiente 5 min.
Pág. 13 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
17.Aquí estamos enviendo el código del estudiante para actualizar cono delete para poder obtener 15 min.
los datos de estos es sus respectivas consultas..
Guardamos y ejecutamos
Le damos a editar primero
Modificamos y actualizamos
Pág. 14 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Actividades Duración
Ahora le damos a eliminar
TAREA LABORATORIO 7 100
PROBLEMA: Crear una baso de datos con información de personas (nombre, apellido, empleo, minutos
estado civil) donde podamos hacer un CRUD y también mostrar solo a los que están casados o
Solteros.
Pág. 15 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Considerar la siguiente estructura básica para el Cartel científico (propuesta)
Fuente:
Código de
LIBROS, REVISTAS, ARTÍCULOS, TESIS, PÁGINAS WEB.
biblioteca
005.13 B73 Boronczyk T(2009).”PHP y MySQL”.Madrid:Anaya
005.133P D75 Doyle, M.(2010).”Fundamentos PHP práctico”.Madrid:Anaya Multimedia
323.01C35 Castillo, M. (2009) Derechos Humanos. Lima: Fecat.
005.133PM H31 Harris, A.(2009).” Programación con PHP 6 y MySQL”. Madrid: Anaya Multimedia.
005.133PM M52 Meloni J(2009).”PHP, MySQL y Apache”.Madrid:Anaya Multimedia
005.133P L46 Myer, T.& Nowicki S. & Thompson, E.(2010).”Profesional PHP 6”.Madrid:Anaya
Multimedia
Pág. 16 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Pág. 17 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Pág. 18 de 19
ESCUELA PROFESIONAL DE
INGENIERÍA DE SISTEMAS
Pág. 19 de 19
