VaidrollTeam: CRUD BÁSICO DE USUARIOS EN PHP, MYSQL, HTML Y CSS

¿Cómo hacer un CRUD básico en PHP MYSQL? Pues aquí tienes la solución, este proyecto te permite listar, buscar, agregar, modificar y eliminar los usuarios de una base de datos, además de mostrar un mensaje de confirmación para cada acción.

¿Cómo funciona?

Al abrir la página te mostrará la lista de los usuarios cada uno con su respectivo botón para modificar o eliminar, por otro lado estará el botón para agregar un nuevo usuario y en la parte superior estará el botón buscar.

El botón agregar te mostrará un formulario para ingresar el nombre, correo y teléfono, recuerda que el código se auto genera al registrar y debes de confirmar el registro del usuario.

El botón modificar te mostrará un formulario con los datos de la fila seleccionada y deberás de confirmar al momento de realizar los cambios del usuario.

El botón eliminar te mostrará un mensaje de confirmación antes de eliminar al usuario por completo.

Para buscar a un usuario debes de ingresar al menos una letra del nombre en la caja de texto y presionar el botón buscar.

Funciona bien y tiene lo básico como agregar, modificar, eliminar y buscar, es similar al proyecto MANTENIMIENTO de CLIENTES en HTML + CSS + PHP + MYSQL + APACHE pero este es más elegante.

Proyecto.

Vas a crear los siguientes archivos en una carpeta.

Nuestra base de datos tendrá el nombre vaicrud1, creamos la tabla usuarios, tendrá la columna código(cod), nombre(nom), correo, teléfono(tel), la columna cod deberá de auto incrementarse.

create database vaicrud1;

use vaicrud1;

CREATE TABLE `usuarios` (
  `cod` int(50) NOT NULL,
  `nom` varchar(50) NOT NULL,
  `correo` varchar(50) NOT NULL,
  `tel` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`cod`);
  
  ALTER TABLE `usuarios`
  MODIFY `cod` int(50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32448;
  
  INSERT INTO `usuarios` (`cod`, `nom`, `correo`, `tel`) VALUES
(32412, 'VaidrollTeam', 'correo@gmail.com', 123456789),
(32413, 'VaidrollTeam2', 'correo2@gmail.com', 342568124),
(32414, 'VaidrollTeam3', 'corre3@hotmail.com', 134653246),
(32425, 'VaidrollTeam4', 'corre4@gmail.com', 2147483647),
(32447, 'UsuarioTest', 'vai@gmail.com', 111111111);

Continuamos con el código de cada archivo.

conexion.php

<?php
$conn = new mysqli("localhost","root","","vaicrud1");
	
	if($conn->connect_errno)
	{
		echo "No hay conexión: (" . $conn->connect_errno . ") " . $conn->connect_error;
	}
?>

agregar.php

<?php include_once("conexion.php"); 
    
    $nombre 	= $_POST['txtnombre'];
    $correo 	= $_POST['txtcorreo'];
    $telefono 	= $_POST['txttelefono'];
    
	mysqli_query($conn, "INSERT INTO usuarios(nom,correo,tel) VALUES('$nombre','$correo','$telefono')");
    
header("Location:index.php");
	

?>

eliminar.php

<?php
include_once("conexion.php");
 
$cod = $_GET['cod'];
 
mysqli_query($conn, "DELETE FROM usuarios WHERE cod=$cod");
 
header("Location:index.php");

?>

editar.php

<?php 
include_once("conexion.php");
include_once("index.php");

$codigo = $_GET['cod'];
 
$querybuscar = mysqli_query($conn, "SELECT * FROM usuarios WHERE cod=$codigo");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
    $codigo = $mostrar['cod'];
    $nombre = $mostrar['nom'];
    $correo = $mostrar['correo'];
	$telefono = $mostrar['tel'];
}
?>
<html>
<head>    
		<title>VaidrollTeam</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="caja_popup2" id="formmodificar">
  <form method="POST" class="contenedor_popup" >
        <table>
		<tr><th colspan="2">Modificar usuario</th></tr>
		     <tr> 
                <td>Codigo</td>
                <td><input type="text" name="txtcodigo" value="<?php echo $codigo;?>" required ></td>
            </tr>
            <tr> 
                <td>Nombre</td>
                <td><input type="text" name="txtnombre" value="<?php echo $nombre;?>" required></td>
            </tr>
            <tr> 
                <td>Correo</td>
                <td><input type="text" name="txtcorreo" value="<?php echo $correo;?>" required></td>
            </tr>
            <tr> 
                <td>Teléfono</td>
                <td><input type="text" name="txttelefono" value="<?php echo $telefono;?>"required></td>
            </tr>
            <tr>
				
                <td colspan="2">
				<a href="index.php">Cancelar</a>
				<input type="submit" name="btnmodificar" value="Modificar" onClick="javascript: return confirm('¿Deseas modificar a este usuario?');">
				</td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

<?php
	
	if(isset($_POST['btnmodificar']))
{    
    $codigo1 = $_POST['txtcodigo'];
	
	$nombre1 	= $_POST['txtnombre'];
    $correo1 	= $_POST['txtcorreo'];
    $telefono1 	= $_POST['txttelefono']; 
      
    $querymodificar = mysqli_query($conn, "UPDATE usuarios SET nom='$nombre1',correo='$correo1',tel='$telefono1' WHERE cod=$codigo1");

  	echo "<script>window.location= 'index.php' </script>";
    
}
?>

index.php

<?php
include_once("conexion.php"); 
?>
<!--Busca por VaidrollTeam para más proyectos. -->
<html>
<head>    
		<title>VaidrollTeam</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
	<img src="logo.png">
			<div id="barrabuscar">
		<form method="POST">
		<input type="submit" value="Buscar" name="btnbuscar"><input type="text" name="txtbuscar" id="cajabuscar" placeholder="&#128270;Ingresar nombre de usuario">
		</form>
		</div>
			<tr><th colspan="5"><h1>LISTAR USUARIOS</h1><th><a style="font-weight: normal; font-size: 14px;" onclick="abrirform()">Agregar</a></th></tr>
			<tr>
		    <th>Nro</th>
			<th>Código</th>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Teléfono</th>
            <th>Acción</th>
			</tr>
        <?php 

if(isset($_POST['btnbuscar']))
{
$buscar = $_POST['txtbuscar'];
$queryusuarios = mysqli_query($conn, "SELECT cod,nom,correo,tel FROM usuarios where nom like '".$buscar."%'");
}
else
{
$queryusuarios = mysqli_query($conn, "SELECT * FROM usuarios ORDER BY cod asc");
}
		$numerofila = 0;
        while($mostrar = mysqli_fetch_array($queryusuarios)) 
		{    $numerofila++;    
            echo "<tr>";
			echo "<td>".$numerofila."</td>";
            echo "<td>".$mostrar['cod']."</td>";
            echo "<td>".$mostrar['nom']."</td>";
            echo "<td>".$mostrar['correo']."</td>";    
			echo "<td>".$mostrar['tel']."</td>";  
            echo "<td style='width:26%'><a href=\"editar.php?cod=$mostrar[cod]\">Modificar</a> | <a href=\"eliminar.php?cod=$mostrar[cod]\" onClick=\"return confirm('¿Estás seguro de eliminar a $mostrar[nom]?')\">Eliminar</a></td>";           
}
        ?>
    </table>
	 <script>
function abrirform() {
  document.getElementById("formregistrar").style.display = "block";
  
}

function cancelarform() {
  document.getElementById("formregistrar").style.display = "none";
}

</script>
<div class="caja_popup" id="formregistrar">
  <form action="agregar.php" class="contenedor_popup" method="POST">
        <table>
		<tr><th colspan="2">Nuevo usuario</th></tr>
            <tr> 
                <td>Nombre</td>
                <td><input type="text" name="txtnombre" required></td>
            </tr>
            <tr> 
                <td>Correo</td>
                <td><input type="email" name="txtcorreo" required></td>
            </tr>
            <tr> 
                <td>Teléfono</td>
                <td><input type="number" name="txttelefono" required></td>
            </tr>
            <tr> 	
               <td colspan="2">
				   <button type="button" onclick="cancelarform()">Cancelar</button>
				   <input type="submit" name="btnregistrar" value="Registrar" onClick="javascript: return confirm('¿Deseas registrar a este usuario?');">
			</td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

style.css

body
{
    background: linear-gradient(to bottom, #3380B5, white);
	font-family: sans-serif;
	margin:0;
	padding:0;
	height: 100%;
    width: 100%;
	display: flex;
	flex-direction: column;	
}
table
{
	text-align:center;
    width: 98%;
    border-collapse: collapse;
    border: 1px solid black;
	margin:50px auto;
    background: white;
}
th 
{
    background: steelblue;
    height: 40px;
    font-weight: lighter;
    text-shadow: 0 1px 0 #38678f;
    color: white;
    border: 1px solid #38678f;
    box-shadow: inset 0px 1px 2px #568ebd;
    transition: all 0.2s;
	font-size: 18px;

}
tr 
{
    border-bottom: 1px solid #cccccc;
	width:100%;
}
td 
{
    border: 1px solid #cccccc;
    padding: 10px;
    transition: all 0.2s;
	font-size: 14px;
}
a,input[type="submit"],button
{
	font-size: 14px;
	text-align:center;
	width: 100px;
	display: inline-block;
	background-color:#FABD44;
	padding: 6px 10px;
	border-radius:5px;
	text-decoration: none;
	color:black;
	border:1px solid black;
	cursor:pointer;
}
h1
{
	font-family: sans-serif;
	margin:5px;
}
label
{
	width:250px;
	background-color:#009BFF;
	padding: 20px;
	color:white;
	font-size:24px;
	margin: 20px;
	font-weight: lighter;
	border-radius:5px;
	border:2px solid #f3f3f3;
}

.caja_popup 
{
	display: none;
    position: absolute;
	padding:0;
	background-color:rgba(0, 0, 0, 0.5);
	width:100%;
	height:100%;
}
.contenedor_popup 
{
	border-radius: 5px;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
	width:400px;
	border-radius: 5px;
	transition: all 0.2s;
}
img
{
	width:100px;
	height:100px;
	float:left;
	position:absolute;
	margin-left:2%;
}
.caja_popup2 
{
	display: block;
    position: absolute;
	padding:0;
	background-color:rgba(0, 0, 0, 0.5);
	width:100%;
	height:100%;
}
#barrabuscar
{
	color:white;
	text-align:right;
}
#cajabuscar
{
	width:500px;
	height:30px;
	font-size:18px;
	background-color:#f3f3f3;
	border-color:white;
	padding-left:10px;
	margin: 0px 30px;
}

Listo.

A este proyecto le puedes agregar un login con sesiones y contraseña encriptada quedaría muy pro :)

Notepad++

XAMPP (APACHE Y MYSQL)

Nombre: VaidrollTeamCRUDPHP1.rar

Tamaño: 19 KB

Descargar Creando link... espera 30 segundos.

Tutoriales recomendados

Páginas

CRUD BÁSICO DE USUARIOS EN PHP, MYSQL, HTML Y CSS