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 "<pre>" . print_r($result, true) . "</pre>";
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;
}
}
?>
<div id="footer">
<a href="http://glenmtaylor.com/">Back to Home</a>
</div>
</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;
//var_dump($wordschecklist);
//echo "<pre>" . print_r($similarwordslist,true) . "</pre>";
//return $wordchecklist;
} catch (PDOException $e) {
die($e->getMessage());
}
}
Database Connection Page for Spell Checker
<?php
$config['db'] = array(
'host' => 'localhost',
'username' => 'dbuser',
'password' => 'somepasswordyoupick',
'dbname' => 'databasename'
);
$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;
}
#footer {
margin-left:20px;
font-family: Arial, Sans-Serif;
font-size: 15px;
margin-bottom: 5px;
display: block;
padding: 2px 15px 2px 15px;
border: solid 1px #85b1de;
width: 300px;
background-color: #EFEFEF;
}
#footer a {
text-decoration:none;
}
#footer a:hover {
text-decoration: underline;
}
/*------------------------------------*\
$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.