By: Nick Hodges
Abstract: This article illustrates how easy it is to add log-in capability to your WebSnap applications. By Nick Hodges.
The sample code for this article can be downloaded from Code Central.
Web Snap is easily the biggest new feature of Delphi 6. Because it is big, it is naturally complicated.
Because it is complicated it is naturally hard to understand -- at least at first. But once you start playing with it, you realize that there is a lot of power in there to be unleashed. And you can unleash it without having to write much code. Some of it can be unleashed without any code, as you are about to find out.
Every Web site these days wants you to log in. Entering a username and password has become so commonplace, I can usually do it in my sleep. Internet Explorer even has a feature to help do it for you.
Logging in is becoming so ubiquitous that it can't be long before your Aunt Martha has a web site that wants you to
log in. And of course you don't want to be left behind. You don't want a web site without those familiar little edit boxes there, begging your users to
log in. And there's nothing more fun that providing content that is viewable only to those select precious few who do log in. But adding that kind of functionality is hard, right? Messing around with HTML, HTML forms, actions, POST, GET, whatever. It's all a nightmare -- unless you are a WebSnap developer! WebSnap developers can
log in users and allow them to see only the pages they want users to see -- without a single line of code! Not one line of Object
Pascal and not one line of server-side Java script! And if you have Delphi 6 Enterprise, then you are a WebSnap developer. So here we go -- fire up Delphi 6 and prepare to be amazed.
I am going to assume that you are relatively familiar with how to get around a WebSnap application. I'll hold your had some, but not for the whole trip. If you need a WebSnap primer, give a look to this article, entitled "Getting started with WebSnap in Delphi 6 Enterprise" by the ever-present and all-knowing John Kaster.
Okay, now that that is out of the way -- the first thing WebSnap developers want to do is to right click on the IDE's
toolbar and select the Internet toolbar. This adds the tools that make creating WebSnap applications and new WebSnap pages,
well...a snap. (Sorry, I couldn't resist doing that at least once in this article. I mean, that bad pun was just screaming to be typed out. You know how it
is.) Anyway, once you do that, you should see this:
Click on the button with the little hand holding a globe, and you be sent to the WebSnap wizard, and that looks like this:
Fill it out like the one above is filled out, and then press the "Components" button to select some components beyond the defaults. Check "User List
Service," "End User Adapter," and "Session Service." Then go to the
combo box next to "End User Adapter" and select TEndUserSessionAdapter.
That dialog should look like this right now:
Then press the Ok button twice, and you'll see this:
This is the home page for your Web module. Since you selected a Web App Debugger application, be sure to fire up the Web App Debugger from the Tools menu. You can
use this to run and debug your app as we go along. Now Save she application, naming the form that holds the Web App COM object anything you
want and naming the Home page WMHome.pas.
Now you have a home page with a default navigation menu that won't show any pages because we don't have enough pages to justify a menu. Let's fix that, and add another page. Go back to the Internet
toolbar and click on the button with the piece of paper in front of the globe.
You'll see this:
Note that you are going to select a TAdapterPageProducer, and you are naming the page Login. This page will be used, surprisingly enough, for logging in users. The TAdapterPageProducer is a really cool component that knows how to handle TAdapters and build pages quickly and easily using the
fields and actions of a TAdapter. Once you do that (and press Ok again), go to the WebSnap tab on the
component palette and drop a TLoginFormAdapter on your new webmodule. Your webmodule should then look something like this:
Save this page as wmLogin.pas.
Now comes the really fun part. Go to your Login page and double click on the TAdapterPageComponent. You'll see the Web Surface Designer, which looks like this:
Click the little folder up in the left corner and select "AdapterForm." This will create the code for an HTML form,
along with HTML controls to handle user input. Now do these rather tedious tasks:
I don't like warnings as a general rule, so let's fix them. What we'll do is hook the TLoginFormAdapter to these components so the TAdapterPageProducer has something to adapt so that it can produce a page. (Now you don't have to wonder how the TAdapterPageProducer got its name.)
Select the AdapterErrorList, and set its Adapter property to LoginAdapterForm1. Do the same for the
AdapterFieldGroup. Then set the DisplayComponent property of the AdapterCommandGroup1 to AdapterFieldGroup1. Once you do that, things look a little better:
The AdapterErrorList is a component that will gather up any error messages that arise out of failed logins and present them to the user. The other components on the page show themselves, and you should easily see what they are and do.
Close the Web Surface Designer and add another page to the application. This time, select the "Require Login" checkbox for the page, name it
"MustLogin," and save it as wmMustLogin.pas. Go to its HTML page in the code editor and add some text at the bottom indicating that you can view this page
only when you are logged in. That way, you'll be sure that you are looking at the proper page when you are logged in.
Of course, since you want users to log in, you have to have some users and passwords.
You can add these to your sample application back on the home page. Go there and select the WebUserList component and double click on it. Use the New button to add a new user, and give it your favorite username and password in the Object Inspector. Mine ended up looking like this:
Next you need to tell the application what the login page is, so that if a user
who is not logged in tries to get to a page that requires login, you can send him to the login page forthwith. (That means "right away" for you VB programmers.) Go to the EndUserSessionAdapter component on the Home
page and set its LoginPage property to 'Login' -- the name of the page that has the login controls on it.
There's one more thing to do on the home page. Currently, there is a small bug in the WebSnap architecture that means sometimes users can't get logged in. It is easy to
work around this bug, however. All you need to do is add all the fields manually to the EndUserSessionAdapter. Go to that control, double click on it, right click on the component editor and select "Add All
Fields." That will ensure that those logins always get honored. Nothing more irritating that not being able to
Be sure to save the whole application, then use the Web App Debugger server to run it.
Try to go to the MustLogin page. You can't -- instead, you are sent to the Login page.
Log in with your user name and password, and you are taken to the MustLogin page. Cool, huh?
Now log out and try to log in with an invalid password, or unknown username.
You'll get an error message, nicely placed right on the page.
And you did all this without one line of code! Unfathomable! Amazing! Astounding!
Yes, it is all of those things. But mostly, WebSnap is just powerful.
Nick Hodges is The Big Cheese at HardThink, Incorporated, a consulting shop specializing in Delphi Development. He likes to read Stephanie Plum novels and keep track of the Minnesota Twins. But mostly he like to hang with his family and enjoy their new home in St. Paul, MN.
Try Delphi XE4 free for 30 days
New Instant Trial!
Webinars on demand!
More social media choices:
Delphi on Google+
@RADTools on Twitter
Server Response from: ETNASC02