Carga de datos con Select PHP & MySQL

Carga de datos con Select PHP & MySQL. La extracción de la información de la base de datos es muy simple. Basta, con realizar una conexión desde PHP con la base de datos MySQL y ya podemos obtener los resultados esperados.

Sin embargo, en este tutorial aprenderemos a extraer información usando una etiqueta HTML (SELECT), una selección dinámica de desplegable para cargar datos.

Carga de datos con Select PHP & MySQL

Preguntas y respuestas acerca del script PHP jQuery.

¿Qué recursos necesito?

Básicamente, necesitaremos algunos lenguajes y librerías existentes en el internet como ser:

• Lenguaje jQuery.
• Como base el lenguaje PHP.
• Una base de datos en MySQL.

¿Cómo funciona el script cargar datos?

Como ya hemos dicho, usaremos una etiqueta select (Lista desplegable) para elegir una opción y por ende mostrar más datos de esa elección.

Si el usuario elige una opción en el select que tendrá como eje el id="personal" y este identificador desencadenará el llamado Ajax dentro del fichero getData.js. Por lo tanto, este fichero procesara la solicitud de la etiqueta SELECT.

El fichero getPersonal.php devolverá la información a la solicitud del AJAX y este lo enviará a las etiquetas DIV de nuestro fichero INDEX.PHP.

<td><div class="col-sm-4" id="emp_nombre"></div></td>
<td><div class="col-sm-4" id="emp_edad"></div></td>
<td><div class="col-sm-4" id="emp_salario"></div></td>

ESTRUCTURA Y RECURSOS DE NUESTRO SISTEMA

A continuación, veremos varios pasos para implementar con éxito el tema que estamos tocando.

1) Base de datos: Tabla y sus registros.

Necesitamos una base de datos con su respectiva tabla. Por lo tanto, el archivo tendrá el nombre de «personal.sql«.

CREATE TABLE IF NOT EXISTS `personal` (
`id` int(11) NOT NULL COMMENT 'Llave Primaria',
  `nombre_personal` varchar(255) NOT NULL COMMENT 'Nombre de Personal',
  `salario_personal` double NOT NULL COMMENT 'Salario personal',
  `edad_personal` int(11) NOT NULL COMMENT 'Edad Empleado'
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='Tabla Personal';

ALTER TABLE `personal`
 ADD PRIMARY KEY (`id`);

ALTER TABLE `personal`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Llave Primaria',AUTO_INCREMENT=11;

La tabla creada necesita de registros para poder interactuar en este ejercicio. Por lo tanto, aquí les dejo la consulta para insertar registros a la tabla personal.

-- Volcado de datos para la tabla `personal`

INSERT INTO `personal` (`id`, `nombre_personal`, `salario_personal`, `edad_personal`) VALUES
(1, 'Carlos Butters', 8000, 32),
(2, 'Luis Castro', 12000, 43),
(3, 'Marcos Cuneo', 6000, 35),
(4, 'Kelly Valdivia', 5600, 22),
(5, 'Mario Bonneti', 7500, 33),
(6, 'William Soto', 3500, 25),
(7, 'Hector Carrillo', 6300, 28),
(8, 'Luisa Collasos', 4500, 31),
(9, 'Michael Yuri', 9200, 39),
(10, 'Sofia Frisa', 3800, 26);

2) Conexión con la base de datos MySQL

Primeramente, crearemos un fichero llamado «conexion.php«, que nos permita realizar la conexión con MySQL. Aqui les dejare el ejemplo.

<?php
/* La conexion con MySQLi */
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "php_personal";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Conexion fallida: " . mysqli_connect_error());
// Imprime si existe algun error
if (mysqli_connect_errno()) {
    printf("La conexion ha fallado: %s\n", mysqli_connect_error());
    exit();
}
?>

3) Uso de librerías externas

Usaremos Librerías externas como: Bootstrap, jQuery y JavaScript para darle dinamismo al ejemplo.

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/getData.js"></script>

4) Crear la lista desplegable (Select)

Para este apartado tenemos que generar una etiqueta tipo SELECT para mostrar una lista desplegable HTML.
El fichero que alberga al SELECT será el index.php.

Esta lista desplegable mostrara los nombres del personal que fueron extraídos mediante una consulta SQL.

<select id="personal">
<option value="" selected="selected">Seleccionar personal</option>
<?php
$sql = "SELECT id, nombre_personal, salario_personal, edad_personal FROM personal LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) { 
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo $rows["nombre_personal"]; ?></option>
<?php }	?>
</select>

5) Carga de datos desde opción elegida

El principal artífice será e fichero JavaScript con nombre «getData.js«, manejaremos el SELECT para obtener el ID del valor seleccionado y hacer que Ajax solicite al servidor «getPersonal.php» para obtener detalles del personal seleccionado.

La solicitud Ajax obtiene los datos del personal. Por lo tanto, la respuesta saldrá con el formato JSON desde el servidor. Veamos el ejemplo.

$(document).ready(function(){  
	// Código para obtener todos los registros de la tabla a través del cuadro de selección
	$("#personal").change(function() {    
		var id = $(this).find(":selected").val();
		var dataString = 'empid='+ id;    
		$.ajax({
			url: 'getPersonal.php',
			dataType: "json",
			data: dataString,  
			cache: false,
			success: function(employeeData) {
			   if(employeeData) {
					$("#heading").show();		  
					$("#no_records").hide();					
					$("#emp_nombre").text(employeeData.nombre_personal);
					$("#emp_edad").text(employeeData.edad_personal);
					$("#emp_salario").text(employeeData.salario_personal);
					$("#records").show();		 
				} else {
					$("#heading").hide();
					$("#records").hide();
					$("#no_records").show();
				}   	
			} 
		});
 	}) 
});

6) Obtener los datos desde PHP y MySQL

El fichero responsable de la consulta y la obtención de datos es el archivo «getPersonal. php«. Por consiguiente, vamos a obtener los detalles del personal seleccionado y devolver los datos como JSON utilizando «json_encode«. Veamos el ejemplo.

<?php
include_once("conexion.php");
if($_REQUEST['empid']) {
	$sql = "SELECT id, nombre_personal, salario_personal, edad_personal FROM personal WHERE id='".$_REQUEST['empid']."'";
	$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
	
	$data = array();
	while( $rows = mysqli_fetch_assoc($resultset) ) {
		$data = $rows;
	}
	echo json_encode($data);
} else {
	echo 0;	
}
?>

CONCLUSIÓN DEL EJEMPLO

• El uso de este ejemplo es muy recomendado en el desarrollo de sistemas. Porque, nos ayudan en mostrar la información de MySQL.
• Evita la carga de nuestro navegador para cada consulta al servidor de base de datos. Por lo tanto, ahorramos recursos del servidor web.
• Además, podemos adaptarlo para que los datos devueltos podamos recibirlo en un INPUT de formulario para luego procesarlo según nuestra necesidad.