En este artículo, veremos cómo podemos crear una página de inicio de sesión para el administrador, conectada con la base de datos, o cuya información para iniciar sesión en la página ya esté almacenada en nuestra base de datos.
Siga los pasos para crear una página de inicio de sesión de administrador usando PHP:
Enfoque: asegúrese de tener XAMPP o WAMP instalado en su máquina con Windows. En caso de que esté utilizando el sistema operativo Linux, instale el servidor LAMP . En este artículo, usaremos el servidor XAMPP.
1. Crear base de datos: Primero, crearemos una base de datos llamada ‘ geeksforgeeks ‘ (puede dar cualquier nombre a su base de datos). También puede usar su base de datos existente o crear una nueva.
crear base de datos «geeksforgeeks»
2. Crear tabla: cree una tabla llamada ‘adminlogin’ con 3 columnas para almacenar los datos.
crear tabla «adminlogin»
3. Crear estructura de tabla: la tabla «adminlogin» contiene tres campos.
- id – clave principal – incremento automático
- nombre de usuario – varchar (100)
- contraseña – varchar (100)
El tipo de datos para el nombre de usuario y la contraseña es varchar . El tamaño se puede modificar según el requisito. Sin embargo, 100 es suficiente y el tipo de datos para «id» es int y es una clave principal .
Una clave principal, también llamada palabra clave principal, es una clave en una base de datos relacional que es única para cada registro. Es un identificador único, como el número de licencia de conducir, el número de teléfono (incluido el código de área) o el número de identificación del vehículo (VIN).
La estructura de su tabla debería verse así.
estructura de la mesa
O copie y pegue el siguiente código en el panel SQL de su PHPMyAdmin .
DROP TABLE IF EXISTS `adminlogin`; CREATE TABLE IF NOT EXISTS `adminlogin` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Para hacer esto desde el Panel SQL, consulte la siguiente captura de pantalla.
crear una tabla desde el panel SQL
4. Inserte la información de inicio de sesión del administrador: Aquí, estamos insertando dos registros en nuestra tabla. Puedes añadir tantos como quieras.
insertando registros
O copie y pegue el siguiente código para insertar registros en el panel SQL.
INSERT INTO `adminlogin` (`id`, `username`, `password`) VALUES (NULL, 'admin', 'admin'), (NULL, 'admin2', 'admin2');
Después de insertar los valores, la tabla se verá así.
registros de tabla
5. Cree una carpeta que incluya los siguientes archivos: La carpeta debe estar en «C:\xampp\htdocs\» (o donde esté instalado su XAMPP). Para el servidor WAMP, debe estar en «C:\wamp64\www\» y en Linux «/opt/lampp/htdocs» .
- Nombre de archivo: index.php
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="login.css"> <title>Login Page</title> </head> <body> <form action="validate.php" method="post"> <div class="login-box"> <h1>Login</h1> <div class="textbox"> <i class="fa fa-user" aria-hidden="true"></i> <input type="text" placeholder="Username" name="username" value=""> </div> <div class="textbox"> <i class="fa fa-lock" aria-hidden="true"></i> <input type="password" placeholder="Password" name="password" value=""> </div> <input class="button" type="submit" name="login" value="Sign In"> </div> </form> </body> </html>
- Nombre de archivo: conexión.php
PHP
<?php
$conn = "";
try {
$servername = "localhost:3306";
$dbname = "geeksforgeeks";
$username = "root";
$password = "";
$conn = new PDO(
"mysql:host=$servername; dbname=geeksforgeeks",
$username, $password
);
$conn->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>
- Nombre de archivo: inicio de sesión.css
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url() no-repeat;
background-size: cover;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #191970;
}
.login-box h1 {
float: left;
font-size: 40px;
border-bottom: 4px solid #191970;
margin-bottom: 50px;
padding: 13px;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #191970;
}
.fa {
width: px;
float: left;
text-align: center;
}
.textbox input {
border: none;
outline: none;
background: none;
font-size: 18px;
float: left;
margin: 0 10px;
}
.button {
width: 100%;
padding: 8px;
color: #ffffff;
background: none #191970;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
- Nombre de archivo: validar.php
PHP
<?php
include_once('connection.php');
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = test_input($_POST["username"]);
$password = test_input($_POST["password"]);
$stmt = $conn->prepare("SELECT * FROM adminlogin");
$stmt->execute();
$users = $stmt->fetchAll();
foreach($users as $user) {
if(($user['username'] == $username) &&
($user['password'] == $password)) {
header("location: adminpage.php");
}
else {
echo "<script language='javascript'>";
echo "alert('WRONG INFORMATION')";
echo "</script>";
die();
}
}
}
?>
- Nombre de archivo: adminpage.php Agregue cualquier cosa que desee mostrar en la página de administración.
HTML
<h2> Hello Admin </h2>
6. Después de completar todos los pasos anteriores, ahora siga los pasos:
- Ejecutar servidor XAMPP
- Inicie los servicios de Apache y MySQL desde el Panel XAMPP.
- Escriba http://localhost/loginPage/ en su navegador.
Obtendrá la siguiente pantalla de la página de inicio de sesión.
Si ingresa las credenciales correctas, es decir, nombre de usuario y contraseña, iniciará sesión en la página “admin.php”.
de lo contrario, obtendrá una alerta emergente de error.
PHP es un lenguaje de secuencias de comandos del lado del servidor diseñado específicamente para el desarrollo web. Puede aprender PHP desde cero siguiendo este tutorial de PHP y ejemplos de PHP .
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA