Przejdź do głównej zawartości
Codex13

System głosowania (mini)

Cel projektu

Dział zatytułowany „Cel projektu”

Stworzysz System głosowania - aplikację webową do przeprowadzania prostych ankiet jednokrotnego wyboru. Użytkownik widzi pytanie z opcjami odpowiedzi, oddaje głos, a system zapisuje wyniki i wyświetla podsumowanie z procentowym rozkładem głosów.

Czego się nauczysz?

  • Obsługi formularzy z radio buttonami
  • Zliczania i obliczania procentów
  • Zabezpieczania przed wielokrotnym głosowaniem (sesje)
  • Tworzenia prostych wizualizacji danych

Dlaczego to jest ważne?

Dział zatytułowany „Dlaczego to jest ważne?”

W prawdziwej pracy...

Systemy ankiet i głosowań to popularna funkcjonalność wielu serwisów - od prostych sond na stronach informacyjnych po zaawansowane systemy badań opinii. Umiejętność zbierania i prezentowania danych statystycznych jest ceniona w każdej firmie.

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Funkcje podstawowe

Dział zatytułowany „Funkcje podstawowe”

  1. Wyświetlenie ankiety Użytkownik widzi pytanie i listę opcji odpowiedzi. Może wybrać jedną z nich i zatwierdzić swój głos.

  2. Zapis i zliczanie głosów Każdy głos jest zapisywany do pliku JSON. System zlicza głosy dla każdej opcji.

  3. Wyświetlenie wyników Po zagłosowaniu użytkownik widzi wyniki - liczba głosów i procent dla każdej opcji.

Dane i ich struktura

Dział zatytułowany „Dane i ich struktura”

Przykładowa struktura pliku JSON:

{
  "poll": {
    "question": "Jaki język programowania jest Twoim ulubionym?",
    "options": [
      {"id": 1, "text": "PHP", "votes": 15},
      {"id": 2, "text": "JavaScript", "votes": 23},
      {"id": 3, "text": "Python", "votes": 18},
      {"id": 4, "text": "Java", "votes": 8}
    ],
    "created_at": "2026-02-13 10:00:00"
  },
  "voters": [
    {"ip": "192.168.1.1", "voted_at": "2026-02-13 10:30:00"},
    {"session_id": "abc123", "voted_at": "2026-02-13 10:35:00"}
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”

Wariant podstawowy

Dział zatytułowany „Wariant podstawowy”

Wymagane funkcje:

  • Pytanie ankietowe z opcjami (radio buttony)
  • Walidacja w PHP (wybrana opcja)
  • Zapis głosu i zwiększenie licznika
  • Wyświetlenie wyników (liczba głosów)
  • Prosty interfejs CSS

Przykładowy scenariusz:

Użytkownik widzi pytanie “Jaki język programowania jest Twoim ulubionym?” z 4 opcjami. Wybiera “PHP” i klika “Zagłosuj”. Widzi wyniki: “PHP: 15 głosów, JavaScript: 23 głosy, Python: 18 głosów, Java: 8 głosów”.

Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Przydatne fragmenty kodu

Dział zatytułowany „Przydatne fragmenty kodu”

Formularz głosowania:

<form method="POST" action="vote.php">
    <h2><?= htmlspecialchars($poll['question']) ?></h2>


    <?php foreach ($poll['options'] as $option): ?>
    <label>
        <input type="radio" name="option" value="<?= $option['id'] ?>" required>
        <?= htmlspecialchars($option['text']) ?>
    </label><br>
    <?php endforeach; ?>


    <button type="submit">Zagłosuj</button>
</form>

Zliczanie głosu:

<?php
$optionId = (int)$_POST['option'];
$file = 'poll.json';
$data = json_decode(file_get_contents($file), true);


// Znajdź opcję i zwiększ licznik
foreach ($data['poll']['options'] as &$option) {
    if ($option['id'] === $optionId) {
        $option['votes']++;
        break;
    }
}


file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT));
?>

Obliczanie procentów:

<?php
$totalVotes = array_sum(array_column($poll['options'], 'votes'));


foreach ($poll['options'] as $option) {
    $percent = $totalVotes > 0 ? round(($option['votes'] / $totalVotes) * 100, 1) : 0;
    echo htmlspecialchars($option['text']) . ": ";
    echo $option['votes'] . " głosów ($percent%)<br>";
}
?>

Pasek postępu CSS:

<?php foreach ($poll['options'] as $option):
    $percent = $totalVotes > 0 ? ($option['votes'] / $totalVotes) * 100 : 0;
?>
<div class="option">
    <span><?= htmlspecialchars($option['text']) ?>: <?= $option['votes'] ?> (<?= round($percent, 1) ?>%)</span>
    <div class="progress-bar">
        <div class="progress" style="width: <?= $percent ?>%"></div>
    </div>
</div>
<?php endforeach; ?>


<style>
.progress-bar {
    background: #e9ecef;
    border-radius: 4px;
    height: 20px;
    margin: 5px 0;
}
.progress {
    background: #007bff;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}
</style>

Zabezpieczenie przed wielokrotnym głosowaniem:

<?php
session_start();


// Sprawdź czy już głosował
if (isset($_SESSION['voted']) && $_SESSION['voted'] === true) {
    $error = 'Już oddałeś głos w tej ankiecie!';
} else {
    // Zapisz głos
    // ... kod zapisywania ...


    // Oznacz jako zagłosowany
    $_SESSION['voted'] = true;
    $success = 'Dziękujemy za głos!';
}
?>

Najczęstsze błędy

Dział zatytułowany „Najczęstsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
PHP: Sessions
PHP: array_sum()
Chart.js
CSS: Progress bars

Do dzieła!

Dział zatytułowany „Do dzieła!”

Wykorzystaj lekcje!

Cotygodniowe spotkania podczas lekcji to idealny moment, by:

  • Pokazać postępy - nawet małe kroki się liczą
  • Wyjaśnić wątpliwości - pytaj, nie zgaduj
  • Skonsultować rozwiązania - feedback pomoże Ci się rozwijać

Pracuj iteracyjnie - lepiej mieć działający wariant A niż niedokończony C!