학원/강의

*74일차

pringspring 2022. 5. 12. 18:42

 

중요한 개념

 

 

 

*Emmet 환경설정

 

@jsp 기본

 

*합계구하기

	int sum = 0;
	for(int i = 1; i <= 100; i++)
		sum += i;
	System.out.println("sum@server-side = " + sum);
	
	int n = 100;
const clientSideSum = document.querySelector("#client-side-sum");
	let sum = 0;
	for(let i = 1; i <= 100; i++)
		sum += i;
	clientSideSum.innerHTML = sum;
	console.log("sum@client-side = ", sum);

<결과>

 

 

*밀리초 구하기

-자바
<p id="server-side-time"><%= System.currentTimeMillis() %></p>

-스크립트
	// 클라이언트 사이드 시각 출력
	document.querySelector("#client-side-time").innerHTML = Date.now();
	
	// 서버단 처리값을 자바스크립트에서 활용하기
	const k = 100 + <%= n %>;
	document.querySelector("#server-to-client").innerHTML = k;

<결과>

  • 서버의 시간이 조금 더 늦다.
  • 요청을 받고 서버갔다가 클라이언트에 오기때문
  • 스크립트보다 자바가 먼저 실행됨
  • → 자바처리 결과는 스크립트에 전달 가능 (역은 성립X)

2번에 관한 설명(그림)

 

 

*주석

  • jsp : servlet 변환과정에서 처리되지않음 | 클라이언트에 전달 X
  • html : 클라이언트에 전달이 된다.

 

 

*분기처리

<%
	String type = request.getParameter("type");
	System.out.println("type = " + type);

	if("abc".equals(type)){
%>
	<p>abcdefghijklmn</p>
<%		
	} else if("가나다".equals(type)){
%>
	<p>가나다라마바사</p>
<% 		
	} else if("123".equals(type)){
%>
	<p>1234567</p>
<%		
	} else {
%>
	<p>타입이 지정되지 않았습니다.</p>
<%		
	}
%>

<결과>

 

 

*반복처리

<h2>반복처리</h2>
<% 	
	List<String> fruits = Arrays.asList("사과", "바나나", "아보카도", "키위"); 
%>	
	<ul>
<% 	
	for(String fruit : fruits) { 
%>
		<li><%= fruit %></li>         
<%	
	} 
%>
	</ul>

<결과>

 

**실습문제

	<h2>@실습문제</h2>
<% 
	if("abc".equals(type) || "가나다".equals(type)){
		String value = request.getParameter("value");
		
		if(value != null){
			String[] values = value.split(",");
%>
			<ul>
<%
			for(String val : values){
%>
				<li><%= val %></li>
<%				
			}
%>
			</ul>
<%			
		}
		
	}
%>

 

 

 

*페이지 재사용

  • header와 footer로 쪼갠다(?)
  • header와 footer를 공유함
--header.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = "홍길동";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 재사용</title>
</head>
<body>
	<header>
		<h1>headerheaderheader</h1>
		<nav>
			<ul>
				<li><a href="main1.jsp">main1</a></li>
				<li><a href="main2.jsp">main2</a></li>
				<li><a href="main3.jsp">main3</a></li>
			</ul>
		</nav>
	</header>
	<main>
--main1.jsp



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>

		<h1>main1</h1>
		<p><%= name %>님, 반갑습니다.</p>
		<!-- p>lorem -->
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex placeat libero eius ipsum possimus tempora reiciendis facilis quasi quis excepturi labore error modi numquam delectus magni beatae facere eligendi autem.</p>
		
		
		<script>
		const title = document.querySelector("header h1").innerHTML;
		alert(title);
		</script>
		
<%@ include file="/jsp/footer.jsp" %>
--footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	</main>
	<footer>
		<h1>footer</h1>
	</footer>	
	
</body>
</html>

 

<결과>

 

@jdbc 접속

1. 프로젝트 생성

  • New Dynamic Web Project

2. 컴파일된 경로 지정

  • src/main/webapp/WEB-INF/classes

3. Java Build Path 

  • Libraries에서 17버전 제거
  • Modulepath - Add Library - JRE System Library - default JRE 설정

4. sql 폴더생성

  • hello-mvc 하위에 생성

5. sql 파일생성

  • 4번에 생성
  • File name : hello-mvc.sql

6. oracle에 5번 드래그앤드랍

--==============
--관리자계정
--==============
--web계정셍성

alter session set "_oracle_script" = true;

create user web
identified by web
default tablespace users;


grant connect,resource to web;

alter user web quota unlimited on users;

----------------------------------------
--회원테이블 생성

create table member (
    member_id varchar2(15),
    password varchar2(300) not null,
    member_name varchar2(50) not null,
    member_role char(1) default 'U' not null,
    gender char(1),
    birthday date,
    email varchar2(200),
    phone char(11) not null,
    address varchar2(200),
    hobby varchar2(200),
    enroll_date date default sysdate,
    constraint pk_member_id primary key(member_id),
    constraint ck_member_role check(member_role in ('U', 'A')),
    constraint ck_member_gender check(gender in ('M', 'F')),
    constraint uq_member_email unique(email)
);

 --회원 추가
    insert into member
    values (
        'honggd', '1234', '홍길동', 'U', 'M', to_date('20000909','yyyymmdd'),
        'honggd@naver.com', '01012341234', '서울시 강남구', '운동,등산,독서', default
    );

    insert into member
    values (
        'qwerty', '1234', '쿠어티', 'U', 'F', to_date('19900215','yyyymmdd'),
        'qwerty@naver.com', '01012341234', '서울시 송파구', '운동,등산', default
    );

    insert into member
    values (
        'admin', '1234', '관리자', 'A', 'M', to_date('19801010','yyyymmdd'),
        'admin@naver.com', '01056785678', '서울시 관악구', '게임,독서', default
    );
    
select * from member;
commit;
  • system으로 접속
  • 접속 새로 생성

  • 접속생성 후 web으로 정보변경

 

7. 이클립스에서 폴더생성

index.jsp는 webapp하위에

 

8.지역서버 새로 생성

  • Overview에서 Serve modules...~체크
  • 언어 영어로 설정

9. 화면 뜨면 성공