CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Full login/logout solution for newbies (like me)

Print topic Send  topic

Author Message
jsherk

Posts: 34
Posted: 01/11/2009, 9:10 AM

Okay, it took me a couple of days to get this figured out, but I think this covers everything including hiding the logout button when you are not logged in and hiding the login when form when you are. It also includes a menu that can be inlcuded at the top of each page with the Logout button on it. And it also explains the { curly bracket } things in the HTML code.

Alot of this has been taken from other posts in the forums, so I am not taking credit for it, I am just piecing it all together in one spot!

I'm using CCS4.1 on Windows XP Pro with apache2.2.11 and php5.2.8 and mysql5.1.3

STEP-BY-STEP

Create new blank project called MyProject (this example uses php4/5 and html 508).

CREATE BASIC PAGES

Right-click on NewPage1 and delete it.

Right-click on Pages and select New Page.
Give it the name: index
Select: Blank page and hit OK

Right-click on Page again and select New Page.
Give it the name: logout
Select: Blank page and hit OK

Right-click on Page again and select New Page.
Give it the name: menu1
Select: Includable page and hit OK

SETUP LOGOUT PAGE

Now select the logout page, and make sure the Properties window says Page:logout
Click the Events tab, and under Server right-click on After Initialize and choose Add Action.
Scroll throught the list and choose Logout.
Set the Parameter Name to Logout
Set the Return Page to index.ccp

SETUP INDEX/LOGIN PAGE

Now select the index page. Make sure the Design tab is selected for this page, and click once anywhere on the page so that the cursor is blinking up in the top left hand corner.

From your Toolbox choose Forms->Include Page.
Under Page To Include choose menu1.ccp and hit OK.
In the Design view again, click once anywhere to the right and below the newly inserted menu1 (do not click on it, but instead click somewhere else on the page).

From your Toolbox choose Builders->Authentication Builder.
Choose Login Form then hit next.
Choose Focus On Login Field (and optionally Remember Me) and hit next.
Choose your style and hit Finish.

NOTE: You will need to setup a USER table in your database with four fields (id, username, password, group), and also setup a connection to the database. This example assumes you have done that already something like this:
database connection= Connection1
database name= mydatabase
user table name= users
unique identifier field for each user = id
username field = username
password field = password
group field = group
Make sure you add at least one user to the table. Let's assume id=1 username=admin password=adminpass and group=99

Now choose Project->Settings->Security then choose the following:
Security Method = Table
Login Page = index.ccp
Connection = Connection1
User Table = users
User ID Field = id
Login field = username
Password Field = password
Level/Group Field = group
Click on ADVANCED button and set the seesion variables (UserID, UserLogin and Group ID) to something unique (recommend you do this for EVERY new project you start!!!)

Click OK when done.

Now choose Project->Settings->Security Groups then ADD
You can set this up as you please (and change them later), but for now add one that has GroupID=99 and GroupName=Administrator

SETUP MENU PAGE

Now select the menu1 page. Make sure the Design tab is selected for this page, and click once anywhere on the page so that the cursor is blinking up in the top left hand corner.

From your Toolbox choose Builders->Authentication Builder
Choose Logout Link to Custom Page and hit next.
For Page choose logout.ccp and hit Finish.

In the Design view again, click once anywhere to the right and below the newly inserted Logout (do not click on it, but instead click somewhere else on the page).

From your Toolbox choose Builders->Menu Builder
Choose Static List and hit next.
Click the big plus[+] button once and then click on Item1
Under Caption change it to MAIN MENU
Under URL choose index.ccp.
Hit next, choose your layout, hit next again, choose your style and hit Finish.

CUSTOMIZE LOGOUT (HIDE/UNHIDE)
NOTE: This also explains how the { curly brackets } work in the HTML :-)

Now, while still on the menu1 page, click on Logout so that it appears in the Properties area (Properties should read Link:Logout)
Choose the Events tab and under Server right-click on Before Show and click Add Code.

The menu1 page should have changed from the Design view tab to the Code view tab. Look for the line that says:
// Write your own code here.
Go to the end of that line and hit enter once in order to put a blank line under it.
Insert the following code:
global $Tpl;  
$custom_user = CCGetUserLogin();  
if ($custom_user) {  
  $Tpl->setvar("CustomLogoutLinkText", "LOGOUT");  
  $Tpl->setvar("CustomLogoutText", " - You are logged in as <strong>".$custom_user."</strong>");  
} else {  
  $Tpl->setvar("CustomLogoutLinkText", "");    
  $Tpl->setvar("CustomLogoutText", "You are NOT logged in.");  
}

Now click on the HTML view tab for menu1 page and look for this line:
<a href="{Logout_Src}" id="menumainLogout">Logout</a>

and change it to this line:
<a href="{Logout_Src}" id="menumainLogout">{CustomLogoutLinkText}</a>{CustomLogoutText}

CUSTOMIZE LOGIN (HIDE/UNHIDE)

Select the index page. Make sure the Design tab is selected for this page, and click anywhere on the Login form that appears in the screen. It should say Record:Login in the Properties box.
Choose the Events tab, and under Server right-click on Before Show and choose Add Code.
The index page Code view tab should now be selected.
Look for this code:
// Write your own code here.

and immediately after it, enter this code:
if (!CCGetUserID()){   //Don't forget the ! in front of the CCGet  
  $Component->Visible = True;    
}else{    
  $Component->Visible = False;  
}

PUBLISH

Now publish your project, and when initially go to the main page, it will say "You are NOT logged in." and the Login form will be displayed. Sign in with a valid username and password (like we setup username=admin and password=adminpass in our example) and the Login form disappears and it displays "LOGOUT You are logged in." Click the LOGOUT link and you are back where you started.

FURTHER EXAMPLES - ADD NEW PAGES WITH MENU and SECURITY

Now let's add an additional page with security.

Right-click on Pages and choose New Page.
Let's keep the name NewPage1 and click Blank Page and OK.

Now select NewPage1. Make sure the Design tab is selected for this page, and click once anywhere on the page so that the cursor is blinking up in the top left hand corner.

Click Form->Include Page and for Page To Include choose menu1.ccp

In the Design view again, click once anywhere to the right and below the newly inserted menu1 (do not click on it, but instead click somewhere else on the page).
Type something on the page like "Hello world!"

Now select the menu1 page. Make sure the Design tab is selected and right-click on the white rectangle which contains the menu we built earlier. Choose Edit Menu 'menu1' Static Items.

Click the big plu[+] button and the choose Item2.
Change the caption to read New Page One.
Change URL to NewPage1.ccp and hit OK.

Now select NewPage1 again. In the Design view area, click in a blank spot so that the Properties box should read: Page:NewPage1

Choose the Data tab and change Restricted to YES.
Note the three little dots (...) beside the drop down arrow. By clicking this you can later set which Groups have access to the page. If you do not select anything on this page (all groups unchecked), then as long as any user is logged in, they can view this page. If nobody is logged in, then they cannot view this page (assuming restricted=yes).

Publish everything again, and you should now have two menu options (MAIN MENU and New Page One). If you are logged out, then you will not be able to access New Page One. If you are logged in then you should be able to acces both Main Menu and New Page One and the LOGOUT link should appear on both.

Hope this is helpful!!!
View profile  Send private message
jsherk

Posts: 34
Posted: 01/11/2009, 10:25 PM

Just an additional comment about the Menus...

I noticed that in my example, when you access a restricted page, it takes you to the login page and adds a return link (ret_link). If you access more than one restricted page in a row, it keeps adding the links to the browser address bar and it gets longer and longer.

To eliminate this problem, from the Project Explorer window click the + beside menu1 then click the + beside the other Menu1 then click on ItemLink. The properties should now show Link:ItemLink. Click the Data tab and change Preserve Parameters to NONE.
View profile  Send private message
Roy

Posts: 1
Posted: 01/21/2009, 12:08 AM

Hi, very good tutorial.

Thank you.

Roy.
View profile  Send private message
jjrjr1


Posts: 942
Posted: 01/21/2009, 8:30 AM

Hi

Another way to do it is put the logon and logout forms into separate panels.

Then just do a hide show component action in the before show event.

No custom coding required and it help keeps your application portable.

All you do is hide or show the appropriate component/panel based on if someone is logged in.

This way all the hide/show functions are handled by property values to the to the panel.

Again, doing it this way requires NO coding.

Just another thought on this. There are always many ways to accomplish the same thing. As long as it works, all is good.

Have Fun.

_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com
View profile  Send private message
syah

Posts: 29
Posted: 03/29/2009, 3:41 AM

thanks...i follow all your instruction n it's work.....:-)
good tutorial
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Web Database

Join thousands of Web developers who build Web applications with minimal coding.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.