Seminář programování v PHP

Gymnázium Kolín

Úloha 27: Google Maps 2 (ukládání bodů do MySQL a HTML5 validace)

Pokročilý MySQL databáze bodů HTML5 validace bez jQuery GPS souřadnice

Cíl úlohy

Vytvořte webovou aplikaci pro správu vlastních zájmových bodů (POI) na mapě. Uživatel může kliknutím do mapy umístit novou značku, zadat její název a popis a uložit souřadnice (zeměpisnou šířku a délku) do MySQL databáze. Existující body lze upravovat nebo mazat. Validace formuláře probíhá nativně pomocí HTML5 bez závislosti na jQuery.

Architektura aplikace a databáze

  • Tabulka ulohy_gmaps: Obsahuje sloupce id (INT AUTO_INCREMENT), lat (DOUBLE), lng (DOUBLE), jmeno (VARCHAR), popis (TEXT).
  • Předání bodů z PHP do JavaScriptu: PHP vygeneruje JavaScriptové pole objektů var locations = [ ['Název', lat, lng, 'HTML popis'], ... ];.
  • Kliknutí na mapu (událost click): JavaScriptový listener zachytí souřadnice kliknutí event.latLng a automaticky vyplní skrytá pole formuláře lat a lng.

Úvahy a náhrada jQuery validace

  • Dříve: Pro validaci formulářů se používal těžkopádný plugin jquery.validate.js.
  • Nyní (HTML5): Moderní prohlížeče zvládají validaci nativně pomocí standardních HTML5 atributů:
    • required – pole je povinné
    • minlength="3" – minimální délka zadaného textu
    • pattern="..." – kontrola regulárním výrazem

Doplňující otázky k zamyšlení a náměty na rozšíření

  • 1. Jak v databázi efektivně ukládat a vyhledávat prostorová geografická data (prozkoumejte prostorový datový typ POINT a funkce ST_Distance_Sphere v MySQL/MariaDB)?
  • 2. Jak zamezit uložení bodu, pokud uživatel nekliknul do mapy a souřadnice lat a lng jsou prázdné?
  • 3. Jak byste do mapy přidali možnost filtrování bodů podle kategorií (např. restaurace, památky, školy)?

Vyzkoušejte funkční řešení: Otevřít vzorovou úlohu gmaps2.php