3. 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
4. Prepare Artifact
Create a file named “index.gsp” in
grails/views/user/ Directory
8. 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”/>
9. Custom Login Page
<g:form action=”login”/>
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.
10. Custom Login Page
<g:form controller=”user” action=”login”/>
Anyway, You can add the specific controller
to which you want to sent request.
11. Start Grails Application by using this command
> grails run-app
Go to http://localhost:8080/simple-login/user
12. 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.
13. What is the action specified by you?
Back to the login.gsp you will see this...
14. 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.
16. 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
17. 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.
18. Custom Controller
all Controller is in
/grails-app/controllers/ directory
22. Custom Controller
By 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!
23. 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.
24. Custom Controller
Go to http://localhost:8080/simple-login/user/
and Click the Login Button again.
26. Custom Controller
You 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
28. Validation
Add 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...
29. 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.
30. Validation
Don’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.
31. Using flash
use flash variable to store some message as
the following code and redirect to the login
page (index.gsp) .
32. 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”
33. Using flash
Add ${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}
34. Using flash
Testing, Go to login page and try to login
again.
After try to login, you will see value in
flash.message sent from login action.
35. Keep Status
You can use “session” to keep information
about login status.
Keep some info by
using session variable
36. Handle Logout
Create 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
37. Custom Login page
Add 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.
38. Custom Login page
Using <g:if> tag
<g:if test=”${boolean-logic}”>
Example:
<g:if test=”${5 == 6}”>
40. Custom Login page
Anyway, 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=””>
If you do not specify controller name, Grails will
automatic search for controller like <g:form> behavior.
<g:link action=””>
41. 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.
42. Add some more thing
Grails has a default CSS and you can use its
like the following.
Use build in CSS,
class=”message”
43. Add some more thing
As you can see, the style has applied to
flash.message value
44. 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
