En este artículo, vamos a construir una aplicación web FIR en línea usando PHP con MySQL . En esta aplicación podemos archivar casos desde cualquier lugar por su nombre, queja, estado (pendiente o resuelto), y fecha de incidencia, fecha de registro. Solo el administrador puede ver, eliminar y actualizar el estado. Solo el administrador puede ver una lista completa de todos los casos.
Prerrequisitos: servidor XAMPP , conceptos básicos de HTML , CSS , Bootstrap , PHP y MySQL
Seguiremos los siguientes pasos para construir esta aplicación.
- Un sitio web que facilitaría el suministro de información rápida, segura y confiable al público.
- Este es un proyecto que usa el editor de código de Visual Studio, Notepad, Notepad++, Atom, Sublime y también puede usar el software Adobe Dreamweaver 2020.
Características del sitio web:
- Registro en línea
- Iniciar sesión para presentar un caso
- Consulta el estado de tu caso
Paso 1: Primero, debemos iniciar el servidor XAMPP desde el panel de control de XAMPP.
Abra el Panel de control de XAMPP e inicie los servicios de Apache y MySQL. En la carpeta XAMPP, vaya a la carpeta htdocs y cree una carpeta llamada OnlineFIR . Guardaremos todos los archivos en la carpeta del proyecto. Hay muchos archivos dentro de esta carpeta, pero los principales archivos que funcionan son login.php, connect.php, register.php, index.php, registerfir.php,status.php.
Paso 2: Crear base de datos
Vaya a localhost/phpMyAdmin y cree una base de datos llamada fir_info . Debajo de eso, haga tres tablas llamadas fir, login, register .
Paso 3: Abra el editor de su elección. Cree un archivo llamado connect.php para la conexión de la base de datos fir_info . El objeto de conexión se devuelve a la variable $conn .
PHP
<?php
$conn=mysqli_connect("localhost","root","");
$db=mysqli_select_db($conn,"fir_info");
?>
Paso 4: crea otro archivo index.php .
Esta página contiene el hipervínculo de todas las demás páginas, como status.php, login.php, gallery.php, aboutus.php . Al hacer clic en estos enlaces, el usuario puede realizar acciones.
índice.php
Producción:
Página de inicio
Paso 5: Cree otro archivo llamado «register.php» y agregue el código.
Esta página se crea para insertar la información del usuario en la tabla «registro» en la base de datos «fir_info» . El formulario HTML contiene campos como nombre, apellido, nombre de usuario, correo electrónico, sexo, fecha de nacimiento, número de móvil, contraseña, repetición de contraseña para la entrada del usuario. Cuando se hace clic en un botón, incluimos el archivo “connect.php” para conectar la página con la base de datos.
Cuando la información se ingresa correctamente en la tabla de «registro» , el usuario debe iniciar sesión él mismo al « iniciar sesión « , aparecerá una página de inicio de sesión y la página se moverá a » login.php «.
registro.php
PHP
<?php
include("connect.php"); // Connect to database
if(isset($_POST['b1']) && !empty($_POST['q1'])
&& !empty($_POST['q8'] == $_POST['q9'])) {
mysqli_query($conn,"insert into login set
username = '".$_POST['q3']."',
userpassword = '".$_POST['q9']."'");
$id1 = mysqli_insert_id($conn);
mysqli_query($conn,"insert into register set
firstname = '".$_POST['q1']."' ,
lastname = '".$_POST['q2']."' ,
username = '".$_POST['q3']."' ,
dob = '".$_POST['q4']."' ,
gender = '".$_POST['q5']."' ,
email = '".$_POST['q6']."' ,
mobileno = '".$_POST['q7']."' ,
password = '".$_POST['q8']."' ,
repeatpassword = '".$_POST['q9']."'");
$id2 = mysqli_insert_id($conn); // Return row id from DB
if (isset($_POST['b1'] ) && !empty($_POST['q1'])) {
echo"<b><i>You Registered Successfully</i>/<b>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color:white;
}
* {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: #D3d3d3;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #4169E1;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
transition-duration: 0.4sec;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center
the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<form action="?" name="frm1" method="post">
<div class="container">
<h1>Register</h1>
<p><h4>Enter Your Credentials to create an account</h4></p>
<hr>
<p>
<label><b>First Name</b></label>
<input type="text" placeholder="Enter Your First Name"
name="q1" id="q1" required>
<label><b>Last name</b></label>
<input type="text" placeholder="Enter Your Last Name"
name="q2" id="q2" required>
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username"
name="q3" id="q3" required>
<label><b>Date of Birth </b></label>
<input type="text" placeholder="yyyy-mm-dd"
name="q4" id="q4" required>
<label><b>Gender</b></label>
<input type="text" placeholder="Enter Gender"
name="q5" id="q5" required>
<label><b>E-mail</b></label>
<input type="text" placeholder="Enter your e-mail"
name="q6" id="q6" required>
<label><b>Mobile no.</b></label>
<input type="text" placeholder="Enter your phone number"
name="q7" id="q7" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password"
name="q8" id="q8" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password"
name="q9" id="q9" required>
</p>
<button type="submit" class="registerbtn"
name="b1" id="b1">
Register
</button>
</div>
<div class="container signin">
<p>Already have an account?
<a href="login.php">Sign in</a>
</p>
</div>
</form>
</body>
</html>
Producción:
Crear tabla de base de datos de registrospara crear la tabla de base de datos de registros .
- Vaya a localhost/phpmyadmin.
- En la base de datos fir_info , haga clic en SQL.
- Escriba la siguiente consulta para crear la tabla de registro.
CREATE TABLE register(
uid int(10) AUTO_INCREMENT PRIMARY KEY,
firstname varchar(255),
lastname varchar(255),
username varchar(255),
dob date,
gender ENUM('male','female'),
email varchar(255),
mobileno varchar(255),
password varchar(50),
repeatpassword varchar(50)
);
Después de insertar la consulta, se puede ver el siguiente resultado en la base de datos.
La tabla de registro contiene 10 campos como se muestra en la imagen que se muestra a continuación.
Paso 6: Cree otro archivo llamado login.php. Los usuarios deben iniciar sesión ingresando su nombre de usuario y contraseña. Al hacer clic en el botón «Iniciar sesión», se llega al usuario a la página «registrarse» .
iniciar sesión.php
PHP
<?php
session_start(); // Session start
include("connect.php");
if(isset($_POST['b1']) && !empty($_POST['q1'])
&& !empty($_POST['q2'])) {
$q=mysqli_query($conn,
"select * from login where username = '"
. $_POST['q1'] . "' and userpassword = '"
. $_POST['q2'] ."'");
$num = mysqli_num_rows($q);
if($num > 0) {
$row = mysqli_fetch_array($q);
$_SESSION['sid'] = $row[0];
$_SESSION['sname'] = $row[1];
// URL Redirection to another page //
header("location:registerfir.php");
exit();
}
else {
echo"<hr> Sorry Wrong /Invalid Username or Password !<hr>";
}
}
// LOGOUT CODE
if(isset($_GET['todo']) && $_GET['todo']=="logout" ) {
session_unset();
// session_destroy();
}
?>
<html>
<head>
<title>Login Here</title>
<meta name="viewport" content=
"width=device-width",initial-scale=1>
<style>
body,html {
height:100%;
font-family:Arial, Helvetica, sans-serif;
background-color:#d3d3d3;
}
* {
box-sizing: border-box;
}
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration:0.4s;
cursor: pointer;
}
.button1{
background-color:#FFF;
color:#000;
border:2px solid #4caf50;
}
.button1 {
border-radius: 12px;
}
.button1:hover {
background-color:#4caf50;
color: white;
}
.bg-img {
/* The image used */
background-image: url("tn.jfif");
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
/* Full height */
height: 100%;
}
/* Add styles to the form container */
.container {
position: absolute;
right: 400px;
margin: 20px;
max-width: 650px;
padding: 16px;
background-color: white;
top: 74px;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
.top-left {
position: absolute;
top: 10px;
left: 570px;
width: 397px;
height: 47px;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<div class="bg-img">
<div class="top-left"> <h1>Rajasthan Police Service</h1> </div>
<form action="?" class="container" method="post">
<h1>Login</h1>
<p>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter username"
name="q1" id="q1" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter password"
name="q2" id="q2" required>
<p>
<button type="submit" class="btn" name="b1" id="b1">
Login</button>
</p>
<h4>
If you are not registerd and you want to complaint
against someone then click on Register</h4>
<button class="button button1"> <b>
<a href="register.php"> Register </a></b></button>
</form>
</div>
</form>
</body>
</html>
Producción:
Cree una tabla de base de datos de inicio de sesión para crear la tabla de base de datos de inicio de sesión.
- Vaya a localhost/phpmyadmin
- En la base de datos fir_info , haga clic en SQL
- Escriba la siguiente consulta para crear la tabla de inicio de sesión
CREATE TABLE login
(
uid int(10) AUTO_INCREMENT PRIMARY KEY,
username varchar(255),
userpassword varchar(255)
);
Después de insertar esta consulta, se puede ver el siguiente resultado en la base de datos.
La tabla de inicio de sesión contiene 3 campos como se muestra en la imagen que se muestra a continuación.
Paso 6: Cree otro archivo llamado registerfir.php y agregue el siguiente código.
Ahora el usuario puede presentar un caso de cualquier categoría, como objetos perdidos, fraude, violencia doméstica, otros , etc. Ahora el usuario tiene que ir al botón de «estado» que está disponible en la página «index.php».
registrarsefir.php
PHP
<?php
include("connect.php"); // connect to database
if (isset($_POST['b1']) && !empty($_POST['q1'])) {
$i = rand(10000,50000);
mysqli_query($conn,
"insert into fir set
name = '".$_POST['q1']."' ,
parent_name = '".$_POST['q2']."',
age = '".$_POST['q3']."',
address = '".$_POST['q4']."' ,
gender = '".$_POST['q5']."' ,
inc_datetime = '".$_POST['q6']."',
reg_datetime = '".$_POST['q7']."',
complaint = '".$_POST['q8']."',
section = '".$_POST['q9']."' ,
category = '".$_POST['q10']."' ,
qid2 = '".$i."'");
if (isset($_POST['b1']) && !empty($_POST['q1']))
{
echo
"<b>Your FIR registered Successfully<br>your FIR no is $i .
kindly remember this no for further assistance";
}
}
?>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="stylesheet" href="Login/css/firstat.css">
<meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Register your complaint</title>
<style type="text/css">
.registerform{
margin-top: 5%;
width:50vw;
max-width: 90vw;
}
.form-group{
margin: 2vw;
}
</style>
</head>
<body>
<h1 align="center" style="color:red;">
Register Your Complaint Here</h1>
<center>
<div class=" card registerform">
<form name="frm" action="?" method="post" align="center">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter name"
name="q1" id="q1">
</div>
<div class="form-group">
<label>Father/Mother name</label>
<input type="text" class="form-control"
placeholder="Enter name of father or mother" name="q2" id="q2">
</div>
<div class="form-group">
<label>Age</label>
<input type="number"class="form-control" placeholder="Enter Age"
name="q3" id="q3">
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" placeholder="Enter address"
name="q4" id="q4"></textarea>
</div>
<div class="form-group">
<label>Gender</label>
<input type="text" class="form-control" placeholder="Enter Gender"
name="q5" id="q5">
</div>
<div class="form-group">
<label>Date and time of incidence</label>
<input type="datetime-local" class="form-control"
placeholder="Enter date and time" name="q6" id="q6">
</div>
<div class="form-group">
<label>Date and time of registration</label>
<input type="datetime-local" class="form-control"
placeholder="Enter date and time" name="q7" id="q7">
</div>
<div class="form-group">
<label>Complaint</label>
<textarea type="text" class="form-control"
placeholder="Enter complaint"
name="q8" id="q8"></textarea>
</div>
<div class="form-group">
<label>Section</label>
<input type="text" class="form-control"
placeholder="section"
name="q9" id="q9">
</div>
<div class="form-group">
<label>Select Complaint Type</label>
<select class="form-control" name="q10" id="q10">
<option>Attempt to Murder</option>
<option>Theft </option>
<option>Domestic Violence </option>
<option>Lost and Found </option>
<option>Stolen Vehicle </option>
<option>Missing Person </option>
<option>Others </option>
</select>
</div>
<button class="btn btn-lg btn-warning" type="submit"
id="b1" name="b1">
Submit
</button>
</form>
</div>
</center>
</body>
</html>
Producción:
Crear tabla fir para crear la tabla de base de datos fir .
- Vaya a localhost/phpmyadmin
- En la base de datos fir_info , haga clic en SQL
- Escriba la siguiente consulta para crear la primera tabla
CREATE TABLE fir(
s_no int(10) AUTO_INCREMENT PRIMARY KEY,
name varchar(255),
parent_name varchar(255),
age int(10),
address varchar(255),
gender ENUM('male','female'),
inc_datetime datetime(6),
reg_datetime datetime(6),
complaint varchar(255),
section int(20),
category varchar(255),
qui1 varchar(255) DEFAULT 'RAJ/FIR/2021/',
qid2 int(10) UNIQUE,
status varchar(255),
information text
);
El siguiente resultado se ve en la base de datos.
La primera tabla contiene 15 campos, como se muestra en la imagen que se muestra a continuación.
Paso 7: Cree otro archivo llamado status.php y codifique las siguientes líneas.
Al hacer clic en el botón de estado, los usuarios deben ingresar su número de FIR en la barra de búsqueda para ver el estado de su caso (resuelto o pendiente u otra información).
estado.php
PHP
<?php
include("connect.php");
if(isset($_REQUEST['b1']) && !empty($_GET['q'])) {
$q = mysqli_query($conn,
"select * from fir where qid2 = '"
. $_GET['q']."' ");
$num = mysqli_num_rows($q);
if($num > 0) {
$row = mysqli_fetch_array($q);
?>
<div style="float:right;">
<a href="login.php?todo=logout"
style="color:#FFF"> Sign Out
</a>
</div>
<hr>
<?php
}
else
{
echo "Registration number not exist";
}
}
?>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body bgcolor="#8F8F8F">
<h2 style="text-align:center">
To Know Your complaint Status Write
Your FIR Number in Search Box
</h2>
<form name="frm1" action="?" method="get" align="center">
<input type="text" name="q" id="q">
<input type="submit" name="b1" value="Search Status" />
</form>
</body>
</html>
<?php
if(isset($row)) {
echo "<br>";
echo "FIR Logged by ----> ".$row[1];
echo "<br>";
echo "Fir Date ---->". $row[7];
echo "<br>";
echo "Your FIR Number was --->". $row[11].$row[12];
echo "<br>";
echo "Your FIR status is ---> ".$row[13];
echo "<br>";
echo "RESULT ---> " . $row[14];
}
?>
Producción:
Después de iniciar sesión, la base de datos se parece a la siguiente salida.
Después de la queja FIR, la base de datos tiene el siguiente aspecto.
Salida: para ejecutar la salida, debe ingresar «localhost/onlineFIR/ « en la barra de URL del navegador.
Enlace GitHub: https://github.com/bhartik021/onlineFIR
Publicación traducida automáticamente
Artículo escrito por bhartik021 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA