Git Product home page Git Product logo

j2w-ukol04's Introduction

Úkol 4

Budeme pokračovat ve stránce pro zobrazování vizitek. Tentokrát doplníme možnost vizitky přidávat a mazat je.

V zadání projektu je úvodní stránka, která zobrazuje seznam vizitek, a každou vizitku je možné rozkliknou a přejít na detail vizitky. Na úvodní stránce je navíc poslední prázdná vizitka, která vede na stránku /nova. Tuto stránku je potřeba implementovat. Bude na ní formulář, do kterého se zadají údaje, které jsou na vizitce. Formulář odešle metodou POST data na server, ten přidá vizitku do seznamu a přesměruje uživatele zpět na úvodní stránku, kde se zobrazí seznam vizitek i s právě přidanou vizitkou.

Dále je potřeba na stránku s detailem vizitky přidat tlačítko, které danou vizitku smaže – metodou POST odešle na server formulář s id vizitky, server vizitku vymaže ze seznamu a přesměruje uživatele na úvodní stránku, kde se zobrazí seznam vizitek – tentokrát už bez smazané vizitky.

  1. Udělej fork zdrojového repository do svého účtu na GitHubu, případně pokračuj ve svém úkolu z předchozí lekce.
  2. Naklonuj si repository ze svého účtu na GitHubu na lokální počítač.
  3. Spusť si naklonovanou aplikaci a otevři v prohlížeči stránku http://localhost:8080/. Zobrazí se stránka s šesti stejnými vizitkami. Kliknutím na kteroukoli vizitku se zobrazí příklad s detailem jedné vizitky – je v něm pouze jedna vizitka spolu s mapou zobrazující adresu uvedenou na vizitce.
  4. Uprav zobrazení seznamu i detailu tak, aby se v seznamu zobrazovaly vizitky zadané v aplikaci (každá jiná) a v detailu se zobrazovala správná vizitka. Můžeš použít řešení z minulého úkolu.
  5. Odkaz na vytvoření nové vizitky na úvodní stránce není funkční. Je potřeba vytvořit metodu v kontroleru, která bude obsluhovat adresu /nova. Zobrazí na ní formulář pro zadání údajů na vizitku.
  6. Dále je potřeba vytvořit metodu kontroleru, do které se budou odesílat data z vyplněného formuláře. Tato metoda přidá vizitku do seznamu a přesměruje uživatele na úvodní stránku. Pro přidání vizitky vytvoř potřebnou metodu ve službě VizitkaService.
  7. Na stránku s detailem vizitky je potřeba přidat formulář pro mazání vizitky. Formulář bude obsahovat skryté formulářové pole <input type="hidden" /> s id vizitky. Z formuláře bude vidět jen tlačítko s nápisem „Smazat“.
  8. V kontroleru je potřeba vytvořit metodu, která bude reagovat na tento formulář pro mazání vizitek. Formulář smaže vizitku s daným id (id je index vizitky v seznamu vizitek) a přesměruje uživatele na úviodní stránku. Pro smazání vizitky vytvoř potřebnou metodu ve službě VizitkaService.
  9. Zkontroluj výsledek v prohlížeči.
  10. Commitni a pushnni změny (výsledný kód) do svého repository na GitHubu.
  11. Vlož odkaz na své repository jako řešení úkolu na portálu Moje Czechitas.

Bootstrap

Pokud chceš vytvořit formulář, který bude vypadat docela rozumně, a nechceš vytvářet vlastní styly, můžeš použít Bootstrap. Popis vložení Bootstrapu do stránky je v dokumentaci na stránce Download. Důležité je do hlavičky stránky vložit element <link>odkazující na bootstrap.min.css (v kódu bude celá cesta, tak, jak je uvedená na stránkách Bootstrapu). Stránka dále popisuje vložení JavaScriptové knihovny používané Bootstrapem, ta není pro formuláře potřeba.

Na další stránce je popis formulářů v Bootstrapu. Obvykle stačí najít si v dokumentaci vzorový kód, ten si zkopírovat do své stránky a upravit jej – zejména upravit texty a atributy name a id u elementů <input> a atrinbut for u elementů <label>.

Odkazy

  • odkaz na stránku Lekce 5
  • Java SE 17 Javadoc – dokumentace všech tříd, které jsou součástí základní Javy ve verzi 11.
  • Dokumentace Spring Boot – odsud je anotace @SpringBootApplication a třída SpringApplication.
  • Dokumentace Spring Framework – odsud jsou anotace @Controller, @GetRequest a třída ModelAndView.
  • Dokumentace Freemarker – šablonovací systém pro HTML použitý v projektu.
  • Dokumentace podpora java.time pro Freemarker – knihovna pro použití java.time tříd ve Freemarkeru.
  • Dokumentace HTML formulářů
  • Bootstrap – jeden z CSS frameworků
  • Bootstrap Icons – sada ikon pro použití na webu
  • Unsplash – obrázky a fotografie k použití zdarma

j2w-ukol04's People

Contributors

filipjirsak avatar lenkaaltmanova avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.