반응형
※ 개요
요구사항 4) 멤버 상세정보 창에서 삭제 기능, 목록창으로 가는 기능을 가진 버튼을 제작
요구사항 5) 멤버 추가하기
요구사항 4) 멤버 상세정보 창에서 삭제 기능, 목록창으로 가는 기능을 가진 버튼을 제작
* Member.jsp
- 삭제, 목록 버튼 추가
<div>
<button type="button" onclick="edit(<%=tmp.getNum()%>)">수정</button>
<button type="button" onclick="del(<%=tmp.getNum()%>)">삭제</button>
<button type="button" onclick="list()">목록</button>
</div>- script에 삭제, 목록 함수 추가
<script>
function edit(num){
location.href="/MyWeb/mem?cmd=edit&num="+num;
}
function del(num){
if(confirm(num+'번 회원정보를 정말 삭제하시겠어요?')){
location.href="/MyWeb/mem?cmd=delete&num="+num;
}
}
function list(){
location.href="/MyWeb/mem?cmd=list";
}
</script>
* MemDAO.java: 삭제 함수 추가
public void delete(int num) {
conn = getConn();
String sql = "DELETE FROM member WHERE num = ?;";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, num);
int n = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
}
* MemSvc.java: 조건문에 삭제 명령 추가
else if(cmd.equals("delete")) {
int num = Integer.parseInt(request.getParameter("num"));
MemDAO dao = new MemDAO();
dao.delete(num);
request.setAttribute("memlist", getList());
request.setAttribute("deleted", true);
return "/MemList.jsp";
}
요구사항 5) 멤버 추가하기
* List 페이지에 버튼 추가하기
- MemList.jsp
<button type="button" onclick="location.href='MemberAdd.jsp'">새로운 인원 추가하기</button>* 버튼을 누르면 이동할 화면 제작하기
- MemberAdd.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Member Insert</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
div#container{width:fit-content; border: 1px solid black; margin: 0px auto;
padding:10px; text-align: center;}
form label{display: inline-block; width: 50px; margin-right: 10px; text-align: right;}
button{margin-top: 10px;}
</style>
<script type = "text/javascript">
function formCheck(f){
if(f.name.value == ''){
alert("Name 항목은 필수 입력 사항입니다.");
return false;
}
else if(f.phone.value == ''){
alert("Phone 항목은 필수 입력 사항입니다.");
return false;
}
else if(f.email.value == ''){
alert("Email 항목은 필수 입력 사항입니다.");
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h3>[회원정보 추가]</h3>
<form action = "/MyWeb/mem" method = "post" onsubmit="return formCheck(this)">
<input type = "hidden" name = "cmd" value = "add">
<div>
<label>Name</label><input type = "text" name = "name" id = "name" required></input>
</div>
<div>
<label>Phone</label><input type = "text" name = "phone" id = "phone" required></input>
</div>
<div>
<label>Email</label><input type = "text" name = "email" id = "email" required></input>
</div>
<button type = "submit">저장</button> <button type = "reset">취소</button>
</form>
</div>
</body>
</html>폼에서 입력한 내용이 전달되도록 하는 기능은 form 안에 있는 input tag 중 hidden 속성이다.
<input type = "hidden" name = "cmd" value = "add">
빈 칸일 경우 재 입력하는 함수가 스크립트 안에 포함되어 있다. onsubmit 속성으로 리턴값을 지정해 동작을 제어할 수 있다.
<script type = "text/javascript">
function formCheck(f){
if(f.name.value == ''){
alert("Name 항목은 필수 입력 사항입니다.");
return false;
}
else if(f.phone.value == ''){
alert("Phone 항목은 필수 입력 사항입니다.");
return false;
}
else if(f.email.value == ''){
alert("Email 항목은 필수 입력 사항입니다.");
return false;
}
return true;
}
</script>
...
<form action = "/MyWeb/mem" method = "post" onsubmit="return formCheck(this)">
* 폼에서 입력한 내용을 DB에 반영하기
- MemSvc.java
else if(cmd.equals("add")) {
String name = request.getParameter("name");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
MemVO newMem = new MemVO();
newMem.setName(name);
newMem.setPhone(phone);
newMem.setEmail(email);
new MemDAO().insert(newMem);
request.setAttribute("memlist", getList());
return "/MemList.jsp";
}
- MemDAO.java
public void insert(MemVO mem) {
conn = getConn();
String sql = "INSERT INTO member(name, phone, email) VALUES (?, ?, ?);";
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, mem.getName());
pstmt.setString(2, mem.getPhone());
pstmt.setString(3, mem.getEmail());
int n = pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
}
반응형
'프로그래밍' 카테고리의 다른 글
| [웹] Java Spring Framework 활용 (0) | 2021.06.25 |
|---|---|
| [웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(3) (0) | 2021.06.23 |
| [데이터 수집] 빅데이터 수집 시스템 개발(Selenium) (0) | 2021.06.22 |
| [R] 데이터 시각화 정의(XAMPP 다운로드, 시각화 예제, 자료 수집) (0) | 2021.06.22 |
| [웹] JSP 예제(MySQL과 연동, 웹 브라우저 출력)(1) (0) | 2021.06.22 |