LAB03 - nvbach91/4IZ278-2020-2021-LS GitHub Wiki

Cvičení 03 - With great power comes great responsibility

Povinná četba (na doma)

Náplň cvičení

  • asociativní pole (objekt)
  • include + require
  • řetězcové funkce
  • ternární operátor
  • inline if-endif
  • formuláře
  • globální objekty
  • čtení dat z POST požadavku
  • validace vstupu na serveru
  • odpověď ze serveru

Bodovaná samostatná práce na cvičení

  • Vytvořte formulář pro registraci hráče na turnaj v karetní hře.
  • Chceme evidovat následující údaje:
    • Celé jméno,
    • Pohlaví,
    • E-mail
    • Telefon
    • Profilový obrázek (externí URL odkaz na něj),
    • *Název balíku,
    • *Počet karet v balíku.
  • Na klientské straně nepoužívejte žádnou validaci ve formuláři. Pro účely tohoto cvičení proběhnou všechny validace na straně serveru. (V praxi se validuje jak na serveru, tak i na klientovi pomocí atributů required, pattern, type, ..., ale to už umíme)
  • Uživatel vyplní požadované údaje a formulář odešle kliknutím na tlačítko Submit.
  • Server na základě těchto informací vrátí stejnou stránku s oznámením o úspěšnosti registrace.
  • V případě selhání je uživateli zobrazena příslušná hláška o konkrétní chybě, např. když uživatel nevyplnil jméno, špatný formát datumu, nekladný počet karet, ...
  • Údaje ve formuláři zůstanou vyplněné i po submitnutí, tj. server si tyto údaje bude pamatovat a vrátí formulář ve stavu před odesíláním.
  • U profilového obrázku rovnou aplikujte do avataru a zobrazte ho po submitnutí.

Návod

  • Vytvořte HTML stránku a formulář s uvedenými inputy (použijte vhodné typy inputů, select, ...).
<form class="form-signup" method="..." action="...">
    <div class="alert alert-danger">Show alert only after submission and change alert type accordingly</div>
    <div class="form-group">
        <label>Name*</label>
        <input class="form-control" name="name" value="">
    </div>
    <div class="form-group">
        <label>Email*</label>
        <input class="form-control" name="email" value="">
    </div>
    <div class="form-group">
        <label>Phone*</label>
        <input class="form-control" name="phone" value="">
    </div>
    <div class="form-group">
        <label>Avatar URL*</label>
        <input class="form-control" name="avatar" value="">
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>
  • Nezapomeňte na potřebné atributy inputu jako name.
  • Pro submitnutí formuláře vytvořte také tlačítko button.
  • Pro přehlednost rozdělte stránku do více částí: statické a dynamické. Horní a dolní část stránky naimportujte přes require.
  • Do action formuláře uveďte tu samou stránku. Lze použít $_SERVER['PHP_SELF'].
  • Do method uveďte POST.
  • V části PHP zkontrolujte globální objekt $_POST pomocí metody empty().
  • Když je prázdný, znamená to, že stránka byla otevřena bez submitnutí formuláře a vrátíte stránku v původním nemodifikovaném stavu.
  • Když není prázdný, znamená to, že stránka byla otevřena po submitnutí a údaje z formuláře jsou k dispozici.
  • Vytáhněte si tyto údaje z objektu $_POST do proměnných pomocí klíčů, které jste si nadefinovali u inputů ve formuláři.
  • Postupně si zkontrolujte validitu těchto údajů, přičemž si budete zaznamenávat indikaci o chybě, např. pomocí dvou proměnných.
  • Podle této indikace budete vypisovat příslušnou hlášku. Tj. jestli registrace byla úspěšná, a pokud byla neúspěšná tak proč. Lze použít inline if-endif, podobně jako foreach-endforeach.
  • Aby si formulář "zapamatoval" vyplněné údaje, do atributů value v inputech vypište tyto údaje do příslušných míst, pokud byly zadány. Pokud nebyly zadány, vypište prázdný string. Zde použijte funkci isset() a ternární operátor $condition ? $valueIfTrue : $valueIfFalse.
  • Jako bonus si zkuste odeslat jednoduchou zprávu o úpěšnosti na e-mail z formuláře v případě, že prošla všemi validacemi.
  • S těmito údaji se dá dále pracovat, např. ukládat do databáze jako opravdová registrace, ale to si ukážeme příště.
  • Příklad řešení: https://eso.vse.cz/~nguv03/cv03/
  • 1 bod dostanete až po
⚠️ **GitHub.com Fallback** ⚠️