Web development tutorial

Tutorial created by Jared Lui, Synectx Web Design/Development

Categories: Data Bridge, Design, Javascript, PHP

3 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

Create seemingly complex user dependent menus relatively easy with just a few short steps.

Use one menu for both admin and visitors showing only appropriate data for each. Or use usergroups to control access to level specific pages.

In addition to menus, this concept is adaptable for any content.

next section

A Basic Understanding

To illustrate the basic concept and steps we will demonstrate using a simple CSS Menu Writer created menu to hide the Login and Logout links as needed.

If you are not very familiar with the inner workings of menus that's okay. Just know this, at it's core a menu is nothing more than an unordered list of links. The images below compare an unordered list (figure A) with the common tree structure you should be familiar with (figure B). Figure C helps drive the idea home.

Now that we have an understanding of the menu you need to edit it. Your menu will either be located in the BODY of the webpage you are working on or in a separate document as is the case when you use CSS Menu Writer. See the code below for an example. It tells you that your menu is located in the menu.php file.

php:

<!--?php require_once("CSSMenuWriter/cssmw/menu.php"); ?-->

next section

Hide Login Link if Logged In

Below is the menu we will use for our examples with all of the child links exposed for clarity.
The following tutorials assume that you have already created registration pages. Check out XXXXXX if you need help creating them.

It only makes sense that we want to hide the Login link in our menu if the visitor has logged in successfully. Follow the simple steps below to see how quick and easy it is.

Step 1: Select Menu Code

I am using a menu created with WebAssist's CSS Menu Writer. The menu code is found in the cssmw folder inside of the CSSMenuWriter folder and is called menu.php.
I want to hide the entire Login/Registration menu including the Login and Registration sub-menus.

a. Select the full '<li></li>' for the parent Login/Register as seen in the image below.

Step 2: Use SecurityAssist: Show Region Wizard

b. With your selection highlighted click WebAssist from the menubar.
c. Select SecurityAssist.
d. Select Show Region.

The only time we want this particular piece of code to show is when a user has not yet logged in.

e. Select 'Not logged in to users' from the Rule drop down menu.
f. Click the OK button.

This wraps the code with a bit of php with an 'if' statement that basically says to show this piece of code if the user is not logged in.
View the menu in your server and test it. It should not be visible anytime a user is logged in.

next section

Hide Logout If Logged Out

Like the example above there are times when certain links don't make sense in a particular situation. Until a user logs in, there is no point displaying a 'Logout' link.
Using the same steps above, let's hide the Logout link.

Step 1: Select Code and Run Show Region Wizard

a. Select the Logout link in the code (line 38 in the image in Step 1 above).
b. Select WebAssist from the menubar.
c. Select SecurityAssist.
d. Select Show Region.
e. Select 'Logged in to users' from the Rule: drop down.
f. Click the OK button to add the code and close the wizard.

View your menu in your server and you should not see the Logout link if a user is not logged in.

You most likely do not need the 'Profile' menu and sub-menus visible when a user is not logged in. You could hide this in the same way you did with the Logout link.

next section

Hide/Show User Level Options

The examples above use some of the built in Rules packaged with SecurityAssist which are many and cover a vast range of situations. However you may need to show or hide a menu item based on a individual or user group level instead of a generic situation. In these cases you will need to create your own rules.

So let's say that our menu has an option called 'Admin' with a whole set of supporting sub-menus beneath it. We don't want to advertise our link so will hide it to all but a user with an admin group id.

Step 1: Select Code and Start SecurityAssist: Show Region Wizard

a. Select the Admin list item parent.
b. Select WebAssist from the menubar.
c. Select SecurityAssist.
d. Select Show Region.

Step 2: Create New Access Rules

At this point we know that there is not a rule specific to our needs yet and have to create one.

e. Click the Access Rules... button.
f. In the Access Rules Manager screen choose the plus sign to define a new rule.
g. Give the new rule a name such as 'Allow Admin Only'.
h. Click the plus sign to add a new condition.
i. Leave the default type Allow checked.
j. Enter a value to check against. In my example I want to use a session so using the dynamic data icon (lightning bolt) I select my session which is UserGroupID.
k. Select your criteria. I chose the equals sign.
l. Enter a value to compare to. I entered 99 which is the database value I have set for an admin level user.
m. Click the OK button to save this new rule.

Step 3: Select Your New Rule

After clicking OK to save your new rule you go back to the Access Rules Manager. You will see your new rule in the list where you can copy, edit or delete it in the future. At this point we simply want to apply the new rule to our code.

n. Click the OK button to close the Access Rules Manager.
o. Select your new rule from the Show Region Rule drop down menu.
p. Click the OK button to add your new rule to your code.

Recap And Other Notes

Using the SecurityAssist Show Region tool you can create rules to hide and show everything from a single sub-menu item to an entire menu.

You can use one of the many rules provided with Security Assist such as the Logged in to users rule we used above or create complex rules of your own even using dynamic data from your database.

Best of all, this tool is not limited to menus only. You can apply these same rules and techniques to just about any set of tags or blocks of code. I've even used this to hide or show includes and plugins based on usergroups or login status.

TIP: use these techniques to make a single site act as multiple versions rather than creating multiple versions of the site. For example, I created one site that is both a free site with ads and a paid site without ads and accessible content simply by hiding and showing content based on usergroup status and level.

Have fun with it and hope it helps!

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

3 ratings | Sign in to rate this tutorial

twh: 11 Years, 2 Months, 1 Week, 2 Days, 16 Hours, 50 Minutes ago

Hi Jared,
thanks for this tutorial and the idea behind it. 100% what I was thinking of and looking for... but I was not really sure how to solve this.
Would like more of tutorials like this one - and hope that I will be able some time to give something back to this forum.
Best regards from Germany
Thomas