lOMoARcPSD|37393887
Reto5 Programemos en PHP
Programacion web (Universidad Virtual del Estado de Guanajuato)
Escanea para abrir en Studocu
Studocu no está patrocinado ni avalado por ningún colegio o universidad.
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
Instrucciones:
Retoma el formulario del Reto 3 y compleméntalo utilizando el lenguaje de programación PHP
para que se encargue de registrar los datos de los alumnos, para ello será necesario:
a) Registrar los datos básicos de los alumnos, utilizando el lenguaje de programación PHP.
b) Integrar el botón “Registrar” y mostrar que su funcionalidad es correcta.
c) Enviar los datos capturados a una nueva página que se encargará de recuperar los datos
enviados, utilizando el lenguaje de programación PHP y, a su vez, mostrarlo en una tarjeta.
Para la entrega y elaboración del proceso se deben atender los lineamientos que a
continuación se solicitan:
1. Entregar en un archivo Zip con los siguientes requerimientos:
● Index.php con la creación de un formulario utilizando PHP
● Index.css, empleando las hojas de estilos CSS para aplicar un diseño profesional a la
página index.php
● Card.php con la creación de una tarjeta utilizando PHP
● Card.css, empleando las hojas de estilos CSS para aplicar el diseño profesional a la
página card.php
Programación web
| Reto 5
Programemos en PHP
Nombre completo Escribe aquí
Fecha de elaboración Escribe aquí
Nombre del asesor Escribe aquí
Tip
Para el desarrollo de este reto se recomienda
utilizar el editor de código VSCode. Si no lo
tienes, lo puedes descargar desde el siguiente
enlace: https://code.visualstudio.com/
2. Adaptar el formulario del Reto 3 con las siguientes características (index.php):
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
● El formulario debe tener un color de fondo diferente al que viene por defecto en el cuerpo
del documento.
● Debe mostrar el título “Registrar alumno”.
● Debe tener los siguientes campos con sus respectivos títulos:
o Nombre (el input debe ser de tipo text)
o Apellidos (el input debe ser de tipo text)
o Edad (el input debe ser de tipo number)
o Correo (el input debe ser de tipo email)
o Contraseña (el input debe ser de tipo password)
● Debe tener un botón con la función de enviar los datos del formulario a una nueva página.
Puedes basarte en el siguiente ejemplo. Nota: El diseño no debe ser igual a este.
3. Para el archivo card.php, crea una vista con las siguientes características:
● Debe mostrar una imagen.
● Debe tener el título “Alumno”.
● Debe mostrar los datos enviados en el formulario anterior:
o Nombre
o Apellidos
o Edad
o Correo
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
A continuación, se muestra un ejemplo sobre cómo se debería ver la tarjeta (Nota: No es
obligatorio este diseño).
4. Flujo de la página web: Ingresa los datos en el formulario. Posteriormente, deberás
presionar sobre el botón “Registrar”, el cual enviará la información a la página card.php,
utilizando el método POST. En la página card.php se deberán obtener los datos enviados,
utilizando el lenguaje de programación PHP y mostrar en la tarjeta el nombre, la edad y el
correo, los cuales fueron capturados anteriormente en el formulario.
index.php card.php
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
Los recursos visuales fueron tomados totalmente de Freepick. (2020). Niño de regreso a la escuela vector gratuito. Recuperado
de https://www.freepik.es/vector-gratis/nino-regreso-escuela_5721904.htm#page=1&query=student&position=21
Index.php
<!DOCTYPE php>
<html>
<head>
<title>Registrar alumno</title>
</head>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<h1>Registrar alumno</h1>
<form action="card.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br><br>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos" required><br><br>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" required><br><br>
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo" required><br><br>
<label for="contraseña">Contraseña:</label>
<input type="password" id="contraseña" name="contraseña" required><br><br>
<input type="submit" name="registrar" value="Registrar">
</form>
<footer>UVEG/Programación web</footer>
</body>
</html>
Index.css
body {
background-color: #b3d9ff;
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
h1 {
color: #003399;
text-align: center;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
background-color: #ffcce6;
border: none;
padding: 10px;
margin-bottom: 10px;
border-radius: 20px;
}
input[type="submit"] {
background-color: #ff3333;
color: #fff;
}
input[type="submit"]:hover {
background-color: #cc0000;
}
footer {
color: #003399;
text-align: center;
}
Card.php
<!DOCTYPE php>
<html>
<head>
<title>Datos del alumno</title>
<link rel="stylesheet" type="text/css" href="card.css">
</head>
<body>
<div class="container">
<img src="registrado.png" alt="Registrado" class="image">
<div class="data">
<h1>Datos del alumno</h1>
<?php
if (isset($_POST['registrar'])) {
$nombre = $_POST['nombre'];
Descargado por Juan Reyna (juanreynag04@gmail.com)
lOMoARcPSD|37393887
$apellidos = $_POST['apellidos'];
$edad = $_POST['edad'];
$correo = $_POST['correo'];
// No mostramos la contraseña por seguridad
?>
<p><strong>Nombre:</strong> <?php echo $nombre; ?></p>
<p><strong>Apellidos:</strong> <?php echo $apellidos; ?></p>
<p><strong>Edad:</strong> <?php echo $edad; ?></p>
<p><strong>Correo:</strong> <?php echo $correo; ?></p>
<?php
}
?>
</div>
</div>
</body>
</html>
Card.css
body {
background-color: lightyellow;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.image {
margin-right: 20px;
}
.data {
color: red;
font-weight: bold;
}
Descargado por Juan Reyna (juanreynag04@gmail.com)
