190710_Day63 JSP
복습
Web_INF/src 에는 Java File, DAO, VO (.java는 여기에! )
자바와 관련없는 것들은? 프로젝트 밑에 sub 디렉토리 만들어서!
- HTML, CSS, JavaScript, JSP
.xml은? 어디 넣어도 괜찮아
- 데이터에 목적 같으면 sub디렉토리에
- web.xml은 Web_INF 에
- 디렉토리 구조
- TomTest
- sub디렉토리
- HTML, CSS, JavaScript, JSP
- WEB_INF
- src
- .java 파일
- classes
- .class 파일
- lib
- .jar 파일
- web.xml 파일
- src
- sub디렉토리
- TomTest
hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안녕</title>
</head>
<body>
<font color="blue" size="12">안녕, JSP~!!</font>
<br>
<script>
document.write("나는 자바스크립트~^O^*");
</script>
<%
out.print("<br>나는 JAVA~!!");
System.out.println("나는 콘솔 출력~~!!");
%>
</body>
</html>
< JSP > Java Server Page, 서버스크립트(jsp, php, asp)
- 자바 웹 어플리케이션
- 브라우저 서비스(뷰)를 담당하는 한 페이지를 표현
- Servlet Container (ApacheTomcat)를 통해 실행
- HTML(CSS, JavaScript) + Java코드
- <물>과 <기름> 처럼 섞이지 않아!
- 각각 브라우저실행과 JVM에서 실행이기 때문
- 누가 먼저 실행되나?
- Java 코드가 먼저 실행됨
- JSP 는 내(HTML)안에 너(JAVA) 있다.
<실행절차>
JSP페이지 요청
http://ip:port/컨텍스트루트/경로/hello.jsp
컨텍스트루트 == 프로젝트명
jsp페이지 존재 유무 ----무----> 404에러
매핑된 서블릿 클래스(hello_jsp.java) 존재 유무 -----무 ----> 생성
public class hello_jsp extends HttpServlet{ public void init(){} public void service(HttpServletRequest request, HttpServletResponse response){ out.print("JSP페이지에서 작성된 HTML"); } public void destroy(){} }컴파일(hello_jsp.class) 유무 -----무----> 컴파일
메모리 적재 유무 ----무----> 메모리 로딩!!
최초 호출인 경우 init()메소드 호출
service()메소드 호출
<JSP기본태그> ===> JSP페이지(.jsp)내에서 자바코드를 식별하는 태그
Declaraction(선언) <%! %>
<%!
멤버요소 ---> 변수선언 가능, 변수초기화X , 변수선언과 동시에 초기화는 가능, 메소드정의 가능
%>
<%! int su; ==> O su = 20; ==> X int su = 20; ==> O pulbic String getMsg() { return "가능하지만... 비권장 이왕이면 .java에 들어가는게 더 좋음"; } ==> O System.out.println(su2); ==> X,메소드호출불가 %>Sctiptlet(스크립트릿, 실행) <% %>
<% service() 메소드 안의 자바코드
- 변수선언, 변수초기화, 메소드호출, 조건문, 반복문, 자바주석문( // , /**/ )
%>
<% int su3; int su4 = 40; su = 10;//멤버 초기화 su3 = 30; //지역변수 초기화 if(조건식){} for(){} System.out.println("안녕") %>Expression(표현식, 출력식) <%= %>
<%= 데이터 %> ==> 서블릿 코드에서 out.print(데이터); 변환!! <%= 브라우저에 출력하고자 하는 데이터 %>
---> 데이터, 변수명, 사칙연산자, 메소드호출(리턴이 있는 메소드만 호출 가능)<%= 2 + 3 %> ===> out.print(2+3); <%= "안냥" %> ===> out.print("안냥"); <%= su4 %> ===> out.print(su4); <%= getMsg() %> ===> out.print(getMsg()); <%= getMsg(); %> ===> out.print(getMsg();); ==> 얘는 안됨
- Comment(주석, 설명문)<%-- --%>
문제1) 화면에 조회수를 출력하시오. (count.jsp)
=>조회수 : 1회
<%@page import="java.util.ArrayList"%>
<%@ 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>
<%! int cnt;
ArrayList<String> list = new ArrayList<>();
%>
<%
if(session.isNew()) cnt++;
%>
조회수 : <%= cnt %> 회
<br> 세션아이디 : <%=session.getId()%>
</body>
</html>문제2) 로그인 폼에서 아이디 비밀번호 가져오기
login_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>로그인폼</h3>
<hr>
<!--
<form action = "폼안의 데이터를 가지고서 이동할 URL">
만약 action속성을 정의하지 않는 경우 현재 문서가 기본적으로 정의됨.
(현재문서가 브라우저에 재호출)
1. <form>
2. <form action = "login_form.html">
=> 1번과 2번은 같다.
만약 method속성을 정의하지 않는 경우 기본값 method="get"
=> method속성은 HTTP요청방식을 의미!!
-->
<form action="/TomTest/0710/param_test.jsp" method="post">
ID : <input type="text" size="10" name="id"><br> PASS : <input
type="password" size="10" name="pwd"><br> <input
type="submit" value="로그인">
</form>
</body>
</html>param_test.jsp
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터테스트</title>
</head>
<!-- HTML주석 -->
<%-- JSP주석 --%>
<%-- param_test.jsp --%>
<body>
<!-- 당신이 현재 페이지를 오픈한 시간 <%= new Date() %>--><br>
전달받은 아이디 : <%= request.getParameter("id") %><br>
전달받은 비밀번호 : <%= request.getParameter("pwd") %><br>
</body>
</html>문제3) 화면에 계산기를 출력하시오
Calculator.java (어제것.)
package t0709;
public class Calculator {//(사칙연산관련)기능정의
//모델(데이터 관련된) 클래스 : 보통 결과데이터를 리턴!!
private int su1;
private int su2;
private String oper;
private int result;//사칙연산 결과를 담을 변수
public Calculator(int su1, int su2, String oper) {
this.su1 = su1;
this.su2 = su2;
this.oper = oper;
choice();
}
//public int plus(int su1, int su2) { return su1+su2;}
//public int minus(int su1, int su2) { return su1-su2;}
private void choice() {
if(oper.equals("+"))plus();
else if(oper.equals("-"))minus();
else if(oper.equals("*"))multi();
else //if(oper.equals("/"))
div();
}//choice
public void plus() {
result = su1+su2;
}
public void minus() {
result = su1-su2;
}
public void multi() {
result = su1*su2;
}
public void div() {
result = su1/su2;
}
//최종 결과값 리턴!!
public String getResultStr() {
return "결과값: "+su1 + oper + su2 + "="+ result;//결과값: 2+3=5
}
}result.jsp
<%@page import="t0709.Calculator"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산 결과 출력</title>
</head>
<body>
<%
//요청페이지로(calc.jsp)부터 데이터 얻기
//요청페이지 == request
String su1 = request.getParameter("su1");
String su2 = request.getParameter("su2");
String oper = request.getParameter("oper");
Calculator cal = new Calculator(Integer.parseInt(su1),
Integer.parseInt(su2),
oper);
%>
<%= cal.getResultStr() %>
</body>
</html>미션1
화면에 구구단을 출력하시오
화면에 구구단을 출력하시오. ===> gugudan.jsp (<table>태그 사용)
2*1=2 3*1=3 ..................... 9*1=9
.............................................
2*9=18 3*9=27 ..................... 9*9=81
==> <tr>태그 9개 생성
<td>태그가 각 행마다 8개 생성gugudan.jsp
<%@ 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">
/* css주 석
태그이름 {
스타일명1 : 스타일값;
스타일명2 : 스타일값2;
}
*/
table{ margin : auto }
h3{
text-align: center
}
td{
padding: 5px;
}
</style>
</head>
<body>
<h3>구구단</h3>
<hr>
<table border = "2">
<tr bgcolor = "pink">
<% for(int i = 1; i <10; i++ ){ %>
<th> <% out.print(i); %> 단</th>
<% } %>
</tr>
<% for(int i = 2; i <10; i++) { %>
<tr bgcolor = "gray">
<% for (int j = 1; j < 10; j++) { %>
<td> <% out.print(j +"X" + i + " = " + i*j); %> </td>
<% } %>
</tr>
<% } %>
</table>
</body>
</html>미션2
화면에 계산기를 출력하시오
- calc2.jsp로만 실행 (계산기폼과 계산결과가 한화면에 출력) : CalcServlet2클래스 참조
- request.getParameter("name")사용
- 기존 Calculator클래스 사용
---> 계산버튼 클릭시
- 계산폼 밑으로 수평선<hr> 긋기
- 수평선 밑에 계산결과를 '파랑색'으로 "결과값: 2*3=6" 출력
---> 만약 su1 또는 su2에 데이터가 입력되지 않았다면
'빨강색'으로 "데이터를 입력!!" 출력
---> 만약 su1 또는 su2에 숫자아닌값이 입력되었다면
'빨강색'으로 "숫자만 입력!!" 출력
---> 만약 oper가 '/'이고 su2가 '0'이 입력되었다면
'빨강색'으로 "0으로 나눌 수 없습니다!!" 출력calc2.jsp
<%@page import="t0709.Calculator"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP계산기</title>
</head>
<%--calc2.jsp --%>
<body>
<h3>JSP계산기2</h3>
<hr>
<form method="post" action="calc2.jsp">
<input type="text" size="4" name="su1">
<select name="oper">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" size="4" name="su2">
<button type="submit">계산</button>
</form>
<% //service()메소드 안에 들어갈 자바코드!!
if(request.getMethod().equals("POST")){
String su1 = request.getParameter("su1");
String su2 = request.getParameter("su2");
String oper = request.getParameter("oper");
System.out.println("su1>>"+su1);
out.print("<hr>");
//입력 데이터에 대한 유효성 검사!!
String msg;
boolean flag=false;
if(su1.equals("") || su2.length()==0){//빈값 체크
msg = "데이터를 입력!!";
//}else if(!su1.matches("[0-9]+") || !su2.matches("[\\d]+")){//숫자 체크
}else if( !(su1.matches("[0-9]+") && su2.matches("[\\d]+")) ){//숫자 체크
msg = "숫자만 입력!!";
}else if( oper.equals("/") && su2.equals("0")){// 나누기0 체크
msg = "0으로 나눌 수 없습니다!!";
}else{//정상입력
flag=true;
Calculator calc = new Calculator(Integer.parseInt(su1),
Integer.parseInt(su2),oper);
msg = calc.getResultStr();
}
if(flag) out.print("<font color=blue>");
else out.print("<font color=red>");
out.print(msg+"</font>");
}//if(POST)
%>
</body>
</html>'클라우드 기반 웹 개발자 과정 공부' 카테고리의 다른 글
| 190715_Day66 JSP 기본객체, 액션, 표현 언어 (EL), 커스텀 태그, JSTL (표준태그 라이브러리) (0) | 2019.07.15 |
|---|---|
| 190712_Day65 JSP (0) | 2019.07.12 |
| 190711_Day64 JSP (0) | 2019.07.11 |