Portfolio Studenta - Tutorial Kompletny

Spis treści

1. Wprowadzenie
2. Struktura projektu
3. Technologie użyte
4. Jak działa bezpieczeństwo webhooka
5. Konfiguracja Discord Webhook
6. Instalacja lokalna
7. Wdrożenie na hosting
8. Szczegółowy opis plików
9. Personalizacja strony
10. Rozwiązywanie problemów
11. Bezpieczeństwo
12. Dalszy rozwój

---

Wprowadzenie

Ten projekt to prosta, responsywna strona portfolio stworzona z myślą o studentach rozpoczynających przygodę z tworzeniem stron internetowych. Strona wykorzystuje Bootstrap do stylizacji i zawiera w pełni funkcjonalny formularz kontaktowy, który wysyła wiadomości na serwer Discord poprzez webhook.

Kluczowe cechy projektu:

• Responsywny design działający na wszystkich urządzeniach
• Czysty, dobrze skomentowany kod dla celów edukacyjnych
• Bezpieczna implementacja formularza kontaktowego
• Integracja z Discord przez webhook
• Ochrona wrażliwych danych (URL webhooka)
• Walidacja danych po stronie klienta i serwera
• Zgodność z najlepszymi praktykami web development

---

Struktura projektu

portfolio-student/
│
├── index.html              # Główna strona portfolio
├── style.css              # Niestandardowe style CSS
├── script.js              # Logika JavaScript (walidacja i wysyłanie formularza)
├── send-to-discord.php    # Backend PHP obsługujący webhook
├── config.php             # Plik konfiguracyjny z URL webhooka (WRAŻLIWY)
├── config.example.php     # Przykładowy plik konfiguracyjny
├── .gitignore            # Lista plików ignorowanych przez Git - na razie ma nazwę zmienioną - abym mógł Wam wszystkie pliki wysłać.
└── README.md             # Ten plik - dokumentacja projektu

---

Technologie użyte

Frontend (Widoczna część strony)

• HTML5 - Struktura semantyczna strony
• CSS3 - Stylizacja i animacje
• Bootstrap 5.3 - Framework CSS do responsywnego designu
• Bootstrap Icons - Biblioteka ikon
• JavaScript (ES6+) - Interaktywność i komunikacja z backendem

Backend (Serwer)

• PHP 7.4+ - Język programowania po stronie serwera
• cURL - Biblioteka do wysyłania żądań HTTP

Usługi zewnętrzne

• Discord Webhook API - Odbieranie wiadomości z formularza

---

Jak działa bezpieczeństwo webhooka

Problem

Gdybyśmy umieścili URL webhooka Discord bezpośrednio w kodzie JavaScript:

// BŁĄD! Każdy może zobaczyć ten kod w przeglądarce!
const webhookUrl = "https://discord.com/api/webhooks/123/abc";

To każdy użytkownik może:

1. Otworzyć narzędzia deweloperskie przeglądarki (F12)
2. Zobaczyć kod JavaScript
3. Wykraść URL webhooka
4. Wysyłać spam na Twój serwer Discord

Rozwiązanie

Implementujemy architekturę trzywarstwową:

[Przeglądarka]  -->  [Serwer PHP]  -->  [Discord]
   (publiczna)       (prywatny)         (API)

Jak to działa krok po kroku:

1. Użytkownik wypełnia formularz - JavaScript zbiera dane
2. JavaScript wysyła dane do PHP - Bez URL webhooka!
3. PHP waliduje dane - Sprawdza poprawność i bezpieczeństwo
4. PHP wysyła do Discord - Używa webhooka przechowywanego w config.php
5. Discord otrzymuje wiadomość - Wyświetla ją na serwerze

Kluczowe zabezpieczenia:

• URL webhooka przechowywany tylko w pliku config.php na serwerze
• Plik config.php nie jest udostępniany w repozytorium Git (dzięki .gitignore - na tym etapie zmieniłem nazwę - wróćcie do niej)
• Walidacja danych po stronie klienta (JavaScript) i serwera (PHP)
• Zabezpieczenie przed atakami XSS, SQL Injection
• Limit długości wiadomości
• Timeout połączeń
• Weryfikacja certyfikatów SSL

---

Konfiguracja Discord Webhook

Krok 1: Utworzenie webhooka na Discordzie

1. Otwórz aplikację Discord (desktop lub web)
2. Przejdź do swojego serwera Discord
3. Kliknij prawym przyciskiem myszy na kanał, gdzie chcesz otrzymywać wiadomości
4. Wybierz opcję "Edytuj kanał"
5. W menu bocznym wybierz zakładkę "Integracje"
6. Kliknij "Utwórz webhook" lub "Webhooki" a następnie "Nowy webhook"
7. Nadaj webhookowi nazwę, np. "Portfolio Kontakt"
8. Opcjonalnie: Dodaj avatar dla webhooka
9. Kliknij "Kopiuj URL webhooka"

Krok 2: Zapisanie webhooka w projekcie

1. Skopiuj plik config.example.php jako config.php:

cp config.example.php config.php

2. Otwórz plik config.php w edytorze

3. Zamień TWOJ_WEBHOOK_ID/TWOJ_WEBHOOK_TOKEN na skopiowany URL:

define('DISCORD_WEBHOOK_URL', 'https://discord.com/api/webhooks/1234567890/abcdefghijklmnop');

4. Zapisz plik

Krok 3: Testowanie

Po skonfigurowaniu, wypełnij formularz kontaktowy na stronie i wyślij. Wiadomość powinna pojawić się na Twoim serwerze Discord.

---

Instalacja lokalna

Wymagania

• Serwer z obsługą PHP (XAMPP, WAMP, MAMP lub podobny)
• PHP w wersji 7.4 lub nowszej
• Rozszerzenie PHP cURL (zazwyczaj włączone domyślnie)
• Przeglądarka internetowa

Instrukcja krok po kroku

Opcja 1: Używając XAMPP (Windows/Mac/Linux)

1. Pobierz i zainstaluj XAMPP

   • Pobierz ze strony: https://www.apachefriends.org
   • Zainstaluj zgodnie z instrukcjami

2. Umieść projekt w odpowiednim folderze

   Windows:

   C:\xampp\htdocs\portfolio-student\
   

   Mac/Linux:

   /Applications/XAMPP/htdocs/portfolio-student/
   

3. Uruchom XAMPP

   • Uruchom XAMPP Control Panel
   • Kliknij "Start" przy Apache

4. Skonfiguruj webhook

   • Wykonaj kroki z sekcji "Konfiguracja Discord Webhook"

5. Otwórz stronę w przeglądarce

   http://localhost/portfolio-student/
   

Opcja 2: Używając wbudowanego serwera PHP (Linux/Mac)

1. Otwórz terminal w folderze projektu

2. Uruchom serwer PHP

   php -S localhost:8000
   

3. Otwórz stronę w przeglądarce

   http://localhost:8000
   

Weryfikacja instalacji

Po otwarciu strony sprawdź:

• Czy strona się wyświetla poprawnie
• Czy wszystkie sekcje są widoczne
• Czy formularz kontaktowy jest dostępny
• Wyślij testową wiadomość i sprawdź Discord

---

Wdrożenie na hosting

Przygotowanie projektu

1. Upewnij się, że config.php jest poprawnie skonfigurowany

   • URL webhooka Discord jest prawidłowy
   • DEBUG_MODE ustawiony na false

2. Zmień ALLOWED_ORIGIN na produkcji W pliku config.php:

   define('ALLOWED_ORIGIN', 'https://twojadomena.pl');
   

Wymagania hostingu

Upewnij się, że Twój hosting obsługuje:

• PHP 7.4 lub nowszy
• Rozszerzenie cURL
• HTTPS (zalecane dla bezpieczeństwa)

Instrukcja wdrożenia

Metoda 1: FTP

1. Połącz się z hostingiem przez FTP

   • Użyj klienta FTP (FileZilla, Cyberduck)
   • Wpisz dane dostępowe od hostingu

2. Upload plików

   • Prześlij wszystkie pliki projektu
   • UWAGA: Plik config.php prześlij ręcznie, nie z repozytorium

3. Ustaw odpowiednie uprawnienia

   • Pliki: 644 (rw-r--r--)
   • Foldery: 755 (rwxr-xr-x)

Metoda 2: Git (jeśli hosting obsługuje)

1. Zainicjuj repozytorium

   git init
   git add .
   git commit -m "Initial commit"
   

2. Dodaj remote i wypchnij kod

   git remote add origin <URL_REPOZYTORIUM>
   git push -u origin main
   

3. Na serwerze wykonaj pull

   git clone <URL_REPOZYTORIUM>
   

4. Ręcznie stwórz plik config.php na serwerze

   • NIE commituj go do repozytorium!

Weryfikacja na produkcji

1. Otwórz stronę w przeglądarce
2. Sprawdź certyfikat SSL (kłódka w pasku adresu)
3. Przetestuj formularz kontaktowy
4. Sprawdź logi serwera w przypadku błędów

---

Szczegółowy opis plików

index.html

Przeznaczenie: Główny plik HTML zawierający strukturę strony portfolio.

Kluczowe elementy:

1. Nawigacja (navbar)

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   

   • Fixed-top: Nawigacja przyklejona do góry podczas przewijania
   • Responsive: Zamienia się w hamburger menu na małych ekranach

2. Sekcja Hero

   <header id="home" class="hero-section">
   

   • Pełnoekranowy baner z imieniem i tytułem
   • Call-to-action button do sekcji kontakt

3. Sekcja O mnie

   <section id="about" class="py-5">
   

   • Krótkie przedstawienie studenta
   • Placeholder na zdjęcie
   • Linki do social media

4. Sekcja Umiejętności

   • Grid kart Bootstrap (4 kolumny)
   • Ikony reprezentujące umiejętności
   • Responsywny układ

5. Sekcja Projekty

   • Karty projektów z opisami
   • Tagi technologii
   • Linki do GitHub

6. Formularz Kontaktowy

   <form id="contactForm" class="contact-form">
   

   • Pola: Imię, Email, Temat, Wiadomość
   • Atrybuty required dla walidacji HTML5
   • Alert do wyświetlania komunikatów

Zależności:

• Bootstrap CSS: Stylizacja komponentów
• Bootstrap Icons: Ikony
• style.css: Niestandardowe style
• script.js: Logika JavaScript

---

style.css

Przeznaczenie: Niestandardowe style CSS dopasowujące wygląd strony.

Struktura pliku:

1. Zmienne CSS

   :root {
       --primary-color: #0d6efd;
   }
   

   • Centralne zarządzanie kolorami
   • Łatwa zmiana motywu kolorystycznego

2. Globalne style

   • Smooth scrolling dla płynnego przewijania
   • Padding-top dla kompensacji fixed navbar

3. Sekcja Hero

   .hero-section {
       background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
       min-height: 100vh;
   }
   

   • Gradient tła
   • Pełna wysokość ekranu (100vh)
   • Animacja fadeInUp dla treści

4. Karty (Skills, Projects)

   .skill-card:hover {
       transform: translateY(-5px);
   }
   

   • Efekt hover z podniesieniem karty
   • Płynne przejścia (transition)

5. Responsywność

   @media (max-width: 767px) {
       /* Style dla mobile */
   }
   

   • Breakpointy Bootstrap
   • Dostosowanie fontów i odstępów

Techniki CSS użyte w projekcie:

• Flexbox: Wyśrodkowanie elementów
• CSS Grid: Układy wielokolumnowe (przez Bootstrap)
• Transitions: Płynne animacje
• Media Queries: Responsywność
• CSS Variables: Zarządzanie wartościami
• Gradients: Kolorowe tła
• Box-shadow: Efekt głębi

---

script.js

Przeznaczenie: Obsługa interaktywności strony, walidacja i wysyłanie formularza.

Główne funkcje:

1. Event Listener DOMContentLoaded

   document.addEventListener('DOMContentLoaded', function() {
   

   • Czeka na pełne załadowanie DOM
   • Inicjalizuje wszystkie funkcje

2. showAlert(message, type)

   function showAlert(message, type) {
       contactAlert.classList.add(`alert-${type}`);
   }
   

   • Wyświetla komunikaty sukcesu/błędu
   • Auto-ukrywanie po 5 sekundach
   • Responsywny design alertów

3. validateEmail(email)

   function validateEmail(email) {
       const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       return re.test(email);
   }
   

   • Walidacja formatu email
   • Wyrażenie regularne (regex)
   • Zwraca true/false

4. setButtonLoading(loading)

   • Zmienia stan przycisku podczas wysyłania
   • Pokazuje spinner
   • Dezaktywuje przycisk

5. Obsługa submit formularza

   contactForm.addEventListener('submit', function(e) {
       e.preventDefault(); // Zatrzymuje domyślne działanie
   

   Proces wysyłania:

   1. Zatrzymanie domyślnego działania (e.preventDefault)
   2. Walidacja danych po stronie klienta
   3. Utworzenie obiektu FormData
   4. Wysłanie do PHP przez fetch()
   5. Parsowanie odpowiedzi JSON
   6. Wyświetlenie komunikatu
   7. Reset formularza przy sukcesie
   

6. Smooth scrolling

   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
       anchor.addEventListener('click', function (e) {
           e.preventDefault();
           targetElement.scrollIntoView({ behavior: 'smooth' });
       });
   });
   

   • Płynne przewijanie do sekcji
   • Obsługa linków wewnętrznych

7. Active link w nawigacji

   • Podświetla aktywny link podczas przewijania
   • Scroll event listener
   • Obliczanie pozycji sekcji

Koncepcje JavaScript w projekcie:

• Event Listeners: Reagowanie na akcje użytkownika
• DOM Manipulation: Modyfikacja elementów strony
• Fetch API: Nowoczesne żądania HTTP
• Promises: Asynchroniczne operacje
• Arrow Functions: Nowoczesna składnia funkcji
• Template Literals: Łączenie stringów
• Destructuring: Wydobywanie wartości
• Spread Operator: Kopiowanie danych

---

send-to-discord.php

Przeznaczenie: Backend obsługujący wysyłanie wiadomości na Discord webhook.

Przepływ danych:

[JavaScript] --POST--> [PHP] --Walidacja--> [cURL] --HTTP POST--> [Discord]

Struktura kodu:

1. Konfiguracja nagłówków

   header('Content-Type: application/json; charset=utf-8');
   header('Access-Control-Allow-Origin: ' . ALLOWED_ORIGIN);
   

   • Content-Type: JSON dla komunikacji
   • CORS: Zezwolenie na żądania cross-origin
   • Preflight: Obsługa OPTIONS request

2. Sprawdzenie metody HTTP

   if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
       http_response_code(405);
       exit();
   }
   

   • Akceptuje tylko POST
   • Zwraca błąd 405 dla innych metod

3. Funkcje walidacyjne

   validateInput($data, $minLength, $maxLength)

   • Usuwa białe znaki (trim)
   • Sprawdza czy nie jest pusty
   • Weryfikuje długość

   validateEmail($email)

   • Używa filter_var z filtrem FILTER_VALIDATE_EMAIL
   • RFC 5322 compliant

   sanitizeText($text)

   • htmlspecialchars: Konwersja znaków specjalnych
   • ENT_QUOTES: Chroni przed XSS
   • UTF-8: Obsługa polskich znaków

4. Pobieranie i walidacja danych

   $name = isset($_POST['name']) ? $_POST['name'] : '';
   

   • Bezpieczne pobieranie z $_POST
   • Walidacja każdego pola
   • Zwracanie błędów w formacie JSON

5. Tworzenie wiadomości Discord Embed

   $embed = [
       'embeds' => [
           [
               'title' => '📬 Nowa wiadomość',
               'color' => hexdec('3498db'),
               'fields' => [...]
           ]
       ]
   ];
   

   Struktura Embed:

   • title: Tytuł wiadomości
   • color: Kolor paska bocznego (hex -> decimal)
   • fields: Tablica pól z danymi
   • timestamp: Czas wysłania
   • footer: Stopka wiadomości

6. Wysyłanie przez cURL

   $ch = curl_init(DISCORD_WEBHOOK_URL);
   curl_setopt_array($ch, [
       CURLOPT_RETURNTRANSFER => true,
       CURLOPT_POST => true,
       CURLOPT_POSTFIELDS => json_encode($embed),
       CURLOPT_HTTPHEADER => ['Content-Type: application/json'],
       CURLOPT_TIMEOUT => 10,
       CURLOPT_SSL_VERIFYPEER => true
   ]);
   

   Kluczowe opcje cURL:

   • CURLOPT_RETURNTRANSFER: Zwróć wynik
   • CURLOPT_POST: Metoda POST
   • CURLOPT_POSTFIELDS: Dane do wysłania (JSON)
   • CURLOPT_TIMEOUT: Max czas oczekiwania
   • CURLOPT_SSL_VERIFYPEER: Weryfikacja certyfikatu

7. Obsługa odpowiedzi

   $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
   if ($httpCode === 204 || $httpCode === 200) {
       // Sukces
   }
   

   Kody odpowiedzi Discord:

   • 200/204: Sukces
   • 400: Błędne dane
   • 401: Nieprawidłowy webhook
   • 404: Webhook nie istnieje
   • 429: Rate limit przekroczony

Zabezpieczenia w PHP:

• Walidacja po stronie serwera (nigdy nie ufaj klientowi)
• Sanityzacja danych wejściowych (XSS prevention)
• Limit długości wiadomości (spam prevention)
• Timeout połączeń (DoS prevention)
• Weryfikacja SSL (MITM prevention)
• Tryb debug tylko w development

---

config.php

Przeznaczenie: Przechowywanie wrażliwej konfiguracji.

Zawartość:

define('DISCORD_WEBHOOK_URL', 'https://discord.com/api/webhooks/...');
define('MAX_MESSAGE_LENGTH', 2000);
define('ALLOWED_ORIGIN', '*');
define('DEBUG_MODE', false);

Bezpieczeństwo:

1. Nie commituj do Git

   • Dodany do .gitignore
   • Tylko na lokalnym serwerze / produkcji

2. Uprawnienia pliku

   • Ustaw 600 (rw-------)
   • Tylko właściciel może czytać

3. Używaj zmiennych środowiskowych (zaawansowane)

   define('DISCORD_WEBHOOK_URL', getenv('DISCORD_WEBHOOK'));
   

---

.gitignore

Przeznaczenie: Lista plików ignorowanych przez Git.

Kategorie:

1. Wrażliwe dane

   • config.php (główny cel)
   • Kopie zapasowe konfiguracji

2. Pliki systemowe

   • .DS_Store (macOS)
   • Thumbs.db (Windows)

3. IDE

   • .vscode/, .idea/ (ustawienia edytorów)

4. Logi i cache

   • *.log, cache/

Użycie:

• Automatycznie stosowany przez Git
• git status nie pokaże ignorowanych plików
• git add . pominie ignorowane pliki

---

Personalizacja strony

Zmiana danych osobowych

1. Otwórz index.html
2. Znajdź i zmień:

<!-- Imię i nazwisko -->
<h1 class="display-3 fw-bold mb-3">Jan Kowalski</h1>

<!-- Tytuł -->
<p class="lead mb-4">Student Informatyki | Przyszły Web Developer</p>

<!-- O mnie -->
<p class="lead">
    Jestem studentem informatyki na Politechnice XYZ...
</p>

Dodanie własnego zdjęcia

Zamień placeholder na prawdziwe zdjęcie:

<!-- Przed -->
<div class="about-image-placeholder">
    <i class="bi bi-person-circle"></i>
</div>

<!-- Po -->
<img src="images/moje-zdjecie.jpg" alt="Jan Kowalski" class="img-fluid rounded">

Zmiana kolorystyki

W pliku style.css:

:root {
    --primary-color: #0d6efd;  /* Niebieski - zmień na swój */
    --secondary-color: #6c757d;
    --dark-color: #212529;
}

Przykładowe schematy kolorów:

• Fioletowy: #6f42c1
• Zielony: #28a745
• Pomarańczowy: #fd7e14
• Czerwony: #dc3545

Dodanie własnych projektów

W sekcji Projekty w index.html:

<div class="col-md-6 col-lg-4">
    <div class="card project-card h-100">
        <div class="card-img-placeholder">
            <i class="bi bi-TWOJA-IKONA"></i>
        </div>
        <div class="card-body">
            <h5 class="card-title">Nazwa projektu</h5>
            <p class="card-text">Opis projektu</p>
            <div class="project-tags">
                <span class="badge bg-primary">HTML</span>
                <span class="badge bg-primary">CSS</span>
            </div>
        </div>
        <div class="card-footer">
            <a href="LINK_DO_GITHUB" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-github"></i> Kod źródłowy
            </a>
        </div>
    </div>
</div>

Zmiana ikony umiejętności

Lista dostępnych ikon Bootstrap: https://icons.getbootstrap.com/

Przykład:

<i class="bi bi-filetype-py skill-icon"></i>  <!-- Python -->
<i class="bi bi-database skill-icon"></i>      <!-- Bazy danych -->
<i class="bi bi-braces skill-icon"></i>        <!-- Programowanie -->

---

Rozwiązywanie problemów

Problem: Formularz nie wysyła wiadomości

Możliwe przyczyny i rozwiązania:

1. Błędny URL webhooka

   • Sprawdź plik config.php
   • Upewnij się, że URL jest poprawny
   • Przetestuj webhook w Postman lub curl

2. PHP cURL nie jest włączony

   Sprawdź:

   <?php
   phpinfo();
   ?>
   

   Szukaj sekcji "curl". Jeśli nie ma, włącz w php.ini:

   extension=curl
   

3. Błędy CORS

   • W konsoli przeglądarki (F12) sprawdź błędy
   • Upewnij się, że ALLOWED_ORIGIN jest poprawnie ustawiony
   • Na localhost użyj '*'

4. Webhook został usunięty/wygasł

   • Utwórz nowy webhook na Discord
   • Zaktualizuj config.php

Problem: Strona nie wyświetla się poprawnie

1. Sprawdź konsolę przeglądarki (F12)

   • Błędy JavaScript?
   • Nie załadowane pliki CSS?

2. Sprawdź ścieżki do plików

   <link rel="stylesheet" href="style.css">  <!-- Poprawna ścieżka? -->
   

3. Wyczyść cache przeglądarki

   • Ctrl + F5 (Windows)
   • Cmd + Shift + R (Mac)

Problem: Wiadomość nie dociera na Discord

1. Włącz tryb debug w config.php

   define('DEBUG_MODE', true);
   

2. Sprawdź odpowiedź w konsoli przeglądarki

   • Otwórz narzędzia deweloperskie (F12)
   • Zakładka "Network"
   • Znajdź żądanie do send-to-discord.php
   • Sprawdź Response

3. Sprawdź logi serwera

   • W XAMPP: xampp/apache/logs/error.log
   • Na hostingu: Panel administracyjny

4. Testuj webhook bezpośrednio

   Użyj curl w terminalu:

   curl -X POST \
     -H "Content-Type: application/json" \
     -d '{"content":"Test"}' \
     https://discord.com/api/webhooks/TWOJ_WEBHOOK
   

Problem: Rate limit na Discord

Discord ma limity:

• 30 wiadomości na minutę na webhook
• 5 wiadomości na 2 sekundy

Rozwiązanie:

• Nie spamuj formularzem
• Dodaj cooldown w JavaScript
• Użyj queue na serwerze

---

Bezpieczeństwo

Najlepsze praktyki stosowane w projekcie

1. Walidacja po stronie klienta i serwera

   • JavaScript: Szybka informacja zwrotna
   • PHP: Właściwa ochrona

2. Sanityzacja danych

   • htmlspecialchars() dla XSS
   • trim() dla białych znaków
   • Limity długości

3. Ochrona wrażliwych danych

   • config.php w .gitignore
   • Zmienne środowiskowe (advanced)
   • HTTPS na produkcji

4. Zabezpieczenie przed spamem

   • Limit długości wiadomości
   • Walidacja formatów (email)
   • Można dodać: CAPTCHA, rate limiting

5. Bezpieczne połączenie z Discord

   • Weryfikacja SSL (CURLOPT_SSL_VERIFYPEER)
   • Timeout połączeń
   • Obsługa błędów

Dodatkowe zabezpieczenia (opcjonalne)

1. Honeypot (pułapka na boty)

Dodaj ukryte pole w formularzu:

<!-- Niewidoczne dla ludzi, widoczne dla botów -->
<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">

W PHP:

if (!empty($_POST['website'])) {
    // To bot! Odrzuć
    exit();
}

2. Rate limiting

Ogranicz liczbę wiadomości z jednego IP:

session_start();
$now = time();
$limit = 60; // sekund

if (isset($_SESSION['last_submit']) && ($now - $_SESSION['last_submit']) < $limit) {
    echo json_encode(['success' => false, 'message' => 'Wysyłaj wiadomości maksymalnie raz na minutę']);
    exit();
}

$_SESSION['last_submit'] = $now;

3. Google reCAPTCHA

Dodaj reCAPTCHA do formularza:

• https://www.google.com/recaptcha/
• Dokumentacja integracji

---

Dalszy rozwój

Pomysły na rozbudowę projektu

1. Backend

   • Zapisywanie wiadomości w bazie danych (MySQL)
   • Panel administracyjny do przeglądania wiadomości
   • System odpowiedzi na wiadomości
   • Powiadomienia email dla admina

2. Frontend

   • Dark mode / Light mode toggle
   • Więcej animacji (AOS library)
   • Galeria zdjęć z projektami
   • Blog z artykułami
   • Sekcja z CV do pobrania

3. Funkcjonalności

   • Wielojęzyczność (i18n)
   • Progressive Web App (PWA)
   • Integracja z Google Analytics
   • SEO optimization
   • Mapa kontaktowa

4. Technologie do nauki

   • React.js dla interaktywnych komponentów
   • Node.js jako alternatywny backend
   • MongoDB jako baza danych
   • Docker do konteneryzacji

Sugerowane zasoby do nauki

HTML/CSS:

• MDN Web Docs: https://developer.mozilla.org
• CSS-Tricks: https://css-tricks.com
• W3Schools: https://www.w3schools.com

JavaScript:

• JavaScript.info: https://javascript.info
• freeCodeCamp: https://www.freecodecamp.org
• Eloquent JavaScript (książka): https://eloquentjavascript.net

PHP:

• PHP Manual: https://www.php.net/manual/en/
• PHP: The Right Way: https://phptherightway.com
• Laracasts: https://laracasts.com

Bootstrap:

• Oficjalna dokumentacja: https://getbootstrap.com/docs/
• Bootstrap examples: https://getbootstrap.com/docs/5.3/examples/

Git:

• Pro Git (książka): https://git-scm.com/book/en/v2
• GitHub Learning Lab: https://lab.github.com

---

Podsumowanie

Ten projekt to kompleksowy przykład prostej, ale profesjonalnej strony portfolio z funkcjonalnym formularzem kontaktowym. Zawiera wszystkie elementy niezbędne do nauki:

• Czysty, skomentowany kod
• Najlepsze praktyki bezpieczeństwa
• Responsywny design
• Integracja z zewnętrznym API
• Dokumentacja techniczna

Gratulacje ukończenia tego tutoriala. Teraz masz solidną podstawę do tworzenia własnych projektów webowych.

Powodzenia w dalszej nauce programowania!

---

Wersja: 1.0
Ostatnia aktualizacja: 2024
Licencja: MIT (użyj swobodnie w swoich projektach)