Grails tutorialSimple login/logout

http://khomkrit.wordpress.com

Part ICreate View

Prepare Artifact

Create Grails Application

> grails create-app simple-login

and Create a Controller named user, used to handle user activity such as login and logout.

> grails create-controller user

Prepare Artifact

Create a file named “index.gsp” in

grails/views/user/ Directory

Custom Login PageCustom the “index.gsp” file created recently

Custom Login Page

Create HTML textfield for username/password

add some style

Custom the “index.gsp” file created recently

Custom Login Pagecreate a form using <g:form> tag

Custom Login Page

if you don’t want to use <g:form> tag you can use HTML form instead! Because in finally, Grails will generate plain HTML form to you.

I prefer to use <g:form> tag, it’s make sense and give more semantic and info about what controller and what action will accepts from form request.

<g:form action=”login”/>

Custom Login Page

send form request to action named “login”

and What Controller? If you don’t specify a controller name it will send request to default controller corresponding with the name of file directory.

In this situation, index.gsp is in /grails-app/user/ directory. So, It will send request to user controller.

<g:form action=”login”/>

Custom Login Page

Anyway, You can add the specific controller to which you want to sent request.

<g:form controller=”user” action=”login”/>

Start Grails Application by using this command

> grails run-app

Go to http://localhost:8080/simple-login/user

Now, you cannot do anything with the form. If you click the Login button, the error will occurs. Why?

Because the target action specified by you in the previous is not created.

What is the action specified by you?

Back to the login.gsp you will see this...

What is the action specified by you?

Back to the login.gsp you will see this...

Yes, action named “login” will get the form request.

Part IILet’s create the Action

Tip

You can make most changes, including changes to the domain and controller classes, without having to restart the web server.

Sometimes, however, change require a restart. Creating a new controller sometimes requires a restart

Let’s create the action

All action is declared in the controller file. In this case, you want to send request to controller named “user” and action named “login”

go to UserController.groovy to create the “login” action.

Custom Controller

all Controller is in

/grails-app/controllers/ directory

Custom Controller

Open UserController.groovy

and Create an action named “login”

Custom Controller

Go to http://localhost:8080/simple-login/user/

and Click the Login Button

Custom ControllerOOP! Grails sent 404 back! Why?

Custom ControllerBy Default, When you call any action, Grails try to search for a file which has name corresponding with the action name called by client.

In this case you try to http://localhost:8080/simple-login/user/login, this url means you try to call action named “login” in the user controller

So, Grails try to find a file named “login.gsp” in /grails-app/views/user/ directory for render to client.

you don’t have that file!

Custom Controller

You don’t have the login.gsp file for Grails, It’s make Grails don’t know what should to render back to client.

You can use “render” method for tell Grails what it should to render back.

Custom Controller

Go to http://localhost:8080/simple-login/user/

and Click the Login Button again.

Custom Controller

Good Responding :)

Custom ControllerYou can add some your logic to handle login such as keep login status in the session and send some message back to user like “you have logged in” or “your login failed” in the login action.

You can add some logic to handle login here

Part IIIAdd some Logic to Handle the Login

ValidationAdd simple validation to check username and password sent from client

all parameters sent from client is stored in variable named “params”

So, the code will look like this...

Validation

For testing, go to login page and try to login again.

If username is “admin” and password is “pass” then you can login, else cannot.

ValidationDon’t You want to use ugly responding when user try to login?

Next, After user has logged in, the Grails application will redirect user to the login page again and give some info using “flash” variable.

About flash scope is out of this tutorial topic but you can investigate that how to use flash through this tutorial.

Using flash

use flash variable to store some message as the following code and redirect to the login page (index.gsp) .

Using flash

redirecting user to action named “index” .By default, Grails will search for file named “index.gsp” in grails-app/views/user/ directory.

flash message sent to action named “index” by the last command in login action and also through to index.gsp

So, You can access the flash message in action named “index” and also access it in “index.gsp”

Using flashAdd ${flash.message} in login page If it has something in, it will show message

To display value in a variable you can use this pattern ${variable-name}

Using flashTesting, Go to login page and try to login again.

After try to login, you will see value in flash.message sent from login action.

Keep Status

You can use “session” to keep information about login status.

Keep some info by using session variable

Handle LogoutCreate a new action named “logout” to handle when user want to logout.

session.user keep status that the user has logged in, so you should clear all info about logged in user.

New action

Custom Login pageAdd some logic more, if user has logged in then do not show login form and show a logout link instead.

Use <g:if>, <g:else> tag to test something.

Custom Login pageUsing <g:if> tag

<g:if test=”${boolean-logic}”>

<g:if test=”${5 == 6}”>

Example:

Custom Login page

Creating a link to logout action, you can use <g:link> as the following.

Custom Login pageAnyway, you can use HTML link tag - <a href=””> , instead. But I prefer to use <g:link> with the same reason of why I prefer to use <g:form>

<g:link controller=”” action=””>

<g:link action=””>

If you do not specify controller name, Grails will automatic search for controller like <g:form> behavior.

Check Point!Now you have a login page.

If you login succeed, You can see a logout link and the login form has thrown away.

If you login fail, the login form still be with you.

After you try to login, Whatever the result is fail or succeed have you got. You always see a flash message.

Add some more thingGrails has a default CSS and you can use its like the following.

Use build in CSS, class=”message”

Add some more thingAs you can see, the style has applied to flash.message value

Add some more thing

For another style, you can see in the /web-app/css/ directory

Other resource is in /web-app/images/ and web-app/js directory

Q/AHave any Question?

Thank You

Sorry about many wrong grammar in this slide :D