BACKMVC Architecture
MVC Architecture JSP MVC Architecture Pre-Requisites: Pre-requisites: · CORE JAVA · CLIENT – SERVER ARCHITECTURE · SERVLETS · JSP/ HTML · JDBC · DATABASE – MySQL · XML · JAR FILES · APACHE · ECLIPSE MVC: · M stands for Model · V stands for View · C stands for controller. · MVC separates the presentation from the business logic. · The Controller is responsible for calling the Model and sending data to View. · The Model is used to transfer the data which is coming from frontend and to store in Database. · Model not aware that it is used by which web application. · View -> Controller -> Model -> Database Introduction: · Data flows starts from the view layer. · request is raised by view and processed in controller layer. · Data will be sent to model layer. · For inserting data using DAO layer. · getting back to the controller with success or failure message. · based on success, new view will be displayed. · In case of failure, same view (requested page) will be displayed with error message. MVA Advantages: · Easy to maintain. · Easy to extend. · Easy to test. · control is centralized. Model Layer: · Data layer includes business logic. · Includes application data. · Class with data, getters, and setters and to connect the database. View Layer · Presentation layer. · It may be HTML, JSP, Angular etc. · Also called application UI. · Gets the data from controller and sends the data to controller. Controller Layer · Controls between View and Model. · Gets the data from view and sends the data to view which is received from database. 1. Deployment Descriptor – web.xml File: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="https://jakarta.ee/xml/ns/jakartaee" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd" id="WebApp_ID" version="6.0"> <display-name>Project Vishwa</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.jsp</welcome-file> <welcome-file>default.htm</welcome-file> </welcome-file-list> </web-app> 2. Servlet invocation through @WebServlet annotation · Annotation denotes the metadata. · Deployment descriptor (web.xml file) is not needed when we are working with annotation. · @WebServlet annotation is used to map the servlet with the specified name. · This annotation is belongs to import javax.servlet.annotation.WebServlet; Example: @WebServlet("/register") public class Registration extends HttpServlet { ….. } Note: · Web.xml file welcome-file-list element defines a list of welcome files. · This element consists of several welcome-file elements for defining the welcome files. · Welcome file is called implicitly by the server. · Java web applications use a deployment descriptor file which web.xml. · web.xml file determines that how html/jsp page URLs are mapped with servlets. · web.xml resides in the application WAR under the WEB-INF/ directory. · web.xml is part of the servlet standard for web applications. · Remove the unnecessary welcome-files and create index.html or index.jsp page as a start-up page. Dynamic Web Application: • Select File -> New -> Dynamic Web Application. · Provide the Project Name and click on next Note: In case if dynamic web project is not visible in File menu list, then click on other and select below option from the dialog box: · Click on next (java files will be stored in src and built class will be generated in build/classes folder) · Check the option generate web.xml deployment descriptor option and click on Finish · Project will be created. Note: Create all html and jsp files in webapp and java files in src (create all java classes in relevant packages) View Layer: index.jsp <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <form name="registration" method="post" action="register"> <label>User Name : </label> <input type="text" name="username" placeholder="USER NAME" id="username"> <button type="submit"> SUBMIT </button> </form> </body> </html> web.xml: [in case, if you work with annotation this configuration mapping is not needed] <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> · Add the following mapping for each servlet with action specified in the html/jsp page. · Specify the controller/ servlet file path included with absolute package structure. · url-pattern should be the action specified in the html/jsp page. <servlet> <servlet-name>register</servlet-name> <servlet-class>com.vcube.controller.RegisterExample </servlet-class> </servlet> <servlet-mapping> <servlet-name>register</servlet-name> <url-pattern>/register</url-pattern> </servlet-mapping> Create a servlet using http: public class Registration extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ….. } } Note: import the necessary import classes from: import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; Controller doPost() Code: Response Type (MIME) in Servlet: response.setContentType("text/html"); Getting the data from view to controller: String fname = request.getParameter("firstname"); Creating the data and setting the data: Student s = new Student(); s.setFirstname(fname); Passing the Model to DAO layer: StudentDAO sd = new StudentDAO(); String status = sd.insertStudent(s); Model Class: public class Student { private String firstname; //getters and setters here… } DAO Layer: public class StudentDAO { ….. } Connecting to Database and performing operation: DAO code: Class.forName("com.mysql.cj.jdbc.Driver"); Connection con DriverManager.getConnection ("jdbc:mysql://localhost:3306/vishwa","root","root"); con = DBConnection.myConnection(); PreparedStatement ps = con.prepareStatement("insert into student values(?)"); ps.setString(1, s.getFirstname()); int n = ps.executeUpdate(); Note: In above code, there is possibility of occurrence of exception, so we need handle the exception through try/catch or throws. Setting status based on DB Operation: if(n>0){ System.out.println("Data Inserted"); status="SUCCESS"; } else{ System.out.println("Something went wrong!!!"); status="failure"; } Redirecting to another view page from the controller: if(status.equals("SUCCESS")){ RequestDispatcher rd=request.getRequestDispatcher("/home.jsp"); request.setAttribute("firstname", fname); rd.include(request, response); } else { RequestDispatcher rd=request.getRequestDispatcher("/index.jsp"); request.setAttribute("error", "Something went wrong!!!"); rd.include(request, response); } Redirected view page: <p> Welcome to: <%= request.getAttribute("firstname")%> </p> Run the application: 1. To run this MVC Application, we should add apache tomcat server in eclipse. 2. Use the added server, for executing the application in browser. 3. Pass the values through view page, and values will go to controller. 4. Controller will be setting the data to model. 5. Controller will invoke the model to DAO layer to insert the data in the database. 6. Database table name is given as "vishwa" in the DAO layer which is created in MySQL which listening port number is 3306. 7. Table in the vishwa database is student. 8. Create the table with the columns which we are trying to send from view layer. Student Application: Create Database: CREATE DATABASE 'mvc'; USE mvc; CREATE TABLE `students` ( `id` int NOT NULL AUTO_INCREMENT, `firstname` varchar(120) NOT NULL, `lastname` varchar(120) NOT NULL, `email` varchar(120) NOT NULL, `password` varchar(15) NOT NULL, PRIMARY KEY (`id`) ) ; StudentModel class: Note: Make sure that StudentModel class is created in the com.example.model package. package com.example.model; StudentModel class data: public class StudentModel { private int id; private String firstname; private String lastname; private String email; private String password; } StudentModel class getters and setters: public int getId() { return id; } public void setId(int id) { this.id = id; } public String getFirstname() { return firstname; } public void setFirstname(String firstname) { this.firstname = firstname; } public String getLastname() { return lastname; } public void setLastname(String lastname) { this.lastname = lastname; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } StudentModel class toString() overridden method to print object in string format: public String toString() { return id + ":" + firstname + ":" + lastname + ":" + email; } StudentModel class constructors: public StudentModel() {} public StudentModel(String firstname, String lastname, String email, String password) { this.firstname = firstname; this.lastname = lastname; this.email = email; this.password = password; } public StudentModel(int id, String firstname, String lastname, String email, String password) { this.id = id; this.firstname = firstname; this.lastname = lastname; this.email = email; this.password = password; } index.jsp index page jsp tag for custom taglib directives and page directives <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> Index page head tags: <title>Student Application</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> Index page head – style tag code: <style> ul li a{ color: white; font-size: 18px; font-weight: bold; margin: 10px 10px 10px 10px; } </style> Index page navbar code: <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="#">STUDENT APPLICATION</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="<%=request.getContextPath()%>/" class="btn btn-secondary"> HOME</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/new" class="btn btn-secondary">Add New Student</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/list" class="btn btn-secondary"> STUDENTS LIST</a> </li> </ul> </div> </nav> Index page Carousel Code: <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./images/stud1.jpeg" alt="STUDENT 1" width="100%" height="100%"> </div> <div class="carousel-item"> <img src="./images/stud2.jpeg" alt="STUDENT 2" width="100%" height="100%"> </div> <div class="carousel-item"> <img src="./images/stud3.jpeg" alt="STUDENT 3" width="100%" height="100%"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </div> </div> Index page Footer code <div class="jumbotron text-center" style="margin-bottom:0"> <p>STUDENT APPLICATION</p> </div> web.xml code: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>Student Application</display-name> <error-page> <exception-type>java.lang.Exception</exception-type> <location>/Error.jsp</location> </error-page> </web-app> Controller Code: Note: Make sure that RegisterController controller is created in the com.example.controller package. package com.example.controller; RegisterController class imports: import jakarta.servlet.RequestDispatcher; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; import java.sql.SQLException; import java.util.List; import com.example.dao.StudentDAO; import com.example.model.StudentModel; RegisterController class annotation and extending HttpServlet: @WebServlet("/") public class RegisterController extends HttpServlet { private static final long serialVersionUID = 1L; } RegisterController class init and doPost and doGet methods: //declaring a object for StudentDAO class private StudentDAO studentDAO; //init method to create object and invoking the constructor public void init() { studentDAO = new StudentDAO(); } doPost method to invoke doGet method which focus on request.getServletPath() protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } doGet method code: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String action = request.getServletPath(); } Include the following code in doGet method: try { switch (action) { case "/new": showNewForm(request, response); break; case "/insert": insertStudent(request, response); break; case "/delete": deleteStudent(request, response); break; case "/edit": showEditForm(request, response); break; case "/update": updateStudent(request, response); break; case "/list": listStudent(request, response); break; default: indexStudent(request, response); break; } } catch (SQLException ex) { throw new ServletException(ex); } Corresponding relevant methods to perform various operations: //To display index page when the project starts execution: private void indexStudent(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException, ServletException { RequestDispatcher dispatcher = request.getRequestDispatcher("index.jsp"); dispatcher.forward(request, response); } //displaying new form for adding a new student private void showNewForm(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher dispatcher = request.getRequestDispatcher("student-form.jsp"); dispatcher.forward(request, response); } // insert student logic to redirect to DAO file private void insertStudent(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException { String firstname = request.getParameter("firstname"); String email = request.getParameter("email"); String lastname = request.getParameter("lastname"); String password = request.getParameter("password"); StudentModel newStudent = new StudentModel(firstname, lastname, email, password); studentDAO.insertStudent(newStudent); response.sendRedirect("list"); } // redirecting student edit form private void showEditForm(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException { int id = Integer.parseInt(request.getParameter("id")); System.out.println("edit value:"+id); StudentModel existingStudent = studentDAO.selectStudent(id); RequestDispatcher dispatcher = request.getRequestDispatcher("student-form.jsp"); request.setAttribute("student", existingStudent); dispatcher.forward(request, response); } // update student details private void updateStudent(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException { int id = Integer.parseInt(request.getParameter("id")); String firstname = request.getParameter("firstname"); String lastname = request.getParameter("lastname"); String email = request.getParameter("email"); String password = request.getParameter("password"); System.out.println(id+firstname+lastname+email+password); StudentModel student = new StudentModel(id, firstname, lastname, email, password); studentDAO.updateStudent(student); response.sendRedirect("list"); } // displaying list of students private void listStudent(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException, ServletException { List<StudentModel> listStudent = studentDAO.selectAllStudents(); request.setAttribute("listStudent", listStudent); RequestDispatcher dispatcher = request.getRequestDispatcher("list-student.jsp"); dispatcher.forward(request, response); } // deleting a student based on id private void deleteStudent(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException { int id = Integer.parseInt(request.getParameter("id")); studentDAO.deleteStudent(id); response.sendRedirect("list"); } DAO class imports statements Note: Make sure that DAO class is created in the com.example.dao package. package com.example.dao; StudentDAO class imports: import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.example.model.StudentModel; import com.example.util.DBConnection; StudentDAO class public class StudentDAO { adding various String variables to perform various query operations on Database private static final String insert_student = "INSERT INTO students" + " (firstname, lastname, email, password) VALUES " + " (?, ?, ?, ?);"; private static final String select_student_id = "select id,firstname, lastname,email,password from students where id =?"; private static final String select_students = "select * from students"; private static final String delete_student_id = "delete from students where id = ?;"; private static final String update_student_id = "update students set firstname = ?,lastname = ?,email= ?, password=? where id = ?;"; } Add the following code in StudentDAO //Constructor of the DAO class public StudentDAO() {} Connection con; Inserting student method code: public void insertStudent(StudentModel student) throws SQLException { try { try { //reflection api and for loading the driver Class.forName("com.mysql.cj.jdbc.Driver"); // connection establishment with credentials con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc?useSSL=false", "root", "root"); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } //prepared statement to avoid SQL injection PreparedStatement preparedStatement = con.prepareStatement(insert_student); preparedStatement.setString(1, student.getFirstname()); preparedStatement.setString(2, student.getLastname()); preparedStatement.setString(3, student.getEmail()); preparedStatement.setString(4, student.getPassword()); System.out.println(preparedStatement); preparedStatement.executeUpdate(); } catch (SQLException e) { printSQLException(e); } } Select student based on id - method code: public StudentModel selectStudent(int id) { StudentModel student = null; try { try { //reflection api and loading the driver Class.forName("com.mysql.cj.jdbc.Driver"); //connection establishment with credentials con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc?useSSL=false", "root", "root"); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } PreparedStatement preparedStatement = con.prepareStatement(select_student_id); preparedStatement.setInt(1, id); System.out.println(preparedStatement); ResultSet rs = preparedStatement.executeQuery(); while (rs.next()) { id = rs.getInt("id"); String firstname = rs.getString("firstname"); String lastname = rs.getString("lastname"); String email = rs.getString("email"); String password = rs.getString("password"); student = new StudentModel(id, firstname, lastname, email, password); } } catch (SQLException e) { printSQLException(e); } return student; } Selecting all the student details method code: public List<StudentModel> selectAllStudents() { List<StudentModel> students = new ArrayList<StudentModel>(); try { try { Class.forName("com.mysql.cj.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc?useSSL=false", "root", "root"); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } PreparedStatement preparedStatement = con.prepareStatement(select_students); System.out.println(preparedStatement); ResultSet rs = preparedStatement.executeQuery(); while (rs.next()) { int id = rs.getInt("id"); String firstname = rs.getString("firstname"); String lastname = rs.getString("lastname"); String email = rs.getString("email"); String password = rs.getString("password"); students.add(new StudentModel(id, firstname, lastname, email, password)); } } catch (SQLException e) { printSQLException(e); } return students; } Deleting the student method code (based on id): public boolean deleteStudent(int id) throws SQLException { boolean rowDeleted = false; try { try { Class.forName("com.mysql.cj.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc?useSSL=false", "root", "root"); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } PreparedStatement statement = con.prepareStatement(delete_student_id); statement.setInt(1, id); rowDeleted = statement.executeUpdate() > 0; } catch (SQLException e) { printSQLException(e); } return rowDeleted; } public boolean updateStudent(StudentModel student) throws SQLException { boolean rowUpdated = false; try { try { Class.forName("com.mysql.cj.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc?useSSL=false", "root", "root"); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } PreparedStatement statement = con.prepareStatement(update_student_id); statement.setString(1, student.getFirstname()); statement.setString(2, student.getLastname()); statement.setString(3, student.getEmail()); statement.setString(4, student.getPassword()); statement.setInt(5, student.getId()); rowUpdated = statement.executeUpdate() > 0; } catch (SQLException e) { printSQLException(e); } return rowUpdated; } Printing exception: private void printSQLException(SQLException ex) { for (Throwable e: ex) { if (e instanceof SQLException) { e.printStackTrace(System.err); System.err.println("SQLState: " + ((SQLException) e).getSQLState()); System.err.println("Error Code: " + ((SQLException) e).getErrorCode()); System.err.println("Message: " + e.getMessage()); Throwable t = ex.getCause(); while (t != null) { System.out.println("Cause: " + t); t = t.getCause(); } } } } list-student.jsp page code: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <title>Student Application</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> ul li a{ color: white; font-size: 18px; font-weight: bold; margin: 10px 10px 10px 10px; } </style> </head> <body> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="#">STUDENT APPLICATION</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="<%=request.getContextPath()%>/" class="btn btn-secondary"> HOME</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/new" class="btn btn-secondary">Add New Student</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/list" class="btn btn-secondary"> STUDENTS LIST</a> </li> </ul> </div> </nav> <div class="container" style="margin-top:30px"> <div class="row"> <div class="col-sm-2 bg-light"> </div> <div class="col-sm-8"> <h3 class="text-center">Students List</h3> <hr> <div class="container text-left"> <!-- <a href="<%=request.getContextPath()%>/new" class="btn btn-success">Add New Student</a>--> </div> <br> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Password</th> <th>Actions</th> </tr> </thead> <tbody> <!-- for (Todo todo: todos) { --> <c:forEach var="student" items="${listStudent}"> <tr> <td> <c:out value="${student.id}" /> </td> <td> <c:out value="${student.firstname}" /> </td> <td> <c:out value="${student.lastname}" /> </td> <td> <c:out value="${student.email}" /> </td> <td> <c:out value="${student.password}" /> </td> <td><a href="edit?id=<c:out value='${student.id}' />">Edit</a> <a href="delete?id=<c:out value='${student.id}' />">Delete</a></td> </tr> </c:forEach> <!-- } --> </tbody> </table> </div> <div class="col-sm-2 bg-light"> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>STUDENT APPLICATION</p> </div> </body> </html> student-list.jsp page code: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <title>Student Application</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <style> ul li a{ color: white; font-size: 18px; font-weight: bold; margin: 10px 10px 10px 10px; } </style> </head> <body> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="#">STUDENT APPLICATION</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="<%=request.getContextPath()%>/" class="btn btn-secondary"> HOME</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/new" class="btn btn-secondary">Add New Student</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/list" class="btn btn-secondary"> STUDENTS LIST</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-2 bg-light"> </div> <div class="col-sm-8"> <div class="card"> <div class="card-body"> <c:if test="${student != null}"> <form action="update" method="post"> </c:if> <c:if test="${student == null}"> <form action="insert" method="post"> </c:if> <caption> <h2> <c:if test="${student != null}"> Edit Student </c:if> <c:if test="${student == null}"> Add New Student </c:if> </h2> </caption> <c:if test="${student != null}"> <input type="hidden" name="id" value="<c:out value='${student.id}' />" /> </c:if> <fieldset class="form-group"> <label>Student First Name</label> <input type="text" value="<c:out value='${student.firstname}' />" class="form-control" name="firstname" required="required"> </fieldset> <fieldset class="form-group"> <label>Student Last Name</label> <input type="text" value="<c:out value='${student.lastname}' />" class="form-control" name="lastname" required="required"> </fieldset> <fieldset class="form-group"> <label>Student Email</label> <input type="text" value="<c:out value='${student.email}' />" class="form-control" name="email" required="required"> </fieldset> <fieldset class="form-group"> <label>Password</label> <input type="text" value="<c:out value='${student.password}' />" class="form-control" name="password" required="required"> </fieldset> <button type="submit" class="btn btn-success">Save</button> </form> </div> </div> </div> <div class="col-sm-2 bg-light"> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>STUDENT APPLICATION</p> </div> </body> </html> Error.jsp page code: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isErrorPage="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Error</title> </head> <body> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="#">STUDENT APPLICATION</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="<%=request.getContextPath()%>/" class="btn btn-secondary"> HOME</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/new" class="btn btn-secondary">Add New Student</a> </li> <li class="nav-item"> <a href="<%=request.getContextPath()%>/list" class="btn btn-secondary">Add STUDENTS LIST</a> </li> </ul> </div> </nav> <div class="jumbotron text-center" style="margin-bottom:0"> <p>STUDENT APPLICATION</p> <center> <h1>Error</h1> <h2><%=exception.getMessage() %><br/> </h2> </center> </div> </body> </html> BACK