“Año de la unidad, la paz y el desarrollo”
INSTITUCIÓN DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “Almirante Miguel Grau”
Recursos Digitales en la Red CLAUDIO ADRIANO SALVATIERRA CRISPIN
1
Datos del Informe 1. 1 . Nombre del informe
Semana 08 – Simuladores Virtuales 1.2. Apellidos y Nombres:
Salvatierra Crispin, Claudio Adriano 1.3. Programa de Estudios:
Arquitectura de Plataformas y Servicios de Tecnologías de la Información (APYSTI) 1.4. Unidad Didáctica: Recursos Digitales en la Red 1.5. Docente Encargado:
Ing. Omar Edgardo García Lamadrid 1.6. Semestre: 2023 - II 1.7. Turno: Diurno 1.8. Institución educativa:
Instituto de Educación Superior Tecnológico Público Almirante Miguel Grau 1.9. Departamento: Piura 1.10. Provincia: Piura 1.11. Distrito: 26 de Octubre CLAUDIO ADRIANO SALVATIERRA CRISPIN
2
DEFINICION: XAMPP es una distribución de Apache cómpletamente gratuita y facil de instalar que cóntiene MariaDB, PHP y Perl. El paquete de instalación de XAMPP ha sidó disenadó para ser increíblemente facil de instalar y usar ❖ X: Sistema Operativó Windóws XP ❖ A: Servidór Web Apache ❖ M: Maria DB, es un servidór base de datós, que es cónclusión es MySQL ❖ P: PHP, es un lenguaje de prógramación ❖ P: Perl, es Un Lenguaje De Prógramación
CLAUDIO ADRIANO SALVATIERRA CRISPIN
3
PASOS PARA DISEÑAR NUESTRA PAGINA WEB UTILIZANDO LA PLATAFORMA XAMPP 1. Lanzamos el control panel del XAMPP
2. Encendemos el servidor web Apache
CLAUDIO ADRIANO SALVATIERRA CRISPIN
4
3. Crear una carpeta llamada “alumnos” dentro del local host o también llamado “htdocs”
4. Abrimos el programa Sublime text y creamos un programa llamado “hola.php” con el siguiente código y lo guardamos en la carpeta alumnos,
<?php echo "<center><h1>FELICITACIONES LOGRASTE<br> INGRESAR</h1>" ?>
CLAUDIO ADRIANO SALVATIERRA CRISPIN
5
Cuando lo ingresamos correctamente, saldría así:
5. Creamos una carpeta llamada “Figuras” o “Imágenes” dentro de la carpeta “alumnos” y agregamos las imágenes que usaremos.
CLAUDIO ADRIANO SALVATIERRA CRISPIN
6
6. Creamos otro programa llamado “login.php”, el codigo sería así:
CLAUDIO ADRIANO SALVATIERRA CRISPIN
7
<!--login.php--> <?php echo"<center>"; if (isset($_POST['btnr'])) { $user=$_POST['txtu']; $pass=$_POST['txtp']; if ($user=="" or $pass=="") { echo "Tiene que ingresar el usuario y su contraseña"; }else{ if ($user=="admin" and $pass=="1234") { echo "Sus datos son correctos<br>"; echo "<script>window.location='hola.php'</script>"; }else{ echo "Usuario o contraseña incorrectos"; echo "<a href='login.php'> Intente otra vez </a>"; } } } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Autor:Escriba_Aquì_Su_Nombre</title> </head> <body bgcolor="#53809b"> <form action="login.php" method="POST"> <table bgcolor="#e3b747"> <caption>ACCESO AL SISTEMA</caption> <tr> <td><img src="Figuras/User.png" width="100" heigth="100"> </td> <td><input type="text" name="txtu" placeholder="Digite el usuario"> </td> CLAUDIO ADRIANO SALVATIERRA CRISPIN
8
</tr> <tr> <td><img src="Figuras/password.jpg" width="100" heigth="100"> </td> <td><input type="password" name="txtp" placeholder="Digite su clave"> </td> </tr> <tr> <th colspan="2"><input type="submit" name="btnr" value="Registrar"> </th> </tr> </table> </form> </body> </html>
Nos estarìa quedando asì la pagina web:
CLAUDIO ADRIANO SALVATIERRA CRISPIN
9
7. Creamos una carpeta llamada “CSS” dentro de la carpeta “alumnos”
8. Dentro de la carpeta “CSS” creamos el programa “estilos.css”
CLAUDIO ADRIANO SALVATIERRA CRISPIN
10
Haciendo uso de los estilos css debemos mejorar el archivo que crearemos llamado “semana08.php” y creando un archivo de estilos body{ background-color:rgb( 82, 156, 232 ); } table{ margin: 0 auto; width: 50%; border-collapse: collapse; } th{ text-align: center; font-size: 20px; font-weight: normal; padding: 10px; background: #86e852; color: black; } td{ text-align: left; font-size: 20px; padding: 10px; background: #52e8b6; color: black; } tr:hover td{ background-color: rgb( 125, 141, 0 ); color: white; }
CLAUDIO ADRIANO SALVATIERRA CRISPIN
11
9. Creamos el programa llamado “semana08.php” con el siguiente código”
CLAUDIO ADRIANO SALVATIERRA CRISPIN
12
<!--semana08.php--> <?php $men=""; if (isset($_POST['btnr'])) { $ap=$_POST['txta']; $di=$_POST['txtd']; $se=$_POST['txts']; $ca=$_POST['txtc']; $men="El alumno $ap\nVive en $di\nde sexo $se\nde la carrera $ca"; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8">
CLAUDIO ADRIANO SALVATIERRA CRISPIN
13
<link rel="stylesheet" type="text/css" href="css/estilos.css"> <title>Formulario de Inscripciòn</title> </head> <body> <form action="semana08.php" method="POST"> <table> <tr> <th colspan="2">INSCRIPCION DE PARTICIPANTES</th> </tr> <tr> <td>Apellidos y Nombres</td> <td><input type="text" name="txta" placeholder="Sus Apellidos al inicio"> </td> </tr> <tr> <td>Direcciòn</td> <td><input type="text" name="txtd" placeholder="Su direcciòn aquì"></td> </tr> <tr> <td>Sexo</td> <td> <select name="txts"> <option value="Hombre">Hombre</option> <option value="Mujer">Mujer</option> </select> </td> </tr> <tr> <td>Carrera</td> <td> <select name="txtc" size="1"> <option value="Arquitectura de Plataforma y Servicios de Tecnologias de la Informaciòn">Arquitectura de Plataforma y Servicios de Tecnologias de la Informaciòn</option> <option value="Contabilidad">Contabilidad</option> <option value="Enfermeria Tecnica">Enfermeria Tecnica</option> CLAUDIO ADRIANO SALVATIERRA CRISPIN
14
<option value="Electridicad Industrial">Electridicad Industrial</option> <option value="Quimica Industrial">Quimica Industrial</option> <option value="Asistencia Administrativa">Asistencia Administrativa</option> <option value="Mecanica Automotriz">Mecanica Automotriz</option> <option value="Electronica Industrial">Electronica Industrial</option> <option value="Mecanica de Producciòn Industrial">Mecanica de Producciòn Industrial</option> </select> </td> </tr> <tr> <th><input type="submit" name="btnr" value="Registrar"></th> <th><input type="submit" name="btnl" value="Limpiar"> </th> </tr> <tr> <th colspan="2">LOS DATOS INGRESADOS SON</th> </tr> <tr> <th colspan="2"><textarea rows="4" cols="80"><?=$men?></textarea> </th> </tr> </table> </form> </body> </html>
CLAUDIO ADRIANO SALVATIERRA CRISPIN
15
El Formulario nos quedaría así:
CLAUDIO ADRIANO SALVATIERRA CRISPIN
16
CONCLUSION En conclusión, el uso de XAMPP para crear un sistema de login y formularios es una solución efectiva y conveniente. XAMPP proporciona un entorno de desarrollo completo que incluye Apache, MySQL, PHP y otros componentes esenciales, lo que facilita la creación y prueba de aplicaciones web de forma local. Esta herramienta es especialmente útil para desarrolladores y estudiantes que desean aprender y experimentar con el desarrollo web antes de implementar sus proyectos en un servidor en vivo. En resumen, XAMPP simplifica el proceso de creación de aplicaciones web, lo que lo convierte en una elección sólida para proyectos de desarrollo web a nivel inicial y medio. Atentamente:
Salvatierra Crispin, Claudio Adriano .
CLAUDIO ADRIANO SALVATIERRA CRISPIN
17