Crear las Operaciones Básicas CRUD en PHP y MySQL

Crear las Operaciones Básicas CRUD en PHP y MySQL

En este tutorial se le enseñará A Crear las Operaciones Básicas CRUD en PHP y MySQL con Boostrap en una ventana emergente que son crear, leer, editar y eliminar. Nota: Bootstrap y Javascripts utilizados en este tutorial están alojados en la web, por lo que necesita una conexión a Internet para que funcionen.

Creando nuestra base de datos
Abra phpMyAdmin.
Haga clic en bases de datos, cree una base de datos y asígnele el nombre «sample».
Después de crear una base de datos, haga clic en SQL y pegue el siguiente código.
Consulte la imagen a continuación para obtener instrucciones detalladas.

CREATE TABLE `user` (
  `userid` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

myphpadmin

Creando nuestra conexión
A continuación, creamos nuestra conexión a nuestra base de datos. Esto servirá como puente entre nuestros formularios y la base de datos. A esto lo llamamos «conn.php».

<?php
$conn = mysqli_connect("localhost","root","tucontreseña","sample");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

Creando el index.php
El siguiente paso es crear nuestra tabla de muestra. Esta será nuestra lectura.

<!DOCTYPE html>
<html>
<head>
    <title>Operación CRUD en PHP y MySQL</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div style="height:50px;"></div>
    <div class="well" style="margin:auto; padding:auto; width:80%;">
    <span style="font-size:25px; color:blue"><center><strong>Operación CRUD en PHP y MySQL</strong></center></span>	
        <span class="pull-left"><a href="#addnew" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Agregar Registro</a></span>
        <div style="height:50px;"></div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Direccion</th>
                <th>Accion</th>
            </thead>
            <tbody>
            <?php
                include('conn.php');
                
                $query=mysqli_query($conn,"select * from `user`");
                while($row=mysqli_fetch_array($query)){
                    ?>
                    <tr>
                        <td><?php echo ucwords($row['firstname']); ?></td>
                        <td><?php echo ucwords($row['lastname']); ?></td>
                        <td><?php echo $row['address']; ?></td>
                        <td>
                            <a href="#edit<?php echo $row['userid']; ?>" data-toggle="modal" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Editar</a> || 
                            <a href="#del<?php echo $row['userid']; ?>" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                            <?php include('button.php'); ?>
                        </td>
                    </tr>
                    <?php
                }
            
            ?>
            </tbody>
        </table>
    </div>
    <?php include('add_modal.php'); ?>
</div>
</body>
</html>

Creando la ventana emergente llamada add_modal.php
Este es nuestro formulario para agregar una nueva fila a nuestra base de datos.

<div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <center><h4 class="modal-title" id="myModalLabel">Agregar Nuevo Registro</h4></center>
            </div>
            <div class="modal-body">
            <div class="container-fluid">
            <form method="POST" action="addnew.php">
                <div class="row">
                    <div class="col-lg-2">
                        <label class="control-label" style="position:relative; top:7px;">Nombres:</label>
                    </div>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="firstname">
                    </div>
                </div>
                <div style="height:10px;"></div>
                <div class="row">
                    <div class="col-lg-2">
                        <label class="control-label" style="position:relative; top:7px;">Apellidos:</label>
                    </div>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="lastname">
                    </div>
                </div>
                <div style="height:10px;"></div>
                <div class="row">
                    <div class="col-lg-2">
                        <label class="control-label" style="position:relative; top:7px;">Direccion:</label>
                    </div>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="address">
                    </div>
                </div>
            </div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Guardar</a>
            </form>
            </div>
            
        </div>
    </div>
</div>

Creando el Agregar Registros llamado addnew.php
Este es nuestro código para agregar los datos en nuestro formulario de agregar a nuestra base de datos.

<?php
    include('conn.php');
    
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];
    $address=$_POST['address'];
    
    mysqli_query($conn,"insert into user (firstname, lastname, address) values ('$firstname', '$lastname', '$address')");
    header('location:index.php');

?>

Creando el botón llamado button.php
Este contiene nuestro Editar y Eliminar.

<!-- eliminar -->
    <div class="modal fade" id="del<?php echo $row['userid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <center><h4 class="modal-title" id="myModalLabel">Eliminar</h4></center>
                </div>
                <div class="modal-body">
                <?php
                    $del=mysqli_query($conn,"select * from user where userid='".$row['userid']."'");
                    $drow=mysqli_fetch_array($del);
                ?>
                <div class="container-fluid">
                    <h5><center>Estas seguro <strong><?php echo ucwords($drow['firstname'].' '.$row['lastname']); ?></strong> de eliminar el registro.</center></h5> 
                </div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                    <a href="delete.php?id=<?php echo $row['userid']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                </div>
                
            </div>
        </div>
    </div>
<!-- /.modal -->

<!-- Editar -->
    <div class="modal fade" id="edit<?php echo $row['userid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <center><h4 class="modal-title" id="myModalLabel">Editar</h4></center>
                </div>
                <div class="modal-body">
                <?php
                    $edit=mysqli_query($conn,"select * from user where userid='".$row['userid']."'");
                    $erow=mysqli_fetch_array($edit);
                ?>
                <div class="container-fluid">
                <form method="POST" action="edit.php?id=<?php echo $erow['userid']; ?>">
                    <div class="row">
                        <div class="col-lg-2">
                            <label style="position:relative; top:7px;">Nombres:</label>
                        </div>
                        <div class="col-lg-10">
                            <input type="text" name="firstname" class="form-control" value="<?php echo $erow['firstname']; ?>">
                        </div>
                    </div>
                    <div style="height:10px;"></div>
                    <div class="row">
                        <div class="col-lg-2">
                            <label style="position:relative; top:7px;">Apellidos:</label>
                        </div>
                        <div class="col-lg-10">
                            <input type="text" name="lastname" class="form-control" value="<?php echo $erow['lastname']; ?>">
                        </div>
                    </div>
                    <div style="height:10px;"></div>
                    <div class="row">
                        <div class="col-lg-2">
                            <label style="position:relative; top:7px;">Direccion:</label>
                        </div>
                        <div class="col-lg-10">
                            <input type="text" name="address" class="form-control" value="<?php echo $erow['address']; ?>">
                        </div>
                    </div>
                </div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                    <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Guardar</button>
                </div>
                </form>
            </div>
        </div>
    </div>
<!-- /.modal -->

Creando el Editar llamado edit.php
El código de nuestro formulario de actualizar registros.

<?php
    include('conn.php');
    
    $id=$_GET['id'];
    
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];
    $address=$_POST['address'];
    
    mysqli_query($conn,"update user set firstname='$firstname', lastname='$lastname', address='$address' where userid='$id'");
    header('location:index.php');

?>

Creando el Eliminar llamado delete.php
Por último, este es nuestro código de eliminación para eliminar la fila de nuestra tabla.

<?php
    include('conn.php');
    $id=$_GET['id'];
    mysqli_query($conn,"delete from user where userid='$id'");
    header('location:index.php');

?>

Listo, acabamos de Crear las Operaciones Básicas CRUD en PHP y MySQL. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:

SUSCRIBETE AL CANAL DE YOUTUBE AQUI !

Crear las Operaciones Básicas CRUD en PHP y MySQL – Descargar el Tutorial en el siguiente enlace:

DESCARGAR AQUÍ

Deja una respuesta

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