Php + ajax + jquery + mysql

Fermé
mani862 - 5 févr. 2018 à 03:31
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 5 févr. 2018 à 07:50
Bonjour,

Actuellement je réalise un projet de développement web, je cherche à implémenter une salle de discussion en utilisant PHP avec fonctionnalités de chat privé.

Le problème est de savoir comment mettre à jour continuellement l'interface de manière naturelle et éventuellement comment afficher les messages «X est-ce que vous tapez …» dans un chat privé sans que la page web se recharge.

J'ai réussi a faire en sorte d'écrire le message et de le recevoir et afficher les messages mais le problème la page ce recharge tout le temps. J'ai pensé à utiliser ajax mais je ne sais pas comment m'y prendre. Je suis nouveaux dans le développement web.

J'ai beau avoir vu plusieurs forums et tutoriels, mais aucun moyen d'afficher les messages sans recharger la page web.

Merci à tous.


<?php
ob_start();
require_once '../core/init.php';
if(!is_logged_in()){
header('Location: login.php');
}
$user_id = $_SESSION["id"];
include 'includes/head.php';
include 'includes/navigation.php';

$chatbox = ((isset($_POST['chatbox']) && $_POST['chatbox'] != '')?sanitize($_POST['chatbox']):'');
$errors = array();
$fourusers_id = ((isset($_GET['fourusers_id']) && !empty($_GET['fourusers_id']))?sanitize((int)$_GET['fourusers_id']):'');
$fourusersQuery = $db->query("SELECT * FROM fourusers WHERE id = '{$fourusers_id}'");
$achusersQuery = $db->query("SELECT * FROM achusers WHERE id = '{$user_id}'");
$achusers_chat = mysqli_fetch_assoc($achusersQuery);
$tableachusers = $db->query("SHOW TABLES FROM ealomedb");
$row = mysqli_fetch_row($tableachusers);
//$by_message = 'fourusers'; pour fourusers folder

if (isset($_POST['submit'])) {
if (isset($_POST['submit']) && empty($chatbox)) {
$errors[] = 'You must fill out a word.';
}
//check for errors
if(!empty($errors)) {
echo display_errors1($errors);
}else {
//display the message in the data base
$db->query('INSERT INTO chat SET `message` = "'.$chatbox.'", `aid` = "'.$user_id.'", `fid` = "'.$fourusers_id.'", `by_message` = "'.$row['0'].'" ');//UPDATE `chat` SET `message` = '$chatbox' WHERE `chat`.`aid` = '$user_id' AND `chat`.`fid` = '$fourusers_id'
}
}

?>


<br><br>
<div class="container">
<div class="row">
<div class="col-md-3 pull-left">
<form class="form-inline">
<div class="form-group">
<input type="text" style="width:102% !important;" class="form-control" placeholder="search" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
<div class="panel panel-info">
<ul class="list-group">
<a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
<h4>brad pitt</h4><!--<span class="badge">2</span>-->
</a>

<a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
<h4>yo pitt</h4><!--<span class="badge">2</span>-->
</a>

<a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
<h4>mom</h4><!--<span class="badge">2</span>-->
</a>

<a class="list-group-item" role="button" data-toggle="collapse" href="#" aria-expanded="false" aria-controls="">
<h4>dad</h4><!--<span class="badge">2</span>-->
</a>
</ul>
</div>
</div>



<div class="col-md-8 pull-right">
<?php if(empty($fourusers_id)):
$errors[] = "Don’t have a new message or open your message";
if(!empty($errors)) {
echo display_errors1($errors);}?>
<?php else:?>
<?php while($fourusers_chat = mysqli_fetch_assoc($fourusersQuery)):
$chatdb = $db->query("SELECT * FROM chat WHERE aid = '$user_id' AND fid = '$fourusers_id' ORDER BY `time` ASC"); ?>
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> <?=$fourusers_chat['user_name'];?>
</div>
<div class="panel-body" id="chatbb">
<ul class="chat">
<?php while($messageAssoc = mysqli_fetch_assoc($chatdb))://display message?>
<?php if($messageAssoc['by_message'] == 'achusers'):?>
<div class="alert alert-info messBox" role="alert" id="<?=$messageAssoc['id']; ?>">
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle">
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span><?=$messageAssoc['time'];?></small>
<strong class="pull-right primary-font"><?=$achusers_chat['full_name'];?></strong>
</div>
<p id="messajax">
<?=$messageAssoc['message'] ;?>
</p>
</div>
</li>
</div>
<?php endif; ?>
<?php if($messageAssoc['by_message'] == 'fourusers'): ?>
<div class="alert alert-success messBox" role="alert" id="<?=$messageAssoc['id'] ;?>">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle">
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font"><?=$fourusers_chat['user_name'];?></strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span><?=$messageAssoc['time'];?></small>
</div>
<p id="messajax">
<?=$messageAssoc['message'] ;?>
</p>
</div>
</li>
</div>
<?php endif;?>
<?php endwhile; ?>
</ul>
</div>
<div class="panel-footer">
<form method="post" id="chatB" action="chat.php?fourusers_id=<?=$fourusers_chat['id'];?>">
<div class="input-group has-success">
<input id="btn-input" type="text" class="form-control input-sm" name="chatbox" class="chatbox" id="inputSuccess1" placeholder="Type your message here..." />
<span class="input-group-btn">
<button style="width:130%;" class="btn btn-info btn-sm" id="btn-chat" name="submit" value="Send">Send</button>
</span>
</div>
</form>
</div>
</div>
<?php endwhile;?>
<?php endif;?>
</div>
</div>
</div>

<style>
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
</style>

<script>

$(document).ready(function(){

$('#btn-chat').click(function(){
//var clientmsg = $(".chatbox").val();
$ajax({
url: 'chat.php',
type: 'POST',
data: {db:db,chatdb:chatdb},//parameter value to be passed pt style="display:none;"> .messBox
dataType: 'json',
success: function(html){
$(".messBox").show();
},
});

});

});
</script>

<?php ob_end_flush(); ?>
A voir également:

1 réponse

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
5 févr. 2018 à 07:22
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
5 févr. 2018 à 07:50
Sachant que pour automatiquement actualiser le contenu de ton chat.. tu dois utiliser du javascript : La fonction settimeout
https://www.w3schools.com/jsref/met_win_settimeout.asp
dans laquelle tu appelleras le script ajax.
0