|
|
|
PHP Chat mit Ajax
Zurück zur Übersicht
Zuerst kommt der PHP Teil.
Wir legen einen Ordner an und nennen wir "inc".
In diesem Ordner befindet sich eine "config.php" mit diesem Inhalt:
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
9:
|
<?php
$server = 'localhost';
$user = 'root';
$pass = '';
$db = 'chat';
$table = 'chattext';
mysql_connect($server, $user,$pass);
mysql_select_db($db);
?>
|
|
Natürlich muss man die Daten noch richtig anpassen.
Bei phpMyAdmin erstellst du eine Datenbank mit dem Namen "chat".
Hier ein Bild:
Dannach erstellen wir eine index.php mit diesem Inhalt:
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
|
<style type="text/css">
#textbox{
width:219px;
border:1px solid orange;
}
#textbox:focus{
border:1px solid #3399FF;
}
#button{
border:1px solid #FF1493;
cursor:pointer;
}
#button:hover{
border:1px solid #3399FF;
}
</style>
|
|
Diese Zeilen erkläre ich nicht da dies hier keine Seite ist um CSS zu lernen. Es dient nur dazu, die Buttons und Textboxen schöner zu gestalten!
Jetzt der Javascript/Ajax Teil:
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
|
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ajax_chat").innerHTML=xmlhttp.responseText;
}
}
string = document.getElementById("ajax_chat").innerHTML;
xmlhttp.open("GET","ajax_loader.php?id="+string+"&blabla="+Math.random(),true);
xmlhttp.send();
}
</script>
|
|
Dieser Teil ist der wichtigste:
| PHP |
1:
2:
3:
|
xmlhttp.open("GET","ajax_loader.php?id="+string+"&blabla="+Math.random(),true);
xmlhttp.send();
}
|
|
Damit senden per GET die Variable "string" mit diesem Inhalt:
| PHP |
1:
|
document.getElementById("ajax_chat").innerHTML;
|
|
Jetzt kommt der PHP Teil (Datenbank schreiben, lesen usw..)
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
|
<?php
//Config auslesen
require_once('inc/config.php');
echo '
<form action="index.php" method="post">
<table border="0">
<tr>
<th><span style="font-weight:normal;">Nickname:</span></th><td><input type="text" name="nick" value="'.htmlspecialchars($_POST['nick']).'" id="textbox"></td>
</tr>
<tr>
<th><span style="font-weight:normal;">Nachricht:</span></th><td><input type="text" name="eintrag" value="'.htmlspecialchars($_POST['eintrag']).'" id="textbox"> <input type="submit" name="eintragen" value="Senden!" id="button"> <input type="button" id="button" onClick="loadXMLDoc();" value="Reload"></td>
</tr>
</table>
<div id="ajax_chat" style="border:1px dotted black; width:402px; height:190px; padding:5px; overflow: auto;">';
$abfrage = mysql_query("SELECT chattextFROM $table");
while($row = mysql_fetch_array($abfrage))
{
echo $row['chattext'].'<br />';
}'
</div>';
if(isset($_POST['eintrag'])){
if(empty($_POST['nick']) || empty($_POST['eintrag'])){
echo '<script>alert("Bitte Nick oder Nachricht eingeben -.-")</script>';
}else{
//Variablen definieren und mit "POST" Daten füllen (Mit htmlspecialchars filtern..)
$nick = htmlspecialchars($_POST['nick']);
$eintrag = htmlspecialchars($_POST['eintrag']);
//Die 2 oben definierten Variablen zusammensetzen
$alles = '<span style="color:#FF1493">'.$nick.'</span>: <span style="color:#3399FF">'.$eintrag.'</span>';
//Nick + Eintrag in die Datenbank schreiben
mysql_query("INSERT INTO $table
(chattext) VALUES
('$alles')");
}
}
?>
|
|
Dieser Code ist bereits kommentiert.
Nun erstellen wir eine "ajax_loader.php" mit diesem Inhalt:
| PHP |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
|
<?php
$abfrage = $_GET['id'];
$neu = '';
//Config auslesen
require_once('inc/config.php');
$ergebnis = mysql_query("SELECT chattext FROM $table");
while($row = mysql_fetch_array($ergebnis))
{
$neu .= $row[chattext].'<br /></div>';
}
if ($abfrage !== $neu){
echo $neu;
}
|
|
Ja ist eigentlich logisch dieser Code..
$abfrage ist der alte Code und $neu der neue.
Ist der alte gleich wie der neue Code aktualisert es den Chat nicht, ansonsten schon.
Am Ende siehts dann so aus:
Viel Spass ;-)
Kommentare
Zurück zur Übersicht
Autor Sampower
|
|
|
|
