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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?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> |
Function Page for Spell Checker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 |
?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
Leave a comment