Inhalt:
- Ordnerstruktur
- Tabellenstrukturen
- Frontend
- Backend
- CSS
- JS
- Login
1. Ordnerstruktur
Zu allererst mal die Ordnerstrukturen:
backend
--chat.php
--online_users.php
--submit.php
css
--style.css
js
--jquery.js
login
--sessionheader.inc.php
config.inc.php
index.php
zugriff.inc.php
--chat.php
--online_users.php
--submit.php
css
--style.css
js
--jquery.js
login
--sessionheader.inc.php
config.inc.php
index.php
zugriff.inc.php
So nun fangen wir mit der Tabellenstruktur an:
CREATE TABLE IF NOT EXISTS `chat` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL,
`content` text,
`ip` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;
CREATE TABLE IF NOT EXISTS `settings` (
`max_off_time` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `settings` (`max_off_time`) VALUES
(20);
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`pw` varchar(255) NOT NULL,
`last_online` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `user` (`id`, `name`, `pw`, `last_online`) VALUES
(1, 'test', 'a94a8fe5ccb19ba61c4c0873d391e987982fbbd3', 0);
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL,
`content` text,
`ip` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;
CREATE TABLE IF NOT EXISTS `settings` (
`max_off_time` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `settings` (`max_off_time`) VALUES
(20);
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`pw` varchar(255) NOT NULL,
`last_online` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `user` (`id`, `name`, `pw`, `last_online`) VALUES
(1, 'test', 'a94a8fe5ccb19ba61c4c0873d391e987982fbbd3', 0);
index.php
Hier dürfte nix unbekannt sein:
PHP-Code:
<?php
include "login/sessionheader.inc.php";
include "config.inc.php";
include "zugriff.inc.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Chat</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
PHP-Code:
<script type="text/javascript">
$(document).ready(function() {
//Chat Submit START
$(function() {
$("#content").keyup(function(e) {
if (e.keyCode == 13) {
var content = $("#content").val();
if (!content == "") {
var dataString = 'content='+content;
$('#content').val('');
$.ajax({
type: "POST",
url: "backend/submit.php",
data: dataString,
cache: false,
success: function(html) {
}
});
}
}
});
});
//Chat Submit END
});
PHP-Code:
// Startet beide Funktionen, wenn die Seite fertig geladen ist.
$(document).ready(function() {
loadonlineusers();
loadchatmessages();
});
PHP-Code:
//Loads the Online Users START
function loadonlineusers() {
var url = "backend/online_users.php?jsoncallback=?";
$.getJSON(url, function(data) {
$('#users').html('');
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("user_online").appendTo("#users");
$("<label>").text(data[x].name).appendTo(div);
}
});
setTimeout("loadonlineusers()", 5000);
}
//Loads the Online users END
Diese Funktion wird alle 5 Sekunden ausgeführt, kann bei Bedarf auch höher- oder
tiefergesetzt werden.
PHP-Code:
//Loads the Chat START
function loadchatmessages(){
// ruft chat.php auf mit der anweisung, den chat neuzuladen.
$.getJSON("backend/chat.php?jsoncallback=?&new", function(data) {
var by_id = 0;
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("chat_message").appendTo("#chat");
$("<label>").text(data[x].name+": "+data[x].content).appendTo(div);
// Hier wird die letzte id in eine Variable gespeichert.
var by_id = data[x].id;
}
//scrollt automatisch immer nach unten
$("#chat").prop({ scrollTop: $("#chat").prop("scrollHeight") });
//ruft nach einer Sekunde loadcomments() mit der letzten id auf.
setTimeout("loadcomments("+by_id+")", 1000);
});
}
PHP-Code:
function loadcomments(by_id){
// hier wird chat.php mit der letzten id aufgerufen.
var url = "backend/chat.php?jsoncallback=?&by_id="+by_id;
$.getJSON(url, function(data) {
var theid = "";
// in dieser Schleife werden neue Chatnachrichten hinzugefügt, sofern vorhanden.
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("chat_message").appendTo("#chat");
$("<label>").text(data[x].name+": "+data[x].content).appendTo(div);
$("#chat").prop({ scrollTop: $("#chat").prop("scrollHeight") });
// Hier wird wieder die letzte id in der variable gespeichert.
var theid = data[x].id;
}
// Wenn es keine neuen nachrichten gab, nimmt er die alte id zum überprüfen,
if (theid == '') {
by_id = by_id;
// sonst hier die neue.
}else{
by_id = theid;
}
// Hier wird wieder die Funktion jede Sekunde aufgerufen, kann man natürlich auch bei
//bedarf verändern.
setTimeout("loadcomments("+by_id+")", 1000);
});
}
//Loads the Chat END
</script>
Der HTML Teil ist selbsterklärend:
PHP-Code:
<body>
<div id="info" class="info">
Nutzername: <b></b> | <b><a href=\"index.php?logoff=1\">Ausloggen?</a></b>
</div>
<div id="chat" class="chat">
</div>
<div id="right_bar" class="right_bar">
<h1>Online Benutzer:</h1>
<div id="users" class="users">
</div>
</div>
<div id="form" class="form">
<textarea id="content" class="content"></textarea>Drücke Enter zum Absenden.
</div>
</body>
</html>
PHP-Code:
<?php
include "login/sessionheader.inc.php";
include "config.inc.php";
include "zugriff.inc.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Chat</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Chat Submit START
$(function() {
$("#content").keyup(function(e) {
if (e.keyCode == 13) {
var content = $("#content").val();
if (!content == "") {
var dataString = 'content='+content;
$('#content').val('');
$.ajax({
type: "POST",
url: "backend/submit.php",
data: dataString,
cache: false,
success: function(html) {
}
});
}
}
});
});
//Chat Submit END
});
// Startet beide Funktionen, wenn die Seite fertig geladen ist.
$(document).ready(function() {
loadonlineusers();
loadchatmessages();
});
//Loads the Online Users START
function loadonlineusers() {
var url = "backend/online_users.php?jsoncallback=?";
$.getJSON(url, function(data) {
$('#users').html('');
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("user_online").appendTo("#users");
$("<label>").text(data[x].name).appendTo(div);
}
});
setTimeout("loadonlineusers()", 5000);
}
//Loads the Online users END
//Loads the Chat START
function loadchatmessages(){
$.getJSON("backend/chat.php?jsoncallback=?&new", function(data) {
var by_id = 0;
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("chat_message").appendTo("#chat");
$("<label>").text(data[x].name+": "+data[x].content).appendTo(div);
var by_id = data[x].id;
}
$("#chat").prop({ scrollTop: $("#chat").prop("scrollHeight") });
setTimeout("loadcomments("+by_id+")", 1000);
});
}
function loadcomments(by_id){
var url = "backend/chat.php?jsoncallback=?&by_id="+by_id;
$.getJSON(url, function(data) {
var theid = "";
for (var x = 0; x < data.length; x++) {
var div = $("<div>").addClass("chat_message").appendTo("#chat");
$("<label>").text(data[x].name+": "+data[x].content).appendTo(div);
$("#chat").prop({ scrollTop: $("#chat").prop("scrollHeight") });
var theid = data[x].id;
}
if (theid == '') {
by_id = by_id;
}else{
by_id = theid;
}
setTimeout("loadcomments("+by_id+")", 1000);
});
}
//Loads the Chat END
</script>
</head>
<body>
<div id="info" class="info">
Nutzername: <b></b> | <b><a href=\"index.php?logoff=1\">Ausloggen?</a></b>
</div>
<div id="chat" class="chat">
</div>
<div id="right_bar" class="right_bar">
<h1>Online Benutzer:</h1>
<div id="users" class="users">
</div>
</div>
<div id="form" class="form">
<textarea id="content" class="content"></textarea>Drücke Enter zum Absenden.
</div>
</body>
</html>
config.inc.php:
PHP-Code:
<?php
$dbname = "chat"; // Name der Datenbank
$dbhost = "localhost"; // Datenbankhost, meist localhost
$dbuser = "root"; // Benutzername für MySQL
$dbpassword = ""; // Passwort für MySQL
?>
PHP-Code:
<?php
mysql_connect("$dbhost","$dbuser","$dbpassword") or die("Verbindung zu MySQL gescheitert");
mysql_select_db("$dbname") or die ("Datenbankzugriff gescheitert")
?>
4. Backend
Zum Backend werd ich nicht viel erklären, da ich eher JSON und Javascript
in den Vordergrund stellen möchte.
chat.php:
PHP-Code:
<?php
include "../login/sessionheader.inc.php";
include "../config.inc.php";
include "../zugriff.inc.php";
if (isset($_GET["new"])) {
$sql_chat_view = "SELECT * FROM (SELECT c.id AS cid, c.user_id, c.content, u.id AS uid, u.name FROM chat c INNER JOIN user u ON c.user_id = u.id ORDER BY c.id DESC LIMIT 100) AS cid ORDER BY cid ASC";
$result_chat_view = mysql_query($sql_chat_view);
$zeilen_chat_view = mysql_num_rows($result_chat_view);
if ($zeilen_chat_view == 0) {
$comments = array("id" => "0", "name" => "", "content" => "");
} else {
for ($x = 0, $numrows = $zeilen_chat_view; $x < $numrows; $x++) {
$row = mysql_fetch_assoc($result_chat_view);
$comments[$x] = array("id" => $row["cid"], "name" => $row["name"], "content" => $row["content"]);
}
}
} else if (isset($_GET["by_id"]) && is_numeric($_GET["by_id"])) {
$by_id = $_GET['by_id'];
$sql_chat_view = "SELECT c.id AS cid, c.user_id, c.content, u.id AS uid, u.name FROM chat c INNER JOIN user u ON c.user_id = u.id WHERE c.id>$by_id ORDER by c.id ASC";
$result_chat_view = mysql_query($sql_chat_view);
$zeilen_chat_view = mysql_num_rows($result_chat_view);
if ($zeilen_chat_view == 0) {
$comments = array("id" => "", "name" => "", "content" => "");
} else {
for ($x = 0, $numrows = $zeilen_chat_view; $x < $numrows; $x++) {
$row = mysql_fetch_assoc($result_chat_view);
$comments[$x] = array("id" => $row["cid"], "name" => $row["name"], "content" => $row["content"]);
}
}
}
$response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")";
echo $response;
?>
PHP-Code:
<?php
include "../login/sessionheader.inc.php";
include "../config.inc.php";
include "../zugriff.inc.php";
// settings Tabelle laden
$sql_settings = "SELECT max_off_time FROM settings";
$result_settings = mysql_query($sql_settings);
$row_settings = mysql_fetch_assoc($result_settings);
// Variablen
$now = time();
$max_off_time = $row_settings["max_off_time"];
// Updaten der Online Zeit von dem angefragten User
$update_online_users_time = "UPDATE user SET last_online='$now' WHERE id='$uid' LIMIT 1";
mysql_query($update_online_users_time);
// Auslesen der Online User
$sql_chat_view = "SELECT name, last_online FROM user WHERE UNIX_TIMESTAMP() - last_online <= $max_off_time ORDER BY name ASC";
$result_chat_view = mysql_query($sql_chat_view);
$zeilen_chat_view = mysql_num_rows($result_chat_view);
if ($zeilen_chat_view == 0) {
$comments = array("name" => "");
} else {
for ($x = 0, $numrows = $zeilen_chat_view; $x < $numrows; $x++) {
$row = mysql_fetch_assoc($result_chat_view);
$comments[$x] = array("name" => $row["name"]);
}
}
$response = $_GET["jsoncallback"] . "(" . json_encode($comments) . ")";
echo $response;
?>
PHP-Code:
<?php
include "../login/sessionheader.inc.php";
include "../config.inc.php";
include "../zugriff.inc.php";
$user_id = $uid;
$content = trim(stripslashes($_POST['content']));
if (get_magic_quotes_gpc() == 0) {
$content = addslashes($content);
}
if (empty($content)) {
$fehler = true;
}
if (empty($user_id)) {
$fehler = true;
}
if (!is_numeric($user_id)) {
$fehler = true;
}
if (!$fehler) {
$sql_newchatmessage = "INSERT INTO chat VALUES ('', '$user_id', '$content', '$_SERVER[REMOTE_ADDR]')";
mysql_query($sql_newchatmessage);
}
?>
5. CSS
Die style.css sieht so aus:
Code :
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 | /* STANDART LAYOUT START */
html, body {
height: 99%;
width: 99%;
}
.chat {
min-height: 80%;
max-height: 80%;
width: 80%;
overflow: auto;
float: left;
}
.right_bar {
min-height: 80%;
max-height: 80%;
width: 20%;
overflow: auto;
float: left;
}
.form {
min-heigth: 20%;
max-height: 20%;
width: 100;
clear: left;
}
.content {
width: 700px;
height: 100px;
}
/* STANDART LAYOUT END */ |
6. JS
Die aktuelle jQuery Version hier downloaden
und in js/jquery.js packen.
7. Login
sessionheader.inc.php
PHP-Code:
<?php
$uid = 1;
?>
So das war's auch schon.
Hoffe ihr habt spaß mit dem Chat.
Im Anhang hab ich mal den ganzen Chat angehängt.
Der JSON Javascript Teil basiert auf diesem Tutorial.
Verbesserungsvorschläge sind natürlich Willkommen!
Login
Bereiche
Kategorien
Forum - Programming
Shop @ tutorials.de
tutorials.de-Systemmitteilung