(22.11.30)Database : DB에서 데이터를 뽑아 MVC방식으로 웹프로그래밍 하기, 사원정보 수정하기

●●DB에서 데이터를 뽑아 웹프로그래밍 하기●●

 

 

이용자가 검색할 수 있는 기능중 '이름검색'과 '부서번호' 검색 둘 중 하나를 선택하여 

만약 이용자가 '부서번호'를 선택했다면 서버측에 부서번호 리스트를 요청하여 
응답(JSONArray 문자열)을 받아서 ' keyword' 박스에 보여준다. 그리고 검색을 하면 상세보기를 할 수 있게 한다.

 

 

Servlet

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/oracle")
public class OracleJDBCTest extends HttpServlet 
{
   
   protected void service(HttpServletRequest request, HttpServletResponse response) 
           throws ServletException, IOException 
   {
      String view = new EmpService(request, response).exec();
      if(view!=null) {
          getServletContext().getRequestDispatcher(view).forward(request, response);
      }
   }
}

서블릿은 요청만 받아 리퀘스트 객체와 리스폰스 객체 모두 포워드해준다.

 

 

EmpDAO.java

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
 
public class EmpDAO 
{    
    private Connection conn;
    private Statement stmt;
    private PreparedStatement pstmt;
    private ResultSet rs;
    
    private Connection getConn()
    {
        try {
            Class.forName("oracle.jdbc.OracleDriver");
            conn = DriverManager.getConnection(
                    "jdbc:oracle:thin:@localhost:1521:xe", "SCOTT", "TIGER");
            this.conn = conn;
            return conn;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    public List<EmpVO> getList()
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();  
            this.rs = stmt.executeQuery("SELECT * FROM emp");
            
            List<EmpVO> list = new ArrayList<>();
            while(rs.next())
            {
                int empno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(empno);
                emp.setEname(ename);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                
                list.add(emp);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public List<EmpVO> getEmpByDeptno(int deptno)
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp WHERE deptno=" + deptno;
            this.rs = stmt.executeQuery(sql);
            
            List<EmpVO> list = new ArrayList<>();
            while(rs.next())
            {
                int empno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(empno);
                emp.setEname(ename);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                
                list.add(emp);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public EmpVO getEmpByEmpno(int empno)
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp WHERE empno="+empno;
            this.rs = stmt.executeQuery(sql);
 
            if(rs.next())
            {
                int eno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                int deptno = rs.getInt("DEPTNO");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(eno);
                emp.setEname(ename);
                emp.setDeptno(deptno);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                return emp;
            }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    public EmpVO getEmpByEname(String ename)
    {
        getConn();
        
        try {
            //this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp WHERE ename=?";
            this.pstmt =conn.prepareStatement(sql);
            pstmt.setString(1, ename);
            //첫번째 ? 다음에 ename을 집어 넣어라. 
            //prepareStatement가 알아서 ' ' 를 넣어서 완성시켜준다.
            
            //this.rs = stmt.executeQuery(sql);
            this.rs = pstmt.executeQuery();
 
            if(rs.next())
            {
                int eno = rs.getInt("EMPNO");
                String insertename = rs.getString("ENAME");
                int deptno = rs.getInt("DEPTNO");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(eno);
                emp.setEname(insertename);
                emp.setDeptno(deptno);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                return emp;
            }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public List<Integer> getDeptnoList()
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT distinct deptno FROM emp ORDER BY deptno";
            this.rs = stmt.executeQuery(sql);
            
            List<Integer> list = new ArrayList<>();
            while(rs.next())
            {
                int deptno = rs.getInt("DEPTNO");
 
                list.add(deptno);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    private void closeAll()
    {
        try {
            if(rs!=null) rs.close();
            if(stmt!=null) stmt.close();
            if(pstmt!=null) pstmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

164~187 행 : 서버에서 부서 번호를 받아오는 메소드

list 객체를 만들어서 DB에서 꺼내온 부서번호를 모두 담아서 리턴해준다.

 

 

EmpService.java

import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
 
public class EmpService 
{
    private HttpServletRequest request;
    private HttpServletResponse response;
    private String viewPath = "/WEB-INF/jsp/emp";
    
    public EmpService(HttpServletRequest request, HttpServletResponse response) 
    {
        this.request = request;
        this.response = response;
    }
    public String exec() 
    {
        String cmd = request.getParameter("cmd");
        if(cmd==null || cmd.equals("list"))
        {
            List<EmpVO> list = getList();
            request.setAttribute("list", list);
            return viewPath + "/empList.jsp";
        }
        else if(cmd.equals("findByDeptno"))
        {
            int deptno = Integer.valueOf(request.getParameter("deptno"));
            List<EmpVO> list = getEmpByDeptno(deptno);
            request.setAttribute("list", list);
            return viewPath + "/empList.jsp";
        }
        else if(cmd.equals("getEmpByEmpno"))
        {
            int empno = Integer.valueOf(request.getParameter("empno"));
            EmpVO emp = getEmpByEmpno(empno);
            request.setAttribute("emp", emp);
            return viewPath + "/empDetail.jsp";
        }
        else if(cmd.equals("findByEname"))
        {
            String ename = request.getParameter("ename");
            EmpVO emp = getEmpByEname(ename);
            System.out.println("서비스사번:"+emp.getEmpno());
            request.setAttribute("emp", emp);
            return viewPath + "/empDetail.jsp";
            
        }
        else if(cmd.equals("getDeptList"))
        {
            String strDeptlist = getDeptList();
            try {
                PrintWriter out = response.getWriter();
                out.print(strDeptlist);
                out.flush();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
    
    public List<EmpVO> getList()
    {
        EmpDAO dao = new EmpDAO();
        List<EmpVO> list = dao.getList();
        return list;
    }
    public List<EmpVO> getEmpByDeptno(int deptno)
    {
        EmpDAO dao = new EmpDAO();
        List<EmpVO> list = dao.getEmpByDeptno(deptno);
        return list;
    }
    public EmpVO getEmpByEmpno(int empno)
    {
        EmpDAO dao = new EmpDAO();
        EmpVO emp = dao.getEmpByEmpno(empno);
        return emp;
    }
    public EmpVO getEmpByEname(String ename) {
        EmpDAO dao = new EmpDAO();
        EmpVO emp = dao.getEmpByEname(ename);
        return emp;    
    }
    public String getDeptList()
    {
        EmpDAO dao = new EmpDAO();
        List<Integer> list = dao.getDeptnoList();
        JSONArray jsArr = new JSONArray();
        for(int i=0;i<list.size();i++)
        {
            jsArr.add(list.get(i));
        }
        return jsArr.toJSONString();
    }
}

50~62행 : 부서번호를 가져오라는 cmd 명령어 로직, 96행에서 넘어온 문자열을 view를 담당하는 jsp로 보내준다.

87~97행 : EmpDAO 객체를 만들어서 그곳에서 리턴된 list객체를 얻고 그 리스트 객체를 jsonarray객체에 넣어서 문자열로 리턴한다.

 

 

empList.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사원목록 보기</title>
<style type="text/css">
   a { text-decoration: none; color:blue; }
   form { margin-top:1em;}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
   function onSelectChange()
   {
      $('#keyword').val('');
      var cat = $('select[name=category]').val();
      if(cat=='deptno')
      {
         $('input[name=cmd]').val('findByDeptno');//[]속성 셀렉터 name인 cmd인 인풋 태그
         $('input#keyword').prop('name','deptno'); //prop: 동적인 변경, 객체의 속성을 관리
         $.ajax({
            url:'oracle',
            method:'post',
            data:{"cmd":"getDeptList"},
            cache:false,
            dataType:'json',
            success:function(res){
               $('#deptList>option').remove();
               $('#keyword').attr('list','deptList'); 
                //attr: attribute는 태그의 속성이라는 뜻이다.
               for(var i=0;i<res.length;i++){
                  $('#deptList').append('<option>'+res[i]+'</option>');
               }
            },
            error:function(xhr,status,err){
               alert('에러:'+err);
            }
         });
      }
      else{
         $('#keyword').attr('list','');
         $('#deptList>option').remove();
         $('input[name=cmd]').val('findByEname');
      }
   }
</script>
</head>
<body>
<main>
<h3>사원정보 목록보기</h3>
<c:forEach var="emp" items="${list}">
   <div>
      ${emp.empno} 
      <a href="oracle?cmd=getEmpByEmpno&empno=${emp.empno}">${emp.ename}</a>
      ${emp.hiredate} 
      ${emp.sal} 
   </div>
</c:forEach>
<div>
   <form id="searchForm" action="oracle" method="get">
      <input type="hidden" name="cmd" value="findByEname">
      <select name="category" onchange="onSelectChange();">
         <option value="ename">사원이름</option>
         <option value="deptno">부서번호</option>
      </select>
      <input id="keyword" type="text" name="ename" list="deptList" autocomplete="off">
      <button type="submit">검색</button>
   </form>
</div>
</main>
<datalist id="deptList"></datalist>
</body>
</html>

attributes : 태그의 속성, html태그의 속성을 관리

properties : 객체의 속성, 동적으로 태그의 속성을 추출하거나 변경할 때 쓰인다.

 

empDetail.java

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사원정보 상세보기</title>
<style>
    main { width: fit-conent; padding:1em; }
    h3 { width:fit-content; text-align: center; }
    label { display:inline-block; margin-right:1em; width:3em; 
        background-color:rgb(200,255,200); text-align:right; padding:0.5em;
    }
    div { margin-top:0.5em; }
</style>
</head>
<body>
<main>
<h3>사원정보 상세보기</h3>
<div><label>사번</label> ${emp.empno}</div>
<div><label>이름</label> ${emp.ename}</div>
<div><label>부서</label> ${emp.deptno}</div>
<div><label>급여</label> ${emp.sal}</div>
<div><label>입사</label> ${emp.hiredate}</div>
</main>
</body>
</html>

 

실행결과 :

첫 실행 화면

 

SELET 태그로 사원이름과 부서번호를 고를 수 있다.

 

 

부서번호를 고르면 서버에서 부서번호를 받아와서 브라우저에서 보여준다

 

 

부서번호 20으로 검색한 결과

 

 

사원 이름으로 검색

---

●●사원정보 수정하기●●

 

 

사원정보 상세보기 페이지에서 [수정] 링크나 버튼을 추가하여 클릭시 현재 사원 정보가 수정폼에 표시되도록한다.

수정폼에서 [수정]을 클릭하면 오라클의 emp2 테이블에 변경사항이 적용되게 한다.

수정에 성공하면 해당 사원정보의 상세보기 페이지에 표시해준다.

수정 대상 항목 : 부서번호, 급여

 

 

EmpDAO.java

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
 
public class EmpDAO 
{    
    private Connection conn;
    private Statement stmt;
    private PreparedStatement pstmt;
    private ResultSet rs;
    
    private Connection getConn()
    {
        try {
            Class.forName("oracle.jdbc.OracleDriver");
            conn = DriverManager.getConnection(
                    "jdbc:oracle:thin:@localhost:1521:xe", "SCOTT", "TIGER");
            this.conn = conn;
            return conn;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    public List<EmpVO> getList()
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();  
            this.rs = stmt.executeQuery("SELECT * FROM emp2");
            
            List<EmpVO> list = new ArrayList<>();
            while(rs.next())
            {
                int empno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(empno);
                emp.setEname(ename);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                
                list.add(emp);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public List<EmpVO> getEmpByDeptno(int deptno)
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp2 WHERE deptno=" + deptno;
            this.rs = stmt.executeQuery(sql);
            
            List<EmpVO> list = new ArrayList<>();
            while(rs.next())
            {
                int empno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(empno);
                emp.setEname(ename);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                
                list.add(emp);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public EmpVO getEmpByEmpno(int empno)
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp2 WHERE empno="+empno;
            this.rs = stmt.executeQuery(sql);
 
            if(rs.next())
            {
                int eno = rs.getInt("EMPNO");
                String ename = rs.getString("ENAME");
                int deptno = rs.getInt("DEPTNO");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(eno);
                emp.setEname(ename);
                emp.setDeptno(deptno);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                return emp;
            }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    public EmpVO getEmpByEname(String ename)
    {
        getConn();
        
        try {
            //this.stmt = conn.createStatement();
            String sql = "SELECT * FROM emp2 WHERE ename=?";
            this.pstmt =conn.prepareStatement(sql);
            pstmt.setString(1, ename);//첫번째 ? 다음에 ename을 집어 넣어라. prepareStatement가 알아서 ' ' 를 넣어서 완성시켜준다.
            //this.rs = stmt.executeQuery(sql);
            this.rs = pstmt.executeQuery();
 
            if(rs.next())
            {
                int eno = rs.getInt("EMPNO");
                String insertename = rs.getString("ENAME");
                int deptno = rs.getInt("DEPTNO");
                java.sql.Date hiredate = rs.getDate("HIREDATE");
                float salary = rs.getFloat("SAL");
                
                EmpVO emp = new EmpVO();
                emp.setEmpno(eno);
                emp.setEname(insertename);
                emp.setDeptno(deptno);
                emp.setHiredate(hiredate);
                emp.setSal(salary);
                return emp;
            }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    public boolean updateEmp(EmpVO emp)
    {
        getConn();
        
        try {
            String sql = "UPDATE emp2 SET sal=?, deptno=? WHERE empno=?";
            this.pstmt = conn.prepareStatement(sql);
            pstmt.setFloat(1, emp.getSal());
            pstmt.setInt(2, emp.getDeptno());
            pstmt.setInt(3, emp.getEmpno());
 
            int rows = pstmt.executeUpdate();
 
            return rows>0 ? true : false;
 
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return false;
    }
    
    public List<Integer> getDeptnoList()
    {
        getConn();
        
        try {
            this.stmt = conn.createStatement();
            String sql = "SELECT distinct deptno FROM emp ORDER BY deptno";
            this.rs = stmt.executeQuery(sql);
            
            List<Integer> list = new ArrayList<>();
            while(rs.next())
            {
                int deptno = rs.getInt("DEPTNO");
 
                list.add(deptno);
            }
            return list;
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    private void closeAll()
    {
        try {
            if(rs!=null) rs.close();
            if(stmt!=null) stmt.close();
            if(pstmt!=null) pstmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

 

 

EmpService.java

import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
 
public class EmpService 
{
    private HttpServletRequest request;
    private HttpServletResponse response;
    private String viewPath = "/WEB-INF/jsp/emp";
    
    public EmpService(HttpServletRequest request, HttpServletResponse response) 
    {
        this.request = request;
        this.response = response;
    }
    
    public String exec() 
    {
        String cmd = request.getParameter("cmd");
        if(cmd==null || cmd.equals("list"))
        {
            List<EmpVO> list = getList();
            request.setAttribute("list", list);
            return viewPath + "/empList.jsp";
        }
        else if(cmd.equals("findByDeptno"))
        {
            int deptno = Integer.valueOf(request.getParameter("deptno"));
            List<EmpVO> list = getEmpByDeptno(deptno);
            request.setAttribute("list", list);
            return viewPath + "/empList.jsp";
        }
        else if(cmd.equals("getEmpByEmpno"))
        {
            int empno = Integer.valueOf(request.getParameter("empno"));
            EmpVO emp = getEmpByEmpno(empno);
            request.setAttribute("emp", emp);
            return viewPath + "/empDetail.jsp";
        }
        else if(cmd.equals("findByEname"))
        {
            String ename = request.getParameter("ename");
            EmpVO emp = getEmpByEname(ename);
            System.out.println("서비스사번:"+emp.getEmpno());
            request.setAttribute("emp", emp);
            return viewPath + "/empDetail.jsp";
            
        }
        else if(cmd.equals("editEmp"))
        {
            int empno = Integer.valueOf(request.getParameter("empno"));
            EmpVO emp = getEmpByEmpno(empno);
            request.setAttribute("emp", emp);
            return viewPath + "/empEdit.jsp";
        }
        else if(cmd.equals("updateEmp"))
        {
            boolean updated = updateResult();
            JSONObject jsObj = new JSONObject();
            Map<String, Object> map = new HashMap<>();
            map.put("updated", updated);
            sendJSONStr(map);
        
        }
        else if(cmd.equals("getDeptList"))
        {
            String strDeptlist = getDeptList();
            try {
                PrintWriter out = response.getWriter();
                out.print(strDeptlist);
                out.flush();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
 
    public List<EmpVO> getList()
    {
        EmpDAO dao = new EmpDAO();
        List<EmpVO> list = dao.getList();
        return list;
    }
    
    public List<EmpVO> getEmpByDeptno(int deptno)
    {
        EmpDAO dao = new EmpDAO();
        List<EmpVO> list = dao.getEmpByDeptno(deptno);
        return list;
    }
    
    public EmpVO getEmpByEmpno(int empno)
    {
        EmpDAO dao = new EmpDAO();
        EmpVO emp = dao.getEmpByEmpno(empno);
        return emp;
    }
    public EmpVO getEmpByEname(String ename) {
        EmpDAO dao = new EmpDAO();
        EmpVO emp = dao.getEmpByEname(ename);
        return emp;    
    }
    public boolean updateResult() {
        String sEmpno = request.getParameter("empno");
        String sSal = request.getParameter("sal");
        String sDeptno = request.getParameter("deptno");
        
        EmpVO emp = new EmpVO();
        emp.setEmpno(Integer.parseInt(sEmpno));
        emp.setSal(Float.parseFloat(sSal));
        emp.setDeptno(Integer.parseInt(sDeptno));
        
        EmpDAO dao = new EmpDAO();
        return dao.updateEmp(emp);
    }
    public String getDeptList()
    {
        EmpDAO dao = new EmpDAO();
        List<Integer> list = dao.getDeptnoList();
        JSONArray jsArr = new JSONArray();
        for(int i=0;i<list.size();i++)
        {
            jsArr.add(list.get(i));
        }
        return jsArr.toJSONString();
    }
    public void sendJSONStr(Map<String, Object> map){
        JSONObject jsobj = new JSONObject(map);
        String jsStr = jsobj.toJSONString();
        
        try {
            PrintWriter out = response.getWriter();
            out.print(jsStr);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

 

 

empDetail.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사원정보 상세보기</title>
<style>
    main { width: fit-conent; padding:1em; }
    h3 { width:fit-content; text-align: center; }
    label { display:inline-block; margin-right:1em; width:3em; 
        background-color:rgb(200,255,200); text-align:right; padding:0.5em;
    }
    div { margin-top:0.5em; }
</style>
</head>
<body>
<main>
<h3>사원정보 상세보기</h3>
<div><label>사번</label> ${emp.empno}</div>
<div><label>이름</label> ${emp.ename}</div>
<div><label>부서</label> ${emp.deptno}</div>
<div><label>급여</label> ${emp.sal}</div>
<div><label>입사</label> ${emp.hiredate}</div>
<a href="oracle?cmd=editEmp&empno=${emp.empno}">[수정]</a>
</main>
</body>
</html>

 

 

empEdit.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사원정보 수정하기</title>
<style>
    main { width: fit-conent; padding:1em; }
    h3 { width:fit-content; text-align: center; }
    label { display:inline-block; margin-right:1em; width:3em; 
        background-color:rgb(200,255,200); text-align:right; padding:0.5em;
    }
    div { margin-top:0.5em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
function updateEmp()
{
    var obj = $('#updateForm').serialize();
    $.ajax({
        url : 'oracle',
        method: 'post',
        data: obj,
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.updated ? '수정 성공' : '수정 실패');
            location.href="oracle?cmd=getEmpByEmpno&empno=${emp.empno}";
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    return false;
}
</script>
</head>
<body>
<main>
<h3>사원정보 상세보기</h3>
<form id="updateForm" onsubmit="return updateEmp();">
<input type="hidden" name="cmd" value="updateEmp">
<input type="hidden" name="empno" value="${emp.empno}">
<div><label>사번</label> ${emp.empno}</div>
<div><label>이름</label> ${emp.ename}</div>
<div><label for="deptno">부서</label> 
    <input type="text" id="deptno" name="deptno" value="${emp.deptno}" list="deptList">
</div>
<div><label>급여</label> <input id="sal" type="number" name="sal" value="${emp.sal }"></div>
<div><label>입사</label> ${emp.hiredate}</div>
<div class="btn">
        <button type="reset">취소</button>
        <button type="submit">저장</button>
    </div>
</form>
</main>
</body>
</html>

 

 

 

실행 결과 :