Web programming

(22.11.15)Web 프로그래밍: 웹 프로그래밍, html 태그 실습

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

javaBook.jsp가 화면에 표시되어 있을때 'Hello Java'를 클릭하면 서버측(shopControl.jsp)에 그 문자열이 저장되고 pythonBook.jsp가 화면에 표시 되어 있을 때 'Easy Python'을 클릭하면 서버측(shopControl.jsp)에 그 문자열이 저장되도록한다. 위의 2개 페이지를 접속할 땐 웹브라우저 주소창을 이용하라

주소창에 showCart.jsp를 입력하면 위에서 저장한 2개의 문자열이 모두 표시 되도록 한다.

** 한개의 브라우저 상태를 저장할 수 있는 영역(scope) 객체는 session이며, jsp에서는 어디에서든지 session이라는 참조변수로 제공된다.

javaBook.jsp

1
2
3
4
5
6
7
8
9
10
11
12

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Java Book </title>
</head>
<body>
<a href="shopControl.jsp?book=Hello java"> Hello Java </a>
</body>
</html>
Colored by Color Scripter

cs

 
 
pythonBook.jsp



1
2
3
4
5
6
7
8
9
10
11
12

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Python Book</title>
</head>
<body>
<a href="shopControl.jsp?book=Easy Python"> Easy Python </a>
</body>
</html>
Colored by Color Scripter

cs

shopControl.jsp

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

<%@page import="java.util.*"%>
<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    String book = request.getParameter("book");
    List<String> cart = (List<String>)session.getAttribute("cart");
    if(cart==null){
        cart = new ArrayList<String>();
        session.setAttribute("cart", cart);
    }
    boolean added = cart.add(book);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<%= added ?"장바구니에 저장했습니다.":"장바구니 저장 실패" %>
</body>
</html>
Colored by Color Scripter

cs

showCart.jsp

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

<%@page import="java.util.*"%>
<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    List<String> cart = (List<String>)session.getAttribute("cart");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 장바구니 내용보기</title>
</head>
<body>
<h3>장바구니 내용</h3>
<%
 for(int i=0;i<cart.size();i++){%>
     <%= i+1%>. <%=cart.get(i)%>
<% }%>
</body>
</html>
Colored by Color Scripter

cs

실행 결과:

한사람이 여러 페이지를 지나다니면서 산출되는 정보를 저장하기 위해선 session 영역 객체가 필요하다.

장바구니 비우기 기능 만들기

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

<%@page import="java.util.*"%>
<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    List<String> cart = (List<String>)session.getAttribute("cart");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 장바구니 내용보기</title>
</head>
<body>
<h3>장바구니 내용</h3>
<%
    if(cart!=null){
         for(int i=0;i<cart.size();i++){%>
             <%= i+1%>. <%=cart.get(i)%>
        <% }
    }else{%>
        <%= "장바구니가 비어져 있습니다."%>
    <%}
%>
 
<p>
[<a href="cartEmpty.jsp"> 장바구니 비우기 </a>]
</body>
</html>
Colored by Color Scripter

cs

cartEmpty.jsp

1
2
3
4
5
6

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    session.invalidate(); //세션에 들어있던 모든 데이터를 지운다.
    response.sendRedirect("showCart.jsp");
%>
Colored by Color Scripter

cs

실행 결과:

response.sendRedirect("showCart.jsp"); 응답을 바로 다른페이지(showCart.jsp)로 돌려버렸다.

아주 간단한 로그인창을 만들어서 로그인이 성공하면 성공한 사람들만 main.jsp에 접속 가능하게 하고,

로그인 실패한 사람하거나 로그인 하지 않은 사람이 url을 쳐서 main.jsp에 들어가려해도 못들어가게끔 만들어라.

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 로그인 하기 </title>
</head>
<body>
<h3>로그인</h3>
<form action="login_proc.jsp" method="post">
   <input type="hidden" name="cmd" value="login">
   <div><label>아이디</label> 
      <input type="text" name="uid" value="smith">
   </div>
   <div><label>암 호</label> 
      <input type="password" name="pwd" value="1111">
   </div>
   <div><button type="submit">로그인</button></div>
    <div><button type="reset">취소</button></div>
</form>
</body>
</html>
Colored by Color Scripter

cs

login_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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% 
    String uid = request.getParameter("uid");
    String pwd = request.getParameter("pwd");
    boolean pass = false;
    if(uid.equals("smith")&&pwd.equals("1111")){
        session.setAttribute("login", true);
        pass= true;
    }
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 결과</title>
<script>
    var pass = <%= pass%>;
    var msg = pass?"로그인 성공":"로그인 실패";
    alert(msg);
    if(!pass){
        location.href = "login.jsp";
    }else{
        location.href = "main.jsp";
    }
</script>
</head>
<body>    
</body>
</html>
Colored by Color Scripter

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% 
    Object obj = session.getAttribute("login");
    String msg = null;
    boolean pass = true;
    if(obj==null){
        pass = false;
        msg = "회원으로 로그인해야 접속할 수 있습니다.";
        //response.sendRedirect("login.jsp");
    }
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>메인 컨텐츠 페이지 </title>
<style type="text/css">
 main {width:300px; height:200px; margin:0 auto; background-color:purple;}
</style>
<script type="text/javascript">
    var pass = <%=pass%>;
    var msg = '<%=msg%>';
    if(!pass){
        alert(msg);
        location.href = "login.jsp";
    }
</script>
</head>
<body>
<h1>
회원님 환영합니다.
 
[<a href="logout.jsp"> 로그아웃 </a>]
</h1>
<main>
</main>
</body>
</html>
Colored by Color Scripter

cs

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% 
    session.removeAttribute("login");
        
    boolean logout = true;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script type="text/javascript">
 var logout = <%=logout%>;
 if(logout){
     alert("정상적으로 로그아웃됐습니다.");
     location.href = "login.jsp";
 }
</script>
</head>
<body>
 
</body>
</html>
Colored by Color Scripter

cs

실행 결과 :

로그인 성공한 경우

로그인 실패 경우

로그인하지 않고 main.jsp에 접속하려고 한 경우

로그아웃

<form>태그 <input type= >종류

text, password, radio, checkbox, reset, submit, image, range, date, number, file, hidden

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Range Test </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 valuecheck(){
        var v = $('#slider').val();
        console.log('slider value'+v);
        $('#sliderout').val(v);
    }
</script>
</head>
<body>
<form>
<input id="slider" name="slider" type="range" 
    max="100" min="0" step="1" value="50"
    oninput="valuecheck();">
<output id="sliderout"></output>
<p>
<button type="button" onclick="valuecheck();">확인</button>
</form>
</body>
</html>
Colored by Color Scripter

cs

실행 결과:

input이 아닌 타입들

<select>, <textarea> 등

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

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Range Test </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 valuecheck(){
        var v = $('#slider').val();
        console.log('slider value'+v);
        $('#sliderout').val(v);
    }
</script>
</head>
<body>
<form>
<input id="slider" name="slider" type="range" 
    max="100" min="0" step="1" value="50"
    oninput="valuecheck();">
<output id="sliderout"></output>
<p>
<input type="date" name="expire">
<p>
<input type="number" name="count" max="100" min="0" step="1" value="13">
<p>
<input type="color" name="color">
<p>
<textarea name="desc" rows="5" cols="20" placeholder="입력해주세요"></textarea>
<p>
<button type="submit">확인</button>
</form>
</body>
</html>
Colored by Color Scripter

cs

실행 결과:

값을 입력 해주기

확인 버튼 누르면 설정한 값들이 url에 표시되여 넘어 간다.

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

(22.11.17)Web 프로그래밍: 회원정보 리스트 보기,상세 보기, 수정하기(jsp, jsp:Bean 액션태그) (2)	2022.11.17
(22.11.16)Web 프로그래밍: 회원 가입등록(JSP, jsp:Bean 액션태그) (0)	2022.11.17
(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.09)Web 프로그래밍:AJAX방식을 이용한 MVC/JSON,json-simple.jar (2)	2022.11.09

(22.11.15)Web 프로그래밍: 웹 프로그래밍, html 태그 실습

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

댓글

티스토리툴바