Web programming

(22.11.16)Web 프로그래밍: 회원 가입등록(JSP, jsp:Bean 액션태그)

프로그래머 오월 2022. 11. 17.

JSP 개발 방법론 Model1

회원 가입 등록 폼 및 처리 (memJoin.jsp, joinProc.jsp, Member, MemService.java)

<jsp:useBean> 액션 사용

이름, 성별, 생일, 이메일, 경력연수, 관심 과목(5개 이상 제시), 개인 소개, 회원의 번호는 입력 순(가입 순)으로 지정

서버측에서는 List<Member>를 사용하여 직렬화하여 파일에 저장(member.ser)

저장결과를 이용자에게 자바 스크립트 alert()로 표시

저장 결과 메시지를 표시한 후에도 화면의 변경은 없도록 함

폼데이터 유효성 검사 필수

memJoin.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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 </title>
</head>
<style type="text/css">
 main { width:fit-content; border:1px solid black; padding:1em;
      margin:0 auto; }
 h1 { text-align: center; }
</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 formCheck(){
        var name = $('#name').val();
        var gender ='';
        var birth = $('#birth').val();
        var email = $('#email').val();
        var exp = $('#exp').val();
        var subject ='';
        var inv = $('#inv').val();
        
        $('input[name=gender]').each(function(index, item){
            if(item.checked) {
                gender = $(item).val();
            }
        });
        $('input[name=subject]').each(function(index, item){
            if(item.checked) {
                subject = $(item).val();
            }
        });
        
        if(name==''|| gender==''|| birth==''|| email=='' ||exp=='' 
                || subject=='' || inv==''){
            alert('모든 항목 입력은 필수입니다.');
            return false;
        }
        //alert($('#memberAdd').serialize());
        return join();    
    }
    
    function join(){
        console.log('join() 시작');
        $.ajax({
            url : 'joinProc.jsp',
            method:'post',
            data: $('#memberAdd').serialize(),
            cache:false,
            dataType:'json',
            success:function(res){
                alert(res.added ?'회원정보 추가 성공':'정보추가 실패');
            },
            error : function(xhr,status,err){
                alert('에러:' + err);
            }
        });
        return false;
    }
</script>
<body>
<main>
<h1>회원 가입</h1>
<form id = 'memberAdd' onsubmit="return formCheck();">
   <div><label>*이 름</label><input id="name" type="text" name="name"></div>
   <div><label id="gender">*성 별</label></div>
   <div><label>남 자</label><input type="radio" name="gender" value="남자"></div>
   <div><label>여 자</label><input type="radio" name="gender" value="여자"></div>
   <div><label>*생 일</label><input id="birth" type="date" name="birth"></div>
   <div><label>*메 일</label><input type="text" id="email" name="email"></div>
   <div><label>*경력 연수</label><input id="exp" type="number" name="exp" value="0"></div>
   <div><label id="subject">*관심 과목</label></div>
   <div><input type="checkbox" name="subject" value="Java">Java</div>
   <div><input type="checkbox" name="subject" value="Python">Python</div>
   <div><input type="checkbox" name="subject" value="Spring">Spring</div>
   <div><input type="checkbox" name="subject" value="Android">Android</div>
   <div><input type="checkbox" name="subject" value="c++">c++</div>
   <textarea id="inv" name="inv" rows="5" cols="20" placeholder="개인 소개 필수 작성"></textarea>
   <div><button type="submit" >저 장</button></div>
   <div><button type="reset">취소</button></div>
</form>
</main>
</body>
</html>
Colored by Color Scripter

cs

다양한 input 타입의 태그들을 사용하여 값을 정할 수 있도록 한다.

이 항목들이 하나라도 빠져서 서버에 넘어 가면 안 되므로 폼 체크를 해줘야한다. 폼 체크를 해주기위해 jquery를 이용하여 폼체크 함수를 만든다. 성별과 관심과목을 이용자가 고르는 것이기에 선택한 value를 뽑아줘야하므로 따로 로직 처리 해준다. 이제 뽑아온 value들이 하나라도 빈값이 있으면 alert창을 통해 모든 항목을 입력해야한다고 알려주고 그렇지 않은 경우엔 회원 등록 로직이 실행되게 해준다.

회원등록 로직 경우 joinProc.jsp 통해 넘어온 added 값이 참이면 회원 정보 등록 성공을 띄우고 그렇지 않은 경우는 실패를 띄우게 한다. return을 false를 해줘야지 폼이 submit로 넘어갔을 때 중복하여 넘어가지 않게 해줘야한다.

joinProc.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<%@page import="org.json.simple.JSONObject"%>
<%@page import="com.ezen.web.hello.MemberService"%>
<%@page import="java.util.*"%>
<%@page import="com.ezen.web.hello.Member"%>
<%@ page contentType="application/json; charset=utf-8"
    pageEncoding="utf-8"%>
<jsp:useBean id="mem" class= "com.ezen.web.hello.Member">
    <jsp:setProperty name="mem" property="*"/>
</jsp:useBean>
 
<jsp:useBean id="svc" class= "com.ezen.web.hello.MemberService" scope="session"/>
<jsp:setProperty name="svc" property="member" value="<%=mem %>"/>
 
    <%
        boolean added = svc.addMember();
        JSONObject jsobj = new JSONObject();
        jsobj.put("added", added);
    %>
    
    <%=    jsobj.toJSONString() %>
Colored by Color Scripter

cs

<jsp:useBean id="mem" class= "com.ezen.web.hello.Member">
    <jsp:setProperty name="mem" property="*"/>
</jsp:useBean>
<jsp:useBean id="svc" class= "com.ezen.web.hello.MemberService" scope="session"/>
<jsp:setProperty name="svc" property="member" value="<%=mem %>"/>

<jsp:useBean> 액션 태그들은 joinProc.jsp에서 Member.java의 모든 프로퍼티(멤버 변수)들을 mem이라는 참조변수에 set해주고 그 mem을 다시 MemberService.java의 프로퍼티 member 객체에 담는다. 이렇게 하면 joinProc.jsp에서도 MemberService.java의 member를 부릴 수 있다.

MemberService.java에서 만든 addMember()메소드를 호출하여 json객체에 boolean 값을 넣고 memJoin.jsp에 res.added에 보내준다.

Member.java

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

import java.io.Serializable;
 
public class Member implements Serializable, Comparable<Member>
{
    private int num;
    private String name;
    private String birth;
    private String email;
    private String gender;
    private String exp;
    private String[] subject;
    private String inv;
    
    public Member() {}
    public Member(int num)
    {
        this.num = num;
    }
    public Member(String name, String birth, String email, 
        String gender, String exp, String[] subject, String inv) {
        super();
        this.name = name;
        this.birth = birth;
        this.email = email;
        this.gender = gender;
        this.exp = exp;
        this.subject = subject;
        this.inv = inv;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getBirth() {
        return birth;
    }
    public void setBirth(String birth) {
        this.birth = birth;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String getExp() {
        return exp;
    }
    public void setExp(String exp) {
        this.exp = exp;
    }
    public String[] getSubject() {
        return subject;
    }
    public void setSubject(String[] subject) {
        this.subject = subject;
    }
    public String getInv() {
        return inv;
    }
    public void setInv(String inv) {
        this.inv = inv;
    }
    @Override
    public int compareTo(Member o) {
        if(this.num>o.num) {
            return 1;
        }else if(this.num<o.num) {
            return -1;
        }else return 0;
    }
    @Override
    public boolean equals(Object obj) {
        Member other = (Member) obj;
        return this.num==other.num;
    }
}
Colored by Color Scripter

cs

Member.java는 모델 클래스로 다룰 데이터의 모델의 기본을 설정해준다. 등록한 순서대로 번호를 부여하기 위해서 compareTo() 메소드를 오버라이드 해주고 객체를 꺼내올 때 번호를 확인하여 꺼내올 것이기 때문에 equals() 메소드도 오버라이드 해준다. 모든 멤버 변수는 getter, setter 메소드를 만들어 객체를 부르고 값을 정할 수 있게 한다. 등록된 데이터 값들을 파일에 직렬화 할 것이기 때문에 Serializable과 대조를 위하여 Comparable을 implements 해줘야 한다.

MemberService.java

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

import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
 
public class MemberService {
 
    private Member member;
    private HttpServletRequest request;
    private String fpath = "D:/java_test/member.ser";
       
    public MemberService(){}
 
    public MemberService(HttpServletRequest request)
    {
       this.request = request;
    }
    public void setMember(Member member) {
        this.member = member;
    }
    public boolean addMember() 
    {
       List<Member> list = deserialize();
       Collections.sort(list);
       int num = 1;
       if(list.size()>0) {
           num = list.get(list.size()-1).getNum()+1;
       }
       member.setNum(num);
       list.add(member);
       return serialize(list);
    }
    private boolean serialize(List<Member> list)
    {
       try {
          ObjectOutputStream objOut = new ObjectOutputStream(new FileOutputStream(fpath));
          objOut.writeObject(list);
          objOut.close();
          return true;
       } catch (Exception e) {
          e.printStackTrace();
       }
       return false;
    }
    private List<Member> deserialize()
    {
        File f = new File(fpath);
        List<Member> list = null;
              
        if(!f.exists()) {
            list = new ArrayList<Member>();
        }else {
            try {
                ObjectInputStream objInput = new ObjectInputStream(new FileInputStream(fpath));
                list = (List<Member>)objInput.readObject();
                objInput.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return list;
    }
}
Colored by Color Scripter

cs

MemberService.java는 핵심 로직들이 돌아가는 서비스 클래스이다. deserialize()는 파일을 역직렬화하여 Member객체가 담긴 List를 반환해준다. 파일이 존재하지 않는다면(첫 등록자를 등록할 시엔 파일이 존재하지 않는다.) 파일을 역직렬화 하지 않고 새로운 list 변수를 만든다. 파일이 있을 시엔 파일 데이터를 역직렬화 하여 liet를 return해준다. serialize()는 데이터를 파일에 직렬화하여 성공하면 true를 실패하면 false를 return한다.

addMember()메소드는 list의 제일 마지막 member 객체의 번호에 +1을 하여 새롭게 저장할 Member 객체의 번호로 부여하고 서버로 넘어온 데이터와 함께 list객체에 담아 직렬화 한다.

실행 결과:

'Web programming' 카테고리의 다른 글

(22.11.18)Web 프로그래밍: 게시판 CRUD(JSP 개발방법론 Model1) (0)	2022.11.18
(22.11.17)Web 프로그래밍: 회원정보 리스트 보기,상세 보기, 수정하기(jsp, jsp:Bean 액션태그) (2)	2022.11.17
(22.11.15)Web 프로그래밍: 웹 프로그래밍, html 태그 실습 (0)	2022.11.15
(22.11.14)Web 프로그래밍: 웹프로그래밍, JSP, HTML, jsp:Bean, 영역객체 (0)	2022.11.14
(22.11.10)Web 프로그래밍: AJAX 방식을 이용한 웹 구축프로그래밍(JSON, MVC) (0)	2022.11.10

(22.11.16)Web 프로그래밍: 회원 가입등록(JSP, jsp:Bean 액션태그)

JSP 개발 방법론 Model1

'Web programming' 카테고리의 다른 글

댓글

티스토리툴바