-------------------------------
13. CSS
- css() : 특정 객체에 CSS 속성을 읽거나, 쓰기 할 수 있다.
- addClass(), removeClass() : 특정 객체에 CSS 속성을 정의하기 위해서 class="" 속성을 추가하거나, 제거할 수 있다.
특정객체.css("속성이름");
특정객체.css("속성이름", "값");
특정객체.css({"속성이름":"값", "속성이름":"값", ... });
특정객체.addClass("class속성명");
특정객체.removeClass("class속성명");
//JQuery07.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#errMsg { display: none; color:red; }
</style>
<script type="text/javascript">
/* Javascript 버전 */
/*
window.onload=function() {
document.getElementById("loginBtn").onclick=function() {
var id = document.getElementById("id");
var pw = document.getElementById("pw");
var errMsg = document.getElementById("errMsg");
errMsg.style.display = "none";
if (id.value == "" || pw.value == "") {
errMsg.style.display = "inline";
return;
}
};
}
*/
/* jQuery 버전 */
$(document).ready(function() {
$("#loginBtn").click(function() {
$("#errMsg").css("display", "none");
if ($("#id").val()=="" || $("#pw").val()=="") {
//에러메시지 선택적으로 출력하는 과정 추가
$("#errMsg").css("display", "inline");
return;
}
});
});
</script>
</head>
<body>
<div>
<form>
ID <input type="text" id="id">
PW <input type="password" id="pw">
<!-- jQuery에서는 이벤트핸들러를 사용하지 않는다. -->
<input type="button" value="login" id="loginBtn">
<span id="errMsg">아이디 또는 패스워드를 채워야 합니다.</span>
</form>
</div>
</body>
</html>
-----------------------------------------
jQuery를 이용해서 특정 객체의 CSS 속성 값 변경.
//기존 Javascript 버전(->jQuery 버전으로 수정할 것)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
//Javascript 버전
function myFunction(color) {
var box = document.getElementById("box");
box.style.backgroundColor = color;
}
//jQuery 버전
$(document).ready(function() {
$(".btn").click(function() {
$("#box").css("background-color", $(this).val());
});
});
</script>
</head>
<body>
<div>
<p>Javascript 버전</p>
<form>
<input type="button" value="black"
onclick="myFunction('black')">
<input type="button" value="red"
onclick="myFunction('red')">
<input type="button" value="green"
onclick="myFunction(this.value)">
<input type="button" value="blue"
onclick="myFunction(this.value)">
<input type="button" value="#FFFF99"
onclick="myFunction(this.value)">
</form>
<p>jQuery 버전</p>
<form>
<!-- class="" 식별자 추가 -->
<input type="button" value="black" class="btn">
<input type="button" value="red" class="btn">
<input type="button" value="green" class="btn">
<input type="button" value="blue" class="btn">
<input type="button" value="#FFFF99" class="btn">
</form>
<div id="box" style="border:1px solid black; width:300px; height:200px; background-color: white;"></div>
</div>
</body>
</html>
//JQuery08.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
/* class_선택자 {속성 : 값; } */
.style1 {background-color: black; color: white; }
.style2 {background-color: red; color: white; }
.style3 {background-color: green; color: yellow; }
.style4 {background-color: blue; color: yellow;}
.style5 {background-color: #FFFF99; color: black; }
</style>
<script type="text/javascript">
//Javascript 버전
/*
window.onload=function() {
var btn1s = document.getElementsByClassName("btn1");
for (var i=0; i<btn1s.length; ++i) {
var btn1 = btn1s[i];
btn1.onclick=function() {
var style = this.value; //"style1", "style2", ....
document.getElementById("box").setAttribute("class", style);
};
}
};
*/
//jQuery 버전
$(document).ready(function() {
$(".btn2").click(function() {
//$("#box").addClass($(this).val());
$("#box").attr("class", $(this).val());
});
});
</script>
</head>
<body>
<div>
<p>Javascript 버전</p>
<form>
<!-- class="" 식별자 추가 -->
<input type="button" value="style1" class="btn1">
<input type="button" value="style2" class="btn1">
<input type="button" value="style3" class="btn1">
<input type="button" value="style4" class="btn1">
<input type="button" value="style5" class="btn1">
</form>
<p>jQuery 버전</p>
<form>
<!-- class="" 식별자 추가 -->
<input type="button" value="style1" class="btn2">
<input type="button" value="style2" class="btn2">
<input type="button" value="style3" class="btn2">
<input type="button" value="style4" class="btn2">
<input type="button" value="style5" class="btn2">
</form>
<div id="box" class="style1" style="border:1px solid black; width:300px; height:200px;">‘데이터 중심 요금제’는 정확히 표현하면 ‘데이터 중심 과금 요금제’다. 음성 무제한을 빌미로 기본료를 1만2000원 가량 올린 뒤, 데이터 1MB당 20원씩 쓰는 만큼 요금을 받는 구조다. 즉 통신사 입장에서 데이터를 중심으로 요금을 메기는(과금) 요금제라는 의미다. 소비자는 올라간 기본료에 데이터 비용을 쓴 만큼 추가로 더 내는 요금제이기도 하다.</div>
</div>
</body>
</html>
14. HTML 엘리먼트 동적 추가, 제거
- append() : 동적으로 생성된 엘리먼트를 기존의 엘리먼트에 추가한다.
자바스크립트에서 동적 테이블 태그 생성하는 과정
var str = "";
str += "<table id=\"customers\" style=\"width:400px;\">";
str += "<tr><th>이름</th><th>전화번호</th></tr>";
str += "</table>";
document.getElementById("아이디명").innerHTML = str;
jQuery에서 동적 테이블 태그 생성하는 과정
var str = "";
str += "<table id=\"customers\" style=\"width:400px;\">";
str += "<tr><th>이름</th><th>전화번호</th></tr>";
str += "</table>";
$("#아이디명").append(str);
//JQuery09.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JSP Sample-2014. 6. 24.</title>
<link rel="stylesheet" type="text/css" href="Table.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* 자동 실행되도록 하기 위해서
ready 이벤트에 함수 호출 구문으로 추가한다. */
init();
});
function init() {
/* 동적인 테이블 태그를 생성하기 위해서
문자열 형태로 테이블 태그를 준비한다. */
var str = "";
str += "<table id=\"customers\" style=\"width:400px;\">";
str += "<tr><th>이름</th><th>전화번호</th></tr>";
str += "</table>";
/* 동적인 테이블 태그 소스 코드를 함수 호출시 인자로 보낸다. */
tableCreate(str);
}
function tableCreate(str) {
/* 특정 객체에 HTML 태그를 동적으로 추가한다. */
$("#result").append(str);
}
</script>
</head>
<body>
<div>
<h1>직원 검색</h1>
<form method="post">
전화번호(뒷자리)
<input type="text" name="tel" id="tel">
<input type="button" value="검색" id="submitBtn">
</form>
<h2>검색 결과</h2>
<div id="result"></div>
</div>
</body>
</html>
------------------------------------
15. Ajax
- $.get("url?식별자=값&식별자=값&..."
, function(변수) {
코드 작성
});
: GET 방식 Ajax 요청 및 응답 처리
- $.post(url
, {식별자:값, 식별자:값, ...}
, function(변수) {
코드 작성
});
: POST 방식 Ajax 요청 및 응답 처리
-------------------------------------
jQuery Ajax 요청에 의한 메시지 출력
//AjaxSend.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
//Javascript 버전
/*
window.onload=function() {
document.getElementById("btn").onclick=function() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var result = xmlhttp.responseText;
document.getElementById("result").innerHTML = result;
}
};
xmlhttp.open("GET","AjaxReceive.jsp",true);
xmlhttp.send();
};
};
*/
//jQuery 버전
$(document).ready(function() {
$("#btn").click(function() {
$.get("AjaxReceive.jsp", function(result) {
//결과 출력 액션
$("#result").html(result);
//$("#result").append(result);
});
});
});
</script>
</head>
<body>
<div>
<h1>Ajax 요청에 의한 메시지 출력</h1>
<!-- form 태그에 action="", method="" 속성 표기 필요 X -->
<!-- submit 버튼 표기 필요 X -->
<!-- 요청 및 응답 메시지 출력을 자바스크립트로 처리=>Ajax -->
<form>
<input type="button" value="Ajax 요청" id="btn">
</form>
<div id="result"></div>
</div>
</body>
</html>
//AjaxReceive.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 액션 전용 페이지 (HTML 코드 X, Ajax 응답) --%>
<%
String result = " Hello, jQuery Ajax World! ";
//Ajax 응답
out.write(result);
%>
jQuery Ajax 요청 방식 테스트 (구구단 출력) --------------
//AjaxSend04.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%-- Ajax 요청 페이지 (메인 페이지) --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
/* javascript 버전 */
/*
window.onload=function() {
document.getElementById("btn").onclick=function() {
var num = document.getElementById("num");
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
};
};
xmlhttp.open("GET","AjaxReceive04.jsp?num="+num.value,true);
xmlhttp.send();
};
}
*/
/* jQuery 버전 */
$(document).ready(function() {
$("#btn").click(function() {
$.get("AjaxReceive04.jsp?num="+$("#num").val()
, function(data) {
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div>
<h1>구구단</h1>
<form id="myForm">
숫자(1~9)
<input type="text" name="num" id="num"
required="required">
<input type="button" value="제출" id="btn">
<span id="err"></span>
</form>
<p id="result">
</p>
</div>
</body>
</html>
//AjaxReceive04.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%-- Ajax 응답 처리 액션 페이지 --%>
<%
String num = request.getParameter("num");
StringBuilder sb = new StringBuilder();
int n = Integer.parseInt(num);
for (int i=1; i<=9; i++) {
sb.append(String.format("%d * %d = %d<br>"
, n, i, (n*i) ));
}
out.write(sb.toString());
%>
-------------------------------------
선택목록 객체 (jQuery Ajax 기능 추가)
- 직위별 선택 항목에 따라서 최소기본급 메시지 출력하는 과정
실행 예)
직위 : 과장 -> <select> 태그 이용
기본급 : 10000000 (최소기본급 1000000원 이상)
직원 추가
//Position.java
package com.test;
//자료형 클래스
public class Position {
//SELECT positionId, positionName, minBasicPay, delCheck FROM positionView ORDER BY positionId;
private String positionId,positionName;
private int delCheck,minBasicPay;
public String getPositionId() {
return positionId;
}
public void setPositionId(String positionId) {
this.positionId = positionId;
}
public String getPositionName() {
return positionName;
}
public void setPositionName(String positionName) {
this.positionName = positionName;
}
public int getMinBasicPay() {
return minBasicPay;
}
public void setMinBasicPay(int minBasicPay) {
this.minBasicPay = minBasicPay;
}
public int getDelCheck() {
return delCheck;
}
public void setDelCheck(int delCheck) {
this.delCheck = delCheck;
}
}
//EmployeeDAO.java
package com.test;
import java.sql.*;
import java.util.*;
public class EmployeeDAO {
//직원 명단 출력 메소드
public ArrayList<Employee>list(){
ArrayList<Employee> result = new ArrayList<Employee>();
Connection conn = null;
PreparedStatement pstmt = null;
try{
conn = DBConn.getConnection();
String sql = String.format("SELECT employeeId, name, birthday, lunar, lunarName, telephone, departmentId, departmentName, positionId, positionName, regionId, regionName, basicPay, extraPay, pay FROM employeeView ORDER BY employeeId");
pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
Employee e = new Employee();
e.setEmployeeId(rs.getString("employeeId"));
e.setName(rs.getString("name"));
e.setBirthday(rs.getString("birthday"));
e.setLunar(rs.getInt("lunar"));
e.setLunarName(rs.getString("lunarName"));
e.setTelephone(rs.getString("telephone"));
e.setDepartmentId(rs.getString("departmentId"));
e.setDepartmentName(rs.getString("departmentName"));
e.setPositionId(rs.getString("positionId"));
e.setPositionName(rs.getString("positionName"));
e.setRegionId(rs.getString("regionId"));
e.setRegionName(rs.getString("regionName"));
e.setBasicPay(rs.getInt("basicPay"));
e.setExtraPay(rs.getInt("extraPay"));
e.setPay(rs.getInt("pay"));
result.add(e);
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(pstmt != null){
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//직원 검색 출력 메소드(검색기준 : 사번,주민번호,이름,지역,부서,직위)
public ArrayList<Employee> list(String searchKey, String searchValue){
ArrayList<Employee> result = new ArrayList<Employee>();
Connection conn = null;
PreparedStatement pstmt = null;
try{
conn = DBConn.getConnection();
String sql = String.format("SELECT employeeId, name, birthday, lunar, lunarName, telephone, departmentId, departmentName, positionId, positionName, regionId, regionName, basicPay, extraPay, pay FROM employeeView e");
switch(searchKey){
case "0" : sql += " WHERE employeeId=?"; break;
case "1" : sql += " WHERE ssn=encrypt(?, e.name)"; break;
case "2" : sql += " WHERE name=?"; break;
case "3" : sql += " WHERE regionName=?"; break;
case "4" : sql += " WHERE departmentName=?"; break;
case "5" : sql += " WHERE positionName=?"; break;
}
sql += " ORDER BY employeeId";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, searchValue);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
Employee e = new Employee();
e.setEmployeeId(rs.getString("employeeId"));
e.setName(rs.getString("name"));
e.setBirthday(rs.getString("birthday"));
e.setLunarName(rs.getString("lunarName"));
e.setTelephone(rs.getString("telephone"));
e.setDepartmentName(rs.getString("departmentName"));
e.setPositionName(rs.getString("positionName"));
e.setRegionName(rs.getString("regionName"));
e.setBasicPay(rs.getInt("basicPay"));
e.setExtraPay(rs.getInt("extraPay"));
e.setPay(rs.getInt("pay"));
result.add(e);
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(pstmt != null){
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//직원 전체 출력
public int count(){
int result = 0;
Connection conn = null;
PreparedStatement pstmt = null;
try{
conn = DBConn.getConnection();
String sql = String.format("select count(*) as \"count\" from employeeView");
pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
result = rs.getInt("count");
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(pstmt != null){
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//직원 검색 결과 인원수 출력 메소드
public int count(String searchKey, String searchValue){
int result = 0;
Connection conn = null;
PreparedStatement pstmt = null;
try{
conn = DBConn.getConnection();
String sql = String.format("select count(*) as \"count\" from employeeView e");
switch(searchKey){
case "0" : sql += " WHERE employeeId=?"; break;
case "1" : sql += " WHERE ssn=encrypt(?, e.name)"; break;
case "2" : sql += " WHERE name=?"; break;
case "3" : sql += " WHERE regionName=?"; break;
case "4" : sql += " WHERE departmentName=?"; break;
case "5" : sql += " WHERE positionName=?"; break;
}
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, searchValue);
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
result = rs.getInt("count");
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(pstmt != null){
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//직위 종류 출력 메소드
public ArrayList<Position> positionList() {
ArrayList<Position> result = new ArrayList<Position>();
//SELECT positionId, positionName, minBasicPay
// FROM position
// ORDER BY positionId
return result;
}
//최소 기본급 검색 메소드
public int getMinBasicPay(String jid) {
int result = 0;
//SELECT minBasicPay FROM position WHERE positionId=?
return result;
}
}
//AjaxPosition.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.test.*" %>
<%
StringBuilder positionList = new StringBuilder();
EmployeeDAO dao = new EmployeeDAO();
for (Position p : dao.positionList()) {
//<option> 태그 동적 생성 과정 추가
//<option value="직위번호">직위명</option>
positionList.append(String.format(""));
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 문제) jQuery 환경 설정 추가 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
//문제) jQuery Ajax 버전으로 수정할 것.
//1. 새로고침 액션(onload 이벤트) -> Ajax 요청
//2. 사용자 선택목록 선택 액션(onchange 이벤트) -> Ajax 요청
//jQuery 기본 이벤트
//최초 실행,새로고침 액션 실행시 이벤트 처리
$(document).ready(function(){
//최초 실행, 새로고침 액션 실행시 Ajax 요청 과정 진행
ajax();
//선택 목록에 대한 이벤트(change) 추가
$("#position").change(function(){
//선택 목록에서 change 이벤트 발생시 Ajax 요청 과정 진행
ajax();
});
});
//Ajax 요청 과정이 여러번 나오기 때문에 통합 함수로 작성
function ajax() {
//jQuery Ajax 요청 과정
/*
$.get("요청주소?식별자=값", function(변수) {
//결과 출력 과정
});
*/
$.get("PositionReceive.jsp?positionId="+$("#position").val(), function(result){
$("#minBasicPay").text(result);
});
}
</script>
</head>
<body>
<div>
<form>
<table>
<tr>
<td>직위</td>
<td>
<select id="position">
<option value="1">사원</option>
<option value="2">대리</option>
<option value="3">과장</option>
</select>
</td>
</tr>
<tr>
<td>기본급</td>
<td>
<input type="text" id="basicPay">
(최소기본급 <span id="minBasicPay">0</span> 원 이상)
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btn" value="memberAdd">
<br><span id="errMsg"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
//PositionReceive.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 액션 전용 페이지 (HTML 코드 X, Ajax 응답) --%>
<%@ page import="com.test.*" %>
<%
//데이터 수신 (positionId)
//데이터베이스 액션 -> getMinBasicPay() 메소드 호출
String result = "0";
//Ajax 응답
out.write(result);
%>
--------------------------------------------------
문제) 전화번호 기준 사원 검색 (jQuery Ajax)
1. 프로그램 구성
//Student.java -> 자료형 클래스
//StudentDAO.java -> 데이터베이스 액션 클래스. 검색 액션 메소드
//StudentSearch.jsp -> 전화번호 검색 및 결과 출력 페이지. Ajax 요청 과정 추가.
//StudentAjax.jsp -> Ajax 응답 액션 페이지. XML 포맷 응답 처리 과정 추가.
2. 프로그램 소스 코드
//Student.java
package com.test;
//자료형 클래스
public class Student {
//멤버변수 -> 데이터베이스 컬럼명, 출력 항목
//sid, name, tel, gradeCheck
//기본 자료형은 String으로 지정.
private String sid, name, tel;
//성적 입력 여부 확인용
//입력 O -> 1
//입력 X -> 0
private int gradeCheck;
public String getSid() {
return sid;
}
public void setSid(String sid) {
this.sid = sid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public int getGradeCheck() {
return gradeCheck;
}
public void setGradeCheck(int gradeCheck) {
this.gradeCheck = gradeCheck;
}
}
//StudentDAO.java
package com.test;
import java.util.*;
import java.sql.*;
public class StudentDAO {
//학생 명단 출력 메소드
public ArrayList<Student> list() {
ArrayList<Student> result = new ArrayList<Student>();
//1. 데이터베이스 연결
//2. SELECT 쿼리 준비 및 실행
//3. 결과를 컬렉션에 저장
//4. 데이터베이스 연결 마무리
//5. 컬렉션 반환
Connection conn = null;
Statement stmt = null;
try {
conn = DBConn.getConnection();
stmt = conn.createStatement();
//주의: 쿼리 문자열 끝에 ;(semicolon) 없음.
String sql = String.format("SELECT sid, name, tel, gradeCheck FROM studentView ORDER BY sid");
ResultSet rs = stmt.executeQuery(sql);
while(rs.next()) {
//문제)
//데이터베이스 자료를 순차적으로 읽어내서
//Student 객체에 저장하고
//Student 객체를 컬렉션에 저장하는 액션 추가
String sid = rs.getString("sid");
String name = rs.getString("name");
String tel = rs.getString("tel");
int gradeCheck = rs.getInt("gradeCheck");
Student s = new Student();
s.setSid(sid);
s.setName(name);
s.setTel(tel);
s.setGradeCheck(gradeCheck);
result.add(s);
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try {
if (stmt != null) {
stmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//학생 수 출력 메소드
public int count() {
int result = 0;
//1. 데이터베이스 연결
//2. SELECT 쿼리 준비 및 실행
//->SELECT COUNT(*) AS "count" FROM student
//3. 결과를 변수에 저장
//4. 데이터베이스 연결 마무리
//5. 변수 반환
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DBConn.getConnection();
String sql = String.format("SELECT COUNT(*) AS \"count\" FROM student");
pstmt = conn.prepareStatement(sql);
//바인딩 데이터 연결하는 과정
ResultSet rs = pstmt.executeQuery(); //SELECT 쿼리인 경우
while(rs.next()) {
result = rs.getInt("count");
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try {
if (pstmt != null) {
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//학생 추가(입력) 메소드
public int add(Student student) {
int result = 0;
//문제)
//1. 데이터베이스 연결
//2. INSERT 쿼리 준비 및 실행
//-> INSERT INTO student (sid, name, tel)
// VALUES (studentSeq.nextval, ?, ?)
//3. 결과를 변수에 저장
//4. 데이터베이스 연결 마무리
//5. 변수 반환
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DBConn.getConnection();
String sql = String.format("INSERT INTO student (sid, name, tel) VALUES (studentSeq.nextval, ?, ?)");
pstmt = conn.prepareStatement(sql); //쿼리를 사전 분석한다.
pstmt.setString(1, student.getName()); //'(작은 따옴표) 추가
pstmt.setString(2, student.getTel()); //'(작은 따옴표) 추가
result = pstmt.executeUpdate();
}catch(Exception e){
e.printStackTrace();
}finally{
try {
if (pstmt != null) {
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result;
}
//학생 번호 검색 메소드
public Student searchSid(String sid) {
Student result = null;
//문제)
//1. 데이터베이스 연결
//2. SELECT 쿼리 준비 및 실행
//SELECT sid, name, tel, gradeCheck
// FROM studentView
// WHERE sid=?
//3. 결과를 변수에 저장
//4. 데이터베이스 연결 마무리
//5. 변수 반환
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DBConn.getConnection();
//검색 액션은 PK 가 지정된 sid 컬럼을 대상으로
//하기 때문에
//검색 결과는 0 또는 1 이다.
//검색 결과가 있다면 Student 객체에 저장해서 반환.
String sql = String.format("SELECT sid, name, tel, gradeCheck FROM studentView WHERE sid=?");
pstmt = conn.prepareStatement(sql);
//바인딩 데이터 연결하는 과정
pstmt.setInt(1, Integer.parseInt(sid));
ResultSet rs = pstmt.executeQuery(); //SELECT 쿼리인 경우
//SELECT 결과가 존재하는 경우
//rs.next() 메소드 결과는 true가 된다.
//-> 반복문 실행 가능
/*
while(rs.next()) {
result = new Student();
}
*/
while(rs.next()) {
String name = rs.getString("name");
String tel = rs.getString("tel");
int gradeCheck = rs.getInt("gradeCheck");
result = new Student();
result.setSid(sid);
result.setName(name);
result.setTel(tel);
result.setGradeCheck(gradeCheck);
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try {
if (pstmt != null) {
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result; //null 또는 Student객체
}
//전화번호 검색 메소드
public ArrayList<Student> searchTel(String tel) {
ArrayList<Student> result = new ArrayList<Student>();
//전화번호 뒷자리가 일치하는지 확인하는 쿼리
//SELECT sid, name, tel, gradeCheck
// FROM studentView
// WHERE tel LIKE '%1234'
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = DBConn.getConnection();
String sql = String.format("SELECT sid, name, tel, gradeCheck FROM studentView WHERE tel LIKE ?");
pstmt = conn.prepareStatement(sql);
//바인딩 데이터 연결하는 과정
pstmt.setString(1, String.format("%%%s",tel));
ResultSet rs = pstmt.executeQuery(); //SELECT 쿼리인 경우
while(rs.next()) {
Student s = new Student();
s.setSid(rs.getString("sid"));
s.setName(rs.getString("name"));
s.setTel(rs.getString("tel"));
s.setGradeCheck(rs.getInt("gradeCheck"));
result.add(s);
}
rs.close();
}catch(Exception e){
e.printStackTrace();
}finally{
try {
if (pstmt != null) {
pstmt.close();
}
}catch(Exception e){
}
DBConn.close();
}
return result; //null 또는 Student객체
}
}
//StudentSearch.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>성적관리</title>
<link rel="stylesheet" type="text/css" href="TableStyle.css">
<link rel="stylesheet" type="text/css" href="DivStyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
//Javascript 버전
/*
window.onload=function() {
document.getElementById("btn").onclick=function() {
//Ajax 요청 및 응답 처리
//1. XMLHttpRequest 객체 생성
var xmlhttp=new XMLHttpRequest();
//2. 콜백 함수 지정 (응답 처리 액션 함수)
xmlhttp.onreadystatechange=function() {
//5. 응답 메시지 처리 (XML 포맷)
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//XML 포맷으로 수신하는 경우
//메모리 내에서 XML 객체(DOM Tree)로 인정 된다.
var result = xmlhttp.responseXML;
alert("Ajax 응답 도착!");
//루트 엘리먼트 접근
var rootNode = result.documentElement; //<studentInfo>
//특정 하위 엘리먼트 접근
var studentNodes = rootNode.getElementsByTagName("student"); //<student>
var text = "";
text += "<table id=\"t01\">";
text += "<tr><th>번호</th><th>이름</th><th>전화번호</th><th>성적입력여부</th></tr>";
for (var i=0; i<studentNodes.length; ++i) {
var studentNode = studentNodes[i];
text += "<tr>";
text += "<td>" + getText(studentNode, "sid") + "</td>";
text += "<td>" + getText(studentNode, "name") + "</td>";
text += "<td>" + getText(studentNode, "tel") + "</td>";
text += "<td>" + getText(studentNode, "gradeCheck") + "</td>";
text += "</tr>";
}
text += "</table>";
document.getElementById("result").innerHTML = text;
}
};
//3. 요청 주소 지정
var tel = document.getElementById("tel");
xmlhttp.open("GET","StudentAjax.jsp?tel="+tel.value,true);
//4. Ajax 요청
xmlhttp.send();
alert("Ajax 요청 완료!");
};
};
*/
//jQuery 버전
$(document).ready(function() {
$("#btn").click(function() {
//Ajax 요청
/*
$.get("요청주소?식별자=값", function(변수) {
//결과 출력 과정
});
*/
$.get("StudentAjax.jsp?tel="+$("#tel").val(), function(result) {
//결과 출력
//alert("응답완료!");
//루트 엘리먼트 접근
var rootNode = result.documentElement; //<studentInfo>
//특정 하위 엘리먼트 접근
var studentNodes = rootNode.getElementsByTagName("student"); //<student>
var text = "";
text += "<table id=\"t01\">";
text += "<tr><th>번호</th><th>이름</th><th>전화번호</th><th>성적입력여부</th></tr>";
for (var i=0; i<studentNodes.length; ++i) {
var studentNode = studentNodes[i];
text += "<tr>";
text += "<td>" + getText(studentNode, "sid") + "</td>";
text += "<td>" + getText(studentNode, "name") + "</td>";
text += "<td>" + getText(studentNode, "tel") + "</td>";
text += "<td>" + getText(studentNode, "gradeCheck") + "</td>";
text += "</tr>";
}
text += "</table>";
$("#result").html(text);
});
});
});
function getText(parent, tagName) {
//부모 엘리먼트의 특정 자식 엘리먼트(1개)에 대한 텍스트 정보 반환
//return parent.getElementsByTagName(tagName)[0].childNodes[0].nodeValue;
//->jQuery 버전으로 수정할 것.
return $(parent).find(tagName).eq(0).text();
}
</script>
</head>
<body>
<div>
<!-- 메인 메뉴 영역 -->
<div class="title">
<h1>성적관리 (JSP버전)</h1>
<p>
[<a href="StudentMain.jsp">학생관리</a>]
[<a href="GradeMain.jsp">성적관리</a>]
</p>
</div>
<!-- 콘텐츠 영역 -->
<div class="main">
<h2>학생 검색</h2>
<form>
전화번호 <input type="text" id="tel" name="tel">
<input type="button" value="학생 검색" id="btn">
</form>
<div id="result">
<table id="t01">
<tr>
<th>번호</th><th>이름</th>
<th>전화번호</th><th>성적입력여부</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
//StudentAjax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.test.*" %>
<%
//데이터 수신 (tel)
String tel = request.getParameter("tel");
//XML 샘플
/*
<?xml version="1.0" encoding="UTF-8"?>
<studentInfo>
<student>
<sid>1</sid>
<name>홍길동</name>
<tel>010-123-1234</tel>
<gradeCheck>0</gradeCheck>
</student>
<student>
<sid>2</sid>
<name>박길동</name>
<tel>010-234-2345</tel>
<gradeCheck>0</gradeCheck>
</student>
</studentInfo>
*/
StringBuilder sb = new StringBuilder();
StudentDAO dao = new StudentDAO();
sb.append(String.format("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"));
sb.append(String.format("<studentInfo>"));
for (Student s : dao.searchTel(tel)) {
sb.append(String.format(" <student>"));
sb.append(String.format(" <sid>%s</sid>", s.getSid()));
sb.append(String.format(" <name>%s</name>", s.getName()));
sb.append(String.format(" <tel>%s</tel>", s.getTel()));
sb.append(String.format(" <gradeCheck>%s</gradeCheck>", s.getGradeCheck()));
sb.append(String.format(" </student>"));
}
sb.append(String.format("</studentInfo>"));
//Ajax 응답
response.setContentType("text/xml; charset=UTF-8");
response.getWriter().write(sb.toString());
%>
------------------------------------------
'Jquery' 카테고리의 다른 글
| 6일차_jQuery (0) | 2015.06.22 |
|---|
알 수 없는 사용자