Buscar en tiempo real con React JS (0.13.3), PHP, MySQL y Bootstrap

Tutoriales 🗓️ 15-05-2015 | 🔄 09-10-2022 | 👤 Crear un Post, Eventos Devs, Foro

bootstrap buscador buscar javascript js mysql php reactjs

Buscar en tiempo real con React JS (0.13.3), PHP, MySQL y Bootstrap

3 minuto(s)

Tabla de Contenidos

Demo Github

El potencial de React JS es que puedes crear los módulos que requieras, pero también es muy rápido para las consultas a la base de datos, no por algo es usado por Facebook.

Para los que no saben React JS es el framework javascript, usado en la Red Social mas famosa del mundo “Facebook”.

Recalcar que React JS no tiene ni esta hecho para MVC, pero puede interactuar con Angular JS y Backbone JS, para hacerlo MVC.

React JS usa la arquitectura FLUX:

En este oportunidad les enseñare a como buscar un ítem en tiempo real con React JS, la información la jalo de mi Base de datos MySQL con PHP. (El buscador de FanPages, Amigos, Grupos, etc. de Facebook Usa esta tecnología para hacer las búsquedas.)

index.php

Nota: Dejare comentarios dentro de los componentes, para explicar que hace cada javascript.


     var SearchBox = React.createClass({
          doSearch:function(){
              var query=this.refs.searchInput.getDOMNode().value; // Este es el buscador de Textos
              this.props.doSearch(query);
          },
          render:function(){
            // Mostramos el input text para Buscar los items
              return(
                <div className="row">
                  <div className="col-md-12">
                    <input type="text" className="form-control" ref="searchInput" placeholder="Ingrese el Nombre del Postre que desea Buscar" value={this.props.query} onChange={this.doSearch}/>
                  </div>
                </div>
                );
          }
      });

      var DisplayTable = React.createClass({
          render:function(){
              //Hacemos que las filas se muestren en la tabla
              var rows=[];
              this.props.data.forEach(function(postre) {
              rows.push(<tr><td className="text-center">{postre.id}</td><td className="text-center">{postre.nombre}</td><td className="text-center">S/. {postre.precio}</td><td className="text-center">{postre.stock}</td></tr>)
              });
              //Devolvemos la Tabla HTML
              return(
                  <div className="row">
                    <div className="col-md-12" >
                      <table className="table table-hover table-bordered">
                        <thead>
                          <tr>
                            <th className="text-center">ID</th>
                            <th className="text-center">Nombre</th>
                            <th className="text-center">Precio</th>
                            <th className="text-center">Stock</th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                      </table>
                    </div>
                  </div>               
              );
          }
      });

      var InstantBox = React.createClass({
          doSearch:function(queryText){
              console.log(queryText)
              //Obtenemos los resultados
              var queryResult=[];
              this.props.data.forEach(function(postre){
                  if(postre.nombre.toLowerCase().indexOf(queryText)!=-1)
                  queryResult.push(postre);
              });
       
              this.setState({
                  query:queryText,
                  filteredData: queryResult
              })
          },
          getInitialState:function(){
              return{
                  query:'',
                  filteredData: this.props.data
              }
          },
          render:function(){
              return (
                // Renderizamos la tabla HTML, las filas y el frontend de React JS
                <div className="container">
                  <div className="InstantBox">
                      <h1>Buscar en tiempo real con ReactJS, PHP, MySQL y Boostrap.</h1>
                      <SearchBox query={this.state.query} doSearch={this.doSearch}/>
                      <br/>
                      <DisplayTable data={this.state.filteredData}/>

                      <div className="container text-center">
                        Desarrollado por <a href="https://www.collectivecloudperu.com" target="_blank">Collective Cloud Peru</a>
                      </div>
                  </div>
                </div>
              );
          }
      });

      <?php

      include("data.php");
        
      ?>

      // A traves de React JS le indicamos que renderize todo el contenido en las etiquetas HTML <body></body>
      React.render(<InstantBox data={datosTabla}/>,document.body)

var SearchBox = React.createClass({

doSearch:function(){

var query=this.refs.searchInput.getDOMNode().value; // Este es el buscador de Textos

this.props.doSearch(query);

render:function(){

// Mostramos el input text para Buscar los items

return(

</div>

);

}

});

var DisplayTable = React.createClass({

render:function(){

//Hacemos que las filas se muestren en la tabla

var rows=[];

this.props.data.forEach(function(postre) {

rows.push(<tr><td className="text-center">{postre.id}</td><td className="text-center">{postre.nombre}</td><td className="text-center">S/. {postre.precio}</td><td className="text-center">{postre.stock}</td></tr>)

});

//Devolvemos la Tabla HTML

return(

<thead>

<tr>

<th className="text-center">Nombre</th>

<th className="text-center">Precio</th>

<th className="text-center">Stock</th>

</tr>

</thead>

</table>

</div>

);

}

});

var InstantBox = React.createClass({

doSearch:function(queryText){

console.log(queryText)

//Obtenemos los resultados

var queryResult=[];

this.props.data.forEach(function(postre){

if(postre.nombre.toLowerCase().indexOf(queryText)!=-1)

queryResult.push(postre);

});

this.setState({

query:queryText,

filteredData: queryResult

})

getInitialState:function(){

return{

query:'',

filteredData: this.props.data

}

render:function(){

return (

// Renderizamos la tabla HTML, las filas y el frontend de React JS

<h1>Buscar en tiempo real con ReactJS, PHP, MySQL y Boostrap.</h1>

<br/>

Desarrollado por <a href="https://www.collectivecloudperu.com" target="_blank">Collective Cloud Peru</a>

</div>

);

}

});

<?php

include("data.php");

// A traves de React JS le indicamos que renderize todo el contenido en las etiquetas HTML <body></body>

React.render(<InstantBox data={datosTabla}/>,document.body)

data.php

Ahora en nuestro archivo data.php conectamos a la Base de Datos MySQL e imprimimos los registros:


  // Conectamos a la Base de Datos MySQL con PHP e imprimimos los items, cerramos la Conexion por seguridad.
        $mysqli = new mysqli('localhost','user','password','BD');
        $mysqli->query("SET NAMES 'utf8'");

        if ($mysqli->connect_error) {
            die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
        }
            $results = $mysqli->query("SELECT id, nombre, precio, stock FROM postres");
                      
            echo "var datosTabla=[";
            while($row = $results->fetch_object()) {
            echo "{";
            echo "id:'".$row->id."',";
            echo "nombre:'". $row->nombre."',";
            echo "precio:'". $row->precio."',";
            echo "stock:'". $row->stock."'},";           
            }
            echo "];";
             $mysqli->close();

// Conectamos a la Base de Datos MySQL con PHP e imprimimos los items, cerramos la Conexion por seguridad.

$mysqli = new mysqli('localhost','user','password','BD');

$mysqli->query("SET NAMES 'utf8'");

if ($mysqli->connect_error) {

die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);

}

$results = $mysqli->query("SELECT id, nombre, precio, stock FROM postres");

echo "var datosTabla=[";

while($row = $results->fetch_object()) {

echo "{";

echo "id:'".$row->id."',";

echo "nombre:'". $row->nombre."',";

echo "precio:'". $row->precio."',";

echo "stock:'". $row->stock."'},";

}

echo "];";

$mysqli->close();

Listo, eso es todo.

Si desean le agregan una columna mas y la llaman acciones y allí colocan los botones editar, eliminar y también en la parte superior colocan un botón agregar nuevo item y que les habrá un popup Bootstrap y tendrán un CRUD.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Subscribirse

16 Comments

antiguos

nuevos más votado

Inline Feedbacks

View all comments

Fernando

8 años atrás

En el demo si la busqueda empieza con mayuscula no muestra resultados

Responder

Collective Cloud Peru

Reply to Fernando

8 años atrás

Asi es Fernando, pero solo es una búsqueda básica y muy útil. Puedes investigar y lograr otras cosas de tu parte. Gracias por tu observación.

Responder

Steve Lion

8 años atrás

Descargué el ejemplo de GitHub. pero no muestra nada, algo que deba saber ??

Responder

Collective Cloud Peru

Reply to Steve Lion

7 años atrás

Hola Steve. Gracias por visitar mi blog. Revisa los datos de la conexión a tu base de datos:

$mysqli = new mysqli(‘localhost’,’user’,’password’,’BD’);

if ($mysqli->connect_error) {
die(‘Error : (‘. $mysqli->connect_errno .’) ‘. $mysqli->connect_error);
}

$results = $mysqli->query(“SELECT id, nombre, precio, stock FROM postres”);

Cuando los datos no están escritos correctamente, te muestra en blanco toda la pagina.

Responder

Dani MB

Reply to Collective Cloud Peru

5 años atrás

Buenas, a mi me pasa igual. Revise todo los datos y sigue saliendo la pagina en blanco. Podrías ayudarme..

Responder

Dani MB

Reply to Dani MB

5 años atrás

resolvi el problema una errata en el codigo al editar un titulo. Pero sigue habiendo un problema, en un iPhone no se ve, que habría que hacer

Responder

Dani MB

Reply to Dani MB

5 años atrás

al final era lo de las mayusculas, en movil es un problema porque siempre te la pone automáticamente.

Responder

Collective Cloud Peru

Reply to Dani MB

5 años atrás

Muy bien que te haya funcionado 🙂

Responder

Pablo Araujo

7 años atrás

Muy bueno…….es justo lo que estaba buscando o hacerlo con JSON.
Pregunta que es mejor usar mongoDB con nodeJS o seguir usando SQL?

Responder

Collective Cloud Peru

Reply to Pablo Araujo

7 años atrás

Node JS es mas eficiente con Mongo DB, pero si tu aplicacion no requiere ser persistente, puedes usar MySQL.

Responder

Carlos Samo

7 años atrás

hola me sirvió mucho tu código pero necesito rescatar el id de un articulo x y pasarlo a otro formulario y me busque los registros de esa id y me los cargue en otro, normalmente lo hago así:
echo “Editar
pero aquí con reactJS no me resulta
Editar
me puedes ayudar.

Responder

Collective Cloud Peru

Reply to Carlos Samo

7 años atrás

especifica mejor tu consulta, no entiendo si quieres editar un registro o buscar.

Responder

Dani MB

5 años atrás

Buenas de nuevo, se podria incrementar un sistema de filtros para que segun selecciones las diferentes posibilidades así se muestren los resultados

Responder

Collective Cloud Peru

Reply to Dani MB

5 años atrás

Si le puedes crear un SELECT para cada filtro y al hacer click que invoque a ese SELEC personalizado (filtro).

Responder

Nes

1 año atrás

Hola!
Sabes, baje tu ejemplo, son dos archivos, hice la base de datos y no me funciona. me muestra todo blanco, que es lo que me esta faltando? (la consulta sql funciona bien, y los datos de conexión son correctos) gracias!

Responder

Nube Colectiva

Moderador

Reply to Nes

1 año atrás

Hola verifica tu consola de Chrome DevTools y dime que error te devuelve. Asimismo se esta usando React JS 0.13.3 en este tutorial y en nuevas versiones puede que hayan cambiado algunos métodos de React JS.

Responder