728x90
반응형
SMALL
SpringMVC01 만둘어 둔 곳 복사 붙여넣기
-> PROPERTIES
-> Web Project Settings
-> Context root 이름 변경
기존의server 삭제하고, 프로젝트 파일 드래그해서 Tomcat 연결하기
servers폴더에 server.xml 코드 젤 하단에 내 프로젝트 폴더 이름 적혀있는지 확인
로그인 시 - 내 글 : 수정가능
- 내 글이 아닌경우 : 수정 불가능
회원가입을 통한 회원들만 글 등록 가능
1. template.jsp 에서 container 삭제
2. jumbotron을 card-header에 넣기
3. card-body에 레이아웃 구성
column은 2: 7: 3
column 2 : 로그인 기능
column7 : list
list.jsp의 body 태그 그대로 복사 붙여넣기
column3 : menu창
완성된 template를 그대로 list.jsp에 지우고 붙여넣기
list.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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>
<script>
$(document).ready(function(){
$("button").click(function(){
location.href="register.do";
});
});
</script>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="jumbotron jumbotron-fluid"
style="background-color: #FFA07A;">
<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<div class="card" style="min-height: 500px; max-height: 1000px;">
<div class="card-body">
<h4 class="card-title">GUEST</h4>
<p class="card-text">회원님 Welcome!</p>
<form action="">
<div class="form-group">
<label for="memId">아이디</label> <input type="text"
class="form-control" name="memId" />
</div>
<div class="form-group">
<label for="memPwd">비밀번호</label> <input type="password"
class="form-control" name="memPwd" />
</div>
<button type="button"
class="btn btn-sm btn-primary form-control">로그인</button>
</form>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card" style="min-height: 500px; max-height: 1000px;">
<div class="card-body">
<h4 class="card-title">BOARD</h4>
<!-- 게시판 리스트보기 화면 구현 -->
<table class="table table-bordered table-hover">
<thead>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</thead>
<tbody>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.idx}</td>
<td><a href="get.do?idx=${vo.idx}">${vo.title}</a></td>
<td>${vo.writer}</td>
<td><fmt:formatDate value="${vo.indate}"
pattern="yyyy/MM/dd" /></td>
<td>${vo.count}</td>
</tr>
</c:forEach>
</tbody>
</table>
<button class="btn btn-sm btn-primary">글쓰기</button>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" style="min-height: 500px; max-height: 1000px;">
<div class="card-body">
<h4 class="card-title">My MENU</h4>
<p class="card-text">여기에 콘텐츠를 표시</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
</div>
</div>
</body>
</html>
완성된 모습
728x90
반응형
LIST
'스마트인재개발원 > Spring' 카테고리의 다른 글
| [Spring]게시판 만들기(14) - 로그인 시 로그인 성공화면 출력 (0) | 2022.10.21 |
|---|---|
| [Spring] 코드 다이어트 하는 법 (0) | 2022.10.21 |
| [Spring] 프로젝트 파일 내보내기/불러오기/ 게시판 만들기 최종코드.zip (0) | 2022.10.21 |
| [Spring]게시판 만들기(12) - 상세보기 수정폼 만들기/수정하기/조회수 누적시키기 (0) | 2022.10.21 |
| [Spring]게시판 만들기(11) - 상세보기 페이지에서 삭제 구현하기 (0) | 2022.10.21 |
