Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones: "reward" (<<) y "forward" (>>) que, al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así:
He estado consultando y lo más parecido a lo que quiero es lo que se llama paginación en PHP, pero no he encontrado hasta el momento ningún ejemplo con lo que me gustaría hacer a mi...
¿me podrían indicar algún ejemplo que conozcan o algún tipo de ayuda (palabras claves de búsqueda de ejemplos similares, ya que no sé muy bien si esto sería paginación u otra cosa)?
Muchísimas gracias,
Les adjunto las partes del código asociadas a lo que quiero modificar en caso de que sirva de ayuda:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header><h1>Gestion de Matriculas</h1></header>
<div id="formEstudiantes">
<fieldset>
<legend>Formulario de Estudiantes</legend>
<form method="post" action="gestionaEstudiantes.php"
name="Estudiantes" id="frmEstudiantes" onsubmit="return getTelefonosYCurso()">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" required
placeholder="Nombre del Estudiante">
<label for="primerApellido">Primer Apellido:</label>
<input type="text" name="primerApellido" id="primerApellido" required placeholder="Apellido del Estudiante">
<label for="segundoApellido">Segundo Apellido:</label>
<input type="text" name="segundoApellido" id="segundoApellido" required placeholder="Segundo Apellido del Estudiante">
<label for="email">Correo:</label>
<input type="text" name="email" id="email" required placeholder="Correo">
<label for="dni">DNI: </label>
<input type="text" name="dni" id="dni" required placeholder="DNI">
<label for="fechaNacimiento">Fecha de Nacimiento: </label>
<input type="date" name="fechaNacimiento" required id="fechaNacimiento">
<input type="submit" value="Alta" id="altaEstudiante">
<button type="button" id="update" disabled>Modificar</button>
<button type="button" id="delete" disabled>Eliminar</button>
<button type="button" id="matricularEnOtroCurso" title="Matricular en otro curso seleccionado"disabled>Matricular</button>
<!-- Listado de estudiantes con Nombre y Apellidos
que al seleccionar uno se rellenan sus datos en el formulario
-->
<label for="Estudiantes">Estudiantes: </label>
<select name="Estudiantes" id="Estudiantes">
<option></option>
<?php
//Las opciones de la lista se rellenan con los
//campos correspondientes de la tabla Estudiantes
//El atributo value debe contener el id del estudiante
require_once './dataModel.php';
try {
$estudiantes = getEstudiantes($db);
} catch (PDOException $exc) {
echo $exc->getMessage();
}
foreach ($estudiantes as $estudiante) {
?>
<option value="<?php echo $estudiante['idEstudiante'] ?>"><?php echo $estudiante['Nombre'] . " " . $estudiante['Primer Apellido'] . " " . $estudiante['Segundo Apellido']; ?></option>
<?php
}
?>
</select>
<!--Campos ocultos para almacenar telefonos y curso al cual se va a matricular
el estudianta-->
<input type="hidden" name="telefonos" value="" id="telefonosDelEstudiante">
<input type="hidden" name="idDelCurso" value="" id="idDelCurso">
<input type="hidden" name="tipoTelefonoEstudiante" value="" id="tipoTelefonoEstudiante">
<input type="hidden" name="idEstudianteSeleccionado" value="" id="idEstudianteSeleccionado">
</form>
</fieldset>
</div>
Parte del código que llamo ajaxMAnager:
require_once './dataModel.php';
//Recuperar informacion de un estudiante seleccionado
$idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado', FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE);
if($idEstudiante !== FALSE) {
$infoEstudiante = getInfoEstudiante($db, $idEstudiante);
echo json_encode($infoEstudiante);
}
La función que empleo para hacer la consulta a la BBDD:
//Recuperar la informacion de un estudiante seleccionado,
//conjuntamente con sus telefonos correspondientes
function getInfoEstudiante(PDO $conn, $idEstudiante) {
$sql = "select e.Nombre as nombre,
e.`Primer Apellido` as primerApellido,
e.`Segundo Apellido` as segundoApellido,
e.DNI as dni,
e.`Correo Electronico` as email,
e.`Fecha de Nacimiento` as fechaNacimiento,
t.idTelefono as idTelefono,
t.Numero as numeroDeTelefono
from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and
e.idEstudiante = :id";
$stmt = $conn->prepare($sql);
$stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT);
$stmt->execute();
$estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $estudiante;
}
y el script en JS que empleo:
/* Implementacion de AJAX con JSON en los siguientes métodos */
//Al seleccionar a un Estudiante de la lista desplegable,
//se rellenaran los campos del formulario
//con los datos del estudiante seleccionado
document.getElementById("Estudiantes").
addEventListener("change",function () {
//Se necesita el ID del estudiante seleccionado
var indice = document.getElementById("Estudiantes").selectedIndex;
//Si el indice es igual a cero, limpiamos el formulario y solamente queda habilitado el
//boton para dar alta a un nuevo estudiante
if (indice === 0) {
document.getElementById("frmEstudiantes").reset();
document.getElementById("altaEstudiante").disabled = false;
document.getElementById("update").disabled = true;
document.getElementById("delete").disabled = true;
document.getElementById("addTelefono").disabled = true;
document.getElementById("matricularEnOtroCurso").disabled = true;
document.getElementById("numerosTelefonos").selectedIndex = 0;
document.getElementById("numerosTelefonos").disabled = true;
document.getElementById("numeroTelefono").value = "";
document.getElementById("actualizarNumeroTelefono").disabled = true;
document.getElementById("eliminarNumeroTelefono").disabled = true;
//Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante"
//y eliminamos los registros con nombres de cursos en la tabla
document.getElementById("estudianteCursos").innerHTML = "";
var nombreCursos = document.getElementById("tablaCursos");
while (nombreCursos.hasChildNodes()) {
nombreCursos.removeChild(nombreCursos.firstChild);
}
} else {
//Habilitamos los botones para Modificar o Eliminar al Estudiante
//y agregar telefonos
document.getElementById("altaEstudiante").disabled = true;
document.getElementById("update").disabled = false;
document.getElementById("delete").disabled = false;
document.getElementById("addTelefono").disabled = false;
document.getElementById("matricularEnOtroCurso").disabled = false;
var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value;
var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text;
//Guardamos el ID del estudiante seleccionado en un campo oculto del formulario
document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado;
//Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante"
//y agregar los nombres de los cursos en los cuales esta matriculado
document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado;
//Recuperar el nombre de los cursos matriculados por el estudiante seleccionado
var xhttp1 = new XMLHttpRequest();
xhttp1.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
//console.log(this.responseText);
var objNombreCursos = JSON.parse(this.responseText);
//Rellenamos la tabla con los nombres de los cursos
var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>";
for (var x in objNombreCursos) {
tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>";
}
document.getElementById("tablaCursos").innerHTML = tablaNombreCursos;
}
};
xhttp1.open("POST", "ajaxManager.php", true);
xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp1.send("nombreCursos=" + idEstudianteSeleccionado);
//Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos
//de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
// console.log(this.responseText);
var infoEstudiantes = JSON.parse(this.responseText);
document.getElementById("nombre").value = infoEstudiantes[0].nombre;
document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido;
document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido;
document.getElementById("email").value = infoEstudiantes[0].email;
document.getElementById("dni").value = infoEstudiantes[0].dni;
document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento;
//Habilitar la lista de los numeros de telefonos
document.getElementById("numerosTelefonos").disabled = false;
//Recorrer el objeto infoEstudiantes para
//rellenar la lista de los telefonos.
//Primero limpiar la lista de telefonos
var listadoDeTelefonos = document.getElementById("numerosTelefonos");
while (listadoDeTelefonos.hasChildNodes()) {
listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild);
}
//Segundo. Rellenar el desplegable con los numeros de telefonos y su id
listadoDeTelefonos.appendChild(document.createElement("option"));
for (var x in infoEstudiantes) {
var opcion = document.createElement("option");
var atributoValue = document.createAttribute("value");
atributoValue.value = infoEstudiantes[x].idTelefono;
opcion.setAttributeNode(atributoValue);
var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono);
opcion.appendChild(textNumeroTelefono);
listadoDeTelefonos.appendChild(opcion);
}
}
};
xhttp.open("POST", "ajaxManager.php", true);
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado);
}
});