2022.10.24 [MON]
- Day 56-
수업 주요 목차
- BootStrap
- 반응형 웹
- 게시판 프로젝트
- Git 형상관리
🤖Review
- DBCP : Database Connection Pool을 정의하는 객체로 시스템 성능 향상을 위해 컨넥션을 미리 생성해 놓고 빌려주고 반납하는 동작원리
- DataSource : 다양한 dbcp 구현체들의 상위 인터페이스(어플리케이션과 구체적인 dbcp 구현체와의 결합도를 느슨하게 하기 위해 사용하는 인터페이스)
- AJX : 비동기 자바스크립트 통신, reloading없이 필요한 데이터만 응답받는다.
- JSON(JavaScript Object Notation): 자바스크립트 객체 표기법 / 구조화된 데이터 통신 목적으로 하며 경량, 높은 생산성(데이터 표현이 단순하고 직관적)이 장점
bootstrap : 반응형 웹사이트 개발을 위한 css framework(뼈대/틀/기반)
반응형 웹 : 다양한 기기(pc,태블릿, 모바일, 스마트 tv 등)에 최적화된 화면을 제공
- CSS 의 @media query(미디어 쿼리) : html5, css3에서 지원되는 반응현 웹을 위한 기술
- 기기 화면의 종류와 크기에 따라 적절한 디자인을 제공
- 미디어 쿼리를 사용하기 위한 선언부
- <meta name="viewport" content="width=device-width, iniatial-scale=1">
🔎 Eclipse 실습 내용
1. 크기에 따라 bg 색상이 달라지는 반응형 웹
<%@ 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>반응형 웹을 위한 CSS 미디어 쿼리</title>
<meta name="viewport" content="width=device-width, iniatial-scale=1">
<style type="text/css">
body{
background-color: pink;
}
/*
부트스트랩 미디어쿼리 속성
sm(576 이상) md(768이상) lg(992이상)
*/
@media(min-width:576px){
body{
background-color: skyblue;
}
}
@media(min-width:768px){
body{
background-color: lightyellow;
}
}
@media(min-width:992px){
body{
background-color: black;
}
}
</style>
</head>
<body>
<div class="container pt-3">
</div>
</body>
</html>
2. bootstrap grid
<%@ 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>
<title>bootstrap grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-3">
<div style="background-color: skyblue;"> div test</div>
<div style="background-color: orange;"> div test</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
<%-- bootstrap grid는 총 12로 구성 : sm은 576 이상일 때 적용(css media query가 동작됨) --%>
<div class="row">
<div class="col-sm-3 bg-primary">left</div>
<div class="col-sm-6 bg-warning"><br><br><br><br>main</div>
<div class="col-sm-3 bg-success">right</div>
</div>
</div>
</body>
</html>↓
3. bootstrap grid offset
<%@ 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>bootstrap grid offset</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-3">
<div class="row">
<div class="col-sm-5 bg-success text-light">col sm 5</div>
<%-- offset-sm-2를 명시하면 오른쪽으로 2열만큼 이동해 시작 --%>
<div class="col-sm-5 offset-sm-2 bg-danger text-light">col sm 5</div>
</div>
<%-- grid 총 12 중 3만큼 건너뛰어 9열 영역을 사용 bg-success --%>
<div class="row">
<div class="col-sm-9 offset-sm-3 bg-success text-light">col sm 9</div>
</div>
</div>
</body>
</html>↓
4. 게시판 레이아웃
<%@ 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>layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="css/myhome.css">
</head>
<body>
<div class="container-fluid pt-3">
<%-- header영역 --%>
<div class="row header">
<div class="col-sm-8 offset-sm-2" align="right">
<c:import url="header.jsp"></c:import>
</div>
</div>
<%-- Header영역 끝 --%>
<%-- Main영역 시작 --%>
<div class="row">
<div class="col-sm-8 offset-sm-2" align="right">
<%--Main 본문내용 --%>
본문내용
</div>
</div>
<%-- Main영역 끝 --%>
</div>
</body>
</html>↓
게시판 프로젝트
더보기
**요구사항**
회원제 커뮤니티 게시판
비로그인 상태에서는 게시판의 리스트 정보만 제공한다
메인 화면 상단부에는 로그인 할 수 있는 폼이 제공된다
리스트에서는 게시물번호, 제목 , 작성자명 , 작성일 , 조회수가 제공된다
리스트의 게시물은 최신 등록순으로 정렬되어 제공된다
사용자가 로그인 하면 상단부 영역에는 로그인 폼 대신
홈(링크) 글쓰기(링크) 회원이름 로그아웃(링크) 가 제공된다
사용자가 로그인하면 리스트의 제목부분의 링크가 부여되어 클릭하면 게시물 상세보기가 제공된다
상세 게시물 정보는 게시물번호, 제목 , 작성자, 작성일시(리스트에서는 작성일까지 보여줌) , 조회수, 게시물 본문내용이 제공된다
회원 자신이 작성한 게시물에 대해서는 상세 게시물 정보 하단에 삭제와 수정버튼이 제공된다
상단부의 로그아웃 링크를 누르면 로그아웃 하시겠습니까? 의사를 재확인한 후 확인버튼 누르면 로그아웃처리한다
로그아웃 처리가 되면 리스트의 제목부분 링크는 비활성화된다
상단부의 글쓰기 링크를 회원이 클릭하면 게시물 작성폼이 제공되고 제목과 본문내용을 작성해서
글쓰기 버튼 누르면 게시글이 등록되고 게시물 리스트 화면으로 이동된다
상세 게시물 보기 화면에 회원 자신이 작성한 게시물에 한해 삭제와 수정버튼이 제공되는 데
삭제버튼을 누르면 게시물을 삭제하시겠습니까? 의사를 재확인한 후 삭제시키고 리스트로 이동시킨다
동일하게 수정버튼을 누르면 게시물을 수정하시겠습니까? 의사를 재확인한 후 수정폼을 제공한다
수정폼은 제목과 본문내용을 수정할 수 있고 수정 후 수정하기 버튼을 누르면 수정하고 리스트로 이동시킨다
리스트 화면에서 상세글보기를 위해 제목을 클릭해서 상세 글보기 화면 제공되는 시점에 조회수를 증가시킨다
------------------------------------------------------------------------------------------------
1. 요구분석 : UML의 UseCase Diagram, UI설계(bootstrap template 자료조사)
2. 설계 :
1) UI 설계, DB 설계(ERD), UML - Class Diagram
2) File List : 분석 설계 관련, DB SQL 관련, model 영역, View 영역, Controller 영역
3) main UI 도출
3. 구현
1. ERD
2. SQL 연습
- Date 타입 : 데이터베이스 시간 ( 연,월,일 시,분,초 ) 를 관리하는 데이터 타입
- 주요 함수
1. to_char() : 데이터베이스에 저장된 date 형의 정보를 문자열로 반환받을 때 사용하는 함수
2. to_date() : 문자 타입의 시간 정보를 데이터베이스의 date 형으로 변환해 저장할 때 사용하는 함수 - sysdate 예약어 : 현재 시간을 표현하는 키워드
- oracle clob datatype을 이용하면 많은 문자열을 저장할 수 있음
- CLOB(Character Large OBject) 최대 4GB까지 가능
- 사용법은 varchar2와 동일함
-- Oracle dual 테이블 : 오라클에서 제공하는 기본 테이블 , 함수와 예약어를 실행할 때 사용
SELECT SYSDATE FROM DUAL;
-- TO_CHAR() 함수를 이용해 원하는 시간 포맷으로 설정해 문자열로 반환받는다
SELECT TO_CHAR(SYSDATE,'YYYY-MM-DD') FROM DUAL;
SELECT TO_CHAR(SYSDATE,'YYYY-MM-DD HH:MI:SS') FROM DUAL;
SELECT TO_CHAR(SYSDATE,'YY.MM.DD.DAY') FROM DUAL;
--테이블생성
CREATE TABLE date_test(
id VARCHAR2(100) PRIMARY KEY,
mydate DATE NOT NULL
)
INSERT INTO date_test(id, mydate) VALUES('java',sysdate);
SELECT TO_CHAR(SYSDATE,'YYYY-MM-DD') FROM DATE_TEST WHERE id='java';
--spring id, mudate 2022.1.11. 정보 insert
INSERT INTO DATE_TEST(id,mydate) VALUES('spring',TO_DATE('2022-01-11','YYYY-MM-DD'));
INSERT INTO DATE_TEST(id,mydate) VALUES('ajax',TO_DATE('2000-11-11','YYYY-MM-DD'));
SELECT id,mydate-1 FROM date_test;
SELECT id,mydate,sysdate-mydate FROM date_test;
--trunc()소수점 이하 제외
SELECT id,mydate,trunc(sysdate-mydate) FROM date_test;
--몇개월 경과 months_between
SELECT id,mydate,trunc(months_between(sysdate,mydate)) FROM date_test;
--몇년 경과
SELECT id,mydate,trunc(months_between(sysdate,mydate)/12) FROM date_test;
SELECT* FROM date_test;
CREATE TABLE clob_test(
id VARCHAR2(100) PRIMARY KEY,
content CLOB NOT NULL
)
INSERT INTO clob_test(id,content) VALUES('java', '너무 졸리구...피곤하구...');
SELECT* FROM clob_test;
3. 게시판에 필요한 테이블 생성 및 테스트
CREATE TABLE community_member(
id VARCHAR2(100) PRIMARY KEY,
password VARCHAR2(100) NOT NULL,
name VARCHAR2(100) NOT NULL
)
INSERT INTO community_member(id,password,name) VALUES('java','a','아이유');
INSERT INTO community_member(id,password,name) VALUES('spring','a','강하늘');
SELECT*FROM community_member WHERE id='java';
SELECT*FROM community_member WHERE id='spring';
--게시판 테이블
CREATE TABLE board(
content_no NUMBER PRIMARY KEY,
title VARCHAR2(100) NOT NULL,
content CLOB NOT NULL,
hits NUMBER default 0,
time_posted DATE NOT NULL,
id VARCHAR2(100) NOT NULL,
CONSTRAINT board_fk FOREIGN KEY(id) REFERENCES community_member(id)
)
ALTER TABLE board RENAME COLUMN content_no TO no;
drop table board;
--게시판 시퀀스 생성
CREATE SEQUENCE board_seq;
DROP SEQUENCE board_seq;
--board에 insert DML
--content_no : board_seq.nextval, title : 공부 1, content : 월요일 차암 즐겁네에, time_posted : sysdate, id : java
INSERT INTO board(no, title, content, time_posted, id) VALUES(board_seq.nextval,'공부 1','월요일 차암 즐겁네에', sysdate,'java');
INSERT INTO board(no, title, content, time_posted, id) VALUES(board_seq.nextval,'공부 2','월요일 차암 즐겁지만 집에 가고싶다', sysdate,'spring');
INSERT INTO board(no, title, content, time_posted, id) VALUES(board_seq.nextval,'공부 3','자습해야지 어딜 가 : )', sysdate,'java');
COMMIT
SELECT*FROM board;
--게시물 리스트 조회하는 SQL:최신 등록순 (oracle)
/*
board table
no,title,time_posted(YYYY.MM.DD), hits
join 조건
*/
SELECT no,b.title, c.name, TO_CHAR(b.time_posted,'YYYY.MM.DD'),b.hits
FROM board b, community_member c
WHERE b.id='java'
AND b.id=c.id
ORDER BY b.time_posted DESC;
--게시물 리스트 조회하는 SQL:최신 등록순 (ANSI)
SELECT no,b.title, c.name,TO_CHAR(b.time_posted,'YYYY.MM.DD'),b.hits
FROM board b
INNER JOIN community_member c ON b.id=c.id
WHERE b.id='java'
ORDER BY b.time_posted DESC;↓
//오늘의 숙제
복습+core java
