[웹 프로그래밍] 웹 프로그래밍

오늘(2022-04-12)은 웹 프로그래밍 5번째 수업이다.

이번에 만들 것은 저번에 만든 select에 체크박스 달기이다.

이런 거 말이다.

2줄만 추가해 주면 되는데,

저번에 만든 select코드에 table tr부분에

th를 추가해주고 #을 넣어준다.

그리고 밑에 있는 tr에는

<td><input type="checkbox" name="id" value="<%=member.getId() %>"/></td>

이렇게 넣어준다.

table전체 코드는 이렇게 생겼다.

<table class="table">
			<tr>
				<th>#</th>
				<th>ID</th>
				<th>USERNAME</th>
				<th>PASSWORD</th>
			</tr>
			<% for (Member member : mdm.doSelect()){%>
			
			<tr>
				<td><input type="checkbox" name="id" value="<%=member.getId() %>"/></td>
				<td><%=member.getId() %></td>
				<td><%out.println(member.getUsername()); %></td>
				<td><%=member.getPassword() %></td>
			</tr>
			<%} %>
		</table>

그리고 삭제 버튼을 달아 주었다.

jsp파일에 form태그를 추가해 주고 input 태그를 넣어주었다.

form전체 코드는 이렇게 생겼다.

	<form action="delete.jsp">
		<div class="main">
			<h1>select페이지</h1>
			<table class="table">
				<tr>
					<th>#</th>
					<th>ID</th>
					<th>USERNAME</th>
					<th>PASSWORD</th>
				</tr>
				<%
				for (Member member : mdm.doSelect()) {
				%>

				<tr>
					<td><input type="checkbox" name="id"
						value="<%=member.getId()%>" /></td>
					<td><%=member.getId()%></td>
					<td>
						<%
						out.println(member.getUsername());
						%>
					</td>
					<td><%=member.getPassword()%></td>
				</tr>
				<%
				}
				%>
			</table>
			<input type="submit" value="삭제" />
		</div>
	</form>

그리고 mystyle.css 파일을 추가해 주었다.

input[type="submit"] {
	background-color: #c0c0c0;
	padding: 0.5rem;
	margin: 0.5rem;
}

input[type="submit"]:hover {
	cursor: pointer;
	background-color: #ccc;
}

이러면 결과가

이렇게 나오게 된다.

참고로 중간에 css가 안 올라가는 상황이 벌어졌는데,

이때는 F12를 누른 뒤

새로고침에 우클릭을 한 후

캐시 비우기 및 강력 새로고침을 하면 된다.

어쨌든 이제 delete를 만들러 가자.

먼저 delete.jsp를 바꾸기 전에 delete기능을 만들러 MemberDBManager.java 파일에 들러주자.

public String dodelete(String[] ids) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String dids = ids[0];
	
		for(int i = 1; i < ids.length; i++) 
			dids += "," + ids[i];
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,user,password);
			
			pstmt = con.prepareStatement("delete from member "
					+ " where id in ("+dids+")");
			pstmt.executeUpdate();
			return "OK";
		}catch (Exception e) {
			e.printStackTrace();
			return "Bad request";
		}
	}

url, user, password는 따로 변수로 만들어 주었다. user는 DB유저 이름, password는, 유저 패스워드, url은 dburl이다.

이제 delete메서드를 완성하였으니,

delete.jsp을 짜러 가자.

데이터를 처리하는 부분이라 딱히 보이는 것은 없기 때문에 코드를 전부 보여주겠다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="ex0405.MemberDBManager" %>
<%@page import="ex0405.Member" %>
<%@include file="nav.jsp" %>
<%
	String[] ids = request.getParameterValues("id");
	for(int i = 0; i < ids.length; i++)
		out.println(ids[i]);
	
	MemberDBManager mdm = new MemberDBManager();
	String result =	mdm.dodelete(ids);
	if(result.equals("OK"))
		response.sendRedirect("select.jsp");
	
%>

이런 식으로 하면,

체크를 하고 삭제를 누르면,

사라지게 된다.

그리고 update와 delete가 필요가 없으니 저번에 만든 nav.jsp를 조금 고쳐주도록 하자.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<div class="container">
        <ul>
        	<li><a href="index.jsp">index</a></li>
            <li><a href="insert.jsp">insert</a></li>
            <li><a href="select.jsp">select</a></li>
			<li>
				<form>
				id <input type="text" name="id"/>
				password <input type="text" name="password"/>
				<input type="submit" value="로그인"/>
				</form>
			</li>
        </ul>
</div>

이런 식으로 고쳤다.

이렇게 고치면,

이런 화면이 뜨게 된다.

이제 update.jsp를 만들러 갈 거다.

전체적으로는 수정 기능을 만들건대 오늘은 보여주는 화면만 만들기로 했다.

먼저 insert와 같게 만들어 주었다.

이런 페이지가 나올 것이다.

코드를 보자.

<body>

<%@include file="nav.jsp" %>
<div class="main">
	<h1>update페이지</h1>
	<form action="updateproc.jsp">
	username <br>
	<input type="text" name = "username: %>"/> <br>
	password <br>
	<input type="text" name = "password" %>"/><br>
	<input type="submit" value = "저장"/>
	</form>
</div>
</body>

그리고 수정 기능이니, 아이디를 누르면 저러네이지를 갈 수 있게 하자.

대충 이런 거다.

select.jsp을 바꿔주자.

<body>
	<%@include file="nav.jsp"%>

	<form action="delete.jsp">
		<div class="main">
			<h1>select페이지</h1>
			<table class="table">
				<tr>
					<th>#</th>
					<th>ID</th>
					<th>USERNAME</th>
					<th>PASSWORD</th>
				</tr>
				<%
				for (Member member : mdm.doSelect()) {
				%>

				<tr>
					<td><input type="checkbox" name="id"
						value="<%=member.getId()%>" /></td>
					<td><%=member.getId()%></td>
					<td><a href="update.jsp?id=<%=member.getId()%>">
						<%
						out.println(member.getUsername());
						%>
						</a>
					</td>
					<td><%=member.getPassword()%></td>
				</tr>
				<%
				}
				%>
			</table>
			<input type="submit" value="삭제" />
		</div>
	</form>

</body>

그리고 수정이니 원래 유저 이름과 비번을 나오게 해주자.

이런 거다.

먼저 메소드를 만들어야 하기 때문에 DBManager를 만져주자.

public Member doselectone(String id) {
		Member m = new Member();
		Connection con;
		PreparedStatement pstmt;
		ResultSet rs;
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,user,password);
			pstmt = con.prepareStatement("select * from member where id = " + "\"" + id + "\"");
		
			rs = pstmt.executeQuery();
			while(rs.next()) {
			m.setId(rs.getInt("id"));
			m.setUsername(rs.getString("username"));
			m.setPassword(rs.getString("password"));
			}
			return m;
		}catch (Exception e) {
			e.printStackTrace();
			return m;
		}
		
	}

이 메소드를 추가해 주었다.

그리고 update.jsp의 코드를 바꾸어 주자.

아래는 update.jsp의 전체 코드이다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="ex0405.MemberDBManager" %>
<%@page import="ex0405.Member" %>
    <%
    	String id = request.getParameter("id");
    	MemberDBManager mbm = new MemberDBManager();
    	Member member = mbm.doselectone(id);
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="./mystyle.css" rel="stylesheet">
</head>
<body>

<%@include file="nav.jsp" %>
<div class="main">
	<h1>update페이지</h1>
	<form action="updateproc.jsp">
	username <br>
	<input type="text" name = "username" value="<%=member.getUsername() %>"/> <br>
	password <br>
	<input type="text" name = "password" value="<%=member.getPassword() %>"/><br>
	<input type="submit" value = "저장"/>
	</form>
</div>
</body>
</html>

이렇게 오늘의 수업이 끝났다.

코드

이번에 바뀐 코드만 적혀있습니다.

delete.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="ex0405.MemberDBManager" %>
<%@page import="ex0405.Member" %>
<%@include file="nav.jsp" %>
<%
	String[] ids = request.getParameterValues("id");
	for(int i = 0; i < ids.length; i++)
		out.println(ids[i]);
	
	MemberDBManager mdm = new MemberDBManager();
	String result =	mdm.dodelete(ids);
	if(result.equals("OK"))
		response.sendRedirect("select.jsp");
	
%>

update.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="ex0405.MemberDBManager" %>
<%@page import="ex0405.Member" %>
    <%
    	String id = request.getParameter("id");
    	MemberDBManager mbm = new MemberDBManager();
    	Member member = mbm.doselectone(id);
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="./mystyle.css" rel="stylesheet">
</head>
<body>

<%@include file="nav.jsp" %>
<div class="main">
	<h1>update페이지</h1>
	<form action="updateproc.jsp">
	username <br>
	<input type="text" name = "username" value="<%=member.getUsername() %>"/> <br>
	password <br>
	<input type="text" name = "password" value="<%=member.getPassword() %>"/><br>
	<input type="submit" value = "저장"/>
	</form>
</div>
</body>
</html>

select.jsp

<%@page import="ex0405.Member"%>
<%@page import="java.util.List"%>
<%@page import="ex0405.MemberDBManager"%>

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>

<%
MemberDBManager mdm = new MemberDBManager();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans"
	rel="stylesheet">
<link href="./mystyle.css" rel="stylesheet">
</head>
<body>
	<%@include file="nav.jsp"%>

	<form action="delete.jsp">
		<div class="main">
			<h1>select페이지</h1>
			<table class="table">
				<tr>
					<th>#</th>
					<th>ID</th>
					<th>USERNAME</th>
					<th>PASSWORD</th>
				</tr>
				<%
				for (Member member : mdm.doSelect()) {
				%>

				<tr>
					<td><input type="checkbox" name="id"
						value="<%=member.getId()%>" /></td>
					<td><%=member.getId()%></td>
					<td><a href="update.jsp?id=<%=member.getId()%>">
						<%
						out.println(member.getUsername());
						%>
						</a>
					</td>
					<td><%=member.getPassword()%></td>
				</tr>
				<%
				}
				%>
			</table>
			<input type="submit" value="삭제" />
		</div>
	</form>

</body>
</html>

nav.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<div class="container">
	<ul>
		<li><a href="index.jsp">index</a></li>
		<li><a href="insert.jsp">insert</a></li>
		<li><a href="select.jsp">select</a></li>
	</ul>
	<div>
		<form>
			id <input type="text" name="id" /> 
			password <input type="text"	name="password" /> 
			<input type="submit" value="로그인" />
		</form>
	</div>
</div>

mystyle.css

.container {
	margin: 0 auto;
	width: 700px;
	background-color: #ccc;
}
container div{
	padding: 0.3 rem;
}
.main {
	margin: 0 auto;
	width: 700px;
	background-color: #ccc;
	padding: 1.5rem
}

* {
	box-sizing: border-box;
	font-family: 'Black Han Sans', sans-serif;
}

ul {
	list-style: none;
}

li {
	display: inline;
	background-color: lime;
}

ul li a {
	display: inline-block;
	margin: 1rem;
	text-decoration: none;
	padding: 1rem;
}

.table {
	width: 100%;
	border: 1px solid #aaa;
}

tr {
	border-bottom: 1px solid #aaa;
}

td {
	text-align: center;
}

input[type="submit"] {
	background-color: #c0c0c0;
	padding: 0.5rem;
	margin: 0.5rem;
}

input[type="submit"]:hover {
	cursor: pointer;
	background-color: #ccc;
}

MemberDBManager.java

package ex0405;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.mysql.cj.protocol.Resultset;

public class MemberDBManager {
	
	private static String classname = "com.mysql.cj.jdbc.Driver";
	private static String url = "jdbc:mysql://localhost:3306/aaa";
	private static String user = "root";
	private static String password = "wnwnqj11";
	
	public void doInsert(String user, String pass) {
		Connection con;
		PreparedStatement pstmt;
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,this.user,password);
			pstmt = con.prepareStatement(
					"insert into member (username,password) values (?,?)"
					);
			pstmt.setString(1, user);
			pstmt.setString(2, pass);

			pstmt.executeUpdate();
		}catch(Exception e){
			e.printStackTrace();
		}
	}
	
	public List<Member> doSelect() {
		ArrayList<Member> al = new ArrayList<Member>();
		Connection con;
		PreparedStatement pstmt;
		ResultSet rs;
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,this.user,password);
			pstmt = con.prepareStatement("select * from member");
			rs = pstmt.executeQuery();
			while(rs.next()) {
				Member m = new Member();
				m.setId(rs.getInt("id"));
				m.setUsername(rs.getString("username"));
				m.setPassword(rs.getString("password"));
				al.add(m);
			}
			
		}catch(Exception e) {
			
		}
		
		return al;
	}
	
	public String dodelete(String[] ids) {

		Connection con = null;
		PreparedStatement pstmt = null;
		String dids = ids[0];
	
		for(int i = 1; i < ids.length; i++) 
			dids += "," + ids[i];
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,user,password);
			
			pstmt = con.prepareStatement("delete from member "
					+ " where id in ("+dids+")");
			pstmt.executeUpdate();
			return "OK";
		}catch (Exception e) {
			e.printStackTrace();
			return "Bad request";
		}
	}

	public Member doselectone(String id) {
		Member m = new Member();
		Connection con;
		PreparedStatement pstmt;
		ResultSet rs;
		
		try {
			Class.forName(classname);
			con = DriverManager.getConnection(url,user,password);
			pstmt = con.prepareStatement("select * from member where id = " + "\"" + id + "\"");
		
			rs = pstmt.executeQuery();
			while(rs.next()) {
			m.setId(rs.getInt("id"));
			m.setUsername(rs.getString("username"));
			m.setPassword(rs.getString("password"));
			}
			return m;
		}catch (Exception e) {
			e.printStackTrace();
			return m;
		}
		
	}
}

'학교 공부 > 웹(Web)' 카테고리의 다른 글

[웹프로그래밍] 웹 프로그래밍 - 7번째 수업 (0)	2022.04.27
[웹 프로그래밍] 웹 프로그래밍 - 6번째 수업 (0)	2022.04.19
[웹프로그래밍] 웹프로그래밍 - 4번째 수업 (0)	2022.04.05
[Web 프로그래밍] 웹 프로그래밍 - 두번째 수업 (0)	2022.03.16
[Web 프로그래밍] 웹 프로그래밍 - 첫 수업 (0)	2022.03.10

코딩 작업장

[웹 프로그래밍] 웹 프로그래밍 - 5번째 수업

코드

'학교 공부 > 웹(Web)' 카테고리의 다른 글

티스토리툴바

[웹 프로그래밍] 웹 프로그래밍 - 5번째 수업

코드

'학교 공부 > 웹(Web)' 카테고리의 다른 글

관련글

티스토리툴바