Realizar Query MySQL desde formulario y mostrar resultado

erikmx · #1 (**permalink**) 10/09/2015, 14:11

Hola a todos, mi nombre es Erik y estoy empezando a programar en PHP y MySQL, para mi es algo muy nuevo y estoy agarrandole la forma.

Programo de toda la vida en delphi aplicaciones de escritorio, pero por cuestiones laborales requiero poder implementar algunas consultas en PHP y MySQL para poder acceder desde los exploradores de internet.

Ya tengo mi diseño base:

- Me conecto a mi base de datos
- Hago una consulta MySQL desde el inicio de la carga de la pagina, y muestro el resultado en una grid o rejilla, implementando Bootstrap por supuesto
- Se paginan los datos
- Utilizo el buscador que incluye bootstrap y funciona (El codigo me base en un CRUD que busque en internet y lo adapte extrayendo solo la parte que utilizo)

El detalle es que utilizando JQuery Agrege un Panel Accordion para cargar 3 cajas de texto (Nombre, ApellidoPaterno, ApellidoMaterno), no se como crear la consulta sin recargar la pagina (para eso supongo debo de hacerlo en jQuery) para que lea los valores de las 3 cajas de texto y al presionar el boton de buscar extraiga los valores y los inserte en la query que utilizo, se que puede ser algo muy sencillo pero no logro hacerlo, e leido varios ejemplos buscado informacion pero no lo consigo o todos los ejemplos que encuentro son del 2012 o 2013 donde la conexion ya no es compatible porque utilizan mysql y no mysqli o PDO

Les expongo mi codigo para ver si me pueden hechar una mano saludos:

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SISTEMA DE CONSULTA</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
 
 
 
</head>
 
<body>
 
    <div class="container">
      
      <div class="panel panel-primary">
       <div class="panel-heading">SISTEMA DE CONSULTA</div>
        <div class="panel-body">
 
 
<?php
include "config.php";
?>
 
 
<div class="panel panel-default">
  <div class="panel-body">
 
<div id="accordion">
  <h3>Busqueda Completa</h3>
  <div>
 
<form role="form">
  <div class="form-group">    
    <input type="text" class="form-control input-sm" id="xNombre" placeholder="Nombre">
  </div>
  <div class="form-group">
    <input type="text" class="form-control input-sm" id="xApelloPaterno" placeholder="Apellido Paterno">
  </div>  
  <div class="form-group">
    <input type="text" class="form-control input-sm" id="xApelloMaterno" placeholder="Apellido Materno">
  </div>    
  <button type="submit" class="btn btn-primary btn-lg btn-block">Buscar</button>
</form>
 
</div>
</div>
</div>
</div>
<script>
$( "#accordion" ).accordion({
  active: false,
  collapsible: true,
  autoHeight: false,  
  heightStyle: "content",
});
</script>
 
 
<table id="ghatable" class="display table table-responsive table-bordered table-hover table-condensed table-striped" cellspacing="0" width="100%">
<thead>
     <tr>
          <th class="active">ID</th>
          <th class="active">NOMBRE</th>
          <th class="active">APELLIDO PATERNO</th>
          <th class="active">APELLIDO MATERNO</th>
          <th class="active">OPCIONES</th>
     </tr>
</thead>
<tbody>
 
<?php
$mysqli->query("SET NAMES 'utf8'");
$res = $mysqli->query("SELECT ID, NOMBRE, APELLIDOPATERNO, APELLIDOMATERNO,SEXO FROM maindb LIMIT 1000");
while ($row = $res->fetch_assoc()):
?>
     <tr>
          <td><?php echo $row['ID'] ?></td>
          <td><?php echo $row['NOMBRE'] ?></td>
          <td><?php echo $row['APELLIDOPATERNO'] ?></td>
          <td><?php echo $row['APELLIDOMATERNO'] ?></td>          
          <td>
          <center><a target="_blank" href="#"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MOSTRAR</a></center>         
          </td>
     </tr>
<?php
endwhile;
?>
 
</tbody>
</table>      
 
        </div>
      </div>
      
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#ghatable').dataTable();
  });
    </script>
  </body>
</html>

Mi archivo config.php de conexion es el siguiente:

Código PHP:

Ver original<?php
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: " . $mysqli->connect_error;
}
?>

Drako_18 · #2 (**permalink**) 11/09/2015, 14:55

Buenas compañero,

Pues según entiendo... Quieres volver a realizar la consulta en PHP desde javascript... Para esto, tienes que usar AJAX desde PHP.

Hace unos años lo hacía de otra forma, pero ahora buscando sólo encuentro así:
http://stackoverflow.com/questions/1...ing-javascript

Un saludo!!!

erikmx · #3 (**permalink**) 11/09/2015, 17:50

Drako muchas gracias por responder, pues ya lei lo que me comentaste pero aun no logo ver la forma de como ejecutar algun procedimiento o funcion para poder remplazar en mi codigo a la hora de hacer la consulta, basicamente en este paso:

Código PHP:

Ver original<?php
$mysqli->query("SET NAMES 'utf8'");
$res = $mysqli->query("SELECT ID, NOMBRE, APELLIDOPATERNO, APELLIDOMATERNO,SEXO FROM maindb LIMIT 1000");
while ($row = $res->fetch_assoc()):
?>

En donde pueda insertar lo siguiente:

Código PHP:

Ver original<?php
$mysqli->query("SET NAMES 'utf8'");
$res = $mysqli->query("SELECT ID, NOMBRE, APELLIDOPATERNO, APELLIDOMATERNO,SEXO WHERE NOMBRE = xNombre AND APELLIDOPATERNO = xApellidoPaterno AND APELLIDOMATERNO = xApellidoMaterno FROM maindb LIMIT 1000");
while ($row = $res->fetch_assoc()):
?>

donde xNombre, xApellidoPaterno y xApellidoMaterno sean los valores que hay en la caja de texto correspondiente

Drako_18 · #4 (**permalink**) 12/09/2015, 04:38

Buenas,

Pues si has revisado la solución que le dan a esa persona, hay una línea de texto que dice "and your_functions_address.php like this:"
Y usan una variable con el nombre "functionname" a la que le hacen unas validaciones y después en el CASE, hay un apartado que dice "add" que es la función que está llamando el ejemplo, ahí se ejecutaría tu código..

<?php
header('Content-Type: application/json');

$aResult = array();

if( !isset($_POST['functionname']) ) { $aResult['error'] = 'No function name!'; }

if( !isset($_POST['arguments']) ) { $aResult['error'] = 'No function arguments!'; }

if( !isset($aResult['error']) ) {

switch($_POST['functionname']) {
case 'add':
if( !is_array($_POST['arguments']) || (count($_POST['arguments']) < 2) ) {
$aResult['error'] = 'Error in arguments!';
}
else {
/*AQUÍ LO QUE QUIERAS HACER EN LA FUNCIÓN...*/
$aResult['result'] = add(floatval($_POST['arguments'][0]), floatval($_POST['arguments'][1]));
}
break;

default:
$aResult['error'] = 'Not found function '.$_POST['functionname'].'!';
break;
}

}

echo json_encode($aResult);

?>

Revisa el ejemplo, investiga un poco... Y si tienes más dudas... Mira este otro ejemplo http://stackoverflow.com/questions/2...avascript-ajax
O busca en san google, que es lo mismo que estoy haciendo ahora "jquery ajax call php function".

Un saludo!

erikmx · #5 (**permalink**) 12/09/2015, 09:55

Muchas gracias Drako nuevamente por tu respuesta, si lo volvere a checar y si he buscado bastante en google, el detalle es que como en Delphi me es muy sencillo resolver este tipo de situaciones el lenguaje PHP, JQuery Ajax pues aunque si le entiendo un poco el detalle de como implementarlo me causa mucho problema y entre tanto codigo es muy facil perderme, seguire intentandolo muchas gracias y saludos

erikmx · #6 (**permalink**) 24/09/2015, 20:18

Pues he estado buscando algun ejemplo lo mas basico posible para entender el funcionamiento ya pude ajustar un ejemplo para que me haga la busqueda mediante lo que se escriba en una caja de texto (antes de pasar a poner las otras dos cajas mas)

El detalle es que solo me funciona si realizo mi busqueda en el evento onkeyup de mi caja de texto, pero necesito que lo ejecute por medio de un boton, ya que en la version final la busqueda la realizara en cientos de miles de registros, y si lo dejo asi la busqueda sera eterna porque va filtrando conforme voy escribiendo.

El codigo de mi index.php quedo asi:

Código PHP:

Ver original<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Busqueda Ajax</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
  
<script>
var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 
function showData(str) {
  if (str=="") {
    document.getElementById("dbgridresultados").innerHTML="";
    return;
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("dbgridresultados").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","consulta.php?q="+str,true);
  xmlhttp.send();
}
</script>
 
 
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Inicio</a>
  </div>
 
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Buscar Nombre" id="buscarnombre" name="users" onkeyup="showData(this.value)" >
      </div>
      <button type="submit" class="btn btn-default">Buscar</button>
    </form>  
  </div>
</nav>
 
 
</head>
 
 
<body>
    <div class="container">
      <div id="dbgridresultados"><b>El resultado de la busqueda aparecera aqui</b></div>
    </div>
</body>   
</html>

Y el de mi archivo externo consulta.php que genera toda la consulta y me devuelve el resultado quedo de la siguiente manera

Código PHP:

Ver original<?php
$q = strval($_GET['q']);
 
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
    echo "Fallo al conectarse a MySQLL: " . $mysqli->connect_error;
}
 
$sql="SELECT * FROM personas WHERE nombre like '".$q."'";
$result = $mysqli->query($sql);
 
echo "<table class='table table-bordered table-striped'>
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>PATERNO</th>
<th>MATERNO</th>
<th>EDAD</th>
<th>DIRECCION</th>
<th>TELEFONO</th>
</tr>";
 
while($row = $result->fetch_assoc()) {
  echo "<tr>";
  echo "<td>" . $row['Id'] . "</td>";
  echo "<td>" . $row['Nombre'] . "</td>";
  echo "<td>" . $row['ApellidoPaterno'] . "</td>";
  echo "<td>" . $row['ApellidoMaterno'] . "</td>";  
  echo "<td>" . $row['Edad'] . "</td>";
  echo "<td>" . $row['Direccion'] . "</td>";
  echo "<td>" . $row['Telefono'] . "</td>";
  echo "</tr>";
}
echo "</table>";
 
//$mysqli->close();
?>

Como mencione ya funciona tomando el valor de la caja de texto, pero quiero que la busqueda se haga guando oprima el boton se que tiene que ir en el evento onclick, pero si lo pongo en el boton siempre me devuelve la tabla en blanco.

Agradecere sus opiniones y consejos