티스토리 뷰

JSP

[JSP #6 ] script 를 이용하여 새로운 창 띄우기.(window.open) & 회원가입 유무 확인.

녹색꼬맹이 2017. 9. 13. 15:00
반응형
SMALL

 

홈페이지를 구성하다가 새로운 창에서 무언가 처리를 하고싶을 때 사용하는 방법.

 

 

 

위 와 같은 새로운 창을 띄울 시에는 a 태그를 이용하여 javascript 를 연동해 준다.

 

현재 위 그림은 '회원가입' 을 클릭하면 새로운 창이 나오는 프로그램 이다.

 

 

1
<a href="javascript:joinMember()">회원가입</a>
 cs

 

 

joinMember()의 경우 javascript Method 이름이다.

 

 

1
2
3
4
5
<script type="text/javascript">
            function joinMember(){
                window.open("<%= request.getContextPath() %>/member/memberSsn.jsp", "member", "width=640, height=400")
            }
</script>
 cs

 

a 태그가 실행되기 전에 스크립트를 선언 해주어야 한다.

 

새로운 창을 띄우기 위한 함수 이름은 windor.open

 

request.getContextPath() - 는 절대 경로에서 나의 root 를 확인해주는 함수.

 

/member/memberSsn.jsp - member 폴더 안에 memberSsn.jsp 라는 파일을 실행하는것.

 

member 는 새로운 창에 이름 (title)

 

가로와 높이 크기를 지정 해주면 새로운 창이 열린다.

 

 

실행하기전 member 폴더 안에 memberSsn.jsp 를 간단하게 HTML 로 구성해 줘야 404error 가 뜨지 않고 빈 화면 만이라도 띄울 수 있다.

 

 

 

그럼 간단하게 회원가입 유무 확인하는 프로그램을 작성 해본다.

 

회원가입 유무 프로그램이란 ?

- 이름과 주민등록번호를 입력해서 이미 회원가입이 되어 있는 사람과 그렇지 않은 사람으로 나누어 가입되어 있으면 가입되어있다고 메세지를 보내주고

가입이 되어 있지 않은 사람이라면 회원가입 창으로 이동 시켜주는 프로그램 이다.

 

 

MemberSsn.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- memberSsn.jsp -->    
<html>
<head>
    <title>회원가입</title>
    <link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
    <div align="center">
        <hr color="green" width="300">
        <h2>회 원 가 입 유 무</h2>
        <hr color="green" width="300">
 
        <form name="f" action="checkMember.jsp" method="post">
            <table width="500" class="outline">
            
                <tr>
                    <th>이름</th>
                    <td><input type="text" name="name" class="box"></td>
                </tr>
                
                <tr>
                    <th>주민번호</th>
                    <td><input type="text" name="ssn1" class="box" maxlength="6"> - 
                            <input type="password" name="ssn2" class="box" maxlength="7"></td>
                </tr>
                
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="조회">
                        <input type="reset" value="취소">
                    </td>
                </tr>
                
            </table>        
        </form>
    </div>
</body>
</html> 
 cs

 

 

스크립트로 새로운 창으로 MemberSsn.jsp를 띄우게 설정해 두었다.

그럼 MemberSsn.jsp 의 구성은 위 코드와 같으므로 맨 처음 사진 처럼 나올 것이다.

 

 

여기서 조회버튼을 누르면 checkMember.jsp 로 Data 가 전달되는데

그 역활을 하는 것이 from 태그 안에 있는 것이다.

 

checkMember.jsp 로 이동되는 Data 는

1. name

2. ssn1

3. ssn2

( ssn1 과 ssn2 의 경우 주민등록번호 앞 6글자와 뒤 7글자이다. )

 

뒤 7자리의 경우 type 을 password 로 줌으로써 어떤 숫자를 입력할 시에 " * " 로 표시된다.

maxlength 를 적용하여 입력되는 숫자의 갯수의 제한을 두었다.

 

checkMember.jsp 로 전달되는 모든 Data 는 Post 방식으로 전달된다.

 

 

 

 

 

 

 

----- 다음 은 이어서 DB와 연동하여 현재 회원인지 아닌지의 여부를 확인하는 Logic 을 구성 하겠다. -----

 

 

 

반응형
LIST
저작자표시

'JSP' 카테고리의 다른 글

[JSP #8 ] Cookie 이용하기.  (0) 2017.09.19
[JSP #7 ] 한글처리방식(인코딩)  (0) 2017.09.18
[JSP #5 ] 간단한 CSS 입히기.  (0) 2017.09.13
[JSP #4 ] DAO작성 Select Query  (0) 2017.09.11
[JSP #3 ] DAO작성 Insert, Delete Query  (0) 2017.09.11
댓글