비밀번호를 설정하고는 잘 기억하거나 제대로 메모해두자..

 

학교랑 다르게 비밀번호를 설정해서 그런가 학교에서는 잘 되는 게 집에서는 연결이 안된다.. 

 

mysql 재설치..

'jsp > 숙제' 카테고리의 다른 글

게시판 만들기 (2) - DB준비 및 페이지 준비  (0) 2022.05.11
게시판 만들기 (1)  (0) 2022.05.10
0429 ~  (0) 2022.04.29

[1. DB 테이블 만들기]

CREATE TABLE `smart`.`board` (
  `num` INT NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(50) NOT NULL,
  `content` TEXT NULL,
  `writer` VARCHAR(25) NULL,
  `writerDate` DATETIME NULL,
  PRIMARY KEY (`num`));

DB - smart / table - board

[2. 페이지 준비] 

  • board.jsp
//게시판에 대해선 따로 말이 없었다.
//글쓰기 페이지로 넘어가면 되므로 버튼만 만들고 넘긴다.
<body>
	<p>게시판</p>
	<hr>
	<button onclick="location.href='writer.jsp'">글쓰기</button>
</body>

board.jsp

  • writer.jsp
//작성된 값은 post 방식으로 넘기고 writerAct.jsp에서 DB연결 및 쿼리문을 작성한다.
<body>
	<form method="post" action="writerAct.jsp">
		제목: <input name="title" id="title">
		<br> 
		내용: <textarea name="content" id="content"></textarea>
		<br> 
		작성자: <input name="writer" id="writer"><br>
		<button type="submit" id="submit">글쓰기</button>
	</form>
</body>
  • list.jsp
//스크립틀릿을 담는 행을 반복시켜줘야 함을 기억한다.
<thead>
	<tr>
		<th>글번호</th>
		<th>제목</th>
		<th>작성자</th>
		<th>작성날짜</th>
	</tr>
</thead>
<tbody>
<!-- 반복이 시작되어야 하는 행 -->
	<tr>
	<!-- 내용입력 값에 스크립틀릿이 들어가야 한다. -->
    <!-- 제목 클릭 시 상세내용 페이지로 이동한다. -->
		<td>번호입력</td>
		<td><a href="#">근두운</a></td>
		<td>손오공</td>
		<td>2022-05-06</td>
	</tr>
</tbody>

list.jsp

  • update.jsp
<!-- bootstrapk cdn 3줄 받아옴 -->

<form method="post" action="updateAct.jsp">

<!-- name값을 받아야 하며, num으로 받는다. -->
<!-- num = pk이기도 하기에 수정하고자 하는 글의 내용값만 받아서 수정할 수 있게 한다. -->
	<input type="hidden" name="num" value="">
		<table class="table">
			<tr>
				<th>제목:</th>
				<!-- value=넘어올 값 -->
				<td><input class="form-control" name="title" id="title" value=""></td>
			</tr>
			<tr>
				<th>내용:</th>
				<td><textarea class="form-control" name="content" id="content"><!-- 넘어올 값 --></textarea></td>
			</tr>
			<tr>
				<th>작성자:</th>
				<!-- value=넘어올 값 -->
				<td><input class="form-control" name="writer" id="writer" value=""></td>
            </tr>
		</table>
	<div class="pull-right"><button class="btn btn-default" type="submit" id="submit">글쓰기</button></div>
</form>

update.jsp

 

'jsp > 숙제' 카테고리의 다른 글

[error]  (0) 2022.05.12
게시판 만들기 (1)  (0) 2022.05.10
0429 ~  (0) 2022.04.29

[화면구현]

의뢰인이 원하는 모양

 

[방식]

mvc1: jsp와 act만으로 페이지를 넘겨서 완성하기

 

mvc2: 미지의 영역 그 자체, 각 기능별로 (controller, service, mapper) 나눠서 완성하기

 

mvc1도 제대로 못하고 있으므로 jsp로 넘기는 방식을 사용하고자 한다.

 

 

[흐름도]

 

게시판(board) - 글쓰기(writer / writerAct) - 목록(list) - 상세보기(view) - 내용수정(update / updateAct) - list  

 

[요구사항]

[(1). 글쓰기화면]

  • 글쓰기 화면을 구현하라
  • 글쓰기 버튼을 클릭하면 DB에 제목, 내용, 작성자, 작성날짜를 저장 후 목록으로 이동하라

서버프로그램구현 시험문제.pptx

 

[(2). 목록화면]

  • 목록화면을 구현하라
  • 제목 클릭 시 상세내용 페이지로 이동하게 하라

서버프로그램구현 시험문제.pptx

[(3). 상세내용 화면]

  • 게시판 상세내용 화면을 구현하라
  • 글수정 버튼 클릭 시 수정화면(update.jsp)으로 이동하게 하라
  • 목록 버튼 클릭 시 목록으로 이동하라

서버프로그램구현 시험문제.pptx

 

[(4). 수정화면]

  • 수정화면 구현하라
  • 글수정 버튼 클릭 시 DB에 글내용을 수정하고 목록으로 이동하게 하라

서버프로그램구현 시험문제.pptx

[추가]

DB: MySQL / DB명: smart, 테이블명: board

 

'jsp > 숙제' 카테고리의 다른 글

[error]  (0) 2022.05.12
게시판 만들기 (2) - DB준비 및 페이지 준비  (0) 2022.05.11
0429 ~  (0) 2022.04.29

아래 문구들을 html파일이 아닌 jsp 파일에서 실행시키기

1. login.html

설명: 창에서의 아이디/비밀번호 입력요구 문구

파일 위치: garam > src > main > webapp > garam > login.html

<script>
	function login() {
		let mid = document.getElementById("mid");
		let errMsg = document.getElementById("errMsg");
		/* 속성 value == 값이 있냐 없냐 */
		/* 값이 없으면 errMsg div에 에러메시지를 날려준다. */
		if (mid.value == '') {
			/* 출력하는 방법 4가지 중 하나 */
			errMsg.innerHTML = "아이디(휴대폰번호)를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mid.focus();
			/* 값이 없고 에러메시지가 출력이 되면 더 이상 넘어가지 않게 한다. */
			return false;
		}
		/* mid를 한 것과 같이 만들고 mid의 자리에 mpw를 넣는다. */
		/* errMsg에는 비밀번호에 관한 에러메시지를 넣는다. */
		let mpw = document.getElementById("mpw");
		if (mpw.value == '') {
			errMsg.innerHTML = "비밀번호를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mpw.focus();
			return false;
		}
		console.log("login");
		/* 페이지가 지나가지 않도록 해주는 것: return false;  */
		/* 아이디와 비밀번호가 채워졌다면 지나갈 수 있도록 true를 사용한다. */
		return true;
	}
</script>

 

2. join01.html

설명: 약관 동의페이지에서 전체 동의 체크박스를 눌렀을 때 모든 약관에 동의되게 하는 스크립트

파일 위치: garam > src > main > webapp > garam > join01.html

<script>

let agree1 = document.getElementById("agree1");
let agree2 = document.getElementById("agree2");
let agree3 = document.getElementById("agree3");

function join02() {
	//checkbox checking
	if (!agree1.checked) {
		alert("서비스 이용약관 동의에 체크하세요");
		agree1.focus();
		return;
	}
	if (!agree2.checked) {
		alert("개인정보 수집 및 동의에 체크하세요");
		agree2.focus();
		return;
	}
	if (!agree3.checked) {
		alert("개인정보 3자 제공 동의에 체크하세요");
		agree3.focus();
		return;
	}
	location.href="join02.html";
	//location.replace("join02.html");
}

function chkAuto(t) {
	if (t.checked) {
		agree1.checked = true;
		agree2.checked = true;
		agree3.checked = true;
	} else {
		agree1.checked = false;
		agree2.checked = false;
		agree3.checked = false;
	}
	console.log("전체동의를 체크하였습니다." + t.checked);
}
</script>

 

3. 비밀번호/비밀번호 확인 (join02.html)

설명: 비밀번호와 비밀번호 확인란에 입력된 비밀번호가 일치하지 않을 시 초기화

 

function join02() {
	// 비밀번호 확인
	let pw = document.getElementById("pw");
	let pw2 = document.getElementById("pw2");
	if (pw.value != pw2.value) {
		alert("비밀번호가 일치하지 않습니다.");
		pw.value = "";
		pw2.value = "";
		pw.focus();
		return false;
	}

 

4. 비밀번호 유효성 검사 (8 ~ 12, [영문자, 숫자, 특수문자]) (join02.html)

설명: 영문자, 숫자, 특수문자 미입력시 alert창 띄워주며, 8자 이상이 안 되거나 12자를 초과하면 똑같이 경고창 띄움.

function pwChk(t) {
	if (t.value.length >= 8 && t.value.length <= 12) {
		let regE = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
	if (!regE.test(t.value)) {
		alert("비밀번호는 영문자, 숫자, 특수문자를 포함해야 합니다.");
		return false;
		}
	} else {
		alert("비밀번호는 8자 이상 12자 이하로 입력하셔야 합니다.");
}

 

5. 비밀번호 입력란 확인 기능 (join02.html)

설명: 사용자가 입력한 비밀번호와 비밀번호 확인란을 스스로 확인할 수 있게 하는 기능

function pwshow(t) {
	let pw2 = document.getElementById("pw2");
	if (t.checked) {
		pw.type = "text";
		pw2.type = "text";
		} else {
			pw.type = "password";
			pw2.type = "password";
		}
}

 

6. 

+ Recent posts

티스토리툴바