[포트폴리오] 개인페이지 제작기 05

= list.jsp -> BoardVO.java

 

작성일 부분이 너무 너저분해서 내가 원하는대로 양식 바꾸기

우리가 필요한 get~메소드를 만든다.

field와 메소드는 대부분 일치하지만,property는 메소드에 의해서 결정되기 때문에

get~메소드를 만들면, 프로퍼티 자체가 생긴것이다.

만약,

이와 같이 메소드를 작성하였다면, CustomInserted라는 property가 생긴것이다.

그럼, 우리가 이를 사용하고싶으면, customInserted라는 property가 생긴거니까 그것을,

list.jsp에 존재하는 board.inserted를 변형해서 넣어보도록 하자

한국이 표준시보다 9시간 빨라서 +9를 해주는 것이다.

 

= 작성시간 확인하기.

현재시간이랑 inserted랑 하루 이내의 차이인지, 더 큰 갭차이가 나고있는지 확인하기 위해서 식을 하나 더 추가했다.

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();
		}
	}

만약 하루 뺀 날자가, 지금부터 하루 이상의 차이가 나면, 그 게시글의 작성 날짜가 보이게 하였고,

만약 같은날에 작성 된 글이라면, 시간만 보이게 했다.

작성일 부분 확인 완료

 

= signup.jsp

회원가입 페이지에서, 비밀번호 확인란을 추가해서, 비밀번호가 같을 때 회원가입이 이루어지게 해보자~

패스워드 확인 부분은, id랑 label바뀌어야하고, name부분이 겹치면 안되기 때문에, 생략해야된다.

그리고 script 부분을 추가하면되는데, 내가 script들은 부분이 기억이 안나서 당황스럽다.. script부분을 공부를 하거나,

업을 다시 들어봐야 하거나 해야 할 듯! 힝구맨~

		<div class="form-group">
			<label for="input6">패스워드 확인</label>
			<input type="password" class="form-control" id="input6" required>
		</div>

위와 같은 코드를 body안에 추가하고 

	<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>

아래에 내가 원하는 기능을 할 수 있는 script를 추가했다.

 

스크립트 추가한 후에, 원하는대로 기능 작동하는지 확인했는데, 비밀번호 abc, 비밀번호 확인 abc 넣었을 때,

가입버튼이 활성화 되는 것을 확인했다!

 

어떤일이 일어나는지는 알았고, 선생님이 학생들이 너무 오랜만에 script와 jquery를 하다보니 적응을 못해서, 

script부분을 하나하나 뜯어서 콘솔을 찍어가면서 설명해주셨다

 

버튼에다가, disabled라는 attribute를 추가하면, 활성화가 되지 않는데, jquery에서 attr라는 함수가있는데, attribute 명과, 값을 갖는다.

만약 

#("#input2").keyup(function() {

console.log("password input keyup event !!!");

}); 를 작성해 놓는다면, 내가 input2칸에서 타이핑을 한글자 칠때마다, console창에 이벤트가 발생되었다는 알람이 뜨게된다.

이렇게 되었고, 그 다음에도 하나 씩 개별로 출력을 해보았는데

밑줄친 애들이 같은 일을 하는 애들이다 보니까 빼서 변수로 빼서 하나로 통일 후 해야할 일을 처리하게 한 것이다.

여기도, 같은애들 통일해서 그냥 값에 담아서 써버렸다.

 

= 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 submitButton = $("#modifyButton");
		
		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>

수업들은 토대로, 아래부분 추가해보고, 비밀번호 칸이 같을 때만, 수정 버튼 활성화 하게 하는 부분 끝낫는데, 나는선생님의 식이 더 간단한 것 같아서, 선생님의 식을 따라서 수정하였다.

<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>

 

= 스크립트 공격 막기

수정한 jsp 종류 : board> list.jsp / member>list.jsp

<c:out>과 같은 식으로, script공격을 막을 수 있었다.

 

 

오후 수업에는 git으로 프로젝트 올리는 작업을 했는데, 지금 오류가 나서 해결중에 있으니, 우선

올리는건 나중에 하고 다음 수업을 들으러 가보자~