PHP AJAX Poll Example 🎯

Welcome to the PHP AJAX Poll Example tutorial! In this lesson, we'll explore how to create a real-time voting system using PHP and AJAX. This tutorial is designed for both beginners and intermediate learners. Let's dive in!

Understanding the Concept 📝

PHP: A popular server-side scripting language for web development.
AJAX: Asynchronous JavaScript and XML, a set of web development techniques that allows updating parts of a web page without reloading the whole page.

What's a Poll? 💡

A poll is a survey with a specific set of questions where participants select an answer from a list of options. Traditionally, when a user votes, the page is refreshed to update the results. But with AJAX, we can make the voting process more interactive and smoother by updating the results in real-time without refreshing the page.

Setting Up the Environment ✅

Install a PHP-enabled web server like Apache or Nginx.
Install PHP (version 7.4 or higher).
Set up a PHP development environment like XAMPP, WAMP, or MAMP.

Creating the PHP Poll Script 💡

In this example, we'll create a simple poll script with two options: Option 1 and Option 2.

php

// poll.php

$options = array(
    "Option 1" => 0,
    "Option 2" => 0
);

if (isset($_POST["vote"])) {
    $selectedOption = $_POST["vote"];
    $options[$selectedOption]++;
}

echo json_encode($options);

In this script, we initialize an associative array $options with two options and a count of 0 for each. When the form is submitted ($_POST["vote"] is set), we increment the count for the selected option and return the updated array as JSON.

Creating the HTML Form 💡

html

<!-- form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX Poll Example</title>
</head>
<body>
    <h1>PHP AJAX Poll Example</h1>

    <form id="poll-form">
        <div>
            <input type="radio" name="vote" id="option1" value="Option 1">
            <label for="option1">Option 1</label>
        </div>
        <div>
            <input type="radio" name="vote" id="option2" value="Option 2">
            <label for="option2">Option 2</label>
        </div>
        <button type="submit">Vote</button>
    </form>

    <div id="poll-results"></div>

    <script src="poll.js"></script>
</body>
</html>

In this HTML file, we have a simple form with two radio buttons, a submit button, and a div for displaying the results.

Creating the AJAX Script 💡

javascript

// poll.js

document.getElementById('poll-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = document.getElementById('poll-form');
    const resultsDiv = document.getElementById('poll-results');

    fetch('poll.php', {
        method: 'POST',
        body: new URLSearchParams(new FormData(form)),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    .then(response => response.json())
    .then(data => {
        resultsDiv.innerHTML = `<h2>Current Results</h2>
                                  <ul>
                                      <li>Option 1: ${data.Option_1}</li>
                                      <li>Option 2: ${data.Option_2}</li>
                                  </ul>`;
    });
});

In this JavaScript file, we attach an event listener to the form submit event and prevent the default form submission. When the form is submitted, we make an AJAX request to the poll.php script, parse the JSON response, and update the results in the results div.

Testing the Poll ✅

Save all the files in the same directory, and open form.html in your browser. You should now have a working PHP AJAX poll example!

PHP AJAX Poll Example 🎯

PHP AJAX Poll Example 🎯

Understanding the Concept 📝

What's a Poll? 💡

Setting Up the Environment ✅

Creating the PHP Poll Script 💡

Creating the HTML Form 💡

Creating the AJAX Script 💡

Testing the Poll ✅

Quiz 💡