Dreamweaver ve společnosti PHP a MySQL 2.

14. září 2002

•

Po teoretickém úvodu nás dnes čekají první vývojářské krůčky ve vizuálním prostředí Dreamweaveru MX. Krok za krokem si ukážeme, jak vytvořit modul pro prohlížení záznamů ve vytvářené aplikaci.

Vzhledem k omezenému rozsahu bude design vytvářené aplikace co možná nejjednodušší. Výsledný modul, jehož tvorbu byste měli po přečtění následujícího textu zvládnout, si v provozu můžete prohlédnout.

Minulý díl jsme zakončili vytvořením databázového propojení, proto na tuto operaci plynně navážeme vytvořením tabulky pro úschovu jednotlivých kontaktů našeho adresáře. Pomocí konzole MySQL či rozhraní phpMyAdmin vytvoříme novou tabulku:

CREATE TABLE adresar (
   id int(3) NOT NULL auto_increment,
   jmeno varchar(40) default NULL,
   prijmeni varchar(40) default NULL,
   email varchar(40) default NULL,
   PRIMARY KEY (id)
)

Jak ze syntaxe SQL příkazu vidíte, každý záznam tabulky bude obsahovat čtyři atributy: celočíselné id s automatickým inkrementem a tři řetězcové atributy jmeno, prijmeni a email. O vytvořené tabulce následně informujeme Dreamweaver, vytvoříme tzv. recordset – výběr z položek tabulky (dotaz). Otevřeme soubor index.php a na paletce Application (nabídka Window | Application) vybereme záložku Bindings, kde stiskneme tlačítko + a z nabídky zvolíme Recordset:

Recordset

Následně dojde k zobrazení dialogového okna pro vytvoření recordsetu:

Položka name určuje jméno recordsetu, Connection jméno předem vytvořeného připojení – v našem případě tedy Adresar a Table název tabulky z níž budeme data vybírat. Výběr můžeme omezit pouze na některé sloupce (Columns – Selected). Potřebný výběr pak specifikujeme pomocí položky Filter a seřadíme výběrem ze seznamu Sort.

Jak sami vidíte, při tvorbě databázového dotazu jsme vůbec nepotřebovali znalosti jazyka SQL. Pokud bychom však chtěli vytvořit dotaz složitější, tak už se bez znalosti SQL neobejdeme. Pro tyto případy dialog disponuje tlačítkem Advanced, které rozšíří jeho možnosti pro potřeby zkušenějších uživatelů:

Naší pozornosti by neměl uniknout především editační box SQL, jehož obsahem je požadovaný příkaz jazyka SQL. Jak je vidno z ilustračního obrázku, Dreamweaver automaticky zkonvertuje náš dotaz z přecházejícího dialogu do jeho SQL podoby. Díky tomu tak lze Dreamweaver do jisté míry použít jako pomůcku pro výuku SQL. Pro snadnou orientaci mezi jednotlivými tabulkami a jejich atributy vřele doporučuji využívat dolní část dialogu Database Items, která ve stromovém náhledu přibližuje strukturu celé databáze, definované připojeným Connection. Zbývá dodat, že do původní – zjednodušené – podoby dialogu se lze vrátit stiskem tlačítka Simple, k potvrzení vytvoření nového recordsetu je určeno tlačítko OK.

Po aktivaci tohoto tlačítka se na záložce Bindings paletky Application objeví seznam atributů, jejichž zdrojem je právě vytvořený recordset:

Recordset

Nyní se můžeme přesunout k tvorbě stránky, která bude takto získané záznamy zobrazovat, souboru index.php. Pomocí nástrojů Dreamweaveru vytvoříme tabulku o pěti řádcích a dvou sloupcích. Buňky prvního řádku sloučíme – budou obsahovat navigační lištu pro pohyb mezi záznamy. Pro její vložení slouží položka Recordset Navigation Bar nabídky Insert | Application Objects. Po aktivaci dojde k zobrazení dialogu:

Dreamweaver se nás jeho prostřednictvím ptá, zda chceme vložit textovou navigační lištu (Text), či její grafickou podobou (Images). Vzhledem k tomu, že u grafických tlačítek nebudeme muset překládát textové popisky, doporučuji zvolit druhou variantu. Všimněte si, že program automaticky vyplníte název recordsetu, mezi jehož záznamy se budeme chtít pohybovat. Po stisku tlačítka OK se v tabulce objeví žádaná lišta:

Důvod existence řetězců Show If… u každého z tlačítek je prozaický: Dreamweaver nás infomujte o tom, že dané tlačítko bude zobrazeno pouze za určitých podmínek. Bylo by ostatně nelogické, kdyby se u posledního záznamu objevilo tlačítko pro přesun na záznam další, v tomto případě už neexistující.

Do dalších políček tabulky dopíšeme potřebné textové popisky, poslední řádek si necháme připraven pro plánovaná tlačítka pro vložení nového a úpravu již existujícího záznamu. Do druhého sloupce pak umístíme dynamicky generované texty, hodnoty atributů jednotlivých záznamů. Jejich zdrojem bude opět záložka Bindings paletky Application. Zde klikneme na políčko Recordset, čímž rozbalíme stromovou strukturu záznamu. Metodou drag and drop (táhni a pusť) pak přetáhneme jednotlivé atributy do přílušných políček tabulky. Výsledek celé operace by měl vypadat následovně:

Pro kontrolu propojení s databázovým serverem nyní využijeme funkci Live Data (nabídka View – Live Data, resp. klávesová kombinace Ctrl+Shift+R). Po aktivaci toho módu se Dreamweaver spojí s databází a vložené dynamicky generované komponenty vyplní jejich aktuálními hodnotami, jsou-li v databázi nějaké:

Nutno dodat, že v tomto módu nefunguje navigační lišta, pro plnohodnotný náhed na vytvořenou aplikaci musíme použít funkci Preview in Browser (nabídka File).

V příštím díle si ukážeme, jak vytvořit modul pro vkládání nových a úpravu již existujíích kontaktů.