├── .gitattributes
├── upload
    └── profile.jpg
├── admin
    ├── logout.php
    ├── deleteuser.php
    ├── update_room.php
    ├── send_message.php
    ├── deleteroom.php
    ├── add_user.php
    ├── addmember.php
    ├── session.php
    ├── leaveroom.php
    ├── addnewmember.php
    ├── header.php
    ├── fetch_member.php
    ├── add_chatroom.php
    ├── update_user.php
    ├── confirm_password.php
    ├── test.php
    ├── fetch_chat.php
    ├── update_photo.php
    ├── navbar.php
    ├── update_account.php
    ├── mychat.php
    ├── chatlist.php
    ├── userlist.php
    ├── room.php
    ├── index.php
    ├── user.php
    ├── chatroom.php
    ├── crudroom_modal.php
    ├── room_modal.php
    ├── cruduser_modal.php
    └── modal.php
├── user
    ├── logout.php
    ├── send_message.php
    ├── deleteroom.php
    ├── addmember.php
    ├── session.php
    ├── leaveroom.php
    ├── addnewmember.php
    ├── header.php
    ├── add_chatroom.php
    ├── confirm_password.php
    ├── test.php
    ├── fetch_chat.php
    ├── navbar.php
    ├── update_photo.php
    ├── update_account.php
    ├── mychat.php
    ├── chatlist.php
    ├── room.php
    ├── password_modal.php
    ├── index.php
    ├── chatroom.php
    ├── room_modal.php
    ├── out_modal.php
    └── modal.php
├── conn.php
├── README.md
├── register.php
├── LICENSE
├── login.php
├── index.php
├── signup.php
├── js
    ├── dataTables.bootstrap.min.js
    └── dataTables.responsive.js
├── css
    ├── dataTables.responsive.css
    └── dataTables.bootstrap.css
└── db
    └── id3106473_localhost.sql


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto


--------------------------------------------------------------------------------
/upload/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rayandasoriya/ChatRoom/HEAD/upload/profile.jpg


--------------------------------------------------------------------------------
/admin/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	session_start();
3 | 	session_destroy();
4 | 	header('location:../');
5 | ?>


--------------------------------------------------------------------------------
/user/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	session_start();
3 | 	session_destroy();
4 | 	header('location:../');
5 | ?>


--------------------------------------------------------------------------------
/admin/deleteuser.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	include('session.php');
3 | 	if(isset($_POST['del'])){
4 | 		$id=$_POST['id'];
5 | 		
6 | 		mysqli_query($conn,"delete from `user` where userid='$id'");
7 | 	}
8 | 
9 | ?>


--------------------------------------------------------------------------------
/conn.php:
--------------------------------------------------------------------------------
1 | <?php
2 |  
3 | //MySQLi Procedural
4 | $conn = mysqli_connect("localhost","root","","chat_system");
5 | if (!$conn) {
6 | 	die("Connection failed: " . mysqli_connect_error());
7 | }
8 |  
9 | ?>


--------------------------------------------------------------------------------
/admin/update_room.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	if(isset($_POST['edit'])){
 4 | 		
 5 | 		$id=$_POST['id'];
 6 | 		$name=$_POST['name'];
 7 | 		$pass=$_POST['pass'];
 8 | 		
 9 | 		mysqli_query($conn,"update chatroom set chat_name='$name', chat_password='$pass' where chatroomid='$id'");
10 | 		
11 | 	}
12 | 
13 | ?>


--------------------------------------------------------------------------------
/user/send_message.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	include('../conn.php');
3 | 	session_start();
4 | 	if(isset($_POST['msg'])){		
5 | 		$msg=$_POST['msg'];
6 | 		$id=$_POST['id'];
7 | 		mysqli_query($conn,"insert into `chat` (chatroomid, message, userid, chat_date) values ('$id', '$msg' , '".$_SESSION['id']."', NOW())") or die(mysqli_error());
8 | 	}
9 | ?>


--------------------------------------------------------------------------------
/admin/send_message.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	include('../conn.php');
3 | 	session_start();
4 | 	if(isset($_POST['msg'])){		
5 | 		$msg=$_POST['msg'];
6 | 		$id=$_POST['id'];
7 | 		mysqli_query($conn,"insert into `chat` (chatroomid, message, userid, chat_date) values ('$id', '$msg' , '".$_SESSION['id']."', NOW())") or die(mysqli_error());
8 | 	}
9 | ?>


--------------------------------------------------------------------------------
/admin/deleteroom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	
 4 | 	if (isset($_POST['del'])){
 5 | 		$id=$_POST['id'];
 6 | 		
 7 | 		mysqli_query($conn,"delete from `chatroom` where chatroomid='$id'");
 8 | 		mysqli_query($conn,"delete from `chat` where chatroomid='$id'");
 9 | 		mysqli_query($conn,"delete from `chat_member` where chatroomid='$id'");
10 | 	}
11 | ?>


--------------------------------------------------------------------------------
/user/deleteroom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	
 4 | 	if (isset($_POST['del'])){
 5 | 		$id=$_POST['id'];
 6 | 		
 7 | 		mysqli_query($conn,"delete from `chatroom` where chatroomid='$id'");
 8 | 		mysqli_query($conn,"delete from `chat` where chatroomid='$id'");
 9 | 		mysqli_query($conn,"delete from `chat_member` where chatroomid='$id'");
10 | 	}
11 | ?>


--------------------------------------------------------------------------------
/admin/add_user.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if(isset($_POST['adduser'])){
 4 | 		$name=$_POST['name'];
 5 | 		$username=$_POST['username'];
 6 | 		$password=md5($_POST['password']);
 7 | 		$access=$_POST['access'];
 8 | 		
 9 | 		mysqli_query($conn,"insert into `user` (uname, username, password, access) values ('$name', '$username', '$password', '$access')");
10 | 	}
11 | 
12 | ?>


--------------------------------------------------------------------------------
/admin/addmember.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if (isset($_POST['id'])){
 4 | 		$id=$_POST['id'];
 5 | 		
 6 | 		$query=mysqli_query($conn,"select * from chat_member where chatroom='$id' and userid='".$_SESSION['id']."'");
 7 | 		if (mysqli_num_rows($query)<1){
 8 | 			mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$id', '".$_SESSION['id']."')");
 9 | 		}
10 | 	}
11 | ?>


--------------------------------------------------------------------------------
/user/addmember.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if (isset($_POST['id'])){
 4 | 		$id=$_POST['id'];
 5 | 		
 6 | 		$query=mysqli_query($conn,"select * from chat_member where chatroom='$id' and userid='".$_SESSION['id']."'");
 7 | 		if (mysqli_num_rows($query)<1){
 8 | 			mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$id', '".$_SESSION['id']."')");
 9 | 		}
10 | 	}
11 | ?>


--------------------------------------------------------------------------------
/admin/session.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	session_start();
 3 | 	include('../conn.php');
 4 | 	
 5 | 	if (!isset($_SESSION['id']) ||(trim ($_SESSION['id']) == '')) {
 6 | 	header('location:../');
 7 |     exit();
 8 | 	}
 9 | 	
10 | 	$sq=mysqli_query($conn,"select * from `user` where userid='".$_SESSION['id']."'");
11 | 	$srow=mysqli_fetch_array($sq);
12 | 		
13 | 	if ($srow['access']!=1){
14 | 		header('location:../');
15 | 		exit();
16 | 	}
17 | 	
18 | 	$user=$srow['username'];
19 | ?>


--------------------------------------------------------------------------------
/user/session.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	session_start();
 3 | 	include('../conn.php');
 4 | 	
 5 | 	if (!isset($_SESSION['id']) ||(trim ($_SESSION['id']) == '')) {
 6 | 	header('location:../');
 7 |     exit();
 8 | 	}
 9 | 	
10 | 	$sq=mysqli_query($conn,"select * from `user` where userid='".$_SESSION['id']."'");
11 | 	$srow=mysqli_fetch_array($sq);
12 | 		
13 | 	if ($srow['access']!=2){
14 | 		header('location:../');
15 | 		exit();
16 | 	}
17 | 	
18 | 	$user=$srow['username'];
19 | ?>


--------------------------------------------------------------------------------
/admin/leaveroom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if (isset($_POST['leave'])){
 4 | 		$id=$_POST['id'];
 5 | 		
 6 | 		mysqli_query($conn,"delete from chat_member where userid='".$_SESSION['id']."' and chatroomid='$id'");
 7 | 		
 8 | 		//remove room if no more member
 9 | 		$r=mysqli_query($conn,"select * from chat_member where chatroomid='$id'");
10 | 		if (mysqli_num_rows($r)<1){
11 | 			mysqli_query($conn,"delete from chatroom where chatroomid='$id'");
12 | 		}
13 | 		
14 | 	}
15 | 
16 | ?>


--------------------------------------------------------------------------------
/user/leaveroom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if (isset($_POST['leave'])){
 4 | 		$id=$_POST['id'];
 5 | 		
 6 | 		mysqli_query($conn,"delete from chat_member where userid='".$_SESSION['id']."' and chatroomid='$id'");
 7 | 		
 8 | 		//remove room if no more member
 9 | 		$r=mysqli_query($conn,"select * from chat_member where chatroomid='$id'");
10 | 		if (mysqli_num_rows($r)<1){
11 | 			mysqli_query($conn,"delete from chatroom where chatroomid='$id'");
12 | 		}
13 | 		
14 | 	}
15 | 
16 | ?>


--------------------------------------------------------------------------------
/admin/addnewmember.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	$id=$_REQUEST['id'];
 4 | 	$user=$_POST['user'];
 5 | 	
 6 | 	if (empty($user)){
 7 | 	?>
 8 | 		<script>
 9 | 			window.alert('Please select user');
10 | 			window.history.back();
11 | 		</script>
12 | 	<?php
13 | 	}
14 | 	else{
15 | 	mysqli_query($conn,"insert into chat_member (userid, chatroomid) values ('$user','$id')");
16 | 	
17 | 	?>
18 | 		<script>
19 | 			window.alert('Member Added Successfully');
20 | 			window.history.back();
21 | 		</script>
22 | 	<?php
23 | 	}
24 | ?>


--------------------------------------------------------------------------------
/admin/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 
 5 | 	<title>ChatBot</title>
 6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 7 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 8 | 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 | 	
10 | 	<link href="../css/dataTables.bootstrap.css" rel="stylesheet">
11 | 	<link href="../css/dataTables.responsive.css" rel="stylesheet">
12 | 
13 | </head>


--------------------------------------------------------------------------------
/user/addnewmember.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	$id=$_REQUEST['id'];
 4 | 	$user=$_POST['user'];
 5 | 	
 6 | 	if (empty($user)){
 7 | 	?>
 8 | 		<script>
 9 | 			window.alert('Please select user');
10 | 			window.history.back();
11 | 		</script>
12 | 	<?php
13 | 	}
14 | 	else{
15 | 	mysqli_query($conn,"insert into chat_member (userid, chatroomid) values ('$user','$id')");
16 | 	
17 | 	?>
18 | 		<script>
19 | 			window.alert('Member Added Successfully');
20 | 			window.history.back();
21 | 		</script>
22 | 	<?php
23 | 	}
24 | ?>


--------------------------------------------------------------------------------
/user/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 
 5 | 	<title>ChatBot</title>
 6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 7 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 8 | 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 | 	
10 | 	<link href="../css/dataTables.bootstrap.css" rel="stylesheet">
11 | 	<link href="../css/dataTables.responsive.css" rel="stylesheet">
12 | 
13 | </head>


--------------------------------------------------------------------------------
/admin/fetch_member.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if(isset($_POST['mem'])){
 4 | 		$id=$_POST['id'];
 5 | 		
 6 | 		$memq=mysqli_query($conn,"select * from chat_member left join `user` on user.userid=chat_member.userid where chatroomid='$id'");
 7 | 		while($memrow=mysqli_fetch_array($memq)){
 8 | 			?>
 9 | 			<div class="well" style="height: 100px;">
10 | 			
11 | 			<span><?php echo $memrow['uname']; ?></span>
12 | 			<button class="btn btn-warning ">Kick</button>
13 | 			
14 | 			</div><br>
15 | 			<?php
16 | 		}
17 | 	}
18 | 
19 | ?>


--------------------------------------------------------------------------------
/admin/add_chatroom.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 	include('session.php');
 3 | 	
 4 | 	if (isset($_POST['chatname'])){
 5 | 	$cid="";
 6 | 	$chat_name=$_POST['chatname'];
 7 | 	$chat_password=$_POST['chatpass'];
 8 | 	
 9 | 	mysqli_query($conn,"insert into chatroom (chat_name, chat_password, date_created, userid) values ('$chat_name', '$chat_password', NOW(), '".$_SESSION['id']."')");
10 | 	$cid=mysqli_insert_id($conn);
11 | 	
12 | 	mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$cid', '".$_SESSION['id']."')");
13 | 	
14 | 	echo $cid;
15 | 	}
16 | 	
17 | 	
18 | ?>


--------------------------------------------------------------------------------
/user/add_chatroom.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 	include('session.php');
 3 | 	
 4 | 	if (isset($_POST['chatname'])){
 5 | 	$cid="";
 6 | 	$chat_name=$_POST['chatname'];
 7 | 	$chat_password=$_POST['chatpass'];
 8 | 	
 9 | 	mysqli_query($conn,"insert into chatroom (chat_name, chat_password, date_created, userid) values ('$chat_name', '$chat_password', NOW(), '".$_SESSION['id']."')");
10 | 	$cid=mysqli_insert_id($conn);
11 | 	
12 | 	mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$cid', '".$_SESSION['id']."')");
13 | 	
14 | 	echo $cid;
15 | 	}
16 | 	
17 | 	
18 | ?>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # chatRoom
 2 | 
 3 | This is an online chat room system where users can log in and have chats. This provides 2 types of chatting.
 4 | 
 5 | 1. Public: Anyone can join the group and have conversation
 6 | 2. Private: You require a password to join the group.
 7 | 
 8 | The admin access control has the rights to manage the groups and the users.
 9 | 
10 | Preview of this website is available over: 
11 | ```
12 | https://chatbot-rayan.000webhostapp.com/
13 | ```
14 | 
15 | Credentials for the system
16 | ```
17 | Username: test
18 | Password: test
19 | Password for chat with name "chatroom password": leeann
20 | ```
21 | 


--------------------------------------------------------------------------------
/admin/update_user.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	if(isset($_POST['edit'])){
 4 | 		$id=$_POST['id'];
 5 | 		$name=$_POST['name'];
 6 | 		$username=$_POST['username'];
 7 | 		$password=$_POST['password'];
 8 | 		
 9 | 		$uq=mysqli_query($conn,"select * from `user` where userid='$id'");
10 | 		$uqrow=mysqli_fetch_array($uq);
11 | 		
12 | 		if ($password==$uqrow['password']){
13 | 			$newpassword=$password;
14 | 		}
15 | 		else{
16 | 			$newpassword=md5($password);
17 | 		}
18 | 		mysqli_query($conn,"update `user` set uname='$name', username='$username', password='$newpassword' where userid='$id'");
19 | 	}
20 | 
21 | ?>


--------------------------------------------------------------------------------
/user/confirm_password.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$cid=$_POST['chatid'];
 5 | 	$pass=$_POST['chat_pass'];
 6 | 	
 7 | 	$query=mysqli_query($conn,"select * from chatroom where chatroomid='$cid'");
 8 | 	$row=mysqli_fetch_array($query);
 9 | 	
10 | 	if ($row['chat_password']==$pass){
11 | 		mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$cid', '".$_SESSION['id']."')");
12 | 		header('location: chatroom.php?id='.$cid);
13 | 	}
14 | 	
15 | 	else{
16 | 		?>
17 | 		<script>
18 | 			window.alert('Incorrect Password!');
19 | 			window.history.back();
20 | 		</script>
21 | 		<?php
22 | 	}
23 | ?>


--------------------------------------------------------------------------------
/admin/confirm_password.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$cid=$_POST['chatid'];
 5 | 	$pass=$_POST['chat_pass'];
 6 | 	
 7 | 	$query=mysqli_query($conn,"select * from chatroom where chatroomid='$cid'");
 8 | 	$row=mysqli_fetch_array($query);
 9 | 	
10 | 	if ($row['chat_password']==$pass){
11 | 		mysqli_query($conn,"insert into chat_member (chatroomid, userid) values ('$cid', '".$_SESSION['id']."')");
12 | 		header('location: chatroom.php?id='.$cid);
13 | 	}
14 | 	
15 | 	else{
16 | 		?>
17 | 		<script>
18 | 			window.alert('Incorrect Password!');
19 | 			window.history.back();
20 | 		</script>
21 | 		<?php
22 | 	}
23 | ?>


--------------------------------------------------------------------------------
/admin/test.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 							include('../conn.php');
 3 | 							$id=46;
 4 | 								$mem=array();
 5 | 								$um=mysqli_query($conn,"select * from `chat_member` where chatroomid='$id'");
 6 | 								while($umrow=mysqli_fetch_array($um)){
 7 | 									$mem[]=$umrow['userid'];
 8 | 								}
 9 | 								print_r($mem);
10 | 								$users=implode($mem, "', '");
11 | 								echo $users;
12 | 								print_r($users);
13 | 								
14 | 								$u=mysqli_query($conn,"select * from `user` where userid not in ('".$users."')");
15 | 								while($urow=mysqli_fetch_array($u)){
16 | 									?>
17 | 										<li><?php echo $urow['uname']; ?></li>	
18 | 									<?php
19 | 								}
20 | 							
21 | 							?>


--------------------------------------------------------------------------------
/user/test.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 							include('../conn.php');
 3 | 							$id=46;
 4 | 								$mem=array();
 5 | 								$um=mysqli_query($conn,"select * from `chat_member` where chatroomid='$id'");
 6 | 								while($umrow=mysqli_fetch_array($um)){
 7 | 									$mem[]=$umrow['userid'];
 8 | 								}
 9 | 								print_r($mem);
10 | 								$users=implode($mem, "', '");
11 | 								echo $users;
12 | 								print_r($users);
13 | 								
14 | 								$u=mysqli_query($conn,"select * from `user` where userid not in ('".$users."')");
15 | 								while($urow=mysqli_fetch_array($u)){
16 | 									?>
17 | 										<li><?php echo $urow['uname']; ?></li>	
18 | 									<?php
19 | 								}
20 | 							
21 | 							?>


--------------------------------------------------------------------------------
/admin/fetch_chat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	if(isset($_POST['fetch'])){
 4 | 		$id = $_POST['id'];
 5 | 		
 6 | 		$query=mysqli_query($conn,"select * from `chat` left join `user` on user.userid=chat.userid where chatroomid='$id' order by chat_date asc") or die(mysqli_error());
 7 | 		while($row=mysqli_fetch_array($query)){
 8 | 		?>	
 9 | 		<div>
10 | 			<img src="../<?php if(empty($row['photo'])){echo "upload/profile.jpg";}else{echo $row['photo'];} ?>" style="height:30px; width:30px; position:relative; top:15px; left:10px;">
11 | 			<span style="font-size:10px; position:relative; top:7px; left:15px;"><i><?php echo date('M-d-Y h:i A',strtotime($row['chat_date'])); ?></i></span><br>
12 | 			<span style="font-size:11px; position:relative; top:-2px; left:50px;"><strong><?php echo $row['uname']; ?></strong>: <?php echo $row['message']; ?></span>
13 | 		</div>
14 | 		<?php
15 | 		}
16 | 	}	
17 | ?>


--------------------------------------------------------------------------------
/user/fetch_chat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('../conn.php');
 3 | 	if(isset($_POST['fetch'])){
 4 | 		$id = $_POST['id'];
 5 | 		
 6 | 		$query=mysqli_query($conn,"select * from `chat` left join `user` on user.userid=chat.userid where chatroomid='$id' order by chat_date asc") or die(mysqli_error());
 7 | 		while($row=mysqli_fetch_array($query)){
 8 | 		?>	
 9 | 		<div>
10 | 			<img src="../<?php if(empty($row['photo'])){echo "upload/profile.jpg";}else{echo $row['photo'];} ?>" style="height:30px; width:30px; position:relative; top:15px; left:10px;">
11 | 			<span style="font-size:10px; position:relative; top:7px; left:15px;"><i><?php echo date('M-d-Y h:i A',strtotime($row['chat_date'])); ?></i></span><br>
12 | 			<span style="font-size:11px; position:relative; top:-2px; left:50px;"><strong><?php echo $row['uname']; ?></strong>: <?php echo $row['message']; ?></span><br>
13 | 		</div>
14 | 		<div style="height:5px;"></div>
15 | 		<?php
16 | 		}
17 | 	}	
18 | ?>


--------------------------------------------------------------------------------
/register.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('conn.php');
 3 | 	session_start();
 4 | 	function check_input($data) {
 5 | 		$data = trim($data);
 6 | 		$data = stripslashes($data);
 7 | 		$data = htmlspecialchars($data);
 8 | 		return $data;
 9 | 	}
10 | 	
11 | 	if ($_SERVER["REQUEST_METHOD"] == "POST") {
12 | 		$username=check_input($_POST['username']);
13 | 		
14 | 		if (!preg_match("/^[a-zA-Z0-9_]*$/",$username)) {
15 | 			$_SESSION['sign_msg'] = "Username should not contain space and special characters!"; 
16 | 			header('location: signup.php');
17 | 		}
18 | 		else{
19 | 			
20 | 		$fusername=$username;
21 | 		
22 | 		$password = check_input($_POST["password"]);
23 | 		$fpassword=md5($password);
24 | 		$fname = check_input($_POST["name"]);
25 | 		
26 | 		mysqli_query($conn,"insert into `user` (uname, username, password, access) values ('$fname', '$fusername', '$fpassword', '2')");
27 | 		
28 | 		$_SESSION['msg'] = "Sign up successful. You may login now!"; 
29 | 		header('location: index.php');
30 | 		}
31 | 	}
32 | ?>


--------------------------------------------------------------------------------
/user/navbar.php:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |     <div class="container-fluid">
 3 | 		<div class="navbar-header">
 4 | 			<a class="navbar-brand" href="index.php">ChatBot</a>
 5 | 		</div>
 6 | 		
 7 | 		<ul class="nav navbar-nav">
 8 | 			<li><a href="index.php"><span class="glyphicon glyphicon-home"></span> Lobby</a></li>
 9 | 		</ul>
10 | 		
11 | 		<ul class="nav navbar-nav navbar-right">
12 | 			<li><a href="#account" data-toggle="modal"><span class="glyphicon glyphicon-lock"></span> <?php echo $user; ?></a></li>
13 | 			<li class="dropdown">
14 | 				<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
15 |                     <ul class="dropdown-menu">
16 | 						<li><a href="#photo" data-toggle="modal"><span class="glyphicon glyphicon-picture"></span> Update Photo</a></li>
17 | 						<li class="divider"></li>
18 |                         <li><a href="#logout" data-toggle="modal"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
19 |                     </ul>
20 | 			</li>
21 | 		</ul> 
22 |     </div>
23 | </nav>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Rayan Dasoriya
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/user/update_photo.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$fileInfo = PATHINFO($_FILES["image"]["name"]);
 5 | 	
 6 | 	if (empty($_FILES["image"]["name"])){
 7 | 		$location=$srow['photo'];
 8 | 		?>
 9 | 			<script>
10 | 				window.alert('Uploaded photo is empty!');
11 | 				window.history.back();
12 | 			</script>
13 | 		<?php
14 | 	}
15 | 	else{
16 | 		if ($fileInfo['extension'] == "jpg" OR $fileInfo['extension'] == "png") {
17 | 			$newFilename = $fileInfo['filename'] . "_" . time() . "." . $fileInfo['extension'];
18 | 			move_uploaded_file($_FILES["image"]["tmp_name"], "../upload/" . $newFilename);
19 | 			$location = "upload/" . $newFilename;
20 | 			
21 | 			mysqli_query($conn,"update `user` set photo='$location' where userid='".$_SESSION['id']."'");
22 | 	
23 | 			?>
24 | 				<script>
25 | 					window.alert('Photo updated successfully!');
26 | 					window.history.back();
27 | 				</script>
28 | 			<?php
29 | 		}
30 | 		else{
31 | 			?>
32 | 				<script>
33 | 					window.alert('Photo not updated. Please upload JPG or PNG files only!');
34 | 					window.history.back();
35 | 				</script>
36 | 			<?php
37 | 		}
38 | 	}
39 | 	
40 | 	
41 | 
42 | ?>


--------------------------------------------------------------------------------
/admin/update_photo.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$fileInfo = PATHINFO($_FILES["image"]["name"]);
 5 | 	
 6 | 	if (empty($_FILES["image"]["name"])){
 7 | 		$location=$srow['photo'];
 8 | 		?>
 9 | 			<script>
10 | 				window.alert('Uploaded photo is empty!');
11 | 				window.history.back();
12 | 			</script>
13 | 		<?php
14 | 	}
15 | 	else{
16 | 		if ($fileInfo['extension'] == "jpg" OR $fileInfo['extension'] == "png") {
17 | 			$newFilename = $fileInfo['filename'] . "_" . time() . "." . $fileInfo['extension'];
18 | 			move_uploaded_file($_FILES["image"]["tmp_name"], "../upload/" . $newFilename);
19 | 			$location = "upload/" . $newFilename;
20 | 			
21 | 			mysqli_query($conn,"update `user` set photo='$location' where userid='".$_SESSION['id']."'");
22 | 	
23 | 			?>
24 | 				<script>
25 | 					window.alert('Photo updated successfully!');
26 | 					window.history.back();
27 | 				</script>
28 | 			<?php
29 | 		}
30 | 		else{
31 | 			?>
32 | 				<script>
33 | 					window.alert('Photo not updated. Please upload JPG or PNG files only!');
34 | 					window.history.back();
35 | 				</script>
36 | 			<?php
37 | 		}
38 | 	}
39 | 	
40 | 	
41 | 
42 | ?>


--------------------------------------------------------------------------------
/admin/navbar.php:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |     <div class="container-fluid">
 3 | 		<div class="navbar-header">
 4 | 			<a class="navbar-brand" href="index.php">ChatBot Admin</a>
 5 | 		</div>
 6 | 		
 7 | 		<ul class="nav navbar-nav">
 8 | 			<li><a href="index.php"><span class="glyphicon glyphicon-list"></span> Chat Rooms</a></li>
 9 | 			<li><a href="user.php"><span class="glyphicon glyphicon-user"></span> Users</a></li>
10 | 		</ul>
11 | 		
12 | 		<ul class="nav navbar-nav navbar-right">
13 | 			<li><a href="#account" data-toggle="modal"><span class="glyphicon glyphicon-lock"></span> <?php echo $user; ?></a></li>
14 | 			<li class="dropdown">
15 | 				<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
16 |                     <ul class="dropdown-menu">
17 | 						<li><a href="#photo" data-toggle="modal"><span class="glyphicon glyphicon-picture"></span> Update Photo</a></li>
18 | 						<li class="divider"></li>
19 |                         <li><a href="#logout" data-toggle="modal"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
20 |                     </ul>
21 | 			</li>
22 | 		</ul> 
23 |     </div>
24 | </nav>


--------------------------------------------------------------------------------
/admin/update_account.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$mname=$_POST['mname'];
 5 | 	$cpassword=md5($_POST['cpassword']);
 6 | 	$apassword=md5($_POST['apassword']);
 7 | 	$mpassword=$_POST['mpassword'];
 8 | 	$musername=$_POST['musername'];
 9 | 	
10 | 	$myq=mysqli_query($conn,"select * from `user` where userid='".$_SESSION['id']."'");
11 | 	$myqrow=mysqli_fetch_array($myq);
12 | 	
13 | 	if ($cpassword!=$apassword){
14 | 		?>
15 | 		<script>
16 | 			window.alert('Verification Password did not match!');
17 | 			window.history.back();
18 | 		</script>
19 | 		<?php
20 | 	}
21 | 	
22 | 	elseif ($cpassword!=$myqrow['password']){
23 | 		?>
24 | 		<script>
25 | 			window.alert('Current Password did not match!');
26 | 			window.history.back();
27 | 		</script>
28 | 		<?php
29 | 	}
30 | 	
31 | 	else{
32 | 		if ($mpassword==$myqrow['password']){
33 | 			$newpassword=$mpassword;
34 | 		}
35 | 		else{
36 | 			$newpassword=md5($mpassword);
37 | 		}
38 | 		
39 | 		mysqli_query($conn,"update `user` set username='$musername', password='$newpassword', uname='$mname' where userid='".$_SESSION['id']."'");
40 | 		?>
41 | 		<script>
42 | 			window.alert('Changes Saved!');
43 | 			window.history.back();
44 | 		</script>
45 | 		<?php
46 | 	}
47 | 
48 | ?>


--------------------------------------------------------------------------------
/user/update_account.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('session.php');
 3 | 	
 4 | 	$mname=$_POST['mname'];
 5 | 	$cpassword=md5($_POST['cpassword']);
 6 | 	$apassword=md5($_POST['apassword']);
 7 | 	$mpassword=$_POST['mpassword'];
 8 | 	$musername=$_POST['musername'];
 9 | 	
10 | 	$myq=mysqli_query($conn,"select * from `user` where userid='".$_SESSION['id']."'");
11 | 	$myqrow=mysqli_fetch_array($myq);
12 | 	
13 | 	if ($cpassword!=$apassword){
14 | 		?>
15 | 		<script>
16 | 			window.alert('Verification Password did not match!');
17 | 			window.history.back();
18 | 		</script>
19 | 		<?php
20 | 	}
21 | 	
22 | 	elseif ($cpassword!=$myqrow['password']){
23 | 		?>
24 | 		<script>
25 | 			window.alert('Current Password did not match!');
26 | 			window.history.back();
27 | 		</script>
28 | 		<?php
29 | 	}
30 | 	
31 | 	else{
32 | 		if ($mpassword==$myqrow['password']){
33 | 			$newpassword=$mpassword;
34 | 		}
35 | 		else{
36 | 			$newpassword=md5($mpassword);
37 | 		}
38 | 		
39 | 		mysqli_query($conn,"update `user` set username='$musername', password='$newpassword', uname='$mname' where userid='".$_SESSION['id']."'");
40 | 		?>
41 | 		<script>
42 | 			window.alert('Changes Saved!');
43 | 			window.history.back();
44 | 		</script>
45 | 		<?php
46 | 	}
47 | 
48 | ?>


--------------------------------------------------------------------------------
/login.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	include('conn.php');
 3 | 	session_start();
 4 | 	function check_input($data) {
 5 | 		$data = trim($data);
 6 | 		$data = stripslashes($data);
 7 | 		$data = htmlspecialchars($data);
 8 | 		return $data;
 9 | 	}
10 | 	
11 | 	if ($_SERVER["REQUEST_METHOD"] == "POST") {
12 | 		$username=check_input($_POST['username']);
13 | 		
14 | 		if (!preg_match("/^[a-zA-Z0-9_]*$/",$username)) {
15 | 			$_SESSION['msg'] = "Username should not contain space and special characters!"; 
16 | 			header('location: index.php');
17 | 		}
18 | 		else{
19 | 			
20 | 		$fusername=$username;
21 | 		
22 | 		$password = check_input($_POST["password"]);
23 | 		$fpassword=md5($password);
24 | 		
25 | 		$query=mysqli_query($conn,"select * from `user` where username='$fusername' and password='$fpassword'");
26 | 		
27 | 		if(mysqli_num_rows($query)==0){
28 | 			$_SESSION['msg'] = "Login Failed, Invalid Input!";
29 | 			header('location: index.php');
30 | 		}
31 | 		else{
32 | 			
33 | 			$row=mysqli_fetch_array($query);
34 | 			if ($row['access']==1){
35 | 				$_SESSION['id']=$row['userid'];
36 | 				?>
37 | 				<script>
38 | 					window.alert('Login Success, Welcome Admin!');
39 | 					window.location.href='admin/';
40 | 				</script>
41 | 				<?php
42 | 			}
43 | 			else{
44 | 				$_SESSION['id']=$row['userid'];
45 | 				?>
46 | 				<script>
47 | 					window.alert('Login Success, Welcome User!');
48 | 					window.location.href='user/';
49 | 				</script>
50 | 				<?php
51 | 			}
52 | 		}
53 | 		
54 | 		}
55 | 	}
56 | ?>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>ChatBot</title>
 5 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 6 | 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 7 | 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 8 | <style>
 9 | 	#login_form{
10 | 		width:350px;
11 | 		height:350px;
12 | 		position:relative;
13 | 		top:50px;
14 | 		margin: auto;
15 | 		padding: auto;
16 | 	}
17 | </style>
18 | </head>
19 | <body>
20 | <div class="container">
21 | 	<div id="login_form" class="well">
22 | 		<h2><center><span class="glyphicon glyphicon-lock"></span> Please Login</center></h2>
23 | 		<hr>
24 | 		<form method="POST" action="login.php">
25 | 		Username: <input type="text" name="username" class="form-control" required>
26 | 		<div style="height: 10px;"></div>		
27 | 		Password: <input type="password" name="password" class="form-control" required> 
28 | 		<div style="height: 10px;"></div>
29 | 		<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button> No account? <a href="signup.php"> Sign up</a>
30 | 		</form>
31 | 		<div style="height: 15px;"></div>
32 | 		<div style="color: red; font-size: 15px;">
33 | 			<center>
34 | 			<?php
35 | 				session_start();
36 | 				if(isset($_SESSION['msg'])){
37 | 					echo $_SESSION['msg'];
38 | 					unset($_SESSION['msg']);
39 | 				}
40 | 			?>
41 | 			</center>
42 | 		</div>
43 | 	</div>
44 | </div>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/signup.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>ChatBot</title>
 5 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 6 | 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 7 | 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 8 | <style>
 9 | 	#signup_form{
10 | 		width:350px;
11 | 		height:430px;
12 | 		position:relative;
13 | 		top:50px;
14 | 		margin: auto;
15 | 		padding: auto;
16 | 	}
17 | </style>
18 | </head>
19 | <body>
20 | <div class="container">
21 | 	<div id="signup_form" class="well">
22 | 		<h2><center><span class="glyphicon glyphicon-user"></span> Sign Up</center></h2>
23 | 		<hr>
24 | 		<form method="POST" action="register.php">
25 | 		Name: <input type="text" name="name" class="form-control" required>
26 | 		<div style="height: 10px;"></div>
27 | 		Username: <input type="text" name="username" class="form-control" required>
28 | 		<div style="height: 10px;"></div>		
29 | 		Password: <input type="password" name="password" class="form-control" required> 
30 | 		<div style="height: 10px;"></div>
31 | 		<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Sign Up</button> <a href="index.php"> Back to Login</a>
32 | 		</form>
33 | 		<div style="height: 15px;"></div>
34 | 		<div style="color: red; font-size: 15px;">
35 | 			<center>
36 | 			<?php
37 | 				session_start();
38 | 				if(isset($_SESSION['sign_msg'])){
39 | 					echo $_SESSION['sign_msg'];
40 | 					unset($_SESSION['sign_msg']);
41 | 				}
42 | 			?>
43 | 			</center>
44 | 		</div>
45 | 	</div>
46 | </div>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/js/dataTables.bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  DataTables Bootstrap 3 integration
3 |  ©2011-2014 SpryMedia Ltd - datatables.net/license
4 | */
5 | (function(){var f=function(c,b){c.extend(!0,b.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-6'i><'col-sm-6'p>>",renderer:"bootstrap"});c.extend(b.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});b.ext.renderer.pageButton.bootstrap=function(g,f,p,k,h,l){var q=new b.Api(g),r=g.oClasses,i=g.oLanguage.oPaginate,d,e,o=function(b,f){var j,m,n,a,k=function(a){a.preventDefault();
6 | c(a.currentTarget).hasClass("disabled")||q.page(a.data.action).draw(!1)};j=0;for(m=f.length;j<m;j++)if(a=f[j],c.isArray(a))o(b,a);else{e=d="";switch(a){case "ellipsis":d="&hellip;";e="disabled";break;case "first":d=i.sFirst;e=a+(0<h?"":" disabled");break;case "previous":d=i.sPrevious;e=a+(0<h?"":" disabled");break;case "next":d=i.sNext;e=a+(h<l-1?"":" disabled");break;case "last":d=i.sLast;e=a+(h<l-1?"":" disabled");break;default:d=a+1,e=h===a?"active":""}d&&(n=c("<li>",{"class":r.sPageButton+" "+
7 | e,"aria-controls":g.sTableId,tabindex:g.iTabIndex,id:0===p&&"string"===typeof a?g.sTableId+"_"+a:null}).append(c("<a>",{href:"#"}).html(d)).appendTo(b),g.oApi._fnBindAction(n,{action:a},k))}};o(c(f).empty().html('<ul class="pagination"/>').children("ul"),k)};b.TableTools&&(c.extend(!0,b.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn btn-default",disabled:"disabled"},collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info"},
8 | select:{row:"active"}}),c.extend(!0,b.TableTools.DEFAULTS.oTags,{collection:{container:"ul",button:"li",liner:"a"}}))};"function"===typeof define&&define.amd?define(["jquery","datatables"],f):"object"===typeof exports?f(require("jquery"),require("datatables")):jQuery&&f(jQuery,jQuery.fn.dataTable)})(window,document);
9 | 


--------------------------------------------------------------------------------
/user/mychat.php:
--------------------------------------------------------------------------------
 1 | <div class="col-lg-4">
 2 | 	<div class="panel panel-default">
 3 | 	<?php
 4 | 		$me=mysqli_query($conn,"select * from chat_member left join chatroom on chatroom.chatroomid=chat_member.chatroomid where chat_member.userid='".$_SESSION['id']."' order by chatroom.date_created desc");
 5 | 		$numme=mysqli_num_rows($me);
 6 | 	?>
 7 | 		<div class="panel-heading"><center><strong>My Chatrooms <span class="badge"><?php echo $numme; ?></span></strong></center></div>
 8 | 		<div class="panel-body">
 9 | 		<table width="100%" class="table table-striped table-bordered table-hover" id="myChatRoom">
10 | 			<thead>
11 | 			<th>Chat Room Name</th>
12 | 			<th></th>
13 | 			</thead>
14 | 			<tbody>
15 | 			<?php
16 | 				$my=mysqli_query($conn,"select * from chat_member left join chatroom on chatroom.chatroomid=chat_member.chatroomid where chat_member.userid='".$_SESSION['id']."' order by chatroom.date_created desc");
17 | 					while($myrow=mysqli_fetch_array($my)){
18 | 						$nq=mysqli_query($conn,"select * from chat_member where chatroomid='".$myrow['chatroomid']."'");
19 | 						?>
20 | 						<tr>
21 | 							<td><span class="glyphicon glyphicon-user"></span><span class="badge"><?php echo mysqli_num_rows($nq); ?></span> <a href="chatroom.php?id=<?php echo $myrow['chatroomid']; ?>"><?php echo $myrow['chat_name']; ?></a></td>
22 | 							<td>
23 | 								<?php
24 | 									$memb=mysqli_query($conn,"select * from chatroom where userid='".$_SESSION['id']."' and chatroomid='".$myrow['chatroomid']."'");
25 | 									if (mysqli_num_rows($memb)>0){
26 | 										?>
27 | 										<button type="button" class="btn btn-danger btn-sm delete2" value="<?php echo $myrow['chatroomid']; ?>">Delete</button>
28 | 										<?php
29 | 									}
30 | 									else{
31 | 										?>
32 | 										<button type="button" class="btn btn-warning btn-sm leave2" value="<?php echo $myrow['chatroomid']; ?>">Leave</button>
33 | 										<?php
34 | 									}
35 | 								?>
36 | 							</td>
37 | 						</tr>
38 | 						<?php
39 | 					}
40 | 			?>
41 | 			</tbody>
42 | 		</table>
43 | 		</div>
44 | 	</div>
45 | </div>


--------------------------------------------------------------------------------
/admin/mychat.php:
--------------------------------------------------------------------------------
 1 | <div class="col-lg-4">
 2 | 	<div class="panel panel-default">
 3 | 	<?php
 4 | 		$me=mysqli_query($conn,"select * from chat_member left join chatroom on chatroom.chatroomid=chat_member.chatroomid where chat_member.userid='".$_SESSION['id']."' order by chatroom.date_created desc");
 5 | 		$numme=mysqli_num_rows($me);
 6 | 	?>
 7 | 		<div class="panel-heading"><center><strong>Admin Chatrooms <span class="badge"><?php echo $numme; ?></span></strong></center></div>
 8 | 		<div class="panel-body">
 9 | 		<table width="100%" class="table table-striped table-bordered table-hover" id="myChatRoom">
10 | 			<thead>
11 | 			<th>Chat Room Name</th>
12 | 			<th></th>
13 | 			</thead>
14 | 			<tbody>
15 | 			<?php
16 | 				$my=mysqli_query($conn,"select * from chat_member left join chatroom on chatroom.chatroomid=chat_member.chatroomid where chat_member.userid='".$_SESSION['id']."' order by chatroom.date_created desc");
17 | 					while($myrow=mysqli_fetch_array($my)){
18 | 						$nq=mysqli_query($conn,"select * from chat_member where chatroomid='".$myrow['chatroomid']."'");
19 | 						?>
20 | 						<tr>
21 | 							<td><span class="glyphicon glyphicon-user"></span><span class="badge"><?php echo mysqli_num_rows($nq); ?></span> <a href="chatroom.php?id=<?php echo $myrow['chatroomid']; ?>"><?php echo $myrow['chat_name']; ?></a></td>
22 | 							<td>
23 | 								<?php
24 | 									$memb=mysqli_query($conn,"select * from chatroom where userid='".$_SESSION['id']."' and chatroomid='".$myrow['chatroomid']."'");
25 | 									if (mysqli_num_rows($memb)>0){
26 | 										?>
27 | 										<button type="button" class="btn btn-danger btn-sm delete2" value="<?php echo $myrow['chatroomid']; ?>">Delete</button>
28 | 										<?php
29 | 									}
30 | 									else{
31 | 										?>
32 | 										<button type="button" class="btn btn-warning btn-sm leave2" value="<?php echo $myrow['chatroomid']; ?>">Leave</button>
33 | 										<?php
34 | 									}
35 | 								?>
36 | 							</td>
37 | 						</tr>
38 | 						<?php
39 | 					}
40 | 			?>
41 | 			</tbody>
42 | 		</table>
43 | 		</div>
44 | 	</div>
45 | </div>


--------------------------------------------------------------------------------
/admin/chatlist.php:
--------------------------------------------------------------------------------
 1 | <div class="col-lg-12">
 2 |     <div class="panel panel-default" style="height:50px;">
 3 | 		<span style="font-size:18px; margin-left:10px; position:relative; top:13px;"><strong><span class="glyphicon glyphicon-list"></span> List of Chat Rooms</strong></span>
 4 | 		<div class="pull-right" style="margin-right:10px; margin-top:7px;">
 5 | 			<a href="#add_chatroom" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add</a>
 6 | 		</div>
 7 | 	</div>
 8 | 	<table width="100%" class="table table-striped table-bordered table-hover" id="chatRoom">
 9 |         <thead>
10 |             <tr>
11 |                 <th>Chat Room Name</th>
12 |                 <th>Password</th>
13 | 				<th>Date Created</th>
14 | 				<th>Action</th>
15 | 			</tr>
16 | 		</thead>
17 | 		<tbody>
18 | 		<?php
19 | 			$query=mysqli_query($conn,"select * from chatroom order by date_created desc");
20 | 			while($row=mysqli_fetch_array($query)){
21 | 				$num=mysqli_query($conn,"select * from chat_member where chatroomid='".$row['chatroomid']."'");
22 | 			?>
23 | 			<tr>
24 | 				<td><span class="glyphicon glyphicon-user"></span><span class="badge"><?php echo mysqli_num_rows($num); ?></span> <input type="hidden" id="name<?php echo $row['chatroomid']; ?>" value="<?php echo $row['chat_name']; ?>"><?php echo $row['chat_name']; ?></td>
25 | 				<td><input type="hidden" id="pass<?php echo $row['chatroomid']; ?>" value="<?php echo $row['chat_password']; ?>"><?php echo $row['chat_password']; ?></td>
26 | 				<td><?php echo date('M d, Y - h:i A', strtotime($row['date_created'])); ?></td>
27 | 				<td><a href="chatroom.php?id=<?php echo $row['chatroomid']; ?>" class="btn btn-info"><span class="glyphicon glyphicon-comment"></span> Join</a> || 
28 | 					<button class="btn btn-warning edit" value="<?php echo $row['chatroomid']; ?>"><span class="glyphicon glyphicon-pencil"></span> Edit</button> || 
29 | 					<button class="btn btn-danger delete" value="<?php echo $row['chatroomid']; ?>"><span class="glyphicon glyphicon-trash"></span> Delete</button>
30 | 				</td>
31 | 			</tr>
32 | 			<?php
33 | 			}
34 | 		?>
35 |         </tbody>
36 |     </table>                     
37 | </div>


--------------------------------------------------------------------------------
/admin/userlist.php:
--------------------------------------------------------------------------------
 1 | <div class="col-lg-12">
 2 |     <div class="panel panel-default" style="height:50px;">
 3 | 		<span style="font-size:18px; margin-left:10px; position:relative; top:13px;"><strong><span class="glyphicon glyphicon-user"></span> User List</strong></span>
 4 | 		<div class="pull-right" style="margin-right:10px; margin-top:7px;">
 5 | 			<a href="#add_user" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add</a>
 6 | 		</div>
 7 | 	</div>
 8 | 	<table width="100%" class="table table-striped table-bordered table-hover" id="userList">
 9 |         <thead>
10 |             <tr>
11 |                 <th>Name</th>
12 | 				<th>Username</th>
13 | 				<th>Password</th>
14 | 				<th>Photo</th>
15 | 				<th>Access</th>
16 | 				<th>Action</th>
17 | 			</tr>
18 | 		</thead>
19 | 		<tbody>
20 | 		<?php
21 | 			$query=mysqli_query($conn,"select * from `user` order by uname asc");
22 | 			while($row=mysqli_fetch_array($query)){
23 | 			?>
24 | 			<tr>
25 | 				<td><input type="hidden" id="ename<?php echo $row['userid']; ?>" value="<?php echo $row['uname']; ?>"><?php echo $row['uname']; ?></td>
26 | 				<td><input type="hidden" id="eusername<?php echo $row['userid']; ?>" value="<?php echo $row['username']; ?>"><?php echo $row['username']; ?></td>
27 | 				<td><input type="hidden" id="epassword<?php echo $row['userid']; ?>" value="<?php echo $row['password']; ?>"><?php echo $row['password']; ?></td>
28 | 				<td><img src="../<?php if(empty($row['photo'])){echo "upload/profile.jpg";}else{echo $row['photo'];} ?>" height="30px;" width="30px;"></td>
29 | 				<td>
30 | 					<?php 
31 | 						if ($row['access']==1){
32 | 							echo "Admin";
33 | 						}
34 | 						else{
35 | 							echo "User";
36 | 						}
37 | 					?>
38 | 				</td>
39 | 				<td> 
40 | 					<button type="button" class="btn btn-warning edituser" value="<?php echo $row['userid']; ?>"><span class="glyphicon glyphicon-pencil"></span> Edit</button> || 
41 | 					<button type="button" class="btn btn-danger deleteuser" value="<?php echo $row['userid']; ?>"><span class="glyphicon glyphicon-trash"></span> Delete</button>
42 | 				</td>
43 | 			</tr>
44 | 			<?php
45 | 			}
46 | 		?>
47 |         </tbody>
48 |     </table>                     
49 | </div>


--------------------------------------------------------------------------------
/admin/room.php:
--------------------------------------------------------------------------------
 1 | 		<div class="col-lg-12">
 2 |             <div class="panel panel-default" style="height:50px;">
 3 | 				<span style="font-size:18px; margin-left:10px; position:relative; top:13px;"><strong>Chat Room: <?php echo $chatrow['chat_name']; ?></strong></span>
 4 | 				<div class="pull-right" style="margin-right:10px; margin-top:7px;">
 5 | 					<span id="user_details" style="font-size:18px; position:relative; top:2px;"><strong>Members: </strong><span class="badge"><?php echo mysqli_num_rows($cmem); ?></span></span>
 6 | 					<a href="#add_member" data-toggle="modal" class="btn btn-primary">Add Member</a>
 7 | 					<a href="#delete_room" data-toggle="modal" class="btn btn-danger">Delete Room</a>
 8 | 					<a href="index.php" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Back</a>
 9 | 				</div>
10 | 				<div class="showme hidden" style="position: absolute; left:570px; top:20px;">
11 | 					<div class="well">
12 | 						<strong>Room Member/s:</strong>
13 | 						<div style="height: 10px;"></div>
14 | 					<?php
15 | 						$rm=mysqli_query($conn,"select * from chat_member left join `user` on user.userid=chat_member.userid where chatroomid='$id'");
16 | 						while($rmrow=mysqli_fetch_array($rm)){
17 | 							?>
18 | 							<span>
19 | 							<?php
20 | 								$creq=mysqli_query($conn,"select * from chatroom where chatroomid='$id'");
21 | 								$crerow=mysqli_fetch_array($creq);
22 | 								
23 | 								if ($crerow['userid']==$rmrow['userid']){
24 | 									?>
25 | 										<span class="glyphicon glyphicon-user"></span>
26 | 									<?php
27 | 								}
28 | 								
29 | 							?>
30 | 							<?php echo $rmrow['uname']; ?></span><br>
31 | 							<?php
32 | 						}
33 | 						
34 | 					?>
35 | 						
36 | 					</div>
37 | 				</div>
38 | 			</div>
39 | 			<div>
40 | 				<div class="panel panel-default" style="height: 400px;">
41 | 					<div style="height:10px;"></div>
42 | 					<span style="margin-left:10px;">Welcome to Chatroom</span><br>
43 | 					<span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
44 | 					<div style="height:10px;"></div>
45 | 					<div id="chat_area" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
46 | 					</div>
47 | 				</div>
48 | 				
49 | 				<div class="input-group">
50 | 					<input type="text" class="form-control" placeholder="Type message..." id="chat_msg">
51 | 					<span class="input-group-btn">
52 | 					<button class="btn btn-success" type="submit" id="send_msg" value="<?php echo $id; ?>">
53 | 					<span class="glyphicon glyphicon-comment"></span> Send
54 | 					</button>
55 | 					</span>
56 | 				</div>
57 | 				
58 | 			</div>			
59 | 		</div>


--------------------------------------------------------------------------------
/user/chatlist.php:
--------------------------------------------------------------------------------
 1 | <div class="col-lg-8">
 2 |     <div class="panel panel-default" style="height:50px;">
 3 | 		<span style="font-size:18px; margin-left:10px; position:relative; top:13px;"><strong><span class="glyphicon glyphicon-list"></span> List of Chat Rooms</strong></span>
 4 | 		<div class="pull-right" style="margin-right:10px; margin-top:7px;">
 5 | 			<a href="#add_chatroom" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add</a>
 6 | 		</div>
 7 | 	</div>
 8 | 	<table width="100%" class="table table-striped table-bordered table-hover" id="chatRoom">
 9 |         <thead>
10 |             <tr>
11 |                 <th>Chat Room Name</th>
12 | 				<th>Date Created</th>
13 | 				<th><span class="glyphicon glyphicon-lock"></span> Password || <span class="glyphicon glyphicon-user"></span> Member</th>
14 | 			</tr>
15 | 		</thead>
16 | 		<tbody>
17 | 		<?php
18 | 			$query=mysqli_query($conn,"select * from chatroom order by date_created desc");
19 | 			while($row=mysqli_fetch_array($query)){
20 | 			?>
21 | 			<tr>
22 | 				<input type="hidden" value="
23 | 				<?php
24 | 				$usera=array();
25 | 				$m=mysqli_query($conn,"select * from chat_member where chatroomid='".$row['chatroomid']."'");
26 | 				while($mrow=mysqli_fetch_array($m)){
27 | 					$usera[]=$mrow['userid'];
28 | 				}
29 | 				//1 member
30 | 				if (in_array($_SESSION['id'], $usera)){
31 | 					echo "1";
32 | 				}	
33 | 				else{
34 | 					//2 not member w/ pass
35 | 					if (!empty($row['chat_password'])){
36 | 						echo "2";
37 | 					}
38 | 					else{
39 | 					//3 not member w/o pass
40 | 						echo "3";
41 | 					}
42 | 				}
43 | 				?>
44 | 				
45 | 				"  id="status<?php echo $row['chatroomid']; ?>">
46 | 				<td>
47 | 					<?php
48 | 					$num=mysqli_query($conn,"select * from chat_member where chatroomid='".$row['chatroomid']."'");
49 | 					?>
50 | 					<span class="badge"><?php echo mysqli_num_rows($num); ?></span> <?php echo $row['chat_name']; ?>
51 | 				</td>
52 | 				<td><?php echo date('M d, Y - h:i A', strtotime($row['date_created'])); ?></td>
53 | 				<td><button value="<?php echo $row['chatroomid']; ?>" class="btn btn-info join_chat"><span class="glyphicon glyphicon-comment"></span> Join</button> &nbsp;
54 | 					<?php
55 | 					if (!empty($row['chat_password'])){
56 | 						echo '<span class="glyphicon glyphicon-lock"></span>&nbsp;';
57 | 					}
58 | 					$qq=mysqli_query($conn,"select * from chat_member where chatroomid='".$row['chatroomid']."' and userid='".$_SESSION['id']."'");
59 | 					if (mysqli_num_rows($qq)>0){
60 | 						echo '<span class="glyphicon glyphicon-user"></span>';
61 | 					}
62 | 					?>
63 | 				</td>
64 | 			</tr>
65 | 			<?php
66 | 			}
67 | 		?>
68 |         </tbody>
69 |     </table>                     
70 | </div>


--------------------------------------------------------------------------------
/admin/index.php:
--------------------------------------------------------------------------------
  1 | <?php include('session.php'); ?>
  2 | <?php include('header.php'); ?>
  3 | <body>
  4 | <?php include('navbar.php'); ?>
  5 | <div class="container">
  6 | 	<div class="row">
  7 | 		<?php include('chatlist.php'); ?>
  8 | 	</div>
  9 | </div>
 10 | <?php include('crudroom_modal.php'); ?>
 11 | <?php include('modal.php'); ?>
 12 | 
 13 | <script src="../js/jquery.dataTables.min.js"></script>
 14 | <script src="../js/dataTables.bootstrap.min.js"></script>
 15 | <script src="../js/dataTables.responsive.js"></script>
 16 | <script>
 17 | $(document).ready(function(){
 18 | 	
 19 | 	$('#chatRoom').DataTable({
 20 | 	"bLengthChange": true,
 21 | 	"bInfo": true,
 22 | 	"bPaginate": true,
 23 | 	"bFilter": true,
 24 | 	"bSort": false,
 25 | 	"pageLength": 7
 26 | 	});
 27 | 	
 28 | 	$(document).on('click', '#addchatroom', function(){
 29 | 		chatname=$('#chat_name').val();
 30 | 		chatpass=$('#chat_password').val();
 31 | 			$.ajax({
 32 | 				url:"add_chatroom.php",
 33 | 				method:"POST",
 34 | 				data:{
 35 | 					chatname: chatname,
 36 | 					chatpass: chatpass,
 37 | 				},
 38 | 				success:function(data){
 39 | 				window.location.href='chatroom.php?id='+data;
 40 | 				}
 41 | 			});
 42 | 		
 43 | 	});
 44 | 	//
 45 | 	$(document).on('click', '.delete', function(){
 46 | 		var rid=$(this).val();
 47 | 		$('#delete_room').modal('show');
 48 | 		$('.modal-footer #confirm_delete').val(rid);
 49 | 	});
 50 | 	
 51 | 	$(document).on('click', '#confirm_delete', function(){
 52 | 		var nrid=$(this).val();
 53 | 		$('#delete_room').modal('hide');
 54 | 		$('body').removeClass('modal-open');
 55 | 		$('.modal-backdrop').remove();
 56 | 			$.ajax({
 57 | 				url:"deleteroom.php",
 58 | 				method:"POST",
 59 | 				data:{
 60 | 					id: nrid,
 61 | 					del: 1,
 62 | 				},
 63 | 				success:function(){
 64 | 					window.location.href='index.php';
 65 | 				}
 66 | 			});
 67 | 	});
 68 | 	
 69 | 	$(document).on('click', '.edit', function(){
 70 | 		var rid=$(this).val();
 71 | 		var name=$('#name'+rid).val();
 72 | 		var pass=$('#pass'+rid).val();
 73 | 		$('#edit_room').modal('show');
 74 | 		$('.modal-body #room_name').val(name);
 75 | 		$('.modal-body #room_password').val(pass);
 76 | 		$('.modal-footer #confirm_update').val(rid);
 77 | 	});
 78 | 	
 79 | 	$(document).on('click', '#confirm_update', function(){
 80 | 		var nrid=$(this).val();
 81 | 		var roomname=$('#room_name').val();
 82 | 		var roompass=$('#room_password').val();
 83 | 		$('#edit_room').modal('hide');
 84 | 		$('body').removeClass('modal-open');
 85 | 		$('.modal-backdrop').remove();
 86 | 			$.ajax({
 87 | 				url:"update_room.php",
 88 | 				method:"POST",
 89 | 				data:{
 90 | 					id: nrid,
 91 | 					name: roomname,
 92 | 					pass: roompass,
 93 | 					edit: 1,
 94 | 				},
 95 | 				success:function(){
 96 | 					window.location.href='index.php';
 97 | 				}
 98 | 			});
 99 | 	});
100 |  
101 | });
102 | </script>	
103 | </body>
104 | </html>


--------------------------------------------------------------------------------
/user/room.php:
--------------------------------------------------------------------------------
 1 | 		<div class="col-lg-8">
 2 |             <div class="panel panel-default" style="height:50px;">
 3 | 				<span style="font-size:18px; margin-left:10px; position:relative; top:13px;"><strong><span  id="user_details"><span class="glyphicon glyphicon-user"></span><span class="badge"><?php echo mysqli_num_rows($cmem); ?></span></span> <?php echo $chatrow['chat_name']; ?></strong></span>
 4 | 				<div class="showme hidden" style="position: absolute; left:-120px; top:20px;">
 5 | 					<div class="well">
 6 | 						<strong>Room Member/s:</strong>
 7 | 						<div style="height: 10px;"></div>
 8 | 					<?php
 9 | 						$rm=mysqli_query($conn,"select * from chat_member left join `user` on user.userid=chat_member.userid where chatroomid='$id'");
10 | 						while($rmrow=mysqli_fetch_array($rm)){
11 | 							?>
12 | 							<span>
13 | 							<?php
14 | 								$creq=mysqli_query($conn,"select * from chatroom where chatroomid='$id'");
15 | 								$crerow=mysqli_fetch_array($creq);
16 | 								
17 | 								if ($crerow['userid']==$rmrow['userid']){
18 | 									?>
19 | 										<span class="glyphicon glyphicon-user"></span>
20 | 									<?php
21 | 								}
22 | 								
23 | 							?>
24 | 							<?php echo $rmrow['uname']; ?></span><br>
25 | 							<?php
26 | 						}
27 | 						
28 | 					?>
29 | 						
30 | 					</div>
31 | 				</div>
32 | 				<div class="pull-right" style="margin-right:10px; margin-top:7px;">
33 | 					<?php
34 | 						if ($chatrow['userid']==$_SESSION['id']){
35 | 							?>
36 | 							<a href="index.php" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Lobby</a>
37 | 							<a href="#delete_room" data-toggle="modal" class="btn btn-danger">Delete Room</a>
38 | 							<a href="#add_member" data-toggle="modal" class="btn btn-primary">Add Member</a>
39 | 							<?php
40 | 						}
41 | 						else{
42 | 							?>
43 | 							<a href="index.php" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Lobby</a>
44 | 							<a href="#leave_room" data-toggle="modal" class="btn btn-warning">Leave Room</a>
45 | 							<?php
46 | 						}
47 | 					?>
48 | 				</div>
49 | 			</div>
50 | 			<div>
51 | 				<div class="panel panel-default" style="height: 400px;">
52 | 					<div style="height:10px;"></div>
53 | 					<span style="margin-left:10px;">Welcome to Chatroom</span><br>
54 | 					<span style="font-size:10px; margin-left:10px;"><i>Note: Avoid using foul language and hate speech to avoid banning of account</i></span>
55 | 					<div style="height:10px;"></div>
56 | 					<div id="chat_area" style="margin-left:10px; max-height:320px; overflow-y:scroll;">
57 | 					</div>
58 | 				</div>
59 | 				
60 | 				<div class="input-group">
61 | 					<input type="text" class="form-control" placeholder="Type message..." id="chat_msg">
62 | 					<span class="input-group-btn">
63 | 					<button class="btn btn-success" type="submit" id="send_msg" value="<?php echo $id; ?>">
64 | 					<span class="glyphicon glyphicon-comment"></span> Send
65 | 					</button>
66 | 					</span>
67 | 				</div>
68 | 				
69 | 			</div>			
70 | 		</div>


--------------------------------------------------------------------------------
/admin/user.php:
--------------------------------------------------------------------------------
  1 | <?php include('session.php'); ?>
  2 | <?php include('header.php'); ?>
  3 | <body>
  4 | <?php include('navbar.php'); ?>
  5 | <div class="container">
  6 | 	<div class="row">
  7 | 		<?php include('userlist.php'); ?>
  8 | 	</div>
  9 | </div>
 10 | 
 11 | <?php include('cruduser_modal.php'); ?>
 12 | <?php include('modal.php'); ?>
 13 | 
 14 | <script src="../js/jquery.dataTables.min.js"></script>
 15 | <script src="../js/dataTables.bootstrap.min.js"></script>
 16 | <script src="../js/dataTables.responsive.js"></script>
 17 | <script>
 18 | $(document).ready(function(){
 19 | 	
 20 | 	
 21 | 	$('#userList').DataTable({
 22 | 	"bLengthChange": true,
 23 | 	"bInfo": true,
 24 | 	"bPaginate": true,
 25 | 	"bFilter": true,
 26 | 	"bSort": false,
 27 | 	"pageLength": 7
 28 | 	});
 29 | 	
 30 | 	$(document).on('click', '#adduser', function(){
 31 | 		name=$('#uname').val();
 32 | 		username=$('#uusername').val();
 33 | 		password=$('#upassword').val();
 34 | 		access=$('#uaccess').val();
 35 | 			$.ajax({
 36 | 				url:"add_user.php",
 37 | 				method:"POST",
 38 | 				data:{
 39 | 					name: name,
 40 | 					username: username,
 41 | 					password: password,
 42 | 					access: access,
 43 | 					adduser: 1,
 44 | 				},
 45 | 				success:function(){
 46 | 					window.location.href='user.php';
 47 | 				}
 48 | 			});
 49 | 		
 50 | 	});
 51 | 	//
 52 | 	$(document).on('click', '.deleteuser', function(){
 53 | 		var rid=$(this).val();
 54 | 		$('#delete_user').modal('show');
 55 | 		$('.modal-footer #confirm_delete').val(rid);
 56 | 	});
 57 | 	
 58 | 	$(document).on('click', '#confirm_delete', function(){
 59 | 		var nrid=$(this).val();
 60 | 		$('#delete_user').modal('hide');
 61 | 		$('body').removeClass('modal-open');
 62 | 		$('.modal-backdrop').remove();
 63 | 			$.ajax({
 64 | 				url:"deleteuser.php",
 65 | 				method:"POST",
 66 | 				data:{
 67 | 					id: nrid,
 68 | 					del: 1,
 69 | 				},
 70 | 				success:function(){
 71 | 					window.location.href='user.php';
 72 | 				}
 73 | 			});
 74 | 	});
 75 | 	
 76 | 	$(document).on('click', '.edituser', function(){
 77 | 		var rid=$(this).val();
 78 | 		var name=$('#ename'+rid).val();
 79 | 		var username=$('#eusername'+rid).val();
 80 | 		var password=$('#epassword'+rid).val();
 81 | 		$('#edit_user').modal('show');
 82 | 		$('.modal-body #user_name').val(name);
 83 | 		$('.modal-body #user_user').val(username);
 84 | 		$('.modal-body #user_pass').val(password);
 85 | 		$('.modal-footer #confirm_update').val(rid);
 86 | 	});
 87 | 	
 88 | 	$(document).on('click', '#confirm_update', function(){
 89 | 		var nrid=$(this).val();
 90 | 		var nname=$('#user_name').val();
 91 | 		var nuser=$('#user_user').val();
 92 | 		var npass=$('#user_pass').val();
 93 | 		$('#edit_user').modal('hide');
 94 | 		$('body').removeClass('modal-open');
 95 | 		$('.modal-backdrop').remove();
 96 | 			$.ajax({
 97 | 				url:"update_user.php",
 98 | 				method:"POST",
 99 | 				data:{
100 | 					id: nrid,
101 | 					name: nname,
102 | 					username: nuser,
103 | 					password: npass,
104 | 					edit: 1,
105 | 				},
106 | 				success:function(){
107 | 					window.location.href='user.php';
108 | 				}
109 | 			});
110 | 	});
111 |  
112 | });
113 | 
114 | </script>	
115 | </body>
116 | </html>


--------------------------------------------------------------------------------
/user/password_modal.php:
--------------------------------------------------------------------------------
 1 | <!-- Chat Room Password -->
 2 |     <div class="modal fade" id="join_chat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 3 |         <div class="modal-dialog">
 4 |             <div class="modal-content">
 5 |                 <div class="modal-header">
 6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 7 |                     <center><h4 class="modal-title" id="myModalLabel">Input Password</h4></center>
 8 |                 </div>
 9 |                 <div class="modal-body">
10 | 				<div class="container-fluid">
11 | 				<form method="POST" action="confirm_password.php">
12 | 					<div class="form-group input-group">
13 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
14 | 						<input type="text" style="width:350px;" class="form-control" name="chat_pass" required>
15 | 						<input type="hidden" id="chatid" name="chatid">
16 | 					</div>
17 |                 </div> 
18 | 				</div>
19 |                 <div class="modal-footer">
20 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
21 |                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Confirm</button>
22 | 				</form>
23 |                 </div>
24 |             </div>
25 |             <!-- /.modal-content -->
26 |         </div>
27 |         <!-- /.modal-dialog -->
28 |     </div>
29 | <!-- /.modal -->
30 | 
31 | 
32 | <!-- Add Chat Room -->
33 |     <div class="modal fade" id="add_chatroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
34 |         <div class="modal-dialog">
35 |             <div class="modal-content">
36 |                 <div class="modal-header">
37 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
38 |                     <center><h4 class="modal-title" id="myModalLabel">Add New Chat Room</h4></center>
39 |                 </div>
40 |                 <div class="modal-body">
41 | 				<div class="container-fluid">
42 | 				<form>
43 | 					<div class="form-group input-group">
44 | 						<span class="input-group-addon" style="width:150px;">Chat Room Name:</span>
45 | 						<input type="text" style="width:350px;" class="form-control" id="chat_name" required>
46 | 					</div>
47 | 					<div class="form-group input-group">
48 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
49 | 						<input type="text" style="width:350px;" class="form-control" id="chat_password">
50 | 					</div>
51 |                 </div> 
52 | 				</div>
53 |                 <div class="modal-footer">
54 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
55 |                     <button type="button" class="btn btn-primary" id="addchatroom"><span class="glyphicon glyphicon-check"></span> Add</button>
56 | 				</form>
57 |                 </div>
58 |             </div>
59 |             <!-- /.modal-content -->
60 |         </div>
61 |         <!-- /.modal-dialog -->
62 |     </div>
63 | <!-- /.modal -->


--------------------------------------------------------------------------------
/css/dataTables.responsive.css:
--------------------------------------------------------------------------------
  1 | table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
  2 | table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
  3 |   position: relative;
  4 |   padding-left: 30px;
  5 |   cursor: pointer;
  6 | }
  7 | table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
  8 | table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  9 |   top: 8px;
 10 |   left: 4px;
 11 |   height: 16px;
 12 |   width: 16px;
 13 |   display: block;
 14 |   position: absolute;
 15 |   color: white;
 16 |   border: 2px solid white;
 17 |   border-radius: 16px;
 18 |   text-align: center;
 19 |   line-height: 14px;
 20 |   box-shadow: 0 0 3px #444;
 21 |   box-sizing: content-box;
 22 |   content: '+';
 23 |   background-color: #31b131;
 24 | }
 25 | table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child.dataTables_empty:before,
 26 | table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child.dataTables_empty:before {
 27 |   display: none;
 28 | }
 29 | table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
 30 | table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
 31 |   content: '-';
 32 |   background-color: #d33333;
 33 | }
 34 | table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
 35 |   display: none;
 36 | }
 37 | table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
 38 | table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
 39 |   padding-left: 27px;
 40 | }
 41 | table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
 42 | table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
 43 |   top: 5px;
 44 |   left: 4px;
 45 |   height: 14px;
 46 |   width: 14px;
 47 |   border-radius: 14px;
 48 |   line-height: 12px;
 49 | }
 50 | table.dataTable.dtr-column > tbody > tr > td.control,
 51 | table.dataTable.dtr-column > tbody > tr > th.control {
 52 |   position: relative;
 53 |   cursor: pointer;
 54 | }
 55 | table.dataTable.dtr-column > tbody > tr > td.control:before,
 56 | table.dataTable.dtr-column > tbody > tr > th.control:before {
 57 |   top: 50%;
 58 |   left: 50%;
 59 |   height: 16px;
 60 |   width: 16px;
 61 |   margin-top: -10px;
 62 |   margin-left: -10px;
 63 |   display: block;
 64 |   position: absolute;
 65 |   color: white;
 66 |   border: 2px solid white;
 67 |   border-radius: 16px;
 68 |   text-align: center;
 69 |   line-height: 14px;
 70 |   box-shadow: 0 0 3px #444;
 71 |   box-sizing: content-box;
 72 |   content: '+';
 73 |   background-color: #31b131;
 74 | }
 75 | table.dataTable.dtr-column > tbody > tr.parent td.control:before,
 76 | table.dataTable.dtr-column > tbody > tr.parent th.control:before {
 77 |   content: '-';
 78 |   background-color: #d33333;
 79 | }
 80 | table.dataTable > tbody > tr.child {
 81 |   padding: 0.5em 1em;
 82 | }
 83 | table.dataTable > tbody > tr.child:hover {
 84 |   background: transparent !important;
 85 | }
 86 | table.dataTable > tbody > tr.child ul {
 87 |   display: inline-block;
 88 |   list-style-type: none;
 89 |   margin: 0;
 90 |   padding: 0;
 91 | }
 92 | table.dataTable > tbody > tr.child ul li {
 93 |   border-bottom: 1px solid #efefef;
 94 |   padding: 0.5em 0;
 95 | }
 96 | table.dataTable > tbody > tr.child ul li:first-child {
 97 |   padding-top: 0;
 98 | }
 99 | table.dataTable > tbody > tr.child ul li:last-child {
100 |   border-bottom: none;
101 | }
102 | table.dataTable > tbody > tr.child span.dtr-title {
103 |   display: inline-block;
104 |   min-width: 75px;
105 |   font-weight: bold;
106 | }
107 | 


--------------------------------------------------------------------------------
/user/index.php:
--------------------------------------------------------------------------------
  1 | <?php include('session.php'); ?>
  2 | <?php include('header.php'); ?>
  3 | <body>
  4 | <?php include('navbar.php'); ?>
  5 | <div class="container-fluid">
  6 | 	<div class="row">
  7 | 		<?php include('mychat.php'); ?>
  8 | 		<?php include('chatlist.php'); ?>
  9 | 	</div>
 10 | </div>
 11 | <?php include('password_modal.php'); ?>
 12 | <?php include('out_modal.php'); ?>
 13 | <?php include('modal.php'); ?>
 14 | 
 15 | <script src="../js/jquery.dataTables.min.js"></script>
 16 | <script src="../js/dataTables.bootstrap.min.js"></script>
 17 | <script src="../js/dataTables.responsive.js"></script>
 18 | <script>
 19 | $(document).ready(function(){
 20 | 	
 21 | 	$('#chatRoom').DataTable({
 22 | 	"bLengthChange": true,
 23 | 	"bInfo": true,
 24 | 	"bPaginate": true,
 25 | 	"bFilter": true,
 26 | 	"bSort": false,
 27 | 	"pageLength": 7
 28 | 	});
 29 | 	
 30 | 	$('#myChatRoom').DataTable({
 31 | 	"sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
 32 | 	"bLengthChange": false,
 33 | 	"bInfo": false,
 34 | 	"bPaginate": true,
 35 | 	"bFilter": false,
 36 | 	"bSort": false,
 37 | 	"pageLength": 8
 38 | 	});
 39 | 	
 40 | 	$(document).on('click', '.join_chat', function(){
 41 | 		var cid=$(this).val();
 42 | 		if ($('#status'+cid).val()==1){
 43 | 			window.location.href='chatroom.php?id='+cid;
 44 | 		}
 45 | 		else if ($('#status'+cid).val()==2){
 46 | 			$('#join_chat').modal('show');
 47 | 			$('.modal-body #chatid').val(cid);
 48 | 		}
 49 | 		else{
 50 | 			$.ajax({
 51 | 				url:"addmember.php",
 52 | 				method:"POST",
 53 | 				data:{
 54 | 					id: cid,
 55 | 				},
 56 | 				success:function(){
 57 | 				window.location.href='chatroom.php?id='+cid;
 58 | 				}
 59 | 			});
 60 | 		}
 61 | 	});
 62 | 	
 63 | 	$(document).on('click', '#addchatroom', function(){
 64 | 		chatname=$('#chat_name').val();
 65 | 		chatpass=$('#chat_password').val();
 66 | 			$.ajax({
 67 | 				url:"add_chatroom.php",
 68 | 				method:"POST",
 69 | 				data:{
 70 | 					chatname: chatname,
 71 | 					chatpass: chatpass,
 72 | 				},
 73 | 				success:function(data){
 74 | 				window.location.href='chatroom.php?id='+data;
 75 | 				}
 76 | 			});
 77 | 		
 78 | 	});
 79 | 	//
 80 | 	$(document).on('click', '.delete2', function(){
 81 | 		var rid=$(this).val();
 82 | 		$('#delete_room2').modal('show');
 83 | 		$('.modal-footer #confirm_delete2').val(rid);
 84 | 	});
 85 | 	
 86 | 	$(document).on('click', '#confirm_delete2', function(){
 87 | 		var nrid=$(this).val();
 88 | 		$('#delete_room2').modal('hide');
 89 | 		$('body').removeClass('modal-open');
 90 | 		$('.modal-backdrop').remove();
 91 | 			$.ajax({
 92 | 				url:"deleteroom.php",
 93 | 				method:"POST",
 94 | 				data:{
 95 | 					id: nrid,
 96 | 					del: 1,
 97 | 				},
 98 | 				success:function(){
 99 | 					window.location.href='index.php';
100 | 				}
101 | 			});
102 | 	});
103 | 	
104 | 	$(document).on('click', '.leave2', function(){
105 | 		var rid=$(this).val();
106 | 		$('#leave_room2').modal('show');
107 | 		$('.modal-footer #confirm_leave2').val(rid);
108 | 	});
109 | 	
110 | 	$(document).on('click', '#confirm_leave2', function(){
111 | 		var nrid=$(this).val();
112 | 		$('#leave_room2').modal('hide');
113 | 		$('body').removeClass('modal-open');
114 | 		$('.modal-backdrop').remove();
115 | 			$.ajax({
116 | 				url:"leaveroom.php",
117 | 				method:"POST",
118 | 				data:{
119 | 					id: nrid,
120 | 					leave: 1,
121 | 				},
122 | 				success:function(){
123 | 					window.location.href='index.php';
124 | 				}
125 | 			});
126 | 	});
127 |  
128 | });
129 | </script>	
130 | </body>
131 | </html>


--------------------------------------------------------------------------------
/admin/chatroom.php:
--------------------------------------------------------------------------------
  1 | <?php include('session.php'); ?>
  2 | <?php include('header.php'); ?>
  3 | <?php
  4 | 	$id=$_REQUEST['id'];
  5 | 	
  6 | 	$chatq=mysqli_query($conn,"select * from chatroom where chatroomid='$id'");
  7 | 	$chatrow=mysqli_fetch_array($chatq);
  8 | 	
  9 | 	$cmem=mysqli_query($conn,"select * from chat_member where chatroomid='$id'");
 10 | ?>
 11 | <body>
 12 | <?php include('navbar.php'); ?>
 13 | <div class="container">
 14 | 	<div class="row">
 15 | 		<?php include('room.php'); ?>
 16 | 	</div>
 17 | </div>
 18 | <?php include('room_modal.php'); ?>
 19 | <?php include('modal.php'); ?>
 20 | 
 21 | <script src="../js/jquery.dataTables.min.js"></script>
 22 | <script src="../js/dataTables.bootstrap.min.js"></script>
 23 | <script src="../js/dataTables.responsive.js"></script>
 24 | <script>
 25 | $(document).ready(function(){
 26 | 
 27 | 	displayChat();
 28 | 	
 29 | 		$(document).on('click', '#send_msg', function(){
 30 | 			id = <?php echo $id; ?>;
 31 | 			if($('#chat_msg').val() == ""){
 32 | 				alert('Please write message first');
 33 | 			}else{
 34 | 				$msg = $('#chat_msg').val();
 35 | 				$.ajax({
 36 | 					type: "POST",
 37 | 					url: "send_message.php",
 38 | 					data: {
 39 | 						msg: $msg,
 40 | 						id: id,
 41 | 					},
 42 | 					success: function(){
 43 | 						$('#chat_msg').val("");
 44 | 						displayChat();
 45 | 					}
 46 | 				});
 47 | 			}	
 48 | 		});
 49 | 		
 50 | 		$(document).on('click', '#confirm_leave', function(){
 51 | 			id = <?php echo $id; ?>;
 52 | 			$('#leave_room').modal('hide');
 53 | 			$('body').removeClass('modal-open');
 54 | 			$('.modal-backdrop').remove();
 55 | 				$.ajax({
 56 | 					type: "POST",
 57 | 					url: "leaveroom.php",
 58 | 					data: {
 59 | 						id: id,
 60 | 						leave: 1,
 61 | 					},
 62 | 					success: function(){
 63 | 						window.location.href='index.php';
 64 | 					}
 65 | 				});
 66 | 				
 67 | 		});
 68 | 		
 69 | 		$(document).on('click', '#confirm_delete', function(){
 70 | 			id = <?php echo $id; ?>;
 71 | 			$('#confirm_delete').modal('hide');
 72 | 			$('body').removeClass('modal-open');
 73 | 			$('.modal-backdrop').remove();
 74 | 				$.ajax({
 75 | 					type: "POST",
 76 | 					url: "deleteroom.php",
 77 | 					data: {
 78 | 						id: id,
 79 | 						del: 1,
 80 | 					},
 81 | 					success: function(){
 82 | 						window.location.href='index.php';
 83 | 					}
 84 | 				});
 85 | 				
 86 | 		});
 87 | 		
 88 | 		$(document).keypress(function(e){
 89 | 			if (e.which == 13){
 90 | 			$("#send_msg").click();
 91 | 			}
 92 | 		});
 93 | 		
 94 | 		$("#user_details").hover(function(){
 95 | 			$('.showme').removeClass('hidden');
 96 | 		},function(){
 97 | 			$('.showme').addClass('hidden');
 98 | 		});
 99 | 		
100 | 		//
101 | 	$(document).on('click', '.delete2', function(){
102 | 		var rid=$(this).val();
103 | 		$('#delete_room2').modal('show');
104 | 		$('.modal-footer #confirm_delete2').val(rid);
105 | 	});
106 | 	
107 | 	$(document).on('click', '#confirm_delete2', function(){
108 | 		var nrid=$(this).val();
109 | 		$('#delete_room2').modal('hide');
110 | 		$('body').removeClass('modal-open');
111 | 		$('.modal-backdrop').remove();
112 | 			$.ajax({
113 | 				url:"deleteroom.php",
114 | 				method:"POST",
115 | 				data:{
116 | 					id: nrid,
117 | 					del: 1,
118 | 				},
119 | 				success:function(){
120 | 					window.location.href='index.php';
121 | 				}
122 | 			});
123 | 	});
124 | 	
125 | 	$(document).on('click', '.leave2', function(){
126 | 		var rid=$(this).val();
127 | 		$('#leave_room2').modal('show');
128 | 		$('.modal-footer #confirm_leave2').val(rid);
129 | 	});
130 | 	
131 | 	$(document).on('click', '#confirm_leave2', function(){
132 | 		var nrid=$(this).val();
133 | 		$('#leave_room2').modal('hide');
134 | 		$('body').removeClass('modal-open');
135 | 		$('.modal-backdrop').remove();
136 | 			$.ajax({
137 | 				url:"leaveroom.php",
138 | 				method:"POST",
139 | 				data:{
140 | 					id: nrid,
141 | 					leave: 1,
142 | 				},
143 | 				success:function(){
144 | 					window.location.href='index.php';
145 | 				}
146 | 			});
147 | 	});
148 | });
149 | 	
150 | 	function displayChat(){
151 | 		id = <?php echo $id; ?>;
152 | 		$.ajax({
153 | 			url: 'fetch_chat.php',
154 | 			type: 'POST',
155 | 			async: false,
156 | 			data:{
157 | 				id: id,
158 | 				fetch: 1,
159 | 			},
160 | 			success: function(response){
161 | 				$('#chat_area').html(response);
162 | 				$("#chat_area").scrollTop($("#chat_area")[0].scrollHeight);
163 | 			}
164 | 		});
165 | 	}
166 | </script>	
167 | </body>
168 | </html>


--------------------------------------------------------------------------------
/admin/crudroom_modal.php:
--------------------------------------------------------------------------------
 1 | <!-- Delete Room -->
 2 |     <div class="modal fade" id="delete_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 3 |         <div class="modal-dialog">
 4 |             <div class="modal-content">
 5 |                 <div class="modal-header">
 6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 7 |                     <center><h4 class="modal-title" id="myModalLabel">Deleting Room...</h4></center>
 8 |                 </div>
 9 |                 <div class="modal-body">
10 | 				<div class="container-fluid">
11 | 					<h3><center>Are you sure?</center></h3>
12 |                 </div> 
13 | 				</div>
14 |                 <div class="modal-footer">
15 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
16 |                     <button type="button" class="btn btn-danger" id="confirm_delete"><span class="glyphicon glyphicon-check"></span> Delete</button>
17 |                 </div>
18 |             </div>
19 |             <!-- /.modal-content -->
20 |         </div>
21 |         <!-- /.modal-dialog -->
22 |     </div>
23 | <!-- /.modal -->
24 | 
25 | <!-- Edit Room -->
26 |     <div class="modal fade" id="edit_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
27 |         <div class="modal-dialog">
28 |             <div class="modal-content">
29 |                 <div class="modal-header">
30 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
31 |                     <center><h4 class="modal-title" id="myModalLabel">Edit Room</h4></center>
32 |                 </div>
33 |                 <div class="modal-body">
34 | 				<div class="container-fluid">
35 | 					<div class="form-group input-group">
36 | 						<span class="input-group-addon" style="width:150px;">Chat Room Name:</span>
37 | 						<input type="text" style="width:350px;" class="form-control" id="room_name">
38 | 					</div>
39 | 					<div class="form-group input-group">
40 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
41 | 						<input type="text" style="width:350px;" class="form-control" id="room_password">
42 | 					</div>
43 |                 </div> 
44 | 				</div>
45 |                 <div class="modal-footer">
46 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
47 |                     <button type="button" class="btn btn-success" id="confirm_update"><span class="glyphicon glyphicon-check"></span> Update</button>
48 | 				
49 |                 </div>
50 |             </div>
51 |             <!-- /.modal-content -->
52 |         </div>
53 |         <!-- /.modal-dialog -->
54 |     </div>
55 | <!-- /.modal -->
56 | 
57 | <!-- Add Chat Room -->
58 |     <div class="modal fade" id="add_chatroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
59 |         <div class="modal-dialog">
60 |             <div class="modal-content">
61 |                 <div class="modal-header">
62 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
63 |                     <center><h4 class="modal-title" id="myModalLabel">Add New Chat Room</h4></center>
64 |                 </div>
65 |                 <div class="modal-body">
66 | 				<div class="container-fluid">
67 | 				<form>
68 | 					<div class="form-group input-group">
69 | 						<span class="input-group-addon" style="width:150px;">Chat Room Name:</span>
70 | 						<input type="text" style="width:350px;" class="form-control" id="chat_name" required>
71 | 					</div>
72 | 					<div class="form-group input-group">
73 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
74 | 						<input type="text" style="width:350px;" class="form-control" id="chat_password">
75 | 					</div>
76 |                 </div> 
77 | 				</div>
78 |                 <div class="modal-footer">
79 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
80 |                     <button type="button" class="btn btn-primary" id="addchatroom"><span class="glyphicon glyphicon-check"></span> Add</button>
81 | 				</form>
82 |                 </div>
83 |             </div>
84 |             <!-- /.modal-content -->
85 |         </div>
86 |         <!-- /.modal-dialog -->
87 |     </div>
88 | <!-- /.modal -->


--------------------------------------------------------------------------------
/db/id3106473_localhost.sql:
--------------------------------------------------------------------------------
  1 | -- phpMyAdmin SQL Dump
  2 | -- version 4.6.6
  3 | -- https://www.phpmyadmin.net/
  4 | --
  5 | -- Host: localhost:3306
  6 | -- Generation Time: Oct 02, 2017 at 05:21 PM
  7 | -- Server version: 10.1.24-MariaDB
  8 | -- PHP Version: 7.0.8
  9 | 
 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 11 | SET time_zone = "+00:00";
 12 | 
 13 | 
 14 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
 15 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
 16 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
 17 | /*!40101 SET NAMES utf8mb4 */;
 18 | 
 19 | --
 20 | -- Database: `id3106473_localhost`
 21 | --
 22 | 
 23 | -- --------------------------------------------------------
 24 | 
 25 | --
 26 | -- Table structure for table `chat`
 27 | --
 28 | 
 29 | CREATE TABLE `chat` (
 30 |   `chatid` int(11) NOT NULL,
 31 |   `userid` int(11) NOT NULL,
 32 |   `chatroomid` int(11) NOT NULL,
 33 |   `message` varchar(200) NOT NULL,
 34 |   `chat_date` datetime NOT NULL
 35 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 36 | 
 37 | --
 38 | -- Dumping data for table `chat`
 39 | --
 40 | 
 41 | INSERT INTO `chat` (`chatid`, `userid`, `chatroomid`, `message`, `chat_date`) VALUES
 42 | (4, 1, 2, 'Hello People', '2017-10-02 17:15:26'),
 43 | (5, 1, 2, 'Hello People', '2017-10-02 17:15:29'),
 44 | (6, 4, 2, 'Hello admin', '2017-10-02 17:17:16'),
 45 | (7, 1, 1, 'Warning', '2017-10-02 17:18:33'),
 46 | (8, 4, 1, 'I know', '2017-10-02 17:19:04');
 47 | 
 48 | -- --------------------------------------------------------
 49 | 
 50 | --
 51 | -- Table structure for table `chatroom`
 52 | --
 53 | 
 54 | CREATE TABLE `chatroom` (
 55 |   `chatroomid` int(11) NOT NULL,
 56 |   `chat_name` varchar(60) NOT NULL,
 57 |   `date_created` datetime NOT NULL,
 58 |   `chat_password` varchar(30) NOT NULL,
 59 |   `userid` int(11) NOT NULL
 60 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 61 | 
 62 | --
 63 | -- Dumping data for table `chatroom`
 64 | --
 65 | 
 66 | INSERT INTO `chatroom` (`chatroomid`, `chat_name`, `date_created`, `chat_password`, `userid`) VALUES
 67 | (1, 'Chatroom Password', '2017-09-11 13:20:18', 'leeann', 2),
 68 | (2, 'Free Entrance', '2017-09-11 13:20:51', '', 3);
 69 | 
 70 | -- --------------------------------------------------------
 71 | 
 72 | --
 73 | -- Table structure for table `chat_member`
 74 | --
 75 | 
 76 | CREATE TABLE `chat_member` (
 77 |   `chat_memberid` int(11) NOT NULL,
 78 |   `chatroomid` int(11) NOT NULL,
 79 |   `userid` int(11) NOT NULL
 80 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 81 | 
 82 | --
 83 | -- Dumping data for table `chat_member`
 84 | --
 85 | 
 86 | INSERT INTO `chat_member` (`chat_memberid`, `chatroomid`, `userid`) VALUES
 87 | (1, 1, 2),
 88 | (2, 2, 3),
 89 | (6, 2, 5),
 90 | (7, 2, 4),
 91 | (8, 1, 4);
 92 | 
 93 | -- --------------------------------------------------------
 94 | 
 95 | --
 96 | -- Table structure for table `user`
 97 | --
 98 | 
 99 | CREATE TABLE `user` (
100 |   `userid` int(11) NOT NULL,
101 |   `username` varchar(30) NOT NULL,
102 |   `password` varchar(150) NOT NULL,
103 |   `uname` varchar(60) NOT NULL,
104 |   `photo` varchar(200) NOT NULL,
105 |   `access` int(1) NOT NULL
106 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
107 | 
108 | --
109 | -- Dumping data for table `user`
110 | --
111 | 
112 | INSERT INTO `user` (`userid`, `username`, `password`, `uname`, `photo`, `access`) VALUES
113 | (1, 'admin', '97a675dbf726a817d47060f0aa81f7a9', 'Admin', '', 1),
114 | (4, 'rayandas', '97a675dbf726a817d47060f0aa81f7a9', 'Rayan', '', 2),
115 | (5, 'vijay', '202cb962ac59075b964b07152d234b70', 'Vijay', '', 2);
116 | 
117 | --
118 | -- Indexes for dumped tables
119 | --
120 | 
121 | --
122 | -- Indexes for table `chat`
123 | --
124 | ALTER TABLE `chat`
125 |   ADD PRIMARY KEY (`chatid`);
126 | 
127 | --
128 | -- Indexes for table `chatroom`
129 | --
130 | ALTER TABLE `chatroom`
131 |   ADD PRIMARY KEY (`chatroomid`);
132 | 
133 | --
134 | -- Indexes for table `chat_member`
135 | --
136 | ALTER TABLE `chat_member`
137 |   ADD PRIMARY KEY (`chat_memberid`);
138 | 
139 | --
140 | -- Indexes for table `user`
141 | --
142 | ALTER TABLE `user`
143 |   ADD PRIMARY KEY (`userid`);
144 | 
145 | --
146 | -- AUTO_INCREMENT for dumped tables
147 | --
148 | 
149 | --
150 | -- AUTO_INCREMENT for table `chat`
151 | --
152 | ALTER TABLE `chat`
153 |   MODIFY `chatid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
154 | --
155 | -- AUTO_INCREMENT for table `chatroom`
156 | --
157 | ALTER TABLE `chatroom`
158 |   MODIFY `chatroomid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
159 | --
160 | -- AUTO_INCREMENT for table `chat_member`
161 | --
162 | ALTER TABLE `chat_member`
163 |   MODIFY `chat_memberid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
164 | --
165 | -- AUTO_INCREMENT for table `user`
166 | --
167 | ALTER TABLE `user`
168 |   MODIFY `userid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
169 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
170 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
171 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
172 | 


--------------------------------------------------------------------------------
/user/chatroom.php:
--------------------------------------------------------------------------------
  1 | <?php include('session.php'); ?>
  2 | <?php include('header.php'); ?>
  3 | <?php
  4 | 	$id=$_REQUEST['id'];
  5 | 	
  6 | 	$chatq=mysqli_query($conn,"select * from chatroom where chatroomid='$id'");
  7 | 	$chatrow=mysqli_fetch_array($chatq);
  8 | 	
  9 | 	$cmem=mysqli_query($conn,"select * from chat_member where chatroomid='$id'");
 10 | ?>
 11 | <body>
 12 | <?php include('navbar.php'); ?>
 13 | <div class="container-fluid">
 14 | 	<div class="row">
 15 | 		<?php include('mychat.php'); ?>
 16 | 		<?php include('room.php'); ?>
 17 | 	</div>
 18 | </div>
 19 | <?php include('room_modal.php'); ?>
 20 | <?php include('out_modal.php'); ?>
 21 | <?php include('modal.php'); ?>
 22 | 
 23 | <script src="../js/jquery.dataTables.min.js"></script>
 24 | <script src="../js/dataTables.bootstrap.min.js"></script>
 25 | <script src="../js/dataTables.responsive.js"></script>
 26 | <script>
 27 | $(document).ready(function(){
 28 | 	
 29 | 	$('#myChatRoom').DataTable({
 30 | 	"sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
 31 | 	"bLengthChange": false,
 32 | 	"bInfo": false,
 33 | 	"bPaginate": true,
 34 | 	"bFilter": false,
 35 | 	"bSort": false,
 36 | 	"pageLength": 8
 37 | 	});
 38 | 	
 39 | 	displayChat();
 40 | 	
 41 | 		$(document).on('click', '#send_msg', function(){
 42 | 			id = <?php echo $id; ?>;
 43 | 			if($('#chat_msg').val() == ""){
 44 | 				alert('Please write message first');
 45 | 			}else{
 46 | 				$msg = $('#chat_msg').val();
 47 | 				$.ajax({
 48 | 					type: "POST",
 49 | 					url: "send_message.php",
 50 | 					data: {
 51 | 						msg: $msg,
 52 | 						id: id,
 53 | 					},
 54 | 					success: function(){
 55 | 						$('#chat_msg').val("");
 56 | 						displayChat();
 57 | 					}
 58 | 				});
 59 | 			}	
 60 | 		});
 61 | 		
 62 | 		$(document).on('click', '#confirm_leave', function(){
 63 | 			id = <?php echo $id; ?>;
 64 | 			$('#leave_room').modal('hide');
 65 | 			$('body').removeClass('modal-open');
 66 | 			$('.modal-backdrop').remove();
 67 | 				$.ajax({
 68 | 					type: "POST",
 69 | 					url: "leaveroom.php",
 70 | 					data: {
 71 | 						id: id,
 72 | 						leave: 1,
 73 | 					},
 74 | 					success: function(){
 75 | 						window.location.href='index.php';
 76 | 					}
 77 | 				});
 78 | 				
 79 | 		});
 80 | 		
 81 | 		$(document).on('click', '#confirm_delete', function(){
 82 | 			id = <?php echo $id; ?>;
 83 | 			$('#confirm_delete').modal('hide');
 84 | 			$('body').removeClass('modal-open');
 85 | 			$('.modal-backdrop').remove();
 86 | 				$.ajax({
 87 | 					type: "POST",
 88 | 					url: "deleteroom.php",
 89 | 					data: {
 90 | 						id: id,
 91 | 						del: 1,
 92 | 					},
 93 | 					success: function(){
 94 | 						window.location.href='index.php';
 95 | 					}
 96 | 				});
 97 | 				
 98 | 		});
 99 | 		
100 | 		$(document).keypress(function(e){
101 | 			if (e.which == 13){
102 | 			$("#send_msg").click();
103 | 			}
104 | 		});
105 | 		
106 | 		$("#user_details").hover(function(){
107 | 			$('.showme').removeClass('hidden');
108 | 		},function(){
109 | 			$('.showme').addClass('hidden');
110 | 		});
111 | 		
112 | 		//
113 | 	$(document).on('click', '.delete2', function(){
114 | 		var rid=$(this).val();
115 | 		$('#delete_room2').modal('show');
116 | 		$('.modal-footer #confirm_delete2').val(rid);
117 | 	});
118 | 	
119 | 	$(document).on('click', '#confirm_delete2', function(){
120 | 		var nrid=$(this).val();
121 | 		$('#delete_room2').modal('hide');
122 | 		$('body').removeClass('modal-open');
123 | 		$('.modal-backdrop').remove();
124 | 			$.ajax({
125 | 				url:"deleteroom.php",
126 | 				method:"POST",
127 | 				data:{
128 | 					id: nrid,
129 | 					del: 1,
130 | 				},
131 | 				success:function(){
132 | 					window.location.href='index.php';
133 | 				}
134 | 			});
135 | 	});
136 | 	
137 | 	$(document).on('click', '.leave2', function(){
138 | 		var rid=$(this).val();
139 | 		$('#leave_room2').modal('show');
140 | 		$('.modal-footer #confirm_leave2').val(rid);
141 | 	});
142 | 	
143 | 	$(document).on('click', '#confirm_leave2', function(){
144 | 		var nrid=$(this).val();
145 | 		$('#leave_room2').modal('hide');
146 | 		$('body').removeClass('modal-open');
147 | 		$('.modal-backdrop').remove();
148 | 			$.ajax({
149 | 				url:"leaveroom.php",
150 | 				method:"POST",
151 | 				data:{
152 | 					id: nrid,
153 | 					leave: 1,
154 | 				},
155 | 				success:function(){
156 | 					window.location.href='index.php';
157 | 				}
158 | 			});
159 | 	});
160 | });
161 | 	
162 | 	function displayChat(){
163 | 		id = <?php echo $id; ?>;
164 | 		$.ajax({
165 | 			url: 'fetch_chat.php',
166 | 			type: 'POST',
167 | 			async: false,
168 | 			data:{
169 | 				id: id,
170 | 				fetch: 1,
171 | 			},
172 | 			success: function(response){
173 | 				$('#chat_area').html(response);
174 | 				$("#chat_area").scrollTop($("#chat_area")[0].scrollHeight);
175 | 			}
176 | 		});
177 | 	}
178 | </script>	
179 | </body>
180 | </html>


--------------------------------------------------------------------------------
/user/room_modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Leave Room -->
  2 |     <div class="modal fade" id="leave_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Leaving Room...</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 					<h3><center>Are you sure?</center></h3>
 12 | 					<span style="font-size: 11px;"><center><i>Note: Once you leave the room and you wanted to come back, password is needed for a locked room.</i></center></span>
 13 |                 </div> 
 14 | 				</div>
 15 |                 <div class="modal-footer">
 16 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 17 |                     <button type="submit" class="btn btn-warning" id="confirm_leave"><span class="glyphicon glyphicon-check"></span> Leave</button>
 18 | 				
 19 |                 </div>
 20 |             </div>
 21 |             <!-- /.modal-content -->
 22 |         </div>
 23 |         <!-- /.modal-dialog -->
 24 |     </div>
 25 | <!-- /.modal -->
 26 | 
 27 | <!-- Delete Room -->
 28 |     <div class="modal fade" id="delete_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 29 |         <div class="modal-dialog">
 30 |             <div class="modal-content">
 31 |                 <div class="modal-header">
 32 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 33 |                     <center><h4 class="modal-title" id="myModalLabel">Deleting Room...</h4></center>
 34 |                 </div>
 35 |                 <div class="modal-body">
 36 | 				<div class="container-fluid">
 37 | 					<h3><center>Are you sure?</center></h3>
 38 |                 </div> 
 39 | 				</div>
 40 |                 <div class="modal-footer">
 41 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 42 |                     <button type="submit" class="btn btn-danger" id="confirm_delete"><span class="glyphicon glyphicon-check"></span> Delete</button>
 43 | 				
 44 |                 </div>
 45 |             </div>
 46 |             <!-- /.modal-content -->
 47 |         </div>
 48 |         <!-- /.modal-dialog -->
 49 |     </div>
 50 | <!-- /.modal -->
 51 | 
 52 | <!-- Add Member -->
 53 |     <div class="modal fade" id="add_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 54 |         <div class="modal-dialog">
 55 |             <div class="modal-content">
 56 |                 <div class="modal-header">
 57 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 58 |                     <center><h4 class="modal-title" id="myModalLabel">Add Member</h4></center>
 59 |                 </div>
 60 |                 <div class="modal-body">
 61 | 				<div class="container-fluid">
 62 | 					<form method="POST" action="addnewmember.php?id=<?php echo $id; ?>">
 63 | 					<div class="form-group input-group">
 64 | 						<span class="input-group-addon" style="width:150px;">Select:</span>
 65 | 						<select style="width:350px;" class="form-control" name="user">
 66 | 							<?php
 67 | 							include('../conn.php');
 68 | 								$mem=array();
 69 | 								$um=mysqli_query($conn,"select * from `chat_member` where chatroomid='$id'");
 70 | 								while($umrow=mysqli_fetch_array($um)){
 71 | 									$mem[]=$umrow['userid'];
 72 | 								}
 73 | 								$users=implode($mem, "', '");
 74 | 								
 75 | 								$u=mysqli_query($conn,"select * from `user` where userid not in ('".$users."')");
 76 | 								if(mysqli_num_rows($u)<1){
 77 | 									?>
 78 | 									<option value="">No User Available</option>
 79 | 									<?php
 80 | 								}
 81 | 								else{
 82 | 								while($urow=mysqli_fetch_array($u)){
 83 | 									?>
 84 | 										<option value="<?php echo $urow['userid']; ?>"><?php echo $urow['uname']; ?></option>	
 85 | 									<?php
 86 | 								}
 87 | 								}
 88 | 							
 89 | 							?>
 90 | 						</select>
 91 | 					</div>
 92 |                 </div> 
 93 | 				</div>
 94 |                 <div class="modal-footer">
 95 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 96 |                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Add</button>
 97 | 					</form>
 98 |                 </div>
 99 |             </div>
100 |             <!-- /.modal-content -->
101 |         </div>
102 |         <!-- /.modal-dialog -->
103 |     </div>
104 | <!-- /.modal -->


--------------------------------------------------------------------------------
/admin/room_modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Leave Room -->
  2 |     <div class="modal fade" id="leave_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Leaving Room...</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 					<h3><center>Are you sure?</center></h3>
 12 | 					<span style="font-size: 11px;"><center><i>Note: Once you leave the room and you wanted to come back, password is needed for a locked room.</i></center></span>
 13 |                 </div> 
 14 | 				</div>
 15 |                 <div class="modal-footer">
 16 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 17 |                     <button type="submit" class="btn btn-warning" id="confirm_leave"><span class="glyphicon glyphicon-check"></span> Leave</button>
 18 | 				
 19 |                 </div>
 20 |             </div>
 21 |             <!-- /.modal-content -->
 22 |         </div>
 23 |         <!-- /.modal-dialog -->
 24 |     </div>
 25 | <!-- /.modal -->
 26 | 
 27 | <!-- Delete Room -->
 28 |     <div class="modal fade" id="delete_room" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 29 |         <div class="modal-dialog">
 30 |             <div class="modal-content">
 31 |                 <div class="modal-header">
 32 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 33 |                     <center><h4 class="modal-title" id="myModalLabel">Deleting Room...</h4></center>
 34 |                 </div>
 35 |                 <div class="modal-body">
 36 | 				<div class="container-fluid">
 37 | 					<h3><center>Are you sure?</center></h3>
 38 |                 </div> 
 39 | 				</div>
 40 |                 <div class="modal-footer">
 41 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 42 |                     <button type="submit" class="btn btn-danger" id="confirm_delete"><span class="glyphicon glyphicon-check"></span> Delete</button>
 43 | 				
 44 |                 </div>
 45 |             </div>
 46 |             <!-- /.modal-content -->
 47 |         </div>
 48 |         <!-- /.modal-dialog -->
 49 |     </div>
 50 | <!-- /.modal -->
 51 | 
 52 | <!-- Add Member -->
 53 |     <div class="modal fade" id="add_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 54 |         <div class="modal-dialog">
 55 |             <div class="modal-content">
 56 |                 <div class="modal-header">
 57 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 58 |                     <center><h4 class="modal-title" id="myModalLabel">Add Member</h4></center>
 59 |                 </div>
 60 |                 <div class="modal-body">
 61 | 				<div class="container-fluid">
 62 | 					<form method="POST" action="addnewmember.php?id=<?php echo $id; ?>">
 63 | 					<div class="form-group input-group">
 64 | 						<span class="input-group-addon" style="width:150px;">Select:</span>
 65 | 						<select style="width:350px;" class="form-control" name="user">
 66 | 							<?php
 67 | 							include('../conn.php');
 68 | 								$mem=array();
 69 | 								$um=mysqli_query($conn,"select * from `chat_member` where chatroomid='$id'");
 70 | 								while($umrow=mysqli_fetch_array($um)){
 71 | 									$mem[]=$umrow['userid'];
 72 | 								}
 73 | 								$users=implode($mem, "', '");
 74 | 								
 75 | 								$u=mysqli_query($conn,"select * from `user` where userid not in ('".$users."')");
 76 | 								if(mysqli_num_rows($u)<1){
 77 | 									?>
 78 | 									<option value="">No User Available</option>
 79 | 									<?php
 80 | 								}
 81 | 								else{
 82 | 								while($urow=mysqli_fetch_array($u)){
 83 | 									?>
 84 | 										<option value="<?php echo $urow['userid']; ?>"><?php echo $urow['uname']; ?></option>	
 85 | 									<?php
 86 | 								}
 87 | 								}
 88 | 							
 89 | 							?>
 90 | 						</select>
 91 | 					</div>
 92 |                 </div> 
 93 | 				</div>
 94 |                 <div class="modal-footer">
 95 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 96 |                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Add</button>
 97 | 					</form>
 98 |                 </div>
 99 |             </div>
100 |             <!-- /.modal-content -->
101 |         </div>
102 |         <!-- /.modal-dialog -->
103 |     </div>
104 | <!-- /.modal -->


--------------------------------------------------------------------------------
/user/out_modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Leave Room -->
  2 |     <div class="modal fade" id="leave_room2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Leaving Room...</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 					<h3><center>Are you sure?</center></h3>
 12 | 					<span style="font-size: 11px;"><center><i>Note: Once you leave the room and you wanted to come back, password is needed for a locked room.</i></center></span>
 13 |                 </div> 
 14 | 				</div>
 15 |                 <div class="modal-footer">
 16 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 17 |                     <button type="submit" class="btn btn-warning" id="confirm_leave2"><span class="glyphicon glyphicon-check"></span> Leave</button>
 18 | 				
 19 |                 </div>
 20 |             </div>
 21 |             <!-- /.modal-content -->
 22 |         </div>
 23 |         <!-- /.modal-dialog -->
 24 |     </div>
 25 | <!-- /.modal -->
 26 | 
 27 | <!-- Delete Room -->
 28 |     <div class="modal fade" id="delete_room2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 29 |         <div class="modal-dialog">
 30 |             <div class="modal-content">
 31 |                 <div class="modal-header">
 32 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 33 |                     <center><h4 class="modal-title" id="myModalLabel">Deleting Room...</h4></center>
 34 |                 </div>
 35 |                 <div class="modal-body">
 36 | 				<div class="container-fluid">
 37 | 					<h3><center>Are you sure?</center></h3>
 38 |                 </div> 
 39 | 				</div>
 40 |                 <div class="modal-footer">
 41 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 42 |                     <button type="submit" class="btn btn-danger" id="confirm_delete2"><span class="glyphicon glyphicon-check"></span> Delete</button>
 43 | 				
 44 |                 </div>
 45 |             </div>
 46 |             <!-- /.modal-content -->
 47 |         </div>
 48 |         <!-- /.modal-dialog -->
 49 |     </div>
 50 | <!-- /.modal -->
 51 | 
 52 | <!-- Add Member -->
 53 |     <div class="modal fade" id="add_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 54 |         <div class="modal-dialog">
 55 |             <div class="modal-content">
 56 |                 <div class="modal-header">
 57 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 58 |                     <center><h4 class="modal-title" id="myModalLabel">Add Member</h4></center>
 59 |                 </div>
 60 |                 <div class="modal-body">
 61 | 				<div class="container-fluid">
 62 | 					<form method="POST" action="addnewmember.php?id=<?php echo $id; ?>">
 63 | 					<div class="form-group input-group">
 64 | 						<span class="input-group-addon" style="width:150px;">Select:</span>
 65 | 						<select style="width:350px;" class="form-control" name="user">
 66 | 							<?php
 67 | 							include('../conn.php');
 68 | 								$mem=array();
 69 | 								$um=mysqli_query($conn,"select * from `chat_member` where chatroomid='$id'");
 70 | 								while($umrow=mysqli_fetch_array($um)){
 71 | 									$mem[]=$umrow['userid'];
 72 | 								}
 73 | 								$users=implode($mem, "', '");
 74 | 								
 75 | 								$u=mysqli_query($conn,"select * from `user` where userid not in ('".$users."')");
 76 | 								if(mysqli_num_rows($u)<1){
 77 | 									?>
 78 | 									<option value="">No User Available</option>
 79 | 									<?php
 80 | 								}
 81 | 								else{
 82 | 								while($urow=mysqli_fetch_array($u)){
 83 | 									?>
 84 | 										<option value="<?php echo $urow['userid']; ?>"><?php echo $urow['uname']; ?></option>	
 85 | 									<?php
 86 | 								}
 87 | 								}
 88 | 							
 89 | 							?>
 90 | 						</select>
 91 | 					</div>
 92 |                 </div> 
 93 | 				</div>
 94 |                 <div class="modal-footer">
 95 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 96 |                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Add</button>
 97 | 					</form>
 98 |                 </div>
 99 |             </div>
100 |             <!-- /.modal-content -->
101 |         </div>
102 |         <!-- /.modal-dialog -->
103 |     </div>
104 | <!-- /.modal -->


--------------------------------------------------------------------------------
/admin/cruduser_modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Add User -->
  2 |     <div class="modal fade" id="add_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Add New User</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 				<form>
 12 | 					<div class="form-group input-group">
 13 | 						<span class="input-group-addon" style="width:150px;">Name:</span>
 14 | 						<input type="text" style="width:350px;" class="form-control" id="uname" required>
 15 | 					</div>
 16 | 					<div class="form-group input-group">
 17 | 						<span class="input-group-addon" style="width:150px;">Username:</span>
 18 | 						<input type="text" style="width:350px;" class="form-control" id="uusername" required>
 19 | 					</div>
 20 | 					<div class="form-group input-group">
 21 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 22 | 						<input type="text" style="width:350px;" class="form-control" id="upassword" required>
 23 | 					</div>
 24 | 					<div class="form-group input-group">
 25 | 						<span class="input-group-addon" style="width:150px;">Access:</span>
 26 | 						<select style="width:350px;" class="form-control" id="uaccess">
 27 | 							<option value="2">User</option>
 28 | 							<option value="1">Admin</option>
 29 | 						</select>
 30 | 					</div>
 31 |                 </div> 
 32 | 				</div>
 33 |                 <div class="modal-footer">
 34 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 35 |                     <button type="button" class="btn btn-primary" id="adduser"><span class="glyphicon glyphicon-check"></span> Add</button>
 36 | 				</form>
 37 |                 </div>
 38 |             </div>
 39 |             <!-- /.modal-content -->
 40 |         </div>
 41 |         <!-- /.modal-dialog -->
 42 |     </div>
 43 | <!-- /.modal -->
 44 | 
 45 | <!-- Delete User -->
 46 |     <div class="modal fade" id="delete_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 47 |         <div class="modal-dialog">
 48 |             <div class="modal-content">
 49 |                 <div class="modal-header">
 50 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 51 |                     <center><h4 class="modal-title" id="myModalLabel">Deleting User...</h4></center>
 52 |                 </div>
 53 |                 <div class="modal-body">
 54 | 				<div class="container-fluid">
 55 | 					<h3><center>Are you sure?</center></h3>
 56 |                 </div> 
 57 | 				</div>
 58 |                 <div class="modal-footer">
 59 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 60 |                     <button type="button" class="btn btn-danger" id="confirm_delete"><span class="glyphicon glyphicon-check"></span> Delete</button>
 61 |                 </div>
 62 |             </div>
 63 |             <!-- /.modal-content -->
 64 |         </div>
 65 |         <!-- /.modal-dialog -->
 66 |     </div>
 67 | <!-- /.modal -->
 68 | 
 69 | <!-- Edit User -->
 70 |     <div class="modal fade" id="edit_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 71 |         <div class="modal-dialog">
 72 |             <div class="modal-content">
 73 |                 <div class="modal-header">
 74 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 75 |                     <center><h4 class="modal-title" id="myModalLabel">Edit User</h4></center>
 76 |                 </div>
 77 |                 <div class="modal-body">
 78 | 				<div class="container-fluid">
 79 | 					<div class="form-group input-group">
 80 | 						<span class="input-group-addon" style="width:150px;">Name:</span>
 81 | 						<input type="text" style="width:350px;" class="form-control" id="user_name">
 82 | 					</div>
 83 | 					<div class="form-group input-group">
 84 | 						<span class="input-group-addon" style="width:150px;">Username:</span>
 85 | 						<input type="text" style="width:350px;" class="form-control" id="user_user">
 86 | 					</div>
 87 | 					<div class="form-group input-group">
 88 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 89 | 						<input type="text" style="width:350px;" class="form-control" id="user_pass">
 90 | 					</div>
 91 |                 </div> 
 92 | 				</div>
 93 |                 <div class="modal-footer">
 94 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 95 |                     <button type="button" class="btn btn-success" id="confirm_update"><span class="glyphicon glyphicon-check"></span> Update</button>
 96 | 				
 97 |                 </div>
 98 |             </div>
 99 |             <!-- /.modal-content -->
100 |         </div>
101 |         <!-- /.modal-dialog -->
102 |     </div>
103 | <!-- /.modal -->
104 | 
105 | 


--------------------------------------------------------------------------------
/admin/modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Logout-->
  2 |     <div class="modal fade" id="logout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Logging out...</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 					<center><strong><span style="font-size: 15px;">Username: <?php echo $user; ?></span></strong></center>
 12 |                 </div> 
 13 | 				</div>
 14 |                 <div class="modal-footer">
 15 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 16 |                     <a href="logout.php" class="btn btn-danger"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
 17 |                 </div>
 18 |             </div>
 19 |             <!-- /.modal-content -->
 20 |         </div>
 21 |         <!-- /.modal-dialog -->
 22 |     </div>
 23 | <!-- /.modal -->
 24 | 
 25 | <!-- Update Photo-->
 26 |     <div class="modal fade" id="photo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 27 |         <div class="modal-dialog">
 28 |             <div class="modal-content">
 29 |                 <div class="modal-header">
 30 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 31 |                     <center><h4 class="modal-title" id="myModalLabel">Uploading Photo...</h4></center>
 32 |                 </div>
 33 |                 <div class="modal-body">
 34 | 				<div class="container-fluid">
 35 | 					<form method="POST" enctype="multipart/form-data" action="update_photo.php">
 36 | 					<div class="form-group input-group">
 37 | 						<span class="input-group-addon" style="width:150px;">Photo:</span>
 38 | 						<input type="file" style="width:350px;" class="form-control" name="image">
 39 | 					</div>
 40 |                 </div> 
 41 | 				</div>
 42 |                 <div class="modal-footer">
 43 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 44 |                     <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-upload"></span> Upload</button>
 45 | 					</form>
 46 |                 </div>
 47 |             </div>
 48 |             <!-- /.modal-content -->
 49 |         </div>
 50 |         <!-- /.modal-dialog -->
 51 |     </div>
 52 | <!-- /.modal -->
 53 | 
 54 | <!-- Account-->
 55 |     <div class="modal fade" id="account" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 56 |         <div class="modal-dialog">
 57 |             <div class="modal-content">
 58 |                 <div class="modal-header">
 59 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 60 |                     <center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
 61 |                 </div>
 62 |                 <div class="modal-body">
 63 | 				<div class="container-fluid">
 64 | 				<form method="POST" action="update_account.php">
 65 | 					<div style="height: 10px;"></div>
 66 | 					<div class="form-group input-group">
 67 | 						<span class="input-group-addon" style="width:150px;">Name:</span>
 68 | 						<input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
 69 | 					</div>
 70 | 					<div class="form-group input-group">
 71 | 						<span class="input-group-addon" style="width:150px;">Username:</span>
 72 | 						<input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
 73 | 					</div>
 74 | 					<div class="form-group input-group">
 75 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 76 | 						<input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
 77 | 					</div>
 78 | 					<hr>
 79 | 					<span>Enter current password to save changes:</span>
 80 | 					<div style="height: 10px;"></div>
 81 | 					<div class="form-group input-group">
 82 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 83 | 						<input type="password" style="width:350px;" class="form-control" name="cpassword">
 84 | 					</div>
 85 | 					<div class="form-group input-group">
 86 | 						<span class="input-group-addon" style="width:150px;">Again:</span>
 87 | 						<input type="password" style="width:350px;" class="form-control" name="apassword">
 88 | 					</div>
 89 |                 </div> 
 90 | 				</div>
 91 |                 <div class="modal-footer">
 92 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 93 |                     <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
 94 | 				</form>
 95 |                 </div>
 96 |             </div>
 97 |             <!-- /.modal-content -->
 98 |         </div>
 99 |         <!-- /.modal-dialog -->
100 |     </div>
101 | <!-- /.modal -->


--------------------------------------------------------------------------------
/user/modal.php:
--------------------------------------------------------------------------------
  1 | <!-- Logout-->
  2 |     <div class="modal fade" id="logout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3 |         <div class="modal-dialog">
  4 |             <div class="modal-content">
  5 |                 <div class="modal-header">
  6 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7 |                     <center><h4 class="modal-title" id="myModalLabel">Logging out...</h4></center>
  8 |                 </div>
  9 |                 <div class="modal-body">
 10 | 				<div class="container-fluid">
 11 | 					<center><strong><span style="font-size: 15px;">Username: <?php echo $user; ?></span></strong></center>
 12 |                 </div> 
 13 | 				</div>
 14 |                 <div class="modal-footer">
 15 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 16 |                     <a href="logout.php" class="btn btn-danger"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
 17 |                 </div>
 18 |             </div>
 19 |             <!-- /.modal-content -->
 20 |         </div>
 21 |         <!-- /.modal-dialog -->
 22 |     </div>
 23 | <!-- /.modal -->
 24 | 
 25 | <!-- Update Photo-->
 26 |     <div class="modal fade" id="photo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 27 |         <div class="modal-dialog">
 28 |             <div class="modal-content">
 29 |                 <div class="modal-header">
 30 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 31 |                     <center><h4 class="modal-title" id="myModalLabel">Uploading Photo...</h4></center>
 32 |                 </div>
 33 |                 <div class="modal-body">
 34 | 				<div class="container-fluid">
 35 | 					<form method="POST" enctype="multipart/form-data" action="update_photo.php">
 36 | 					<div class="form-group input-group">
 37 | 						<span class="input-group-addon" style="width:150px;">Photo:</span>
 38 | 						<input type="file" style="width:350px;" class="form-control" name="image">
 39 | 					</div>
 40 |                 </div> 
 41 | 				</div>
 42 |                 <div class="modal-footer">
 43 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 44 |                     <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-upload"></span> Upload</button>
 45 | 					</form>
 46 |                 </div>
 47 |             </div>
 48 |             <!-- /.modal-content -->
 49 |         </div>
 50 |         <!-- /.modal-dialog -->
 51 |     </div>
 52 | <!-- /.modal -->
 53 | 
 54 | <!-- Account-->
 55 |     <div class="modal fade" id="account" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 56 |         <div class="modal-dialog">
 57 |             <div class="modal-content">
 58 |                 <div class="modal-header">
 59 |                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 60 |                     <center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
 61 |                 </div>
 62 |                 <div class="modal-body">
 63 | 				<div class="container-fluid">
 64 | 				<form method="POST" action="update_account.php">
 65 | 					<div style="height: 10px;"></div>
 66 | 					<div class="form-group input-group">
 67 | 						<span class="input-group-addon" style="width:150px;">Name:</span>
 68 | 						<input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
 69 | 					</div>
 70 | 					<div class="form-group input-group">
 71 | 						<span class="input-group-addon" style="width:150px;">Username:</span>
 72 | 						<input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
 73 | 					</div>
 74 | 					<div class="form-group input-group">
 75 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 76 | 						<input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
 77 | 					</div>
 78 | 					<hr>
 79 | 					<span>Enter current password to save changes:</span>
 80 | 					<div style="height: 10px;"></div>
 81 | 					<div class="form-group input-group">
 82 | 						<span class="input-group-addon" style="width:150px;">Password:</span>
 83 | 						<input type="password" style="width:350px;" class="form-control" name="cpassword">
 84 | 					</div>
 85 | 					<div class="form-group input-group">
 86 | 						<span class="input-group-addon" style="width:150px;">Again:</span>
 87 | 						<input type="password" style="width:350px;" class="form-control" name="apassword">
 88 | 					</div>
 89 |                 </div> 
 90 | 				</div>
 91 |                 <div class="modal-footer">
 92 |                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
 93 |                     <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
 94 | 				</form>
 95 |                 </div>
 96 |             </div>
 97 |             <!-- /.modal-content -->
 98 |         </div>
 99 |         <!-- /.modal-dialog -->
100 |     </div>
101 | <!-- /.modal -->


--------------------------------------------------------------------------------
/css/dataTables.bootstrap.css:
--------------------------------------------------------------------------------
  1 | div.dataTables_length label {
  2 | 	font-weight: normal;
  3 | 	text-align: left;
  4 | 	white-space: nowrap;
  5 | }
  6 | 
  7 | div.dataTables_length select {
  8 | 	width: 75px;
  9 | 	display: inline-block;
 10 | }
 11 | 
 12 | div.dataTables_filter {
 13 | 	text-align: right;
 14 | }
 15 | 
 16 | div.dataTables_filter label {
 17 | 	font-weight: normal;
 18 | 	white-space: nowrap;
 19 | 	text-align: left;
 20 | }
 21 | 
 22 | div.dataTables_filter input {
 23 | 	margin-left: 0.5em;
 24 | 	display: inline-block;
 25 | }
 26 | 
 27 | div.dataTables_info {
 28 | 	padding-top: 8px;
 29 | 	white-space: nowrap;
 30 | }
 31 | 
 32 | div.dataTables_paginate {
 33 | 	margin: 0;
 34 | 	white-space: nowrap;
 35 | 	text-align: right;
 36 | }
 37 | 
 38 | div.dataTables_paginate ul.pagination {
 39 | 	margin: 2px 0;
 40 | 	white-space: nowrap;
 41 | }
 42 | 
 43 | @media screen and (max-width: 767px) {
 44 | 	div.dataTables_length,
 45 | 	div.dataTables_filter,
 46 | 	div.dataTables_info,
 47 | 	div.dataTables_paginate {
 48 | 		text-align: center;
 49 | 	}
 50 | }
 51 | 
 52 | 
 53 | table.dataTable td,
 54 | table.dataTable th {
 55 | 	-webkit-box-sizing: content-box;
 56 | 	-moz-box-sizing: content-box;
 57 | 	box-sizing: content-box;
 58 | }
 59 | 
 60 | 
 61 | table.dataTable {
 62 | 	clear: both;
 63 | 	margin-top: 6px !important;
 64 | 	margin-bottom: 6px !important;
 65 | 	max-width: none !important;
 66 | }
 67 | 
 68 | table.dataTable thead .sorting,
 69 | table.dataTable thead .sorting_asc,
 70 | table.dataTable thead .sorting_desc,
 71 | table.dataTable thead .sorting_asc_disabled,
 72 | table.dataTable thead .sorting_desc_disabled {
 73 | 	cursor: pointer;
 74 | }
 75 | 
 76 | table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
 77 | table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
 78 | table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
 79 | 
 80 | table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
 81 | table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
 82 | 
 83 | table.dataTable thead > tr > th {
 84 | 	padding-left: 18px;
 85 | 	padding-right: 18px;
 86 | }
 87 | 
 88 | table.dataTable th:active {
 89 | 	outline: none;
 90 | }
 91 | 
 92 | /* Scrolling */
 93 | div.dataTables_scrollHead table {
 94 | 	margin-bottom: 0 !important;
 95 | 	border-bottom-left-radius: 0;
 96 | 	border-bottom-right-radius: 0;
 97 | }
 98 | 
 99 | div.dataTables_scrollHead table thead tr:last-child th:first-child,
100 | div.dataTables_scrollHead table thead tr:last-child td:first-child {
101 | 	border-bottom-left-radius: 0 !important;
102 | 	border-bottom-right-radius: 0 !important;
103 | }
104 | 
105 | div.dataTables_scrollBody table {
106 | 	border-top: none;
107 | 	margin-top: 0 !important;
108 | 	margin-bottom: 0 !important;
109 | }
110 | 
111 | div.dataTables_scrollBody tbody tr:first-child th,
112 | div.dataTables_scrollBody tbody tr:first-child td {
113 | 	border-top: none;
114 | }
115 | 
116 | div.dataTables_scrollFoot table {
117 | 	margin-top: 0 !important;
118 | 	border-top: none;
119 | }
120 | 
121 | /* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
122 |    width calculations when using scrolling impossible to align columns. We have
123 |    to use separate
124 |  */
125 | table.table-bordered.dataTable {
126 | 	border-collapse: separate !important;
127 | }
128 | table.table-bordered thead th,
129 | table.table-bordered thead td {
130 | 	border-left-width: 0;
131 | 	border-top-width: 0;
132 | }
133 | table.table-bordered tbody th,
134 | table.table-bordered tbody td {
135 | 	border-left-width: 0;
136 | 	border-bottom-width: 0;
137 | }
138 | table.table-bordered th:last-child,
139 | table.table-bordered td:last-child {
140 | 	border-right-width: 0;
141 | }
142 | div.dataTables_scrollHead table.table-bordered {
143 | 	border-bottom-width: 0;
144 | }
145 | 
146 | 
147 | 
148 | 
149 | /*
150 |  * TableTools styles
151 |  */
152 | .table.dataTable tbody tr.active td,
153 | .table.dataTable tbody tr.active th {
154 | 	background-color: #08C;
155 | 	color: white;
156 | }
157 | 
158 | .table.dataTable tbody tr.active:hover td,
159 | .table.dataTable tbody tr.active:hover th {
160 | 	background-color: #0075b0 !important;
161 | }
162 | 
163 | .table.dataTable tbody tr.active th > a,
164 | .table.dataTable tbody tr.active td > a {
165 | 	color: white;
166 | }
167 | 
168 | .table-striped.dataTable tbody tr.active:nth-child(odd) td,
169 | .table-striped.dataTable tbody tr.active:nth-child(odd) th {
170 | 	background-color: #017ebc;
171 | }
172 | 
173 | table.DTTT_selectable tbody tr {
174 | 	cursor: pointer;
175 | }
176 | 
177 | div.DTTT .btn:hover {
178 | 	text-decoration: none !important;
179 | }
180 | 
181 | ul.DTTT_dropdown.dropdown-menu {
182 |   z-index: 2003;
183 | }
184 | 
185 | ul.DTTT_dropdown.dropdown-menu a {
186 | 	color: #333 !important; /* needed only when demo_page.css is included */
187 | }
188 | 
189 | ul.DTTT_dropdown.dropdown-menu li {
190 | 	position: relative;
191 | }
192 | 
193 | ul.DTTT_dropdown.dropdown-menu li:hover a {
194 | 	background-color: #0088cc;
195 | 	color: white !important;
196 | }
197 | 
198 | div.DTTT_collection_background {
199 | 	z-index: 2002;	
200 | }
201 | 
202 | /* TableTools information display */
203 | div.DTTT_print_info {
204 | 	position: fixed;
205 | 	top: 50%;
206 | 	left: 50%;
207 | 	width: 400px;
208 | 	height: 150px;
209 | 	margin-left: -200px;
210 | 	margin-top: -75px;
211 | 	text-align: center;
212 | 	color: #333;
213 | 	padding: 10px 30px;
214 | 	opacity: 0.95;
215 | 
216 | 	background-color: white;
217 | 	border: 1px solid rgba(0, 0, 0, 0.2);
218 | 	border-radius: 6px;
219 | 	
220 | 	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
221 | 	        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
222 | }
223 | 
224 | div.DTTT_print_info h6 {
225 | 	font-weight: normal;
226 | 	font-size: 28px;
227 | 	line-height: 28px;
228 | 	margin: 1em;
229 | }
230 | 
231 | div.DTTT_print_info p {
232 | 	font-size: 14px;
233 | 	line-height: 20px;
234 | }
235 | 
236 | div.dataTables_processing {
237 |     position: absolute;
238 |     top: 50%;
239 |     left: 50%;
240 |     width: 100%;
241 |     height: 60px;
242 |     margin-left: -50%;
243 |     margin-top: -25px;
244 |     padding-top: 20px;
245 |     padding-bottom: 20px;
246 |     text-align: center;
247 |     font-size: 1.2em;
248 |     background-color: white;
249 |     background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
250 |     background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
251 |     background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
252 |     background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
253 |     background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
254 |     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
255 | }
256 | 
257 | 
258 | 
259 | /*
260 |  * FixedColumns styles
261 |  */
262 | div.DTFC_LeftHeadWrapper table,
263 | div.DTFC_LeftFootWrapper table,
264 | div.DTFC_RightHeadWrapper table,
265 | div.DTFC_RightFootWrapper table,
266 | table.DTFC_Cloned tr.even {
267 |     background-color: white;
268 |     margin-bottom: 0;
269 | }
270 |  
271 | div.DTFC_RightHeadWrapper table ,
272 | div.DTFC_LeftHeadWrapper table {
273 | 	border-bottom: none !important;
274 |     margin-bottom: 0 !important;
275 |     border-top-right-radius: 0 !important;
276 |     border-bottom-left-radius: 0 !important;
277 |     border-bottom-right-radius: 0 !important;
278 | }
279 |  
280 | div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
281 | div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
282 | div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
283 | div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
284 |     border-bottom-left-radius: 0 !important;
285 |     border-bottom-right-radius: 0 !important;
286 | }
287 |  
288 | div.DTFC_RightBodyWrapper table,
289 | div.DTFC_LeftBodyWrapper table {
290 |     border-top: none;
291 |     margin: 0 !important;
292 | }
293 |  
294 | div.DTFC_RightBodyWrapper tbody tr:first-child th,
295 | div.DTFC_RightBodyWrapper tbody tr:first-child td,
296 | div.DTFC_LeftBodyWrapper tbody tr:first-child th,
297 | div.DTFC_LeftBodyWrapper tbody tr:first-child td {
298 |     border-top: none;
299 | }
300 |  
301 | div.DTFC_RightFootWrapper table,
302 | div.DTFC_LeftFootWrapper table {
303 |     border-top: none;
304 |     margin-top: 0 !important;
305 | }
306 | 
307 | 
308 | /*
309 |  * FixedHeader styles
310 |  */
311 | div.FixedHeader_Cloned table {
312 | 	margin: 0 !important
313 | }
314 | 
315 | 


--------------------------------------------------------------------------------
/js/dataTables.responsive.js:
--------------------------------------------------------------------------------
  1 | /*! Responsive 1.0.6
  2 |  * 2014-2015 SpryMedia Ltd - datatables.net/license
  3 |  */
  4 | 
  5 | /**
  6 |  * @summary     Responsive
  7 |  * @description Responsive tables plug-in for DataTables
  8 |  * @version     1.0.6
  9 |  * @file        dataTables.responsive.js
 10 |  * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 11 |  * @contact     www.sprymedia.co.uk/contact
 12 |  * @copyright   Copyright 2014-2015 SpryMedia Ltd.
 13 |  *
 14 |  * This source file is free software, available under the following license:
 15 |  *   MIT license - http://datatables.net/license/mit
 16 |  *
 17 |  * This source file is distributed in the hope that it will be useful, but
 18 |  * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 19 |  * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 20 |  *
 21 |  * For details please refer to: http://www.datatables.net
 22 |  */
 23 | 
 24 | (function(window, document, undefined) {
 25 | 
 26 | 
 27 | var factory = function( $, DataTable ) {
 28 | "use strict";
 29 | 
 30 | /**
 31 |  * Responsive is a plug-in for the DataTables library that makes use of
 32 |  * DataTables' ability to change the visibility of columns, changing the
 33 |  * visibility of columns so the displayed columns fit into the table container.
 34 |  * The end result is that complex tables will be dynamically adjusted to fit
 35 |  * into the viewport, be it on a desktop, tablet or mobile browser.
 36 |  *
 37 |  * Responsive for DataTables has two modes of operation, which can used
 38 |  * individually or combined:
 39 |  *
 40 |  * * Class name based control - columns assigned class names that match the
 41 |  *   breakpoint logic can be shown / hidden as required for each breakpoint.
 42 |  * * Automatic control - columns are automatically hidden when there is no
 43 |  *   room left to display them. Columns removed from the right.
 44 |  *
 45 |  * In additional to column visibility control, Responsive also has built into
 46 |  * options to use DataTables' child row display to show / hide the information
 47 |  * from the table that has been hidden. There are also two modes of operation
 48 |  * for this child row display:
 49 |  *
 50 |  * * Inline - when the control element that the user can use to show / hide
 51 |  *   child rows is displayed inside the first column of the table.
 52 |  * * Column - where a whole column is dedicated to be the show / hide control.
 53 |  *
 54 |  * Initialisation of Responsive is performed by:
 55 |  *
 56 |  * * Adding the class `responsive` or `dt-responsive` to the table. In this case
 57 |  *   Responsive will automatically be initialised with the default configuration
 58 |  *   options when the DataTable is created.
 59 |  * * Using the `responsive` option in the DataTables configuration options. This
 60 |  *   can also be used to specify the configuration options, or simply set to
 61 |  *   `true` to use the defaults.
 62 |  *
 63 |  *  @class
 64 |  *  @param {object} settings DataTables settings object for the host table
 65 |  *  @param {object} [opts] Configuration options
 66 |  *  @requires jQuery 1.7+
 67 |  *  @requires DataTables 1.10.1+
 68 |  *
 69 |  *  @example
 70 |  *      $('#example').DataTable( {
 71 |  *        responsive: true
 72 |  *      } );
 73 |  *    } );
 74 |  */
 75 | var Responsive = function ( settings, opts ) {
 76 | 	// Sanity check that we are using DataTables 1.10 or newer
 77 | 	if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.1' ) ) {
 78 | 		throw 'DataTables Responsive requires DataTables 1.10.1 or newer';
 79 | 	}
 80 | 
 81 | 	this.s = {
 82 | 		dt: new DataTable.Api( settings ),
 83 | 		columns: []
 84 | 	};
 85 | 
 86 | 	// Check if responsive has already been initialised on this table
 87 | 	if ( this.s.dt.settings()[0].responsive ) {
 88 | 		return;
 89 | 	}
 90 | 
 91 | 	// details is an object, but for simplicity the user can give it as a string
 92 | 	if ( opts && typeof opts.details === 'string' ) {
 93 | 		opts.details = { type: opts.details };
 94 | 	}
 95 | 
 96 | 	this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
 97 | 	settings.responsive = this;
 98 | 	this._constructor();
 99 | };
100 | 
101 | Responsive.prototype = {
102 | 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
103 | 	 * Constructor
104 | 	 */
105 | 
106 | 	/**
107 | 	 * Initialise the Responsive instance
108 | 	 *
109 | 	 * @private
110 | 	 */
111 | 	_constructor: function ()
112 | 	{
113 | 		var that = this;
114 | 		var dt = this.s.dt;
115 | 
116 | 		dt.settings()[0]._responsive = this;
117 | 
118 | 		// Use DataTables' private throttle function to avoid processor thrashing
119 | 		$(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
120 | 			that._resize();
121 | 		} ) );
122 | 
123 | 		// Destroy event handler
124 | 		dt.on( 'destroy.dtr', function () {
125 | 			$(window).off( 'resize.dtr orientationchange.dtr draw.dtr' );
126 | 		} );
127 | 
128 | 		// Reorder the breakpoints array here in case they have been added out
129 | 		// of order
130 | 		this.c.breakpoints.sort( function (a, b) {
131 | 			return a.width < b.width ? 1 :
132 | 				a.width > b.width ? -1 : 0;
133 | 		} );
134 | 
135 | 		// Determine which columns are already hidden, and should therefore
136 | 		// remain hidden. todo - should this be done? See thread 22677
137 | 		//
138 | 		// this.s.alwaysHidden = dt.columns(':hidden').indexes();
139 | 
140 | 		this._classLogic();
141 | 		this._resizeAuto();
142 | 
143 | 		// Details handler
144 | 		var details = this.c.details;
145 | 		if ( details.type ) {
146 | 			that._detailsInit();
147 | 			this._detailsVis();
148 | 
149 | 			dt.on( 'column-visibility.dtr', function () {
150 | 				that._detailsVis();
151 | 			} );
152 | 
153 | 			// Redraw the details box on each draw. This is used until
154 | 			// DataTables implements a native `updated` event for rows
155 | 			dt.on( 'draw.dtr', function () {
156 | 				dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
157 | 					var row = dt.row( idx );
158 | 
159 | 					if ( row.child.isShown() ) {
160 | 						var info = that.c.details.renderer( dt, idx );
161 | 						row.child( info, 'child' ).show();
162 | 					}
163 | 				} );
164 | 			} );
165 | 
166 | 			$(dt.table().node()).addClass( 'dtr-'+details.type );
167 | 		}
168 | 
169 | 		// First pass - draw the table for the current viewport size
170 | 		this._resize();
171 | 	},
172 | 
173 | 
174 | 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
175 | 	 * Private methods
176 | 	 */
177 | 
178 | 	/**
179 | 	 * Calculate the visibility for the columns in a table for a given
180 | 	 * breakpoint. The result is pre-determined based on the class logic if
181 | 	 * class names are used to control all columns, but the width of the table
182 | 	 * is also used if there are columns which are to be automatically shown
183 | 	 * and hidden.
184 | 	 *
185 | 	 * @param  {string} breakpoint Breakpoint name to use for the calculation
186 | 	 * @return {array} Array of boolean values initiating the visibility of each
187 | 	 *   column.
188 | 	 *  @private
189 | 	 */
190 | 	_columnsVisiblity: function ( breakpoint )
191 | 	{
192 | 		var dt = this.s.dt;
193 | 		var columns = this.s.columns;
194 | 		var i, ien;
195 | 
196 | 		// Class logic - determine which columns are in this breakpoint based
197 | 		// on the classes. If no class control (i.e. `auto`) then `-` is used
198 | 		// to indicate this to the rest of the function
199 | 		var display = $.map( columns, function ( col ) {
200 | 			return col.auto && col.minWidth === null ?
201 | 				false :
202 | 				col.auto === true ?
203 | 					'-' :
204 | 					$.inArray( breakpoint, col.includeIn ) !== -1;
205 | 		} );
206 | 
207 | 		// Auto column control - first pass: how much width is taken by the
208 | 		// ones that must be included from the non-auto columns
209 | 		var requiredWidth = 0;
210 | 		for ( i=0, ien=display.length ; i<ien ; i++ ) {
211 | 			if ( display[i] === true ) {
212 | 				requiredWidth += columns[i].minWidth;
213 | 			}
214 | 		}
215 | 
216 | 		// Second pass, use up any remaining width for other columns. For
217 | 		// scrolling tables we need to subtract the width of the scrollbar. It
218 | 		// may not be requires which makes this sub-optimal, but it would
219 | 		// require another full redraw to make complete use of those extra few
220 | 		// pixels
221 | 		var scrolling = dt.settings()[0].oScroll;
222 | 		var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
223 | 		var widthAvailable = dt.table().container().offsetWidth - bar;
224 | 		var usedWidth = widthAvailable - requiredWidth;
225 | 
226 | 		// Control column needs to always be included. This makes it sub-
227 | 		// optimal in terms of using the available with, but to stop layout
228 | 		// thrashing or overflow. Also we need to account for the control column
229 | 		// width first so we know how much width is available for the other
230 | 		// columns, since the control column might not be the first one shown
231 | 		for ( i=0, ien=display.length ; i<ien ; i++ ) {
232 | 			if ( columns[i].control ) {
233 | 				usedWidth -= columns[i].minWidth;
234 | 			}
235 | 		}
236 | 
237 | 		// Allow columns to be shown (counting from the left) until we run out
238 | 		// of room
239 | 		var empty = false;
240 | 		for ( i=0, ien=display.length ; i<ien ; i++ ) {
241 | 			if ( display[i] === '-' && ! columns[i].control ) {
242 | 				// Once we've found a column that won't fit we don't let any
243 | 				// others display either, or columns might disappear in the
244 | 				// middle of the table
245 | 				if ( empty || usedWidth - columns[i].minWidth < 0 ) {
246 | 					empty = true;
247 | 					display[i] = false;
248 | 				}
249 | 				else {
250 | 					display[i] = true;
251 | 				}
252 | 
253 | 				usedWidth -= columns[i].minWidth;
254 | 			}
255 | 		}
256 | 
257 | 		// Determine if the 'control' column should be shown (if there is one).
258 | 		// This is the case when there is a hidden column (that is not the
259 | 		// control column). The two loops look inefficient here, but they are
260 | 		// trivial and will fly through. We need to know the outcome from the
261 | 		// first , before the action in the second can be taken
262 | 		var showControl = false;
263 | 
264 | 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
265 | 			if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
266 | 				showControl = true;
267 | 				break;
268 | 			}
269 | 		}
270 | 
271 | 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
272 | 			if ( columns[i].control ) {
273 | 				display[i] = showControl;
274 | 			}
275 | 		}
276 | 
277 | 		// Finally we need to make sure that there is at least one column that
278 | 		// is visible
279 | 		if ( $.inArray( true, display ) === -1 ) {
280 | 			display[0] = true;
281 | 		}
282 | 
283 | 		return display;
284 | 	},
285 | 
286 | 
287 | 	/**
288 | 	 * Create the internal `columns` array with information about the columns
289 | 	 * for the table. This includes determining which breakpoints the column
290 | 	 * will appear in, based upon class names in the column, which makes up the
291 | 	 * vast majority of this method.
292 | 	 *
293 | 	 * @private
294 | 	 */
295 | 	_classLogic: function ()
296 | 	{
297 | 		var that = this;
298 | 		var calc = {};
299 | 		var breakpoints = this.c.breakpoints;
300 | 		var columns = this.s.dt.columns().eq(0).map( function (i) {
301 | 			var className = this.column(i).header().className;
302 | 
303 | 			return {
304 | 				className: className,
305 | 				includeIn: [],
306 | 				auto:      false,
307 | 				control:   false,
308 | 				never:     className.match(/\bnever\b/) ? true : false
309 | 			};
310 | 		} );
311 | 
312 | 		// Simply add a breakpoint to `includeIn` array, ensuring that there are
313 | 		// no duplicates
314 | 		var add = function ( colIdx, name ) {
315 | 			var includeIn = columns[ colIdx ].includeIn;
316 | 
317 | 			if ( $.inArray( name, includeIn ) === -1 ) {
318 | 				includeIn.push( name );
319 | 			}
320 | 		};
321 | 
322 | 		var column = function ( colIdx, name, operator, matched ) {
323 | 			var size, i, ien;
324 | 
325 | 			if ( ! operator ) {
326 | 				columns[ colIdx ].includeIn.push( name );
327 | 			}
328 | 			else if ( operator === 'max-' ) {
329 | 				// Add this breakpoint and all smaller
330 | 				size = that._find( name ).width;
331 | 
332 | 				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
333 | 					if ( breakpoints[i].width <= size ) {
334 | 						add( colIdx, breakpoints[i].name );
335 | 					}
336 | 				}
337 | 			}
338 | 			else if ( operator === 'min-' ) {
339 | 				// Add this breakpoint and all larger
340 | 				size = that._find( name ).width;
341 | 
342 | 				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
343 | 					if ( breakpoints[i].width >= size ) {
344 | 						add( colIdx, breakpoints[i].name );
345 | 					}
346 | 				}
347 | 			}
348 | 			else if ( operator === 'not-' ) {
349 | 				// Add all but this breakpoint (xxx need extra information)
350 | 
351 | 				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
352 | 					if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
353 | 						add( colIdx, breakpoints[i].name );
354 | 					}
355 | 				}
356 | 			}
357 | 		};
358 | 
359 | 		// Loop over each column and determine if it has a responsive control
360 | 		// class
361 | 		columns.each( function ( col, i ) {
362 | 			var classNames = col.className.split(' ');
363 | 			var hasClass = false;
364 | 
365 | 			// Split the class name up so multiple rules can be applied if needed
366 | 			for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
367 | 				var className = $.trim( classNames[k] );
368 | 
369 | 				if ( className === 'all' ) {
370 | 					// Include in all
371 | 					hasClass = true;
372 | 					col.includeIn = $.map( breakpoints, function (a) {
373 | 						return a.name;
374 | 					} );
375 | 					return;
376 | 				}
377 | 				else if ( className === 'none' || className === 'never' ) {
378 | 					// Include in none (default) and no auto
379 | 					hasClass = true;
380 | 					return;
381 | 				}
382 | 				else if ( className === 'control' ) {
383 | 					// Special column that is only visible, when one of the other
384 | 					// columns is hidden. This is used for the details control
385 | 					hasClass = true;
386 | 					col.control = true;
387 | 					return;
388 | 				}
389 | 
390 | 				$.each( breakpoints, function ( j, breakpoint ) {
391 | 					// Does this column have a class that matches this breakpoint?
392 | 					var brokenPoint = breakpoint.name.split('-');
393 | 					var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
394 | 					var match = className.match( re );
395 | 
396 | 					if ( match ) {
397 | 						hasClass = true;
398 | 
399 | 						if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
400 | 							// Class name matches breakpoint name fully
401 | 							column( i, breakpoint.name, match[1], match[2]+match[3] );
402 | 						}
403 | 						else if ( match[2] === brokenPoint[0] && ! match[3] ) {
404 | 							// Class name matched primary breakpoint name with no qualifier
405 | 							column( i, breakpoint.name, match[1], match[2] );
406 | 						}
407 | 					}
408 | 				} );
409 | 			}
410 | 
411 | 			// If there was no control class, then automatic sizing is used
412 | 			if ( ! hasClass ) {
413 | 				col.auto = true;
414 | 			}
415 | 		} );
416 | 
417 | 		this.s.columns = columns;
418 | 	},
419 | 
420 | 
421 | 	/**
422 | 	 * Initialisation for the details handler
423 | 	 *
424 | 	 * @private
425 | 	 */
426 | 	_detailsInit: function ()
427 | 	{
428 | 		var that    = this;
429 | 		var dt      = this.s.dt;
430 | 		var details = this.c.details;
431 | 
432 | 		// The inline type always uses the first child as the target
433 | 		if ( details.type === 'inline' ) {
434 | 			details.target = 'td:first-child';
435 | 		}
436 | 
437 | 		// type.target can be a string jQuery selector or a column index
438 | 		var target   = details.target;
439 | 		var selector = typeof target === 'string' ? target : 'td';
440 | 
441 | 		// Click handler to show / hide the details rows when they are available
442 | 		$( dt.table().body() ).on( 'click', selector, function (e) {
443 | 			// If the table is not collapsed (i.e. there is no hidden columns)
444 | 			// then take no action
445 | 			if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
446 | 				return;
447 | 			}
448 | 
449 | 			// Check that the row is actually a DataTable's controlled node
450 | 			if ( ! dt.row( $(this).closest('tr') ).length ) {
451 | 				return;
452 | 			}
453 | 
454 | 			// For column index, we determine if we should act or not in the
455 | 			// handler - otherwise it is already okay
456 | 			if ( typeof target === 'number' ) {
457 | 				var targetIdx = target < 0 ?
458 | 					dt.columns().eq(0).length + target :
459 | 					target;
460 | 
461 | 				if ( dt.cell( this ).index().column !== targetIdx ) {
462 | 					return;
463 | 				}
464 | 			}
465 | 
466 | 			// $().closest() includes itself in its check
467 | 			var row = dt.row( $(this).closest('tr') );
468 | 
469 | 			if ( row.child.isShown() ) {
470 | 				row.child( false );
471 | 				$( row.node() ).removeClass( 'parent' );
472 | 			}
473 | 			else {
474 | 				var info = that.c.details.renderer( dt, row[0] );
475 | 				row.child( info, 'child' ).show();
476 | 				$( row.node() ).addClass( 'parent' );
477 | 			}
478 | 		} );
479 | 	},
480 | 
481 | 
482 | 	/**
483 | 	 * Update the child rows in the table whenever the column visibility changes
484 | 	 *
485 | 	 * @private
486 | 	 */
487 | 	_detailsVis: function ()
488 | 	{
489 | 		var that = this;
490 | 		var dt = this.s.dt;
491 | 
492 | 		// Find how many columns are hidden
493 | 		var hiddenColumns = dt.columns().indexes().filter( function ( idx ) {
494 | 			var col = dt.column( idx );
495 | 
496 | 			if ( col.visible() ) {
497 | 				return null;
498 | 			}
499 | 
500 | 			// Only counts as hidden if it doesn't have the `never` class
501 | 			return $( col.header() ).hasClass( 'never' ) ? null : idx;
502 | 		} );
503 | 		var haveHidden = true;
504 | 
505 | 		if ( hiddenColumns.length === 0 || ( hiddenColumns.length === 1 && this.s.columns[ hiddenColumns[0] ].control ) ) {
506 | 			haveHidden = false;
507 | 		}
508 | 
509 | 		if ( haveHidden ) {
510 | 			// Show all existing child rows
511 | 			dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
512 | 				var row = dt.row( idx );
513 | 
514 | 				if ( row.child() ) {
515 | 					var info = that.c.details.renderer( dt, row[0] );
516 | 
517 | 					// The renderer can return false to have no child row
518 | 					if ( info === false ) {
519 | 						row.child.hide();
520 | 					}
521 | 					else {
522 | 						row.child( info, 'child' ).show();
523 | 					}
524 | 				}
525 | 			} );
526 | 		}
527 | 		else {
528 | 			// Hide all existing child rows
529 | 			dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
530 | 				dt.row( idx ).child.hide();
531 | 			} );
532 | 		}
533 | 	},
534 | 
535 | 
536 | 	/**
537 | 	 * Find a breakpoint object from a name
538 | 	 * @param  {string} name Breakpoint name to find
539 | 	 * @return {object}      Breakpoint description object
540 | 	 */
541 | 	_find: function ( name )
542 | 	{
543 | 		var breakpoints = this.c.breakpoints;
544 | 
545 | 		for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
546 | 			if ( breakpoints[i].name === name ) {
547 | 				return breakpoints[i];
548 | 			}
549 | 		}
550 | 	},
551 | 
552 | 
553 | 	/**
554 | 	 * Alter the table display for a resized viewport. This involves first
555 | 	 * determining what breakpoint the window currently is in, getting the
556 | 	 * column visibilities to apply and then setting them.
557 | 	 *
558 | 	 * @private
559 | 	 */
560 | 	_resize: function ()
561 | 	{
562 | 		var dt = this.s.dt;
563 | 		var width = $(window).width();
564 | 		var breakpoints = this.c.breakpoints;
565 | 		var breakpoint = breakpoints[0].name;
566 | 		var columns = this.s.columns;
567 | 		var i, ien;
568 | 
569 | 		// Determine what breakpoint we are currently at
570 | 		for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
571 | 			if ( width <= breakpoints[i].width ) {
572 | 				breakpoint = breakpoints[i].name;
573 | 				break;
574 | 			}
575 | 		}
576 | 		
577 | 		// Show the columns for that break point
578 | 		var columnsVis = this._columnsVisiblity( breakpoint );
579 | 
580 | 		// Set the class before the column visibility is changed so event
581 | 		// listeners know what the state is. Need to determine if there are
582 | 		// any columns that are not visible but can be shown
583 | 		var collapsedClass = false;
584 | 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
585 | 			if ( columnsVis[i] === false && ! columns[i].never ) {
586 | 				collapsedClass = true;
587 | 				break;
588 | 			}
589 | 		}
590 | 
591 | 		$( dt.table().node() ).toggleClass('collapsed', collapsedClass );
592 | 
593 | 		dt.columns().eq(0).each( function ( colIdx, i ) {
594 | 			dt.column( colIdx ).visible( columnsVis[i] );
595 | 		} );
596 | 	},
597 | 
598 | 
599 | 	/**
600 | 	 * Determine the width of each column in the table so the auto column hiding
601 | 	 * has that information to work with. This method is never going to be 100%
602 | 	 * perfect since column widths can change slightly per page, but without
603 | 	 * seriously compromising performance this is quite effective.
604 | 	 *
605 | 	 * @private
606 | 	 */
607 | 	_resizeAuto: function ()
608 | 	{
609 | 		var dt = this.s.dt;
610 | 		var columns = this.s.columns;
611 | 
612 | 		// Are we allowed to do auto sizing?
613 | 		if ( ! this.c.auto ) {
614 | 			return;
615 | 		}
616 | 
617 | 		// Are there any columns that actually need auto-sizing, or do they all
618 | 		// have classes defined
619 | 		if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
620 | 			return;
621 | 		}
622 | 
623 | 		// Clone the table with the current data in it
624 | 		var tableWidth   = dt.table().node().offsetWidth;
625 | 		var columnWidths = dt.columns;
626 | 		var clonedTable  = dt.table().node().cloneNode( false );
627 | 		var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
628 | 		var clonedBody   = $( dt.table().body().cloneNode( false ) ).appendTo( clonedTable );
629 | 
630 | 		$( dt.table().footer() ).clone( false ).appendTo( clonedTable );
631 | 
632 | 		// This is a bit slow, but we need to get a clone of each row that
633 | 		// includes all columns. As such, try to do this as little as possible.
634 | 		dt.rows( { page: 'current' } ).indexes().flatten().each( function ( idx ) {
635 | 			var clone = dt.row( idx ).node().cloneNode( true );
636 | 			
637 | 			if ( dt.columns( ':hidden' ).flatten().length ) {
638 | 				$(clone).append( dt.cells( idx, ':hidden' ).nodes().to$().clone() );
639 | 			}
640 | 
641 | 			$(clone).appendTo( clonedBody );
642 | 		} );
643 | 
644 | 		var cells = dt.columns().header().to$().clone( false );
645 | 		$('<tr/>')
646 | 			.append( cells )
647 | 			.appendTo( clonedHeader );
648 | 
649 | 		// In the inline case extra padding is applied to the first column to
650 | 		// give space for the show / hide icon. We need to use this in the
651 | 		// calculation
652 | 		if ( this.c.details.type === 'inline' ) {
653 | 			$(clonedTable).addClass( 'dtr-inline collapsed' );
654 | 		}
655 | 
656 | 		var inserted = $('<div/>')
657 | 			.css( {
658 | 				width: 1,
659 | 				height: 1,
660 | 				overflow: 'hidden'
661 | 			} )
662 | 			.append( clonedTable );
663 | 
664 | 		// Remove columns which are not to be included
665 | 		inserted.find('th.never, td.never').remove();
666 | 
667 | 		inserted.insertBefore( dt.table().node() );
668 | 
669 | 		// The cloned header now contains the smallest that each column can be
670 | 		dt.columns().eq(0).each( function ( idx ) {
671 | 			columns[idx].minWidth = cells[ idx ].offsetWidth || 0;
672 | 		} );
673 | 
674 | 		inserted.remove();
675 | 	}
676 | };
677 | 
678 | 
679 | /**
680 |  * List of default breakpoints. Each item in the array is an object with two
681 |  * properties:
682 |  *
683 |  * * `name` - the breakpoint name.
684 |  * * `width` - the breakpoint width
685 |  *
686 |  * @name Responsive.breakpoints
687 |  * @static
688 |  */
689 | Responsive.breakpoints = [
690 | 	{ name: 'desktop',  width: Infinity },
691 | 	{ name: 'tablet-l', width: 1024 },
692 | 	{ name: 'tablet-p', width: 768 },
693 | 	{ name: 'mobile-l', width: 480 },
694 | 	{ name: 'mobile-p', width: 320 }
695 | ];
696 | 
697 | 
698 | /**
699 |  * Responsive default settings for initialisation
700 |  *
701 |  * @namespace
702 |  * @name Responsive.defaults
703 |  * @static
704 |  */
705 | Responsive.defaults = {
706 | 	/**
707 | 	 * List of breakpoints for the instance. Note that this means that each
708 | 	 * instance can have its own breakpoints. Additionally, the breakpoints
709 | 	 * cannot be changed once an instance has been creased.
710 | 	 *
711 | 	 * @type {Array}
712 | 	 * @default Takes the value of `Responsive.breakpoints`
713 | 	 */
714 | 	breakpoints: Responsive.breakpoints,
715 | 
716 | 	/**
717 | 	 * Enable / disable auto hiding calculations. It can help to increase
718 | 	 * performance slightly if you disable this option, but all columns would
719 | 	 * need to have breakpoint classes assigned to them
720 | 	 *
721 | 	 * @type {Boolean}
722 | 	 * @default  `true`
723 | 	 */
724 | 	auto: true,
725 | 
726 | 	/**
727 | 	 * Details control. If given as a string value, the `type` property of the
728 | 	 * default object is set to that value, and the defaults used for the rest
729 | 	 * of the object - this is for ease of implementation.
730 | 	 *
731 | 	 * The object consists of the following properties:
732 | 	 *
733 | 	 * * `renderer` - function that is called for display of the child row data.
734 | 	 *   The default function will show the data from the hidden columns
735 | 	 * * `target` - Used as the selector for what objects to attach the child
736 | 	 *   open / close to
737 | 	 * * `type` - `false` to disable the details display, `inline` or `column`
738 | 	 *   for the two control types
739 | 	 *
740 | 	 * @type {Object|string}
741 | 	 */
742 | 	details: {
743 | 		renderer: function ( api, rowIdx ) {
744 | 			var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
745 | 				var header = $( api.column( cell.column ).header() );
746 | 				var idx = api.cell( cell ).index();
747 | 
748 | 				if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
749 | 					return '';
750 | 				}
751 | 
752 | 				// Use a non-public DT API method to render the data for display
753 | 				// This needs to be updated when DT adds a suitable method for
754 | 				// this type of data retrieval
755 | 				var dtPrivate = api.settings()[0];
756 | 				var cellData = dtPrivate.oApi._fnGetCellData(
757 | 					dtPrivate, idx.row, idx.column, 'display'
758 | 				);
759 | 				var title = header.text();
760 | 				if ( title ) {
761 | 					title = title + ':';
762 | 				}
763 | 
764 | 				return '<li data-dtr-index="'+idx.column+'">'+
765 | 						'<span class="dtr-title">'+
766 | 							title+
767 | 						'</span> '+
768 | 						'<span class="dtr-data">'+
769 | 							cellData+
770 | 						'</span>'+
771 | 					'</li>';
772 | 			} ).toArray().join('');
773 | 
774 | 			return data ?
775 | 				$('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
776 | 				false;
777 | 		},
778 | 
779 | 		target: 0,
780 | 
781 | 		type: 'inline'
782 | 	}
783 | };
784 | 
785 | 
786 | /*
787 |  * API
788 |  */
789 | var Api = $.fn.dataTable.Api;
790 | 
791 | // Doesn't do anything - work around for a bug in DT... Not documented
792 | Api.register( 'responsive()', function () {
793 | 	return this;
794 | } );
795 | 
796 | Api.register( 'responsive.index()', function ( li ) {
797 | 	li = $(li);
798 | 
799 | 	return {
800 | 		column: li.data('dtr-index'),
801 | 		row:    li.parent().data('dtr-index')
802 | 	};
803 | } );
804 | 
805 | Api.register( 'responsive.rebuild()', function () {
806 | 	return this.iterator( 'table', function ( ctx ) {
807 | 		if ( ctx._responsive ) {
808 | 			ctx._responsive._classLogic();
809 | 		}
810 | 	} );
811 | } );
812 | 
813 | Api.register( 'responsive.recalc()', function () {
814 | 	return this.iterator( 'table', function ( ctx ) {
815 | 		if ( ctx._responsive ) {
816 | 			ctx._responsive._resizeAuto();
817 | 			ctx._responsive._resize();
818 | 		}
819 | 	} );
820 | } );
821 | 
822 | 
823 | /**
824 |  * Version information
825 |  *
826 |  * @name Responsive.version
827 |  * @static
828 |  */
829 | Responsive.version = '1.0.6';
830 | 
831 | 
832 | $.fn.dataTable.Responsive = Responsive;
833 | $.fn.DataTable.Responsive = Responsive;
834 | 
835 | // Attach a listener to the document which listens for DataTables initialisation
836 | // events so we can automatically initialise
837 | $(document).on( 'init.dt.dtr', function (e, settings, json) {
838 | 	if ( e.namespace !== 'dt' ) {
839 | 		return;
840 | 	}
841 | 
842 | 	if ( $(settings.nTable).hasClass( 'responsive' ) ||
843 | 		 $(settings.nTable).hasClass( 'dt-responsive' ) ||
844 | 		 settings.oInit.responsive ||
845 | 		 DataTable.defaults.responsive
846 | 	) {
847 | 		var init = settings.oInit.responsive;
848 | 
849 | 		if ( init !== false ) {
850 | 			new Responsive( settings, $.isPlainObject( init ) ? init : {}  );
851 | 		}
852 | 	}
853 | } );
854 | 
855 | return Responsive;
856 | }; // /factory
857 | 
858 | 
859 | // Define as an AMD module if possible
860 | if ( typeof define === 'function' && define.amd ) {
861 | 	define( ['jquery', 'datatables'], factory );
862 | }
863 | else if ( typeof exports === 'object' ) {
864 |     // Node/CommonJS
865 |     factory( require('jquery'), require('datatables') );
866 | }
867 | else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {
868 | 	// Otherwise simply initialise as normal, stopping multiple evaluation
869 | 	factory( jQuery, jQuery.fn.dataTable );
870 | }
871 | 
872 | 
873 | })(window, document);
874 | 


--------------------------------------------------------------------------------