고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 학원의 옆 반이 다음주에 과정을 마치고
수료를 한다는 소식을 들었습니다
부럽기도 하고 한편으로는 얼마나 많이 고생을 했을까 대단하다는 생각을 하기도 하고,
우리도 곧 있으면 팀 프로젝트를 시작해야 하기에
수업과 프로그래밍에 한번 더 집중을 해야겠다는 다짐을 하게 되었습니다
학원 수업
<<JSP>>
java class
* xml - 데이터 생성, 전달 표준 언어 -> json
= 사용자 임의로 만들 수 있고, 필요한 정보를 주거나 받을 수 있는 데이터 형태를 제공한다
<jsp:useBean></jsp:useBean>
<car>
<brand>Avante</brand>
<color>Silver</color>
</car>
* html
<body></body>
* forward - 포워딩
= 페이지는 이동하지만 url경로는 자신의 파일을 유지함(=제어권이 있다)
<jsp:forward page=""></jsp:forward>
(<jsp:forward page="" /> = 닫기를 생략해서 쓰는 방법)
* 빈(Bean) = 클래스의 객체
ex) Member member = new Member();
<jsp:useBean>
<jsp:useBean id="member" class="bean.Member">
* jsp의 주요 내장 객체
out(출력)
request(요청, 저장) - 웹 브라우저에서 서버의 jsp페이지로 전달하는 정보를 저장함
request.getParameter(폼의 name 속성)
request.getParameterValues(폼의 name 속성) => 배열형태로 전달받음
response(응답) - 요청을 처리한 결과를 서버에서 웹브라우저로 전달하는 정보를 저장함
jsp -> jsp
loginForm.jsp -> process.jsp
jsp <-> servlet
loginForm.jsp -> /jwbook/login = 확장자가 아닌 도메인 경로가 됨
Servlet -> ServletConfig -> HttpServlet(doGet(), doPost(), service())
인터페이스 인터페이스 구현된 클래스
Servlet = 컨트롤러(controller)역할 => MVC 패턴
jsp만 있어도 서버프로그램 구현 가능
자바빈즈 - 자바클래스(import, jsp:useBean)
form action="처리페이지"
svervlet -> request
http://localhost:8080/jwbook/request/process.jsp
localhost = 로컬 컴퓨터 = 127.0.0.1
8080 = 포트
jwbook = 프로젝트(컨텍스트-context)
url = process.jsp의 위치
request.getParameter("name 속성")
request.getParameterValues("name 속성-배열")
* cnt = name속성
* jsp만 사용
AddressBook1 = 주소록 프로젝트(DB 연결 안함)
- 자료 저장 공간 : 인메모리(Memory) - List(ArrayList)
<%@page import="addressbook.AddrBook"%>
<%@ 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" href="../resources/css/style.css">
</head>
<body>
<jsp:useBean id="abDAO" class="addressbook.AddrBookDAO" scope="application"/>
<div id="container">
<h2>주소 목록</h2>
<hr>
<p><a href="addrForm.jsp">주소추가</a></p>
<table id="tdl_list">
<tr>
<th>이름</th>
<th>전화번호</th>
<th>이메일</th>
<th>성별</th>
<th>보기</th>
<th>삭제</th>
</tr>
<%
for(int i = 0; i < abDAO.getListAll().size(); i++){
AddrBook addrBook = abDAO.getListAll().get(i);
%>
<tr>
<td><%= addrBook.getUsername() %></td>
<td><%= addrBook.getTel() %></td>
<td><%= addrBook.getEmail() %></td>
<td><%= addrBook.getGender() %></td>
<td>
<a href="addrView.jsp?username=<%=addrBook.getUsername()%>"><button type="button">보기</button></a>
</td>
<td>
<a onclick="return confirm('정말로 삭제하시겠습니까?')"
href="addrDelete.jsp?username=<%=addrBook.getUsername()%>">
<button type="button">삭제</button>
</a>
</td>
</tr>
<%
} // for문 끝 괄호 주의
%>
</table>
</div>
</body>
</html>
- 자료형 : 클래스 (AddrBook)
package addressbook;
import java.io.Serializable;
// 주소록 데이터 자료형 빈즈 클래스
public class AddrBook implements Serializable{
private static final long serialVersionUID = 1L;
private String username;
private String tel;
private String email;
private String gender;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
- 자료관리(CRUD) : 클래스(AddBookDAO)
package addressbook;
import java.util.ArrayList;
import java.util.List;
// 자료를 추가, 수정, 삭제, 검색할 클래스(메서드 사용)
public class AddrBookDAO {
// 자료구조 - ArrayList
private List<AddrBook> addrList = new ArrayList<>();
// 주소 추가
public void addAddrBook(AddrBook addrBook) { // AddrBook addrBook = new AddrBook()
addrList.add(addrBook);
}
// 주소 목록(전체) 보기
public List<AddrBook> getListAll() {
return addrList;
}
// 특정 주소 보기
public AddrBook getAddrBook(String username) {
AddrBook addrBook = null;
for(int i = 0; i < addrList.size(); i++) {
String dbUsername = addrList.get(i).getUsername();
// 외부의 입력된 이름과 비교하여 일치하면 객체를 반환해줌
if(dbUsername.equals(username)) {
addrBook = addrList.get(i);
}
}
return addrBook;
}
// 주소 삭제
public void deleteAddrBook(String username) {
for(int i = 0; i < addrList.size(); i++) {
String dbUsername = addrList.get(i).getUsername();
// 외부의 입력된 이름과 비교하여 일치하면 객체를 삭제
if(dbUsername.equals(username)) {
addrList.remove(i);
}
}
}
}
AddressBook2 = 주소록 프로젝트(DB 연결 - 오라클,H2)
* jsp+ servlet
커뮤니티 서비스 프로젝트(회원 + 게시판)
* 페이지 이동
1. 리다이렉트 - response.sendRedirect(페이지) => 경로(url) 바뀜
2. 포워드 - dispatcher.forward(페이지) => 경로(url) 그대로 -> 내용만 바뀜
RequestDispatcher - 클라이언트에서 요청을 수신하여 서버의 리소스(서버에서 서버, 서블릿, jsp파일)로
보내는 객체를 정의한다
- forward 메서드를 가지고 있음
CSS 공부
<<flex 속성>>
flex(플렉스) = 라이브러리 개념
= 플렉스 박스 레이아웃
display: flex;
- display 와는 다른 개념의 속성
- 수평이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
- 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있다
* display: flex;
align-items 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 박스 레이아웃</title>
<style>
/* 배치할 요소를 감싸는 부모 요소를 만든다
display 속성을 이용함 */
.container {
width: 400px;
height: 200px;
border: 1px solid #000;
background: #eee;
display: flex;
/* 박스의 수직 정렬 */
/* align-items: start; = 위쪽 정렬 (top_ */
/* align-items: center; = 가운데 정렬(middle) */
align-items: end; /* = 아래쪽 정렬(bottom) */
}dnd
.box {
width: 80px;
background: #000;
margin: 5px;
padding: 5px 30px;
}
p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
* justify-content 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 박스 레이아웃</title>
<style>
/* 배치할 요소를 감싸는 부모 요소를 만든다
display 속성을 이용함 */
.container {
width: 100%;
border: 1px solid #000;
background: #eee;
display: flex;
/* justify-content: flex-start; = default 값; */
/* justify-content: center; = 가운데 정렬 */
/* justify-content: flex-end; = 오른쪽 정렬 */
/* 시작과 끝점에 배치한 후 동일한 간격으로 배치 */
/* justify-content: space-between; */
/* 주축에 동일한 간격으로 배치 */
justify-content: space-around;
}
.box {
width: 80px;
background: #000;
margin: 5px;
padding: 5px 50px;
}
p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
* flex-direction 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 박스 레이아웃</title>
<style>
/* 배치할 요소를 감싸는 부모 요소를 만든다
display 속성을 이용함 */
.container {
width: 800px;
border: 1px solid #000;
background: #eee;
display: flex;
/* 주축 = 가로, 순서: 왼쪽에서 오른쪽 = default 값 */
/* flex-direction: row; = default 값 */
/* flex-direction: column; */
flex-direction: row-reverse;
}
.box {
width: 80px;
background: #000;
margin: 5px;
padding: 5px 50px;
}
p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
</body>
</html>
* flex-wrap 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 박스 레이아웃</title>
<style>
/* 배치할 요소를 감싸는 부모 요소를 만든다
display 속성을 이용함 */
.container {
width: 400px;
border: 1px solid #000;
background: #eee;
display: flex;
/* flex-wrap: nowrap; = default 값*/
/* 교차축으로 아래로 배치됨(컨테이너 범위내에 배치) */
flex-wrap: wrap; /* = 줄바꿈 */
}
.box {
width: 80px;
background: #000;
margin: 5px;
padding: 5px 50px;
}
p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
<div class="box"><p>5</p></div>
<div class="box"><p>6</p></div>
</div>
</body>
</html>
2023. 11. 22 (수)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 74일차 (1) | 2023.11.27 |
|---|---|
| 프로그래머 도전기 73일차 (4) | 2023.11.23 |
| 프로그래머 도전기 71일차 (4) | 2023.11.20 |
| 프로그래머 도전기 70일차 (0) | 2023.11.18 |
| 프로그래머 도전기 69일차 (0) | 2023.11.17 |
