Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!
07 Aug 2016

Part 3: j2ee tutorial for beginners (JSP)

As we had seen earlier in servlet, it is really difficult to create nice looking UI using servlet if we have to type in all html in java code. For this JSP were created in J2EE, these are pages with JSP extension which gets compiled to servlets dynamically by the server to look somewhat similar to our servlets.

For this post we would be using the finished app from last article, if you do not have the app handy, you can download it here or clone it from github and switch to servlets branch.

Lets go ahead and create our very first JSP. If you are using eclipse you can use the wizard to create a jsp like shown here

eclipse create jsp

Please rememer that JSP goes into webapp directory and not in java source directory. Once we have created our login.jsp, lets try to fill this with our login form which we created in last post.

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <form action="/hello" method="post">
            <input type="text" name="username" placeholder="Username"><br><br>
            <input type="password" name="password" placeholder="Password"><br><br>
            <input type="submit" value="Login">
        </form>
    </body>
    </html>

JSP can be accessed directly without adding entries to web.xml, so if we access http://localhost:8080/login.jsp, we should see our login form.

Now we can safely delete the doGet method from our servlet and every thing should work just fine. We still have some text hard coded in servlet on response to login, which may work for now but in real life we would render a nice looking home page or dashboard on successful login. So lets create our home.jsp which would be our placeholder for nice looking dashboard. You can create home.jsp in webapp folder and place following content there.

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        Welcome <% out.println(request.getAttribute("username")); %>
    </body>
    </html>

We need to modify our servlet to pass the username to the JSP from servlet.

    public class DemoServlet extends HttpServlet {

        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            if(username.equals("admin") && password.equals("admin")){
                req.setAttribute("username", "admin");
                req.getRequestDispatcher("home.jsp").forward(req, resp);
            }
            else
            {
                resp.sendRedirect("login.jsp");
            }
        }

    }

Please note the use of requestDispatcher and sendRedirect to navigate between views.

At this stage, you may ask if JSP compiles to servlet, do we really need our DemoServlet or can do without it. Actually we can have demo.jsp and have the form submit to demo.jsp, which would eventually compile to servlet but by doing that we would have the similar problem which we had with servlets, mixing java code and html.

To keep the view and code seperate, we use JSP -> Servlet -> JSP flow. Where we have the view information in JSP and logic in Servlet, which is the foundation of MVC (Model View Control), in our example our servlet is doing the role of controller and JSP are view, we still do not have model for which we are using hard coded logic. In the next article we would add our Model aka Database to this example to complete our MVC.


Stats:
135 views
Scaffold your ideas into application
Get your free alpha access now.
Only 445 left, Hurry!

Part 4: j2ee tutorial for beginners (JDBC)

JDBC is the foundation of persistence in Java. This tutorial explore

j2ee tutorial for beginners (Servlets)

Servlets are main workhorse for J2EE web application.

j2ee tutorial for beginners ( What is a server?)

Getting started with J2EE: What is a Server?

Comments:

Leave your comments