Adoption Management Dashboard

Home: Adoption Management System

A non-profit-making organization has an issue of listing their pets available for adoption in their website. The pets that are available for adoption will change often according to the organization. This means that they want the system to upload, update, delete and enter new animals. These actions should be linited to one person only. 

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

To come up with an adoption management system as a website designer, I will need notepad ++ editor to write the php code and Xammp database.

First the first file that is to be disgned is the home.php. This file checks lists the pets that are available for adoption. The page also provides a link to the one user log for update.  

<?php

$servername = “localhost”;

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

$username = “root”;

$password = “”;

$dbname = “register”;

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die(“Connection failed: ” . $conn->connect_error);

}

?>

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Home: Adoption Management System</title>

<style>

table, th, td {

    border: 1px solid black;

}

</style>

</head>

<body>

<div class=”form”>

<h1>Adoption Management Dashboard</h1>

<table>

<thead>

<tr><th><strong>Animal ID</strong</th><th><strong>Name</strong></th><th><strong>AnamilType</strong></th><th><strong>Adoption Fee</strong><th><strong>Sex</strong></th>

<th><strong>Desexed</strong></th></tr>

</thead>

<tbody>

<?php

$count=1;

$sel_query=”Select * from animals;”;

$result = mysqli_query($conn,$sel_query);

while($row = mysqli_fetch_assoc($result)) { ?>

<tr><td align=”center”><?php echo $count; ?></td>

<td align=”center”><?php echo $row[“Name”]; ?></td>

<td align=”center”><?php echo $row[“Animaltype”]; ?></td>

<td align=”center”><?php echo $row[“Adoptionfee”]; ?></td>

<td align=”center”><?php echo $row[“Sex”]; ?></td>

<td align=”center”><?php echo $row[“Desexed”]; ?></td>

<?php $count++; } ?>

</tbody>

</table>

<br /><br /><br /><br />

<hr>

<p><a href=”home.php”>Home</a> <a href=”login.php”>Login</a>  

</body>

</html>

By clicking login, the user is prompoted for username and password. The code for login is as shown below.

Login.php

<?php

 $servername = “localhost”;

$username = “root”;

$password = “”;

$dbname = “register”;

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die(“Connection failed: ” . $conn->connect_error);

}

  ob_start();

   session_start();

?>

<?php

   // error_reporting(E_ALL);

   // ini_set(“display_errors”, 1);

   if(isset($_POST[‘submit’]))

{

   if($fgmembersite->Login())

   {

        $fgmembersite->RedirectToURL(“view.php”);

   }

}

?>

<html lang = “en”>   

   <head>

      <title>Login: Adoption Management Dashboard</title>

   <style>

     font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */

input[type=text], input[type=password] {

    width: 100%;

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid #ccc;

    box-sizing: border-box;

}

/* Set a style for all buttons */

button {

    background-color: #4CAF50;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border: none;

    cursor: pointer;

 button:hover {

    opacity: 0.8;

 Extra styles for the cancel button */

.cancelbtn {

    width: auto;

    padding: 10px 18px;

 background-color: #f44336;

/* Center the image and position the close button */

.imgcontainer {

    text-align: center;

    margin: 24px 0 12px 0;

    position: relative;

img.avatar {

    width: 5%;

    border-radius: 10%;

.container {

    padding: 16px;

span.psw {

    float: right;

    padding-top: 16px;

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

Login: Adoption Management Dashboard

    padding-top: 60px;

/* Modal Content/Box */

.modal-content {

    background-color: #fefefe;

    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */

    border: 1px solid #888;

    width: 80%; /* Could be more or less, depending on screen size */

/* The Close Button (x) */

.close {

    position: absolute;

    right: 25px;

    top: 0;

    color: #000;

    font-size: 35px;

    font-weight: bold;

.close:hover,

.close:focus {

    color: red;

    cursor: pointer;

/* Add Zoom Animation */

.animate {

    -webkit-animation: animatezoom 0.6s;

    animation: animatezoom 0.6s

@-webkit-keyframes animatezoom {

    from {-webkit-transform: scale(0)}

    to {-webkit-transform: scale(1)}

@keyframes animatezoom {

    from {transform: scale(0)}

    to {transform: scale(1)}

/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {

    span.psw {

       display: block;

       float: none;

    .cancelbtn {

       width: 100%;

</style>

   </head>

   <body>      

      <h1 align= “center”> Adoption Management Dashboard</h1>

      <div class = “container form-signin”>        

         <?php

            $msg = ”;

             if (isset($_POST[‘login’]) && !empty($_POST[‘username’])

             && !empty($_POST[‘password’])) {

              if ($_POST[‘username’] == ‘sam’ &&

                  $_POST[‘password’] == ‘password’) {

                  $_SESSION[‘valid’] = true;

                  $_SESSION[‘timeout’] = time();

                  $_SESSION[‘username’] = ‘sam’;

                 header(“Location: view.php”);  

               }else {

                  $msg = ‘Wrong username or password’;

               }

            }

         ?>

      </div> <!– /container –>

      <div class = “container” align= “center”>

         <form class = “form-signin” role = “form”

            action = “<?php echo htmlspecialchars($_SERVER[‘PHP_SELF’]);

            ?>” method = “post” >

            <h4 class = “form-signin-heading”><?php echo $msg; ?></h4>

<div class=”container”>

<div class=”imgcontainer”>

<img data-src=”img_avatar2.png” alt=”Avatar” class=”avatar”>

    </div>

 <label for=”uname”><b>Username</b></label>

            <input type = “text” class = “form-control”

               name = “username” placeholder = “username”

               required autofocus></br>

   <label for=”psw”><b>Password</b></label>

            <input type = “password” class = “form-control”

               name = “password” placeholder = “password” required>

   </div>

            <p> <button class = “btn btn-lg btn-primary btn-block” type = “submit”

               name = “login”>Login</button> </p>

         </form> 

         <br /><br /><br /><br />

<hr>

<p><a href=”home.php”>Home</a>  | <a href=”logout.php”>Logout</a></p> 

      </div>  

   </body> 

After login the ony one user sam is can be opted to edit, delete, add animal and view animal records the php files for this  is as shown below 

Edit.php

<?php 

$servername = “localhost”;

$username = “root”;

$password = “”;

$dbname = “register”;

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die(“Connection failed: ” . $conn->connect_error);

}

$id=$_REQUEST[‘id’];

$query = “SELECT * from animals where id='”.$id.”‘”;

$result = mysqli_query($conn, $query) or die ( mysqli_error());

$row = mysqli_fetch_assoc($result);

?>

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Adoption management Dashboard</title>

<link rel=”stylesheet” href=”css/style.css” />

</head>

<body>

<div class=”form”>

<h4> Adoption Management Dashboard </h4>

<h1>Edit Animal</h1>

<?php

$status = “”;

if(isset($_POST[‘new’]) && $_POST[‘new’]==1)

{

$id=$_REQUEST[‘id’]; 

$Name = $_REQUEST[‘Name’];

$Animaltype =$_REQUEST[‘Animaltype’];

$Adoptionfee =$_REQUEST[‘Adoptionfee’];

$Sex =$_REQUEST[‘Sex’];

$Desexed =$_REQUEST[‘Desexed’];

$update=”update animals set Name= ‘”.$Name.”‘, Animaltype='”.$Animaltype.”‘, Adoptionfee='”.$Adoptionfee.”‘, Sex='”.$Sex.”‘, Desexed='”.$Desexed.”‘ where id='”.$id.”‘”;

mysqli_query($conn, $update); // or die(mysqli_error());

$status = “Record Updated Successfully. </br></br><a href=’view.php’>View Updated Record</a>”;

echo ‘<p style=”color:#FF0000;”>’.$status.'</p>’;

}else {

?>

<div>

<form name=”form” method=”post” action=””>

<input type=”hidden” name=”new” value=”1″ />

<input type=”hidden” name=”id”  value=”<?php echo $row[‘id’];?>” />

<p><input type=”Text” name=”Name”  placeholder=”Enter Name” value=”<?php echo $row[‘Name’];?>” /></p> 

<select name=”Animaltype” required >

      <option value=””> <?php echo $row[‘Animaltype’];?> </option> 

  <option value=”Dog”>Dog</option> 

  <option value=”Cow”>Cow</option> 

  <option value=”Rabbit”>Rabbit</option> 

  <option value=”Cat”>Cat</option> 

</select>

<p><input type=”text” name=”Adoptionfee” placeholder=”Adoption Fee” required value=”<?php echo $row[‘Adoptionfee’];?>” /></p>

<select name=”Sex” required >

      <option value=””> <?php echo $row[‘Sex’];?> </option>

  <option value=”M”>Male</option>

  <option value=”F”>Female</option> 

</select>

<p><input type=”text” name=”Desexed” placeholder=”Desexed” required value=”<?php echo $row[‘Desexed’];?>”/></p>  

<p><input name=”submit” type=”submit” value=”Update” /></p>

</form>

<?php } ?> 

<br /><br /><br /><br />

<hr>

<p><a href=”home.php”>Home</a> | <a href=”insert.php”>Add a new Animal </a> | <a href=”logout.php”>Logout</a></p>

</div>

</div>

</body>

</html>

Delete.php

<?php

$servername = “localhost”;

$username = “root”;

$password = “”;

$dbname = “register”;

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die(“Connection failed: ” . $conn->connect_error);

$id=$_REQUEST[‘id’];

$query = “DELETE FROM animals WHERE id=$id”;

$result = mysqli_query($conn,$query) or die ( mysqli_error());

header(“Location: view.php”);

?>

Add animal.php

<?php

$servername = “localhost”;

$username = “root”;

$password = “”;

$dbname = “register”;

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die(“Connection failed: ” . $conn->connect_error);

}

$status= “”;

if(isset($_POST[‘new’]) && $_POST[‘new’]==1)

{

$name =$_REQUEST[‘name’];

$Animaltype = $_REQUEST[‘Animaltype’];

$Adoptionfee = $_REQUEST[‘Adoptionfee’];

$Sex = $_REQUEST[‘Sex’];

$Desexed = $_REQUEST[‘Desexed’]; 

$sql=”insert into animals (Name,Animaltype,Adoptionfee,Sex,Desexed)values (‘$name’,’$Animaltype’,’$Adoptionfee’,’$Sex’,’$Desexed’)”; 

mysqli_query($conn,$sql);// die(mysql_error());

$status = “New Record Inserted Successfully.”;  

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Adoption Management Dashboard</title>

<link rel=”stylesheet” href=”css/style.css” />

</head>

<body>

<div class=”form”>

<p> Welcome, Sam </p>  

<div>

<h1>Add new Animal </h1>

<form name=”form” method=”post” action=””>

<input type=”hidden” name=”new” value=”1″ />

 <p> <input type=”text” name=”name” placeholder=”Enter Name” required /></p> 

 <p> <select name=”Animaltype” placeholder= ” $ Animaltype” required> 

   <option value= “”> Select Animal Type</option>

  <option value=”Dog”>Dog</option> 

  <option value=”Cow”>Cow</option> 

  <option value=”Rabbit”>Rabbit</option>

  <option value=”Cat”>Cat</option>

</select> </p>

  <p> <input type=”text” name=”Adoptionfee” placeholder=”Adoptionfee” required /> </p> 

 <p> <select name=”Sex” required>

       <option Value=””> Gender </option>

  <option value=”M”>Male</option> 

  <option value=”F”>Female</option> 

</select> </p>

 <input type=”text” name=”Desexed” placeholder=”Desexed” required />

<p><input name=”submit” type=”submit” value=”Submit” /></p>

</form>

<p style=”color:#FF0000;”><?php 

echo $status; ?></p>     

<br /><br /><br /><br />

<hr>

<p><a href=”home.php”>Home</a> | <a href=”view.php”>View Animals </a> | <a href=”logout.php”>Logout</a></p> 

</div>

</div>

</body>

</html> 

Log-out.php

<?php 

session_start();

if(session_destroy()) // Destroying All Sessions 

header(“Location: home.php”); // Redirecting To Home Page  

How to install the adoption management system

  1. The organization need to first install Xammp in their host server
  2. Open Xammp and then Import the file named register.sql (the attached file)
  3. Copy paste app the php files in the htdocs folder on the Xammp in Local disk C