C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 301 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 301 How to Use It Use this plug-in as a replacement for creating an <input> tag, like this: $prompt = 'Please enter your Username here'; echo "<form method='post' action='program.php'>"; echo "Username: " . PIPHP_InputPrompt("name='uname' type='text' size='50'", $prompt); echo "<input type=submit></form>"; In this example an HTML form is created, within which the word Username: is displayed, followed by a call to PIPHP_InputPrompt(). Then a submit button is added and the form is closed. Two arguments are passed to the plug-in. First, there are the parameters an <input> tag would generally need—in this case, they are a name, the type, and the size, in the string name='uname' type='text' size='50'. If required, an initial value could have been defined here by adding value='a value' to the string. This would be useful, for example, where a form has already been submitted but is being returned to the user for amending, and where you do have a submitted value for this field. If the user then removes such a predefined value, this plug-in will kick in again and start placing the prompt in the field if it is left empty. The second argument is the prompt to display, which might be something like enter your e-mail address, or type your name here, and so on. Just make sure it’s not longer than the size of the input window or some of it won’t display. One thing to remember when you use this plug in is that if a user submits the form with the prompt text still visible, then that is the value that will be passed to your program. But this should be easy to catch because you already know the value of your prompt text, likely having it stored in a string such as $prompt, so you can easily check the input received against that value and act accordingly. Once you start using this plug-in, you should find that the number of successfully submitted forms you receive rises, because you will have added extra assistance for your users that is informational but doesn’t distract them from completing your form. But remember that this plug-in only provides an additional prompt to your users and doesn’t ensure they actually follow it—for that you need to validate the data received when it arrives at the server. The plug-in has also been designed to be smart enough to know when it has been called more than once, and will only return the necessary JavaScript functions a single time. This means you can safely use it multiple times within the same document, or even the same form. It manages this by using the static PHP variable $PIPHP_IP_NUM as a usage counter; a static variable being one that resumes its value when a function is reentered. The Plug-in function PIPHP_InputPrompt($params, $prompt) { $id = 'PIPHP_IP_' . rand(0, 1000000); $out = <<<_END 302 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s 302 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s <input id='$id' $params onFocus="PIPHP_JS_IP1('$id', '$prompt')" onBlur="PIPHP_JS_IP2('$id', '$prompt')" /> _END; static $PIPHP_IP_NUM; if ($PIPHP_IP_NUM++ == 0) $out .= <<<_END <script> PIPHP_JS_IP2('$id', '$prompt') function PIPHP_JS_IP1(id, prompt) { if ($(id).value == prompt) $(id).value = "" } function PIPHP_JS_IP2(id, prompt) { if ($(id).value == "") $(id).value = prompt } function $(id) { return document.getElementById(id) } </script> _END; return $out; } Words from Root Whenever you can save your users a little typing, then you give them yet another reason to use your web site in preference to others. One neat trick is to provide a clickable list of words the user is likely to be entering. For example, Figure 11-11 shows the word part appl entered as part of the GET variable word, and underneath it the first 20 words found in a local dictionary beginning with those letters can be seen. FIGURE 11-11 The plug-in has returned 20 words beginning with the letters appl. 89 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 303 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 303 Of course, just displaying a list of words isn’t too helpful, and the following plug-in, Predict Word, will use some JavaScript to finish off the feature. However, I have still listed this plug-in in its own right because it can often be handy to be able to look up lists of words or phrases based on their first few letters, such as in crossword helper programs, contact directories, and so on, and this routine is flexible enough to deal with both words and phrases. About the Plug-in This plug-in takes the first few letters of a word and returns all the words or phrases in the dictionary that begin with those letters, up to a maximum number. It requires the following arguments: • $word A word root • $filename The path to a dictionary file • $max The maximum number of words/phrases to return Variables, Arrays, and Functions $dict String containing a collection of words or phrases separated by \n characters or \r\n pairs $matches Array containing all matching words found in $dict $c Integer containing either $max or the number of words found, if less $out Array of words to return How It Works This plug-in loads a file of words or phrases into the string variable $dict. The words or phrases must be separated by a character that isn’t a letter or number, or the hyphen or underline character. Typically, the \n character or \r\n pair of characters will do the job, and also make the file easy to load into and edit in a text editor. The preg_match_all() function is then called with a search regular expression of \ b$word[\w ]+, which means “starting at any word boundary look for occurrences of the string in $word, followed by any word characters or spaces,”—in other words all letters, digits, hyphens, underlines, and spaces are allowed; anything else indicates a non-word/ phrase. This will match any words or phrases in the dictionary file that begin with $word. All the matches found are then placed into the array $matches[0]. The variable $c is then set to either $max or to the number of matches made, whichever is the lower number, using the min() function. Then the array $out is populated with exactly $c words from the $matches[0] array, and that array is returned. How to Use It To use this plug-in, pass it the three arguments it requires, a root word, the filename of a dictionary file, and the maximum number of words to return, like this: $list = PIPHP_WordsFromRoot('appl', 'dictionary.txt', 20); 304 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s 304 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s The array $list will then contain up to $max words. Or, for the purposes of the next plug-in, Predict Word, you would use the following code to read up to two GET arguments from the command line and then return a string, with the words separated by | characters, like this: $out = ""; $max = 5; if (!isset($_GET['word'])) exit; if (isset($_GET['max'])) $max = $_GET['max']; $result = PIPHP_WordsFromRoot($_GET['word'], 'dictionary.txt', $max); if ($result != FALSE) foreach ($result as $word) $out .= "$word|"; echo substr($out, 0, -1); On a server with the domain myserver.com, running the program program.php, the preceding example code could be called up using a URL such as this: http://myserver.com/program.php?word=appr&max=20 By default, five words will be returned, but if a GET argument is passed in the variable max, as in &max=20, then $max will be changed to the supplied value. When output, each word has a | sign after it as a separator, so when the final word has been sent, a call is made to the substr() function to strip the last unwanted | from $out before echoing its contents. If you download plug-ins.zip from the companion web site at www.pluginphp.com and extract it, you will find this program in the folder 11, saved under the filename wordsfromroot .php. In that folder, there’s also a dictionary file of over 80,000 words called dictionary.txt. The Plug-in function PIPHP_WordsFromRoot($word, $filename, $max) { $dict = file_get_contents($filename); preg_match_all('/\b' . $word . '[\w ]+/', $dict, $matches); $c = min(count($matches[0]), $max); $out = array(); for ($j = 0 ; $j < $c ; ++$j) $out[$j] = $matches[0][$j]; return $out; } Predict Word Many more recent applications such as web browsers offer the user the ability to select input from a drop-down list of words or phrases similar to what the user is typing. This predictive technology is also often used for texting on mobile phones. Using this plug-in, you can add the same facility to your web forms, as shown by Figure 1 1-12. 90 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 305 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 305 About the Plug-in This plug-in creates the HTML and JavaScript required to provide a selection of words or phrases beginning with the letters input so far, from which the user can choose to make a selection. It requires the following arguments: • $params Any additional parameters needed by the tag, including name=, type=, rows=, cols=, name=, size=, value=, and so on • $view The maximum number of items to display in the selection box (if there are any more than this, the list becomes scrollable) • $max The maximum number of items to suggest Variables, Arrays, and Functions $id PHP random number between 0 and 1,000,000 $out PHP string to be returned by the plug-in $j PHP integer loop counter for creating the <option> list PIPHP_JS_CopyWord() JavaScript function to copy a word to the input PIPHP_JS_PredictWord() JavaScript function to display suggested words PIPHP_JS_GetAjaxRequest2() JavaScript function to prepare an Ajax request PIPHP_JS_AjaxRequest() JavaScript function to perform an Ajax request $() JavaScript function shorthand for getElementById() How It Works Some of the JavaScript functions in this plug-in are modified versions of those used in plug- in 83, Get Ajax Request. As a whole, though, this JavaScript code is too complex to fully explain in a book on PHP, and I don’t recommend you try to modify it unless you are very experienced with JavaScript. However, here’s a general outline of what it does. FIGURE 11-12 The plug-in displays a selection of possible words the user may be intending to type. . likely having it stored in a string such as $prompt, so you can easily check the input received against that value and act accordingly. Once you start using this plug- in, you should find that. Functions $dict String containing a collection of words or phrases separated by
characters or
pairs $matches Array containing all matching words found in $dict $c Integer containing either $max. and Functions $id PHP random number between 0 and 1,000,000 $out PHP string to be returned by the plug- in $j PHP integer loop counter for creating the <option> list PIPHP_JS_CopyWord() JavaScript