Implementation

REGISTRATION PAGE
CODE
registration.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<header>
<div>
<?php include("header1.php"); ?>
</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="https://bgp-
palembang.com/assets/img/avatar/avatar-2.png" 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(input.files && input.files[0]){
var filerd = new FileReader();
filerd.onload=function(e){
$("#imgpreview").attr("src",e.target.result)
};
filerd.readAsDataURL(input.files[0]);
}
};
$(document).ready(function(){
$('#registerform').on('submit',function(e){
e.preventDefault();
var formData = new FormData($("#registerform")[0]);
$.ajax({
url:"register.php",
method:"POST",
data:formData,
contentType:false,
processData:false,
success:function(data)
{
$('#suc').html(data);
}
})
$('#imgpreview').attr("src","https://bgp-
palembang.com/assets/img/avatar/avatar-2.png");
this.reset();
});
});
</script>
registration.php
<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`(ùsername`,`profile`,èmail`,`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
loginas.html
<html>
<head>
</head>
<body>
<div>
</div>
<div class="login-as">
<button id="admin-login"><a href="adminlogin.html">MEDIA HOUSE
LOGIN</a></button>
<button id="user-login"><a href="login.html">USER LOGIN</a></button>
</div>
</body>
</html>
USER LOGIN PAGE

login.html
<html>
<head>
<script>
function ajax_post(){
var ajax=new XMLHttpRequest();
var method="POST";
var url="login.php";
var asycchronous=true;
ajax.open(method,url,asycchronous);
var un=document.getElementById("un").value;
var pwd=document.getElementById("pw").value;
var form="login";
var vars="un="+un+"&pwd="+pwd+"&form="+form;
ajax.setRequestHeader("Content-type","application/x-www-
form-urlencoded");
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
var result=ajax.responseText;
if(result=="Y"){
window.location.href="homelog.html";
result="";
}
if(result=="N"){
window.location.href="login.html";
}
else{
document.getElementById("dp").innerHTML=result;
}
}
}
ajax.send(vars);
document.getElementById("un").value="";
document.getElementById("pw").value="";
}
</script>
</head>
<body>
<div>
<header>
<div>
</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>
login.php
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
session_start();
$un=$_REQUEST['un'];
$pwd=$_REQUEST['pwd'];
if($un=="" && $pwd==""){
}
if($un!="" && $pwd==""){
}
if($un=="" && $pwd!=""){
Username</p>";
}
if($un!="" && $pwd!=""){
$q='select * from `registration` where ùsername`="'.$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>";
}
}
}
else{
header("location:login.html");
}
?>
MEDIA HOUSE LOGIN PAGE
adminlogin.html
<html>
<head>
<script
<script>
function ajax_post(){
var ajax=new XMLHttpRequest();
var method="POST";
var url="adlogin.php";
var asycchronous=true;
ajax.open(method,url,asycchronous);
var un=document.getElementById("un").value;
var pwd=document.getElementById("pw").value;
var form="login";
var vars="un="+un+"&pw="+pwd+"&form="+form;
ajax.setRequestHeader("Content-type","application/x-www-
form-urlencoded");
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
var result=ajax.responseText;
if(result=="Y"){
window.location.href="adminhome.html";
result="";
}
if(result=="N"){
}
else{
document.getElementById("dp").innerHTML=result;
}
}
}
ajax.send(vars);
document.getElementById("un").value="";
document.getElementById("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;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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>
<div>
</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>
adminlogin.php
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
session_start();
$un=$_REQUEST['un'];
$pwd=$_REQUEST['pw'];
$_SESSION['adm']="suriya";
$_SESSION['adpw']="suriyacs";
if($un=="" && $pwd==""){
}
if($un!="" && $pwd==""){
}
if($un=="" && $pwd!=""){
Username</p>";
}
if($un!="" && $pwd!=""){
$q='select * from àdmin` where àdname`="'.$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>";
}
}
}
else{
header("location:login.html");
}
?>
MEDIA HOUSE REGISTRATION PAGE
adminregister.html
<html>
<head>
<script
<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;
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>
</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="adminlogin.html">Sign in</a>.</p>
</div>
</form>
</body>
</html>
<script>
$('#registerform').on('submit',function(e){
e.preventDefault();
var formData = new FormData($("#registerform")[0]);
$.ajax({
url:"adregister.php",
method:"POST",
data:formData,
contentType:false,
processData:false,
{
$('#suc').html(data);
}
})
});
});
</script>
adminregsiter.php
<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==""){
}
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==""){
}
if($un=="" && $pw!=""){
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){
$sql="INSERT INTO àdmin`(àdname`,àdemail`,`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>";
}
}
}
echo $e;
}
?>
</body>
</html>
MEDIA HOUSE HOME PAGE

adminhome.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="admin_home1.css">
<link rel="stylesheet" type="text/css" href="admin_home2.css">
<div>
<?php include("header.php"); ?>
</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>
<a
href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_buttons_all"
class="button" style="vertical-align:middle"><span>ADVERTISEMENT </span></a>
</div>
</td>
</tr>
<tr>
<td>
<a
class="button" style="vertical-align:middle"><span>UPDATE DEBATE</span></a>
</div>
</td>
<td>
<a
class="button" style="vertical-align:middle"><span>PAYMENT</span></a>
</div>
</td>
</tr>
<tr>
<td>
<a
class="button" style="vertical-align:middle"><span>REMOVE DEBATE</span></a>
</div>
</td>
<td>
<a
class="button" style="vertical-align:middle"><span>MODERATOR</span></a>
</div>
</td>
</tr>
<tr>
<td>
<a
class="button" style="vertical-align:middle"><span>VIEW REPORT</span></a>
</div>
</td>
<td>
<a
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>
<script
</head>
<body>
<div>
</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",
{
if(data=="0"){
$('#display_joins').html(data);
}
}
})
}
</script>
display_join.php
<html>
<head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>
<body>
<?php
try{
session_start();
$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 ùsername`="'.$una.'" and `password`="'.
$pwd.'"';
$result2=mysqli_query($conn,$sql1);
$row1=mysqli_fetch_assoc($result2);
$uid=$row1['id'];
$sql2='SELECT * FROM `deb_join` where ùid`="'.$uid.'"';
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>";
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>";
}
echo $e;
}
?>
</body>
</html>
<script>
$("button").on("click",function(){
var x=this.id;
var x2=this.name;
var data={};
data[x2]=$("#"+this.id).val();
if(x=="si"){
}
else{
$.ajax({
url:"deb_join.php",
method:"POST",
data:data,
dataType:"text",
{
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();
if(isset($_POST['dbidp'])){
$dbid=$_POST['dbidp'];
$jas='1';
}
else{
$dbid=$_POST['dbida'];
$jas='0';
}
$sql1='select * from `registration` where ùsername`="'.$una.'" and `password`="'.
$pwd.'"';
$result=mysqli_query($conn,$sql1);
$row=mysqli_fetch_assoc($result);
$uid=$row['id'];
$sql="INSERT INTO `deb_join`(ùid`,`debid`,`joinedas`)
VALUES('$uid','$dbid','$jas');";
/*$sql2='SELECT * FROM `deb_join` where ùid`="'.$uid.'" and `debid`="'.
$dbid.'"';*/
if(mysqli_query($conn,$sql)){
echo "JOINED";
}
else{
echo "AJOINED";
}
}
echo $e;
}
?>
DEBATE JOINED PAGE
deb_joined.html
<html>
<head>
<script
</head>
<body>
<div>
</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",
{
$('#display_joins').html(data);
}
})
}
</script>
deb_joined.php
<html>
<head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>
<body>
<?php
try{
$sql='SELECT * FROM deb_detail ORDER BY dbcreated DESC';
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>";
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>";
}
echo $e;
}
?>
</body>
</html>
<script>
$('#form_join').on('submit',function(e){
e.preventDefault();
$("button").one("click",function(){
var x=this.id;
$.ajax({
url:"deb_join.php",
method:"POST",
async:false,
data:{dbid:($("#"+this.id).val())},
dataType:"text",
{
if(data=="JOINED"){
$("#"+x).html("JOINED");
}
else{
$("#"+x).html("JOINED");
}
}
});
});
});
});
</script>
DEBATING PAGE
Debate.html
<html>
<head>
<script
</head>
<body>
<div>
</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>
$('#comment_form').on('submit',function(e){
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
{
if(data.error!='')
{
$('#comment_form')[0].reset();
$
('#comment_message').html(data.error);
}
}
})
});
setInterval(function(){
load_comment();},1000);
function load_comment()
{
$.ajax({
url:"display_comment.php",
method:"POST",
{
$('#comment_message').html(data);
}
})
}
});
</script>
Debate.php
<html>
<head>
<script
</head>
<body>
<div>
<?php include("header.php");
$_SESSION['did']=$_POST['dbid'];
$dbid=$_POST['dbid'];
$sql="SELECT * FROM deb_detail where debateid=".$dbid;
?>
</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: <?php echo
date('Y:m:d',strtotime($row['dbcreated'])); ?
> TO</span> <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>
$('#comment_form').on('submit',function(e){
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
{
if(data.error!='')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
}
}
})
this.reset();
});
});
$(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>
<script
</head>
<body>
<div>
</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>
Enter Debate Topic:
</p>
<input type="text" name="dt"
placeholder="Enter Debate Topic" id="dt"/><br>
<br>
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>
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(input.files && input.files[0]){
var filerd = new FileReader();
filerd.onload=function(e){
$("#imgpreview").attr("src",e.target.result)
};
filerd.readAsDataURL(input.files[0]);
}
};
$('#deb_detail').on('submit',function(e){
e.preventDefault();
var formData = new FormData($("#deb_detail")[0]);
$.ajax({
url:"deb_detail.php",
method:"POST",
data:formData,
contentType:false,
processData:false,
{
if(data=="1"){
alert("Debate Created Successfully");
}
else{
alert("Debate Creation Failed");
}
}
})
$('#imgpreview').attr("src","");
$('#txtpre').text("");
$('#predate').text("");
this.reset();
});
});
</script>
deb_detail.php
<?php
try{
$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`,ìmage`,`valid_till`)
VALUES('$dbtopic','$file','$vdate');";
if(mysqli_query($conn,$sql)){
echo "1";
}
else{
echo "0";
}
}
echo $e;
}
?>
HEADER IN PAGES
Header1
Header1.php
<html>
<head>
</head>
<body>
<div class="header">
<h1>Opino.com</h1>
<button id="si"><a href="loginas.html">Signin</a></button>
<button id="su"><a href="register.html">Signup</a></button>
<div>
</body>
</html>
Header2
Header.php
<?php session_start(); ?>
<html>
<head>
<meta name="viewport" content="width=device-
width,initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<?php
$sql1='select * from `registration` where
ùsername`="'.$una.'" and `password`="'.$pwd.'"';
$row1=mysqli_fetch_assoc($result1);
?>
<div class="header">
<h1>Opino.com</h1>
<button id="si"><a
href="login.html">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
Style.css
.header{
background-image:url("log1.png");
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;
}
/* 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;
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{
margin-top:30px;
width:80px;
line-height:15px;
height:20px;
}
/*loginas.html*/
#admin-login{
position:absolute;
left:18%;
height:50px;
width:430px;
}
#user-login{
position:absolute;
left:52%;
height:50px;
width:430px;
}
/*adminlogin.html*/
#adlogin{
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
}
#logout{
margin-left:1300px;
margin-top:30px;
width:80px;
line-height:15px;
height:20px;
}
#profile{
margin-left:1300px;
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;
}
.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;
margin-top:30px;
width:49px;
line-height:15px;
height:20px;
}
#su{
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;
}
}
adminhome1.css
*{
padding: 0px;
margin: 0px ;
font-family:tahoma,sans-serif;
}
table {
font-family: arial, sans-serif;
width: 100%;
margin-top:50px;
margin-left:80px;
}
.button {
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;
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;
}
adminhome2.css
.chip {
padding: 0 25px;
height: 80px;
font-size: 20px;
line-height: 80px;
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

Implementation

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Implementation

Uploaded by

Copyright:

Available Formats

REGISTRATION PAGE

USER LOGIN PAGE

MEDIA HOUSE LOGIN PAGE

MEDIA HOUSE REGISTRATION PAGE

/* Add padding to containers */

/* Full-width input fields */

/* Overwrite default styles of hr */

/* Set a style for the submit button */

/* Add a blue text color to links */

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

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

<div class="container signin">

MEDIA HOUSE HOME PAGE

DEBATE CREATING PAGE

You might also like