Strojní dílna je firemní webová stránka vytvořená pro malou rodinnou firmu zabývající se obráběním kovů a zámečnickými pracemi. Web byl navržen a naprogramován jako kompletní systém s administrací, databází, responzivním designem a vícejazyčnou podporou.
Autor: Patrik Poklop
Vedoucí práce: Bc. Jakub Pokorný
Škola: Střední průmyslová škola, Resslova 5, Ústí nad Labem
Třída: 4ITB
Rok: 2022/2023
Cílem projektu bylo vytvořit moderní a responzivní web pro dílnu, která se zabývá kovovýrobou. Web slouží k prezentaci firmy, zobrazení nabízených služeb, přehledu strojů a umožňuje zákazníkům zadávat zakázky online.
Hlavní funkce:
- Firemní prezentace a popis služeb
- Galerie strojů s možností zvětšení obrázků
- Formulář pro odeslání zakázky
- Novinky a správa obsahu (admin rozhraní)
- Systém registrace a přihlášení uživatelů
- Přepínání jazyků (CZ/EN)
- Cookies oznámení
- Responzivní design pro mobilní zařízení
| Technologie | Popis |
|---|---|
| HTML5 | Struktura a obsah webu. |
| CSS3 / Bootstrap | Stylování, rozložení prvků, responzivní design. |
| JavaScript (ES6) | Interaktivní funkce (slider, menu, fetch API). |
| PHP | Serverová logika, přihlášení, registrace, práce s databází. |
| MySQL | Databáze pro ukládání uživatelů, novinek a zakázek. |
| jQuery / AJAX | Dynamické načítání a mazání dat bez reloadu. |
- Responzivní navigace – automatické přizpůsobení zobrazení na PC i mobilu
- Automatický slider – JavaScript přepínání obrázků pomocí šipek nebo automaticky
- Registrace a přihlášení – kontrola vstupů, šifrování hesla, kontrola duplicity
- Přepínání jazyků – pomocí PHP session a přepínače
- Novinky – správa obsahu adminem, načítání přes
fetch API - Formulář zakázky – odesílání požadavků na e-mail a zápis do databáze
- Cookies lišta – oznámení o souhlasu s cookies
- Admin rozhraní – správa zakázek a uživatelů pomocí PHP, jQuery a AJAXu
ERD model:
Databáze uchovává tabulky:
users– uživatelské účtyorders– zakázkynews– novinky
Každý účet má propojení přes user_id na své zakázky a případné novinky.
Hlavní sekce webu:
- Úvodní stránka - Nadpis, popis firmy, automatický slider obrázků
- Služby - Přehled činností firmy v barevných boxech (flexbox / grid)
- Formulář pro zakázky - Odesílání požadavků přes PHP a zápis do DB
- Ceník a materiály - Tabulka s materiály, se kterými dílna pracuje
- Galerie strojů - Obrázky se zvětšením pomocí
zoom.js - Novinky - Načítání a mazání přes
fetch APIaAjax - Kontakty - Základní údaje (e-mail, telefon, provozní doba, mapa s poloho firmy)
- Kompletní přizpůsobení pro mobilní zařízení (Android/iOS)
- Rozbalovací menu ovládané přes JavaScript
- Optimalizované rozložení pro malé displeje
- Přihlášený uživatel má přístup k informacím o svém účtu
- Admin může:
- Mazat a spravovat zakázky
- Přidávat a mazat novinky
- Vidět všechny uživatele
- Vše probíhá pomocí
AJAXajQuery, bez reloadu stránky
Na projektu jsem se naučil:
- efektivně používat HTML, CSS, PHP a JavaScript společně,
- navrhnout a implementovat databázovou logiku v MySQL,
- používat Bootstrap pro responzivní layout,
- a používat AJAX a fetch API pro interaktivní webové funkce.
- cs.wikipedia.org: Hypertext Markup Language_ [online]. 1990 [cit. 202 3 - 01 - 14 ]. Dostupné z: https://cs.wikipedia.org/wiki/Hypertext_Markup_Language
- cs.wikipedia.org: Kaskádové styly (CSS)_ [online]. 1996 - 12 - 17 [cit. 202 3 - 01 - 14 ]. Dostupné z: https://cs.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_styly
- cs.wikipedia.org: MySQL_ [online]. 1995 - 05 - 23 [cit. 202 3 - 03 - 09 ]. Dostupné z: https://cs.wikipedia.org/wiki/MySQL
- cs.wikipedia.org: PHP_ [online]. 1995 - 06 - 08 [cit. 202 3 - 01 - 14 ]. Dostupné z: https://cs.wikipedia.org/wiki/PHP
- php.net: PHP_ [online]. 1995 - 06 - 08 [cit. 202 3 - 01 - 14 ]. Dostupné z: https://www.php.net
- cs.wikipedia.org: JavaScript_ [online]. 1995 [cit. 202 3 - 01 - 14 ]. Dostupné z: https://cs.wikipedia.org/wiki/JavaScript
- cs.wikipedia.org: Bootstrap_ [online]. 2002 - 11 - 22 [cit. 202 3 - 03 - 09 ]. Dostupné z: https://cs.wikipedia.org/wiki/Bootstrap\