Web programming

(22.11.14)Web 프로그래밍: 웹프로그래밍, JSP, HTML, jsp:Bean, 영역객체

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

<form> 태그 안에 과일 이름 목록이 <checkbox>와 함께 제시되어있고 특정 과일 이름에 연결된 체크박스를 체크하고 폼 안의 삭제 버튼을 누르면 서버측에서 해당 과일이 삭제되고 서버측에서 정상적으로 삭제되면 클라이언트 측으로 성공 메시지가 클라이언트 측으로 전달되도록 하시오.

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

<%@page import="org.json.simple.JSONObject"%>
<%@page import="java.util.*"%>
<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
<%
    /*
    String hobby = request.getParameter("hobby");
    String[] hobbies= request.getParameterValues("hobby");
    */
    List<String> cart = new ArrayList<>();
    cart.add("Apple");
    cart.add("Orange");
    cart.add("Pineapple");
    cart.add("Kiwi");
    
    String[] fr = request.getParameterValues("fruits");
    int cnt = 0;
    
    for(int i=0;i<fr.length;i++)
    {
        for(int j=(cart.size()-1)/*원소의 끝에서 부터 삭제*/;j>=0;j--)
        {
            if(cart.get(j).equals(fr[i])){
                cart.remove(j);
                cnt++;    
            }
        }
    }
    boolean removed = cnt==fr.length ? true : false;
    JSONObject jsobj = new JSONObject();
    jsobj.put("removed" , removed);
    out.print(jsobj.toString());
    out.flush();
%>
Colored by Color Scripter

cs

form_test.html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>폼 태그 다루기</title>
</head>
<body>
<hr>
<style>
    li { display:inline; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
crossorigin="anonymous"></script>
 
<script>
function remove(){
    var ser = $('#remform').serialize();
    $.ajax({
        url:'form_proc.jsp',
        method:'post',
        data: ser,
        cache: false,
        dataType: 'json',
        success: function(res){
            alert(res.removed);
        },
        error : function(xhr, status, err){
            alert(err);
        }
    });
    return false;
}
</script>
<div >
    <form  id="remform"onsubmit="return remove();">
        <ul>
            <div id="Apple">
                <input type="checkbox" name="fruits" value="Apple">
                <li>Apple</li>
            </div>
            <div id="Orange">
                <input type="checkbox" name="fruits" value="Orange">
                <li>Orange</li>
            </div>
            <div id="Pineapple">
                <input type="checkbox" name="fruits" value="Pineapple">
                <li>Pineapple</li>
            </div>
            <div id="Kiwi">
                <input type="checkbox" name="fruits" value="Kiwi">
                <li>Kiwi</li>
            </div>
        </ul>
        <div><button type="submit">삭제</button></div>
    </form>
</div>
<div><button type="button" onclick="rem();">테스트</button></div>
</body>
</html>
Colored by Color Scripter

cs

실행 결과:

서블릿과 JSP의 차이점은 무엇인가?

서블릿은 웹브라우저의 요청을 받아들인다. 즉 요청을 받아서 처리한다. 그리고 응답을 할 때 html로 할 수 있다.

jsp는 요청을 처리할 수 있고, 응답을 할 때 html로 할 수 있었다. 하지만 차이점이라면 서블릿은 정상적인 자바 클래스다. 자바 클래스이면서 동시에 http 요청 처리에 특화된 클래스이다. 이용자으이 요청을 받아 서비스() 호출시켜준다. jsp는 자바 클래스는 아니지만, jsp를 작성하면 톰캣이 자바클래스(서블릿)로 변환(컴파일)시켜준다. 컴파일 된 후 실행되면 그 안의 서비스 메소드를 호출하여 돌아가게 된다.

일반적인 java 클래스 (Plain Old Java Object) 포조 클래스

Java 개발방법론 Model1: 서블릿 제외 (jsp(컨트롤러와 view역할을 함), 포조 자바 클래스(서비스 로직 클래스, 데이터 클래스)만 사용)

Java 개발방법론 Model2: MVC

Java 개발 방법론 모델 1을 사용하여 간략한 구구단 보기 웹 만들기

gugu.jsp

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

<%@page import="com.ezen.web.hello.GuguService"%>
<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    GuguService gs = new GuguService(); //서비스를 불러서 작업 시키기
    String gString = gs.createGugu(request);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>구구단 학습기</title>
</head>
<body>
<h3>
구구단 보기
</h3>
<%= gString %> <!--요청받은 결과 보기 -->
</body>
</html>
Colored by Color Scripter

cs

view의 기능을 쓰기 위해서라도 텍스트는 html을 써야한다.

java 클래스

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

package com.ezen.web.hello;
 
import javax.servlet.http.HttpServletRequest;
 
public class GuguService 
{
        public String createGugu(HttpServletRequest request) {
        String sDan = request.getParameter("dan");
        int dan = sDan==null? 2 : Integer.parseInt(sDan);
        
        String data = "";
        for(int i =1;i<10;i++) {
            data += String.format("%d * %d = %d<br>", dan, i ,dan*i);
        }
        return data;
    }
}
Colored by Color Scripter

cs

실행 결과:

테스트 버튼을 만들어 사용자가 체크박스를 체크 한뒤 테스트 버튼을 누르면 프론트엔드에서도 사라지게 만들기

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>폼 태그 다루기</title>
</head>
<body>
<hr>
<style>
    li { display:inline; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
crossorigin="anonymous"></script>
 
<script>
function remove(){
    var ser = $('#remform').serialize();
    $.ajax({
        url:'form_proc.jsp',
        method:'post',
        data: ser,
        cache: false,
        dataType: 'json',
        success: function(res){
            alert(res.removed);
        },
        error : function(xhr, status, err){
            alert(err);
        }
    });
    return false;
}
function rem(){
    $('input[type=checkbox]'/*선택자를 두는 곳*/).each(function(index, item){
        //console.log(item.checked);
        if($(item).is(':checked')){
            $('div#'+$(item).val()).remove();
        }
    });
}
</script>
<div >
    <form  id="remform"onsubmit="return remove();">
        <ul>
            <div id="Apple">
                <input type="checkbox" name="fruits" value="Apple">
                <li>Apple</li>
            </div>
            <div id="Orange">
                <input type="checkbox" name="fruits" value="Orange">
                <li>Orange</li>
            </div>
            <div id="Pineapple">
                <input type="checkbox" name="fruits" value="Pineapple">
                <li>Pineapple</li>
            </div>
            <div id="Kiwi">
                <input type="checkbox" name="fruits" value="Kiwi">
                <li>Kiwi</li>
            </div>
        </ul>
        <div><button type="submit">삭제</button></div>
    </form>
</div>
<div><button type="button" onclick="rem();">테스트</button></div>
</body>
</html>
Colored by Color Scripter

cs

실행결과:

Apple 과 Orange 체크박스를 체크하고 테스트 버튼을 누르니 다음 같이 사라졌다.

이를 이용하여 삭제 버튼을 눌렀을 때 확인 문구가 뜨면서 프론트엔드에서도 항목 삭제되게 만들기

form_test.html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>폼 태그 다루기</title>
</head>
<body>
<hr>
<style>
    li { display:inline; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
crossorigin="anonymous"></script>
 
<script>
function remove(){
    var ser = $('#remform').serialize();
    $.ajax({
        url:'form_proc.jsp',
        method:'post',
        data: ser,
        cache: false,
        dataType: 'json',
        success: function(res){
            if(res.removed){
                alert('삭제 성공!');
                $('input[type=checkbox]'/*선택자를 두는 곳*/).each(function(index, item){
                    if($(item).is(':checked')){
                        $('div#'+$(item).val()).remove();
                    }
                });            
            }else{
                alert('삭제 실패');
            }
        },
        error : function(xhr, status, err){
            alert(err);
        }
    });
    return false;
}
</script>
<div >
    <form  id="remform"onsubmit="return remove();">
        <ul>
            <div id="Apple">
                <input type="checkbox" name="fruits" value="Apple">
                <li>Apple</li>
            </div>
            <div id="Orange">
                <input type="checkbox" name="fruits" value="Orange">
                <li>Orange</li>
            </div>
            <div id="Pineapple">
                <input type="checkbox" name="fruits" value="Pineapple">
                <li>Pineapple</li>
            </div>
            <div id="Kiwi">
                <input type="checkbox" name="fruits" value="Kiwi">
                <li>Kiwi</li>
            </div>
        </ul>
        <div><button type="submit">삭제</button></div>
    </form>
</div>
</body>
</html>
Colored by Color Scripter

cs

실행결과:

라디오 박스를 만들어 Java, JSP, Python, Spring 목록을 제시하고 이용자가 1개만 선택할 수 있도록한다.

확인 버튼을 누르면 선택된 항목 1개만 남기고 나머지 항목은 모두 삭제되도록 하라

subject.html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>과목 고르기</title>
<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(){
    $('#sampleform button').click(function(){
        $('input:radio').each(function(index, item){
            if(!item.checked){
                $('div#'+$(item).val()).remove();
            }
        });
    });
})
</script>
</head>
<body>
<div >
    <form id="sampleform">
        
            <div id="Java">
                <input type="radio" id="Java" name="subject" value="Java">
                <label>Java</label>
            </div>
            <div id="JSP">
                <input type="radio" id="JSP" name="subject" value="JSP">
                <label>JSP</label>
            </div>
            <div id="Python">
                <input type="radio" id="Python" name="subject" value="Python">
                <label>Python</label>
            </div>
            <div id="Spring">
                <input type="radio" id="Spring" name="subject" value="Spring">
                <label>Spring</label>
            </div>
        
        <button type="button">[확인]</button>
    </form>
</div>
</body>
</html>
Colored by Color Scripter

cs

실행 결과:

jsp:useBean을 이용하여 자바 개발방법론 모델1 해보기

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

<%@page import="org.json.simple.JSONObject"%>
<%@page import="com.ezen.web.hello.GuguService"%>
<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<jsp:useBean id="svc" class= "com.ezen.web.hello.GuguService" scope="page"></jsp:useBean>
<%
    String gString = svc.createGugu(request);
%>
<%--
    GuguService gs = new GuguService(); //서비스를 불러서 작업 시키기
    String gString = gs.createGugu(request);
    JSONObject jsobj = new JSONObject();
    jsobj.put("content" , gString);
    out.print(jsobj.toJSONString());
    out.flush();
--%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>구구단 학습기</title>
</head>
<body>
<h3>
구구단 보기
</h3>
<%= gString %>
</body>
</html>
 
Colored by Color Scripter

cs

실행결과:

Bean 오브젝트의 scope

-page 영역 : Bean 객체가 생성된 그 페이지(JSP)에서만 사용가능하다. page 영역의 영역객체 - pageContext 객체

-request 영역: Bean 객체가 생성되어 request 객체에 저장됨 (request 객체)

-session 영역: Bean 객체가 생성되어 HttpSession 객체에 저장됨(한 이용자가 접속하는 경로에 있는 모든 jsp, servlet )

브라우저당 한 개씩 (100명이 접속하면 100개의 객체가 생성된다.)

-application 영역: 한 웹서버 안에 있는 모든 jsp, servlet

한 서버당 한 개씩 (100명이 한 서버에 접속한다면 100명은 1개 객체를 공유하게 된다.)

영역 안에선 어디에서나 사용할 수 있는 객체: 영역 객체

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

(22.11.16)Web 프로그래밍: 회원 가입등록(JSP, jsp:Bean 액션태그) (0)	2022.11.17
(22.11.15)Web 프로그래밍: 웹 프로그래밍, html 태그 실습 (0)	2022.11.15
(22.11.10)Web 프로그래밍: AJAX 방식을 이용한 웹 구축프로그래밍(JSON, MVC) (0)	2022.11.10
(22.11.09)Web 프로그래밍:AJAX방식을 이용한 MVC/JSON,json-simple.jar (2)	2022.11.09
(22.11.08)Web 프로그래밍: AJAX, JSON, jQuery,DOM (0)	2022.11.08

(22.11.14)Web 프로그래밍: 웹프로그래밍, JSP, HTML, jsp:Bean, 영역객체

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

댓글

티스토리툴바