Thursday, January 22, 2015

Creating a simple login form using HTML and JSP with error handling

Here in this tutorial a simple login form is created for the user to enter the username and the password to login into the web application.

This is the HTML part of the web application, here the interface of the application is created using HTML forms. The code and the screen shot is provided below.

HTML




<<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
       
        <form name="f1" action="authenticate.jsp">
            <marquee>Online Transactions</marquee>
            <br><br>
            <table cellspacing="5" cellpading="5" bgcolor="#959999" colspan="2" rowspan="2" align="center">
                <tr>
                    <td> bank customer authentication form </td>
                </tr>
                <tr>
                   
                    <td>enter customer ID:</td>
                    <td><input type="text" name="uname"></td>
                   
                </tr>
                   
                <tr>
                    <td> enter password:</td>
                    <td><input type="password" name="password"></td>
                   
                </tr>
            </table>
            <br>
            <table align="center">
                <tr>
                    <td><input type="submit" value="login"></td>
                    <td><input type="reset" value="cancel"></td>
                </tr>
            </table>   
        </form>
    </body>
</html>

Authenticate.jsp

The below code i the jsp code to check the password and the username which is inserted to the html form. The code is provided below.





<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
       
        <font face ="verdana">
                                                <%
                                                                String user=request.getParameter("uname");
                                                                int customerID=Integer.parseInt(user);
                                                                String pass=request.getParameter("password");
                                                                if( customerID== 1111 && pass.equals("Franklin"))
                                                                {
                                                                                out.println("Welcome to Online Banking System");
                                                %>
                                                <br><br>
                                                <%
                                                                                out.println("Login Successful");
                                                                }
                                                                else
                                                                {
                                                                                out.println("Login Unsuccessful");
                                                                }
                                                %>
                                </font>
           
       
    </body>
</html>


Error.jsp
This jsp code is used to show any error generated due to any exception.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
       
        <h3>An exception has occured</h3>
        <table>
            <tr>
                <td>exception class:</td>
                <td><%= exception.getMessage() %></td>
               
            </tr>
            <tr>
               
                <td>Message:</td>
                <td><%= exception.getMessage() %></td>
            </tr>
           
           
        </table>
       
            <br>
            to go to login page again click login page button
            <form name="h2" action="mainNew.html">
                <input type="submit" name="button1" value="loging page">
            </form>
                      
           
    </body>
</html>


No comments:

Post a Comment