LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> PHP (79) - Triky s formuláři a ergonomie webu

Kterak si pomoci méně známými triky s formuláři při vývoji portálu? A což to vlastně je ergonomie webu?

15.12.2004 15:00 | Petr Zajíc | Články autora | přečteno 38090×

Komerční sdělení: Pořádáme Kurzy PHP

Předchozí díl jsme zakončili smutným konstatováním, že soubor diskografie.php nedělá to, co by měl. Jeho úkolem totiž bylo zobrazovat názvy alb, nebo alb a zároveň písní. Dnes se podíváme, jak to dořešit.

Triky s formuláři

V díle, v němž se představovaly formuláře, jsem uvedl, že "klasický formulář obsahuje nějaké prvky pro uživatelský vstup (třebas textová pole) a nějaké prvky pro jeho odeslání". Rovněž Pavel Kácha v sesterském seriálu o HTML prohlásil, že "webový formulář je část stránky složená z různých tlačítek, vstupních polí a přepínačů, která slouží pro získání nějakých dat od uživatele". Ono to není úplně přesné. Může totiž existovat formulář, který bude obsahovat pouze odesílací tlačítko!

V našem případě takové tlačítko může být "dvoustavové" a může obsahovat pokyn pro zobrazení vydaných alb nebo pokyn pro zobrazení dat a zároveň písní. Celý trik přitom může spočívat v tom, že provedená akce se vyhodnotí podle toho, jaká byla hodnota value (a tedy i popisek) na tlačítku. Můžeme tedy zobrazit formulář pomocí finty:

<input name="zobrazeni" type="Submit" Value="<?echo ($_POST["zobrazeni"]==="Zobrazit i písně")? "Zobrazit jen alba":"Zobrazit i písně"?>">

a následně v kódu testovat zaslanou hodnotu nějak takto:

if ($_POST["zobrazeni"]==="Zobrazit i písně"):
// atd...
endif;

Mnoho dalších problémů s formuláři může vyřešit následující trik: Na jedné stránce můžete mít více různých formulářů, z nichž dva či více mohou provádět stejnou akci! Například bychom mohli chtít, aby se tlačítko pro modifikaci zobrazení objevilo nejen v úvodu stránky, ale rovněž v její patě. Není nic jednoduššího než vykopírovat definici formuláře na správné místo v dokumentu... a ono to bude fungovat!

Při zobrazování více formulářů na jedné stránce můžeme samozřejmě rovněž zapojit nějakou aplikační logiku. Tak třeba si budete přát, aby se v zápatí objevilo tlačítko pouze v případě, kdy je zobrazen výpis jak alb, tak písní. V tom případě můžete naprogramovat něco jako:

<?if ($_POST["zobrazeni"]==="Zobrazit i písně"):?>
<form method="post" action="index.php?clanek=diskografie">
  <input name="zobrazeni" type="Submit" Value="<?echo ($_POST["zobrazeni"]==="Zobrazit i písně")? "Zobrazit jen alba":"Zobrazit i písně"?>">
</form>
<?endif;?>

Metoda zobrazování formulářů obsahujících pouze tlačítka má nespornou výhodu v tom, že nezatěžuje uživatele mnoha ovládacími prvky a je nesmírně kompaktní. Jediným kliknutím na odesílací tlačítko tak můžete například přepínat mezi "krátkým" a "dlouhým" zobrazením, jako je tomu u nás. Ostatně, zkuste si to sami.

Pohodlné listování

Pokud si budete se sezbnamem alb a písní chvíli hrát, zjistíte, že je poměrně dlouhý. To má značnou nevýhodu - pokud budete v seznamu někde nízko, bude návrat nahoru znamenat velké rolování. Což představuje problém, protože všechny odkazy jsou v horní části webu. Řešit se to dá různě - například použitím prvku IFRAME. To by ale docela rozházelo náš celý návrh, takže se musíme porozhlédnout po něčem jiném.

To "něco" jsou záložky. V záhlaví stránky může být definována záložka, například pomocí kódu:

<a name="nahore"></a>

A ve vhodné části stránky se pak na záložku můžeme přemístit:

<?
echo "<tr><td><a href=\"#nahore\">Nahoru</a></td></tr>";
?>

Záložky popisuje ve svém seriálu o HTML Pavel Kácha, takže se můžete podívat, jak to s nimi je.

Pozn.: Pokud tomu, co Pavel vysvětluje nebudete rozumět, pak vězte, že nejste sami. Pavel totiž anglický výraz pro záložky, "bookmarks" překládá jako "návěští", přestože to je nestandardní. Navíc, Pavel mixuje výklad o záložkách s výkladem o odkazech, což jsou dvě různé věci. Jiný odkaz pro vysvětlení záložek můžete najít třeba zde.

Ergonomie webu

Úvahám o snadnosti ovládání a přístupnosti navigace se souhrnně říká ergonomie webu. Obecný návod, jak udělat ergonomický web neexistuje, takže Vám mohu nabídnout jen několik osvědčených pravd, mezi nimiž musíte balancovat sami:

  • Obecně platí, že validní weby mají tendenci být ergonomické. Není na tom nic divného, když si uvědomíte, že webové standardy jsou tu hlavně proto, aby nám život s webem usnadnily. Bráno pochopitelně z pohledu uživatele; co se týče vývojáře je to někdy spíše naopak
  • Obecně platí, že krátké stránky mají tendenci být ergonomické. Logicky - čím méně dat najednou uživateli nabídnete, tím spíše se v nich neztratí.
  • Stránky s chytře vymyšlenými kaskádovými styly mají rovnež tendenci být ergonomické. Vždyť styly slouží k oddělení obsahu webu od formy.

Pokud si nejste jisti, zda je web dostatečně ergonomický, můžete zkusit následující podněty:

  • Zkuste se na něm chvíli pohybovat a myslet přitom jako uživatel. Pokud Vám něco bude připadat složité, asi to tak je.
  • Posaďte k webu uživatele a sledujte jeho chování (třeba pohyby myši). Pokud je zmatený, asi web příliš ergonomický nebude.

K ergonomii webu v našem příkladu bychom mohli přispět, pokud bychom kromě uvedených věcí ještě zvážili následující záležitosti:

  • Řazení záznamů pomocí klauzule ORDER BY v dotazech SELECT pro MySQL databázi
  • Stránkováním výpisů - což už v seriálu bylo.

Změny na portálu

Na současný stav projektu se můžete na našem webu podívat nebo si jej můžete stáhnout.

Pozn.: Aby Vám stažená verze fungovala na lokálním stroji, upravte si hodnotu konstant SQL_HOST, SQL_USERNAME, SQL_PASSWORD a SQL_DBNAME. Případně si je můžete včlenit do konfiguračního souboru podobně, jako jsem to udělal v souboru func.php.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

27.2.2017 22:12 /František Kučera
Pozvánka na 137. sraz OpenAlt – Praha: Tentokrát jsme si pro vás připravili neobvyklou akci. Ve středu 1.3. v 17:30 nás přivítá sdružení CZ.NIC ve svých prostorách v Milešovské ulici číslo 5 na Praze 3, kde si pro nás připravili krátkou prezentaci jejich činnosti. Následně navštívíme jejich datacentrum pod Žižkovskou věží. Provedou nás prostory, které jsou běžnému smrtelníkovi nedostupné!
Po ukončení prohlídky se všchni odebereme do hostince U vodoucha, Jagelonská 21, Praha 3 pochutnat si na některém z vybraných piv či dát si něco na zub. Rezervaci máme od 19:30, heslo je OpenAlt.
Ale pozor! Do prostor datového centra máme omezený přístup, dostane se tam pouze 10 lidí! Takže kdo přijde dříve, ten má přednost, a občanky s sebou! Kdo nebude chtít na prohlídku datového centra, může se pomalu přesunout do hostince U vodoucha a u nepřeberné nabídky piv počkat na ostatní.
Přidat komentář

18.1.2017 0:49 /František Kučera
Členové a příznivci spolku OpenAlt se pravidelně schází v Praze a Brně. Fotky z pražských srazů za uplynulý rok si můžete prohlédnout na stránkách spolku. Příští sraz se koná už 19. ledna – tentokrát je tématem ergonomie ovládání počítače – tzn. klávesnice, myši a další zařízení. Také budete mít příležitost si prohlédnout pražský hackerspace Brmlab.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

1.8.2017 7:32 / Cassidy
structural consultants

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

26.7.2017 21:12 / Jaromir Obr
Podminka

15.6.2017 9:34 / Ondřej Havlas
php,

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze