Bonjour à tous et bienvenue dans ce nouveau tutoriel PHP dans lequel nous allons créer une fenêtre de chat pour membres connectés.

 

 


Sources

 

<!-- Chatbox PHP -->
<!-- Racine -->

<?php
session_start();
$_SESSION['user'] = array(

	"id" => 364,
	"pseudo" => "Cyberastuces"

);

$bdd = new PDO("mysql:host=127.0.0.1;dbname=chatbox;charset=utf8", "root", "");

// Traitement url
if(isset($_GET['url'])) {
	$url = $_GET['url'];
} else {
	$url = "home";
}

// Redirects
if($url == "home") {
	require_once "php/home.php.php";
}



?>
Fichier index.php

 

<?php

// Home PHP page

// Form send messages
if(isset($_POST['send'])) {
	if(isset($_POST['message'])) {
		if(!empty($_POST['message'])) {
			if(strlen($_POST['message']) <= 500) {

				$message = htmlspecialchars($_POST['message']);

				$req = $bdd->prepare("INSERT INTO messages (pseudo, message) VALUES (?,?)");
				$req->execute(array($_SESSION['user']['pseudo'], $message));

			} else {
				$error = "Votre message doit faire moins de 500 caractères !";
			}		
		} else {
			$error = "Vous devez entrer un message !";
		}
	}
}



// Call view
require_once "views/home.view.php";

?>
Fichier home.php.php

 

<!-- Home View Page -->

<!DOCTYPE html>
<html>
	
	<head>

		<meta charset="utf-8">
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<title>Home</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	</head>

	<body>

		<header><?php require_once "includes/front-end/header.inc.php"; ?></header>

		<div class="content">
			<h2>Homepage</h2>

			<div class="chatbox">

				<div class="msgs">
				</div>

				<div class="form">
					<form method="POST" action="">
						<input type="text" name="message" placeholder="Message">
						<button type="submit" name="send">Envoyer</button>
					</form>
				</div>

			</div>

		</div>

		<footer><?php require_once "includes/front-end/footer.inc.php"; ?></footer>

	</body>

	<script>

		setInterval("messages()", 1500);
		function messages() {
			$(".msgs").load("views/chatbox_messages.view.php");
		}

	</script>

</html>
Fichier home.view.php

 

<?php

// Recovery all messages
$bdd = new PDO("mysql:host=127.0.0.1;dbname=chatbox;charset=utf8", "root", "");
$msgs = $bdd->query("SELECT * FROM messages ORDER BY id DESC");

?>


<?php while($msg = $msgs->fetch()) { ?>
	<b><?= $msg["pseudo"] ?></b> : <span class="message"><?= $msg['message'] ?><br />
<?php } ?>
Fichier chatbox_messages.view.php

 

<h1>Mon projet</h1>

<nav class="menu">
	<a href="index.php?url=home">Accueil</a>
</nav>
Fichier header.inc.php

 

html, body {
	background:#ecf0f1;
}

header {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
	background:#222;
}

header h1 {
	color:white;
	font-family:arial;
	font-size:28px;
	position:absolute;
	top:0px;
	left:0px;
	line-height:60px;
	margin:0;
	margin-left:20px;
	font-weight:normal;
}

header nav {
	position:absolute;
	top:0px;
	right:40px;
	height:60px;
}

header nav a {
	transition:all 0.3s ease;
	color:grey;
	font-family:arial;
	text-decoration:none;
	padding-right:20px;
	line-height:60px;
}

header nav a:hover {
	transition:all 0.3s ease;
	color:white;
}

div.content {
	position:absolute;
	top:60px;
}

div.content h2 {
	color:#222;
	font-family:arial;
	font-size:40px;
}

div.content div.chatbox {
	position:fixed;
	bottom:0px;
	right:100px;
	width:300px;
	height:400px;
	background:white;
	-webkit-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
}

div.content div.chatbox div.msgs {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:350px;
	font-family:arial;
	padding:10px;
	overflow: scroll;
	overflow-x:hidden;
}

div.content div.chatbox div.form {
	position:absolute;
	top:350px;
	left:0px;
	width:100%;
	height:50px;
	font-family:arial;
}

div.content div.chatbox div.form form {
	margin:10px;
}

div.content div.chatbox div.form form input {
	width:190px;
	height:30px;
	border:2px solid #222;
	border-radius:5px;
	outline:0;
	padding-left:10px;
}

div.content div.chatbox div.form form button {
	width:62px;
	height:32px;
	background:#222;
	color:white;
	border:0;
	cursor:pointer;
}
Fichier style.css
Catégories : Vidéo

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *