고정 헤더 영역
상세 컨텐츠
본문
오늘은
와 티스토리 계정을 잃어버릴 뻔 했답니다..
왠지 모르게 이메일계정과 티스토리 블로그의 연동이 끊겨서 고생을 했는데요
아무리 로그인을 하고 찾아봐도 새로 시작하기 밖에 없고
기존의 블로그를 찾을수가 없었는데
또 갑자기 평소대로 돌아와버렸습니다... 정말이지..
서버의 문제였을까요??
학원 수업
Jsp 태그(액션 태그) - 템플릿 엔진(html에 자바 코드를 넣은 언어),
자바 빈즈(클래스) -> <jsp:useBean>
<% %> -> <% member.getId() %>
Servlet - 응답(브라우저) : setContentType(text/html)
url 매핑 @WebServlet(/member)
MVC 패턴
Jsp(View) + Servletm(Controller) + DB(Model오라클, mysql)
EL(Expression Language)언어 - ${ } = jsp의 <%%> 표현식을 대체하기 위해 사용되는 언어
사용법 -> ${member.id}
1. 표현언어는 $로 시작한다
2. 모든 내용은 {표현식}과 같이 표기함
3. 표현식 구조 - 객체이름.멤버변수
4. 기본적인 연산을 할 수 있다 - 산술, 비교, 논리, 조건 연산을 할 수 있음
비교 연산 - ==, >, <, !=, &&, ||, !
eq(==), lt(<), gt(>), not eq(!=)
and(&&), or(||), not(!)
empty, not empty
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL 언어 실습</title>
</head>
<body>
<h2>EL 언어 실습</h2>
<h3>문자, 숫자 데이터 표기</h3>
${100}<br>
${"안녕하세요"}<br>
${100+1}<br>
<h3>산술 연산자</h3>
${10+4 }<br>
${10-4 }<br>
${10*4 }<br>
${10/4 }<br>
${10%4 }<br>
<h3>비교 연산</h3>
${12 == 12 }, ${12 eq 12 }<br>
${12 != 12 }, <%-- ${12 ne 12 } --%><br>
${12 > 10 }, ${12 gt 10 }<br>
${12 < 10 }, ${12 lt 10 }<br>
<h3>논리 연산</h3>
${!(12 eq 10)}<br>
${not(12 eq 10)}<br>
${(10 eq 12) && (13 > 12)}<br>
${(10 eq 12) and (13 > 12)}<br>
${(10 eq 12) || (13 > 12)}<br>
${(10 eq 12) or (13 > 12)}<br>
</body>
</html>
폼 데이터
<% request.getParameter("uid") %>
-> ${param.uid}
<%-- <%@page import="el.Product"%> --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 선택</title>
<style>
#container {width: 80%; margin: 30px auto; text-align: center;}
</style>
</head>
<jsp:useBean id="product" class="el.Product" />
<%-- <% Product product = new Product(); %> --%>
<body>
<div id="container">
<h2>상품 선택</h2>
<hr>
<p>선택한 상품 : ${param.select}</p>
<p>num1 + num2 = ${product.num1 + product.num2}</p>
<%-- <p>num1 + num2 = <%= product.getNum1() + product.getNum2() %> --%>
</div>
</body>
</html>
사용자 - 나의 정보, 상품구매
관리자 - 회원목록, 상품등록, 로그인폼
Jsp 보안(Secutity) - 시큐리티
서버(톰캣) 연동(tomcat-user.xml) - web.xml
1. 기본 인증방식
2. 폼 기반 인증
action = "j_security_check"
username 속성 - j_username
password 속성 - j_password
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<!-- 보안(시큐리티) 설정 -->
<security-role>
<role-name>role1</role-name>
</security-role>
<security-constraint>
<web-resource-collection>
<web-resource-name>jwbook2</web-resource-name>
<url-pattern>/security/security1.jsp</url-pattern>
<http-method>GET</http-method>
</web-resource-collection>
<auth-constraint>
<role-name>role1</role-name>
</auth-constraint>
</security-constraint>
<!-- 기본 인증 방식 -->
<!--<login-config>
<auth-method>BASIC</auth-method>
</login-config> -->
<!-- 폼 기반 인증 -->
<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/security/adminLogin.jsp</form-login-page>
<form-error-page>/security/loginFailed.jsp</form-error-page>
</form-login-config>
</login-config>
</web-app>
response.sendRedirect()
RequestDispathcer 클래스
forward()
회원가입 - 파일첨부
게시판 - 파일업로드
<form action="" method="post" enctype="multipart/form-data">
아이디
비밀번호
이름
이메일
파일첨부 <input type="file" name="filename">
process => 이원화 처리(request대신 multi를 사용)
일반 name속성 - multi.getParameter()
파일 name속성 - multi.getFilenames()
라이브러리 필요
1. MultipartRequest 클래스 사용
cos.jar 파일 활용
2. commons-fileupload
* Form
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 업로드</title>
</head>
<body>
<form action="file01Process.jsp" method="post" enctype="multipart/form-data">
<p>회원 이름: <input type="text" name="username"></p>
<p>파일 제목: <input type="text" name="title"></p>
<p>파일 첨부: <input type="file" name="filename"></p>
<input type="submit" value="전송">
</form>
</body>
</html>
* Process
<%@page import="java.io.File"%>
<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
// 폴더 경로
String realFolder = "C:/jspworks/jwbook2/src/main/webapp/upload";
// 5가지의 생성자 - request, 업로드폴더경로(변수가능), 파일사이즈, 인코딩, 중복파일이름추가
MultipartRequest multi = new MultipartRequest(request,realFolder, 5*1024*1024, "utf-8", new DefaultFileRenamePolicy());
// 일반 name 속성
/*String name = request.getParameter("username");
String title = request.getParameter("title"); */
String name = multi.getParameter("username");
String title = multi.getParameter("title");
out.println("이름" + name +"<br>");
out.println("제목" + title + "<br>");
// 파일 name 속성
Enumeration<String> files = multi.getFileNames();
while(files.hasMoreElements()){
String fname = files.nextElement(); // 파일의 name속성이 있으면
String filename = multi.getFilesystemName(fname); // 업로드 된 파일
String original = multi.getOriginalFileName(fname); // 원본 파일
String type = multi.getContentType(fname); // 컨텐츠 유형
// 파일의 용량 (file 객체 생성)
File file = multi.getFile(fname);
out.println("업로드 된 파일 이름: " + filename + "<br>");
out.println("원본 파일 이름: " + original + "<br>");
out.println("파일 컨텐츠 유형: " + type + "<br>");
if(file != null) {
out.println("파일 크기: " + file.length() +"B");
}
}
%>
회원가입 페이지 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="join_style.css">
<title>회원가입</title>
</head>
<body>
<div id="container">
<div id="top">
<div class="top-top">
<div class="mini-shortcut"> <!-- 상단 좌측 링크 아이콘 -->
<ul class="ms-list">
<li><a href="">youtube</a></li>
<li><a href="">instagram</a></li>
<li><a href="">twitter</a></li>
</ul>
</div>
<div class="top-top-menu"> <!-- 상단 미니메뉴 -->
<ul class="ttm-list">
<li><a href="">JOIN</a></li>
<li><a href="">LOG IN</a></li>
<li><a href="">MY PAGE</a></li>
<li><a href="">BASKET</a></li>
<li><a href="">ORDER INQUIRY</a></li>
<li><a href="">BOARD</a></li>
<li><input type="text" id="search"> 🔍</li> <!-- 상단 검색창 -->
</ul>
</div>
</div>
<div class="top-mid"> <!-- 메인 로고, 사진 -->
<a href=""><img class="logo-pic" src="img/logoimg.jpg" alt=""></a>
</div>
<div class="top-btm"> <!-- 사이트 내 각종 메뉴 모음 -->
<div class="top-btm-menu">
<ul class="tbm-list">
<li><a href="">MENU1</a></li>
<li><a href="">MENU2</a></li>
<li><a href="">MENU3</a></li>
<li><a href="">MENU4</a></li>
<li><a href="">MENU5</a></li>
<li><a href="">MENU6</a></li>
<li><a href="">MENU7</a></li>
<li><a href="">MENU8</a></li>
<li><a href="">MENU9</a></li>
</ul>
</div>
</div>
</div>
<div id="mid">
<h3>JOIN</h3>
<form action="#" id="mid_form">
<fieldset id="join_info">
<legend>기본정보</legend>
<div>
<table>
<tbody>
<tr>
<th>아이디</th>
<td><input type="text"><span>(영문 소문자/숫자, 4~20자)</span></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password"><span>(영문 대소문자/숫자/특수문자, 10~20자)</span></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text"></td>
</tr>
<tr>
<th>연락처</th>
<td><input type="text"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="text"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" size="6"> - <input type="text" size="6"><span>우편 번호</span></td>
<td><input type="text" size="50"><span>기본 주소</span></td>
<td><input type="text" size="50"><span>나머지 주소</span></td>
</tr>
</tbody>
</table>
</div>
</fieldset>
<fieldset id="using_agree">
<legend>이용약관 동의</legend>
<div>
<div class="law_list">
<div class="textbox">
<p>
1. 개인정보 수집목적 및 이용목적
<br>가. 서비스 제공에 관한 계약 이행 및 서비스 제공에 따른 요금정산
<br>콘텐츠 제공 , 구매 및 요금 결제 , 물품배송 또는 청구지 등 발송 , 금융거래 본인 인증 및 금융 서비스
<br>나. 회원 관리
<br>회원제 서비스 이용에 따른 본인확인 , 개인 식별 , 불량회원의 부정 이용 방지와 비인가 사용 방지 , 가입 의사 확인 , 연령확인 , 만14세 미만 아동 개인정보 수집 시 법정 대리인 동의여부 확인, 불만처리 등 민원처리 , 고지사항 전달
</p>
<br>
<p>
2. 수집하는 개인정보 항목 : 이름 , 생년월일 , 성별 , 로그인ID , 비밀번호 , 자택 전화번호 , 휴대전화번호 , 이메일 , 14세미만 가입자의 경우 법정대리인의 정보
</p>
<br>
<p>
3. 개인정보의 보유기간 및 이용기간
<br>원칙적으로, 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.
<br>가. 회사 내부 방침에 의한 정보 보유 사유
<br>o 부정거래 방지 및 쇼핑몰 운영방침에 따른 보관 : 1년
<br>나. 관련 법령에 의한 정보보유 사유
<br>o 계약 또는 청약철회 등에 관한 기록
<br>-보존이유 : 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 5년
<br>o 대금 결제 및 재화 등의 공급에 관한 기록
<br>-보존이유: 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 5년
<br>o 소비자 불만 또는 분쟁처리에 관한 기록
<br>-보존이유 : 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 3년
<br>o 로그 기록
<br>-보존이유: 통신비밀보호법
<br>-보존기간 : 3개월
<br>※ 동의를 거부할 수 있으나 거부시 회원 가입이 불가능합니다.
</p>
</div>
</div>
<p class="agree_box">
<span class="Qagree">이용약관에 동의하십니까?</span>
<input type="checkbox" name="use_agree" id="use_agree">
<label for="use_agree"> 동의</label>
</p>
</div>
</fieldset>
<fieldset id="personal_agree">
<legend>개인정보 수집 및 이용 동의</legend>
<div>
<div class="law_list">
<div class="textbox">
<p>
1. 개인정보 수집목적 및 이용목적
<br>가. 서비스 제공에 관한 계약 이행 및 서비스 제공에 따른 요금정산
<br>콘텐츠 제공 , 구매 및 요금 결제 , 물품배송 또는 청구지 등 발송 , 금융거래 본인 인증 및 금융 서비스
<br>나. 회원 관리
<br>회원제 서비스 이용에 따른 본인확인 , 개인 식별 , 불량회원의 부정 이용 방지와 비인가 사용 방지 , 가입 의사 확인 , 연령확인 , 만14세 미만 아동 개인정보 수집 시 법정 대리인 동의여부 확인, 불만처리 등 민원처리 , 고지사항 전달
</p>
<br>
<p>
2. 수집하는 개인정보 항목 : 이름 , 생년월일 , 성별 , 로그인ID , 비밀번호 , 자택 전화번호 , 휴대전화번호 , 이메일 , 14세미만 가입자의 경우 법정대리인의 정보
</p>
<br>
<p>
3. 개인정보의 보유기간 및 이용기간
<br>원칙적으로, 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.
<br>가. 회사 내부 방침에 의한 정보 보유 사유
<br>o 부정거래 방지 및 쇼핑몰 운영방침에 따른 보관 : 1년
<br>나. 관련 법령에 의한 정보보유 사유
<br>o 계약 또는 청약철회 등에 관한 기록
<br>-보존이유 : 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 5년
<br>o 대금 결제 및 재화 등의 공급에 관한 기록
<br>-보존이유: 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 5년
<br>o 소비자 불만 또는 분쟁처리에 관한 기록
<br>-보존이유 : 전자상거래등에서의소비자보호에관한법률
<br>-보존기간 : 3년
<br>o 로그 기록
<br>-보존이유: 통신비밀보호법
<br>-보존기간 : 3개월
<br>※ 동의를 거부할 수 있으나 거부시 회원 가입이 불가능합니다.
</p>
</div>
</div>
<p class="agree_box">
<span class="Qagree">개인정보 수집 및 이용 동의하십니까?</span>
<input type="checkbox" name="person_agree" id="person_agree">
<label for="person_agree"> 동의</label>
</p>
</div>
</fieldset>
<div class="btnbox">
<button type="submit" class="join_btn">회원 가입</button>
<button type="reset" class="reset_btn">가입 취소</button>
</div>
</form>
</div>
<div id="bottom">
<div class="cst-center">
<h3>CUSTOMER CENTER</h3>
<p>
TEL 010-0000-0000 <br>
Kakao team_2 <br>
AM 10 ~ PM 6 <br>
Closed ~ Weekend, Holiday
</p>
</div>
<div class="bank-info">
<h3>BANK INFO</h3>
<p>
농협 123-1234-1234-12 <br>
국민 123456-12-123456 <br>
예금주 : (주)team_2
</p>
</div>
<div class="btm-icon">
<ul class="btm-icon-list">
<li><a href=""><img class="icon" src="" alt="">o</a></li>
<li><a href=""><img class="icon" src="" alt="">o</a></li>
<li><a href=""><img class="icon" src="" alt="">o</a></li>
<li><a href=""><img class="icon" src="" alt="">o</a></li>
<li><a href=""><img class="icon" src="" alt="">o</a></li>
</ul>
</div>
</div>
<footer id="footer">
<div class="footer-info">
<p class="span-list">
<span>team_2 : KHacademy</span>
<span>address : korea seoul</span>
<span>tel : 1234-1234</span>
<span>e-mail : team_2@naver.com</span> <br>
<span>leader : choi jae won</span>
<span>member : seok min / dong hyeon / ji seong / je heon / seung beom </span> <br>
<span>copyright ⓒ team_2. All rights reserved. Design by team_2.</span>
</p>
</div>
</footer>
</div>
</body>
</html>
/* 공통 스타일 */
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
#container {
width: 1300px;
height: 100%;
background-color: #fefeee;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
/* #top */
#top {
width: 100%;
height: 250px;
}
/* .top-top */
.top-top {
width: 100%;
height: 30px;
border-bottom: 1px solid #ddd;
padding: 0 40px;
background-color: #000;
}
.mini-shortcut {
float: left;
}
.ms-list li{
float: left;
padding: 5px;
font-size: 0.8rem;
}
.ms-list li a{
color: #fff;
}
.top-top-menu {
float: right;
}
.ttm-list li {
float: left;
padding: 5px;
font-size: 0.8rem;
}
.ttm-list li a{
color: #fff;
}
/* .top-mid */
.top-mid {
width: 100%;
height: 180px;
}
.logo-pic {
width: 100%;
height: 180px;
}
/* .top-btm */
.top-btm {
width: 100%;
height: 40px;
background-color: #ffa;
}
.top-btm-menu .tbm-list{
text-align: center;
}
.tbm-list li {
display: inline-block;
padding: 9px 20px;
height: 40px;
}
/* #mid */
#mid {
background-color: #fff;
margin: 30px;
}
#mid h3 {
padding: 50px;
text-align: center;
background-color: #ffa;
}
#mid_form {
margin: 0;
padding: 50px 100px;
width: 100%;
}
#mid fieldset {
margin: 30px 0;
padding: 10px 20px 30px 20px;
border-radius: 10px;
line-height: 2;
width: 100%;
text-align: left;
}
#mid table {
margin: 0;
border-collapse: collapse;
}
#mid fieldset legend {
display: inline-block;
padding: 10px;
background-color: #ffe;
border-radius: 15px;
font-weight: bold;
font-size: 1.2rem;
}
#join_info table {
border-radius: 10px;
padding: 20px 0;
line-height: 3;
}
table tr {
border: 1px solid #ccc;
}
table tr th {
text-align: left;
padding: 0 20px;
width: 15%;
border: 1px solid #ccc;
background: #ffe;
}
table tr td {
width: 100%;
display: inline-block;
}
table tr td input {
padding: 5px;
margin-left: 20px;
}
table tr span {
padding: 0 20px;
}
.textbox {
width: 100%;
height: 300px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: auto;
font-size: 0.9rem;
line-height: 3;
}
.Qagree {
font-weight: bold;
margin-right: 20px;
}
.btnbox {
text-align: center;
}
button {
text-align: center;
padding: 10px;
margin: 5px 20px;
font-size: 1.2rem;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: 0px 5px 5px #ccc;
}
.join_btn {
background: #ffa;
}
.reset_btn {
background: #ffd;
}
/* #bottom */
#bottom {
width: 80%;
height: 170px;
border-top: 1px solid #ccc;
}
#bottom div {
float: left;
}
#bottom div h3 {
margin: 10px 0 15px 10px;
}
#bottom div p {
font-size: 0.8rem;
line-height: 2;
}
.cst-center {
padding-right: 230px;
}
.bank-info {
padding-right: 230px;
}
.btm-icon {
padding-right: 0;
}
.btm-icon-list li{
float: left;
padding : 10px;
margin: 30px 0px;
}
/* footer */
#footer {
width: 100%;
height: 120px;
clear: both;
margin-top: 30px;
background-color: #000;
color: #fff;
}
.footer-info {
text-align: center;
border-top: 2px solid #000;
}
.span-list {
margin: 20px;
}
.span-list span {
line-height: 2;
font-size: 0.8rem;
}
2023. 11. 27 (월)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 76일차 (0) | 2023.11.30 |
|---|---|
| 프로그래머 도전기 75일차 (2) | 2023.11.28 |
| 프로그래머 도전기 73일차 (4) | 2023.11.23 |
| 프로그래머 도전기 72일차 (5) | 2023.11.22 |
| 프로그래머 도전기 71일차 (4) | 2023.11.20 |
