29일차(2)/CSS(6) : bootstrap CSS 적용하기
[ 페이지에 디자인 추가하기 ]
- index에 css, javascript CDN 링크를 넣는다.
- 쉽게 불러올 수 있도록 Window-Preference-Emmet-Snippets 에도 저장해준다!
<index.jsp>
<%@page import="test.util.DbcpBean"%>
<%@ 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<%-- /include/navbar.jsp 페이지를 포함시켜서 이부분은 navbar.jsp페이지가 응답하도록 한다. --%>
<jsp:include page="/include/navbar.jsp">
<jsp:param value="index" name="thisPage"/>
</jsp:include>
<div class="container">
<h1 style="padding:10px 0px 10px;">인덱스 페이지입니다.</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753__340.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/06/08/06/58/water-plant-5273361__340.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<%-- /include/footer.jsp 페이지를 포함시켜서 이부분은 footer.jsp페이지가 응답하도록 한다. --%>
<jsp:include page="/include/footer.jsp"></jsp:include>
</body>
</html>
(nav요소는 /include/navbar.jsp 로 분리함)
- <nav> 네비 요소. 이동 관련된 요소로, div이긴 한데 좀더 의미가 있는 마크업이라고 할 수 있다.
- div class="nav" <nav> 와 같음!
- 클래스로 의미를 부여할 수도 있지만 마크업 자체에 부여할 수도 있다. 이것을 시멘틱 마크업이라고 한다.
- 이동과 관련된 마크업을 div에 넣어도 상관은 없지만, 좀더 의미있게 모아두고 싶으면 nav요소 안에 넣는다.
- 디자인 요소 같은 것이 있는 것은 아니고 div와 똑같다.
이동과 관련된 요소들을 모아둘 뿐이다. 검색엔진에 최적화시킨 것!
→ nav요소가 이곳에 모여있다는 것을 알려주는 역할을 한다.
<a class="navbar-brand" href="${pageContext.request.contextPath }/">
<a class="navbar-brand" href="${pageContext.request.contextPath }/index.jsp">
- 같은 내용! 최상위페이지에서 꼭 경로에 index.jsp를 넣지 않아도 그 위치로 잘 이동한다.
- web.xml에 이런 기본 세팅이 있기 때문에 가능한 것
- navbar에 bootstrap 아이콘을 넣어줌. <a>요소의 자식요소로 넣으면 클릭시 이동하는 링크가 된다.(홈버튼)
- bootstrap에서 찾은 서식을 적용해 버튼을 만들면 이렇게 적용된다. 폭이 좁을 때만 나타나는 버튼이다.
- id가 navbarNav인 요소를 특정 조건에 따라 접었다 폈다 하겠다는 의미!
- navbar-dark 라는 클래스를 추가해주면 글자가 자동으로 밝은색으로 바뀐다.
- 요소마다 클래스를 지정해 배경색, 글자색 등 서식 변경 가능
- 어떤 breakpoint에서 목록을 버튼 속에 숨기는 기능이 생기는지를 결정하는 키워드이다. (md lg xl ...)
- 클라이언트의 브라우저 폭에 따라 다른 화면을 보여준다.
- container-fluid : 폭을 100% 다 쓰는 키워드이다.
<a class="nav-link active" aria-current="page" href="(링크)">
- 현재 위치해 있는 페이지 위치의 폰트가 진하게 나온다.
- 이런 형태로 css를 적용해봄!
*Carrousel : 링크
- 메인페이지에서 많이 보이는 컨텐츠(이미지 등)가 가로로 넘어가는 틀
- carrousel 이 동작하려면 반드시 javascript 가 기능해야 한다! (상단에 저장해둔 CDN이 있어야 동작)
- 이 id가 일치해야만 carrousel이 동작한다. id로 지정해둔 요소에 해당 CSS가 적용되는 것!
- 메인페이지에 추가해준다. img src="" 에 이미지 링크를 복사해서 넣어주면 된다.
<list.jsp>
<%@page import="test.member.dto.MemberDto"%>
<%@page import="java.util.List"%>
<%@page import="test.member.dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//MemberDao 객체의 참조값을 얻어와서
MemberDao dao=MemberDao.getInstance();
//회원목록을 얻어온다.
List<MemberDto> list=dao.getList();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/list.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<style>
.icon-link{
font-size:30px;
color:orange;
}
.icon-link svg{
/* transform 을 적용할 때 0.4초 동안 변화되도록 적용한다.*/
transition: transform 0.4s ease-out;
}
.icon-link svg:hover{
/* 원본 크기의 1.2배로 확대한다. */
transform: scale(1.2);
}
</style>
</head>
<body>
<%--
/include/navbar.jsp 페이지를 포함시키기
- 포함된 jsp 페이지에 파라미터를 전달할 수가 있다.
- 파라미터를 적절히 전달해서 포함된 jsp 페이지 내에서 해당 파라미터를 추출해서 어떤 로직을 수행할 수 있다.
- 아래 같은 경우는 thisPage 라는 파라미터 명으로 member라는 문자열을 전달하는 것이다.
그러면 마치 navbar.jsp?thisPage=member 요청한 것과 비슷한 효과가 되어서
navbar.jsp 페이지 내부에서
String thisPage=request.getParameter("thisPage");
코드를 수행하면 thisPage 안에는 "member"라는 문자열이 들어있게 된다.
--%>
<jsp:include page="/include/navbar.jsp">
<jsp:param value="member" name="thisPage"/>
</jsp:include>
<div class="container">
<h1 style="border-bottom:2px solid orange; padding:10px 0px 10px;">회원 목록입니다.</h1>
<a href="${pageContext.request.contextPath }/member/insertform.jsp" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16">
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
<path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</a>
<table class="table table-striped table-hover">
<thead>
<tr class="table-warning">
<th>번호</th>
<th>이름</th>
<th>주소</th>
<th>수정</th>
<th>삭제</th>
<th>삭제2</th>
<th>삭제3</th>
</tr>
</thead>
<tbody class="table-group-divider">
<%for(MemberDto tmp:list){ %>
<tr>
<td><%=tmp.getNum() %></td>
<td><%=tmp.getName() %></td>
<td><%=tmp.getAddr() %></td>
<td>
<a href="updateform.jsp?num=<%=tmp.getNum()%>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
<span class="visually-hidden">회원추가</span>
</a>
</td>
<td>
<a href="${pageContext.request.contextPath }/member/delete.jsp?num=<%=tmp.getNum() %>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
</svg>
</a>
</td>
<td>
<a href="delete2.jsp?num=<%=tmp.getNum() %>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
</svg>
</a>
</td>
<td>
<a href="delete3.jsp?num=<%=tmp.getNum() %>">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
</svg>
</a>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
<%-- /include/footer.jsp 페이지를 포함시켜서 이부분은 footer.jsp페이지가 응답하도록 한다. --%>
<jsp:include page="/include/footer.jsp"></jsp:include>
</body>
</html>
- 회원추가하기 링크를 아이콘으로 변경하기! bootstrap 사이트에서 해당되는 아이콘을 찾아 html을 복사한다.
- 벡터이미지로 만들어진 아이콘인데, 문자로 인식되어 크기 조절이 자유롭다.
- <a>의 자식요소로 넣고, class="icon-link"로 지정한 후 <style>에서 .icon-link 의 css 지정!
- em으로 설정해주고 style에서 설정하면 같이 수정된다.
<style>
.icon-link{
font-size:30px;
color:orange;
}
.icon-link svg{
/* transform 을 적용할 때 0.4초 동안 변화되도록 적용한다.*/
transition: transform 0.4s ease-out;
}
.icon-link svg:hover{
/* 원본 크기의 1.2배로 확대한다. */
transform: scale(1.2);
}
</style>- 회원추가 아이콘에 적용한 css. 회원추가 아이콘에 클래스를 지정하고 style에서 작성한 것이다.
- transition을 사용하면 마우스를 올렸을 때 움직이거나 크기를 키우는 등 효과를 줄 수 있다.
- 수정, 삭제도 svg를 복사해서 아이콘 처리! (a의 자식요소로 넣어준다)
<span class="visually-hidden">회원추가</span>
- 아이콘만 사용하면 시각장애인이 접속했을 때 텍스트로 읽어줄 수가 없다.
- visually-hidden 클래스를 사용하면 시각적으로는 보이지 않지만 존재하고, 텍스트를 읽어준다. 웹 접근성도 만족하는것!
<insertform.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/insertform.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="mt-2">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="${pageContext.request.contextPath }/index.jsp">Home</a>
</li>
<li class="breadcrumb-item">
<a href="${pageContext.request.contextPath }/member/list.jsp">회원목록</a>
</li>
<li class="breadcrumb-item active">회원 추가 페이지</li>
</ol>
</nav>
<h1>회원 추가 폼입니다.</h1>
<form action="${pageContext.request.contextPath }/member/insert.jsp" method="post">
<div class="mb-2">
<label class="form-label" for="name">이름</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="mb-2">
<label class="form-label" for="addr">주소</label>
<input class="form-control" type="text" name="addr" id="addr" />
</div>
<button class="btn btn-primary" type="submit">추가</button>
</form>
</div>
</body>
</html>
* bootstrap-form control : 링크
- 각각의 요소에 클래스만 지정한 상태!
- bootstrap의 기본 폼 모양. 레이블은 위에, input요소는 아래에 위치한다.
- margin: ms me mt mb
- padding: ps pe pt pb
(start-end-top-bottom / 1~5단계)
<div class="mb-3">
- 이렇게 입력하는 것만으로도 margin-bottom 3단계(16px)가 지정된다.
- margin 값을 주고 버튼 모양도 css 지정!
- breadcrumb : 클라이언트가 길을 잃지 않도록 제공하는것. 이전 사이트나 경로를 보여줄 수 있다.
<insert.jsp>
<%@page import="test.member.dao.MemberDao"%>
<%@page import="test.member.dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/*
1. 폼 전송되는 회원의 이름과 주소를 읽어온다.
2. MemberDao 에 MemberDto 를 전달하면 DB에 저장을 하고 작업의 성공여부를 리턴하는 insert() 메소드를 만든다.
회원번호는 시퀀스를 이용해서 들어가도록 한다.
3. 위에서 추출한 회원의 이름과 주소를 MemberDto 객체에 담는다.
4. MemberDao 객체를 이용해서 MemberDto 객체에 담긴 회원정보를 DB에 저장한다.
5. 작업의 성공 여부를 클라이언트에게 응답한다.
*/
//폼 전송되는 회원의 이름과 주소를 읽어온다.
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String addr=request.getParameter("addr");
//MemeberDto 객체에 회원의 이름과 주소를 담고
MemberDto dto=new MemberDto();
dto.setName(name);
dto.setAddr(addr);
//MemberDao객체를 이용해서 DB에 저장하고 작업의 성공여부를 리턴받는다.
MemberDao dao=MemberDao.getInstance();
boolean isSuccess=dao.insert(dto);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>member/insert.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<%-- 작업의 성공 여부에 따라 다른 내용을 응답해준다. --%>
<%if(isSuccess){%>
<p class="alert alert-success">
<strong><%=name %></strong>의 정보를 추가했습니다.
<a class="alert-link" href="${pageContext.request.contextPath }/member/list.jsp">확인</a>
</p>
<%}else{%>
<p class="alert alert-danger">
회원정보 추가 실패!
<a class="alert-link" href="${pageContext.request.contextPath }/member/insertform.jsp">다시 입력하러 가기</a>
</p>
<%} %>
</div>
</body>
</html>
<p class="alert alert-success">
<p class="alert alert-danger">
- 페이지에 작업 성공/실패여부를 알릴 때 특별한 서식을 적용해보았다.
<updateform> 도 수정!
<%@page import="test.member.dao.MemberDao"%>
<%@page import="test.member.dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. GET 방식 파라미터로 전달되는 수정할 회원의 번호(primary key)를 읽어온다.
int num=Integer.parseInt(request.getParameter("num"));
//2. MemberDao 객체를 이용해서 회원 한명의 정보를 얻어온다.
MemberDto dto=MemberDao.getInstance().getData(num);
//3. 수정할 회원의 정보를 수정폼에 출력해서 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/updateform.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="mt-2">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="${pageContext.request.contextPath }/index.jsp">Home</a>
</li>
<li class="breadcrumb-item">
<a href="${pageContext.request.contextPath }/member/list.jsp">회원목록</a>
</li>
<li class="breadcrumb-item active">회원 수정 페이지</li>
</ol>
</nav>
<h1>회원 정보 수정 폼</h1>
<form action="update.jsp" method="post">
<!--
disabled 된 input 요소는 폼을 제출했을 때 전송이 안되기 때문에
<input type="hidden" 요소를 이용해서 회원의 번호가 폼을 제출했을때 전송되도록 한다.
-->
<input type="hidden" name="num" value="<%=dto.getNum() %>" />
<div class="mb-2">
<label class="form-label" for="num">번호</label>
<input class="form-control" type="text" id="num" value="<%=dto.getNum() %>" disabled />
</div>
<div class="mb-2">
<label class="form-label" for="name">이름</label>
<input class="form-control" type="text" name="name" id="name" value="<%=dto.getName() %>" />
</div>
<div class="mb-2">
<label class="form-label" for="addr">주소</label>
<input class="form-control" type="text" name="addr" id="addr" value="<%=dto.getAddr() %>" />
</div>
<button class="btn btn-outline-primary" type="submit">수정확인</button>
<button class="btn btn-outline-secondary" type="reset">취소</button>
</form>
</div>
</body>
</html>
** 하단에 푸터 추가하기
- jsp에서는 자주 쓰는 내용을 따로 모아놓고 불러다 쓸 수 있는 기능이 있다.
- 일부분만을 응답하는 jsp를 만들어 놓고, 원하는 jsp에 포함시킬 수 있다.
- jsp에서는 일부 부분 마크업만 클라이언트에게 출력하는 jsp페이지를 따로 만들어놓고
원하는 jsp페이지에 포함시켜서 응답할 수가 있다.
- 만일 a.jsp페이지가 b.jsp 페이지에 포함이된다면 b.jsp페이지와 a.jsp페이지가 공동으로 응답을 하는 것이다.
webapp폴더안에 include/footer.jsp 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /include/footer.jsp 페이지입니다. --%>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</symbol>
<symbol id="instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</symbol>
<symbol id="twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</symbol>
</svg>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top mt-auto">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
</a>
<span class="text-muted">© 2021 Company, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
- 여기서는 응답은 하면 안된다! 응답은 다른 페이지에서 하고, 여기서는 footer 부분만 그 페이지에 집어넣을 것.
- include 하는 페이지에서는 html, head, body 등이 들어가면 안된다! 응답하고 싶은 footer 내용만 들어가면 된다.
- 만약 출력할 내용 말고 html, style 등 다른 요소가 있다면 마크업 오류가 일어나게 된다.
- 넣고싶은 페이지 body 하단에서 jsp:include를 사용한다.
- 보기에는 하나로 보이지만, 2개의 페이지가 클라이언트의 요청에 함께 응답하는 것이다.
- 하단에 푸터가 추가된 모습
<jsp:include page="/include/footer.jsp"></jsp:include>
- 어떤 페이지든 푸터를 넣고 싶다면 하단에 이걸 넣어주기만 하면 된다.
* 그러면 네비 바도 이렇게 include 하면 되지않을까?
/include/navbar.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /include/navbar.jsp 페이지의 내용입니다. --%>
<%
//이 navbar.jsp 페이지가 어디에 include 되었는지 읽어와 보기
String thisPage=request.getParameter("thisPage"); // "index" | "member" | "todo"
%>
<nav class="navbar navbar-expand-md bg-warning navbar-light" style="font-color:#6666ff;" >
<div class="container">
<a class="navbar-brand" href="${pageContext.request.contextPath }/">
<img src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Hello
</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 안에 넣어두면 된다. -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <%=thisPage.equals("member") ? "active": "" %>" href="${pageContext.request.contextPath }/member/list.jsp">회원목록</a>
</li>
<li class="nav-item">
<a class="nav-link <%=thisPage.equals("todo") ? "active": "" %>" href="${pageContext.request.contextPath }/todo/list.jsp">할일목록</a>
</li>
</ul>
</div>
</div>
</nav>
- 다른 내용은 전부 지우고 출력할 내용만 남겨놓기!
- 그런데 이렇게 하면 현재 페이지를 더 진하게 보이게하는 active 기능을 사용하지 못한다.
→ 지금 있는 페이지가 어디인지 읽어온 다음, 페이지별로 네비바가 다르게 보이게 할 수 있다.
[ /include/navbar.jsp 페이지를 포함시키면서 페이지별로 다르게 보이도록 만들기 ]
- 포함된 jsp 페이지에 파라미터를 전달할 수가 있다.
- 파라미터를 적절히 전달해서 포함된 jsp 페이지 내에서 해당 파라미터를 추출해서 어떤 로직을 수행할 수 있다.
- 아래 같은 경우는 thisPage 라는 파라미터 명으로 member라는 문자열을 전달하는 것이다.
그러면 마치 navbar.jsp?thisPage=member 요청한 것과 비슷한 효과가 된다.
navbar.jsp 페이지 내부에서
String thisPage=request.getParameter("thisPage");
코드를 수행하면 thisPage 안에는 "member"라는 문자열이 들어있게 된다.
String thisPage=request.getParameter("thisPage");
- 현재 있는 페이지를 읽어오는 코드를 navbar에 넣어주고,
<jsp:include page="/include/navbar.jsp">
<jsp:param value="(페이지명)" name="thisPage"/>
</jsp:include>- 네비바가 들어갈 페이지에 jsp:param 의 value와 name 을 지정해준다.
- 각 페이지에 작업을 완료한 후, navbar페이지에 아래 코드 작성.
<a class="nav-link <%=thisPage.equals("member") ? "active": "" %>" href="${pageContext.request.contextPath }/member/list.jsp">
- 어떤 텍스트를 active 시킬 것인가를 <%=%> 안에 넣어서 3항 연산자로 작성하기
- 현재 페이지에 있는 문자열과 비교해서 active를 출력하거나 or 공백을 출력하거나!
- 페이지에 따라서 네비바가 다르게 나타난다.
참고)
Form - Floating Labels : 링크
BreadCrumb : 링크
Alert : 링크
'국비교육(22-23)' 카테고리의 다른 글
| 30일차(2)/jsp(10) : Session Scope (0) | 2022.11.18 |
|---|---|
| 30일차(1)/jsp(9) : Request Scope (0) | 2022.11.18 |
| 29일차(1)/jsp(8) : DBCP활용 예제 (todo 테이블) (0) | 2022.11.17 |
| 28일차(2)/jsp(7) : DBCP활용 (Update) (0) | 2022.11.16 |
| 28일차(1)/jsp(6) : DBCP활용 (Delete) (0) | 2022.11.16 |