Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Online FIR Web App using PHP with MySQL

  • Difficulty Level : Medium
  • Last Updated : 30 Nov, 2021

In this article, we are going to build an Online FIR Web Application using PHP with MySQL. In this application, we can file cases from anywhere by their name, complaint, status (pending or solved), and date of incidence, date of registration. Only the admin can view, delete and update status. A complete list of all cases can be seen by only the admin.  

Prerequisites: XAMPP Server, Basic Concepts of  HTML, CSS, Bootstrap, PHP, and MySQL

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

We will follow the following steps to build this application.

  • A website that would facilitate providing fast, secure, reliable information to the public.
  • This is a project using Visual Studio code editor, Notepad, Notepad++, Atom, Sublime and you can also use Adobe  Dreamweaver 2020 software.

Features of website: 



  • Online registration
  • Login to file a case
  • Check the status of your case

 

Step 1: First, we must have to start the XAMPP server from the XAMPP control panel.

Open XAMPP Control Panel and start Apache and MySQL services. In the XAMPP folder, go to htdocs folder and create a folder named OnlineFIR. We will keep all the files in the project folder. There are many files inside this folder but the main functioning files are login.php, connect.php, register.php, index.php, registerfir.php,status.php.

Step 2: Create Database

Go to localhost/phpMyAdmin and create a database called fir_info. Under that, make three tables called fir, login, register.  

Step 3: Open the editor of your choice. Create a file named connect.php for the database fir_info connection. The connection object is returned to the $conn variable. 

PHP




<?php
  $conn=mysqli_connect("localhost","root","");
  $db=mysqli_select_db($conn,"fir_info");
?>

 

Step 4: Create another file index.php



This page contains the hyperlink of all other pages such as status.php, login.php, gallery.php, aboutus.php. On clicking on these links user can perform actions.

index.php




<html>
  
<head>
    <link rel="stylesheet" href=
  
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
  
        div.b {
            position: absolute;
            top: 150px;
            border: none;
            width: 98%;
        }
  
        .btn {
            background-color: #DF0000;
            border: none;
            color: white;
            padding: 12px 16px;
            font-size: 16px;
            cursor: pointer;
            width: 19%;
        }
  
        /* Darker background on mouse-over */
        .btn:hover {
            background-color: #f22;
        }
  
        a {
            color: black;
            text-decoration: none;
        }
  
        .rightdiv {
            position: absolute;
            top: 50%;
            right: -15px;
            height: 130%;
        }
  
        div {
            padding: 1%;
            width: 20%;
            border: none;
            display: block;
            margin: 20px;
            font-size: 20px;
        }
  
        .element {
            width: 85%;
            background-color: #633;
        }
  
        .div1 {
            background-color: #ff9;
            width: 80%;
        }
  
        .div2 {
            background-color: #F66;
            width: 80%;
        }
  
        .div3 {
            background-color: #ff9;
            width: 80%;
        }
  
        .div4 {
            background-color: #F66;
            width: 80%;
        }
  
        .div5 {
            background-color: #ff9;
            width: 80%;
        }
  
        .div6 {
            background-color: #F66;
            width: 80%;
        }
  
        .div7 {
            background-color: #ff9;
            width: 80%;
        }
  
        .div8 {
            background-color: #F66;
            width: 80%;
        }
  
        .div9 {
            background-color: #ff9;
            width: 80%;
        }
  
        .div10 {
            background-color: #F66;
            width: 80%;
        }
  
        .div11 {
            background-color: #Ff9;
            width: 80%;
        }
  
        .div15 {
            border: 2px solid #1E1E1E;
        }
  
        .div16 {
            border: 2px solid #BCBCBC;
        }
    </style>
</head>
<title>Rajasthan Police</title>
  
<body background=
    <table width="100%" height="100%" border="0">
        <tr>
            <td width="15%" height="116">
                  
<p><img src=
                        width="131" height="103"></p>
  
                  
  
            </td>
            <td width="29%">
                <h1 style="color:#FFF">
                    Rajasthan Police Department 
                </h1>
                <b style="color:#FFF">
                    सेवार्थ कटिबद्धता
                </b><br>
            </td>
            <p></p>
  
            <td width="41%">
                <b style="color:red">
                Help Line No.:-112,100
                </b><br>
                <b style="color:red"
                    Tel phone no.-0774-7654321,
                </b>
                <b>+91-9887267798 </b> <br />
                <b style="color:red">
                    Email id:-cybercellrajasthanpolice@raj.gov.in
                </b>
                <br /><br />
                <b style="color:red"> Fax no.:-56789</b><br>
                <b style="color:red"
                    Toll free No.:-18002589999
                </b>
            </td>
            <td width="15%" height="116">
                <img src=
                    width="161" height="109">
            </td>
        </tr>
  
        <div class="b">
            <button class="btn">
                <i class="fa fa-home"></i>
                <a href="index.php">Home</a>
            </button>
            <button class="btn">
                <i class="fa fa-bars"></i>
                <a href="about us.php">About Us</a>
            </button>
            <button class="btn">
                <i class="fa fa-picture-o"></i>
                <a href="gallery.php">Photo Gallery</a>
            </button>
            <button class="btn">
                <i class="fa fa-search"></i>
                <a href="status.php">Status</a>
            </button>
            <button class="btn">
                <i class="fa fa-folder"></i>
                <a href="login.php">Complaint FIR</a>
                <td height="72">
            </button>
        </div>
  
  
        <div class="rightdiv">
            <h2 align="center" style="color:#EA0075">
                Public Information
            </h2>
            <div class="element">
                <div class="div1"
                    <a href="about us.php">About Us</a>
                </div>
                <div class="div2"
                    <a href="#">Corona Guidelines</a>
                </div>
                <div class="div3"
                    <a href="#">Crime statistics</a>
                </div>
                <div class="div4"
                    <a href="#">Citizen Services</a>
                </div>
                <div class="div5"
                    <a href="#">Pride of rajasthan</a>
                </div>
                <div class="div6"
                    <a href="faq.php">FAQ's</a>
                </div>
                <div class="div7"
                    <a href="#">The Acts and rules</a>
                </div>
                <div class="div8"
                    <a href="login.php">Register Your FIR here</a>
                </div>
                <div class="div9"
                    <a href="register.php">Registeration</a>
                </div>
                <div class="div10"
                    <a href="#">Important links</a>
                </div>
                <div class="div11"
                    <a href="#">Recruitment</a>
                </div>
            </div>
        </div>
        <br><br><br><br><br>
  
        <tr>
            <td height="98" colspan="4">
                <marquee bgcolor="yellow" behavior="alternate">
                    <b><i
                        Welcome To the Official Website 
                        of Rajasthan Police
                    </i></b>
                </marquee>
            </td>
        </tr>
        <tr>
            <td height="251"><img class="div15"
                    src=
                    width="153" height="154">
                <b style="color:#ff0000"><br>
                    Shri Ashok Gehlot
                </b><br>
                  
                <b>Hon'ble Chief Minister</b>
            </td>
  
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
  
        <tr>
            <td><img class="div16"
                    src=
                    width="153" height="154">
  
                <b>DGP(Director General of Police)</b>
            </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td height="43"> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td height="43"> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </table>
</body>
  
</html>

Output:

index page

Step 5: Create another file named “register.php” and add the code.

This page is created to insert the user’s information to the “register” table in the “fir_info” database. The HTML form contains the fields like firstname, lastname, username, email, gender, dob, mobileno, password, repeatpassword for the user entry. When a button is clicked, we include the file “connect.php” to connect the page with the database.

When the information is entered successfully in the “register” table, the user has to log in himself on going sign-in, a login page will appear and the page will move to login.php”.

register.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>

Output:



Create register database table for creating the register database table.

  • Go on localhost/phpmyadmin.
  • In fir_info database, click on SQL.
  • Write the following query to create the register table.
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)
);

After inserting the query, the following output can be seen in the database.

The register table contains 10 fields as shown in the picture given below.

Step 6: Create another file named login.php. Users have to log in by entering their username and password. On clicking the “Log in” button, the user is reached on the “registerfir” page.

login.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>

Output:



Create a login database table for creating the login database table.

  • Go on localhost/phpmyadmin
  • In fir_info database, click on SQL
  • Write the following query to create the login table
CREATE TABLE login
(
    uid int(10) AUTO_INCREMENT PRIMARY KEY,
    username varchar(255),
    userpassword varchar(255)
);

After inserting this query the following output can be seen in the database.

The login table contains 3 fields as shown in the picture given below.

Step 6: Create another file named registerfir.php and add the following code.

Now user can file a case of any category such as lost and found, fraud, domestic violence, others, etc.  Now the user has to go on the “status” button which is available on the “index.php” page.

registerfir.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=
      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 registeration</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 Vehical    </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>

Output:



Create fir table for creating the fir database table.

  • Go on localhost/phpmyadmin
  • In fir_info database, click on SQL
  • Write the following query to create the fir table
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
);

The following output is seen in the database.

The fir table contains 15 fields as shown in the picture given below.

Step 7:  Create another file named status.php and code the following lines.

By clicking on the status button, users have to enter their FIR number on the search bar to see their case status (solved or pending or other information).

status.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=
</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];
    }
?>

Output:



After Login, the database looks like the following output.

After complaint FIR, the database looks like the following.

Output: To run the output you have to enter “localhost/onlineFIR/ in the URL bar of the browser.

GitHub Link: https://github.com/bhartik021/onlineFIR




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!