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 주소, 시연하기는 페이지 주소로 설정하기)

팀 프로젝트 마치면 간단한 소개, 사용한 기능 작성하기