webtech-projects

WEBTE2 Zadanie 1 - Slovenski olympionici

1. Zakladne info

Tento projekt je webova aplikacia o slovenskych olympionikoch. Aplikacia ma:

• verejnu cast
• privatnu cast po prihlaseni

Na verejnej casti sa zobrazuje tabulka olympionikov. V privatnej casti sa nachadza:

• import dat zo suboru
• profil pouzivatela
• zmena hesla
• zmena e-mailu
• historia prihlaseni
• 2FA nastavenie

Funkcne nasadenie:

• https://example.com/webte_pro1/

2. Ako sme postupovali pri tvorbe projektu

Projekt sme robili postupne, po logickych castiach.

2.1 Najprv sme navrhli databazu

Najprv sme vytvorili databazovu schemu podla suboru oh_v2.xlsx.

Databaza je rozdelena do viacerych tabuliek:

• countries
• cities
• disciplines
• olympics
• athletes
• results
• users
• login_history
• trusted_devices

Tabulky su navzajom prepojene pomocou cudzich klucov. Databaza teda nie je postavena na jednej tabulke.

Subory suvisiace s databazou:

• sql/table.sql
• sql/webte2_z1_dump.sql
• sql/users.sql
• sql/login_history.sql
• sql/trusted_devices.sql

Finalny SQL dump na odovzdanie:

• sql/webte2_z1_dump.sql

2.2 Potom sme vytvorili vstupny bod aplikacie

Hlavny vstupny bod aplikacie je:

• public/index.php

Tento subor funguje ako jednoduchy router. Podla parametra page z URL nacita prislusnu cast aplikacie.

Pouzivane include subory su hlavne v adresari:

• includes/

2.3 Nasledne sme doplnili pripojenie na databazu

Na pracu s databazou pouzivame PDO.

Pripojenie riesi:

• src/Database.php

Konfiguracia sa nachadza v:

• config/config.php

2.4 Potom sme doplnili import dat zo suboru

Databaza sa nenaplnala rucne. Naplnenie je riesene dynamicky nacitanim suboru a jeho spracovanim na strane servera.

Formular pre import je v:

• includes/admin_zone.php

Serverove spracovanie importu je v:

• src/ExcelImporter.php

Pouzivatel po prihlaseni nahra .xlsx subor a aplikacia ulozi data do databazy.

2.5 Potom sme vytvorili verejnu cast

Verejna cast zobrazuje tabulku olympionikov.

Subory:

• includes/public_table.php
• includes/olympian_detail.php

Vo verejnej casti je:

• zobrazenie roku
• zobrazenie krajiny, ktoru reprezentovali
• zobrazenie discipliny
• filter podla roku
• filter podla kategorie
• klikatelne triedenie
• strankovanie
• detail osoby po kliknuti na meno

2.6 Neskor sme doplnili autentifikaciu

Implementovali sme dve moznosti prihlasenia:

• lokalne konto
• Google OAuth2

Subory:

• public/login.php
• src/GoogleOAuthService.php
• includes/google_oauth_callback.php

2.7 Potom sme doplnili registraciu a lokalny login

Pouzivatel sa moze zaregistrovat pomocou:

• mena
• priezviska
• e-mailu
• hesla

Hesla sa ukladaju iba hashovane pomocou:

• password_hash()
• password_verify()

Pouzivatelia su ulozeni v tabulke:

• users

2.8 Potom sme doplnili 2FA

Pre lokalne konto je implementovane dvojfaktorove overenie cez Google Authenticator.

Subory:

• src/TwoFactorService.php
• src/TwoFactorToDatabase.php
• src/TwoFactorQrService.php
• src/TrustedDeviceService.php

Vo profile sa da:

• zapnut 2FA
• vygenerovat secret
• zobrazit QR kod
• potvrdit kod
• vypnut 2FA

2.9 Potom sme doplnili historiu prihlaseni

Kazde prihlasenie sa uklada do:

• login_history

Ukladane udaje:

• user_id
• datum a cas prihlasenia
• sposob prihlasenia

Pouzivane hodnoty login_type:

• local
• local+2fa
• local+remembered-device
• local+2fa+remembered-device
• google

2.10 Potom sme doplnili profil pouzivatela

Subor:

• includes/profile.php

Prihlaseny pouzivatel moze:

• zmenit meno
• zmenit priezvisko
• zmenit heslo
• zmenit e-mail
• prezerat historiu prihlaseni
• spravovat 2FA
• zmazat ucet

2.11 Potom sme doplnili cookies notice a prepnutie jazyka

Cookies notice je rieseny cez:

• includes/footer.php
• public/assets/js/ui-effects.js

Jednoduche preklady su riesene cez:

• src/I18n.php

Jazyky:

• slovensky
• anglicky

2.12 Nakoniec sme upravili vizual

Vzhlad aplikacie je rieseny vlastnym CSS a JavaScriptom.

Subory:

• public/assets/css/header_style.css
• public/assets/css/main_style.css
• public/assets/css/fonts.css
• public/assets/js/ui-effects.js

Pouzite web fonty:

• Fraunces
• Manrope

Aplikacia je responzivna a obsahuje:

• odsadenie
• vlastne zarovnanie
• hover efekty
• border, background, padding, margin
• stylovanie formularov a tabuliek

3. Struktura projektu

Najdolezitejsie adresare:

• public/ - vstupne PHP subory a assets
• includes/ - casti stranok a sablony
• src/ - logika aplikacie
• sql/ - SQL subory
• config/ - konfiguracia
• nginx/ - konfiguracia pre Nginx

4. Pouzite kniznice a baliky

Pouzili sme Composer a tieto PHP kniznice:

• phpoffice/phpspreadsheet - citanie Excel suborov
• google/apiclient - Google OAuth2
• pragmarx/google2fa - 2FA / TOTP
• endroid/qr-code - generovanie QR kodov

Konfiguracny subor:

• composer.json

Adresar vendor/ sa do odovzdavaneho ZIP archivu nepridava.

5. Validacia formularov

Vo formularoch je implementovana:

• front-end validacia
• back-end validacia

Validovane su hlavne:

• registracia
• prihlasenie
• 2FA kod
• zmena hesla
• zmena e-mailu
• import suboru

Nepouzivame:

• alert()
• confirm()

Pouzivame vlastne stavove hlasky a validacne spravy v rozhrani.

6. Lokalne spustenie projektu

Projekt sa lokalne spusta cez PHP built-in server:

php -S localhost:8000 -t public

Potom je aplikacia dostupna na:

• http://localhost:8000

7. Nasadenie na server

Projekt je nasadeny do podadresara:

• /var/www/example.com/webte_pro1/

Funkcny odkaz:

• https://example.com/webte_pro1/

Konfiguracny subor pre Nginx:

• nginx/example-webte-pro1.conf

Pri nasadeni bolo potrebne:

1. skopirovat projekt na server
2. doplnit route pre /webte_pro1/ v Nginx
3. nastavit public/ ako web root cez alias
4. nastavit spracovanie PHP cez php8.4-fpm
5. nastavit pristup k databaze v config/config.php
6. doplnit Google OAuth redirect URI
7. vytvorit alebo aktualizovat databazu cez SQL dump

8. Zmeny vykonane na serveri / VPS

Na serveri bolo potrebne:

• upravit konfiguraciu Nginx pre podadresar /webte_pro1/
• pouzit php8.4-fpm
• doplnit pristup k MariaDB databaze
• doplnit Google OAuth redirect URI pre serverovu verziu aplikacie

Pouzite systemove casti servera:

• nginx
• php8.4-fpm
• mariadb

Ak je potrebne doinstalovat zavislosti na serveri, pouzije sa:

composer install

9. Konfiguracia databazy

Aplikacia ocakava databazu:

• webte2_z1

Na vytvorenie aktualnej schemy odporucame pouzit:

• sql/webte2_z1_dump.sql

10. Google OAuth2 nastavenie

V Google Cloud Console bolo potrebne vytvorit OAuth klienta a nastavit redirect URI:

• http://localhost:8000/index.php?page=google-callback
• https://example.com/webte_pro1/index.php?page=google-callback

Do config/config.php sa doplnaju:

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• GOOGLE_REDIRECT_URI

11. Postup na znovunasadenie riesenia

Odporucany postup:

1. nakopirovat projekt na server
2. upravit config/config.php
3. nastavit Nginx konfiguraciu
4. restartovat nginx
5. skontrolovat php8.4-fpm
6. nainstalovat kniznice cez Composer alebo skopirovat vendor
7. vytvorit databazu z sql/webte2_z1_dump.sql
8. skontrolovat Google OAuth redirect URI
9. otestovat login, registraciu, 2FA, Google login a import

12. Co odovzdat

Do ZIP archivu odporucame dat:

• PHP subory
• CSS subory
• JS subory
• composer.json
• composer.lock
• sql/webte2_z1_dump.sql
• nginx/example-webte-pro1.conf
• README.md

Do ZIP archivu sa nema davat:

• vendor/
• .git/
• .idea/

13. Zhrnutie

Projekt je vytvoreny v cistom PHP bez frameworku. Obsahuje:

• navrh databazy
• dynamicky import dat z Excel suboru
• verejnu a privatnu zonu
• registraciu a prihlasenie
• 2FA
• Google OAuth2
• historiu prihlaseni
• profil pouzivatela
• cookies notice
• responzivne UI

Projekt bol vyvijany lokalne a nasledne nasadeny na skolsky server. Public portfolio verzia pouziva anonymizovane deployment priklady.