Category Archives: JQUERY

How I created an online word scrambler application in 4 weekends

In a couple of prior posts ago I played around with a routine that scrambles and unscrambles text. I think because of that I became interested in scrambling words and particularly anagrams. Then one day while I was observing some of the free software that arvixe supplies with their hosting accounts, I came across a php code library that was made to find anagrams. So, I downloaded the php source code and rolling up my sleeves, with my Larry Ullman’s  programming books at my side, I began to play around with creating a little web application around this ability. The idea was to create a site to find anagrams from words in order to test out and see if I could do it. In the process I learned some interesting things about PHP and JQUERY.

Anagrams can be fun

The ability to scramble words can be useful for some word games where you need to find an anagram. Frequently crossword puzzles such as newspapers provide, will give you an anagram as a clue as to the actual word. There are also many contests and word puzzles that use anagrams in a humorous juxtaposition. For example do a search on ‘humorous anagrams’ and you will find some funny examples.

Word Scrambling for Information Technology Uses

Or for a new password tool, you can use it to come up with a root phrase for a new password particularly for legacy systems. For example if  your legacy application only accepts a limited symbol set and you need to ensure that a password will in fact be accepted you might choose to input a subset of the known symbols with some user selected letters and numbers.

Appreciation for the Larry Ullman Books

So how did I actually do it? Well I had a good coach.

I closely followed the Larry Ullman Book’s, the first “PHP for the Web” and the second, “PHP Advanced and Object Oriented Programming” in terms of structuring a best set of pages. Because I am so new to PHP programming I needed some help in coming up with maintainable and extensible code base. In particular follow Larry’s chapter 8 “Creating Web Applications”.

  • Find and download php code that creates the anagram candidates. Do a search on “php anagram script” and come with something you can build a working program around. In the file I ended up using it had an easy to fix error in it.
  • So the heart of the site is reallly this  php class that will generate the scrambled words / anagrams. Make sure it works by creating another php script that calls it.  Then prepare to modify it.
  • Modify the output of the outputted anagram text so each word was enclosed in a div tag.
  • Then use CSS to style those tags.
  • Use JQUERY to make sure the user does not type in too many characters. I ended up only allowing 20 characters to be input. The reason is the process takes too long when the number of characters is greater than 4 or 5. For that reason, modify your php settings to stop processing after one or two seconds. Read about it here.
  • Next use AJAX and JQUERY to call the anagram php class object. I wanted to use JQUERY to make sure the site was more responsive and did not flicker as data was being called from php.

Adding a progress bar using AJAX

One thing I added that had me working to figure out was how to create a progress bar and how to make it animate when the ajax was working. I ended up using this code which seems to work so far.

The idea is to use an animated graphic that tells the user that the page is processing. In this case the name of the file is progressbar. After the function completes the progress bar is hidden from the user but when AJAX starts up, it is shown to the user.

So what did I learn? For me it was that JQUERY is an important aspect of modern day web applications, one that I am sure to use more of in the future. Additionally, I found that PHP is a delight to work with and easier to learn with aid of good guide-book like the Larry Ullman books already mentioned.

The other interesting things I learned had to do with the internal struggles all application development teams and project managers have to wrestle with. That is, when and how to expand the functionality (whether to avoid or embrace mission creep?) and when to finally deploy even knowing that there are some things not perfect. I mention this because I originally envisioned some database functionality, however due to time constraints, I was not able to add that part in. But, I may circle back to this in the future to add it in.

Here is the link to the word scrambler application: Text Scrambler.