Pre-Packaged PHP User Login System

I have a project I am working on that requires a user sign-in/registration system. All of the user data needs to be tracked and there are requirements for limiting access to certain content based on login status, etc. It's not terribly complicated and my first inclination was to go with a WMS like DotNetNuke, which has a very robust user management system built into it. But this project will require some special modifications that would be difficult (at least for me) to accomplish with DNN.

So, my next thought was a custom PHP application with a MySQL backend. But I was concerned about the time involved in doing all the legwork just to duplicate the user account functionality that comes with DNN out of the box.

Luckily a bit of Google-ing found me a real gold mine. As is so often the case with PHP, it turns out that somebody has already done all the legwork and is willing to share. (Three cheers for Open Source!!!) Here is the URL:

http://www.evolt.org/node/60384

The download consists of about a dozen very well commented PHP pages that handle just about all the basic aspects of a web site user login system, including:

• Session-based User Login/Registration with a "Remember Me" option
  
• The ability to set different access levels for members (user, admin, etc.)
  
• An Admin page where you can view user info, upgrade/demote user levels, delete users, delete inactive users, and ban users
  
• Users can view and edit their own account information
  
• Visitor tracking that tracks both Guests and Registered Users in real time
  
• "Forgot Password" features
  
• Optional welcome email to new users
  
• Nice error handling features

He gives you the SQL you need to create the required database tables as well as some sample pages to see how the features can be integrated into your site.

It's very easy to use. I had this up and running in a test environment in about 20 minutes. The code is very well structured and commented, so I have already been able to make a number of modifications (like adding more data fields to the account profile) very quickly.

Highly recommended.

Thumbs Up for Sphider

The model club site that I run has been steadily growing. We have been adding lots of great content - articles, tips and photos, lots of photos. Our gallery now contains nearly 5000 of them. I am using a gallery application called Coppermine (PHP front-end, MySQL back-end). It's very nice. Each photo has a title and many have more detailed descriptions.

With all this content I felt that the site really could benefit from having some kind of comprehensive search mechanism. Coppermine has its own search, which works fine, but I wanted a way to search the whole site at a go.

My first thought was to use Google Custom Search, which I had implemented with some success on another site. I was able to implement it on the club site without any trouble. The issue that I had was getting it to re-index in a timely fashion when I made changes. I decided that I wanted a mechanism that gave me more control over the indexing. As I have no budget for the club site, I also wanted something that was free.

I found no shortage of free search engines out there and tried a few. But the problem I kept running into was that the free versions had a limit on the number of pages they would index. The limit was high - usually several thousand - but I kept exceeding it. The reason I kept exceeding it was the photo gallery. Nearly 5000 photos, each of which gets indexed as it's own page, plus gallery sub-area pages, etc., etc. That ends up being a lot of pages to index.

I finally found a search engine that I could run locally on my site that was free and had no page limit - Sphider. Sphider uses PHP and requires a MySQL database to store it's indexes. It is really quite nice. Not only can you re-index at will, you can choose to index just certain parts of your site by setting up "sites" in the admin panel that limit their inclusion to just certain areas. This was especially useful for me because I often want to re-index everything except the gallery, which is pretty time consuming due to the sheer size of it.

It took me a little time to get the filters right for indexing the gallery. I had to keep it from indexing certain ancillary pages that had no business showing up in a search result. But Sphider has some decent include/exclude filtering mechanisms to facilitate that. It also respects any directives in your robots text file.

It provides some nice statistics on what search terms your visitors are entering, most popular searches and so on.

Implementation was fairly easy. It uses a template with a header, footer, etc., which gives you enough flexibility to make it a seamless part of your site. Once your MySQL database is in place, you just pass Spider's admin panel your db user credentials and it takes it from there.

All in all, really not bad. I have had it in place for about 2 months now and it seems to work really well.

Validating Form Entries with JavaScript PS

OK. Being new to Blogger, I didn't realize how to correctly post code samples to an entry. Hence the screen captures in my last post. Below is a copy-and-paste-friendly version of the whole page of code I used for that example.

<html>
<head>
<script type="text/JavaScript">
<!--
function check_form_data()
{
  if (document.the_form.email.value == "")
  {
    alert("Email is a required field. Please fill it in.");
    document.the_form.email.focus();
    document.the_form.email.style.background = "#EEF111";
    return;
  }else{
    document.the_form.submit();
  }
}
// -->
</script>
</head>

<body>
<?php
if (isset($_POST['test_val'])){
  process_form();
}else{
  print_form();
}

function print_form(){
  print <<< FORM_TEXT
    <!--Note that the action just points back to the same page-->
    <form name="the_form" method="POST" action="this_page.php">
    <!--Here is our test value-->
    <input type="hidden" value="1" name="test_val">
    Email: <input type="text" id="email" size="20"><br>
    <input type="button" onClick="check_form_data();" value="Submit">
    </form>
  FORM_TEXT;
}

function process_form(){
  //Process the form data - send an email, write to a DB, whatever.
}
?>
</body>
</html>

Validating Form Entries with JavaScript

I use HTML forms quite a lot on the web sites I build for a variety of purposes. Most of the ones I build these days are self-handling PHP forms. This means that the form and the PHP that handles the form are on the same page. This is easy to do. You just put a hidden value in the form that gets set when the visitor submits the form. The PHP code checks for that value. If it's set, it does the processing. If it's not set, it displays the form. The basic code layout looks something like this:

In the first part of the PHP, we check to see if the hidden value "test_val" is set. If it is, process_form(), otherwise print_form(). Nothing to it.

We can have process_form() do just about anything with the submitted data. What we don't want it doing is trying to process form data that cannot, or should not, be processed. We may have certain fields that are required. We may have fields where the input has to be in a certain format or match certain criteria. Of course, we also don't want to be processing anything that is clearly the work of a spambot. We could handle all of this on the server side and in some cases where more complex validation is needed, this might be appropriate. But why have our server waste processing cycles doing simple checks for missing or garbage data? Let the requesting browser do it by giving the data a quick once-over with client-side JavaScript first.

The first thing that we have to do is intercept the form data before it gets sent to the server. To do this, we will replace the usual HTML form SUBMIT button with a generic button that launches our JavaScript when clicked, like this:

For illustration, let's plug this into a simple form that collects an email address:

Now let's assume that we want to do a simple validation to make sure that the email field is not blank when submitted. The basic layout of our JavaScript function (placed in the HEAD) could look something like this:



We check to see if the email value is blank. If it is, we throw an alert and exit the function. Otherwise, we call the JavaScript submit function, which sends the validated form data on its merry way.

Of course, the validation we have done here is very simple. We could check to see that the value of the email field matches the proper format for an email address. We could write a loop to systematically check multiple required fields. We could check to see that multiple fields do not contain the same value - an annoying spambot symptom. We could even dynamically add additional fields to the form based on the visitor's initial inputs. There is loads more we could do.

In our simple example, we could help the visitor even more by sending their cursor directly to the email field:

We could even highlight the field in yellow to further alert the visitor to the problematic field:

This is especially useful if you are checking and flagging multiple fields. You can focus the visitor's cursor on the first problem field, but highlight them all so that they see all the problems. Just remember to reset the highlight color back to the default for all fields at the start of your function, otherwise the fields that your visitor did fix will still be highlighted.

Certainly nothing groundbreaking here, but useful stuff. There are tons of examples of this out there and the complexity of your validation is really only limited by your knowledge of JavaScript.