JSP (Java Server Page)
: 웹에서 실행하는 프로그램
: java in HTML
class Test {
int a;
public void sub( ){
int a;
}
}
→ 이런식으로 a를 2번 잡아도된다. (전역변수 / 지역변수)
1. 선언문
<%! 전역변수 or 메소드 - 1번 처리 %> init()
2. 스크립트릿 (scriptlet)
<% 지역변수 or service처리 - 요청 시 마다 처리 %> service() - doGet(~~) 또는 doPost(~~)
3. 출력
<%= 값 or 변수 %>
<%@ %>
Dynamic Web Project: testJSP
Folder: exam
hello.jsp
http://localhost:8080/testJSP/exam/hello.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>
</head>
<body>
HELLO JSP !! <br/>
안녕하세요 JSP !! <br/>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
//Java 구역 - 전역변수
//처음 실행할 때 딱 1번만 실행
String name = "홍길동";
int age = 25;
%>
<%
//Java 구역 - 지역변수
//요청시마다 실행한다.
age++;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
HELLO JSP !! <br/>
안녕하세요 JSP !! <br/>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
//Java 구역 - 전역변수
//처음 실행할 때 딱 1번만 실행 - init()
String name = "홍길동";
int age = 25;
%>
<%
//Java 구역 - 지역변수
//요청시마다 실행한다. service()
age++;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
HELLO JSP !! <br/>
안녕하세요 JSP !! <br/>
나의 이름은 <%=name %>입니다. <br/>
</body>
</html>
<% out.println("나의 이름은 " + name + "입니다."); %> <br/>
하지만 웬만하면 저렇게 적지말기 무거워진다 !
여기서 의문 !! 나는 out이라는 객체를 jsp에서는 생성한 적이 없다.
request, response도 선언한적이 없다.
근데 jsp에서는 된다.
왜냐하면 jsp에서는 내장객체를 쥐고있기 때문이다.
내장객체
1. request : javax.servlet.http.HttpServletReqeuest
2. response : javax.servlet.http.HttpServletResponse
3. out : javax.servlet.jsp.JspWriter
4. session : javax.servlet.http.HttpSession
5. application : javax.servlet.ServletContent
6. pageContent : javax.servlet.jsp.PageContext
7. page : javax.servlet.jsp.HttpJspPage
8. config : javax.servlet.ServletConfig
9. exception : java.lang.Throwable
Java 파일은 컴파일이라는 작업을 취하기 때문에 반드시 *.class 파일이 있어야한다.
이클립스는 알아서 컴파일을 한다.
자바는 반드시 컴파일 해야한다. 그러면서 *.class 파일 있어야한다.
hello.jsp
↓
hello_jsp.java (서블릿)
↓ 소스가 바뀔 때만 컴파일
hello_jsp.class
D:\Web\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\testJSP\org\apache\jsp\exam
자바를 컴파일하면 반드시 톰캣서버가 재구동해야한다. (껐다 켜야한다.) --- 다시시작 ----> init 부터 다시 수행
jsp도 껐다 켜지면 전역변수부분부터 다시 수행 / 새로고침만 하면 지역변수만 다시 수행
나의 나이는 <%=age %>살입니다. <br/>
새로고침하면 나이가 증가가된다.
다시 처음으로 가려면 컴파일하면 된다.
<%!ㅇㄴㄹㄴㄹㅇㄴㄹㄴ
//Java 구역 - 전역변수
//처음 실행할 때 딱 1번만 실행
String name = "홍길동";
int age = 25;
%>이런식으로 아무거나 적었다 지워도 뭐가 바뀐줄 알고 새로 컴파일하면서 처음부터 시작하게 된다.
주석
1. Java
// 1줄
/*
2줄 이상
*/
2. HTML
<!--
웹브라우저에는 안보이나 소스보기(F12)하면 보인다.
내부적으로는 처리( <% %> <%= %> 수행한다)
-->
3. JSP
<%--
웹브라우저에도 안보이고 소스보기(F12)해도 안 보인다.
--%>
<!-- HELLO JSP !! <br/> -->
<%-- 안녕하세요 JSP !! <br/> --%>
나의 이름은 <%=name %>입니다. <br/>
<% out.println("나의 이름은 " + name + "입니다."); %> <br/>
나의 나이는 <%=age %>살입니다. <br/>
HTML 주석은 웹에는 간다. <!-- -->
JSP 주석은 아예 웹에 가지도 않는다. <%-- --%>
<!-- 나의 나이는 <%=age %>살입니다. <br/> -->
<%-- <% out.println("내 나이는 " + age + "살입니다."); %> --%>
새로고침하게 되면 안에서는 나이가 증가하고있다.
주석걸었으니 age변수에도 주석을 걸어버리면 error가 생긴다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
//Java 구역 - 전역변수
//처음 실행할 때 딱 1번만 실행 - init()
String name = "홍길동";
//int age = 25;
%>
<%
//Java 구역 - 지역변수
//요청시마다 실행한다., service()
//age++;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- HELLO JSP !! <br/> -->
<%-- 안녕하세요 JSP !! <br/> --%>
나의 이름은 <%=name %>입니다. <br/>
<% out.println("나의 이름은 " + name + "입니다."); %> <br/>
<!-- 나의 나이는 <%=age %>살입니다. <br/> -->
<%-- <% out.println("내 나이는 " + age + "살입니다."); %> --%>
</body>
</html>
그래서 아예 변수가 사라지게 하고싶으면 JSP 주석을 걸어야한다 !!
gugudan.jap
2 * 1 = 2 3 * 1 = 3 ... 9 * 1 = 9
2단 3단 9단 단이 자주바뀐다.
그러므로 안쪽 for문이 단이 되면 된다.
table로 잡아서 지그재그로 출력안되게 하는 부분확인 !!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단</title>
</head>
<body>
<table>
<% for(int i = 1; i < 10; i++){ %>
<tr>
<%for(int dan = 2; dan < 10; dan++){ %>
<td><%= dan %> * <%=i%> = <%= dan*i %></td>
<%}//for dan %>
</tr>
<%}//for i %>
</table>
</body>
</html>
css로 꾸며주기
<style type="text/css">
td {
padding: 0 5px;
width: 100px;
}
</style>
미니 프로젝트
http://localhost:8080.projectJSP/index.jsp
Dynamic Web Project: projectJSP
index.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>
</head>
<body>
<h2>메인화면</h2>
<h3><a href="">회원가입</a></h3>
<h3><a href="">로그인</a></h3>
<h3><a href="">로그아웃</a></h3>
<h3><a href="">글쓰기</a></h3>
<h3><a href="">목록</a></h3>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인화면</title>
<style type="text/css">
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
margin-top: 50px;
}
.nav-bar {
margin-top: 20px;
padding: 10px 20px;
}
.nav-bar h3 {
display: inline-block;
margin: 0 10px;
}
.nav-bar h3 a {
text-decoration: none;
font-size: 16px;
padding: 8px 12px;
color: black;
}
.nav-bar h3 a:hover {
color: gray;
}
</style>
</head>
<body>
<h2>메인화면</h2>
<div class="nav-bar">
<h3><a href="">회원가입</a></h3>
<h3><a href="">로그인</a></h3>
<h3><a href="">로그아웃</a></h3>
<h3><a href="">글쓰기</a></h3>
<h3><a href="">목록</a></h3>
</div>
</body>
</html>
Folder: member
memberWriteForm.jsp
Folder: board
memberWriteForm.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>
<style type="text/css">
table {
border-collapse: collapse;
width: 700px;
border: 1px solid;
margin: 0 auto;
}
th {
padding: 7px 15px;
border: 1px solid;
}
td {
padding: 7px 10px;
border: 1px solid;
}
div {
color: red;
font-size: 8pt;
font-weight: bold;
}
input[type="button"], input[type="submit"], input[type="reset"] {
background-color: #E0E0E0;
border: 1px solid;
text-align: center;
font-size: 14px;
margin: 4px 2px;
padding: 4px 5px;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #BFBFBF;
}
</style>
</head>
<body>
<form method="post" action="">
<table border="1">
<tr>
<th>이름</th>
<td>
<input type="text" name="name" placeholder="이름 입력" size="15"/>
<div id="nameDiv"></div>
</td>
</tr>
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" placeholder="아이디 입력"/>
<input type="button" value="중복확인" />
<div id="idDiv"></div>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pwd" id="pwd" placeholder="비밀번호 입력" size="25"/>
<div id="pwdDiv"></div>
</td>
</tr>
<tr>
<th>재확인</th>
<td><input type="password" name="repwd" placeholder="비밀번호 입력" size="25"/></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="0" checked/>남자
<input type="radio" name="gender" value="1"/>여자
</td>
</tr>
<tr>
<th>이메일</th>
<td >
<input type="text" name="email1" /> @
<input type="text" name="email2" />
<input type="email" name="email3" id="email3" list="email3_list" oninput="change"/>
<datalist id="email3_list">
<option value="직접입력">직접입력</option>
<option value="naver.com"></option>
<option value="gmail.com"></option>
<option value="daum.net"></option>
</datalist>
</td>
</tr>
<tr>
<th>휴대전화</th>
<td>
<select name="tel1" style="width: 70px;">
<option value="010">010</option>
<option value="011">011</option>
<option value="019">019</option>
</select>
<input type="text" name="tel2" size="4" maxlength="4"/>
<input type="text" name="tel3" size="4" maxlength="4"/>
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" name="zipcode" placeholder="우편번호" size="6" readonly/>
<input type="button" value="우편번호 검색" /><br>
<input type="text" name="addr1" placeholder="주소" size="50" readonly/><br>
<input type="text" name="addr2" placeholder="상세주소" size="50"/>
</td>
</tr>
<tr >
<td colspan="2" align="center">
<input type="submit" value="회원가입" />
<input type="reset" value="다시입력" />
</td>
</tr>
</table>
</form>
</body>
</html>
우편번호 API 사용하기
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
<tr>
<th>주소</th>
<td>
<input type="text" name="zipcode" id="zipcode" placeholder="우편번호" size="6" readonly/>
<input type="button" value="우편번호 검색" /><br>
<input type="text" name="addr1" id="addr1" placeholder="주소" size="50" readonly/><br>
<input type="text" name="addr2" id="addr2" placeholder="상세주소" size="50"/>
</td>
</tr>
여기는 우리랑 거의 똑같다.
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function checkPost() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("addr1").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("addr2").focus();
}
}).open();
}
</script>
</body>
</html>우편번호 검색이라는 번호를 클릭하면 checkPost( ) 함수로 가게하기
<input type="button" value="우편번호 검색" onclick="checkPost()"/><br>
자바스크립트가 너무 길기 때문에 옮기자 !!
Folder: js
File: member.js
//아이디 중복체크
function checkId(){
}
//우편번호 - Daum API
function checkPost() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("addr1").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("addr2").focus();
}
}).open();
}
memberWriteForm.jsp 한테 위치 알려주기 !!
<script src="../js/member.js"></script>연결 잘됐나 확인~
//아이디 중복체크
function checkId(){
alert('sdfsdfsdf');
}
아이디 중복 체크
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id" placeholder="아이디 입력"/>
<input type="button" value="중복확인" onclick="checkId()" />
<div id="idDiv"></div>
</td>
</tr>
myWindow처럼 이름을 줘야지 중복 창이 생성되지 않는다.
window.open("","myWindow","width=450 height=150");//아이디 중복체크
function checkId(){
let id = document.getElementById("id").value;
if(id == '')
document.getElementById("idDiv").innerHTML = "먼저 아이디 입력";
else
window.open("","myWindow","width=450 height=150 top=200 left=750");
}
Folder: member
File: checkId.jsp
member.js
아이디 입력했을 때 창이 뜨면서 경로로 가는거 확인
//아이디 중복체크
function checkId(){
let id = document.getElementById("id").value;
if(id == '')
document.getElementById("idDiv").innerHTML = "먼저 아이디 입력";
else
window.open("./checkId.jsp","myWindow","width=450 height=150 top=200 left=750");
}중복체크 버튼이 누르면 checkId.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>
</head>
<body>
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
</body>
</html>
각각이기 때문에 우리가 입력한 아이디가 checkId.jsp는 모른다.
그러므로 get방식으로 넘겨줘야한다.
//아이디 중복체크
function checkId(){
let id = document.getElementById("id").value;
if(id == '')
document.getElementById("idDiv").innerHTML = "먼저 아이디 입력";
else
window.open("./checkId.jsp?id="+id,"myWindow","width=450 height=150 top=100 left=750");
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//데이터
String id = request.getParameter("id");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%=id %>
</body>
</html>
데이터 연결돼서 id값이 넘어오는 것을 확인할 수 있다.
이제 DB로 가서 받은 ID있는지 중복체크해야한다.
Package: member.dao
File: MemberDAO.java
오라클 DB에 테이블 생성
purge recyclebin;drop table member purge; -- 휴지를 안 만들고 지운다.create table member(
name varchar2(30) not null,
id varchar2(30) primary key, -- 기본키, unique, not null, 무결성 제약 조건
pwd varchar2(70) not null,
gender varchar2(3),
email1 varchar2(20),
email2 varchar2(20),
tel1 varchar2(10),
tel2 varchar2(10),
tel3 varchar2(10),
zipcode varchar2(10),
addr1 varchar2(100),
addr2 varchar2(100),
logtime date);
Folder: sql
File: member.sql
-- 회원가입과 로그인 (Oracle)
create table member(
name varchar2(30) not null,
id varchar2(30) primary key, -- 기본키, unique, not null, 무결성 제약 조건
pwd varchar2(30) not null,
gender varchar2(3),
email1 varchar2(20),
email2 varchar2(20),
tel1 varchar2(10),
tel2 varchar2(10),
tel3 varchar2(10),
zipcode varchar2(10),
addr1 varchar2(100),
addr2 varchar2(100),
logtime date);insert into member(name, id, pwd) values('홍길동', 'hong', '111');
commit;select * from member;
MemberDAO.java
package member.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class MemberDAO {
private String driver = "oracle.jdbc.driver.OracleDriver";
private String url = "jdbc:oracle:thin:@localhost:1521:xe";
private String username = "C##JAVA";
private String password = "1234";
private Connection con;
private PreparedStatement pstmt;
private ResultSet rs;
private static MemberDAO memberDAO = new MemberDAO();
public static MemberDAO getInstance() {
return memberDAO;
}
public MemberDAO() {
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public void getConnection() {
try {
con = DriverManager.getConnection(url, username, password);
} catch (SQLException e) {
e.printStackTrace();
}
}
isExistId( )
public boolean isExistId(String id) {
getConnection();
boolean exist = false;
String sql = "select * from member where id=?";
try {
pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if(rs.next())
exist = true;
else
exist = false;
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (con != null) con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return exist;
}
}<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//데이터
String id = request.getParameter("id");
//DB
MemberDAO memberDAO = MemberDAO.getInstance();
//id가 있으면 true(사용 불가능) / id가 없으면 false(사용 가능)
boolean exist = memberDAO.isExistId(id); //id가 있으면 true(사용 불가능)
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% if (exist) { %>
<%=id %>는 이미 사용 중입니다.
<% } else { %>
<%=id %>는 사용 가능한 아이디입니다.
<% } %>
</body>
</html>
재귀호출을 해줘야한다.
<body>
<% if (exist) { %>
<%=id %>은(는) 이미 사용 중입니다.
<br><br>
<form action="checkId.jsp">
아이디 <input type="text" name="id">
<input type="submit" value="중복체크"/>
</form>
<% } else { %>
<%=id %>은(는) 사용 가능한 아이디입니다.
<% } %>
</body>
</html>
이제 사용이 가능한 아이디이면 그 아이디를 사용할지 말지를 checkIdClose( ) 함수로 가서 확인해야한다.
<body>
<% if (exist) { %>
<%=id %>은(는) 이미 사용 중입니다.
<br><br>
<form action="checkId.jsp">
아이디 <input type="text" name="id">
<input type="submit" value="중복체크"/>
</form>
<% } else { %>
<%=id %>은(는) 사용 가능한 아이디입니다.
<br><br>
<input type="button" value="사용하기" onclick="checkIdClose()" />
<% } %>
</body>
</html>아이디 가져가라 시켜야함
<input type="button" value="사용하기" onclick="checkIdClose('<%=id %>')" /><script type="text/javascript">
function checkIdClose(id){
opener.document.getElementById("id").value = id;
window.close();
opener.document.getElementById("pwd").focus();
}
</script>
'JSP & Servlet' 카테고리의 다른 글
| DAY 46 JSP - Connection Pool / 로그인 / 쿠키(2024.09.05) (1) | 2024.09.06 |
|---|---|
| DAY 47 - 미니프로젝트(member) - 세션 / 회원정보 수정 / 글 작성 (2024.09.06) (2) | 2024.09.06 |
| DAY 45 Servlet - Guestbook2 ( 2024.09.04 ) (0) | 2024.09.04 |
| DAY 44 - Servlet - Guestbook ( 2024.09.03 ) (0) | 2024.09.04 |
| DAY 43 - Servlet (2024.09.02) (0) | 2024.09.02 |
