Scribd
Upload
10 views67 pages

User Registration and Login System

This document contains code for user registration and login pages of a website. The registration page code allows a user to enter their username, email, password, profile photo and submit the form via AJAX to a registration PHP file. The registration PHP file validates the inputs and inserts them into a database if valid. The login page code contains a form to enter username and password. On submit, an AJAX call is made to a login PHP file. This file validates the credentials and returns a response to redirect to either the home or login page.

Uploaded by

Vetri M Konar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views67 pages

User Registration and Login System

This document contains code for user registration and login pages of a website. The registration page code allows a user to enter their username, email, password, profile photo and submit the form via AJAX to a registration PHP file. The registration PHP file validates the inputs and inserts them into a database if valid. The login page code contains a form to enter username and password. On submit, an AJAX call is made to a login PHP file. This file validates the credentials and returns a response to redirect to either the home or login page.

Uploaded by

Vetri M Konar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

REGISTRATION PAGE

CODE
[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
</head>
<body>
<div>
<header>
<div>
<?php include("[Link]"); ?>
</div>
</header>
<h2 align="center">Create User Account</h2>
<span id="suc" style="font-size:20px;"></span>
<div id="register" align="center">
<form id="registerform" method="post"
enctype="multipart/form-data">
<image src="[Link]
[Link]/assets/img/avatar/[Link]" alt="Profile" width="80" height="80"
id="imgpreview" style="border-radius:50%;"/><br>
Profile:<input type="file" id="image"
onchange="imagePreview(this);" name="image" style="background-color:grey;"/><br>
Username:<input type="text" name="un" id="un"
autocomplete="on"/><br>
<br>
Email:<input type="text" name="em" id="em"
autocomplete="on"/><br>
Password:<input type="password" name="pw"
id="pw" autocomplete="on"/><br>
Confirm Password:<input type="password"
name="cpw" id="cpwd" autocomplete="on"/><br>
<input type="submit" value="signup"
name="rgster"/>
</form>
</div>
</div>
</body>
</html>
<script>
function imagePreview(input){
if([Link] && [Link][0]){
var filerd = new FileReader();
[Link]=function(e){
$("#imgpreview").attr("src",[Link])
};
[Link]([Link][0]);
}
};
$(document).ready(function(){
$('#registerform').on('submit',function(e){
[Link]();
var formData = new FormData($("#registerform")[0]);
$.ajax({
url:"[Link]",
method:"POST",
data:formData,
contentType:false,
processData:false,
success:function(data)
{
$('#suc').html(data);
}
})
$('#imgpreview').attr("src","[Link]
[Link]/assets/img/avatar/[Link]");
[Link]();
});
});
</script>

[Link]
<html>
<head></head>
<body>
<?php
try{
$un=$_POST['un'];
$em=$_POST['em'];
$pw=$_POST['pw'];
$cpwd=$_POST['cpw'];
$file=$_FILES["image"]["tmp_name"];
if($file!=""){
$file=addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
}
$sp=true;
if(!filter_var($em,FILTER_VALIDATE_EMAIL)){
echo "<p style='color:red;text-align:center;'>**Invalid Email Format</p>";
}
if(preg_match('/[\s]/',$un) || preg_match('/[\s]/',$pw)){
$sp=false;
echo "<p style='color:red;text-align:center;'>**Space are not allowed in
username or password</p>";
}
if(preg_match('/[$#!%?]/',$un)){
$sp=false;
echo "<p style='color:red;text-align:center;'>**Special character are not
allowed in username or password</p>";
}
if($un=="" && $pw=="" && $cpwd=="" && $file==""){
echo "<p style='color:red;text-align:center;'>**All fields are required</p>";
}
if($un!="" && $pw==""){
echo "<p style='color:red;text-align:center;'>**Please Enter Password</p>";
}
if($un=="" && $pw!=""){
echo "<p style='color:red;text-align:center;'>**Please Enter
Username</p>";
}
if($pw!=$cpwd){
echo "<p style='color:red;text-align:center;'>**Password confirmation is
not matching</p>";
}
if($un!="" && $pw!="" && $cpwd!="" && $file!="" && $pw==$cpwd &&
$sp==true){
$conn=mysqli_connect("localhost","root","","opinio");
$sql="INSERT INTO `registration`(`username`,`profile`,`email`,`password`)
VALUES('$un','$file','$em','$pw');";
if(!mysqli_query($conn,$sql)){
echo "<p style='color:red;text-align:center'>record not
inserted</p>";
}
else{
echo "<p style='color:green;text-align:center'>Registered
Successfully</p>";
}
mysqli_close($conn);
}
}
catch(Exception $e){
echo $e;
}
?>
</body>
</html>

LOGIN AS PAGE
CODE
[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<div class="login-as">
<button id="admin-login"><a href="[Link]">MEDIA HOUSE
LOGIN</a></button>
<button id="user-login"><a href="[Link]">USER LOGIN</a></button>
</div>
</body>
</html>

USER LOGIN PAGE


[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<script>
function ajax_post(){
var ajax=new XMLHttpRequest();
var method="POST";
var url="[Link]";
var asycchronous=true;
[Link](method,url,asycchronous);
var un=[Link]("un").value;
var pwd=[Link]("pw").value;
var form="login";
var vars="un="+un+"&pwd="+pwd+"&form="+form;
[Link]("Content-type","application/x-www-
form-urlencoded");
[Link]=function(){
if([Link]==4 && [Link]==200){
var result=[Link];
if(result=="Y"){
[Link]="[Link]";
result="";
}
if(result=="N"){
[Link]="[Link]";
}
else{
[Link]("dp").innerHTML=result;
}
}

}
[Link](vars);
[Link]("un").value="";
[Link]("pw").value="";
}
</script>
</head>
<body>
<div>
<header>
<div>
<?php include("[Link]"); ?>
</div>
</header>
<h2 align="center" style="font-size:30px">Login</h2>
<span id="dp" style="color:red;margin-left:250px;"></span>
<div id="register" align="center">
Username:<input type="text" name="nm"
id="un"/><br>
Password:<input type="password" name="pw"
id="pw"/><br>
<input type="submit" value="Login" id="login"
onclick="javascript:ajax_post();">
</div>
</div>
</body>
</html>

[Link]
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
session_start();
$un=$_REQUEST['un'];
$pwd=$_REQUEST['pwd'];
if($un=="" && $pwd==""){
echo "<p style='color:red;text-align:center;'>**All fields are required</p>";
}
if($un!="" && $pwd==""){
echo "<p style='color:red;text-align:center;'>**Please Enter Password</p>";
}
if($un=="" && $pwd!=""){
echo "<p style='color:red;text-align:center;'>**Please Enter
Username</p>";
}
if($un!="" && $pwd!=""){
$conn=mysqli_connect("localhost","root","","opinio");
$q='select * from `registration` where `username`="'.$un.'" and
`password`="'.$pwd.'"';
$r=mysqli_query($conn,$q);
$row=mysqli_fetch_assoc($r);
if(mysqli_num_rows($r)==1){
$_SESSION['una']=$un;
$_SESSION['pwd']=$pwd;
$_SESSION['uid']=$row['id'];
echo "Y";
}
else{
echo "<p style='color:red;text-align:center;'>**your password and
user name doesn't match</p>";
}
mysqli_close($conn);
}
}
else{
header("location:[Link]");
}
?>

MEDIA HOUSE LOGIN PAGE

[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
<script>
function ajax_post(){
var ajax=new XMLHttpRequest();
var method="POST";
var url="[Link]";
var asycchronous=true;
[Link](method,url,asycchronous);
var un=[Link]("un").value;
var pwd=[Link]("pw").value;
var form="login";
var vars="un="+un+"&pw="+pwd+"&form="+form;
[Link]("Content-type","application/x-www-
form-urlencoded");
[Link]=function(){
if([Link]==4 && [Link]==200){
var result=[Link];
if(result=="Y"){

[Link]="[Link]";
result="";
}
if(result=="N"){
[Link]="[Link]";
}
else{

[Link]("dp").innerHTML=result;
}
}

}
[Link](vars);
[Link]("un").value="";
[Link]("pw").value="";
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

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;
}
button:hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.container {
padding: 16px;
}

[Link] {
float: right;
padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens
*/
@media screen and (max-width: 300px) {
[Link] {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<span id="dp" style="color:red;margin-left:250px;"></span>
<i><b><h2 align="center" style="border-radius:5px;font-size:50px;">MEDIA HOUSE
LOGIN</h2></b></i>
<div class="container">
<label for="uname" style="color:white;"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="un" id="un"
required>
<label for="psw" style="color:white;"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw"
id="pw" required>
<button type="submit" id="adlogin" style="background-color:green;"
onclick="javascript:ajax_post();">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</body>
</html>

[Link]
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
session_start();
$un=$_REQUEST['un'];
$pwd=$_REQUEST['pw'];
$_SESSION['adm']="suriya";
$_SESSION['adpw']="suriyacs";
if($un=="" && $pwd==""){
echo "<p style='color:red;text-align:center;'>**All fields are required</p>";
}
if($un!="" && $pwd==""){
echo "<p style='color:red;text-align:center;'>**Please Enter Password</p>";
}
if($un=="" && $pwd!=""){
echo "<p style='color:red;text-align:center;'>**Please Enter
Username</p>";
}
if($un!="" && $pwd!=""){
$conn=mysqli_connect("localhost","root","","opinio");
$q='select * from `admin` where `adname`="'.$un.'" and `password`="'.
$pwd.'"';
$r=mysqli_query($conn,$q);
$row=mysqli_fetch_assoc($r);
if(mysqli_num_rows($r)==1){
$_SESSION['una']=$un;
$_SESSION['pwd']=$pwd;
$_SESSION['uid']=$row['adid'];
echo "Y";
}
else{
echo "<p style='color:red;text-align:center;'>**your password and
user name doesn't match</p>";
}
mysqli_close($conn);
}
}
else{
header("location:[Link]");
}
?>

MEDIA HOUSE REGISTRATION PAGE

[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
}
{
box-sizing: border-box;
}

/* Add padding to containers */


.container {
padding: 16px;
background-color: white;
}

/* Full-width input fields */


input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background-color:lightgrey ;
}
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:green;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
opacity: 1.0;

.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: tomato;
text-align: center;
}
</style>
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<form id="registerform">
<div class="container">
<span id="suc" style="font-size:20px;"></span>
<i> <h1 align=center style="border-style:solid;
border-width:medium;
border-radius:5px;
font-size: 50px;
background-color:CadetBlue;"><B> ADMIN REGISTRATION</B></h1>
<hr></i>
<label for="username"><b>ADMIN USERNAME</b></label>
<input type="text" placeholder="USERNAME" required name="un">
<label for="email"><b>Email ID</b></label>
<input type="text" placeholder="Enter Email" name="em" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>


<input type="password" placeholder="Repeat Password" name="cpw" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>

<button type="submit" class="registerbtn">Register</button>


</div>

<div class="container signin">


<p>Already have an account? <a href="[Link]">Sign in</a>.</p>
</div>
</form>
</body>
</html>
<script>
$(document).ready(function(){
$('#registerform').on('submit',function(e){
[Link]();
var formData = new FormData($("#registerform")[0]);
$.ajax({
url:"[Link]",
method:"POST",
data:formData,
contentType:false,
processData:false,
success:function(data)
{
$('#suc').html(data);
}
})
});
});
</script>

[Link]
<html>
<head></head>
<body>
<?php
try{
$un=$_POST['un'];
$em=$_POST['em'];
$pw=$_POST['pw'];
$cpwd=$_POST['cpw'];
if(preg_match('/[\s]/',$un) || preg_match('/[\s]/',$pw)){
$sp=false;
echo "<p style='color:red;text-align:center;'>**Space are not allowed in
username or password</p>";
}
if($un=="" && $pw=="" && $cpwd=="" && $file==""){
echo "<p style='color:red;text-align:center;'>**All fields are required</p>";
}
if(!filter_var($em,FILTER_VALIDATE_EMAIL)){
echo "<p style='color:red;text-align:center;'>**Invalid Email Format</p>";
}
if(preg_match('/[$#!%?]/',$un)){
$sp=false;
echo "<p style='color:red;text-align:center;'>**Special character are not
allowed in username or password</p>";
}
if($un!="" && $pw==""){
echo "<p style='color:red;text-align:center;'>**Please Enter Password</p>";
}
if($un=="" && $pw!=""){
echo "<p style='color:red;text-align:center;'>**Please Enter
Username</p>";
}
if($pw!=$cpwd){
echo "<p style='color:red;text-align:center;'>**Password confirmation is
not matching</p>";
}
if($un!="" && $pw!="" && $cpwd!="" && $pw==$cpwd){
$conn=mysqli_connect("localhost","root","","opinio");
$sql="INSERT INTO `admin`(`adname`,`ademail`,`password`)
VALUES('$un','$em','$pw');";
if(!mysqli_query($conn,$sql)){
echo "<p style='color:red;text-align:center'>record not
inserted</p>";
}
else{
echo "<p style='color:green;text-align:center'>Registered
Successfully</p>";
}
mysqli_close($conn);
}
}
catch(Exception $e){
echo $e;
}
?>
</body>
</html>

MEDIA HOUSE HOME PAGE


[Link]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<link rel="stylesheet" type="text/css" href="admin_home1.css">
<link rel="stylesheet" type="text/css" href="admin_home2.css">
<link rel="stylesheet" type="text/css" href="[Link]">
<div>
<?php include("[Link]"); ?>
</div>
</head>
<body>
<table border=0px style="border-spacing:4px;">
<tr>
<td>
<div class="w3-container">
<a href="deb_detail.html" class="button"
style="vertical-align:middle"><span>CREATE DEBATE</span></a>
</div>
</td>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>ADVERTISEMENT </span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>UPDATE DEBATE</span></a>
</div>
</td>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>PAYMENT</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>REMOVE DEBATE</span></a>
</div>
</td>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>MODERATOR</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>VIEW REPORT</span></a>
</div>
</td>
<td>
<div class="w3-container">
<a
href="[Link]
class="button" style="vertical-align:middle"><span>REMOVE USER</span></a>
</div>
</td>
</tr>
</TABLE>
</body>
</html>
DEBATE JOINING PAGE
deb_join.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<div class="search-box">
<input type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fa fa-search" style="font-size:30px"></i>
</a>
</div>
<div class="join-table">
<form method="POST">
<span id="display_joins"></span>
</form>
</div>
</body>
</html>
<script>
load_joins();
function load_joins()
{
$.ajax({
url:"display_join.php",
method:"POST",
success:function(data)
{
if(data=="0"){
$('#display_joins').html(data);
}
}
})
}
</script>

display_join.php
<html>
<head><script
src="[Link]
<body>
<?php
try{
session_start();
$conn=mysqli_connect("localhost","root","","opinio");
$una=$_SESSION['una'];
$pwd=$_SESSION['pwd'];
$sql='SELECT * FROM deb_detail ORDER BY dbcreated DESC';
$result=mysqli_query($conn,$sql);
$sql1='select * from `registration` where `username`="'.$una.'" and `password`="'.
$pwd.'"';
$result2=mysqli_query($conn,$sql1);
$row1=mysqli_fetch_assoc($result2);
$uid=$row1['id'];
$sql2='SELECT * FROM `deb_join` where `uid`="'.$uid.'"';
$result3=mysqli_query($conn,$sql2);
echo "<form>";
echo "<table border='2'>";
echo "<tr>";
echo "<th width='100' height='50' colspan='4'>JOIN YOUR DEBATE</th>";
echo "</tr>";
while($row=mysqli_fetch_assoc($result)){
echo "<tr>";
echo "<td width='100' height='50'><img
src='data:image/jpeg;base64,".base64_encode($row['image'])."' width='100'
height='100'/></td>";
echo "<td width='300' height='50'>".$row['dbtopic']."</td>";
echo "<td width='100' height='50'><button value=".$row['debateid']."
name='dbidp' id=".$row['debateid']." style='width:140px;height:30px;background-
color:green;'>JOIN As Pro</button></td>";
echo "<td width='100' height='50'><button value=".$row['debateid']."
name='dbida' id=".$row['debateid']." style='width:140px;height:30px;background-
color:red;'>JOIN As Againsts</button></td>";
echo "</tr>";
}
echo "<span id='message'></span>";
echo "</table>";
echo "</form>";
mysqli_close($conn);
}
catch(Exception $e){
echo $e;
}
?>
</body>
</html>
<script>
$(document).ready(function(){
$("button").on("click",function(){
var x=[Link];
var x2=[Link];
var data={};
data[x2]=$("#"+[Link]).val();
if(x=="si"){
[Link]="[Link]";
}
else{
$.ajax({
url:"deb_join.php",
method:"POST",
data:data,
dataType:"text",
success:function(data)
{
if(data=="JOINED"){
$("button[id='"+x+"']
[name='"+x2+"']").html("JOINED");
}
else{
$("button[id='"+x+"']
[name='"+x2+"']").html("AJOINED");
}
}
});
return false;
}
});
});
</script>

deb_join.php
<?php
try{
session_start();
$conn=mysqli_connect("localhost","root","","opinio");
if(isset($_POST['dbidp'])){
$dbid=$_POST['dbidp'];
$jas='1';
}
else{
$dbid=$_POST['dbida'];
$jas='0';
}
$una=$_SESSION['una'];
$pwd=$_SESSION['pwd'];
$sql1='select * from `registration` where `username`="'.$una.'" and `password`="'.
$pwd.'"';
$result=mysqli_query($conn,$sql1);
$row=mysqli_fetch_assoc($result);
$uid=$row['id'];
$sql="INSERT INTO `deb_join`(`uid`,`debid`,`joinedas`)
VALUES('$uid','$dbid','$jas');";
/*$sql2='SELECT * FROM `deb_join` where `uid`="'.$uid.'" and `debid`="'.
$dbid.'"';*/
if(mysqli_query($conn,$sql)){
echo "JOINED";
}
else{
echo "AJOINED";
}
mysqli_close($conn);

}
catch(Exception $e){
echo $e;
}
?>
DEBATE JOINED PAGE
deb_joined.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<div class="search-box">
<input type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fa fa-search" style="font-size:30px"></i>
</a>
</div>
<div class="join-table">
<form method="POST">
<span id="display_joins"></span>
</form>
</div>
</body>
</html>
<script>
load_joins();
function load_joins()
{
$.ajax({
url:"display_joined.php",
method:"POST",
success:function(data)
{
$('#display_joins').html(data);
}
})
}
</script>
deb_joined.php
<html>
<head><script
src="[Link]
<body>
<?php
try{
$conn=mysqli_connect("localhost","root","","opinio");
$sql='SELECT * FROM deb_detail ORDER BY dbcreated DESC';
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_assoc($result);
echo "<form id='form_join' method='POST' id='join_form'>";
echo "<table border='2'>";
echo "<tr>";
echo "<th width='100' height='50' colspan='3'>JOIN YOUR DEBATE</th>";
echo "</tr>";
while($row=mysqli_fetch_assoc($result)){
echo "<tr>";
echo "<td width='100' height='50'><img
src='data:image/jpeg;base64,".base64_encode($row['image'])."' width='100'
height='100'/></td>";
echo "<td width='300' height='50'>".$row['dbtopic']."</td>";
echo "<td width='100' height='50'><button value=".$row['debateid']."
name='dbid' id=".$row['debateid']." style='width:60px;height:20px;'>START
DEBATE</button></td>";
echo "</tr>";
}
echo "<span id='message'></span>";
echo "</table>";
echo "</form>";
mysqli_close($conn);
}
catch(Exception $e){
echo $e;
}
?>
</body>
</html>
<script>
$(document).ready(function(){
$('#form_join').on('submit',function(e){
[Link]();
$("button").one("click",function(){
var x=[Link];
$.ajax({
url:"deb_join.php",
method:"POST",
async:false,
data:{dbid:($("#"+[Link]).val())},
dataType:"text",
success:function(data)
{
if(data=="JOINED"){
$("#"+x).html("JOINED");
}
else{
$("#"+x).html("JOINED");
}
}
});
});
});
});
</script>

DEBATING PAGE
[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<script
src="[Link]
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<table border="1" align="center">
<tr colspan="3">
<td><textarea rows="20" cols="40" name="Point"
placeholder="TOPIC"></textarea></td>
<td align="center">
<form id="comment_form" method="POST">
Add Your Point:<textarea rows="20" cols="40" name="Point"
id="Point" style="resize:none;"></textarea><br>
<br>
<input type="submit" value="Post!" id="submit"/><br>
</form>
</td>
<td width="500" height="100"><span id="comment_message"><textarea
rows="25" cols="50" name="Point" placeholder="CHAT"></textarea></span></td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('#comment_form').on('submit',function(e){
[Link]();
var form_data = $(this).serialize();
$.ajax({
url:"[Link]",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if([Link]!='')
{
$('#comment_form')[0].reset();
$
('#comment_message').html([Link]);
}
}
})
});
setInterval(function(){
load_comment();},1000);
function load_comment()
{
$.ajax({
url:"display_comment.php",
method:"POST",
success:function(data)
{
$('#comment_message').html(data);
}
})
}
});
</script>

[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<script
src="[Link]
</head>
<body>
<div>
<?php include("[Link]");
$_SESSION['did']=$_POST['dbid'];
$dbid=$_POST['dbid'];
$conn=mysqli_connect("localhost","root","","opinio");
$sql="SELECT * FROM deb_detail where debateid=".$dbid;
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_assoc($result);
?>
</div>
<table border="1" align="center">
<tr colspan="3" rowspan="2">
<td width="300">
<figure>
<figcaption>
<center><span style="font-
size:18px;color:white;">Valid till:&nbsp;<?php echo
date('Y:m:d',strtotime($row['dbcreated'])); ?
>&nbsp;&nbsp;TO</span>&nbsp;&nbsp;<span id="predate" style="font-
size:18px;color:white;"><?php echo $row['valid_till']; ?></span></center>
</figcaption>
<img src="data:image/jpeg;base64,<?php echo
base64_encode($row['image']); ?>" width="300" height="450">
<figcaption>
<center><span id="txtpre" style="font-
size:30px;color:white;"><?php echo $row['dbtopic']; ?></span></center>
</figcaption>
</figure>
</td>
<td align="center" rowspan="2">
<form id="comment_form" method="POST">
<span id="did" style="display:none;"><?php echo
$_POST['dbid']; ?></span>
<input type="text" value=<?php echo $_POST['dbid']; ?>
name="dbid" style="display:none;">
<span style="color:white;">Add Your Point:</span><textarea
rows="30" cols="50" name="Point" id="Point"></textarea><br>
<br>
<input type="submit" value="Post!" id="submit"/><br>
</form>
</td>
<td>
<table border="1">
<tr style="background-color:#BC8F8F;">
<td align="center" style="color:#90EE90;"
width="200px">PROS</td>
<td align="center" style="color:#FFA07A;"
width="200px">AGAINST</td>
</tr>
<tr>
<th width="600" height="550" colspan="2"
style="background-color:#FAFAD2;">
<div class="chatbox">
<div class="chatlogs">
<div class ="chat friend">
<span
id="comment_message"></span>
</div>
</div>
</div>
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('#comment_form').on('submit',function(e){
[Link]();
var form_data = $(this).serialize();
$.ajax({
url:"[Link]",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if([Link]!='')
{
$('#comment_form')[0].reset();
$('#comment_message').html([Link]);
}
}
})
[Link]();
});
});
$(document).ready(function(e){
$.ajaxSetup({cache:false});
setInterval(function(){$
('#comment_message').load('display_comment.php');},1000);
});
</script>

DEBATE CREATING PAGE


deb_detail.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/4.7.0/css/[Link]">
<script
src="[Link]
</head>
<body>
<div>
<?php include("[Link]"); ?>
</div>
<form id="deb_detail" method="post" enctype="multipart/form-data">
<div class="debdetail">
<table border="1">
<tr colspan="2">
<th colspan="2"><p style="font-size:40px;">Create
Your Debate</p></th>
</tr>
<tr>
<td>
<p style="font-size:40px;text-align:center;">
Debate Detail
</p>
<p style="font-size:20px;text-align:center;">
Enter Debate Topic:
</p>
<input type="text" name="dt"
placeholder="Enter Debate Topic" id="dt"/><br>
<br>
<p style="font-size:20px;text-align:center;">
Select Image For Debate Topic:
</p>
<input type="file" id="image"
onchange="imagePreview(this);" name="image" style="width:300px;text-
align:center;height:40px;background-color:grey;"/><br>
<br>
<p style="font-size:20px;text-align:center;">
Select Debate Duration:
</p>
<input type="date" id="dur" name="dur"/>
</td>
<td>
<p style="font-size:40px;text-
align:center;">Debate Preview</p>
<figure>
<figcaption>
<center>Valid till:<span
id="predate" style="font-size:20px"></span></center>
</figcaption>
<img src="" alt="Image Preview"
height="200" id="imgpreview"><br>
<figcaption>
<center><span id="txtpre"
name="txtpre" style="font-size:30px"></span></center>
</figcaption>
</figure>
</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit"
value="create Debate" name="create" id="create"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script>
$(function(){
$('#dur').on("keyup change",function(){
$('#predate').text($(this).val());
});
});
$(function(){
$('#dt').keyup(function(){
$('#txtpre').text($(this).val());
});
});
function imagePreview(input){
if([Link] && [Link][0]){
var filerd = new FileReader();
[Link]=function(e){
$("#imgpreview").attr("src",[Link])
};
[Link]([Link][0]);
}
};
$(document).ready(function(){
$('#deb_detail').on('submit',function(e){
[Link]();
var formData = new FormData($("#deb_detail")[0]);
$.ajax({
url:"deb_detail.php",
method:"POST",
data:formData,
contentType:false,
processData:false,
success:function(data)
{
if(data=="1"){
alert("Debate Created Successfully");
}
else{
alert("Debate Creation Failed");
}
}
})
$('#imgpreview').attr("src","");
$('#txtpre').text("");
$('#predate').text("");
[Link]();
});
});
</script>

deb_detail.php
<?php
try{
$conn=mysqli_connect("localhost","root","","opinio");
$dbtopic=$_POST['dt'];
$vdate=date('Y-m-d',strtotime($_POST['dur']));
$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
$sql="INSERT INTO `deb_detail`(`dbtopic`,`image`,`valid_till`)
VALUES('$dbtopic','$file','$vdate');";
if(mysqli_query($conn,$sql)){
echo "1";
}
else{
echo "0";
}
}
catch(Exception $e){
echo $e;
}
?>

HEADER IN PAGES
Header1
[Link]
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="header">
<h1>[Link]</h1>
<button id="si"><a href="[Link]">Signin</a></button>
<button id="su"><a href="[Link]">Signup</a></button>
<div>
</body>

</html>

Header2

[Link]
<?php session_start(); ?>
<html>
<head>
<meta name="viewport" content="width=device-
width,initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="[Link]">
</head>

<body>
<?php

$conn=mysqli_connect("localhost","root","","opinio");
$una=$_SESSION['una'];
$pwd=$_SESSION['pwd'];
$sql1='select * from `registration` where
`username`="'.$una.'" and `password`="'.$pwd.'"';
$result1=mysqli_query($conn,$sql1);
$row1=mysqli_fetch_assoc($result1);
?>
<div class="header">
<h1>[Link]</h1>
<button id="si"><a
href="[Link]">Logout</a></button>
<div id="profile">
<figure>
<img
src="data:image/jpeg;base64,<?php echo
base64_encode($row1['profile']); ?>" alt="Image Preview"
height="80" width="120"><br>
<figcaption>
<center><span style="font-
size:20px;"><?php echo $_SESSION['una']; ?
></span></center>
</figcaption>
</figure>
</div>
<div>
</body>
</html>
CSS CODE
[Link]
.header{
background-image:url("[Link]");
width:100%;
height:20%;
background-color:#fff0b3;
background-size:35% 75%;
background-repeat:no-repeat;
background-position:center;
margin-bottom:50px;
}
body{
background: linear-gradient(to right, #cc0000 0%, #ffff66 100%);
}
.search-box{
position:absolute;
top:30%;
left:40%;
background:gray;
height:45px;
}
.search-box input[type="text"]{
width:300px;
height:45px;
}
.search-btn{
color:#4da6ff;
}
#vjdebate{
position:absolute;
left:28%;
height:40px;
width:330px;
}
#jdebate{
position:absolute;
left:50%;
height:40px;
width:330px;
}
.debdetail{
position:absolute;
top:25%;
width:600px;
left:50%;
margin-left:-300px;
}
#register input[type="text"],#register input[type="password"],#register input[type="file"]
{
width:300px;display:block;text-align:center;height:40px;
}
.debdetail input[type="text"],.debdetail input[type="submit"],.debdetail
input[type="date"]{
width:300px;text-align:center;height:40px;
}
.join-table{
position:absolute;
top:40%;
left:28%;
}
.chatbox{
width:600px;
min-width:400px;
height:500px;
background-color:#FAFAD2;
padding:25px;
margin:20px auto;
}
.chatlogs{
padding: 10px;
width: 100%;
height:500px;
overflow-x: hidden;
overflow-y: scroll;
}
.chatlogs::-webkit-scrollbar{
width:10px;
}
/* Track */
.chatlogs::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.chatlogs::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

/* Handle on hover */
.chatlogs::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
.chat{
display:flex;
flex-flow: row wrap;
align-items: flex-start;
margin-bottom:10px;
}
.chat .user-photo{
width:60px;
height:60px;
background-color:white;
border-radius:50%;
overflow:hidden;
}
.chat .user-photo img{
width:100%;
}
.chat .chat-message {
width:80%;
padding:20px;
margin:-55px 65px 0;
background-color:green;
border-radius: 10px;
color:black;
font-size:20px;
}
h1{
font-size:80px;
}
h1::first-letter{
font-size:90px;
}
#si{
margin-left:1300px;
position:absolute;top:15px;right:16px;
margin-top:30px;
width:80px;
line-height:15px;
height:20px;
}
#su{
position:absolute;top:15px;right:120px;
margin-top:30px;
width:80px;
line-height:15px;
height:20px;
}
/*[Link]*/
#admin-login{
position:absolute;
left:18%;
height:50px;
width:430px;
}
#user-login{
position:absolute;
left:52%;
height:50px;
width:430px;
}
/*[Link]*/
#adlogin{
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
}
#logout{
margin-left:1300px;
position:absolute;top:15px;right:16px;
margin-top:30px;
width:80px;
line-height:15px;
height:20px;
}
#profile{
margin-left:1300px;
position:absolute;top:0px;right:200px;
margin-top:5px;
line-height:15px;
}
/*button of upvote and downvote*/
.btnmsg{
background-color:LawnGreen;
border: none;
color: white;
margin:10px;
padding: 8px 12px;
font-size: 18px;
cursor: pointer;
border-radius: 30px;
}
.btnmsg:hover {
background-color:black ;
}
/*Displaying msg time*/
#tt{
font-size:18px;
font-family:Raleway;
text-align:right;
margin-left:80px;

}
@media screen and (max-width:450px){
h1{
font-size:15px;
}
h1::first-letter{
font-size:40px;
}
#si{
margin-left:1300px;
position:absolute;top:15px;right:10px;
margin-top:30px;
width:49px;
line-height:15px;
height:20px;
}
#su{
position:absolute;top:15px;right:63px;
margin-top:30px;
width:51px;
line-height:15px;
height:20px;
}
}
@media screen and (max-width:800px and min-width:700px){
h1{
font-size:40px;
}
h1::first-letter{
font-size:40px;
}
}

[Link]
*{
padding: 0px;
margin: 0px ;
font-family:tahoma,sans-serif;

}
table {
font-family: arial, sans-serif;
width: 100%;
margin-top:50px;
margin-left:80px;
}

.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 30px;
width: 500px;
transition: all 0.5s;
cursor: pointer;
margin:0px 10px;
background-color:#800000;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

[Link]
.chip {
display: inline-block;
padding: 0 25px;
height: 80px;
font-size: 20px;
line-height: 80px;
border-radius: 40px;
background-color: orange;
}

.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 80px;
width: 80px;
border-radius: 50%;
}
DATABASE-opinio

TABLES
comment
deb_detail
deb_join
registration

admin

You might also like