2

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í:

introducir la descripción de la imagen aquí

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);
}
});
1
  • Solo como puntualización, y al margen de lo que es programación, "reward" significa recompensa, supongo que el botón debería ser "backward" en cualquier caso.
    – Muriano
    Commented el 17 ene. 2017 a las 7:29

2 respuestas 2

0

me gustaría tener dos botones: "reward" (<<) y "forward" (>>) que, al hacerle click me muestren a los estudiantes con sus datos. He estado consultando y lo más parecido a lo que quiero es lo que se llama paginación.

La paginación es una técnica para obtener, bajo demanda, resultados desde el backend para así mejorar el rendimiento. Tienes razón en pensar que ésta técnica se adapta a tus necesidades.

Hay una interrogante que debes resolver para realizar ésto.

¿Cuál es el orden en que debo ordenar los alumnos?

Tenemos algunas opciones:

  • Ordenar por código
  • Ordenar por apellidos

Personalmente encuentro ordenar por apellidos mucho más natural que por medio del código. Entonces, para saber el estudiante anterior o siguiente lo que tendríamos que hacer es una consulta SQL para obtenerlo.

Obtener el alumno anterior:

select  * from alumnos where concat(apepat, ' ', apemat) < ? LIMIT 1;

Obtener el alumno próximo:

select  * from alumnos where concat(apepat, ' ', apemat) > ? LIMIT 1;

Teniendo ésto solo basta obtener mediante AJAX al alumno y mostrarlo en el formulario.


Ejemplo

Para fines prácticos, envía el alumno encontrado como JSON (echo json_encode($result);

En el cliente obtenemos el apellido paterno y materno del formulario y lo enviamos para obtener el alumno anterior o siguiente:

/*
 * se sobreentiende que para el botón "siguiente"
 * se debe cambiar 'previous' to 'next'
 */
btnPrevious.addEventListener('click', function () {
  getStudentByOrder({
    orientation: 'previous',
    params: {
      apepat: apepatInput.value,
      apemat: apematInput.value
    },
    onDone (student) {
      // estudiante listo en JSON
      // llenar el formulario con su info
    }
  });
});

/**
 * Obtiene el estudiante anterior o próximo.
 * @param {orientation} Orientación para encontrar (previous, next)
 * @param {params} Objeto que contiene "apepat" y "apemat" (apellido paterno y materno respectivamente)
 * @param {onDone} callback al que se le pasará el alumno como objeto
 */
function getStudentByOrder({ onDone, orientation, params }) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', `ajaxManager.php?apepat=${params.apepat}&apemat=${params.apemat}&orientation=${orientation}`);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        onDone(JSON.parse(xhr.responseText));
      }
    }
  };
  xhr.send();
}

El server será algo así:

$orientation = $_GET["orientation"];
$query = "";

if ($orientation === "previous") {
  $query .= "SELECT * FROM students WHERE CONCAT(apepat, ' ', apemat) < CONCAT(?, '', ?) LIMIT 1;";
} else {
  $query .= "SELECT * FROM students WHERE CONCAT(apepat, ' ', apemat) < CONCAT(?, '', ?) LIMIT 1;";
}

$stmt= $conn->prepare($query);
$stmt->bind_param("ss", $apepat, $apemat);

$apepat = $_GET["apepat"];
$apemat = $_GET["apemat"];

$stmt->execute();
$stmt->bind_result($id, $ap, $am, $name);
$json = array();

if ($stmt->fetch()) {
  $json = array("id" => $id, "apepat" => $ap, "apemat" => $am, "name" => $name);
}

$stmt->close();

echo json_encode($json);
1
  • Muchísimas gracias voy a probarlo y te comento ;) Commented el 16 ene. 2017 a las 19:26
0

Lo que podías hacer es hacerlo dinámico, esto quiere decir hacer una plantilla genérica y pasarle por parametro el id por metodo GET, es decir http://localhost/tuProyecto/pagina.php?id=2, lees el id y haces la consulta con ese id. Al momento de dar "<<" o ">>" solo redireccionas para cambiar el id por metodo GET. También podrías hacerlo por AJAX para evitar recargar toda la página y solo el div donde tienes los datos

Si no me explique bien o te quedo duda lo comentas

1
  • Muchas gracias por responderme!!...estoy consultando a ver como se haría con ajax para que sea lo más eficiente posible y por el método GET. Si no encuentro un ejemplo te pediré a ver si conoces alguno. Un saludo! Commented el 16 ene. 2017 a las 18:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.