PHP Spell Checker

I have completed 102 of the 292 lessons in the Udemy course “Learn PHP Programming From Scratch.” The course has been great due to Alex Garrett’s (@alexjgarrett) excellent instruction. The most recent section I completed was on How to Create a Spell Checker. I enjoyed this series of lessons and decided to take a little extra time to enhance the Spell Checker beyond the basics of the lesson and post my finished product to my blog.

I actually changed a great deal of the underlying code and functionality. I used the PHP Data Objects (PDO) methods for connecting to the database. In addition, I decided to use a series of multidimensional arrays to store the results of the words from the MySQL database. The end product has security checks to ward of SQL injections and is styled to be responsive. If you’d like to try out the Spell Checker click the link or the image below.

Main Index Page for Spell Checker

<?php

error_reporting(E_ALL);
include("core/init.php");
include("func/func.php");
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    	$browser = 'iphone';

  	}

?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Spell Checker</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="banner"><img src="images/spellcheck.png" >
<h2 id="maintitle">Spell Checker</h2>
</div>
<div id="inputarea">
<form action="" method="post">
	<p><input id="word" type="text" name="word" placeholder="Enter a single word to check..."></p><br>
    <p><input id="submitbutton" type="submit" value="Check spelling"></p>

</form>
</div>
<?php
if (isset($_POST['word']) && trim($_POST['word']) != NULL) { 
	$word = strip_tags(trim($_POST['word']));
	$word = strtolower($word);
	if (ctype_alpha($word)) {
		
		$result = spellcheck($word, $db);
	
		if (is_array($result)) {
		echo "<h3 id='headsuggest'>Suggested spellings: </h3><div id='resultareasuggest'>
		Suggested spelling for the word: <strong><i>". $word ."</i></strong>
		<ul>";
		foreach($result as $suggestion) {
			echo "<li>" . $suggestion['word'] . "</li>";
		}
		
		echo "</ul></div>";
		
		$db = null;
	} else if ($result === false) {
		echo "<h3 id='headunknown'>No suggestions:</h3><div id='resultareaunknown'>You entered the word: <strong><i>" . $word. "</i></strong><br> No similar words were found in the dictionary.</div>";
		$db = null;
	} else {
		echo "<h3 id='headsuccess'>Word spelled correctly!</h3><div id='resultareasuccess'>" . $result . "</div>";	
		$db = null;
	}
	
	} else {
		echo "<h3 id='headillegal'>Illegal characters detected!</h3><div id='resultareaillegal'>Only alphabetic characters and no spaces are allowed.</div>";
		$db = null;
	}
}
?>

</body>
</html>

<?php

error_reporting(E_ALL);

include("core/init.php");

include("func/func.php");

$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");

if ($browser == true){

$browser = 'iphone';

}

<!doctype html>

<html>

<head>

<title>Spell Checker</title>

</head>

<body>

<h2 id="maintitle">Spell Checker</h2>

</div>

</form>

</div>

<?php

if (isset($_POST['word']) && trim($_POST['word']) != NULL) {

$word = strip_tags(trim($_POST['word']));

$word = strtolower($word);

if (ctype_alpha($word)) {

$result = spellcheck($word, $db);

if (is_array($result)) {

echo "<h3 id='headsuggest'>Suggested spellings: </h3><div id='resultareasuggest'>

Suggested spelling for the word: <strong><i>". $word ."</i></strong>

<ul>";

foreach($result as $suggestion) {

echo "<li>" . $suggestion['word'] . "</li>";

}

echo "</ul></div>";

$db = null;

} else if ($result === false) {

echo "<h3 id='headunknown'>No suggestions:</h3><div id='resultareaunknown'>You entered the word: <strong><i>" . $word. "</i></strong><br> No similar words were found in the dictionary.</div>";

$db = null;

} else {

echo "<h3 id='headsuccess'>Word spelled correctly!</h3><div id='resultareasuccess'>" . $result . "</div>";

$db = null;

}

} else {

echo "<h3 id='headillegal'>Illegal characters detected!</h3><div id='resultareaillegal'>Only alphabetic characters and no spaces are allowed.</div>";

$db = null;

}

</body>

</html>

Function Page for Spell Checker

<?php

function spellcheck($word, $db) {
	
	$query = $db->prepare("SELECT `word` from `english` WHERE SUBSTRING(`word`, 1, 1) = '". substr($word, 0, 1) ."'");
	try {
		$query->execute();
		
		while (($words_row = $query->fetch(PDO::FETCH_ASSOC)) !== FALSE) {
			
			$wordschecklist[] = array(
				'word'		=> $words_row['word']
			
			
			);
			
				
		}
	
		foreach($wordschecklist as $check) {
			if ($word == $check['word']) {
				$result = "The word is spelled correctly: <strong>". $check['word'] . "</strong><br>";
				
				return $result;		

			} 
		
		}
		
		foreach($wordschecklist as $check) {
			
			similar_text($check['word'], $word, $percent);
			
			$value = $percent;
			
			if ($value > 82) {
				$similarwordslist[] = array(
					'word'		=> $check['word'],
					'percent'	=> $value
				);
			}
	
		}
		
		if (!empty($similarwordslist)){
			foreach($similarwordslist as $number) {
				$ordernum[] = $number['percent'];
			}
		
			array_multisort($ordernum, SORT_DESC, $similarwordslist);
		}
		
		return (empty($similarwordslist)) ? false : $similarwordslist;
	
	} catch (PDOException $e) {
		die($e->getMessage());
	}
	
}

<?php

function spellcheck($word, $db) {

$query = $db->prepare("SELECT `word` from `english` WHERE SUBSTRING(`word`, 1, 1) = '". substr($word, 0, 1) ."'");

try {

$query->execute();

while (($words_row = $query->fetch(PDO::FETCH_ASSOC)) !== FALSE) {

$wordschecklist[] = array(

'word' => $words_row['word']

);

}

foreach($wordschecklist as $check) {

if ($word == $check['word']) {

$result = "The word is spelled correctly: <strong>". $check['word'] . "</strong><br>";

return $result;

}

foreach($wordschecklist as $check) {

similar_text($check['word'], $word, $percent);

$value = $percent;

if ($value > 82) {

$similarwordslist[] = array(

'word' => $check['word'],

'percent' => $value

);

}

if (!empty($similarwordslist)){

foreach($similarwordslist as $number) {

$ordernum[] = $number['percent'];

}

array_multisort($ordernum, SORT_DESC, $similarwordslist);

}

return (empty($similarwordslist)) ? false : $similarwordslist;

} catch (PDOException $e) {

die($e->getMessage());

}

Database Connection Page for Spell Checker

?php

$config['db'] = array(
	'host' 		=> 'localhost',
	'username' 	=> 'your_user',
	'password' 	=> 'your_password',
	'dbname'	=> 'spellchecker'
);


$db = new PDO('mysql:host=' . $config['db']['host'] . ';dbname=' . $config['db']['dbname'], $config['db']['username'], $config['db']['password']);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

?php

$config['db'] = array(

'host' => 'localhost',

'username' => 'your_user',

'password' => 'your_password',

'dbname' => 'spellchecker'

);

$db = new PDO('mysql:host=' . $config['db']['host'] . ';dbname=' . $config['db']['dbname'], $config['db']['username'], $config['db']['password']);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

Style Sheet for Spell Checker

@charset "UTF-8";
/* CSS Document */

input#submitbutton {
	margin-left: 60px;
	border:2px groove #7c93ba;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	padding: 5px 25px;
	/*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/
	background-color:#6b6dbb; /*required for browsers that don't support gradients*/
	background: -webkit-gradient(linear, left top, left bottom, from(#88add7), to(#6b6dbb));
	background: -webkit-linear-gradient(top, #88add7, #6b6dbb);
	background: -moz-linear-gradient(top, #88add7, #6b6dbb);
	background: -o-linear-gradient(top, #88add7, #6b6dbb);
	background: linear-gradient(top, #88add7, #6b6dbb);
	/*style to the text inside the button*/
	font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
	color:#fff;
	font-size:1.1em;
	letter-spacing:.1em;
	font-variant:small-caps;
	/*give the corners a small curve*/
	-webkit-border-radius: 0 15px 15px 0;
	-moz-border-radius: 0 15px 15px 0;
	border-radius: 0 15px 15px 0;
	/*add a drop shadow to the button*/
	-webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
	-moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
	box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
input#submitbutton:hover, input#submitbutton:focus {
	color:#edebda;
	/*reduce the spread of the shadow to give a pushed effect*/
	-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
	-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
	box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}

#inputarea {
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #EDF2F7;
}

#banner {
    text-align: center;
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #EFEFEF;
}

#banner img{
    width: 75px;
}

#resultareasuggest {
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #9FD1ED;
}

#resultareaillegal {
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #FAC7C8;
}

#resultareasuccess {
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #A1F3AD;
}

#resultareaunknown {
    margin-left:20px;
    font-family: Arial, Sans-Serif;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    padding: 15px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #EFC486;
}

#word {
	padding-left: 10px;
	width: 250px;
	height: 30px;
	margin-left: 20px;
	font-size: 15px;
}

#headsuggest {
	padding-left: 90px;	
	color: darkblue;
	
}
#headunknown {
	padding-left: 90px;	
	color: darkorange;
	
}
#headsuccess {
	padding-left: 90px;	
	color: darkgreen;
}
#headillegal {
	padding-left: 90px;	
	color: red;
	
}

/*------------------------------------*\
	$IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
    /*--- iPhone only CSS here ---*/

body {
        -webkit-text-size-adjust:none;
        font-family:Helvetica, Arial, Verdana, sans-serif;
        padding:5px;
}

div {
        clear:both!important;
        display:block!important;
        width:100%!important;
        float:none!important;
        margin:0!important;
        padding:0!important;

 }
 
#banner img {
        max-width:100%;
	width: 40%;
        height:auto;
}

#word {
	width:90%;
	margin-left: 5px;
	
}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

@charset "UTF-8";

/* CSS Document */

input#submitbutton {

margin-left: 60px;

border:2px groove #7c93ba;

cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/

padding: 5px 25px;

/*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/

background-color:#6b6dbb; /*required for browsers that don't support gradients*/

background: -webkit-gradient(linear, left top, left bottom, from(#88add7), to(#6b6dbb));

background: -webkit-linear-gradient(top, #88add7, #6b6dbb);

background: -moz-linear-gradient(top, #88add7, #6b6dbb);

background: -o-linear-gradient(top, #88add7, #6b6dbb);

background: linear-gradient(top, #88add7, #6b6dbb);

/*style to the text inside the button*/

font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/

color:#fff;

font-size:1.1em;

letter-spacing:.1em;

font-variant:small-caps;

/*give the corners a small curve*/

-webkit-border-radius: 0 15px 15px 0;

-moz-border-radius: 0 15px 15px 0;

border-radius: 0 15px 15px 0;

/*add a drop shadow to the button*/

-webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;

-moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;

box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;

}

/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/

input#submitbutton:hover, input#submitbutton:focus {

color:#edebda;

/*reduce the spread of the shadow to give a pushed effect*/

-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;

-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;

box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;

}

#inputarea {

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #EDF2F7;

}

#banner {

text-align: center;

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #EFEFEF;

}

#banner img{

width: 75px;

}

#resultareasuggest {

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #9FD1ED;

}

#resultareaillegal {

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #FAC7C8;

}

#resultareasuccess {

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #A1F3AD;

}

#resultareaunknown {

margin-left:20px;

font-family: Arial, Sans-Serif;

font-size: 15px;

margin-bottom: 5px;

display: block;

padding: 15px;

border: solid 1px #85b1de;

width: 300px;

background-color: #EFC486;

}

#word {

padding-left: 10px;

width: 250px;

height: 30px;

margin-left: 20px;

font-size: 15px;

}

#headsuggest {

padding-left: 90px;

color: darkblue;

}

#headunknown {

padding-left: 90px;

color: darkorange;

}

#headsuccess {

padding-left: 90px;

color: darkgreen;

}

#headillegal {

padding-left: 90px;

color: red;

}

/*------------------------------------*\

$IPHONE

\*------------------------------------*/

@media screen and (max-device-width: 480px){

/*--- iPhone only CSS here ---*/

body {

-webkit-text-size-adjust:none;

font-family:Helvetica, Arial, Verdana, sans-serif;

padding:5px;

}

div {

clear:both!important;

display:block!important;

width:100%!important;

float:none!important;

margin:0!important;

padding:0!important;

}

#banner img {

max-width:100%;

width: 40%;

height:auto;

}

#word {

width:90%;

margin-left: 5px;

}

I had a great time doing this project! A big thank you to my fantastic instructor Alex Garrett.
Thanks for taking the time to check it out.

Hi, I'mGlen Taylor

Technology Professional

Project Manager

Teacher

Full Stack Web Developer

Main Index Page for Spell Checker

Function Page for Spell Checker

Database Connection Page for Spell Checker

Style Sheet for Spell Checker

Leave a comment Cancel reply