Lekce 07 - Úkol 07 - Informační systém pro seznam kontaktů

Vytvořte jednoduchý informační systém, který bude zobrazovat seznam telefonních a e-mailových kontaktů.

Když se klikne na konkrétní řádek v tabulce, zobrazí se druhá stránka s detailem záznamu, na které bude možné si záznam upravit a uložit zpět.

V hlavním seznamu bude také nepovinně možnost záznam smazat a přidat nový.

Seznam kontaktů

Tabulku kontaktů včetně počtu a významu jednotlivých sloupečků si můžete navrhnout podle svého. Můj návrh vypadá takto:

Tabulku kontaktů vystavte na adrese: http://localhost:nejakyport/kontakty/

Detail jednoho kontaktu

Odkaz ze souhrnné tabulky bude pro každý záznam jiný. Může vypadat například takto:
http://localhost:8080/kontakty/100.html … pro záznam s ID = 100
http://localhost:8080/kontakty/101.html … pro záznam s ID = 101
http://localhost:8080/kontakty/102.html … pro záznam s ID = 102

Jak udělat metodu zobrazDetail() citlivou na všechny adresy /kontakty/100.html, /kontakty/101.html, …? V lekci jsme si ukazovali @PathVariable.

@RequestMapping(value = "/{cislo}.html", method = RequestMethod.GET)
public ModelAndView zobrazDetail(@PathVariable("cislo") Long cisloKontaktu) {
    // zobrazit formular
}

Pokud chceme vstup omezit např. pouze na čísla, do URL proměnné {cislo} můžeme za dvojtečku přidat regulární výraz omezující formát vstupu:

@RequestMapping(value = "/{cislo:[0-9]+}.html", method = RequestMethod.GET)
public ModelAndView zobrazDetail(@PathVariable("cislo") Long cisloKontaktu) {
    // zobrazit formular
}

Po úspěšném vyplnění / změně kontaktu vracejte ModelAndView s redirectem (přesměrováním), aby prohlížeč přešel zpět na seznam kontaktů.

@RequestMapping(value = "/{cislo:[0-9]+}.html", method = RequestMethod.POST)
public ModelAndView zpracujDetail(@PathVariable("cislo") Long cisloKontaktu, DetailForm vyplnenyFormular) {
    // zpracovat vyplnenyFormular

    return new ModelAndView("redirect:/");
}

Pro formulář si připravte třídu DetailForm. Bude mít podobné vlastnosti, jako třída Kontakt, ale používá se na jiné účely, proto mějte obě dvě.

Nezapomeňte, že stránky (templates) musejí v prohlížeči fungovat jak při zobrazení prostého souboru z disku, tak při přístupu přes webový server (se Spring Bootem).

Smazání jednoho kontaktu

Na stránce se seznamem mějte u každého kontaktu akci Smazat. Text bude ve skutečnosti pro každý záznam v samostatném mini-formuláři v tlačítku submit s neviditelným paramterem _method nastaveným na hodnotu DELETE. (<form action="CISLO_ZAZNAMU" method="post"><input type="hidden" name="_method" value="DELETE"/><input type="submit" value="Smazat"/></form>) Formulář se bude odesílat tak, aby ve třídě HlavniController spustil metodu zpracujSmazani(..). Může vypadat například takto:
http://localhost:8080/kontakty/100 … pro záznam s ID = 100
http://localhost:8080/kontakty/101 … pro záznam s ID = 101
http://localhost:8080/kontakty/102 … pro záznam s ID = 102

Metoda bude vypadat nějak takto:

@RequestMapping(value = "/{cislo}", params = "_method=DELETE")
public ModelAndView zpracujSmazani(@PathVariable("cislo") Long cisloKontaktu) {
    // smazat zaznam

    return new ModelAndView("redirect:/");
}

Opět, pokud chceme omezit vstup pouze na čísla, lze tak učinit regulárním výrazem za dvojtečkou:

@RequestMapping(value = "/{cislo:[0-9]+}", params = "_method=DELETE")
public ModelAndView zpracujSmazani(@PathVariable("cislo") Long cisloKontaktu) {
    // smazat zaznam

    return new ModelAndView("redirect:/");
}

Pár tipů

• Konstanty typu Long se zapisují s L na konci. Například 123456L. Bez L na konci jde o konstantu typu int.

• Doporučuji vytvořit si třídu Kontakt, která bude mít například tyto vlastnosti:

  class Kontakt
    |
    +-- Long id
    |
    +-- String jmeno
    |
    +-- String telefonniCislo
    |
    +-- String email
  

• Třídě Kontakt vytvořte i konstruktor, aby se její objekty snadno vyráběly:

  public Kontakt(Long id,
                 String pocatecniJmeno,
                 String pocatecniTelefonniCislo,
                 String pocatecniEmail)
  

  Zároveň je ale třeba mít i bezparametrický konstruktor:

  public Kontakt()
  

Odevzdání domácího úkolu

Nejprve appku/appky zbavte přeložených spustitelných souborů. Zařídíte to tak, že v IntelliJ IDEA vpravo zvolíte Maven Projects -> Lifecycle -> Clean. Úspěch se projeví tak, že v projektové složce zmizí podsložka target. Následně složku s projektem zabalte pomocí 7-Zipu pod jménem Ukol-CISLO-Vase_Jmeno.7z. (Případně lze použít prostý zip, například na Macu). Takto vytvořený archív nahrajte na Google Drive do Odevzdávárny.

Vytvořte snímek obrazovky spuštěného programu (webové stránky) a vložte jej do galerie Ukol CISLO ve skupině našeho kurzu na Facebooku.

Pokud byste chtěli odevzdat revizi úkolu (např. po opravě), zabalte ji a nahrajte ji na stejný Google Drive znovu, jen tentokrát se jménem Ukol-CISLO-Vase_Jmeno-verze2.7z.

Termín odevzdání je v neděli před další lekcí, nejpozději 23:59. Pokud úkol nebo revizi odevzdáte později, prosím pošlete svému opravujícímu kouči/lektorovi email nebo zprávu přes FB.