Spring10 - 12/15
> 게시물 목록의 작성일 표시 변경
24시간 내 작성 - 시간만 / 24시간 이전에 작성 - 날짜만 표시되도록
BoardVO 추가
public String getCustomInserted() {
// 현재일시
LocalDateTime now = LocalDateTime.now(ZoneId.of("+09:00"));
LocalDateTime beforeOneDayFromNow = now.minusDays(1);
if (inserted.isBefore(beforeOneDayFromNow)) {
return inserted.toLocalDate().toString();
} else {
return inserted.toLocalTime().toString();
}
}+09:00 기준보다 9시간 뒤
if - else 로 24시간 전 작성이면 Date, 24시간 내 작성이면 Time 반환
board > list.jsp 수정
<td>${board.customInserted }</td>결과
> 회원가입 시 패스워드 확인 추가
member > signup.jsp 수정
<div class="form-group">
<label for="input6">패스워드 확인</label>
<input type="password" class="form-control" id="input6" required>
</div>
<button class="btn btn-outline-primary" id="submitButton1">가입</button>
<script>
$(document).ready(function(){
// 두 개의 인풋 요소의 값이 같을 때만 submit 버튼 활성화
// 아니면 비활성화
const passwordInput = $("#input2");
const passwordConfirmInput = $("#input6");
const submitButton = $("#submitButton1");
const confirmFunction = function(){
const passwordValue = passwordInput.val();
const passwordConfirmValue = passwordConfirmInput.val();
if (passwordValue === passwordConfirmValue){
submitButton.removeAttr("disabled");
} else{
submitButton.attr("disabled", true);
}
};
submitButton.attr("disabled", true);
passwordInput.keyup(confirmFunction);
passwordConfirmInput.keyup(confirmFunction);
});
</script>패스워드 확인 추가 (name, value 는 전달하지 않으므로 지움)
가입 버튼에 id 추가
java script 로 패스워드와 패스워드 확인이 같을 때만 가입 버튼 활성화하도록 함
* 보충설명
button 태그에 disabled attribute 를 추가하면 버튼이 비활성화 됨
attr 로 attribute 를 추가해줄 수 있음 (true 는 의미 없음)
if - else 로 두 인풋 요소의 값을 비교해서 버튼 활성화 혹은 비활성화
const ? 상수처럼 한번 할당되고 나서 바뀔 일이 없기 때문에
> 회원정보 수정에서도 패스워드 확인 추가
member > info.jsp 수정
<div class="form-group">
<label for="input6">패스워드 확인</label>
<input type="password" required id="input6" class="form-control">
</div>
<script>
// 두 개의 인풋 요소의 값이 같을 때만 수정 버튼 활성화
// 아니면 비활성화
const passwordInput = $("#input2");
const passwordConfirmInput = $("#input6");
const confirmFunction = function(){
const passwordValue = passwordInput.val();
const passwordConfirmValue = passwordConfirmInput.val();
if (passwordValue === passwordConfirmValue){
modifyButton.removeAttr("disabled");
} else{
modifyButton.attr("disabled", true);
}
}
modifyButton.attr("disabled", true); //수정 버튼 비활성화
passwordInput.keyup(confirmFunction);
passwordConfirmInput.keyup(confirmFunction);
});
</script>
> 사용자가 <script> 작성할 수 있는 곳에 해킹 방지 작업
board > list.jsp 수정
<td>${board.id }</td>
<td>
<a href="get?id=${board.id }">
<c:out value="${board.title }" />
</a>
</td>
<td><c:out value="${board.nickName }" /></td>
<td>${board.customInserted }</td>title, nickName 을 <c:out> 의 value 로 전달
board > modify.jsp 는 수정 안해도 됨 (다른 jsp 도)
member > list.jsp 수정
<td><c:out value="${member.password }" /></td>
<td><c:out value="${member.nickName }" /></td>
<td><c:out value="${member.email }" /></td>
<td><c:out value="${member.address }" /></td>> Export
프로젝트 우클릭 - export - war -
browse 하여 bitnami 폴더(key 파일이 있는 폴더) 선택, 이름은 spr1 으로, Overwrite existing file 체크 - finish
터미널 ↓
파일이 있는 해당 폴더로 이동, scp 명령어, ssh 명령어, ls 로 폴더 내 파일 확인, sudo 관리자 권한으로 spr1.war 파일 이동
주소창에 다음과 같이 입력하여 페이지 불러오기 ↓
→ 클라우드에 저장된 것이므로 어디에서나 이 페이지를 불러올 수 있다!
만약, 변경사항이 생긴다면?
변경사항은 localhost 에서만 반영되고 클라우드에서는 반영되지 않음
프로젝트 우클릭 - export - war - browse 로 기존 파일 spr1.war 선택, Overwrite existing file 체크 - finish
터미널 ↓
다시 반복 (해당 폴더로 이동, scp, ssh, sudo mv)
※ 앞으로 남은 시간동안 배울 내용: ajax, file upload
> github 작업하기
JAVA 폴더에 github-page 폴더 생성
터미널 열어 해당 폴더로 이동, index.html 파일 생성
파일 vscode 로 열어 내용 간단히 작성하고 저장
터미널에서 git 명령어 입력 (git init)
github desktop 열어 file - add local repository - github-page 폴더 선택
commit 하기
publish repository 하기 (name : 본인아이디.github.io)
→ 이제 깃허브에서 내 repository 목록을 확인하면 해당 repository 가 생긴 것을 확인할 수 있다
↓
여기에서 jiyeonnL.github.io 를 복사하여 주소창에 붙여넣으면
위와 같이 아까 작성한 html 페이지가 뜬다
홈페이지를 꾸며보자
파일을 vscode 로 열기
cdnjs - font-awesome 검색 - 베타 아닌 가장 최신버전 (5.15.4) 코드복사
head 에 붙여넣기
bootstrap 검색 - 가장 위 코드 복사
body 종료태그 위에 붙여넣기
네번째 코드 복사
head 에 붙여넣기
jquery 검색 - 3.6.0 버전 코드 복사
head 에 붙여넣기
다음과 같이 내용 작성
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>jiyeon github page</title>
<style>
</style>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Java Web Programmer</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia molestias consequuntur explicabo aliquam. Beatae expedita voluptate rem aliquam eaque adipisci, voluptas asperiores laudantium repellendus saepe hic, assumenda dolorum quibusdam?</p>
<hr class="my-4">
<p>
심플 회원제 게시물을 시연해보세요.
</p>
<a href="http://3.38.168.28/spr1/board/list" class="btn btn-primary btn-lg">시연하기</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>시연하기 버튼에 위에서 클라우드에 저장했던 spr1 프로젝트 페이지 링크 걸어주기
(나중에 팀 프로젝트 완성하면 팀 프로젝트 링크 걸고 설명 작성해주기)
저장 - commit, push (수정할 때마다)
그러면 jiyeonnL.github.io 페이지가 다음과 같이 업데이트 됨 (시간 조금 소요)
lorem 으로 작성해서 채운 부분에 내 소개와 같은 글을 작성하여 수정하면 됨
+ 추가 작성 (위 내용 일부 수정)
(bootstrap - card 사용)
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<h1 class="display-4">Java Web Programmer</h1>
<p class="lead">개발자 꿈나무 이지연입니다.</p>
<hr class="my-4">
<p>
팀 프로젝트 페이지 입니다.
</p>
<a href="http://3.38.168.28/spr1/board/list" class="btn btn-primary btn-lg">시연하기</a>
</div>
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Spring MVC 심플 회원제 게시판
</h5>
<p class="card-text">
Spring MVC 를 활용한 간단한 회원제 게시판입니다.
<ul>
<li>HTML, CSS</li>
<li>JavaScript, JQuery</li>
<li>Java, Spring MVC</li>
<li>JDBC, Mybatis</li>
</ul>
</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">코드보기</a>
<a href="http://3.38.168.28/spr1/board/list" class="btn btn-primary">시연하기</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">
Spring MVC 팀 프로젝트
</h5>
<p class="card-text">
Spring MVC 를 활용한 지역 커뮤니티 사이트
<ul>
<li>HTML, CSS</li>
<li>JavaScript, JQuery</li>
<li>Java, Spring MVC</li>
<li>JDBC, Mybatis</li>
<li>추가</li>
</ul>
</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">코드보기</a>
<a href="#" class="btn btn-primary">시연하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
대표 페이지 : 팀 프로젝트 페이지
왼쪽 : ex00 (코드보기는 github 주소로 설정하기)
오른쪽 : 팀 프로젝트 (코드보기는 github 주소, 시연하기는 페이지 주소로 설정하기)
팀 프로젝트 마치면 간단한 소개, 사용한 기능 작성하기