En este artículo, vamos a aprender conceptos de base de datos, cómo hacer un juego simple usando PHP y MySQL, cómo podemos implementar una base de datos en la que enviamos mensajes secretos para un usuario en particular, cómo organizar tablas en la base de datos y también aprendemos algunos problemas de seguridad sobre cómo podemos salvar nuestras aplicaciones web de estos problemas de seguridad.
Dominio: Aplicación web utilizando PHP y base de datos MySQL.
Características:
- Inscribirse
- Acceso
- Mensajes secretos a un usuario en particular mediante el uso de una URL proporcionada por el usuario de registro
- Envío de mensajes por Ajax Requests
- Base de datos
Es un juego simple en el que los usuarios envían mensajes secretos para un usuario en particular mediante un enlace. A través de este juego, aprendemos muchas cosas, como cómo registrarse e iniciar sesión en un usuario creando una sesión y destruyéndola. ¿Cómo podemos almacenar datos de usuarios y mensajes secretos en la base de datos para un usuario en particular que ha creado un enlace para su nombre.
Herramientas y Tecnologías:
Interfaz:
- CDN BOOTSTRAP
- HTML y CSS
Back-End:
- PHP
- JQuery
- Base de datos – MySQL
Instrumentos:
- Servidor XAMP (para crear un servidor en Localhost)
Implementación del proyecto: haga una carpeta vacía y cree archivos de acuerdo con esta estructura de archivos
Carpeta de activos: Primero, comencemos desde la carpeta de activos. Entonces, creamos esta carpeta debido a los activos que usamos en un proyecto, como imágenes, videos, CSS global y un archivo js que se adjunta a todos los archivos de nuestro proyecto. también creamos un archivo index.php para todas las carpetas porque si alguien intenta acceder a esta carpeta, solo ve una página de índice, no nuestro directorio
si el archivo index.php no se crea, cualquiera puede ver nuestra estructura de archivos de todo el proyecto
PHP
<!-- filename - assets/index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Error</title> </head> <body> 403 - Forbidden Error </body> </html>
HTML
<!-- filename - assets/css/style.css --> .content { min-height: calc(93vh - 70px); } .footer { background-color: black; color: white; text-align: center; height: 40px; } .cont{ height: 300px; overflow-y: auto; }
Carpeta Utils: haga que el nombre del archivo sea protectXss.php: este archivo se usa básicamente para proteger nuestra aplicación web de los ataques de secuencias de comandos entre sitios.
PHP
<?php function protectxss($string) { $string=iconv(mb_detect_encoding( $string, mb_detect_order(), true), "UTF-8", $string ); $string=addcslashes($string,"'"); $string=addcslashes($string,'"'); return htmlspecialchars($string); } ?>
Partials Folder y cree archivos de acuerdo con la estructura de archivos como se muestra:
Dentro de la carpeta de parciales, haga una carpeta llamada modales para colocar todos los modales en ella
Código fuente
PHP
<?php // Filename partials/action.php // Including all necessary files include "dbConnect.php"; include "../utils/protectXss.php"; // Signup handler for storing only names of users if (isset($_POST['startBtn'])) { $name=protectxss($_POST['name']); $trimname=trim($name); $strreplace=str_replace(" ","_",$trimname); // Assigning them username and password $userName=$strreplace."@".time(); $password = rand(); // Converting to hash format $passhash=password_hash($password,PASSWORD_DEFAULT); $sql="INSERT INTO `an_users` (`an_id`, `an_name`, `an_username`, `an_password`, `timestamp`) VALUES (NULL, '$trimname', '$userName', '$passhash', current_timestamp())"; $result=mysqli_query($conn,$sql); if ($result) { // Creating a session for a user session_start(); $_SESSION['loggedinUser']=$userName; $_SESSION['userPass']=$password; $_SESSION['name']=$name; header("location:../welcome.php"); }else{ echo "error"; } } // Login handle if (isset($_POST['loginBtn'])) { $username=protectxss($_POST['username']); $password=protectxss($_POST['password']); $sql="SELECT `an_password`,`an_name` FROM `an_users` WHERE `an_username`='$username'"; $result=mysqli_query($conn,$sql); $row=mysqli_fetch_assoc($result); if (password_verify($password,$row['an_password'])) { session_start(); $_SESSION['loggedinUser']=$username; $_SESSION['userPass']=$password; $_SESSION['name']=$row['an_name']; header("location:../welcome.php"); } else { header("location:../index.php"); } } // Message Button for sending messages if (isset($_POST['sendBtn'])) { $message=protectxss($_POST['message2']); $mycode=protectxss($_POST['mycode2']); // Inserting messages into another table $sql="INSERT INTO `an_messages` (`msg_id`, `msg_text`, `an_id`, `timestamp`) VALUES (NULL, '$message', '$mycode', current_timestamp())"; $result=mysqli_query($conn,$sql); if ($result) { echo "Message sent"; }else{ echo "try Again Later !"; } } ?>
PHP
<?php // Filename - partials/dbConnect.php $hostname="127.0.0.1"; $_username="root"; $password=""; $database="anonymousdb"; $conn=mysqli_connect($hostname,$_username,$password,$database); ?>
PHP
<!-- filename - partials/footer.php --> <footer class="footer"> <p class="mt-3">Anonymous Prank</p> </footer> </body> </html>
PHP
<!-- filename - partials/header.php --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="stylesheet" href="assets/css/style.css"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity= "sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"> </script> </head> <body>
PHP
<!-- filename - partials/index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 403 - fobidden error </body> </html>
PHP
<!-- filename - partials/navbar.php --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="index.php"> Anonymous Prank ???????? </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul> <form class="d-flex"> <?php // Checking a user if he is login or // not then showing him logout button if (isset($_SESSION['loggedinUser'])) { echo '<a href="logout.php" class="btn btn-outline-danger"> Logout </a>'; } // Checking if a user is sending // message to other user else if (isset($_GET['abcNum'])) { echo '<a class="btn btn-danger" href="index.php"> Sign Up </a>'; } // If above conditions are false // then showing him login button else { echo '<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginmodal"> login </button>'; } ?> </form> </div> </div> </nav>
PHP
<!-- filename - partials/modals/loginmodal.php --> <div class="modal fade" id="loginmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> Sign In </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <form action="partials/action.php" method="POST"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label"> Username </label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="username"> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label"> Password </label> <input type="password" class="form-control" id="exampleInputPassword1" name="password"> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> Close </button> <button type="submit" class="btn btn-primary" name="loginBtn"> Login </button> </div> </form> </div> </div> </div> </div>
Carpeta raíz: Cree archivos de acuerdo con esta estructura.
Nombre de archivo – index.php
Cree index.php , que es la página principal de la aplicación web. En esta página, estamos creando un formulario que toma el nombre del usuario como entrada para iniciar el juego.
PHP
<?php session_start(); // Checking if a user is logged in or not if (isset($_SESSION['loggedinUser'])) { header("location:welcome.php"); } // Including header and dbConnect include "partials/header.php"; include "partials/dbConnect.php"; ?> // Navbar and login modal <?php include "partials/navbar.php" ?> <?php include "partials/modals/loginmodal.php" ?> // Container <div class="content"> <div class="container"> <div class="p-5 mb-4 bg-light rounded-3 my-3"> <div class="container-fluid py-5 text-center"> <h1 class="display-5 fw-bold"> Anonymous message Prank Game </h1> <p class="fs-4"> Prank Your Friends by Sending Secret Messages to them They dont able to know who send message to them ???????? Enter Your Name to get Started </p> <div class="container"> <!-- Form to submit the name of a user who is creating quiz for him --> <form class="row" style="float:right;" action="partials/action.php" method="POST"> <div class="col-auto"> <label for="staticEmail2" class="visually-hidden"> Name </label> <label readonly class="form-control-plaintext"> Your Name to Get started </label> </div> <div class="col-auto"> <label for="inputPassword2" class="visually-hidden"> Name </label> <input type="text" class="form-control" name="name" placeholder="Name.."> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary mb-3" name="startBtn"> Start </button> </div> </form> </div> </div> </div> </div> </div> // Including footer <?php include "partials/footer.php" ?>
Nombre del archivo: bienvenido.php
Estamos creando este archivo para ver los mensajes que provienen de otros usuarios y proporcionar el nombre de usuario y la contraseña al usuario registrado. Junto con el nombre de usuario y la contraseña, también se proporciona un enlace para que el usuario registrado lo comparta con otros y otros le envíen mensajes anónimos.
PHP
<?php include "partials/dbConnect.php"; session_start(); // Checking for a user if he is login or not if (!isset($_SESSION['loggedinUser'])) { header("location:index.php"); }else{ $user_name=$_SESSION['loggedinUser']; } include "partials/header.php"; ?> <?php include "partials/navbar.php" ?> <!-- Main Content --> <div class="content"> <div class="container"> <div class="p-5 mb-4 bg-light rounded-3 my-3"> <div class="container-fluid py-5 text-center"> <!-- All these values are coming from index.php when user sign up --> <h1 class="display-5 fw-bold"> Hey????????, <?php echo $_SESSION['name'] ?> </h1> <h4 class="fw-bold"> Your Username - <?php echo $_SESSION['loggedinUser'] ?> </h4> <h4 class="fw-bold"> Password - <?php echo $_SESSION['userPass'] ?> </h4> <p class="fs-4"> Use these crediantials when you login again save them for future reference </p> <p class="fs-5 text-info"> Reload the page to Load new messages </p> <p class="fs-6"> Share this URL with your friends so that they can send you messages </p> <!-- Creating a Link for other so that others send messages to this user through this Link using base 64 encoding to encode username of user in Link --> <p class="fs-6 text-success"> Link - <?php echo $_SERVER['HTTP_HOST'] . "/anonymousprank/anonymous.php?abcNum=" . base64_encode($user_name) ?> </p> </div> </div> </div> <h4 class="fw-bold container">Messages</h4> <div class="container cont"> <div class="row"> <?php // Fetching all the messages from the // messages table for this particular // user only $__username=$_SESSION['loggedinUser']; $_sql="SELECT `an_id` FROM `an_users` WHERE `an_username`='$__username'"; $_result = mysqli_query($conn, $_sql); $_row = mysqli_fetch_assoc($_result); $an_u_id=$_row['an_id']; $sql = "SELECT `msg_text`,`timestamp` FROM `an_messages` WHERE `an_id`='$an_u_id'"; $result = mysqli_query($conn, $sql); // displaying messages on the page while($row = mysqli_fetch_assoc($result)){ echo ' <div class="card mx-3 my-2" style="width: 18rem;border-radius:21px; border: solid aqua 6px;"> <div class="card-body"> <p class="card-text">'.$row['msg_text'].'</p> <p class="card-text" style="float:right"> '.$row['timestamp'].' </p> </div> </div>'; } ?> </div> </div> </div> <?php include "partials/footer.php" ?>
Nombre de archivo – anónimo.php
Estamos creando este archivo para la URL que proporcionamos a nuestros usuarios registrados para que compartan esa URL con sus amigos y dirijan a los amigos a este archivo usando esa URL.
PHP
<?php include "partials/dbConnect.php"; include "partials/header.php"; if (isset($_GET['abcNum'])) { // Decoding username of signup // user passed inside the url $_username = base64_decode($_GET['abcNum']); } ?> <?php include "partials/navbar.php" ?> <div class="content"> <div class="container"> <div class="p-5 mb-4 bg-light rounded-3 my-3"> <div class="container-fluid py-5 text-center"> <h1 class="display-5 fw-bold"> Hey ????, Anonymous Send a Secret message to <?php // Fetching the name of the user from database $sql = "SELECT `an_name`,an_id FROM `an_users` WHERE `an_username`='$_username'"; $result = mysqli_query($conn, $sql); $record = mysqli_num_rows($result); // If find then showing page otherwise // redirecting to main page if ($record>0) { $row = mysqli_fetch_assoc($result); echo $row['an_name']; }else { header("location:index.php"); } ?> </h1> <h3 id="log" class="my-4 text-success"></h3> <div class="mb-3"> <!-- form to send messages to the sign up user --> <form method="POST" id="sendForm"> <textarea class="form-control" id="message" rows="3" name="message" required> </textarea> <input type="hidden" value= <?php echo $row['an_id']?> name="mycode" id="mycode"> <button type="submit" class="btn btn-primary my-4 btn-lg" name="sendBtn" id="sendBtn"> Send </button> </form> </div> </div> </div> </div> </div> <!-- including jquery -- > <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity= "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <?php include "partials/footer.php" ?> <script> // jQuery $(document).ready(function() { /* Targeting form to send a message using ajax and pass data in the form of object and getting response*/ $("#sendForm").submit(function(e){ e.preventDefault(); let mycode = $("#mycode").val(); let message = $("#message").val(); $.post("partials/action.php", { sendBtn:true, mycode2: mycode, message2: message }, (data)=>{ $("#log").html(data) setTimeout(() => { $("#log").html("") }, 2000); $("#message").val("") }); }); }); </script>
Nombre de archivo: cerrar sesión.php
Cerrar sesión de usuarios y destruir sesiones.
PHP
<?php session_start(); session_destroy(); session_unset(); header("location:index.php") ?>
Base de datos: iniciar el servidor XAMP
Vaya al navegador y escriba 127.0.0.1 en la barra de direcciones
Vaya a phpmyadmin y cree una nueva base de datos llamada «anonymousdb»
Estructura de la base de datos
Haga tablas de acuerdo con las estructuras que se muestran a continuación.
Nombre de la tabla: «an_users»
Para hacer que una columna sea única, haga clic en «más» cerca de «soltar» y seleccione «único»
Nombre de la tabla: «un_mensajes»
Producción
Publicación traducida automáticamente
Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA