Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin)

by Posted on

Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin)

This is a web based application that checks if username and email exists in local mysql database using XAMPP Localhost. To query from the database am using php server side programming language. If the requested data is found in the database, the script displays the results on a webpage using ajax and javascript requests without refreshing the webpage.

FILES

This web based program/Application has the following files.

  1. checkusernameandemailajax.html
  2. mysqldatabaseconnection.php
  3. actionpage.php
  4. mydb.sql

checkusernameandemailajax.html

SOURCE CODE

<!-- Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin) -->
<!-- https://mauricemuteti.info/check-if-user-username-and-email-exists-in-mysql-database-using-ajax-javascript-html-and-php-web-program-xampp-localhost-server-phpmyadmin/ -->
<!DOCTYPE html>
<html>
	<head>
		<title>Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin)</title>
	</head>
	<body>
		<div id="demo">
			<h2>Database Result Will Appear Here</h2>
		</div>
		
		<form action="signup_handler.php" name="signupform">
			<input type="text" name="uname" id="uname" required="" onkeyup="checkUname(this.value);">
			<input type="text" name="uemail" id="uemail" required="" onkeyup="checkEmail(this.value);">
			<!-- More fields go here -->
		</form>
		<script type="text/javascript">
		//Function for checking if username already exists in the database.
		function checkUname(uname) {
		
		var xhttp;
		if (uname != "") {
			xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					document.getElementById("demo").innerHTML = this.responseText;
				}
			};
			xhttp.open("GET", "actionpage.php?uname=" + uname + "&uemail=" + '' , true);
			xhttp.send();
		}
		}
		//Function for checking if email already exists in the database.
		function checkEmail(email) {
		
		var xhttp;
		if (email != "") {
			xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					document.getElementById("demo").innerHTML = this.responseText;
				}
			};
			xhttp.open("GET", "actionpage.php?uname=" + '' + "&uemail=" + email , true);
			xhttp.send();
		}
		}
		</script>
	</body>
</html>

mysqldatabaseconnection.php

SOURCE CODE

<?php 

// Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin)
// https://mauricemuteti.info/check-if-user-username-and-email-exists-in-mysql-database-using-ajax-javascript-html-and-php-web-program-xampp-localhost-server-phpmyadmin/

	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbName="mydb";
	//Database connection.
	$databaseConnection = mysqli_connect($servername, $username, $password,$dbName);
	

 ?>

actionpage.php

SOURCE CODE

<?php 
// Check If User (Username And Email) Exists In MySQL Database Using Ajax, Javascript, HTML And PHP Web Program XAMPP Localhost/Server (phpMyAdmin)
// https://mauricemuteti.info/check-if-user-username-and-email-exists-in-mysql-database-using-ajax-javascript-html-and-php-web-program-xampp-localhost-server-phpmyadmin/

include 'mysqldatabaseconnection.php';
	//Declaring Variables
	$name_error = "";
	$email_error = "";	
	$username = "";
	$email = "";
	//If username is set
	if (isset($_GET['uname'])) {
		$username = $_GET['uname'];
		
		$sql_u = "SELECT * FROM tabuser WHERE username='$username'";
		
		$res_u = mysqli_query($databaseConnection, $sql_u);
		//Check number of rows returned from database. 
		//If greater than zero means that username is already submitted/saved in mysql database.
		if (mysqli_num_rows($res_u) > 0) {
			$name_error = "This ". $username ." username is already taken"; 	
			echo " " . $name_error;
		}
	}
	//If email is set
	if (isset($_GET['uemail']) && $_GET['uemail'] != "") {
		$email = $_GET['uemail'];
		
		$sql_e = "SELECT * FROM tabuser WHERE email='$email'";
		
		$res_e = mysqli_query($databaseConnection, $sql_e);
		//Check number of rows returned from database. 
		//If greater than zero means that email is already submitted/saved in mysql database.
		if(mysqli_num_rows($res_e) > 0){
			$email_error = "This ". $email ." email is already taken"; 	
			echo " " . $email_error;
			
		}
	}
?>

mydb.sql

phpMyAdmin SQL Dump

-- phpMyAdmin SQL Dump
-- version 5.1.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 08, 2021 at 04:36 PM
-- Server version: 10.4.19-MariaDB
-- PHP Version: 8.0.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `mydb`
--
CREATE DATABASE IF NOT EXISTS `mydb` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `mydb`;

-- --------------------------------------------------------

--
-- Table structure for table `tabuser`
--

CREATE TABLE `tabuser` (
  `id` int(11) NOT NULL,
  `username` varchar(30) NOT NULL,
  `email` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tabuser`
--

INSERT INTO `tabuser` (`id`, `username`, `email`) VALUES(2, 'Andrew', 'Andrew@gmail.com');
INSERT INTO `tabuser` (`id`, `username`, `email`) VALUES(3, 'Jane', 'Jane@gmail.com');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tabuser`
--
ALTER TABLE `tabuser`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tabuser`
--
ALTER TABLE `tabuser`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

DATABASE AND TABLES STRUCTURE AND DATA SCREENSHOTS

AJAX/JAVASCRIPT REQUEST CODE

<script type="text/javascript">
		//Function for checking if username already exists in the database.
		function checkUname(uname) {
		
		var xhttp;
		if (uname != "") {
			xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					document.getElementById("demo").innerHTML = this.responseText;
				}
			};
			xhttp.open("GET", "actionpage.php?uname=" + uname + "&uemail=" + '' , true);
			xhttp.send();
		}
		}
		//Function for checking if email already exists in the database.
		function checkEmail(email) {
		
		var xhttp;
		if (email != "") {
			xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					document.getElementById("demo").innerHTML = this.responseText;
				}
			};
			xhttp.open("GET", "actionpage.php?uname=" + '' + "&uemail=" + email , true);
			xhttp.send();
		}
		}
		</script>

DEMO VIDEO

SOFTWARES

  1. XAMPP Apache + MariaDB + PHP + Perl
  2. Sublime Text
  3. Notepad++
  4. Google Chrome Web browser
READ MORE  (PHP CRUD Tutorial) Create, Select, Update, Edit, Insert, Delete And Display Image From MySQL database In PHP (Source Code)

APPLICATION SCREENSHOTS

Posted in PHP

Published by admin

Leave a Reply

Your email address will not be published. Required fields are marked *