[JSP] 005. Emmet(에밋) , 데이터베이스 연결 및 데이터 처리

SsY/Class 2023. 5. 22. 18:10

728x90

Emmet
- EmmetApp

Emmet (에밋)
- 웹 클라이언트 파트 작업시의 Tip 으로 생각
- 간단하게만 하고 넘어 감

거의 웬만한 도구에는 기본으로 설치가 되고 있다 / url : emmit 다운로드창 연결

■■■ Emmet(에밋) ■■■

○ 개요

   - 기존에는 Zen Coding(젠코딩) 이라는 이름으로 사용되었다.
   - 이후... Google 에서 이 도구를 수용하면서 emmet 이라는 이름으로 변경되었다.
   - HTML 생산성 향상 도구(HTML 코딩을 빠르게 하기 위한 플로그인)
   - CSS 선택자 사용(CSS3 지원)
     →HTML 을 CSS 선택자를 통해 검색하는 방법 대신
       CSS 선택자를 활용하여 HTML 을 생성하도록 하는 개념

○ 환경 설정

   - 대부분의 툴에서 지원하고 있음
     (※ 그리고 대부분의 편집기 내에서의 액션 키 : Ctrl + E)

   - http://emmet.io
     사용할 편집기에 적합한 파일을 다운로드 및 설치하여 사용 가능

   ※ 특이사항 
      Emmet 플러그인 설치 이후 이클립스 기본 단축키와 기능이 중복되는 항목이 존재함
                               --------------------
                                     Ctrl + D

EmmetTest01.html
- Emmet 관찰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EmmetTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
	<h1>※ 기능 적용 액션 키 → Ctrl + E</h1>
	<hr>
</div>
===========================================================================================
1. 태그 선택자

div (입력 후 Ctrl+E 하면 아래와 같이 생성)
<div></div>

<div>넣을 내용</div>

div{넣을 내용}
<div>넣을 내용</div>

div{삽입할 내용}
<div>삽입할 내용</div>

a
<a href="주소">주소로 이동</a>

a
<a href="www.naver.com">네이버</a>

img
<img src="" alt="" />

table
<table></table>

span
<span></span>

p
<p></p>
===========================================================================================
2. 아이디 선택자

div#box
<div id="box"></div>

div#box{test}
<div id="box">test</div>

#box
<div id="box"></div>
<!-- div가 레이아웃 구성에 가장 많이 사용되기 때문에 #id 만 하면 div 로 생성됨 --> 

#box{1234}
<div id="box">1234</div>
===========================================================================================
3. 클래스 선택자

div.items
<div class="items"></div>

div.items{aaa}
<div class="items">aaa</div>

.items
<div class="items"></div>

.items{bbb}
<div class="items">bbb</div>
===========================================================================================
4. 조합

div#box.items
<div id="box" class="items"></div>

div#box.items.unit.control
<div id="box" class="items unit control"></div>

div#box.items.unit{aaa}
<div id="box" class="items unit">aaa</div>

#box.items.unit{bbb}
<div id="box" class="items unit">bbb</div>
===========================================================================================
5. 속성 선택자

div[title]
<div title=""></div>

div[title='test']
<div title="test"></div>

a[href='www.naver.com' title='네이버']
<a href="www.naver.com" title="네이버"></a>

a[href='www.naver.com' title='네이버']{해당 사이트로 이동}
<a href="www.naver.com" title="네이버">해당 사이트로 이동</a>
===========================================================================================
6. PCDATA

div{박스}
<div>박스</div>

a{홈페이지로 이동}
<a href="">홈페이지로 이동</a>

p{문단내용기술}
<p>문단내용기술</p>
===========================================================================================
7. 반복 생성 

div*5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

img[src=images/dog.jpg]*5
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />
<img src="images/dog.jpg" alt="" />

.box*5
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{content}*4
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>

<!-- $을 붙이면 1부터 순서대로 생성이 가능 -->

#box$*5
<div id="box1">커서가 여기서 깜빡</div>
<div id="box2">탭키누르면 여기로</div>
<div id="box3">다음은 여기</div>
<div id="box4">여기</div>
<div id="box5">끝</div>

.box#box${box$}*5
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
<div class="box" id="box4">box4</div>
<div class="box" id="box5">box5</div>

img[src=images/obj$.jpg]*5
<img src="images/obj1.jpg" alt="" />
<img src="images/obj2.jpg" alt="" />
<img src="images/obj3.jpg" alt="" />
<img src="images/obj4.jpg" alt="" />
<img src="images/obj5.jpg" alt="" />

h$*6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

h${제목$}*6
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
===========================================================================================
8. 연속 생성

div+p
<div></div>
<p></p>

h1{제목}+p{내용}*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<p>내용</p>

(h1{제목}+p{내용}*2)*5
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>
<h1>제목</h1>
<p>내용</p>
<p>내용</p>

div+a+div+p+div+img
<div></div>
<a href=""></a>
<div></div>
<p></p>
<div></div>
<img src="" alt="" />
===========================================================================================
9. 하위 생성

table+
<table>
	<tr>
		<td>커서가 여기에!</td>
	</tr>
</table>

ul+
<ul>
	<li>커서커서</li>
</ul>

ol+
<ol>
	<li>커서</li>
</ol>

select+
<select name="커서1" id="탭">
	<option value="탭2">탭3</option>
</select>
===========================================================================================
10. 자식 생성

div>p
<div>
	<p></p>
</div>

div>p*5
<div>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div>

(div>p*2)*3
<div>
	<p>커서1</p>
	<p>탭</p>
</div>
<div>
	<p>탭</p>
	<p>탭</p>
</div>
<div>
	<p>탭</p>
	<p>탭</p>
</div>

table#tbl>tr*5>td*3
<table id="tbl">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

table#tbl>tr*3>td#label$+td.content
<table id="tbl">
	<tr>
		<td id="label1"></td>
		<td class="content"></td>
	</tr>
	<tr>
		<td id="label2"></td>
		<td class="content"></td>
	</tr>
	<tr>
		<td id="label3"></td>
		<td class="content"></td>
	</tr>
</table>

table#tbl>(tr>th*3)+((tr>td*3)*5)
<table id="tbl">
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
===========================================================================================
11. 더미 키워드

<!-- 매번 다른것을 생성... -->

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Itaque velit ab accusantium id temporibus molestias voluptates 
sit dolorem delectus voluptas praesentium similique corrupti numquam! 
Dicta quam cupiditate incidunt beatae cum.

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Nobis voluptatem dolor doloribus dolorem vitae porro rerum 
consectetur iste quisquam sunt? Voluptatibus repellat neque laudantium 
asperiores natus ipsam architecto ipsa voluptatem!

lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quos odio similique porro magni nisi dolorum quasi rerum repudiandae eos 
saepe eaque minima qui consequatur perspiciatis ad dignissimos aperiam corporis possimus?

<!-- ※ 더미 키워드 사용시 주의 점 -->

table>(tr>th*2)+(tr>(td{word}+td{lorem}))*3
<table>
	<tr>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td>word</td>
		<td>lorem</td>
	</tr>
	<tr>
		<td>word</td>
		<td>lorem</td>
	</tr>
	<tr>
		<td>word</td>
		<td>lorem</td>
	</tr>
</table>

table>(tr>th*2)+(tr>(td{word}+lorem(td{desc})))*3 <!-- 이런 경우 함수쓰듯이 lorem() 사용하면 된다 -->
<table>
	<tr>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td>word</td>
		<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
		Maiores totam sapiente repellat ipsam necessitatibus voluptatum possimus perspiciatis 
		dolore vel laborum modi aut voluptatem. Neque quod molestias nulla deleniti quam harum.</td>
	</tr>
	<tr>
		<td>word</td>
		<td>Neque eos esse amet unde libero tempora consequatur omnis nisi! 
		Nesciunt sunt vitae cupiditate natus veritatis maiores hic quae id magni 
		illo iure eligendi quos ullam! Repellendus impedit praesentium alias.</td>
	</tr>
	<tr>
		<td>word</td>
		<td>Beatae quasi alias sed quod deserunt iusto sunt incidunt 
		quos eius obcaecati nihil rem nesciunt et harum aliquam consectetur 
		similique voluptate dignissimos in delectus accusantium consequatur vel porro sint perspiciatis?</td>
	</tr>
</table>

</body>
</html>

EmmetTest02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EmmetTest02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

실습1.
h1#title.blue{Emmet}+(h2.subtitle{소제목}+p.content{내용})*5
<h1 id="title" class="blue">Emmet</h1>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>
<h2 class="subtitle">소제목</h2>
<p class="content">내용</p>

span[style='color:white;']{h1#title.blue{Emmet}+(h2.subtitle{소제목}+p.content{내용})*5}
<span style='color:white;'>h1#title.blue{Emmet}+(h2.subtitle{소제목}+p.content{내용})*5</span>

실습2.
table>tr.line>(td.col{내용$}+td.comm{부연설명})*3
<table>
	<tr class="line">
		<td class="col">내용1</td>
		<td class="comm">부연설명</td>
		<td class="col">내용2</td>
		<td class="comm">부연설명</td>
		<td class="col">내용3</td>
		<td class="comm">부연설명</td>
	</tr>
</table>

table>tr.line*2>((td.col{내용$})*3(td.comm{부연설명}))
<table>
	<tr class="line">
		<td class="col">내용1</td>
		<td class="comm">부연설명</td>
		<td class="col">내용2</td>
		<td class="comm">부연설명</td>
		<td class="col">내용3</td>
		<td class="comm">부연설명</td>
	</tr>
	<tr class="line">
		<td class="col">내용1</td>
		<td class="comm">부연설명</td>
		<td class="col">내용2</td>
		<td class="comm">부연설명</td>
		<td class="col">내용3</td>
		<td class="comm">부연설명</td>
	</tr>
</table>


span[style='color:white;']{table>tr.line*2>((td.col{내용$})*3(td.comm{부연설명}))}
<span style="color:white;">table>tr.line*2>((td.col{내용$})*3(td.comm{부연설명}))</span>


실습3. 
table#tbl>tr#line$*2>(th#head${항목$}+td.col{내용$}*3)
<table id="tbl">
	<tr id="line1">
		<th id="head1">항목1</th>
		<td class="col">내용1</td>
		<td class="col">내용2</td>
		<td class="col">내용3</td>
	</tr>
	<tr id="line2">
		<th id="head2">항목2</th>
		<td class="col">내용1</td>
		<td class="col">내용2</td>
		<td class="col">내용3</td>
	</tr>
</table>


span[style='color:white;']{table#tbl>tr#line$*2>(th#head${항목$}+td.col{내용$}*3)}
<span style="color:white;">table#tbl>tr#line$*2>(th#head${항목$}+td.col{내용$}*3)</span>

</body>
</html>

데이터베이스 연결 및 데이터 처리
- WebApp08

Test002.jsp
- 동적으로 렌더링해오는 상황은 아님

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 결과값 변수
	String str = "";
	
	// 데이터베이스 연결
	Connection conn = DBConn.getConnection();
	
	// 쿼리문 준비(select)
	String sql = "SELECT SID, NAME, TEL FROM TBL_MEMBER ORDER BY SID";
	
	// 작업 객체 생성 및 준비된 쿼리문 수행
	Statement stmt = conn.createStatement();
	
	ResultSet rs = stmt.executeQuery(sql);
	
	// 결과 ResultSet 에 대한 처리 → 반복문 처리
	str += "<table class='table'>";
	str += "<tr>";
	str += "<th id='numTitle'>번호</th>";
	str += "<th id='nameTitle'>이름</th>";
	str += "<th id='telTitle'>전화번호</th>";
	str += "</tr>";
	
	while(rs.next())
	{
		str += "<tr>";
		str += "<td class='list'>" + rs.getString("SID") + "</td>"; // 문자열 결합이 일어나기 때문에 Int 나 String 둘다 상관 없음 
		str += "<td class='list'>" + rs.getString("NAME") + "</td>";
		str += "<td class='list'>" + rs.getString("TEL") + "</td>";
		str += "</tr>";
	}
	
	str += "</table>";
	
	rs.close();
	stmt.close();
	DBConn.close();
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
	input {width:200px;}
	button {width: 208px; height:50px; font-weight:bold;}
	.errMsg {font-size: small; color:red; display:none;}
	#numTitle {width: 50px;}
	#nameTitle {width: 100px;}
	#telTitle {width: 160px;}
	.list {text-align: center;}
</style>
<script type="text/javascript">
	function formCheck()
	{
		var uName = document.getElementById("userName");
		var nErr = document.getElementById("nameErr");
		
		nErr.style.display="none";
		
		if( uName.value=="")
		{
			nErr.style.display="inline";
			uName.focus();
			return false;
		}
		return true;
	}
</script>
</head>
<body>

<div>
	<h1>데이터베이스 연결 및 데이터 처리</h1>
	<hr>
</div>

<div>
	<!-- 데이터 입력 -->
	<form action="MemberInsert.jsp" method="post" onsubmit="return formCheck()">
		<table>
			<tr>
				<th>이름(*)</th>
				<td>
					<input type="text" id="userName" name="userName" class="txt">
					<span class="errMsg" id="nameErr">이름을 입력해야 합니다.</span>
				</td>
			</tr>
			<tr>
				<th>전화번호</th>
				<td>
					<input type="text" id="userTel" name="userTel" class="txt">
				</td>
			</tr>
			<tr>
				<th></th>
				<td>
					<button type="submit" id="btnAdd" class="btn control">데이터 추가</button>
				</td>
			</tr>			
		</table>
	</form>
</div>
<br>

<div>
	<!-- 처리결과 : TBL_MEMBER 명단 -->
	<%=str %>
</div>

</body>
</html>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="com.util.DBConn"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// MemberInsert.jsp

	// 이전 페이지(Test002.jsp)로부터 데이터 수신
	// → userName, userTel
	
	// 수신데이터에 한글이 포함되어있으므로 - 한글 데이터 깨짐 방지 처리
	request.setCharacterEncoding("UTF-8");
	
	String uName = request.getParameter("userName");
	String uTel = request.getParameter("userTel");
	
	// JDBC 에서 하던 내용 DB연결 ~ 반납
	// 데이터베이스 연결
	Connection conn= DBConn.getConnection();
	
	// 쿼리문 준비(Insert)
	/*
	String sql = "INSERT INTO TBL_MEMBER(SID,NAME,TEL)"
				+ " VALUES(MEMBERSEQ.NEXTVAL"
				+ ",'" + uName + "'"
				+ ",'"+ uTel +"')";
	*/
	
	String sql = String.format("INSERT INTO TBL_MEMBER(SID,NAME,TEL)"
			+ " VALUES(MEMBERSEQ.NEXTVAL,'%s','%s')", uName, uTel);
	
	// 데이터베이스 액션 처리 → 작업 개체 생성 및 쿼리문 수행
	// 작업 객체 생성
	Statement stmt = conn.createStatement();
	int result = 0;
	result = stmt.executeUpdate(sql);
	
	// 리소스 반납
	stmt.close();
	DBConn.close();

	// 클라이언트를 다시 주소로 보내줘야함
	/*
	// Test002.jsp로 리다이렉트
	RequestDispatcher dispatcher = request.getRequestDispatcher("Test002.jsp");
	dispatcher.forward(request, response);
	*/
	
	// 상황에 따라 다음과 같은 분기 처리 가능
	if(result<1)
	{
		// 내가 잘 아는 에러페이지와의 만남 주선
		// 네가 요청한 내용대로 처리하는 과정에서 문제 생겼는데 얘나 만나봐 :p
		response.sendRedirect("Error.jsp");
	}
	else
	{
		// 이 페이지로 오기 전에 네가 머물던 리스트 페이지 주소를 다시 요청해서 찾아가면
		// 네가 입력하려는 데이터가 추가된 상태로 리스트 내용이 바뀌어 있을 것.
		// Test002.jsp로 리다이렉트
		response.sendRedirect("Test002.jsp");
	}
	
	// 클라이언트를 만날 필요가 없는 페이지 이기 때문에 스크립릿 영역 제외 삭제
%>

데이터베이스 연결 및 데이터 처리 실습
WebApp09

SQL

-- WebApp09_scott.sql

SELECT USER
FROM DUAL;
--==>> SCOTT

--○ 기존 테이블 제거
DROP TABLE TBL_SCORE PURGE;
--==>> Table TBL_SCORE이(가) 삭제되었습니다.

--○ 실습 테이블 생성
CREATE TABLE TBL_SCORE
( SID   NUMBER
, NAME  VARCHAR2(30)
, KOR   NUMBER(3)
, ENG   NUMBER(3)
, MAT   NUMBER(3)
);
--==>> Table TBL_SCORE이(가) 생성되었습니다.

--○ 생성된 테이블에 제약조건 추가 
ALTER TABLE TBL_SCORE
ADD CONSTRAINT SCORE_SID_PK PRIMARY KEY(SID);
--==>> Table TBL_SCORE이(가) 변경되었습니다.

ALTER TABLE TBL_SCORE
ADD CONSTRAINT SCORE_KOR_CK CHECK(KOR BETWEEN 0 AND 100);
--==>> Table TBL_SCORE이(가) 변경되었습니다.

ALTER TABLE TBL_SCORE
ADD CONSTRAINT SCORE_ENG_CK CHECK(ENG BETWEEN 0 AND 100);
--==>> Table TBL_SCORE이(가) 변경되었습니다.

ALTER TABLE TBL_SCORE
ADD CONSTRAINT SCORE_MAT_CK CHECK(MAT BETWEEN 0 AND 100);
--==>> Table TBL_SCORE이(가) 변경되었습니다.

--○ 기존 시퀀스 제거
DROP SEQUENCE SCORESEQ;
--==>> Sequence SCORESEQ이(가) 삭제되었습니다.

--○ 실습 관련 시퀀스 다시 생성
CREATE SEQUENCE SCORESEQ
NOCACHE;
--==>> Sequence SCORESEQ이(가) 생성되었습니다.

--○ 리스트 조회 쿼리문 구성
--   (번호, 이름 , 국어점수, 영어점수, 수학점수, 총점, 평균)
SELECT SID, NAME, KOR, ENG, MAT, (KOR+ENG+MAT) AS TOT, ROUND((KOR+ENG+MAT)/3,-2) AS AVG
FROM TBL_SCORE
ORDER BY SID;
--> 한 줄 구성
SELECT SID, NAME, KOR, ENG, MAT, (KOR+ENG+MAT) AS TOT, ROUND((KOR+ENG+MAT)/3,2) AS AVG FROM TBL_SCORE ORDER BY SID
;

--○ 데이터 입력 쿼리문 구성
INSERT INTO TBL_SCORE(SID,NAME,KOR,ENG,MAT)
VALUES(SCORESEQ.NEXTVAL, 재혁킴,90,80,70);
--> 한 줄 구성
INSERT INTO TBL_SCORE(SID,NAME,KOR,ENG,MAT) VALUES(SCORESEQ.NEXTVAL,'재혁킴',90,80,70)
;
--==>> 1 행 이(가) 삽입되었습니다.
INSERT INTO TBL_SCORE(SID,NAME,KOR,ENG,MAT) VALUES(SCORESEQ.NEXTVAL,'희주윤',80,70,60)
;
--==>> 1 행 이(가) 삽입되었습니다.
INSERT INTO TBL_SCORE(SID,NAME,KOR,ENG,MAT) VALUES(SCORESEQ.NEXTVAL,'혜서팍',70,60,50)
;
--==>> 1 행 이(가) 삽입되었습니다.

--○ 확인
SELECT *
FROM TBL_SCORE
order by Sid;
--==>>
/*
1	재혁킴	90	80	70
2	희주윤	80	70	60
3	혜서팍	70	60	50
*/

--○ 커밋
COMMIT;
--==>> 커밋 완료.

DBConn

package com.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConn
{
	private static Connection dbConn;
	
	public static Connection getConnection()
	{
		if (dbConn==null)
		{
			String url = "jdbc:oracle:thin:@localhost:1521:xe";
			String user = "scott";
			String pw = "tiger";
			
			try
			{
				Class.forName("oracle.jdbc.driver.OracleDriver");
				dbConn = DriverManager.getConnection(url,user,pw);
			} catch (Exception e)
			{
				System.out.println(e.toString());
			}
		}
		return dbConn;
	}
	
	public static Connection getConnection(String url, String user, String pw)
	{
		if (dbConn==null)
		{
			try
			{
				Class.forName("oracle.jdbc.driver.OracleDriver");
				dbConn = DriverManager.getConnection(url,user,pw);
			} catch (Exception e)
			{
				System.out.println(e.toString());
			}
		}
		return dbConn;
	}
	
	public static void close()
	{
		try
		{
			if (dbConn!=null)
			{
				if (!dbConn.isClosed())
					dbConn.close();
			}
		} catch (SQLException e)
		{
			System.out.println(e.toString());
		}

		dbConn = null;
	}
	
	
}

ScoreList

<%@page import="com.util.DBConn"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 결과 변수
	String str ="";

	// DB 연결
	Connection conn = DBConn.getConnection();
	
	//if(conn != null)
	//	str += "연결 성공";
	
	// 쿼리문 준비
	String sql = "SELECT SID, NAME, KOR, ENG, MAT, (KOR+ENG+MAT) AS TOT, ROUND((KOR+ENG+MAT)/3,2) AS AVG FROM TBL_SCORE ORDER BY SID"; 
	
	// 작업 객체 준비
	Statement stmt = conn.createStatement();
	
	ResultSet rs = stmt.executeQuery(sql);
	
	// 반복문으로 rs 담기
	while(rs.next())
	{
		str+= "<span class='tbl'>" +  rs.getString("SID") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("NAME")+ "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("KOR") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("ENG") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("MAT") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("TOT") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<span class='tbl'>" +  rs.getString("AVG") + "&nbsp&nbsp&nbsp&nbsp&nbsp</span>";
		str+= "<br>";
	}
	
	rs.close();
	stmt.close();
	DBConn.close();
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScoreList.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
	.errMsg {color: red; font-size:small; display:none;}
	.txt {width: 100px;}
</style>
<script type="text/javascript">
	function checkForm()
	{
		var uName = document.getElementById("userName"); 
		var kor = document.getElementById("kor");
		var eng = document.getElementById("eng");
		var mat = document.getElementById("mat");
		var nameMsg = document.getElementById("nameMsg"); 
		var korMsg = document.getElementById("korMsg"); 
		var engMsg = document.getElementById("engMsg"); 
		var matMsg = document.getElementById("matMsg"); 
		
		nameMsg.style.display = "none";
		
		if (userName.value=="")
		{
			nameMsg.style.display="inline";
			uName.focus();
			return false;
		}
		
		korMsg.style.display = "none";
		
		if (kor.value == "" || parseInt(kor.value) > 100 || parseInt(kor.value) < 0 || isNaN(kor.value) || kor.value.indexOf(" ") != -1)
		{
			korMsg.style.display="inline";
			kor.focus();
			return false;
		}
		
		engMsg.style.display = "none";
		
		if (eng.value == "" || parseInt(eng.value) > 100 || parseInt(eng.value) < 0 || isNaN(eng.value) || eng.value.indexOf(" ") != -1)
		{
			engMsg.style.display="inline";
			eng.focus();
			return false;
		}
		
		matMsg.style.display = "none";
		
		if (mat.value == "" || parseInt(mat.value) > 100 || parseInt(mat.value) < 0 || isNaN(mat.value) || mat.value.indexOf(" ") != -1 )
		{
			matMsg.style.display="inline";
			mat.focus();
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>
<div>
<!-- 
	○ WebApp09
	
		- 여러 명의 이름, 국어점수, 영어점수, 수학점수를 입력받아
		  총점과 평균을 계산하여 출력해줄 수 있는 프로그램을 구현한다.
		  
		- 데이터베이스 연동하여 처리한다.
		  (TBL_SCORE, SCORESEQ 활용)
		
		- 리스트 출력 시 번호 오름차순 정렬하여 출력할 수 있도록 한다.
		
		- 즉, 성적 처리 프로그램을 데이터베이스 연동하여 JSP 로 구성할 수 있도록 한다.
		
		데이터베이스 연결 및 데이터 처리
		------------------------------------------------------------------
		성적 처리
		
		이름(*)		[textbox]	→ 이름 입력 확인
		국어점수	[textbox]	→ 0 ~ 100 사이의 정수가 입력되었는지 확인
		영어점수	[textbox]	→ 0 ~ 100 사이의 정수가 입력되었는지 확인
		수학점수	[textbox]	→ 0 ~ 100 사이의 정수가 입력되었는지 확인
		
		< 성적 추가 >	→ button
		
		번호	이름	국어점수	영어점수	수학점수	총점	평균
		 1		재혁킴 		90			80			70		xxx		xx.x
		 2		희주윤 		80			70			60		xxx		xx.x
		 3		혜서팍 		70			60			50		xxx		xx.x
		 								:
		------------------------------------------------------------------
		
	○ 물리적 파일 구성
	
		- WebApp09_scott.sql
		- ScoreList.jsp
		- ScoreInsert.jsp
		- com.util.DBConn.java
 -->
</div>

<div>
	<h1>성적 처리</h1>
	<hr>
</div>

<div>
	<form action="ScoreInsert.jsp" method="post" onsubmit="return checkForm()">
		<div>
			이름(*) &nbsp;&nbsp;
			<input type="text" class="txt" id="userName" name="userName">
			<span class="errMsg" id="nameMsg">이름을 입력하세요</span>
			<br>
			국어점수 <input type="text" class="txt" id="kor" name="kor" placeholder="0~100">
			<span class="errMsg" id="korMsg">0~100 점 사이의 점수를 입력하세요</span>
			<br>
			영어점수 <input type="text" class="txt" id="eng" name="eng"  placeholder="0~100">
			<span class="errMsg" id="engMsg">0~100 점 사이의 점수를 입력하세요</span>
			<br>
			수학점수 <input type="text" class="txt" id="mat" name="mat"  placeholder="0~100">
			<span class="errMsg" id="matMsg">0~100 점 사이의 점수를 입력하세요</span>
			<br>
		</div>
		<br>
		<div>
			<button type="submit" class="btn" name="btn Control"> 성적 추가 </button>
		</div>
		<br>
		<div>
			번호	이름	국어점수	영어점수	수학점수	총점	평균<br>
			<!-- 데이터 출력 -->
			<%=str %>
		</div>
	</form>
</div>


</body>
</html>

ScoreInsert

<%@page import="com.util.DBConn"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// ScoreInsert.jsp

	// 이전페이지 (ScoreList.jsp)에서 데이터 수신
	// → userName, kor, eng, mat
	
	// 한글 데이터 깨짐 방지
	request.setCharacterEncoding("UTF-8");
	
	String name = request.getParameter("userName");
	String kor = request.getParameter("kor");
	String eng = request.getParameter("eng");
	String mat = request.getParameter("mat");

	// DB 연결
	Connection conn = DBConn.getConnection();
	
	// 쿼리문 준비
	String sql = String.format("INSERT INTO TBL_SCORE(SID,NAME,KOR,ENG,MAT)"
			+ " VALUES(SCORESEQ.NEXTVAL,'%s',%s,%s,%s)",name, kor, eng, mat );
	
	// 작업 객체 준비
	Statement stmt = conn.createStatement();
	
	int result=0;
	result = stmt.executeUpdate(sql);
	
	stmt.close();
	DBConn.close();
	
	if(result<1)
	{
		response.sendError(404);
	}
	else
	{
		response.sendRedirect("ScoreList.jsp");
	}
	
%>

script 영역에서 try ~ catch 구문 사용 시, Exception e 대신 e 만 입력

728x90

저작자표시 비영리 변경금지

'SsY > Class' 카테고리의 다른 글

[JSP] 007. 쿠키(Cookie)와 세션(Session) (0)	2023.05.25
[JSP] 006. JAVA Bean(자바 빈) (0)	2023.05.25
[JSP] 004. 포워딩과 리다이렉트 (0)	2023.05.22
[JSP] 004. JSP / Servlet 관찰(3) (0)	2023.05.18
[JSP] 003. JSP / Servlet 관찰(2) (0)	2023.05.18

ABOUT ME

Planet for Coding

'SsY > Class' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'SsY > Class' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바