공부의 기록/자바 풀 스택 : 수업내용정리

자바 풀 스택 1/8 오전 기록 033-1

파티피플지선 2025. 1. 8. 12:59

9:15경 학원 도착
 
<9:30 1교시>
어제 하던거 이어서

 
 

 
 
input[type=hidden] 쓰고 탭 누르면 아래 같이 작성됨

이 폼 요소의 기능은 화면에서는 보이지 않는 값이 폼 전송할 때는 같이 전송될 수 있게 해줌

 
 
코드 백업(수업내용)

<%@page import="test.food.dao.FoodDao"%>
<%@page import="test.food.dto.FoodDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//수정할 음식번호를 읽어온다. 
	int num=Integer.parseInt(request.getParameter("num"));
	//수정할 음식의 정보를 DB 에서 읽어온다.
	FoodDto dto=new FoodDao().getData(num);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/food/updateform.jsp</title>
</head>
<body>
	<div class="container">
		<h1>음식 수정 양식</h1>
		
		<form action="update.jsp" method="post">
			<!-- 화면에 보이지는 않지만 폼 제출할때 같이 전송되는 값 -->
			<input type="hidden" name="num" value="<%=dto.getNum() %>"/>
			<div>
				<label for="type">유형</label>
				<select name="type" id="type">
					<option value="">선택</option>
					<option <%=dto.getType().equals("한식") ? "selected":"" %>>한식</option>
					<option <%=dto.getType().equals("중식") ? "selected":"" %>>중식</option>
					<option <%=dto.getType().equals("양식") ? "selected":"" %>>양식</option>
					<option <%=dto.getType().equals("일식") ? "selected":"" %>>일식</option>
					<option <%=dto.getType().equals("기타") ? "selected":"" %>>기타</option>
				</select>
			</div>
			<div>
				<label for="name">음식이름</label>
				<input type="text" name="name" id="name" value="<%=dto.getName() %>"/>
			</div>
			<div>
				<label for="price">가격</label>
				<input type="number" name="price" id="price" max="100000" min="1000" step="100" value="<%=dto.getPrice() %>"/>
			</div>
			<button type="submit">수정확인</button>
			<button type="reset">취소</button>
		</form>
	</div>
</body>
</html>

 
 
 
내가 만든거

<%@page import="test.food.dto.FoodDto"%>
<%@page import="test.food.dao.FoodDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//수정할 음식 번호 읽어오기
	int num= Integer.parseInt(request.getParameter("num"));
	//수정할 음식의 정보를 DB에서 읽어오기
	FoodDto dto=new FoodDao().getData(num);
	//아래의 내용으로 응답된다
%>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="container">
		<h1>맛집정보 수정 폼</h1>
		<p><%=true? "양식" :"" %></p>
		<form action="update.jsp" method="post">
			<div>
				<!-- 화면에 보이지는 않지만 폼 제출할 때 같이 전송되는 값 -->
				<input type="hidden" name="num" id="num" value="<%=dto.getNum()%>"/>
				
				<%--<label for="num">번호</label>
				<input type="text" name="num" id="num" value="<%=dto.getNum()%>" readonly/>--%>
			</div>
			<div>
				<label for="type">종류 구분</label>
				<select name="type" id="type" value="<%=dto.getType() %>">
					<option value="한식" <%=dto.getType().equals("한식")? "selected:"" %>>한식</option>
					<option value="중식" <%=dto.getType().equals("중식")? "selected:"" %>>중식</option>
					<option value="양식" <%=dto.getType().equals("양식")? "selected:"" %>>양식</option>
					<option value="일식" <%=dto.getType().equals("일식")? "selected:"" %>>일식</option>
					<option value="기타" <%=dto.getType().equals("기타")? "selected:"" %>>기타</option>
				</select>
			</div>
			<div>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" value="<%=dto.getName() %>"/>
			</div>
			<div>
				<label for="price">가격</label>
				<input type="number" name="price" id="price" max="100000000" min="100" step="100" value="<%=dto.getPrice() %>"/>
			</div>
			<button type="submit">저장</button>
			<button type="reset">취소</button>  <!-- 작성하던 내용을 원래 상태로 되돌림 -->
		</form>
	</div>
</body>
</html>

 
 
코드 백업 (수업 내용)

<%@page import="test.food.dao.FoodDao"%>
<%@page import="test.food.dto.FoodDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//폼 전송되는 파라미터를 읽어와서 
	int num=Integer.parseInt(request.getParameter("num"));
	String type=request.getParameter("type");
	String name=request.getParameter("name");
	int price=Integer.parseInt(request.getParameter("price"));
	//FoodDto 에 담고
	FoodDto dto=new FoodDto();
	dto.setNum(num);
	dto.setName(name);
	dto.setType(type);
	dto.setPrice(price);
	//DB 에 수정 반영
	boolean isSuccess=new FoodDao().update(dto);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/food/update.jsp</title>
</head>
<body>
	<div class="container">
		<h3>알림</h3>
		<%if(isSuccess){ %>
			<p>
				음식 정보를 수정 했습니다. 
				<a href="list.jsp">확인</a>
			</p>
		<%}else{ %>
			 <p>
			 	음식 정보 수정 실패!
			 	<a href="updateform.jsp?num=<%=num %>">다시 수정하러 가기</a>
			 </p>
		<%} %>
	</div>
</body>
</html>

 
 
 
내가 한거

<%@page import="test.food.dao.FoodDao"%>
<%@page import="test.food.dto.FoodDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%


//1. 폼으로 전송되는 번호, 이름과 주소 추출
	int num=Integer.parseInt(request.getParameter("num"));
	String type=request.getParameter("type");
	String name=request.getParameter("name");
	int price=Integer.parseInt(request.getParameter("price"));
//2. MemberDto 객체에 담기
	FoodDto dto = new FoodDto(num, type, name, price);

//2. DB에 수정하기
	boolean isSuccess=new FoodDao().update(dto);
//3. 응답하기
    
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		<%if(isSuccess){%>
			//알림창을 띄우고
			alert("정보를 수정했습니다");
			//list.jsp 페이지로 이동
			location.href="list.jsp"
		<%}else{%>
			//알림창을 띄우고
			alert("정보 수정 실패");
			//updateform.jsp 페이지로 이동하면서 num이라는 파라미터명으로 수정할 회원의 번호를 가지고 간다
			location.href="updateform.jsp?num=<%=num%>";
		<%}%>
		
	</script>
</body>
</html>

 
 
위에까지 방식에서 우리는 기본적인 웹 서버 구동 방식을 연습한거.
 
 
이번에는 썰렁한 인덱스페이지를 꾸며주기 < 부트스트랩(getbootstrap.com)으로

CDN : Content Delivery Network
link tab, script tab 해서 복사해온 내용 붙여넣기

 
 
부트스트랩 자주 쓸거니까 window > preferance > emmet의 snippet에 링크, 스크립트를 등록
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
https://getbootstrap.com/docs/5.3/components/navbar/

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

getbootstrap.com

navbar 중에서 원하는 형태를 긁어서 body에 붙여 넣는다.
줄맞추기 하려면 ctrl+a 눌러서 전체 선택한 다음 ctrl+shift+f 를 누르면 알아서 줄맞추기 해줌 굳....
 
 

 
 

 
 
 
<10:30 2교시>
여러개의 jsp 페이지가 동시에 응답하게 할 수 있다.
자주 반복 되는 내용들은 다른 jsp에 담아두고 그 jsp 페이지를 이용해서 응답할 수 있게 사용할 수 있따.
webapp> include 폴더를 만들고 이 안에다가 이렇게 담아두고 쓸 애들을 넣어두면 됨
 
/include/resource.jsp

 
/include/navbar.jsp

 
 

 

 
 



하나의 jsp 페이지에서 여러 개의 jsp 가 동시에 응답할 수 있다.
 
심지어 include 에 있는 애들을 emmet 에 등록하면 더 편하게 사용할 수 있다.
<jsp:include page="/include/resource.jsp"></jsp:include>
<jsp:include page="/include/navbar.jsp"></jsp:include>
위에거는 resource tab을 누르면 바로 작성되게, 아래꺼는 navbar tab을 누르면 바로 작성되게 emmet에 등록한다.
 
 
navbar에서 현재 있는 페이지의 탭만 글씨가 밝아 보이게 하는 기능을 추가하려면 
nav-link active 기능을 추가할 필요가 있는데, 이걸 페이지의 탭에 맞게 하려면 이 기능이 자기가 지금 현재 페이지여서 적용할지 아니면 현재 페이지가 아니어서 적용하지 않을지 여부를 알고 있어야 함.

 

 
 
 
 
 
<11:30 3교시>
 
선생님표 navbar.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.jsp</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-md bg-primary" data-bs-theme="dark">
		<div class="container">
			<a class="navbar-brand" href="#">Navbar</a>
			<button class="navbar-toggler" type="button"
				data-bs-toggle="collapse" data-bs-target="#navbarNav"
				aria-controls="navbarNav" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
					<li class="nav-item"><a class="nav-link" href="${pageContext.request.contextPath }/member/list.jsp">Member</a>
					</li>
					<li class="nav-item"><a class="nav-link" href="${pageContext.request.contextPath }/food/list.jsp">Food</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container">
		<h1>인덱스 페이지 입니다.</h1>
		<ul>
			<li><a href="connection/test.jsp">Connection 테스트</a></li>
			<li><a href="member/list.jsp">회원 목록보기</a></li>
			<li><a href="food/list.jsp">맛집 목록보기</a></li>
		</ul>
	</div>
</body>
</html>

 
 
 
클라이언트가 길을 잃지 않게 해주는 breadcrum

 
 
 
주요페이지: index, member, food 페이지
어제 만들었던 페이지들마다 돌아다니면서 resource 넣어주고 여러가지 CSS를 적용해볼 수 있다.
 
 
부트스트랩에는 이미 준비된, 글자로 취급할 수 있는 벡터이미지 아이콘들도 존재한다.
https://icons.getbootstrap.com/

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

 

 
 
 
 
4교시 과제
기능 텍스트가 있는 애들을 부트스트랩에서 제공하는 아이콘으로 변경해보기.
 

 
3교시에 완료한 상태임... 다른거 더 해봐서 예쁘게 만들어보기 해봐야지
 
<12:30 4교시>
내가 했던 내 블로그 내용 키워드별로 정리해야겠다.
점심 때는 대학원 등록하러 가야지.
하 등록금 비싸ㅠㅠㅠㅠ

'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글

자바 풀 스택 1/9 오전 기록 034-1  (0) 2025.01.09
자바 풀 스택 1/8 오후 기록 033-2  (0) 2025.01.08
자바 풀 스택 1/7 오후 기록 032-2  (0) 2025.01.07
자바 풀 스택 1/7 오전 기록 032-1  (0) 2025.01.07
자바 풀 스택 1/6 오후 기록 031-2  (0) 2025.01.06

'공부의 기록/자바 풀 스택 : 수업내용정리'의 다른글

  • 현재글자바 풀 스택 1/8 오전 기록 033-1

관련글

티스토리툴바