Practical Guide 1
Practical Guide 1
Id int 11
Username varchar 30
Phone int 30.
Email varchar 50
Usertype varchar 50
Password varchar 50
…..Index Page……..
<?php
error_reporting(0);
session_start();
session_destroy();
if($_SESSION['summary'])
{
$summary=$_SESSION['summary'];
echo "<script type='text/javascript'>
alert('$summary');
</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Centralized Sales Database</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</style>
</head>
<body>
<nav>
<label class="logo">MINISTRY OF HEALTH</label>
<ul>
<li><a href="about.php" class="btn btn-primary">About Us</a></li>
<li><a href="contact.php" class="btn btn-primary">Contact Us</a></li>
<li><a href="login.php" class="btn btn-primary">Login</a></li>
</ul>
</nav>
<div class="section1">
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h1> </h1>
<p>
</div>
</div>
</div>
<center>
<h1>Daily Report Form</h1>
</center>
........About us page.....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="admin.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
p{
text-align: justify;
}
.logout
{
float: right;
padding-right: 20px;
padding-top: 15px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<nav>
<label class="logo"></label>
<div class="logout">
<a href="index.php" class="btn btn-primary">Home</a>
<a href="contact.php" class="btn btn-primary">Contact Us</a>
<a href="login.php" class="btn btn-primary">Login</a>
</div>
</nav>
<div class="section1">
<label class="img_text"> </label>
<img class="main_img" src=" ">
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="welcome_img" src=" ">
</div>
<div class="col-md-8">
<h1> </h1>
<p>
kkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</p>
</div>
</div>
</div>
<?php
include 'footer.php';
?>
</body>
</html>
……………Admin Css……………………………….
*
{
margin: 0px;
padding: 0px;
}
.header
{
background-color: blue;
line-height: 70px;
padding-left: 30px;
}
a, a:hover
{
text-decoration: none!important;
}
.logout
{
float: right;
padding-right: 30px;
}
ul
{
background-color: #424a5b;
width: 20%;
height: 100%;
position: fixed;
padding-top: 5%;
text-align: center;
}
ul li
{
list-style: none;
padding-bottom: 30px;
font-size: 15px;
}
ul li a
{
color: white;
font-weight: bold;
}
ul li a:hover
{
color: blue;
text-decoration: none;
}
.content
{
margin-left: 22%;
margin-top: 3%;
}
.txt
{
text-align: center;
}
……………………….Style Css…………………………
*
{
padding: 0;
margin: 0;
}
nav
{
position: fixed;
background-color: skyblue;
height: 70px;
width: 100%;
z-index: 1;
}
.logo
{
font-size: 25px;
color: white;
font-weight: bold;
line-height: 70px;
}
ul
{
position: relative;
float: right;
margin-right: 20px;
}
ul li
{
display: inline-block;
line-height: 70px;
margin: 0 5px;
}
ul li a
{
text-decoration: none;
color: white;
font-size: 17px;
}
.main_img
{
width: 100%;
height: 300px;
}
.section1
{
padding-top: 70px;
}
.img_text
{
position: absolute;
top: 20%;
left: 30%;
color: white;
background-color: midnightblue;
padding-right: 20px;
padding-left: 20px;
font-size: 35px;
}
.welcome_img
{
width: 100%;
height: 300px;
}
.container
{
padding-top: 70px;
}
.hospitals_img
{
width: 90%;
height: 200px;
}
footer
{
background-color: blue;
height: 70px;
width: 100%;
}
.footer_text
{
text-align: center;
color: white;
top: 20%;
position: relative;
}
.form_deg
{
padding-top: 200px;
}
.label_deg
{
display: inline-block;
color: blue;
width: 100px;
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
}
.login_form
{
background-color: green;
width: 400px;
padding-top: 70px;
padding-bottom: 70px;
}
.title_deg
{
background-color: blue;
color: white;
text-align: center;
font-weight: bold;
width: 400px;
padding-top: 70px;
padding-bottom: 70px;
font-size: 20px;
}
.body_deg
{
background-attachment: fixed;
background-size: 100% 100%;
}
.label_text
{
display: inline-block;
width: 100px;
text-align: right;
padding-right: 10px;
}
.input_deg
{
width: 30%;
height: 40px;
border-radius: 25px;
border: 1px solid blue;
}
.daily_int
{
padding-top: 10px;
}
.input_txt
{
width: 30%;
height: 120px;
border-radius: 25px;
border: 1px solid blue;
}
#Submit
{
position: relative;
width: 15%;
left: 5%;
}
………………Admin Page…………………
<?php
session_start();
if (!isset($_SESSION['username']))
{
header("location:login.php");
}
elseif ($_SESSION['usertype']=='staff')
{
header("location:login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Dashboard</title>
<link rel="stylesheet" type="text/css" href="admin.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.content
{
margin-left: 22%;
margin-top: 3%;
}
.main_img
{
width: 100%;
height: 500px;
}
p{
text-align: justify;
}
</style>
</head>
<body>
<?php
include 'admin_sidebar.php';
?>
<div>
<h1 class="txt">Admin Dashboard</h1>
<p>
This is the dashboard where the system admin will view all the all the data in the
system.
</p>
<div>
<div>
<div>
<img class="main_img" src="">
<p>
</p>
<p>
</p>
</div>
</div>
<?php
include 'footer.php';
?>
</body>
</html>
…. Login Form……………….
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body background=" " class="body_deg">
<center>
<div class="form_deg">
<center class="title_deg">
Login Form
<h4>
<?php
error_reporting(0);
session_start();
session_destroy();
echo $_SESSION['loginMessage'];
?>
</h4>
</center>
<form action="login_check.php" method="Post" class="login_form">
<div>
<label class="label_deg">Username</label>
<input type="text" name="username">
</div>
<div>
<label class="label_deg">Password</label>
<input type="password" name="password">
</div>
<div>
<input class="btn btn-primary" type="submit" name="submit" value="Login">
</div>
</form>
</div>
</center>
<?php
include 'footer.php';
?>
</body>
</html>
…………..Logout……………..
<?php
session_start();
session_destroy();
header("location:login.php");
?>
………….Login Check……………..
<?php
error_reporting(0);
session_start();
$host="localhost";
$user="root";
$password="";
$db=" Your project name";
$data=mysqli_connect($host,$user,$password,$db);
if ($data===false)
{
die("connection error");
}
if ($_SERVER["REQUEST_METHOD"]=="POST")
{
$name = $_POST['username'];
$pass = $_POST['password'];
$sql="select * from User where username='".$name."' AND password='".$pass."' ";
$result=mysqli_query($data,$sql);
$row=mysqli_fetch_array($result);
if ($row["usertype"]=="staff")
{
$_SESSION['username']=$name;
$_SESSION['usertype']="staff";
header("location:staffhome.php");
}
elseif ($row["usertype"]=="admin")
{
$_SESSION['username']=$name;
$_SESSION['usertype']="admin";
header("location:adminhome.php");
}
else
{
$message= "username or password do not match";
$_SESSION['loginMessage']=$message;
header("location:login.php");
}
}
?>
……………Admin sidebar………………………
<!DOCTYPE html>
<html>
<head>
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.sidenav {
height: 100%;
margin-top:50px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: skyblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: whitesmoke;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.h:hover
{
color:white;
width:300px;
height:50px;
background-color:#6db6b9e6;
}
.container
{
height:600px;
background-color: #004528;
opacity:.8;
color:white;
text-align:center;
}
.scroll
{
width:100%;
height:600px;
overflow: auto;
}
</style>
</head>
<body>
<header class="header">
<a href="">Admin Dashboard</a>
<div class="logout">
<a href="about.php">About Us</a>
<a href="contact.php">Contact Us</a>
<a href="logout.php" class="btn btn-primary">Logout</a>
</div>
</header>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
……………Staff sidebar……………………..
<!DOCTYPE html>
<html>
<head>
<title>Staff Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.sidenav {
height: 100%;
margin-top:50px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: blue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: whitesmoke;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.h:hover
{
color:white;
width:300px;
height:50px;
background-color:#6db6b9e6;
}
.container
{
height:600px;
background-color: #004528;
opacity:.8;
color:white;
text-align:center;
}
.scroll
{
width:100%;
height:600px;
overflow: auto;
}
</style>
</head>
<body>
<header class="header">
<a href=""> Staff Dashboard</a>
<div class="logout">
<a href="about.php">About Us</a>
<a href="contact.php">Contact Us</a>
<a href="logout.php" class="btn btn-primary">Logout</a>
</div>
</header>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
<div class="h"><a href=".php"> </a></div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
……………….Footer……………………………..
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style type="text/css">
footer
{
background-color: blue;
height: 200px;
width: 1361;
}
.footer_text
{
text-align: center;
color: white;
top: 20%;
position: relative;
}
.fa
{
margin:0px 5px;
padding:5px;
font-size:20px;
width:35px;
height:35px;
text-align:center;
text-decoration:none;
border-radius:20%;
}
.fa:hover
{
opacity: .7;
}
.fa-facebook
{
background:#3B5998;
color:white;
}
.fa-twitter
{
background:#55ACEE;
color:white;
}
.fa-google
{
background:#dd4b39;
color:white;
}
.fa-instagram
{
background:#125688;
color:white;
}
.fa-yahoo
{
background:#400297;
color:white;
}
</style>
</head>
<body>
<footer "background-color:blue;">
<h2 class="footer_text">All @Copyrights Reserved By The Ministry Of Health South Sudan
2023</h2><br><br>
<div style="margin:0px 550px;text-align:center;">
<a href="https://facebook.com" class="fa fa-facebook"></a>
<a href="https://twitter.com" class="fa fa-twitter"></a>
<a href="https://google.com" class="fa fa-google"></a>
<a href="https://instagram.com" class="fa fa-instagram"></a>
<a href="https://yahoo.com" class="fa fa-yahoo"></a>
</div><br>
<p style="color:white;text-align:center;">
Email:  [email protected] <br>
Mobile:    +211 000 000 000
</p>
</footer>
</body>
</html>
…………………….