A sentimental robot

간단한 웹 애플리케이션 [MODEL 1] 본문

Web

간단한 웹 애플리케이션 [MODEL 1]

GOD03219 2018. 11. 14. 12:05

MODEL 1

 

Web browser의 요청(request)을 VIEW (JSP) 에서 단독으로 처리

 

즉, JSP에서 VIEW와 Controller 역할을 같이 수행한다.

JSP 페이지에서 직접 Model에 접근하여 데이터를 처리한다.

Controller (Servlet) 과 Model (JavaBean) 을 만들어 분리하지 않은 방식인 모델 1 방식이다. 

 

 

 

 

Login.jsp

로그인 페이지

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
<center>
 
<h1> Login </h1>
<hr>
<form action="loginProcess.jsp" method="post">
<table>
<tr><td align=center> <b>ID </td> <td><input type="text" name="id"/></td></tr>
<tr><td align=center> <b>Pass </td> <td><input type="password" name="pass"/></td></tr>
<tr><td colspan="2" align=center><input type="submit" value="login"/> <input type="button" value="join" onclick="window.location='joinForm.jsp'"/> </td></tr>
</table>
 
</form>
 
 
</center>
</body>
</html>
 cs

 

 

joinForm.jsp

회원가입 페이지

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<meta charset="utf-8">
<html>
 
<head>
 
  <title>회원가입</title>
 
</head>
 
<body>
 
  <br>
 
  <form action="joinProcess.jsp" method="post" onsubmit="return validate()">
    <table border="1" cellspacing="0.5" align="center">
      <tr>
        <td colspan="2" bgcolor="#F5A9D0" align="center"> <b> 회원 기본 정보 </td>
      </tr>
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 아이디: </td>
        <td> <input type="text" name="id" id="id" size="12">
          4~12자리의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
      <tr>
        <td bgcolor="#BDBDBD" align="center"><b> 비밀번호:</td>
        <td> <input type="password" name="pass" id="pass" size="12">
          4~12자리의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 비밀번호확인: </b></td>
        <td> <input type="password" name="passcheck" id="passcheck" size="12"> </td>
      </tr>
 
      <tr>
        <td bgcolor="#BDBDBD" align="center"> <b>메일주소:</td>
        <td> <input type="text" name="email" id="email" size="20">
          예) id@domain.com
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b>이름:</td>
        <td> <input type="text" name="name" id="name" size="20"> </td>
      </tr>
 
      <tr>
        <td colspan="2" bgcolor="#F5A9D0" align="center"><b>개인 신상 정보 </td>
      </tr>
      <tr>
        <td bgcolor="#D8D8D8" align="center"><b>주소:</td>
        <td>
 
          <input type="text" name="sample4_postcode" id="sample4_postcode" placeholder="우편번호" value="">
          <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
          <input type="text" name="sample4_roadAddress" id="sample4_roadAddress" placeholder="도로명주소" value="">
          <input type="text" name="sample4_jibunAddress" id="sample4_jibunAddress" placeholder="지번주소" value=""><br>
          <input type="text" name="sample4_detailAddress" id="sample4_detailAddress" placeholder="상세주소" value="">
          <span id="guide" style="color:#999" ></span>
 
        </td>
      </tr>
      <tr>
        <td bgcolor="#BDBDBD" align="center"> <b>주민등록번호:</td>
        <td> <input type="text" name="citizenNum1" id="citizenNum1" onkeypress="birth()" size="20">
          예)1234561234567
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"><b> 생일:</td>
        <td> <input type="text" name="year1" id="year1" size="4"> 년
          <select name="month1" id="month1">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select> 월
          <select name="date" id="date">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
 
          </select> 일
 
        </td>
      </tr>
      <tr>
        <td bgcolor="#BDBDBD" align="center"><b> 관심분야:</td>
        <td>
          <input type="checkbox" name="checkbox" id="checkbox" value="컴퓨터"> 컴퓨터
          <input type="checkbox" name="checkbox" id="checkbox" value="인터넷"> 인터넷
          <input type="checkbox" name="checkbox" id="checkbox" value="여행"> 여행
          <input type="checkbox" name="checkbox" id="checkbox" value="영화감상">영화감상
          <input type="checkbox" name="checkbox" id="checkbox" value="음악감상"> 음악감상</td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 자기소개:</td>
        <td> <textarea rows=5 cols=60 size=100 name="self2"></textarea> </td>
      </tr>
 
 
    </table>
    <br><br>
 
    <div align="center">
      <input type="submit" value="확인">
      <INPUT TYPE="RESET" value="다시 입력">
    </div>
 
  </form>
  <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
  <script src="signup.js" charset='utf-8'></script>
 
</body>
 
</html>
 
 cs

 

signup.js

회원가입 유효성 검사

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
 
function validate(){
 
  var check=/^[a-zA-Z0-9]{4,12}$/; // 아이디, 비밀번호, 비밀번호 확인 유효성검사
  var emailCheck = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //메일주소 유효성검사
 
  var id=document.getElementById("id");
  var pass=document.getElementById("pass");
  var passcheck=document.getElementById("passcheck");
  var email = document.getElementById("email");
  var name=document.getElementById("name");
  var citizenNum = document.getElementById("citizenNum1");
  var cnFormulation =0;
  var total = 0;
 
//아이디 입력 안 했을때
if(id.value==""){
alert("아이디를 입력해주세요.");
id.focus();
return false;
 
}
//아이디 정규식 체크
 if(check.test(id.value)){
 
   //return true;
 }else {
   alert("아이디가 잘못된 형식입니다. 다시 입력해주세요.");
   id.value="";
   id.focus();
   return false;
 }
 
 // 비밀번호 입력 안했을때
       if(pass.value==""){
           alert("비밀번호를 입력해주세요.");
           pass.focus();
           return false;
       }
 
      //비밀번호 정규식 체크
  if(check.test(pass.value)&&id.value!=pass.value){
    //정규식 체크를 통과하고 아이디와같지 않을때 통과
    //return true;
  }else{
 
    if(id.value==pass.value)
    {
      alert("아이디와 비밀번호가 일치합니다. 다시 입력해주세요.");
      pass.value="";
      pass.focus();
      return false;
    }else{
 
      alert("비밀번호가 잘못된 형식입니다. 다시 입력해주세요.");
      pass.value="";
      pass.focus();
      return false;
    }
 
  }
  // 비밀번호 확인란 입력 안했을 때
 if(passcheck.value==""){
     alert("비밀번호 확인란에 입력해주세요.");
     passcheck.focus();
     return false;
 }
 
 //비밀번호 확인 정규식 체크
 if(check.test(passcheck.value)&&pass.value==passcheck.value){
   //return true;
 }else {
 
   alert("비밀번호가 일치하지 않습니다. 다시 확인해주세요.");
   passcheck.value="";
   passcheck.focus();
   return false;
 }
 
 // 이메일 입력 안했을 때
 if(email.value=="")
 {
    alert("이메일을 입력해 주세요");
    email.focus();
    return false;
}
 // 이메일 정규식 체크
if(!check2(emailCheck, email, "적합하지 않은 이메일 형식입니다."))
{
  return false;
}
 
 
 
 // 이름란 입력안했을때
 if(name.value==""){
   alert("이름을 입력해 주세요");
   name.focus();
   return false;
 }
 
 
 //주민번호란 입력안했을 때
 if(citizenNum.value==""){
   alert("주민번호를 입력해 주세요");
   citizenNum.focus();
   return false;
 
 }
 
 
 
           if(citizenNum.value.length == 13){
 
              //주민등록번호 계산공식
              total=   (citizenNum.value[0]*2)+(citizenNum.value[1]*3)+(citizenNum.value[2]*4)+
              (citizenNum.value[3]*5)+(citizenNum.value[4]*6)+(citizenNum.value[5]*7)+
              (citizenNum.value[6]*8)+(citizenNum.value[7]*9)+(citizenNum.value[8]*2)+
              (citizenNum.value[9]*3)+(citizenNum.value[10]*4)+(citizenNum.value[11]*5);
              cnFormulation =(11-(total%11))%10;
 
              //주민등록번호 유효여부
              if(citizenNum.value[12] != cnFormulation){
                 alert("잘못된 주민등록번호입니다.");
                 citizenNum.value="";
                 citizenNum.focus();
                 return false;
              }
 
           }else{
                  alert("주민등록번호는 13자리 입니다.");
                  citizenNum.value="";
                  citizenNum.focus();
                  return false;
           }
 
} // validate ()함수끝
 
function check2(re, what, message) {
 
      if(re.test(what.value)) {
          return true;
      }else{
 
        alert(message);
        what.value = "";
        what.focus();
        return false;
      }
 
 
  }//check2()
 
  //주민등록번호란의 입력 주민번호로 생년월일로 자동입력
       function birth(){
          var citizenNum1 = document.getElementById("citizenNum1");
          var year = document.getElementById("year1");
          var month = document.getElementById("month1");
          var day = document.getElementById("date");
 
          year.value = "19"+citizenNum1.value[0]+citizenNum1.value[1];
          month.value = citizenNum1.value[2]+citizenNum1.value[3];
          day.value =  citizenNum1.value[4]+citizenNum1.value[5];
 
       }//birth()
 
 
 cs

 

joinProcess.jsp

회원가입한 회원 정보를 DB에 삽입

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%  request.setCharacterEncoding("utf-8");%>
    
<%
 
   Connection conn=null;
   
   String sql="INSERT INTO test (id,password) VALUES (?,?)";
   
   String id=request.getParameter("id");
   String pass=request.getParameter("pass");
    
   PreparedStatement pstmt=null;
   ResultSet rs=null;
 
   
   try{
       Context init=new InitialContext();
       DataSource ds=(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
       conn=ds.getConnection();
       
      
       pstmt=conn.prepareStatement(sql);
        
           pstmt.setString(1, id);
           pstmt.setString(2,pass);
           
           rs=pstmt.executeQuery(); 
           out.println("<script> alert('가입되었습니다.'); history.go(-2);</script>");
           
          
   
 
   }catch(Exception e){
       
       out.println("<center><h3> 회원가입에 실패하였습니다.</h3></center>");
       e.printStackTrace();
   }
   
%>
 
 cs

 

 

 

 

loginProcess.jsp

DB에 있는 아이디와 비밀번호와 로그인 페이지에서 입력한 아이디와 비밀번호를 비교한 후 로그인 가능 여부 확인 작업

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
 
 <%request.setCharacterEncoding("utf-8");%>
<%
 
   Connection conn=null;
   String id= (String)request.getParameter("id");
   String pass=(String)request.getParameter("pass");
   String select="select * from test";
   PreparedStatement pstmt=null;
   ResultSet rs=null;
 
   try{
       Context init=new InitialContext();
       DataSource ds=(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
       conn=ds.getConnection();
      
       pstmt=conn.prepareStatement(select);
       rs=pstmt.executeQuery(); 
        
        while (rs.next()){
           
           //아이디와 비밀번호 비교하기
        
           if(rs.getString(1).equals(id)){
               
               if(rs.getString(2).equals(pass)){
                   
                 
                 session.setAttribute("id",id);
                 pageContext.forward("Main.jsp");
                  
                   
               }else{
                   
                   out.println("<script>alert('비밀번호가 일치하지 않습니다.'); history.back();</script>");
                   
                   
               }
               
           }
           
       }
       
        out.println("<script>alert('등록된 아이디가 없습니다.'); history.back(); </script>");
        
       rs.close(); 
     
       
   
   }catch(Exception e){
       
       out.println("<center> <h3>Couldn't get data from DB</h3></center>");
       e.printStackTrace();
   }
   
%>
 
 cs

 

Main.jsp

로그인 성공 시 들어오는 페이지

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
 <%request.setCharacterEncoding("utf-8");%>
 <!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
</head>
<body>
<center>
<h3>Main Page</h3>
 
<hr>
<br>
<%
 
 
    String id=(String)session.getAttribute("id");
       
     if(id.equals("admin"))
     {
         out.println("<a href='Member_list.jsp'> Member List </a> <br><br>");
         out.println("<a href='Member_into.jsp'> Member Information </a> <br>");
         
         
     }
       
   
%>
<br>
 
<input type="submit" value="logout" onclick="location.href='logout.jsp'" />
 
 
</center>
</body>
</html>
 
 
 
 cs

 

Member_list.jsp

회원 목록 조회, 삭제 링크를 누르면 해당 회원 삭제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    <%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
 <%request.setCharacterEncoding("utf-8");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
</head>
<body>
<center>
<h3> Member List </h3>
<hr>
<br>
<%
 
   Connection conn=null;
 
   String select="select id from test";
   PreparedStatement pstmt=null;
   ResultSet rs=null;
 
   try{
       Context init=new InitialContext();
       DataSource ds=(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
       conn=ds.getConnection();
      
       pstmt=conn.prepareStatement(select);
       rs=pstmt.executeQuery(); 
        
        while (rs.next()){
            
            if(rs.getString(1).equals("admin")) return;
            out.println("<h5>" + rs.getString(1)+ "  &nbsp; <a href='delete.jsp?delete="+rs.getString(1)+"' > 삭제 </a></h5>");
        }
        
       rs.close(); 
     
       
   
   }catch(Exception e){
       
       out.println("<h3>Couldn't get data from DB</h3>");
       e.printStackTrace();
   }
   
%>
</center>
</body>
</html>
 cs

 

delete.jsp

회원 삭제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    <%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
 <%request.setCharacterEncoding("utf-8");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
</head>
<body>
 
<br>
<%
 
 
    Connection conn=null;
    String id=request.getParameter("delete");
    
    String delete="delete from test where id=?";
    PreparedStatement pstmt=null;
    ResultSet rs=null;
    int n=0;
  
    try{
        
       Context init=new InitialContext();
       DataSource ds=(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
       conn=ds.getConnection();
      
       pstmt=conn.prepareStatement(delete);
       pstmt.setString(1,id);
        
       n=pstmt.executeUpdate();
       
       out.println("<script>alert('"+id+"님이 삭제되었습니다.');history.back();</script>");
       
     
       
 
}catch(Exception e){
       
       out.println("<h3>Couldn't get data from DB</h3>");
       e.printStackTrace();
}
%>
</body>
</html>
 cs

 

Member_into.jsp 

회원 정보 조회

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
     <%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
 <%request.setCharacterEncoding("utf-8");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<center>
 
<h3> Member Information </h3>
<hr>
<br>
 
<%
 
   Connection conn=null;
 
   String select="select * from test";
   PreparedStatement pstmt=null;
   ResultSet rs=null;
 
   try{
       
       Context init=new InitialContext();
       DataSource ds=(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
       conn=ds.getConnection();
      
       pstmt=conn.prepareStatement(select);
       rs=pstmt.executeQuery(); 
        
        while (rs.next()){
        
            if(rs.getString(1).equals("admin")) return;
            out.println("<h5><table border=1 cellspacing=0.5><tr><td align=center>ID</td><td>" + rs.getString(1)+"</td></tr><tr><td align=center>Pass</td><td>" + rs.getString(2) +"</td></tr><tr><td align=center>Email</td><td>"+rs.getString(3)+"</td></tr><tr><td align=center>Name</td><td>"+rs.getString(4)+"</td></tr><tr><td align=center>Address</td><td>"+rs.getString(5)+"</td></tr><tr><td align=center>Identification</td><td>"+rs.getString(6)+"</td></tr><tr><td align=center>Birth</td><td>"+rs.getString(7)+"</td></tr><tr><td align=center>Interest</td><td>"+rs.getString(8)+"</td></tr></table></h5>");
        }
        
       rs.close(); 
     
       
   
   }catch(Exception e){
       
       out.println("<h3>Couldn't get data from DB</h3>");
       e.printStackTrace();
   }
   
%>
</center>
</body>
</html>
 cs
저작자표시

'Web' 카테고리의 다른 글

eclipse에서 웹서버 구축하기  (0) 2018.10.23
My error page  (0) 2018.10.23
jsp:forward  (0) 2018.10.23
회원가입 유효성 검사  (0) 2018.10.19
blockRightClick(),blockSelect()  (0) 2018.10.19
'Web' Related Articles more