[Tutorial] Shoutbox in Flash mit PHP, MySQL

Hi zusammen,

ich wollte mal kurz erklären, wie man eine Shoutbox in Flash mit PHP & MySQL realisiert. Für alle, die es interessiert.

Ich fang mal mit den SQL und PHP Sources an.

Zuerst muss ein Table in MySQL erstellt werden, in dem die Shouts später abgelegt werden.

PHP-Code:

DROP TABLE IF EXISTS `writing`;
CREATE TABLE `writing` (
  `id` bigint(14) unsigned NOT NULL auto_increment,
  `timestamp` timestamp(14) NOT NULL,
  `time` varchar(64) NOT NULL default '',
  `text` text NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `timestamp` (`timestamp`)
) TYPE=MyISAM PACK_KEYS=0 AUTO_INCREMENT=1 ; 


id ist hierbei der Primary Key, der inkrementell hochgezählt wird. Praktisch ein Schlüssel, der immer einzigartig bleibt und eindeutig einem Datensatz zugeordnet werden kann.
Timestamp ist ein Unique Key, das bedeutet, das es diesen nicht doppelt geben kann. Aus diesem kann man auf die Sekunden genau erfahren, wann der Shout gepostet wurde.
Time ist einfach eine Spalte, in der dann das Datum und die Uhrzeit in typographisch schöner Form kommt.
Text ist die Spalte für die Shouts.

Um nun Inhalte dort einzufügen, brauchen wir eine PHP Datei.

Diese sieht so aus:

PHP-Code:

<?php
require_once('config.inc.php');
if(!empty($_POST['content']))
    {
    $timestamp=date('d.m.Y / h:i:s A');
    $text=utf8_decode($_POST['content']);
    mysql_db_query($db_dbase,"insert into $db_tab (time,text) VALUES ('$timestamp','$text')");
    }
?>

Der Timestamp hier ist der Wert, der später in die Spalte Time eingetragen wird.
Da Flash mit UTF8 Codierung arbeitet müssen wir den String, der das Shout darstellen soll, UTF8 decodieren.
Danach folgt dann die MySQL Operation.
Das ganze steht in einer bedingten Anweisung, die dafür sorgt, das der Textstring nicht leer ist, wenn er in die Dbase geschrieben wird.

Die Variable Content wird aus Flash mit einem LoadVars Objekt und der Post Methode übergeben. Mehr dazu gleich.

Um das ganze auszulesen, brauchen wir ebenfalls eine PHP Datei.

PHP-Code:

<?php
require_once('config.inc.php');
require_once('function.inc.php');
$read=mysql_query("select time,text from $db_tab order by id desc",$handler);
while($a=mysql_fetch_array($read))
    {
    $result.=$a['time'].':<br>'.charReplace::replace(utf8_encode($a['text'])).'<br><br>';
    }
echo '&output='.$result;
?>

Eine kleine PHP Klasse, die auch eine Funktion hätte sein können (), (function.inc.php) sorgt dafür, das der Variablen Separator '&' nach Hexcode codiert wird, damit Strings, die diesen enthalten, nicht die Variablendefinition vorzeitig „beenden“.
Das sieht so aus:

PHP-Code:

<?php
class charReplace
    {
    function replace($x)
        {
        $k1=array('&');
        $k2=array('%26');
        for ($i=0;$i<1;$i++)
            {
            $x=str_replace($k1[$i],$k2[$i],$x);
            }
        return $x;
        }
    }
?>

Ok, nun zur swf. Diese ist in HTML eingebettet. Damit sichergestellt ist, das diese auch abgespielt werden kann, machen wir einen kurzen Umweg über Colin Moocks Flashinspector. Ich habe den ein wenig modifiziert, da der 2 Methoden der Weiterleitung/onTheFly Detection enthielt und irgendwie sehr unübersichtlich für mich war. Ist aber nur meine Meinung… Colin Moock wird schon wissen, was er tut!
(function.inc.js)

PHP-Code:

//Javascript 1.1
var requiredVersion=6;
var useRedirect=false;
var flash2Installed=false;
var flash3Installed=false;
var flash4Installed=false;
var flash5Installed=false;
var flash6Installed=false;
var flash7Installed=false;
var flash8Installed=false;
var flash9Installed=false;
var maxVersion=9;
var actualVersion=0;
var hasRightVersion=false;
var jsVersion=1.0;            
var isIE=(navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin=(navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
jsVersion=1.1;
if(isIE && isWin)
    {
    document.write('<scr' + 'ipt language=VBScript\> \n');
    document.write('on error resume next \n');
    document.write('flash2Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.2"))) \n');
    document.write('flash3Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.3"))) \n');
    document.write('flash4Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.4"))) \n');
    document.write('flash5Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.5"))) \n');  
    document.write('flash6Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.6"))) \n');  
    document.write('flash7Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.7"))) \n');
    document.write('flash8Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.8"))) \n');
    document.write('flash9Installed=(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.9"))) \n');
    document.write('<\/scr' + 'ipt\> \n');
    }
function detectFlash() 
    {  
    if (navigator.plugins) 
        {
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) 
            {
            var isVersion2=navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
            var flashDescription=navigator.plugins["Shockwave Flash" + isVersion2].description;
            var flashVersion=parseInt(flashDescription.substring(16));
            flash2Installed=flashVersion == 2;    
            flash3Installed=flashVersion == 3;
            flash4Installed=flashVersion == 4;
            flash5Installed=flashVersion == 5;
            flash6Installed=flashVersion == 6;
            flash7Installed=flashVersion == 7;
            flash8Installed=flashVersion == 8;
            flash9Installed=flashVersion >= 9;
            }
        }
    for (var i=2; i <= maxVersion; i++) 
        {  
        if (eval("flash" + i + "Installed") == true) actualVersion=i;
        }
    if(navigator.userAgent.indexOf("WebTV") != -1) actualVersion=4;  
    if (actualVersion >= requiredVersion) 
        {
        hasRightVersion=true;                
        } 
    else 
        {  
        hasRightVersion=false;
        }
    }
detectFlash(); 


var requiredVersion=6; … dort einfach die mindestens benötigte Flashplayerversion angeben. Zum Testen kann man das einfach mal auf 8 setzen.

Die HTML Datei dazu sieht dann so aus:

PHP-Code:

//HTML 4.0
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta name="description" content="Some thoughts, a few words. Just one minute poetry.">
<meta name="keywords" lang="de,en" content="Philosophie,Words,Poetry">
<meta name="robots" content="all">
<meta name="revisit-after" content="7 days">
<title>Writing to reach you | Autumn 2004</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script language="javascript" type="text/javascript" src="function.inc.js"></script>
</head>
<body>
<table width="100%" height="100%">
    <tr>
        <td align="center" valign="middle">
            <table>
                <tr>
                    <td>            
                        <script language="javascript" type="text/javascript">                      
                            
                            var swf_x=900;
                            var swf_y=675;                            
                            if(hasRightVersion) 
                                {
                                var oeTags='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
                                + 'width="'+swf_x+'" height="'+swf_y+'"'
                                + 'id="mainobject"'
                                + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
                                + '<param name="movie" value="written.swf">'
                                + '<param name="quality" value="best">'
                                + '<embed src="written.swf"'
                                + 'width="'+swf_x+'" height="'+swf_y+'"'
                                + 'name="mainobject"'
                                + 'quality="best"'
                                + 'type="application/x-shockwave-flash"'
                                + 'pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">'
                                + '<\/embed>'
                                + '<\/object>';
                                document.write(oeTags);
                                } 
                            else 
                                {
                                var alternateContent='<img src="img/get_flash_player.gif">';
                                document.write(alternateContent);
                                }
                        </script>
                        <noscript>
                            <img src="img/javascript.jpg">
                        </noscript>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table> 
</body>
</html> 


So, nun zum Actionscript. Der gesamte Code steht im 1. Frame.

PHP-Code:

//Actionscript 1.0

//der obligatorische Preloader
this.onEnterFrame=function()
    {
    var current=_root.getBytesLoaded();
    var total=_root.getBytesTotal();
    var percent=Math.round((current/total)*100);
    if(current>=total) 
        {
        delete this.onEnterFrame;
        this.gotoAndPlay(_currentframe+1);        
        }
    else
        {
        _root.percent.text=percent;
        }
    } 


PHP-Code:

//Actionscript 1.0

//Die Funktion, die die PHP Datei zum auslesen aufruft, und die Werte verarbeitet.
_global.dbaseOutput=function()
    {
    var read=new LoadVars();
    read.object=this;
    read.load('query.php');
    read.onLoad=function()
        {
               //Splitting ist wichtig, da sonst Zeilenumbrüche verdoppelt werden.
        _root.output.htmlText=this.output.split('\r\n').join('\r');
        delete this.object['read'];
        };
    };

//Die Funktion, um die Werte in die Dbase zu schreiben.
_global.dbaseInput=function()
    {
    var write=new LoadVars();
    write.object=this;
       //Hier wird die Variable bereitgestellt, die später in PHP $_POST['content'] heisst.
    write.content=_root.input.text;
    write.sendAndLoad('insert.php',write,'POST');
    write.onLoad=function()
        {
        _root.input.text='';
             //Nach erfolgreichem Schreiben in die Dbase wird diese erneut abgefragt, um den neuen Beitrag anzuzeigen.
        _global.dbaseOutput();
        delete this.object['write'];
        };
    };
this.stop(); 


Jo… das war es schon. Wie man Inputfelder anlegt und die Funktionen dann auf einen Button legt, muss ich ja nicht erzählen… wie immer ohne Callbacks… kann man machen, wenn man möchte. Aber ich verzichte bei sowas immer darauf. Das macht meiner Meinung nach bei Shops und kommerziellen Sachen Sinn, aber hier kann man ruhig schon mal darauf verzichten.

Zu diesem Thema habe ich noch ein paar ähnliche Tutorials gebastelt. Solange Rena das noch nicht splitted hat, findet man die komplett hier

Ansehen könnt ihr euch die Shoutbox hier.

Liebe Grüße

Yves

Für thebiz.

[projecktx]

Zitat von 409coffeemaker

.........

PHP-Code:

<?php
require_once('config.inc.php');
require_once('function.inc.php');
......

....

PHP-Code:

//HTML 4.0
<html>
.....
<script language="javascript" type="text/javascript" src="function.inc.js"></script> 
..... 


du solltest vielleicht noch für leute erklären die diese dateien nicht haben wo sie die her bekommen oder welche von den oben angegebenen php´s nun die config.inc.php und welche die functions.inc.php ist und das die javascript datei "function.inc.js" heissen muss

wollts nurmal so anmerken

anssonsten super idee das tut

Gruss Sascha

[thebiz]

Sehr schön!
Danke Yves.

Guten Morgen!

Ich hab oben in Klammern dazu geschrieben, was function.inc.php und was function.inc.js sind.
Alles was man benötigt ist in diesem Tutorial enthalten.

Hier dann zur Vollständigkeit die Config, in die man natürlich noch die Dbase Werte eintragen muss.

PHP-Code:

<?php
$db_host='localhost';
$db_login='';
$db_pass='';
$db_dbase='';
$handler=
mysql_connect($db_host,$db_login,$db_pass);
mysql_select_db($db_dbase,$handler);
$db_tab='writing';
?>

Liebe Grüße
Yves

[bobby]

habs mal im tut bereich verlinkt
http://www.flashforum.de/forum/flash-tutorials/shoutbox-flash-mit-php-mysql-141684.html#post1030849

[projecktx]

Dankeschn an Yves, wie gesagt ohne diese Ergänzungen hät ich das als totaler anfänger und newbie nicht hinbekommen vielleich hätte sogar manch anderer sich über darüber gewundert das ihm dateien fehlen, zum glück aber sind die meisten begabter als ich .

Nochmal ist echt ein super Tut und vor allendingen sehr verständlich gehalten mein glückwunsch.

gruss Sascha

Hi,

ich bekomme in regelmäßigen Abständen per PN die Anfrage, ob ich die Fla und die weiteren Sources zu diesem Tutorial vergeben kann.

Nun… das ganze war eine Quick'n'Dirty Sache und hat insgesamt ca. 20min gedauert… jeder, der das Tutorial umfassend gelesen hat, wird seinen Lernerfolg nur so prüfen können, indem er das ganze einfach selbst erledigt… ist ja auch irgendwie Sinn der Sache…
Dann entstehen zb. nicht solche Fragen, wie man zb. das ganze um die Angabe eines „Verfassers“ erweitern könnte… da man bei Lernerfolg das ganze in Analogie ableiten kann.

Anyway… ich meine die Fla mal an jemanden verschickt zu haben… selbst habe ich diese gar nicht mehr… wenn dieser jemand das hier liest, sollte er bitte kurz sich melden…die Fla kann gerne weiterverschickt werden.

Für alle anderen… das ist echt nicht so schwer. Ein wenig Geduld, dann klappt das auch.

Ansonsten hier der offizielle FAQ/Help Thread… jenachdem wie die aktuelle Joblage aussieht, helfe ich gerne weiter. Aber bitte nicht per PN bombadieren…

Liebe Grüße

Yves

[thebiz]

Hi Yves.
Grüße
John.

[warrantmaster]

nice work ! (5*)
grz

Hi John, hi Jens (=? war doch dein Name, oder?)…

Hab dich noch gut in Erinnerung… tolle Hilfe damals bei einer setInterval Problem

Freut mich das soviele positive Feedbacks in der Shoutbox landen. Ab und an entferne ich ein paar „Testbeiträge“… die „Lob- & Danksagungen“ exportiere ich mir dann bescheidenerweise als Datadump, druck's mir aus, falte nach bester Origaminatur eine Blume daraus, und stelle mir das in eine Vase
Ich hoffe da ist mir niemand böse.

Nebenbei… ich meine die Fla mal verschickt zu haben… wenn die also jemand noch hat, bitte mal melden. Ich würde dann einfach ein paar weitere Features einbauen und hier erklären.

zb. einen Preloader für das LoadVars Objekt… irgendwann, je nach Anzahl der Beiträge, könnte das schon mal etwas dauern.

Außerdem würde ich dann ein kleines Adminpanel einbauen, einen Userlogin optional (mit Cookie, Passwort, Anmeldung, blabla) basteln und vielleicht eine Combobox, wo man auswählen kann, ob alle Beiträge, die der letzten 24h oder die des letzten Monats angezeigt werden sollen. Ebenfalls in Flash & PHP.
Und den ganzen Kram noch als generierte PDF zum Download… wenn jemand sich den Mist offline durchlesen will… kann ma ja ne Menge demonstrieren an dem Beispiel.
Und das positive Feedback ist genug Ansporn

Hehe…

Danke und liebe Grüße

Yves

[warrantmaster]

...nu hat´s dich....

btw, jens stimmt.

grz

Hi…

mich hat's schon länger… mittlerweile richtig arbeitswütig… ich hoffe wenn unser Portfolio fertig ist, kommen auch ein paar interessante Flashjobs herein…


Was ich gerade nochmal anmerken möchte… ich finde es schade, das mich viele PN und Email erreichen, aus denen ausnahmslos hervorgeht, das derjenige sich nicht die Mühe macht, das ganze auch nur ansatzweise zu verstehen und stattdessen blind die Scripts kopiert…

Zb. kommen Fragen wie „was muss auf den Button“ bzw. „wie muss ich das Textfeld anlegen“, oder „welchen Instanznamen soll ich dem Textfeld geben“.

Ich weiß nicht so recht, wie ich damit umgehen soll… ich helfe gerne, wenn ich Zeit habe, das weiß jeder der mich kennt :-)
Schade finde ich nur, das einige sich nicht die Mühe machen, das ganze lernend zu verarbeiten, um somit eine Bereicherung der eigenen Fähigkeiten zu erzielen…

Ich hab daher beschlossen, alleine aufgrund der Zeit, nur noch in dem Shoutbox FAQ Thread (Link siehe oben) auf Probleme einzugehen… es sei denn, ich merke, das derjenige etwas Eigenimpuls zur Problemlösung beiträgt… dann nehme ich mir gerne die Zeit und helfe nach meinen Möglichkeiten weiter… muss ja auch noch ne Menge lernen.


Ich hoffe ich ernte etwas Verständnis und nicht nur Kopfschütteln mit meinem Entschluß… was sagt ihr dazu?
Falls mir jemand meine Fla nochmal zur Verfügung stellt (hehe… wie das klingt…), poste ich diese dann für den Teil, der nicht lernen mag, hier im Forum.

Liebe Grüße

Yves

[thebiz]

Ja das kenne ich auch.

Leute, die sich sehr offensichtlich nicht die Mühe
machen und denken man macht das schon für sie.

Ich glaube fast, die meinen man sei irgendwie etwas
dümmlich.

Da würde ich einfach nicht mehr helfen.

Hi John,

ich weiß nicht, ob die das denken… ich weiß auch nicht, ob ich als Anfänger auch so war… aber ich glaube schon… .
Naja… irgendwie wird bei den meisten Tutorials nicht deutlich, das man daraus lernen sollte…
Klingt jetzt total oberschullehrermäßig… *erhobener Zeigefinger*… weiss auch nicht warum ich das schreibe… kann bestimmt sehr schnell falsch verstanden werden… aber ich habe die erste Zeit auch viele Tutorials nur kopiert, bis ich mal verstanden habe, warum ich bei jedem neuen Problem oder leichtesten Abweichung nicht weiterkam. Gelernt hab ich aber erst, indem ich dann Scripts nicht kopiert, sondern auf Basis eines Tutorials selbst geschrieben habe… ging am Anfang auch echt oft in die Hose…
Ein Grund war, das ich festgestellt habe, an einem anderen Arbeitsplatz ohne Internetzugang und meine Snipplets praktisch nutzlos zu sein… nach 2 Projekten, die ich mit PHP, SQL, AS realisiert habe, konnte ich zb. immer noch kein LoadVars oder eine MySQL Query, geschweige denn ohne PHPmyAdmin eine Dbase erstellen.

Sorry, wenn das jetzt als Klugsh1cing herüberkommt… wollte ich nicht. Für die, die die gleichen Erfahrungen gemacht haben… danke für euer Verständnis.

Liebe Grüße

Yves