Umíme ve Flashi – 15. díl – návštěvní kniha I.

Mezi významné prvky webových prezentací patří části věnované interakci s uživateli. Flash ve spolupráci s dalšími programovacími jazyky si s různými anketami, chaty, nebo návštěvními knihami umí dobře poradit. I z tohoto důvodu dnes začneme další z miniseriálů, věnovaný již zmíněným aplikacím. Na úvod si vytvoříme velmi jednoduchou návštěvní knihu.

Návštěvní kniha

Každý by rád umožnil návštěvníkům webových stránek, aby mohli zanechat vzkaz autorovi, nebo dalším uživatelům webu. Z podstaty věci je zřejmé, že vzkazy se musí někam ukládat, pokud s nimi chceme dál pracovat. Jinak bychom samozřejmě mohli nabídnout samotnou flashovou návštěvní knihu, nebo chat, ale tato aplikace by byla pouze pro mírně schizofrenní návštěvníky, kteří cítí potřebu si sami se sebou popovídat, víc nám čistě flashová aplikace zatím neumožňuje.

Proto se musíme opřít o další programovací jazyky, které umí zapisovat potřebná data. Na výběr máme z mnoha variant, ale vzhledem k tomu, že asi nejrozšířenějším a nejdostupnějším (z hlediska free hostingu) jazykem je php, zvolíme tento.

Schéma aplikace

Pro začátek si navrhneme velmi jednoduchou strukturu, abychom se hned neodradili od další tvorby. Nebudeme se proto zabývat databázemi, vytvoříme jednoduchou aplikaci, která bude ukládat vzkazy do textového souboru a následně je z něho bude načítat.

Uživatel ve flashovém formuláři vyplní několik textových polí, stiskne tlačítko pro odeslání, které pošle obsah vyplněných textových polí php skriptu. Php skript data zpracuje a uloží do textového souboru k dalším již uloženým zápisům. Nakonec php skript poskytne kompletní výpis textového souboru, který si zpátky převezme flashová animace. Nakonec v swf souboru zobrazíme výstup z textového souboru a máme hotovo.

Tvoříme návštěvní knihu

Popis máme hotový, pustíme se do práce. V novém dokumentu si nejdříve vytvoříme MC s formulářem. Objekt formuláře bude sloužit pro zadávání potřebných údajů zprávy a bude nás také informovat o úspěšném odeslání našeho vzkazu.

V MC, jehož instanci pojmenujeme „form“, vytvoříme celkem 4 vstupní textová pole, která pojmenujeme „jmeno“, „mail“, „urls“ a „vzkaz“. Posledně jmenované pole zvětšíme a na panelu vlastností jej nastavíme jako „multiline“. Do tohoto pole budeme psát text vzkazu, proto by mělo být dostatečně velké.

První snímek MC s textovými poli doplníme komponentou „Button“, kterou pojmenujeme „odeslat“. Nyní na časové ose, ve stejném MC, vytvoříme druhý klíčový snímek, do kterého umístíme text „Zpráva byla odeslána“ a tlačítko, na které dáme akci:

on(release){
  gotoAndStop(1);
}

Nezapomeneme do každého z obou klíčových snímků vložit akci stop(); , která zamezí neustálému přeskakování mezi snímky. Přeskok na snímek 2 se provede po odeslání zprávy. Pokud máme formulář hotový, vložíme ještě na hlavní scénu komponentu „textArea“, pojmenujeme jí „texty“ a určíme na panelu vlastností, že bude umět zobrazit html značky.

Objekty jsou připravené, podíváme se na AS. Do prvního snímku hlavní scény napíšeme:

var odesilatel:Object = new Object();
odesilatel.click = function(evt:Object) {
 var vzkazy:LoadVars = new LoadVars();
 vzkazy.onLoad = function(success:Boolean) {
  if (success) {
   form.gotoAndStop(2);
   texty.text = vzkazy.texts;
  } else {
   texty.text = "Chyba aplikace";
  }
 };
 var vzkaz:LoadVars = new LoadVars();
 vzkaz.jmeno = form.jmeno.text;
 vzkaz.vzkaz = form.vzkaz.text;
 vzkaz.mail = form.mail.text;
 vzkaz.url = form.urls.text;
 vzkaz.Odeslano = "ano";
 vzkaz.sendAndLoad("gb.php", vzkazy, "POST");
};

Objekt „odesilatel“ poslouží jako spouštěč odesílání a načítání dat ve spolupráci s php souborem. Akce objektu budeme volat vždy, když klikneme na tlačítko odeslat (odpovídající skript doplníme později). Použijeme zde dva „LoadVars“ objekty, kde první „vzkazy“ slouží pro načtení dat z php souboru a druhý objekt „vzkaz“, slouží pro odeslání hodnot z textových polí do php skriptu.

Všimneme si poslední metody „sendAndLoad“ která zajistí odeslání dat objektu „vzkaz“ do php souboru a zpětně vloží získaná data do objektu „vzkazy“. Hodnoty proměnných objektu „vzkaz“ se tímto předají php skriptu, který si je převezme a dále zpracuje.

Abychom nezapomněli na tlačítko pro odesílání, znovu si otevřeme MC s textovými poli a do prvního snímku dopíšeme:

odeslat.addEventListener("click", _level0.odesilatel);

Uvedený příkaz je zde proto, že pokud bychom jej umístili do prvního snímku hlavní scény, objekt „odesilatel“ nám po přechodu na druhý snímek MC „form“ z tlačítka zmizí. Umístěním na první snímek MC „form“ máme zajištěno, že i po návratu na první snímek bude objekt opět na komponentě tlačítka.

PHP soubor

Aby vše fungovalo, je nutné připravit php soubor, který se postará o samotnou proceduru ukládání a načítání dat. Komentovaný obsah php souboru je následující:

<?php
// zde přebereme proměnné zaslané flashovým souborem
$Odeslano  = $HTTP_POST_VARS["Odeslano"];
$Jmeno   = $HTTP_POST_VARS["jmeno"];
$Email   = $HTTP_POST_VARS["mail"];
$Web   = $HTTP_POST_VARS["url"];
$Vzkazy  = $HTTP_POST_VARS["vzkaz"];
// odstranění lomítek z textu
$Odeslano = stripslashes($Odeslano);
$Jmeno   = stripslashes($Jmeno);
$Email   = stripslashes($Email);
$Web   = stripslashes($Web);
$Vzkazy  = stripslashes($Vzkazy);
// soubor vzkazů
$NazevSouboru  = "gb.txt";
//pokud jsme poslali hodnotu proměnné Odeslano="ano" budeme zapisovat
if ($Odeslano == "ano") {
 // otevřeme soubor pr čtení a uložíme jeho obsah do proměnné PuvodniVzkazy
 $fp  = fopen( $NazevSouboru,"r");
 $PuvodniVzkazy  = fread($fp, 80000);
 fclose( $fp );
 // naformátujeme nový vzkaz
 $NovyVzkaz = "Jmeno: <b>$Jmeno</b><br>Email: <b><u><a href=\"
$Email
WWW`>mailto:$Email\">$Email</a></u></b><br>WWW: <b><u><a href=\"http://$Web\" target=\"_blank\">$Web</a></u></b><br>Vzkaz: <b>$Vzkazy</b><br><i><br><br>:::";
 // do proměnné New spojíme púvodní vzkazy s novým
 $NoveVzkazy = "$NovyVzkaz$PuvodniVzkazy";
 // soubor přepíšeme novými vzkazy
 $fp = fopen( $NazevSouboru,"w");
 if(!$fp) die("&texts=nelze zapisovat do souboru: $NazevSouboru &");
 fwrite($fp, $NoveVzkazy, 800000);
 fclose( $fp );
}
// zde opět otevřeme soubor se vzkazy
$fp  = fopen( $NazevSouboru,"r");
$Data  = fread($fp, 800000);
fclose( $fp );
// vzkazy z proměnné Data vložíme do pole DataArray podle oddělovače ":::"
$PoleVzkazu = split (":::", $Data);
echo "&texts=";
for ($n = 0; $n < count($PoleVzkazu); $n++) {
 echo $PoleVzkazu[$n];
  if (!$PoleVzkazu[$n]) {
   echo "<br><br><b>Konec</b>";
   exit;
  }
 }
?>

Soubor uložíme pod názvem gb.php. Dále si připravíme prázdný textový soubor gb.txt. Pokud máme flashový soubor, php a txt soubor hotov, můžeme je nahrát na web. Po spuštění návštěvní knihy a pokusu o napsání vzkazu se z největší pravděpodobností zobrazí hláška, že nelze zapisovat do txt souboru. Je to z důvodu, že soubor nedisponuje dostatečnými právy.

Musíme u něj umožnit zápis všem uživatelům. Pokud používáme webové rozhraní pro správu souborů na serveru, zpravidla zde najdeme možnost jak přiřadit soboru/adresáři více práv (CHMOD 777). U ftp připojení lze změnu atributů provést přímo v ftp manažeru. Mezi hojně používané bude patřit Total Commander. V něm vybereme soubor na serveru a z menu zvolíme první položky „Soubory – Změna Atributů“ a zaškrtneme potřebná práva.

Máme-li v atributech povolen zápis a čtení pro všechny uživatele, můžeme se dočkat podobného výsledku jaký je zde.

Dnešní ukázka je opravdu jednoduchá a proto se v dalších dílech zaměříme na její vylepšování a přidávání dalších užitečných funkcí.

Zdrojové soubory dnešní ukázky jsou k dispozici zde.

Diskuze (21) Další článek: Ke stažení: vaříme s počítačem

Témata článku: , , , , , , , , , , , , , , ,