겉바속촉

[html] 간단한 쇼핑몰 만들기 본문

IT일기(하반기)/HTML

[html] 간단한 쇼핑몰 만들기

겉바속촉 2020. 6. 22. 11:49
728x90
반응형

이번에는 간단한 쇼핑몰을 만들어볼게요:)

 

 

 

[JspMiniProject] 라고 만들었어요

web-inf > lib> ojdbc jar츄가

 

 

 

 

 

 

Webcontent - index(jsp파일) 만들기

Webcontent - layout - body, bottom, header, menu(jsp파일) 만들기

 

 

 

 

다음 블럭을 <body>윗 부분에 넣어주세요

프로젝트 경로는 계속 사용할 것이므로 따로 저장해두세요:)

 

<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>

 

 

 

<body>사이에다가는 다음블럭을 넣어주세요

<%=path %>

 

다음과 같이 각각 넣어주시면 되는거에요!

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<%=path %>


</body>
</html>

 

 

우선 저는 사진 body에 들어갈 사진 8장

foot, bottom에 들어갈 사진 2장

이미지 폴더 만들어서 저장해두었습니다.

 

그리고 전체적인 구조는 다음과 같습니다.

 

 

 

이제 각각 만들어두었던 jsp파일의 코드들을 작성해볼게요:)

 

 

 

1. body

 

body에 쓰일 사진 6장 넣어주세요:)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

%>
<body>
<img alt="" src="<%=path%>/shop/a01.png" width="400" border="1">
<img alt="" src="<%=path%>/shop/a02.png" width="400" border="1">
<img alt="" src="<%=path%>/shop/a03.png" width="400" border="1"><br><br>
<img alt="" src="<%=path%>/shop/a04.png" width="400" border="1">
<img alt="" src="<%=path%>/shop/a05.png" width="400" border="1">
<img alt="" src="<%=path%>/shop/a06.png" width="400" border="1">


</body>
</html>

 

2. header

 

사이트 상단에 들어갈 header이미지 넣어주세요:)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<a href="<%=path %>/index.jsp"><img alt="" src="<%=path %>/shop/studiopet.PNG" width="1000" ></a>
</body>
</html>

 

3. bottom

 

사이트 하단에 들어갈 bottom이미지 넣어주세요:)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

%>
<body>
<img alt="" src="<%=path%>/shop/강아지.PNG">

</body>
</html>

 

4. menu

 

저는 menu를 6가지 만들어서 넣어주었습니다:)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

%>
<body>
<a href="<%=path %>/">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="<%=path %>/">LogIn</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="<%=path %>/index.jsp?body=member/memberForm.jsp">Join</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="<%=path %>/">Guest Book</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="<%=path %>/">BOARD</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="<%=path %>/">NOTICE</a>&nbsp;&nbsp;&nbsp;&nbsp;
</body>
</html>

 

5. index

 

여태 만들어두었던 jsp파일들을 잘 배치해주세요:)

그리고 컴파일 해보시면서 사진 크기들 겹치지 않게 잘 조정해주세요!

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

String body="layout/body.jsp";

if(request.getParameter("body")!=null)
	body=request.getParameter("body");

%>
<body>
<!-- title -->
<div style="position: absolute; left: 150px; top: 30px; width: 120px; height:50px;">
<jsp:include page="layout/header.jsp"/>
</div>

<!-- 메인페이지 -->
<div style="position: absolute; left:70px; top: 400px; width: 1500px; height: 800px;">
<jsp:include page="<%=body %>"/>
</div>


<!-- menu -->
<div style="position: absolute; left:500px; top: 250px; width: 800px; height: 50px; font-size: 10pt;">
<jsp:include page="layout/menu.jsp"/>
</div>

<!-- bottom -->
<div style="position: absolute; left: px; top: 1300px; width: 1500px; height: 100px;">
<jsp:include page="layout/bottom.jsp"/>
</div>

</body>
</html>

 

그리고 이제 컴파일 해보시면

다음과 같이 site가 만들어졌습니다.

 

 

 

 

이제 회원가입 JOIN을 누르면

입력할 수 있는 table을 만들어볼게요:)

 

 

그 전에!!!

 

sequence만들기

.

id체크용으로 하나 넣어주기

table만들기

 

 

Package랑 Class만들기

 

 

Folder랑 JSPfile 만들기

 

 

 

memberForm.jsp

다음과 같이 나올 수 있도록 table코드 잘 작성해주세요:)

,

 

JSPfile 하나 더 만들어줄게요:)

 

 

 

그리고 다음과 같이 작성해줄 건데요

idSearchForm 파일은 우리가 아이디입력을 눌러서 뜨는 창에서

 

우리가 무언가를 입력했을 때

그 입력문에 대한 제어를 해주려고 합니다:)

 

 

 

idSearchForm.jsp는 다음과 같이 작성해주세요

 

우리가 입력창에 입력해준 아이디값은 post방식으로 보내줄게요

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

//키값이 null이면 폼을 나타내려한다
String key=request.getParameter("key");
if(key==null)
{%>
	<!-- 아이디 입력폼 -->
	<form action="<%=path%>/member/idSearchForm.jsp" method="post">
		<table>
			<tr>
				<td>
					<b>아이디 입력:</b>
					<input type="text" name="id" size="10">
					<input type="hidden" name="key" value="result">
					<input type="submit" value="중복체크">
				</td>
			</tr>					
		</table>
	</form>
<%}else
{%>
	<!-- 입력결과 -->
	
	
<%}

%>
<body>

</body>
</html>

여기까지 작성해주신 후에

memberform.jsp로 오셔서

 

 

idopen()이라는 함수 만들어주신 후에

아래 <body>부분의 아이디 입력의 onclick에다가 넣어주시면 됩니다:)

 

요 함수 안에는 window.open('작동할 파일','이름 아무거나','스펙');

이라고 해주시면 되겠쥬?

 

 

 

아이디 입력 눌렀을 때

창이 뜨는 지 확인해주세요:)

 

그리고 idSearchForm으로 오셔서 마저 작성해주실게요

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript">
function check(f)
{
	/* 아이디 최하 길이는 5글자 */
	if(f.id.value.length<5)
		{
		alert("5글자 이상 입력바람");
		return false;
		}
	/* 공백체크 */
	var idx=f.id.value.indexOf(''); //공백의 위치
	if(idx>=0)
		{
		alert("아이디에 공백이 있습니다");
		return false;
		}
		
}


</script>
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

//키값이 null이면 폼을 나타내려한다
String key=request.getParameter("key");
if(key==null)
{%>
	<!-- 아이디 입력폼 -->
	<form action="<%=path%>/member/idSearchForm.jsp" method="post" onsubmit="check(this)">
		<table>
			<tr>
				<td>
					<b>아이디 입력:</b>
					<input type="text" name="id" size="10">
					<input type="hidden" name="key" value="result">
					<input type="submit" value="중복체크">
				</td>
			</tr>					
		</table>
	</form>
<%}else
{%>
	<!-- 입력결과 -->
	
	
<%}

%>
<body>

</body>
</html>

 

 

 

그리고 아이디입력 클릭하시고

각각의 경우를 일부러 입력해보세요:)

다음과 같은 창이 뜬다면 성공입니다!^^!

 

(좌) 5글자 미만으로 입력한 경우                                                       (우) 입력한 값에 공백이 있는 경우

 

 

 

 

 

DbMain.java

  • DB창에서 driver랑 url주소 복-붙해오기
  • DbMain()작성
  • Connection해주기
  • 메인에서 객체생성
package member.model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DbMain {
	
	String driver="oracle.jdbc.driver.OracleDriver";
	String url="jdbc:oracle:thin:@localhost:1521:XE";

	
	public DbMain() {
		
		try {
			Class.forName(driver);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
	
	public Connection getConnection()
	{
		
		Connection conn=null;
		
		try {
			conn=DriverManager.getConnection(url,"아이디","비밀번호");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			System.out.println("커넥션 실패");
		}
		
		return conn;
		
	}
	

	public static void main(String[] args) {
		
		DbMain db=new DbMain();
			
	}

}

 

 

MemberDAO.java

 

package member.model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class MemberDAO {
	
	DbMain db=new DbMain();
	
	//아이디 중복체크
	
	//아이디를 찾아서 있으면 true, 없으면 false값 반환
	
	public boolean searchId(String id)
	{
		Connection conn=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		
		boolean flag=false;
		String sql="select * from member where id=?";
		
		conn=db.getConnection();
		try {
			pstmt=conn.prepareStatement(sql);
			
			pstmt.setString(1, id);
			rs=pstmt.executeQuery();
			
			if(rs.next())
			{
				flag=true;
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				rs.close();
				pstmt.close();
				conn.close();
				
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		return flag;
	}
			

}

 

이제 아까 비어두었던 idSearchForm의 else부분으로 와주세요:)

 

 

 

저 노란 박스 안을 채워주실건데요:)

다음과 같이 작성해주세요

 

 

<이미 존재하는 아이디를 넣어주면>

망한 사진 (이미지 넣어주기)

이미 존재하는 아이디입니다. 다른 아이디로 입력해주세요 (출력될 문구)

 

 

가 되는 것이 목표입니다!!

 

else
{
	//입력결과
	String id=request.getParameter("id");
	MemberDAO dao = new MemberDAO();
	boolean flag=dao.searchId(id);
	
	if(flag)
	{
		//이미 아이디가 존재한다면
		%>
		
		<table>
		
		<tr>
			<td>
				<img alt="" src="<%=path%>/image/mang.png">
				<b style="color: red;"> 이미 존재하는 아이디입니다<br>
				다른 아이디로 입력해주세요~</b>
				<input type="button" value="아이디 입력"
				onclick="location.href='<%=path%>/member/idSearchForm.jsp'">
			</td>
		</tr>
		
		</table>
		
	<%}else
	{%>
		<!-- 아이디가 없을경우 -->
		<table>
		
		<tr>
			<td>
				<img alt="" src="<%=path%>/image/open.png">
				<b style="color: blue;"> 사용가능한 아이디입니다<br></b>
				<input type="button" value="사용하기" onclick="">
				
				<input type="button" value="아이디 입력"
				onclick="location.href='<%=path%>/member/idSearchForm.jsp'">
			</td>
		</tr>
		
		</table>
		
		
	<%}

 

전체 idSearchForm

<%@page import="member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript">
function check(f)
{
	/* 아이디 최하 길이는 5글자 */
	if(f.id.value.length<5)
		{
		alert("5글자 이상 입력바람");
		return false;
		}
	/* 공백체크 */
	var idx=f.id.value.indexOf(''); //공백의 위치
	if(idx>0)
		{
		alert("아이디에 공백이 있습니다");
		return false;
		}
		
}


</script>
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();

//키값이 null이면 폼을 나타내려한다
String key=request.getParameter("key");
if(key==null)
{%>
	<!-- 아이디 입력폼 -->
	<form action="<%=path%>/member/idSearchForm.jsp" method="post" onsubmit="check(this)">
		<table>
			<tr>
				<td>
					<b>아이디 입력:</b>
					<input type="text" name="id" size="10">
					<input type="hidden" name="key" value="result">
					<input type="submit" value="중복체크">
				</td>
			</tr>					
		</table>
	</form>
<%}else
{
	//입력결과
	String id=request.getParameter("id");
	MemberDAO dao = new MemberDAO();
	boolean flag=dao.searchId(id);
	
	if(flag)
	{
		//이미 아이디가 존재한다면
		%>
		
		<table>
		
		<tr>
			<td>
				<img alt="" src="<%=path%>/image/mang.png">
				<b style="color: red;"> 이미 존재하는 아이디입니다<br>
				다른 아이디로 입력해주세요~</b>
				<input type="button" value="아이디 입력"
				onclick="location.href='<%=path%>/member/idSearchForm.jsp'">
			</td>
		</tr>
		
		</table>
		
	<%}else
	{%>
		<!-- 아이디가 없을경우 -->
		<table>
		
		<tr>
			<td>
				<img alt="" src="<%=path%>/image/open.png">
				<b style="color: blue;"> 사용가능한 아이디입니다<br></b>
				<input type="button" value="사용하기" onclick="">
				
				<input type="button" value="아이디 입력"
				onclick="location.href='<%=path%>/member/idSearchForm.jsp'">
			</td>
		</tr>
		
		</table>
		
		
	<%}
%>

	
<%}

%>
<body>

</body>
</html>

 

 

이제 컴파일을 해보도록 할게요:)

아이디 입력을 클릭한 후 

처음에 아이디 체크용으로 jiwoo라는 아이디를 넣어놨기 때문에

jiwoo 를 입력했습니다

그랬더니 다음과 같이 뜨네요~~ 그렇다면 성공!^^!

 

 

이제 새로운 아이디를 입력하고

눌러보신다면 

사용가능한 아이디입니다 라고 뜰거에요:)

 

그렇다면 사용하기를 클릭했을 때

입력한 아이디가 폼에 들어가있어야되겠죠?!

 

 

idSearchForm에서 다음과 같은 function을 만들어서 추가해주세요:)

 

function goUse(id)
{
	//전달받은 아이디를 오픈한 윈도우로 보내고
	opener.frm.id.value=id;
	
	//현재윈도우는 닫는다
	window.close();
	
}

 

그리고 나서 else

 

사용하기를 onclick 했을 때 goUse를 실행시켜주시면 됩니다:)

else
	{%>
		<!-- 아이디가 없을경우 -->
		<table>
		
		<tr>
			<td>
				<img alt="" src="<%=path%>/image/open.png">
				<b style="color: blue;"> 사용가능한 아이디입니다<br></b>
				<input type="button" value="사용하기" onclick="goUse('<%=id%>')"><br>
				
				<input type="button" value="아이디 입력"
				onclick="location.href='<%=path%>/member/idSearchForm.jsp'">
			</td>
		</tr>
		
		</table>

 

 

사용하기를 클릭하면

입력한 아이디가 들어가있어야합니다:)

 

그리고 비밀번호까지 마저 입력해주신 후에

회원가입 클릭하면

다음과 같이 떠야합니다:)

 

 

 

 

 

위와같은 화면이 나오려면

successPage코드를 다음과 같이 작성해주세요:)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<p style="text-align: center; font-size: 20px; color: blue; ">
회원가입을 축하합니다<br><br>
<a href="">로그인</a>
<a href="<%=path %>/index.jsp?body=member/memberList.jsp">회원명단</a>
</p>

</body>
</html>

 

 

그렇게 입력한 값이 db에 저장될 수 있도록

DTO 코드 작성해주시고

DAO에 메서드 마저 작성해주세요:)

 

 

MemberDTO.java

package member.model;

import java.sql.Timestamp;

public class MemberDTO {
	
	private String num;
	private String name;
	private String id;
	private String pass;
	private Timestamp gaipday;
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	public Timestamp getGaipday() {
		return gaipday;
	}
	public void setGaipday(Timestamp gaipday) {
		this.gaipday = gaipday;
	}
	
	

}

 

 

MemberDAO에서 insert메서드 추가

	public void insertMember(MemberDTO dto)
	{
		Connection conn=null;
		PreparedStatement pstmt=null;
		
		String sql="insert into member values(seq_mini.nextval,?,?,?,sysdate)";
		
		conn=db.getConnection();
		try {
			pstmt=conn.prepareStatement(sql);
			
			//3개의 바인딩
			pstmt.setString(1, dto.getName());
			pstmt.setString(2, dto.getId());
			pstmt.setString(3, dto.getPass());
			
			pstmt.executeUpdate();
			
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				pstmt.close();
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
		}
		
	}

 

여기까지 모두 해주셨다면

이제 db에 우리가 입력한 값들이 들어가있을 거에요:)

db창 열어서 꼭 확인해주시구요

 

 

다음 목표는

회원가입 버튼을 눌렀을 때 뜬 success페이지에서 회원명단을 누르면

list가 쭈르르르륵 떠야하는 게 목표입니다

Vector를 떠올리셔야겠죠?!

 

 

다시 DAO로 가주세요

그래서 다음과 같이 메서드를 추가로 해주셔야 합니다:)

 

public Vector<MemberDTO> getMemberList()
	{
		Vector<MemberDTO> list=new Vector<MemberDTO>();
		
		Connection conn=null;
		PreparedStatement stmt=null;
		ResultSet rs=null;
		
		String sql="select * from member order by name asc";
		
		conn=db.getConnection();
		
		try {
			stmt=conn.prepareStatement(sql);
			rs=stmt.executeQuery();
			
			while(rs.next())
			{
				MemberDTO dto = new MemberDTO();
				
				dto.setNum(rs.getString("num"));
				dto.setName(rs.getString("name"));
				dto.setId(rs.getString("id"));
				dto.setPass(rs.getString("pass"));
				dto.setGaipday(rs.getTimestamp("gaipday"));
				
				list.add(dto);
						
			}
				
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		
		
		return list;
		
	}

 

memberList.jsp 작성하기

<%@page import="member.model.MemberDTO"%>
<%@page import="java.util.Vector"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
MemberDAO dao=new MemberDAO();
Vector<MemberDTO> list = dao.getMemberList();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH");

%>
<body>
<div class="container">
	<b style="color: cyan">총<%=list.size() %>명의 회원이 있습니다</b>
		<table class="table table-striped">
			<caption><b style="font-size: 13pt;"></b>회원명단</caption>
			<tr>
				<th>No.</th>
				<th>회원명</th>
				<th>아이디</th>
				<th>가입일</th>
				<th>편집</th>			
			</tr>
			<% 
			for(int i=0; i<list.size();i++)
			{
				MemberDTO dto=list.get(i);
				%>
				<tr>
					<td><%=i+1%></td>
					<td><%=dto.getName()%></td>
					<td><%=dto.getId()%></td>
					<td><%=sdf.format(dto.getGaipday())%></td>
					<td><a href="">수정</a>/<a href="">삭제</a></td>
				</tr>
			<%}
			
			
			%>
		</table>

</div>

</body>
</html>

 

이제 컴파일 하셔서

회원명단을 클릭해보세요

 

다음과 같이 떴다면 성공!^^!

 

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] 간단한 쇼핑몰 만들기 -로그인 편  (0) 2020.06.23
[html] 간단한 쇼핑몰 만들기 - 수정, 삭제편  (0) 2020.06.23
[html] jquery로 eventimage만들기  (0) 2020.06.16
[html] jquery로 select 연습하기  (0) 2020.06.16
[html] Jquery 사용하기  (0) 2020.06.16
'IT일기(하반기)/HTML' Related Articles more