genera un index.php con su conexion.sql y sus .
ccs de este formulario:
•Nombre
¡Claro que sí! A continuación, te proporciono los tres archivos que necesitas (index.php,
conexion.sql, y estilos.css) para crear el formulario de registro.
He estructurado el código de forma clara y segura, utilizando prácticas modernas como las
sentencias preparadas en PHP para prevenir inyecciones SQL.
1. Archivo de Base de Datos (conexion.sql)
Este archivo contiene el código SQL para crear la base de datos y la tabla donde se
almacenarán los datos del formulario.
Instrucciones:
1. Abre tu gestor de base de datos (como phpMyAdmin).
2. Crea una nueva base de datos llamada registro_escolar.
3. Ve a la pestaña "SQL" y pega el siguiente código.
4. Haz clic en "Continuar" o "Go" para ejecutarlo.
SQL
-- Crear la base de datos si no existe
CREATE DATABASE IF NOT EXISTS registro_escolar CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
-- Usar la base de datos recién creada
USE registro_escolar;
-- Crear la tabla para los estudiantes
CREATE TABLE IF NOT EXISTS estudiantes (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(100) NOT NULL,
apellido VARCHAR(100) NOT NULL,
cedula VARCHAR(20) NOT NULL UNIQUE,
fecha_nacimiento DATE NOT NULL,
grado VARCHAR(50),
edad INT,
tipo_sangre VARCHAR(5),
telefono VARCHAR(20),
direccion TEXT,
alergias TEXT,
sexo VARCHAR(20),
enfermedad TEXT,
discapacidad TEXT,
nombre_representante VARCHAR(200) NOT NULL,
telefono_representante VARCHAR(20) NOT NULL,
fecha_registro TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB;
2. Archivo de Estilos (estilos.css)
Este archivo le dará una apariencia limpia y ordenada a tu formulario. Guárdalo en la
misma carpeta que tu index.php.
CSS
/* estilos.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 700px;
}
h1 {
color: #0056b3;
text-align: center;
margin-bottom: 25px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
/* Hacer que algunos campos ocupen todo el ancho */
.full-width {
grid-column: 1 / -1;
}
label {
margin-bottom: 8px;
font-weight: bold;
font-size: 0.9em;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Importante para que el padding no
afecte el ancho */
font-size: 1em;
}
input:focus, select:focus, textarea:focus {
border-color: #0056b3;
outline: none;
box-shadow: 0 0 5px rgba(0, 86, 179, 0.2);
}
textarea {
resize: vertical;
min-height: 80px;
}
.btn-submit {
width: 100%;
padding: 15px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
}
.btn-submit:hover {
background-color: #004494;
}
/* Mensajes de feedback */
.mensaje {
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
.exito {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Media Query para pantallas pequeñas */
@media (max-width: 600px) {
.form-grid {
grid-template-columns: 1fr;
}
}
3. Archivo Principal (index.php)
Este es el archivo principal. Contiene el formulario HTML y el código PHP que procesa los
datos y los inserta en la base de datos.
¡Importante! Debes configurar tus credenciales de la base de datos en la sección de
conexión PHP.
PHP
<?php
// Variable para almacenar mensajes de estado
$mensaje = '';
// Verificar si el formulario ha sido enviado (método POST)
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// --- CONFIGURACIÓN DE LA CONEXIÓN A LA BASE DE DATOS ---
$servidor = "localhost"; // o la IP de tu servidor de BD
$usuario_bd = "root"; // tu usuario de la BD
$password_bd = ""; // tu contraseña de la BD
$nombre_bd = "registro_escolar"; // el nombre de tu BD
// Crear la conexión
$conexion = new mysqli($servidor, $usuario_bd, $password_bd,
$nombre_bd);
// Verificar si la conexión falló
if ($conexion->connect_error) {
die("Error de conexión: " . $conexion->connect_error);
}
// --- RECOGER LOS DATOS DEL FORMULARIO ---
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$cedula = $_POST['cedula'];
$fecha_nacimiento = $_POST['fecha_nacimiento'];
$grado = $_POST['grado'];
$edad = $_POST['edad'];
$tipo_sangre = $_POST['tipo_sangre'];
$telefono = $_POST['telefono'];
$direccion = $_POST['direccion'];
$alergias = $_POST['alergias'];
$sexo = $_POST['sexo'];
$enfermedad = $_POST['enfermedad'];
$discapacidad = $_POST['discapacidad'];
$nombre_representante = $_POST['nombre_representante'];
$telefono_representante = $_POST['telefono_representante'];
// --- PREPARAR LA CONSULTA SQL PARA EVITAR INYECCIONES SQL ---
// El '?' son marcadores de posición para los datos
$sql = "INSERT INTO estudiantes (nombre, apellido, cedula,
fecha_nacimiento, grado, edad, tipo_sangre, telefono, direccion,
alergias, sexo, enfermedad, discapacidad, nombre_representante,
telefono_representante) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,
?, ?)";
$stmt = $conexion->prepare($sql);
if ($stmt) {
// Vincular los parámetros con las variables.
// Las letras 's' e 'i' indican el tipo de dato: s=string,
i=integer
$stmt->bind_param(
"sssssisssssssss",
$nombre,
$apellido,
$cedula,
$fecha_nacimiento,
$grado,
$edad,
$tipo_sangre,
$telefono,
$direccion,
$alergias,
$sexo,
$enfermedad,
$discapacidad,
$nombre_representante,
$telefono_representante
);
// Ejecutar la consulta
if ($stmt->execute()) {
$mensaje = "<div class='mensaje exito'>¡Registro guardado
exitosamente!</div>";
} else {
// Manejar error de cédula duplicada
if ($conexion->errno == 1062) {
$mensaje = "<div class='mensaje error'>Error: La
cédula '$cedula' ya se encuentra registrada.</div>";
} else {
$mensaje = "<div class='mensaje error'>Error al
guardar el registro: " . $stmt->error . "</div>";
}
}
// Cerrar la sentencia
$stmt->close();
} else {
$mensaje = "<div class='mensaje error'>Error al preparar la
consulta: " . $conexion->error . "</div>";
}
// Cerrar la conexión
$conexion->close();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Formulario de Inscripción Escolar</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="container">
<h1>Formulario de Inscripción Escolar</h1>
<?php echo $mensaje; // Muestra el mensaje de éxito o error
aquí ?>
<form action="index.php" method="post">
<div class="form-grid">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"
required>
</div>
<div class="form-group">
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" name="apellido"
required>
</div>
<div class="form-group">
<label for="cedula">Cédula:</label>
<input type="text" id="cedula" name="cedula"
required>
</div>
<div class="form-group">
<label for="fecha_nacimiento">Fecha de
nacimiento:</label>
<input type="date" id="fecha_nacimiento"
name="fecha_nacimiento" required>
</div>
<div class="form-group">
<label for="grado">Año o Grado:</label>
<input type="text" id="grado" name="grado">
</div>
<div class="form-group">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad">
</div>
<div class="form-group">
<label for="sexo">Sexo:</label>
<select id="sexo" name="sexo">
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
<option value="Otro">Otro</option>
</select>
</div>
<div class="form-group">
<label for="telefono">Número de teléfono:</label>
<input type="tel" id="telefono" name="telefono">
</div>
<div class="form-group full-width">
<label for="direccion">Dirección:</label>
<textarea id="direccion"
name="direccion"></textarea>
</div>
<div class="form-group">
<label for="tipo_sangre">Tipo de sangre:</label>
<select id="tipo_sangre" name="tipo_sangre">
<option value="">Seleccionar...</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div class="form-group full-width">
<label for="alergias">Alergias (si no tiene,
escribir 'Ninguna'):</label>
<textarea id="alergias"
name="alergias"></textarea>
</div>
<div class="form-group full-width">
<label for="enfermedad">Enfermedad que padece (si
no tiene, escribir 'Ninguna'):</label>
<textarea id="enfermedad"
name="enfermedad"></textarea>
</div>
<div class="form-group full-width">
<label for="discapacidad">Posee alguna
discapacidad (especificar cuál, si no, 'Ninguna'):</label>
<textarea id="discapacidad"
name="discapacidad"></textarea>
</div>
<div class="form-group">
<label for="nombre_representante">Nombre del
Representante (o contacto de emergencia):</label>
<input type="text" id="nombre_representante"
name="nombre_representante" required>
</div>
<div class="form-group">
<label for="telefono_representante">Número de
teléfono del Representante:</label>
<input type="tel" id="telefono_representante"
name="telefono_representante" required>
</div>
</div>
<button type="submit" class="btn-submit">Registrar
Alumno</button>
</form>
</div>
</body>
</html>
Resumen y Pasos a Seguir:
1. Crea la Base de Datos: Usa conexion.sql en phpMyAdmin para crear la base de
datos registro_escolar y la tabla estudiantes.
2. Configura la Conexión: Abre index.php y modifica las variables $servidor,
$usuario_bd, $password_bd, y $nombre_bd con tus datos de conexión. Si usas
XAMPP, los valores por defecto suelen ser correctos (usuario 'root' sin contraseña).
3. Organiza los Archivos: Guarda index.php y estilos.css en la misma carpeta
dentro de tu servidor web (por ejemplo, en la carpeta htdocs de XAMPP).
4. Accede al Formulario: Abre tu navegador y ve a la dirección donde guardaste los
archivos (ej. http://localhost/nombre-de-tu-carpeta/index.php).
5. Prueba: Llena el formulario y envíalo. Deberías ver un mensaje de éxito, y los
datos aparecerán en tu tabla estudiantes en la base de datos.
