A Guide to Creating a Digital Polling System with AJAX

AJAX is a powerful tool for creating dynamic web applications and digital polling systems. This blog provides a step-by-step guide on how to create a digital polling system with AJAX. It covers topics such as creating a PHP script to connect to the database, creating an HTML form for user input, validating the user input, creating an AJAX request, processing the data in the PHP script, checking the status of the request, returning data to the user, and handling the response. With this guide, developers can easily create a digital polling system that is secure, reliable, and user-friendly.

Create a PHP script, connect to the database

First, create a PHP script that connects to the database. You can use the MySQLi extension to connect to the database. Use the mysqli_connect() function to establish a connection and use the mysqli_select_db() function to select the desired database.

Create HTML form for user input

Create an HTML form for user input. This form should include the fields that are necessary for the user to enter the necessary information for the poll. For example, the name, email, address, etc.

Validate the user input

Validate the user input with the help of JavaScript. Use the JavaScript validation library to validate the data. This will help in preventing malicious and invalid data from being submitted.

Create an AJAX request

Create an AJAX request to send the user input to the PHP script. The AJAX request should include the necessary data and the URL of the PHP script. The AJAX request should be sent as an asynchronous request so that the page does not reload when the user clicks the submit button.

Process the data in the PHP script

In the PHP script, process the data that was sent from the AJAX request. This includes validating the data, checking if the user is already registered in the database and if not, inserting the data into the database.

Check the status of the request

In the PHP script, check the status of the AJAX request. If the request is successful, send a success message to the client side and if not, redirect the user to an error page.

Return data to the user

In the PHP script, return the data to the user. This can be in the form of a JSON response or any other format that is suitable for the application.

Handle the response

On the client side, handle the response from the server. If the response is successful, display a success message and if not, redirect the user to an error page.

Example

Abdullah is working on a project for his finals. It is a digital polling system and he wants to use AJAX to pass values between js and php files. He tried scouring the internet for methods and nothing seems to work.

He is using default phpadmin MySQL that comes with WAMP server for database.

JS

`

signupbtn.onclick = function(){

if(title.innerHTML == "Sign Up")

{

// Create Form Data

const formData = new FormData();

formData.append('Institution_Name', iname);

formData.append('Institution_ID', iid);

formData.append('uname', uname);

formData.append('pass', pass);

// Prepare AJAX Request

let xhr = new XMLHttpRequest();

xhr.open('POST', 'signup.php');

xhr.onload = function(){

if (xhr.status === 200) {

let response = JSON.parse(xhr.responseText);

if (response.success) {

alert('Signup Successful');

}

else {

window.location.href = 'http://localhost/Project%200/adminsignupredirect.html';

}

}

};

xhr.send(formData);

}

namefield.style.maxHeight = "65px";

title.innerHTML = "Sign Up";

};

`

This script is designed to access the admin & institution tables to validate the entered data and then insert it into the admin table. If the process is successful, a 'success' message will be sent to the client side, causing an alert message to pop up reading "Signed up successfully". In the event of any errors, the user will be redirected to the error page.

PHP

`

<?php

//set

$iname = $_POST['Institution_Name'];

$iid = $_POST['Institution_ID'];

$uname = $_POST['uname'];

$pass = $_POST['pass'];

if (! empty($iid) || ! empty($uname) || ! empty($pass) || !empty($iname))

{

$host = "localhost:3308";

$dblJsername = "root";

$dbPassword ='';

$dbname = "project 0" ;

$con = new mysqli($host, $dblJsername, $dbPassword, $dbname);

if (mysqli_connect_error()) {

die('connection error(' . mysqli_connect_errno() . ')' . mysqli_connect_error());

} else {

$select = "select uname from admin where uname = ? Limit 1";

$select1 = "select Institution_Name from institution where Institution_ID = ? ";

$insert = "insert into admin(uname, pass, Institution_ID) values(?,?,?)";

$stmt = $con->prepare($select);

$stmt->bind_param("s", $uname);

$stmt->execute();

$stmt->bind_result($uname);

$stmt->store_result();

$rnum = $stmt->num_rows();

$stmt->close();

if ($rnum==0) {

$stmt1 = $con->prepare($select1);

$stmt1->bind_param("s", $iid);

$stmt1->execute();

$stmt1->bind_result($iname);

$stmt1->store_result();

$stmt1->fetch();

$rnum1 = $stmt1->num_rows();

$stmt1->close();

if ($rnum1 == 1) {

$stmt2 = $con->prepare($insert);

$stmt2->bind_param("sss", $uname, $pass, $iid);

$stmt2->execute();

$stmt2->close();

echo json_encode(array("success" => true));

} else {

echo json_encode(array("success" => false));

}

} else {

echo json_encode(array("success" => false));

}

}

}

$con->close();

?>

`

Still have queries feel free to contact@ahmedrazachuhdary.com