Java 웹 개발

21.10.12 - 웹 개발 입문 42일차

개발이란 2021. 10. 12. 22:39

웹 - 서블릿

 

Q. 제품 정보 삭제 서블릿

package web05.servlet;

import java.io.IOException;

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

import web05.beans.ProductDao;

@WebServlet(urlPatterns = "/product/delete.txt")
public class ProductDeleteServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {

			int no = Integer.parseInt(req.getParameter("no"));

			ProductDao productDao = new ProductDao();
			boolean success = productDao.delete(no);

			resp.setCharacterEncoding("MS949");
			if (success) {
				resp.getWriter().println("제품 정보 삭제 성공");
			} else {
				resp.getWriter().println("존재하지 않는 제품 번호");
			}

		}

		catch (Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

 

Q. 시험 정보 목록/검색 서블릿을 구현

package web05.servlet;

import java.io.IOException;
import java.util.List;

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

import web05.beans.ExamDao;
import web05.beans.ExamDto;

//파라미터 여부에 따라 목록 또는 검색을 수행하는 서블릿 구현
@WebServlet(urlPatterns = "/exam/find.txt")
public class ExamFindServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력
			String column = req.getParameter("column");
			String keyword = req.getParameter("keyword");

			//처리
			boolean searchMode = column != null && !column.equals(" ") 
															&& keyword != null && !keyword.equals(" ");

			ExamDao examDao = new ExamDao();

			List<ExamDto> list;
			if(searchMode) {//검색
				list = examDao.select(column, keyword);
			}
			else {//목록
				list = examDao.select();
			}

			//출력
			resp.setCharacterEncoding("MS949");
			for(ExamDto examDto : list) {
				resp.getWriter().println(examDto.toString());
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

Q. 시험정보 단일조회

package web05.servlet;

import java.io.IOException;

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

import web05.beans.ExamDao;
import web05.beans.ExamDto;

@WebServlet(urlPatterns = "/exam/detail.txt")
public class ExamDetailServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력
			int examId = Integer.parseInt(req.getParameter("examId"));
			
			//처리
			ExamDao examDao = new ExamDao();
			ExamDto examDto = examDao.select(examId);
			
			//출력
			resp.setCharacterEncoding("MS949");
			if(examDto == null) {
				resp.getWriter().println("찾으시는 번호의 시험정보가 없습니다");
			}
			else {
				resp.getWriter().println("시험지정보 : " + examDto.getExamId());
				resp.getWriter().println("학생명 : " + examDto.getStudent());
				resp.getWriter().println("과목명 : " + examDto.getSubject());
				resp.getWriter().println("유형 : " + examDto.getType());
				resp.getWriter().println("점수 : " + examDto.getScore());
			}
			
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

 

웹 - HTML 페이지 제작

HTML
HyperText Markup Language의 줄임말로 하이퍼텍스트 구조를 만들기 위해 사용하는 언어이다.

하이퍼텍스트
텍스트가 서로 연결되어서 이동 가능한 형태로 묶여있는 구조

형태
HTML은 기본적으로 `Tag`라는 방식을 채택하여 구조를 구현한다.

'<태그이름>'을 시작태그라 하고, '</태그이름>'을 종료태그라 부른다. 
시작태그부터 종료태그까지가 하나의 범위가 되고 해당 범위에는 이름에 따라 ***효과***가 부여된다.

HTML을 공부한다는 것은 어떤 이름의 태그가 어떤 효과를 가지고 있는지 살펴보는 것과 같다.

경우에 따라서는 범위를 지정할 필요가 없거나 지정할 수 없는 태그도 있으며, 이 때에는 종료태그를 사용하지 않는다.

주요 HTML 태그
- html : HTML 문서의 범위를 지정. 단 하나만 존재해야 하며, 안써도 자동 생성된다.
- head : HTML 문서의 정보 영역. 편지봉투와 같은 역할. 화면의 속성, 정보, 특징등을 작성.
- body : HTML 문서의 표시 영역. 편지지와 같은 역할. 실제 화면에 표시될 내용이 작성.
- title : 문서의 제목
- h1 ~ h6 : Heading 태그. 헤드라인과 같이 한 줄에 표시될 내용을 작성. 숫자가 작을 수록 상위 헤드라인. 
- meta : 문서의 속성을 표시하기 위한 태그

 

 

 

Dynamic Web Project으로 web06 생성 src -> main -> webapp 경로 아래에 new로 hello.html 파일 생성

작성 경로

 

Q. 예제 작성

<html>
	<head>
		<title>Hello HTML</title>
	</head>
	<body>
		<h1>Hello Web Page</h1>
		<h2>Hello Web Page</h2>
		<h3>Hello Web Page</h3>
	</body>
</html>

 

구현된 모습

 

 

 

Q. 한글 표시 하기

= <meta charset="UTF-8"> 

<html>
	<head>
		<title>한글 제목</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1>HTML 배우기 과정!</h1>
	</body>
</html>

 

 

웹 - img 태그 사용법


img 태그는 이미지를 표시할 수 있는 태그이다.
= 종료 태그가 존재하지 않는다.
= 태그 생성 후 src 속성을 통하여 이미지의 주소를 작성해야 한다.
= 크기를 width, height라는 속성으로 설정할 수 있다.
= 단위는 pixel(px)이며, 1px은 모니터에 찍히는 점 하나의 크기를 의미한다.

= 주석처리 <!-- 구분선 -->

 


내가 가진 이미지를 표시하고 싶을 경우
= 절대로 물리경로로는 링크를 걸 수 없다(만약에 된다면 해킹이 가능)
= 프로젝트에 탑재시켜서 http로 시작하는 주소가 부여되어야 링크 설정이 가능
= 편의상 프로토콜(http), 아이피(localhost), 포트(8080)는 생략이 가능
= 컨텍스트 경로부터는 모두 기재를 해야한다(절대경로, absolute path)
= 현재 파일을 기준으로 계산하여 경로를 기재해도 된다(상대경로, relative path)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img 태그 배우기</title>
</head>
<body>

	<img src="http://localhost:8080/web06/img/background.jpg" width="300"
		height="200">

	<hr>

	<img src="//localhost:8080/web06/img/background.jpg" width="300"
		height="200">

	<hr>

	<img src="/web06/img/background.jpg" width="300" height="200">

	<hr>

	<img src="/img/background.jpg" width="300" height="200">  <!--안되는 경로-->

	<hr>

	<img src="background.jpg" width="300" height="200">

	<hr>

	<img src="./background.jpg" width="300" height="200">

</body>
</html>

 

Q. SNS 로그인 구현

= 가짜 이미지 생성 방법

= 절대경로로 구현 방법

= 상대경로로 구현 방법

webapp -> image 폴더 생성후 이미지 저장

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SNS 로그인 구현</title>
</head>
<body>

	<!-- 
		가짜 이미지(dummy image)를 이용하여 자리를 채울 수 있다.
		= https://placeholder.com
		= https://placeimg.com
	 -->
		<img src=https://via.placeholder.com/150>

	<hr>
	<!-- 
		절대경로(absolute path)를 이용하여 이미지를 연결 설정
		= 프로토콜 생략 가능
		= 서버 주소와 포트 생략 가능
		= (주의) context root(간판) 생략 불가!
	 -->
		<h1>SNS 로그인 (절대경로)</h1>
		<img src="http://localhost:8080/web06/image/구글.png" width="50" height="50">
		<img src="//localhost:8080/web06/image/카카오.jfif" width="50" height="50">
		<img src="/web06/image/트위터.png" width="50" height="50">
		<img src="/image/페이스북.png" width="50" height="50">
	
	<!-- 
		상대경로(relative path)를 이용하여 이미지를 연결 설정
		= ./은 현재 위치를 의미
		= ../은 상위 위치를 의미
	 -->
	<hr>
		<h1>SNS 로그인 (상대경로)</h1>
		<img src="../image/구글.png" width="50" height="50">
		<img src="../image/카카오.jfif" width="50" height="50">
		<img src="../image/트위터.png" width="50" height="50">
		<img src="../image/페이스북.png" width="50" height="50">
	
	
</body>
</html>

 

 

웹 - img 태그 alt 속성

img 태그에서 alt 속성이 가지는 의미
= alt 속성은 이미지가 있을 경우 표시되지 않는다
= 시각장애인 또는 기타 접근성이 낮은 대상을 위한 속성
= 네이버 널리 에서 접근성 체험이 가능
= 전맹 시각장애인이 사용하는 리더기에서 이미지를 읽을 경우 나오는 음성에 해당하는 글자
= 웹 표준에서 권장하는 사항(강제가 아님)

 

이미지 없을 때

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alt 속성</title>
</head>
<body>

	<img alt="카카오 SNS 로그인 버튼">

</body>
</html>

 

 

이미지 있을 때

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alt 속성</title>
</head>
<body>

	<img src="../image/카카오.jfif" alt="카카오 SNS 로그인 버튼">

</body>
</html>

 

 

웹 - a 태그 사용법

A 태그 (Anchor 태그)
= 하이퍼링크 태그
= 클릭 시 다른 대상으로 이동할 수 있는 순간이동 장치
= 이동할 대상의 주소를 href 라는 속성에 작성
= 이미지에도 링크 설정 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anchor 태그</title>
</head>
<body>

	 <a href="https://www.naver.com">네이버로 이동</a>
	 
	 <hr>
	 
	  <a href="https://www.kakaocorp.com/page/">
	  	   <img src="../image/카카오.jfif" width="50" height="50">
	  </a>
</body>
</html>

 

 

Q. 다음 정보를 확인할 수 있도록 a 태그를 생성하여 링크를 구현하세요
<a>a태그 첫 번째 예제 보기</a>
<a>img태그 첫 번째 예제 보기</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anchor 문제</title>
</head>
<body>

	<a href="/web06/a/test01.html">a태그 첫 번째 예제 보기</a>

	<hr>
    
	<a href="/web06/img/test01.html">a태그 첫 번째 예제 보기</a>

</body>
</html>

 

Q. 우리는 web05 프로젝트에 exam 관련하여 처리할 수 있는 서블릿들을 구현해두었습니다.
다음 정보를 확인할 수 있도록 a 태그를 생성하여 링크를 구현하세요
(참고) web05도 서비스가 되고 있어야 합니다.
<a>서술형 시험 결과 보러가기</a>
<a>문제해결 시나리오 시험 결과 보러가기</a>
<a>평가자 체크리스트 시험 결과 보러가기</a>
<a>피카츄 시험 결과 보러가기</a>
<a>프로그래밍 언어활용 시험 결과 보러가기</a>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anchor 문제</title>
</head>
<body>

	<a href="/web05/exam/search.txt?column=type&keyword=서술형">서술형 시험 결과 보러가기</a>
	<hr>
	<a href="/web05/exam/search.txt?column=type&keyword=문제해결">문제해결 시나리오 시험 결과 보러가기</a>
	<hr>
	<a href="/web05/exam/search.txt?column=type&keyword=평가자">평가자 체크리스트 시험 결과 보러가기</a>
	<hr>
	<a href="/web05/exam/search.txt?column=student&keyword=피카츄">피카츄 시험 결과 보러가기</a>
	<hr>
	<a href="/web05/exam/search.txt?column=subject&keyword=프로그래밍">프로그래밍 언어활용 시험 결과 보러가기</a>
	
</body>
</html>