Dreamweaver ve společnosti PHP a MySQL 3.

Modul pro vkládání nových kontaktů a jeho tvorba budou náplní dalšího dílu seriálu o tvorbě dynamických aplikací v prostředí editoru Dreamweaver MX.

Minulý díl jsme zakončili zmínkou o funkci Preview in Browser, která nám zprostředkovala pohled na jádro naší aplikace – modul pro prohlížení kontaktů. Komponentu, jejíž tvorbu si dnes ukážeme, budeme aktivovat právě z této, v naší aplikaci hlavní, stránky. Do posledního řádku tabulky tedy přidáme nový odkaz, příčemž pro jeho správné rozmístění použijeme vnořenou tabulku se dvěma sloupci (druhý sloupec rezervujeme pro odkaz na plánovaný modul pro úpravu kontaktů):

Nyní vytvoříme stránku pro vkládání nových kontatků. V nabídce File vybereme položku New a v dialogu pak volbu Dynamic Page – PHP:

Modul pro vložení nového kontaktu, což ve skutečnosti není nic jiného, než vložení nového záznamu do tabulky, lze v prostředí Dreamweaveru MX vytvořit dvěma způsoby. Ten první, jednodušší, spočívá v aktivaci položky Record Insertion Form , kterou najdeme v seznamu Application Objects nabídky Insert. V jejím dialogu stačí vybrat tabulku, do níž budeme vkládat nové položky a následně se v dokumentu objeví tabulka s formulářem, s jehož pomocí lze nové údaje snadno vkládat. My se však, především z pedagogických důvodů, budeme věnovat druhému, obecněji použitelnému, ručnímu způsobu.

Do prázdného dokumentu nejdříve umístíme objekt Form – základní stavební prvek budoucího formuláře. Na paletce Objects vybereme záložku Forms a zde klikneme hned na první tlačítko Form. V dokumentu se objeví červený rámeček, do nějž budeme následně umísťovat všechny komponenty formuláře:

Nyní vytvoříme tabulku o dvou sloupcích a pětí řádcích s příslušnými popisky, podobně jako na hlavní stránce. Pokud si chcete tuto nudnou činnost ušetřit, můžete tabulku i s jejím obsahem zkopírovat z hlavní stránky. V tom případě se však nevyhnete modifikacím v podobě mazání komponenty pro přechod mezi jednotlivými záznamy a dynamických textových řetězců reprezentujících jednotlivé atributy. Výsledek našeho snažení by měl vypadat následovně:

Do buněk pravého sloupce tabulky nyní vložíme editační políčka typu Text. Pro tento účel ze záložky Forms paletky Objects vybereme komponentu Text Field, kterou vložíme na příslušná místa do tabulky:

Takto vložená editační políčka jsou však pro naši aplikaci velice univerzální, proto jejich přípustné hodnoty poněkud omezíme. Základem bude specifikace maximální možné délky jednotlivých atributů. Pokud si pamatujete, tak v prvním díle seriálu byly součástí SQL příkazu pro tvorbu tabulky i velikosti atributů vytvářené tabulky. U každého z políček se proto přepneme do paletky Property inspector, s jejíž pomocí upravíme hodnotu parametru Max Chars, ukázkou budiž omezení délky atributu Jméno na 40:

Tím možnosti kontroly údajů nekončí, v některém z příštích dílu si ukážeme postup, jak bez napsání jediného řádku kódu kontrolovat správnost zadání např. emailové adresy bez nutnosti odeslání dat na server. V současné situaci má pro nás větší význam nastavení názvu jednotlivých políček. Pokud si pozorně prohlédnete předcházející obrázek, tak vám jistě neunikne řetezec jmeno pod názvem objektu textfield. Úpravou implicitního názvu textfield1 na jmeno jsem si políčko pojmenoval, což, jak uvidíte dále, ocením při finální části tvorby modulu.

Od paletky Property inspector se přesuňme zpět do dokumentu. Do posledního řádku tabulky hodláme umístit tlačítko pro vložení údajů, proto na paletkce Objects | Forms klikneme na tlačítko Button:

V dokumentu se poté objeví žádané tlačítko:

K úpravě popisku tlačítka, který se našinci líbit nebude, použijeme opět paletku Property inspector, kde nás bude zajímat položka Label. Tlačítko poté necháme označené a na paletce Application klikneme na záložku Server Behaviors, kde, podobně jako v předchozím díle, zobrazíme kliknutím na tlačítko + nabídku komponent:

Tentokrát nás bude zajímat položka Insert Record. S ní je spojen tento dialog:

V seznamu Connection zvolíme připojení nadefinované už v předchozích dílech. Tím se automaticky doplní i hodnota položky Insert Table, neboť naše ukázková databáze obsahuje pouze jednu tabulku. Seznam Columns pak definuje přířazení mezi políčky formuláře a atributy v databázi. Právě zde oceníte, že jste si jednotlivá editační políčka předem pojmenovali. Pokud jsou jejich jména navíc stejná se jména atributů v tabulce, přiřazení proběhne automaticky.

Na závěr už jen zbývá doplnit lokaci dokumentu, na nějž bude uživatel přesměrován po doplnění hodnot nového kontaktu (položka After Inserting, Go To). Pro náš případ bude nejvhodněnší hlavní stránka, tedy soubor index.php. Poté už můžeme kliknout na tlačítko OK a nově vytvořený soubor uložit pod názvem insert.php.

V dokumentu index.php pak už jen doplníme adresu u odkazu Vložit kontakt, který bude vést na dokument insert.php. Pak už se můžeme pustit do testování a následně i vkládání nových kontaktů.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.