PHP y HTML - CSS - MYSQL - CRUD DE USUARIOS - VaidrollTeam
PHP y HTML - CSS - MYSQL - CRUD DE USUARIOS - VaidrollTeam
En este blog puedes encontrar tutoriales y proyectos de programación en C#, Visual Basic, PHP, MIT App Inventor 2, cada uno con su código fuente o archivo disponible para su
desarrollo desde cero.
LOGIN SESIONES, REGISTRO Y CRUD DE USUARIOS EN PHP, MYSQL, HTML Y CSS Buscar en este blog
Buscar
Youtube
VaidrollTeam
😺Meow?
YouTube 11 K
Entrada destacada
JUEGO DE ATRAPAR MONEDAS EN MIT APP
INVENTOR 2
Ayuda al cerdito ahorrador a juntar todas las monedas
posibles para que pueda comprar su casa.
Con este proyecto puedes iniciar sesión, registrar usuarios y realizar mantenimiento de datos como buscar por correo, ver
información completa, modificar y eliminar, funciona con MySQL, cuenta con una barra lateral para cambiar entre páginas y la tabla
de usuarios tiene una paginación básica.
El proyecto funciona con sesiones y esta validado hasta cierto punto, por lo que es necesario presionar el botón cerrar QUIZ CON PREGUNTAS ALEATORIAS
sesión o borrar las cookies de la página para cambiar de usuario. EN MIT App Inventor 2
Quiz con preguntas aleatorias sin
repetir, el jugador iniciará con 3 vidas,
podrá juntar monedas y registrar su
nombre.
Al presionar en la siguiente imagen se puede ver el proyecto a tamaño original
Formulario iniciar sesión solo permite el ingreso a usuarios registrados. SISTEMA DE INVENTARIO BÁSICO
EN VISUAL BASIC Y SQL SERVER
Este sistema trabaja con una base
de datos, tiene un login, un
formulario principal, inventario,
categoría , usuarios y cambiar
contraseña, ...
PLANTILLAS Y DISEÑOS DE
LOGIN CON ROLES EN HTML Y
CSS
5 Plantillas que te ayudará con el
diseño de tu LOGIN CON ROLES, la
última plantilla tiene un botón para
intercambiar los formularios entre
...
Etiquetas
index.php
usuarios_registrar.php
Visitas a la página
barra_lateral.php
principal.php 1 2 8 3 8 8 1
usuarios_tabla.php
usuarios_ver.php
usuarios_modificar.php
usuarios_eliminar.php
cerrar_sesion.php
style.css
fondo.png
En phpMyAdmin en la pestaña SQL se puede crear la siguiente base de datos, usar, crear la tabla de usuarios e insertar los datos
de usuarios de ejemplo.
use logincrud1;
conexion.php
<?php
$host = 'localhost';
$nom = 'root';
$pass = '';
$db = 'logincrud1';
if (!$conn)
{
die("Error en la conexión: " . mysqli_connect_error());
}
?>
index.php
<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
header('location: principal.php');
}
?>
<html>
<!--Busca por VaidrollTeam para más proyectos. -->
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="FormCajaLogin">
<div class="FormLogin">
<form method="POST">
<h1>Iniciar sesión</h1>
<br>
<div class="CheckBox1">
<input type="checkbox" onclick="verpassword()" >Mostrar password
</div>
<div>
<input type="submit" value="Iniciar sesión" class="BtnLogin" name="btningresar" >
</div>
<hr>
<br>
<div>
<a href="usuarios_registrar.php" class="BtnRegistrar">Crea nueva cuenta</a>
</div>
</div>
</form>
</div>
</body>
<script>
function verpassword()
{
var tipo = document.getElementById("txtpassword");
if(tipo.type == "password")
{
tipo.type = "text";
}
else
{
tipo.type = "password";
}
}
</script>
</html>
<?php
if(isset($_POST['btningresar']))
{
$correo = $_POST["txtcorreo"];
$pass = $_POST["txtpassword"];
$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$correo."' and pass = '".$pas
$nr = mysqli_num_rows($buscandousu);
if($nr == 1)
{
$_SESSION['usuarioingresando']=$correo;
header("Location: principal.php");
}
else if ($nr == 0)
{
echo "<script> alert('Usuario no existe');window.location= 'index.php' </script>";
}
}
?>
usuarios_registrar.php
<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
header('location: principal.php');
}
?>
<html>
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="FormCajaLogin">
<div class="FormLogin">
<form method="post">
<h1>Crear nueva cuenta</h1>
<br>
<div class="CheckBox1">
<input type="checkbox" onclick="verpassword()" >Mostrar password
</div>
<div>
<input type="submit" value="Crea nueva cuenta" class="BtnRegistrar" name="btnregistrar">
</div>
<hr>
<br>
<div >
<a href="index.php" class="BtnLogin">Regresar</a>
</div>
</div>
</form>
</div>
</body>
<script>
function verpassword(){
var tipo = document.getElementById("txtpassword");
if(tipo.type == "password")
{
tipo.type = "text";
}
else
{
tipo.type = "password";
}
}
</script>
</html>
<?php
if(isset($_POST["btnregistrar"]))
{
$nombre = $_POST["txtnombre"];
$correo = $_POST["txtcorreo"];
$pass = $_POST["txtpassword"];
if(!$insertarusu)
{
echo "<script>alert('Correo duplicado, intenta con otro correo');</script>";
}
else
{
echo "<script> alert('Usuario registrado con exito: $nombre'); window.location='index.php' </script>";
}
}
?>
barra_lateral.php
<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
$usuarioingresado = $_SESSION['usuarioingresando'];
$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$usuarioingresado."'");
$mostrar=mysqli_fetch_array($buscandousu);
}else
{
header('location: index.php');
}
?>
<html>
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="BarraLateral">
<ul>
<div class="NomUsuario"><?php echo $mostrar['nom']?></div>
<hr>
<li><a href="principal.php" >Inicio</a></li>
<li><a href="usuarios_tabla.php" >Usuarios</a></li>
<li><a href="cerrar_sesion.php" >Cerrar sesión</a></li>
</ul>
</div>
</body>
</html>
principal.php
<?php
include('conexion.php');
include('barra_lateral.php');
$usuarioingresado = $_SESSION['usuarioingresando'];
$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$usuarioingresado."'");
$mostrar=mysqli_fetch_array($buscandousu);
?>
<html>
<title>VaidrollTeam</title>
<script>
function verhorafor12() {
var fecha = new Date();
var hora = fecha.getHours();
var minutos = fecha.getMinutes();
var segundos = fecha.getSeconds();
var dianoche = "AM";
if (hora > 12) {
hora = hora - 12;
dianoche = "PM";
}
if (hora === 0) {
hora = 12;
}
var tothora = hora + ":" + minutos + ":" + segundos + " " + dianoche;
document.getElementById("hora").innerHTML = tothora;
}
</script>
<body onload="setInterval(verhorafor12, 1000);" >
<div class="ContenedorPrincipal">
<div>
<h1><?php echo "Bienvenido: ".$mostrar['nom'];?></h1>
<h2><?php echo "Correo: ".$mostrar['correo'];?></h2>
<h3>La hora del sistema es: <span id="hora"></span></h3>
</div>
</div>
</body>
</html>
usuarios_tabla.php
<?php
include('conexion.php');
include("barra_lateral.php");
?>
<html>
<title>VaidrollTeam</title>
<body>
<div class="ContenedorPrincipal">
<?php
$filasmax = 5;
if (isset($_GET['pag']))
{
$pagina = $_GET['pag'];
} else
{
$pagina = 1;
}
if(isset($_POST['btnbuscar']))
{
$buscar = $_POST['txtbuscar'];
}
else
{
$sqlusu = mysqli_query($conn, "SELECT * FROM usuarios ORDER BY nom ASC LIMIT " . (($pagina - 1) * $filas
}
$maxusutabla = mysqli_fetch_assoc($resultadoMaximo)['num_usuarios'];
?>
<div class="ContenedorTabla" >
<form method="POST">
<h1>Lista de usuarios</h1>
<div style="text-align:left">
<a href="usuarios_tabla.php" class="BotonesUsuarios">Inicio de la tabla</a>
<?php
echo "<tr>";
echo "<td>".$mostrar['nom']."</td>";
echo "<td>".$mostrar['correo']."</td>";
echo "<td>*****</td>";
// echo "<td>".$mostrar['pass']."</td>";
echo "<td style='width:24%'>
<a class='BotonesUsuarios' href=\"usuarios_ver.php?correo=$mostrar[correo]&pag=$p
<a class='BotonesUsuarios' href=\"usuarios_modificar.php?correo=$mostrar[correo]&
<a class='BotonesUsuarios' href=\"usuarios_eliminar.php?correo=$mostrar[correo]&p
</td>";
?>
</table>
<div style='text-align:right'>
<br>
<?php echo "Total de usuarios: ".$maxusutabla;?>
</div>
</div>
<div style='text-align:right'>
<br>
</div>
<div style="text-align:center">
<?php
if (isset($_GET['pag'])) {
if ($_GET['pag'] > 1) {
?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=<?php echo $_GET['pag'] - 1; ?>">Anterior</a>
<?php
}
else
{
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Anterior</a>
<?php
}
?>
<?php
}
else
{
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Anterior</a>
<?php
}
if (isset($_GET['pag'])) {
if ((($pagina) * $filasmax) < $maxusutabla) {
?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=<?php echo $_GET['pag'] + 1; ?>">Siguiente</a>
<?php
} else {
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Siguiente</a>
<?php
}
?>
<?php
} else {
?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=2">Siguiente</a>
<?php
}
?>
</div>
</div>
</body>
</html>
usuarios_ver.php
<?php
include("conexion.php");
include("usuarios_tabla.php");
$pagina = $_GET['pag'];
$correo = $_GET['correo'];
while($mostrar = mysqli_fetch_array($querybuscar))
{
$usunom = $mostrar['nom'];
$usucorreo = $mostrar['correo'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Ver usuario</th></tr>
<tr>
<td><b>Nombre:</b></td>
<td><?php echo $usunom;?></td>
</tr>
<tr>
<td><b>Correo: </b></td>
<td><?php echo $usucorreo;?></td>
</tr>
<tr>
<td colspan="2">
<?php echo "<a class='BotonesUsuarios' href=\"usuarios_tabla.php?pag=$pagina\">Regresar</a>";?>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
usuarios_modificar.php
<?php
include("conexion.php");
include("usuarios_tabla.php");
$pagina = $_GET['pag'];
$correo = $_GET['correo'];
while($mostrar = mysqli_fetch_array($querybuscar))
{
$usunom = $mostrar['nom'];
$usucorreo = $mostrar['correo'];
$pass = $mostrar['pass'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Modificar usuario</th></tr>
<tr>
<td>Nombre</td>
<td><input class="CajaTexto" type="text" name="txtnom" value="<?php echo $usunom;?>" required></td>
</tr>
<tr>
<td>Correo</td>
<td><input class="CajaTexto" type="email" name="txtcorreo" value="<?php echo $usucorreo;?>" readonly></td
</tr>
<tr>
<td>Password</td>
<td><input class="CajaTexto" type="password" name="txtpass" value="<?php echo $pass;?>" required></td>
</tr>
<tr>
<td colspan="2">
<?php echo "<a class='BotonesUsuarios' href=\"usuarios_tabla.php?pag=$pagina\">Cancelar</a>";?>
<input class="BotonesUsuarios" type="submit" name="btnmodificar" value="Modificar" onClick="javascript: r
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['btnmodificar']))
{
$nom1 = $_POST['txtnom'];
$correo1 = $_POST['txtcorreo'];
$pass1 = $_POST['txtpass'];
}
?>
usuarios_eliminar.php
<?php
include("conexion.php");
include("barra_lateral.php");
$usuarioingresado = $_SESSION['usuarioingresando'];
$pagina = $_GET['pag'];
$correo = $_GET['correo'];
if ($correo == $usuarioingresado )
{
echo "<script> alert('No puedes eliminar a tu propio usuario.'); window.location='usuarios_tabla.php' </s
}
else
{
mysqli_query($conn, "DELETE FROM usuarios WHERE correo='$correo'");
header("Location:usuarios_tabla.php?pag=$pagina");
}
?>
cerrar_sesion.php
<?php
session_start();
session_destroy();
header("Location: index.php");
exit;
?>
style.css
/*Login*/
.FormCajaLogin
{
width: 100%;
height: 100%;
display: grid;
background: url(fondo.png) no-repeat center center fixed;
text-align:center;
}
.FormLogin
{
background-color: rgba(0, 0, 0, .5);
width: 400px;
margin: auto;
padding: 2em;
border-radius: 6px;
color:white;
border:0.1em solid black;
text-align:center;
}
.TextoCajas
{
margin-left:8%;
font-weight: bold;
margin-top:4%;
margin-bottom:4%;
color:white;
text-align:left;
}
.CajaTexto{
width: 80%;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
}
.CheckBox1
{
text-align:left;
margin:5% auto 5% 10%;
}
.BtnRegistrar
{
width: 80%;
text-decoration:none;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: green;
font-weight: bold;
margin-bottom:5%;
}
.BtnLogin
{
width: 80%;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: #1B68DF;
font-weight: bold;
margin-bottom:5%;
}
.NomUsuario
{
font-size:18px;
color:white;
word-break:break-all;
}
/*Panel*/
.BarraLateral {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #1455B9;
padding: 20px;
box-sizing: border-box;
text-align:center;
}
.BarraLateral ul {
list-style: none;
padding: 0;
margin: 0;
}
.BarraLateral li
{
text-align:center;
margin-bottom: 14px;
padding: 12px 10px;
border-radius:5px;
border:2px solid black;
background: linear-gradient(180deg,#259953,#015644);
}
.BarraLateral a
{
color: white;
text-decoration: none;
}
.ContenedorPrincipal
{
margin-left: 200px;
padding: 20px;
box-sizing: border-box;
text-align:center;
}
.ContenedorPrincipal
{
margin-left: 0;
}
}
/*Tabla*/
table
{
border-collapse: collapse;
width: 100%;
margin: 0 auto;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th
{
background-color: #1455B9;
color: white;
}
th, td
{
padding: 10px;
text-align: center;
border-bottom: 1px solid #dddddd;
}
.ContenedorTabla
{
margin-left: auto;
margin-right: auto;
max-width:1260px;
width: 100%;
}
.BotonesUsuarios
{
text-align:center;
display: inline-block;
background:green;
padding: 6px 10px;
border-radius:6px;
text-decoration: none;
color:white;
border:2px solid black;
cursor:pointer;
font-size: 16px;
}
/*CajaPopUp*/
.contenedor_popup
{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
width:400px;
transition: all 0.2s;
background-color:white;
}
.caja_popup2
{
display: block;
position: absolute;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
width:100%;
height:100%;
}
DESCARGAR
Nombre: LoginCrud1.rar
Tamaño: 1.40 MB
Descargar
Etiquetas: APACHE, Ejercicios PHP, HTML, JAVASCRIPT, Login, MYSQL, Notepad, PHP, XAMPP
Recomendaciones
⮜ ⮞