JQuery biblioteca de JavaScriptLenguaje PHP

Guardar registros con Modal BootStrap y PHP MySQL

Guardar registros con Modal BootStrap y PHP MySQL. Guardar y/o insertar registros a una base de datos usando PHP quizá ya conocemos a la perfección. Por lo tanto, en esta publicación lo que haremos es insertar datos a MySQL de otra forma más dinámica.

Ahora, lo que haremos es insertar utilizando librerías jQuery y AJAX para ahorrar transferencia de datos de nuestro servidor y también el ahorro de tiempo de carga de nuestro proyecto web y/o página web.

Validando e insertando datos sin que el usuario este esperando que cargue la página web.

Guardar registros con Modal BootStrap y PHP MySQL

Hace años atrás era muy común el uso de Popup generados con JavaScript. Hoy en día,  están desapareciendo del mercado por el más uso que se le dio, «La Publicidad». Es por tal motivo, que muchos navegadores no dejan cargar los popup.

Sin embargo, en un sistema web urge el uso de ventanas por ejemplo validar usuario, editar, insertar y/o borrar registros. Por lo tanto, en este caso lo reemplazaremos con ventanas modales de BootStrap y Ajax.

Recursos que usaremos

Estructura de este ejemplo

En esta sección mostraremos los principales componentes de estos ejemplos.

  1. Base de datos

CREATE TABLE `personal` (
  `id` int(11) NOT NULL,
  `nombres` varchar(90) NOT NULL,
  `direccion` text NOT NULL,
  `genero` varchar(20) NOT NULL,
  `designado` varchar(100) NOT NULL,
  `edad` int(11) NOT NULL,
  `image` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

--
-- Volcado de datos para la tabla `personal`
--

INSERT INTO `personal` (`id`, `nombres`, `direccion`, `genero`, `designado`, `edad`, `image`) VALUES
(191, 'Gonzales Cotrina, Maria Luisa', 'Av. Los Poetas 657 - Quito - Ecuador', 'Mujer', 'Recepcion', 23, ''),
(190, 'Figueroa Carmona, Fernando Jose', 'Av. Litoral 456 int. 45 - Santiago', 'Hombre', 'Sistemas', 35, ''),
(189, 'Molina Cotrado, Julio Cesar', 'Calle el Miraflorino 345', 'Hombre', 'Administracion', 32, '');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `personal`
--
ALTER TABLE `personal`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `personal`
--
ALTER TABLE `personal`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=192;

2. Fichero index.php

<?php  
//index.php
$connect = mysqli_connect("localhost", "root", "", "php_modallogin");
$query = "SELECT * FROM personal ORDER BY id DESC";
$result = mysqli_query($connect, $query);
 ?>

Botón para mostrar el modal de inserción de datos a MySQL

     <button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-primary">Agregar Personal</button>

Mostramos registros que existen en la tabla de la base de datos de nuestro ejemplo.

<table class="table table-bordered">
      <tr>
       <th width="30%">Personal Nombres</th>  
       <th width="10%">Genero</th>  
       <th width="10%">Edad</th>  
       <th width="30%">Area</th>  
       <th width="10%">Vista</th>
      </tr>
      <?php
      while($row = mysqli_fetch_array($result))
      {
      ?>
      <tr>
       <td><?php echo $row["nombres"]; ?></td>
       <td><?php echo $row["genero"]; ?></td>
       <td><?php echo $row["edad"]; ?></td>
       <td><?php echo $row["designado"]; ?></td>
       <td><input type="button" name="view" value="Vista Previa" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
      </tr>
<?php }?>
</table>

3. Archivo insertar.php

 $query = " INSERT INTO personal (nombres, direccion, genero, designado, edad)  
     VALUES('$nombres', '$direccion', '$genero', '$designado', '$edad')";
   mysqli_query($connect, $query);

4. Fichero VistaPrevia.php

 while($row = mysqli_fetch_array($result))
    {
     $output .= '
     <tr>  
            <td width="30%"><label>Personal</label></td>  
            <td width="70%">'.$row["nombres"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Direccion</label></td>  
            <td width="70%">'.$row["direccion"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Genero</label></td>  
            <td width="70%">'.$row["genero"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Designado</label></td>  
            <td width="70%">'.$row["designado"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Edad</label></td>  
            <td width="70%">'.$row["edad"].'</td>  
        </tr>
     ';
    }
Guardar registros con Modal BootStrap y PHP MySQL
Guardar registros con Modal BootStrap y PHP MySQL

CONCLUSIÓN

Hoy e día el desarrollo de sistemas web y páginas web va creciendo muy rápido por la gran cantidad de recursos que podemos encontrar en internet y esos recursos van dando un nuevo contexto en el tema de creación de sistemas web.

Entre otros, en el mercado van apareciendo nuevos recursos que son muy usados para desarrollar sistemas de una manera muy interactiva.

Las ventanas modales que en este artículo estamos mostrando como ejemplo son unos de los más usados para mostrar información de una base de datos, insertar y/o visualizar.

Espero que esta breve explicación les ayude a implementar este método que es muy usado dando una interfaz de profesionalismo que en la actualidad se requiere.

DESCARGA

Descargar Código Fuente

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

2 comentarios

  1. No me deja guardar registros… todas las conexiones están bien, puedo visualizar los registros que se cargaron al iniciar la bd. Que puedo hacer?.
    Agradecieria mucho tu ayuda

    1. Saludos Jovanny,

      Verifica bien los ficheros, index.php, insertar.php, VistaPrevia.php, en estos tres ficheros tenemos que realizar la conexión con el servidor.

      $connect = mysqli_connect("localhost", "root", "", "php_modallogin");
      

      Intenta corregir esos detalles y nos comentas.

      Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba