Git Product home page Git Product logo

j2w-ukol03's Introduction

Úkol 3

Cílem je vytvořit webovou stránku pro zobrazení vizitek. Úvodní stránka bude zobrazovat seznam všech vizitek, z každé vizitky bude možné se prokliknout na její detail, kde bude spolu s vizitkou zobrazena také mapa.

Projekt obsahuje kontroler a příslušné HTML stránky (už v adresáři src/main/resources/templates). Na stránce jsou ale jen pevně vložené texty. Je potřeba upravit kontroler tak, aby poskytoval do modelu data, a upravit šablony tak, aby data z modelu zobrazovaly.

Počítej s tím, že jméno a firma budou vždy uvedené, stejně jako dva řádky adresy. Kontakty (e-mail, telefon a web) ale mohou a nemusí být vyplněné – může být vyplněn například jenom e-mail, nebo třeba jen telefon a web.

  1. Udělej fork zdrojového repository do svého účtu na GitHubu.
  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 se čtyř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. Vytvoř si entitu např. Vizitka, která bude obsahovat následující properties – údaje zobrazené na vizitce:
    • jmeno
    • firma
    • ulice
    • obecPsc
    • celaAdresa (readonly property, ve tvaru „ulice, obecPsc“)
    • email
    • telefon
    • web
  5. Vytvoř v této entitě bezparametrický konstruktor a konstruktor obsahující všechny properties s uloženo uhodnotou (tj. bez počítané property celaAdresa).
  6. Vytvoř si v kontroleru VizitkaController privátní field, který bude obsahovat seznam vizitek (List<Vizitka>) a naplň seznam nějakými údaji. Nezapomeň vytvořit i takové vizitky, které nebudou mít uvedené všechny kontakty.
  7. Uprav metodu seznam() tak, aby vracela ModelAndView. Zvol správné view a do modelu vlož seznam vizitek.
  8. Uprav šablonu seznam.html tak, aby zobrazovala vizitky z modelu. Každá vizitka musí odkazovat na svou stránku s detailem.
  9. Uprav metodu detail() tak, aby vracela ModelAndView. Uprav metodu tak, aby z požadavku prohlížeče načítala query parametr id. Zvol správné view a do modelu vlož vizitku získanou ze seznamu na základě id (indexu v seznamu).
  10. Uprav šablonu detail.html tak, aby zobrazovala vizitku z modelu.
  11. Pro zobrazení mapy použij připravený kód s tagem iframe, který vkládá vloženou mapu Mapy.cz. Jako parametr q se do URL předává adresa, která se má na mapě zobrazit. Tuto adresu je potřeba zakódovat pomocí built-in funkce Freemarkeru url. Místo statického stringu s adresou Czechitas na Václavském náměstí tedy předej property celaAdresa (pozor na to, že už nyní je statický string vložený v interpolaci ${…}, tu už tedy do šablony nepřidáváš).
  12. Zkontroluj výsledek v prohlížeči.
  13. Commitni a pushnni změny (výsledný kód) do svého repository na GitHubu.
  14. Vlož odkaz na své repository jako řešení úkolu na portálu Moje Czechitas.

Odkazy

  • odkaz na stránku Lekce 4
  • Java SE 21 Javadoc – dokumentace všech tříd, které jsou součástí základní Javy ve verzi 21.
  • 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.
  • Unsplash – obrázky a fotografie k použití zdarma
  • LineAwesome – sada ikon pro použití na webu

j2w-ukol03's People

Contributors

filipjirsak avatar

Watchers

 avatar  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.