본문 바로가기
Full Stack 교육 회고록

9/22 jsp/servlet 실습

순두부 호랑이 2022. 9. 22. 17:50
728x90
SMALL

<Ex05.Table.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex05Table")
public class Ex05Table extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//요청 처리
		
		//응답
		PrintWriter out = response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		out.print("<table border=1>");
		
		out.print("<tr>");
		for(int i=1; i<=6; i++) {
			out.print("<td>"+i+"</td>");
		}
		out.print("</tr>");
		
		out.print("</table>");
		out.print("</body>");
		out.print("</html>");
		
	}

}

<Ex06MakeTable.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex06MakeTable")
public class Ex06MakeTable extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		PrintWriter out = response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		out.print("<table border=1>");
		
		out.print("<tr>");
		for(int i=1; i<=num; i++) {
			out.print("<td>"+i+"</td>");
		}
		out.print("</tr>");
		
		out.print("</table>");
		out.print("</body>");
		out.print("</html>");
	}

}

<Ex06MakeTable.html>

 

 

 

캐싱-데이터 저장방식

<Ex07ChangeBg.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/Ex07ChangeBg")
public class Ex07ChangeBg extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String color = request.getParameter("color");
		
		System.out.println(color);
		
		PrintWriter out = response.getWriter();
		
		out.print("<html>");
		out.print("<body bgcolor='"+color+"'>");
		out.print("</body>");
		out.print("</html>");
	}

}

<Ex07ChangeBg.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex07ChangeBg">
		<input type="color" name="color">
		<input type="submit" value="change">
	</form>
</body>
</html>

<Ex08MakeGugu.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action= "Ex08MakeGugu">
	색상 선택: <input type="color" name="color">
	<br>
	 <input type= text name=num1>에서
	 <input type= text name=num2>까지의 구구단을 출력
	 <input type="submit" value="전송">
	
	</form>

</body>
</html>

<Ex08MakeGugu.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex08MakeGugu")
public class Ex08MakeGugu extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		String color = request.getParameter("color");
		PrintWriter out= response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		out.print("<table border=1 bgcolor = '"+color+"'>");
		
		
		for(int i =num1; i<=num2; i++) {
			out.print("<tr>");
			for(int j=1; j<=9; j++) {
				out.printf ("<td>%d * %d = %d\t</td>", i,j,i*j);
			}
			out.print("</tr>");
		}
		
		
		out.print("</table>");
		out.print("</html>");
		out.print("</body>");
	}

}

<ex01login.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex01login")
public class Ex01login extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//요청 데이터 인코딩
		// *코드 위치* : 데이터를 받기 전에 인코딩 먼저 수행
		
		request.setCharacterEncoding("UTF-8");
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		System.out.println(id);
		System.out.println(pw);
		
		//응답데이터 출력
		//응답데이터에 한글이 포함되어 있는 경우에는 인코딩 방식 지정 필수!
		
		//응답데이터 인코딩
		//setCharacterEncoding:데이터를 인코딩
		response.setCharacterEncoding("UTF-8");
		//setContentType:응답데이터 형식 지정 ->브라우저에게 응답데이터의 정보를 전달
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out= response.getWriter();
		
		out.print("<html>");
		out.print("<body>");
		out.print(id+"님 환영합니다");
		out.print("</body>");
		out.print("</html>");
	}

}

<Ex01 login.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 요청방식을 따로 지정하지 않으면 -->
	<!--  요청기본값은 get 방식! -->
	<!-- method: 요청방식 지정 속성(get/post) -->
	<!-- Servers/server.xml -> URIEncoding="UTF-8" 추가 -->
	<!-- Tomcat 8 -> 기본값이 UTF-8 -->
	<form action="Ex01login" method="get">
		<input type="text" name="id">
		<input type="password" name="pw">
		<input type="submit" value="GET">
	</form>
	
	<form action="Ex01login" method="post">
		<input type="text" name="id">
		<input type="password" name="pw">
		<input type="submit" value="POST">
	</form>
</body>
</html>

<Ex02 parameter.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex02parameter">
		<h4>직업</h4>
		<select name="job">
			<option value="sutudent">학생</option>
			<option value="teacher">선생님</option>
			<option value="doctor">의사</option>
		</select>
		
		<h4>성별</h4>
		<input type="radio" value="man" name="gender">남자
		<input type="radio" value="woman" name="gender">여자
		
		<h4>취미</h4>
		<input type="checkbox" value="movie" name="hobby"> 영화보기
		<input type="checkbox" value="reading" name="hobby"> 독서
		<input type="checkbox" value="exercising" name="hobby"> 운동
		
		<input type="submit">
	</form>
</body>
</html>

<ex02 parameter.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.util.Arrays;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex02parameter")
public class Ex02parameter extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String job = request.getParameter("job");
		String gender = request.getParameter("gender");
		//getParametValue(): 여러개 값을 가지고 올 때 사용
		//반환타입: String[]
		String[] hobby = request.getParameterValues("hobby");
		
		System.out.println(job);
		System.out.println(gender);
		System.out.println(Arrays.toString(hobby));
	}

}

<A02Join.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 사용자에게 데이터를 받아줄 공간 -->
    <form action="A02Join" method="post">
        <!-- 표를 만들어줄 공간: table -->
        <table width="400px" >
            <!-- Step 1 -->

            <!-- (tr>td*2)*4 -->
            <tr bgcolor="gray" height="50px">
                <th colspan="2" >Step1: 아이디/비번 입력</th>
            </tr>
            
            <tr bgcolor="whitesmoke" height="35px">
                <td align="right" >아이디: </td>
                <td ><input type="text" name="id"> </td>
            </tr>
            
            <tr bgcolor="whitesmoke" height="35px">
                <td align="right">비밀번호: </td>
                <td><input type="password" name="pw"> </td>
            </tr>
            
        <tr>
            <td align="right" bgcolor="whitesmoke" height="35px">비밀번호 확인: </td>
            <td><input type="password" name="pw1"> </td>
        </tr>
            <!-- Step 2 -->
            <!-- (tr>td*2)*4 -->
        <tr bgcolor="gray">
            <th colspan="2" height="50">Step2: 개인정보</th>
        </tr>
        
        <tr bgcolor="whitesmoke" height="35px">
            <td align="right" >성별:</td>
            <td >남<input type="radio" name="gender" value="man">여<input type="radio" name="gender" value="woman"></td>
        </tr>
        
        <tr>
            <td align="right" bgcolor="whitesmoke" height="35px">혈액형: </td>
            <td><select>
                <option value="A" name="boold">A형</option>
                <option value="B" name="boold">B형</option>
                <option value="O" name="boold">O형</option>
                <option value="AB" name="boold">AB형</option>
            </select></td>
        </tr>
        
        <tr bgcolor="whitesmoke" height="35px">
            <td align="right" >생일: </td>
            <th align="left"><input type="date" name=bd> </th>
        </tr>
            <!-- Step 3 -->
            <!-- (tr>td*2)*4 -->
        <tr bgcolor="gray">
            <th colspan="2" height="50">Step3: 선호도</th>
        </tr>
        
        <tr bgcolor="whitesmoke" height="35px">
            <td align="right">취미: </td>
            <td>
                축구<input type="checkbox" name="hobby" value="sc"> 
                야구<input type="checkbox" name="hobby" value="bs"> 
                농구<input type="checkbox" name="hobby" value="bk"> 
            </td>
        </tr>
        
        <tr bgcolor="whitesmoke" height="35px">
            <td align="right">좋아하는 색깔: </td>
            <td><input type="color" name=fc> </td>
        </tr>
        
        <tr bgcolor="gray">
            <th colspan="2" height="50">Step4: 적고 싶은 말</th>
        </tr>
        
        <tr bgcolor="whitesmoke" height="35px">
            <td colspan="2"><textarea cols="56" rows="5"></textarea> </td>
        </tr>
        <!-- 제출&초기화 -->
        <tr>
            <td colspan="2" align="center"><input type="submit"><input type="reset"></td>
        </tr>
    </table>
    
</form>
</body>
</html>

<A02Join.java>

package com.smhrd.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/A02Join")
public class A02Join extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out= response.getWriter();
		
		String id= request.getParameter("id");
		String pw= request.getParameter("pw");
		String pw1= request.getParameter("pw1");
		String gender= request.getParameter("gender");
		
		out.print("<html>");
		out.print("<body>");
		
		out.print("아이디:"+id);
        out.print("<br>");
		out.print("비밀번호:"+pw);
        out.print("<br>");

		if(pw.equals(pw1)){
			out.print("비밀번호가 일치합니다");
		}else {
			out.print("비밀번호가 일치하지 않습니다");
		}
        out.print("<br>");
		
		if(gender.equals("남")) {
			out.print("성별: man");
		}else {
			out.print("성별: woman");
		}
        
        out.print("혈액형:" + Arrays.to String(boold));
		out.print("<br>");
        
        out.print("생일:" +bd);
        out.print("<br>");
        
        out.print("취미:" + hobby);
        out.print("<br>");
        
        out.print("좋아하는 색깔:" +fc);
        out.print("<br>");
        
		
		out.print("</body>");
		out.print("</html>");
		
		
	}

}

<오후 javascript>

https://noonnu.cc/

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

https://developers.kakao.com/

https://apis.map.kakao.com/web/sample/basicMap/

 

 

<board.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <title>Document</title>
    <style>
        @font-face {
        font-family: 'Cafe24Ssurround';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}
        body {
            font-family:'Cafe24Ssurround' ;
            background-image: url('asset/img/bg.jpg');
            padding-left: 200px;
            padding-right: 200px;
        }
        .card-body {
            background-color: whitesmoke;
        }
        p {
            padding-top: 5px;
            padding-left: 20px;
            font-size: 30px;
        }
        img, #map-wrap, .list-group>li{
            padding-left: 20px;
            padding-top: 5px;
        }
        p>button{
            border: 0px;
        }
        span+button{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="card-body" style="margin-top: 100px; margin-bottom: 10px; height: 50px">
		<p>게시물제목 / 작성자 
            <button class="like"><span class="material-symbols-outlined">heart_plus</span></button>
            <button class="dislike"><span class="material-symbols-outlined">heart_minus</span></button>
            <span>20</span>
        </p>
	</div>

	<div class="card mb-2">
		<div class="card-body">
            <img alt="게시물사진" width="200px" height="200px" src="./asset/img/pg1.gif">
			<p>게시물내용</p>
            <div id="map-wrap">
                <div id="map" style="width:100%;height:350px;"></div>
            </div>
			<ul class="list-group list-group-flush">
                <li>댓글(<span class="com-cnt">0</span>)</li>
				<li class="list-group-item">
					<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
					<button type="button" class="btn btn-dark mt-3"onclick="addReply()">post reply</button>
				</li>
			</ul>
			<ul class="list-group list-group-flush" id="reply">
            <li class="list-group-item"><span>댓글내용/작성자</span><button class="deletBtn">삭제</button></li>
            </ul>
        </div>
	</div>

    <script>
        //현재 페이지가 로드 되었을 때 게시물의 좋아요 개수가 적혀져 있는 요소 불러오기
        let likeSp = document.querySelector(".dislike+span");
        document.getElementsByClassName("dislike")[0].style.display = "none";
        //좋아요 버튼 눌렀을 때
        document.querySelector(".like").addEventListener("click",function(){
            //좋아요 버튼 안보이게
            document.getElementsByClassName("like")[0].style.display="none";
            //싫어요 버튼 보이게
            document.getElementsByClassName("dislike")[0].style.display="";
            //span 태그사이의 숫자1증가
            ++likeSp.innerHTML;
        })

        //싫어요 기능
        document.querySelector(".dislike").addEventListener("click",function(){
            //좋아요 버튼 안보이게
            document.getElementsByClassName("dislike")[0].style.display="none";
            //싫어요 버튼 보이게
            document.getElementsByClassName("like")[0].style.display="";       
            //span 태그사이의 숫자1감소
            --likeSp.innerHTML;
        })

        let comCnt= document.getElementsByClassName("com-cnt")[0];
        //댓글작성
        function addReply(){
            let com= document.getElementsByTagName("textarea")[0];
            //<li class="list-group-item"><span>댓글내용/작성자</span><button class="deletBtn">삭제</button></li>
            let com_li = document.createElement("li"); //댓글 형식을 구성하는 li태그 생성 <li></li>
            com_li.className="list-group-item";

            let com_sp= document.createElement("span"); //li태그 내에 추가해야하는 span태그 생성
            com_sp.appendChild(document.createTextNode(com.value+"/작성자")); //span에 텍스트 요소 추가
            com_li.appendChild(com_sp); //li 태그에 span 태그 자식요소로 추가

            let com_btn = document.createElement("button"); //li태그 내에 추가해야하는 button 태그 생성
            com_btn.className="deleteBtn";
            com_btn.appendChild(document.createTextNode("삭제"));
            com_li.appendChild(com_btn);

            //append:뒤에추가, prepend: 앞에 추가
            document.getElementById("reply").prepend(com_li);

            //댓글창 비우기
            com.value="";
            //댓글 갯수1씩 증가
            comCnt.innerHTML=++comCnt.innerHTML;

        }
        
        // //삭제 버튼 클릭 시 해당 댓글만 삭제!
        // //html 최초에 로드되었을 때 존재했던 요소들에게만 이벤트를 추가
        // document.querySelector('.deleteBtn').addEventListener('click',function(){
        //     this.parentNode().remove();
        // })

        //#reply인 ul태그 사이에 동적으로 추가가되는 li 태그에 이벤트 부여
        //e: 이벤트객체
        document.querySelector("#reply").addEventListener("click",function(e){
            //e.target: 이벤트가 발생한 타켓 객체(사용자가 클릭한 button)
            console.log(e.target);
            if(e.target.className=="deleteBtn"){
            e.target.parentNode.remove();
            comCnt.innerHTML=--comCnt.innerHTML;
            }

        })
    </script>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=559531f04b0417679442085f18979834&libraries=services"></script>
    <script>
    // 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
    var infowindow = new kakao.maps.InfoWindow({zIndex:1});
    
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
        mapOption = {
            center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };  
    
    // 지도를 생성합니다    
    var map = new kakao.maps.Map(mapContainer, mapOption); 
    
    // 장소 검색 객체를 생성합니다
    var ps = new kakao.maps.services.Places(); 
    
    // 키워드로 장소를 검색합니다
    ps.keywordSearch('동명동 포카포카', placesSearchCB); 
    
    // 키워드 검색 완료 시 호출되는 콜백함수 입니다
    function placesSearchCB (data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
    
            // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
            // LatLngBounds 객체에 좌표를 추가합니다
            var bounds = new kakao.maps.LatLngBounds();
    
            for (var i=0; i<data.length; i++) {
                displayMarker(data[i]);    
                bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
            }       
    
            // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
            map.setBounds(bounds);
        } 
    }
    
    // 지도에 마커를 표시하는 함수입니다
    function displayMarker(place) {
        
        // 마커를 생성하고 지도에 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x) 
        });
    
        // 마커위에 마우스 올렸을 때 이벤트 등록합니다
        kakao.maps.event.addListener(marker, 'mouseover', function() {
            // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
            infowindow.setContent('<div style="padding:5px;font-size:12px;"><img src="./asset/img/포카포카.jpg" width="200px" height="200px"></div>');
            infowindow.open(map, marker);
        });

        //마커위에서 마우스를 내렸을 때 이벤트
        kakao.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
        });
    }
    </script>
</body>
</html>

 

 

<map.html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도 생성하기</title>
    
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=559531f04b0417679442085f18979834"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>
</body>
</html>

 

 

 

 

728x90
LIST

'Full Stack 교육 회고록' 카테고리의 다른 글

9/26(오전) jsp 쿠키와 세션  (1) 2022.09.26
9/23- JSP  (0) 2022.09.23
9/21 jsp/servlet (was구조, servlet 특징, request vs response, url mapping)  (0) 2022.09.21
9/20 css(flow, overflow,position) javascript(jquery, addremove)  (0) 2022.09.20
9/19 css(flex) javascript(j.query)  (2) 2022.09.19

'Full Stack 교육 회고록' Related Articles

티스토리툴바