I am more that just a survey : The Login System ( 1 / 3 )

In this next set of articles I am going to show you how we can take Data Collection Scripts and get them to make some cool things. To me a survey can be so much more than just a survey, it can, with the use of some simple concepts, be a dashboard , online comments cleaner, panel or report delivery system. So what skills do we have to have to make let’s say a very simple dashboard system. Well if you know how to write a data collection survey , you know how to edit JavaScript , you have read my posts on ODBC connections and have learnt HTML you have all the tools you need.
For any system we make we will need a login feature. The next three articles will show you how to put this together. This article will show you how to setup the process flow , and then the next article will show you how you can authenticate the user using the Data Collection user system and then the final article will show you how you can make your own user system. First off we need a survey that will hold our login question and the menu system so create an MDD and save it as SDmenu. Then add the following metadata,

Metadata(en-AU, Question, label)

    tLogin "User Name:"
        style(
            Width = "15em",
            Control(
                Type = "SingleLineEdit"
            )
        )
        labelstyle(
            Align = "Right",
            Width = "8em"
        )
    text [1..50];

    tPassword "Password:"
        style(
            Width = "15em",
            Control(
                Type = "Password"
            )
        )
        labelstyle(
            Align = "Right",
            Width = "8em"
        )
    text [1..50];

Message "{MESSAGE}"
    info;

    pLogin ""
    page(
        tLogin,
        tPassword,
        Message
    );

End Metadata

Next we need some routing, before we go into any great detail here we will just setup the basics. No real login feature , just all the code that will allow us to display the login screen and get it to work the way we want.

Routing(Web)

Dim bLogin,sMessage,sServer,sSQLServer


sMessage = ""
sServer = "MyServer"
sSQLServer = "MySQLServer"

TryAgain:

	Message.Label.Inserts["MESSAGE"] = sMessage

	bLogin = false
		
	pLogin.LayoutTemplate = "Login.html"
	pLogin.Ask()
	
	bLogin = CheckLogin(tLogin,tPassword,sServer)

If ( bLogin = false ) Then 
	sMessage = "!!! Sorry, you dont have access !!!"
	Goto TryAgain
End If

Function CheckLogin (sLogin,sPassword,sServer)

CheckLogin = true

End Function


End Routing

As you will see from the code , whatever we do at this stage will result in a successful login. And that is fine , we are only about look and feel at this stage. Next we need a template , create an html file called login.html and use this html.

    
    









	

			

				

					This is the header area for logos
					  


							

									

										
My Menu System



										

									
							
						
					
			
		

			

				This is the footer
			
		
	

If we get all this working what we will end up with is a screen like this one,

and when you click logon , you will see the following,

You will see that our error is “missing answer” which is not what we want, we want it to come up with something a bit better than that , so what we will do is change the error message for the question. To do this , modify your login and password questions to look like this,

    tLogin "User Name:"
        style(
            Width = "15em",
            Control(
                Type = "SingleLineEdit"
            )
        )
        labelstyle(
            Align = "Right",
            Width = "8em"
        )
    text [1..15] helperfields (
        StandardTexts "StandardTexts" block fields
        (
            Errors "Errors" block fields
            (
                MissingAnswer "*"
                info;

            );

        );
    );

    tPassword "Password:"
        style(
            Width = "15em",
            Control(
                Type = "Password"
            )
        )
        labelstyle(
            Align = "Right",
            Width = "8em"
        )
    text [1..15] helperfields (
        StandardTexts "StandardTexts" block fields
        (
            Errors "Errors" block fields
            (
                MissingAnswer "*"
                info;

            );

        );
    );

and now when you click the logon button you get red “*” instead of the missing answer text.

So that’s it for this article, we have designed are login screen , well the flow of the screens more that the look. In the next article I will show you how we can authenticate the user using the Data Collection User Administration system.