상세 컨텐츠

본문 제목

0424_JAVA(DAO,DTO)_DB_JDBC_JSP_ 회원가입폼

<개인공부>/[JSP]

by 데브수달 2024. 4. 24. 15:39

본문

728x90
반응형

 

# 2024-04-24 수업내용
# 회원가입 JAVA(DTO DAO) DB JDBC JSP 웹개발
# 배포 시작하면 리눅스도 사용해야 하기 때문에 영문사용 익숙해질 것
# 프로젝트명 = DB의 데이터베이스명 같게 설정하는 경우 많음.
* 각 테이블마다 DTO가 존재할 수 있다. 테이블명을 그대로써서 Dto 붙이기
- 프로젝트 이름 => shop
- 회원가입폼 설계 => [signup_table 테이블의 필드 조건들]
  - 아이디     userId VARCHAR(16) NOT NULL PK  
  - 비밀번호        userPw VARCHAR(16) NOT NULL    
  - 이름          userName VARCHAR(30) NOT NULL      
  - 휴대폰     userHp VARCHAR(13) NOT NULL    
  - 이메일     userEmail VARCHAR(250) NULL    
  - 주소          userAddr VARCHAR(250) NOT NULL  
  - 가입일     userGaib TIMESTAMP DEFAULT CURRENT_STAMP NOT NULL  

 

1. index.html
    => 회원가입폼 UIUX 디자인 입력상자 전송버튼
    => 톰켓[WAS] 서버 실행
    => 회원가입폼 띄우기
    => http://localhost:8080/shop/index.html
    => localhost:8080/shop/index.html
    => localhost:8080/shop/
    => localhost:8080/shop
2. DTO => JAVA => shop.signupDto.java=> 입출력 설계 => getter() ,setter()

3. DB 설계 = > 데이터베이스 생성 : shop => 테이블 생성 : signup_table

```SQL
CREATE TABLE  `signup_table` (
    `userId` VARCHAR(16) NOT NULL COMMENT '아이디',
    `userPw` VARCHAR(16) NOT NULL COMMENT '비밀번호',  
    `userName` VARCHAR(30) NOT NULL COMMENT '이름',  
    `userHp` VARCHAR(13) NOT NULL COMMENT '휴대폰',    
    `userEmail` VARCHAR(250) NULL COMMENT '이메일',    
    `userAddr` VARCHAR(250) NOT NULL COMMENT '주소',
    `userGaib` TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL COMMENT '가입일',
    PRIMARY KEY(`userId`)
) ENGINE= `MyISAM` CHARSET=`UTF8MB4`;
+-----------+--------------+------+-----+---------------------+-------+
| Field     | Type         | Null | Key | Default             | Extra |
+-----------+--------------+------+-----+---------------------+-------+
| userId    | varchar(16)  | NO   | PRI | NULL                |       |
| userPw    | varchar(16)  | NO   |     | NULL                |       |
| userName  | varchar(30)  | NO   |     | NULL                |       |
| userHp    | varchar(13)  | NO   |     | NULL                |       |
| userEmail | varchar(250) | YES  |     | NULL                |       |
| userAddr  | varchar(250) | NO   |     | NULL                |       |
| userGaib  | timestamp    | NO   |     | current_timestamp() |       |
+-----------+--------------+------+-----+---------------------+-------+


```
4. JSP => 파일명: signup_action.jsp => (JAVA영역내) => JDBC 환경설정 => 자바 + DB
  - 인코딩 => utf8 <% request.setCharacterEncoding("utf-8"); %>
  - DTO 자바빈즈를 사용하기
  <jsp:useBean id="signupDto[인스턴스명; 객체명]" class="shop.SignupDto[DTO경로]" scope="page" />
  * 클래스 가져와서  signupDto 인스턴스(객체) 생성한 것.
  <jsp:setProperty property="클래스의 사용할 변수명" name="객체이름" />
  * 클래스 내부에 있는 변수들의 속성을 만들어라 .  
  - 입력데이터 확인 => 콘솔창으로
  * 요기서 오류 !!
  => MariaDB JDBC 드라이버 추가
  => [webapp] =>[WEB-INF] => 붙여넣기 => 마우스 우측 클릭 => Build Path => Add...
  => [lib] => mariadb-java-client-2.4.0.jar
  - JDBC 설정
  => 예외처리 =>Class.forName("org.mariadb.jdbc.Driver"); => 콘솔창으로 드라이버 접속 성공여부 확인
  - 데이터베이스 컨넥션(CONNECTION) 접속
  DriverManager.getConnection("jdbc:mariadb://localhost:[포트번호; 나중에는 본인의 주소가 들어감 카페24 등등]/shop", "[기본이 root]", "[비밀번호]");
```jsp
  try{
        // JDBC 드라이버 설정
        Class.forName("org.mariadb.jdbc.Driver");
        System.out.println("mariadb jdbc Driver 마리아디비 드라이버 설정 성공!");
       
       
    }
    catch(Exception e){
        System.out.println("mariadb jdbc Driver 마리아디비 드라이버 설정 실패!");
        System.out.println("에러 메세지 :" + e.getMessage());
    }
   

    try{
        // DB 데이터베이스 CONNECTION 컨넥션
        // 컨넥션은 변수가 필요하다.
        // 변수 생성 잠시 멈춤
       
        System.out.println("mariadb jdbc getConnection 마리아디비 컨넥션 설정 성공!");
    }
    catch(Exception e){
        System.out.println("mariadb jdbc getConnection 마리아디비 컨넥션 설정 실패!");
        System.out.println("에러 메세지 :" + e.getMessage());
    }
```

====================5~8번 단계를 통해 CRUD구현 이루어진다.=====================================
5. 입력폼 입력 => DTO 전달 (입력) => DB에 저장 =>  CREATE[C]구현



6. 회원 정보 목록 조회 SELECT=> DB 데이터 가져오기 => JSON 데이터로 변경 => 목록 출력 Read[R](Select)

7. 회원 정보 수정 UPDATE[U]

8. 회원 정보 삭제 DELETE[D]

=========================================================================================
SQL => INSERT INTO 테이블이름(필드1,필드2,필드....필드 n) VALUES (?,?,?,...?);
? => ?에 합당하는 값을 가져오는 역할 ps.세터함수();

 

package shop;

public class SignupDTO {
	  private String userId;
	  private String userPw;
	  private String userName;
	  private String userHp;	 	
	  private String userEmail;
	  private String userAddr;
	public String getUserId() {
		return userId;
	}
	public String getUserPw() {
		return userPw;
	}
	public String getUserName() {
		return userName;
	}
	public String getUserHp() {
		return userHp;
	}
	public String getUserEmail() {
		return userEmail;
	}
	public String getUserAddr() {
		return userAddr;
	}
	public void setUserId(String userId) {
		this.userId = userId;
	}
	public void setUserPw(String userPw) {
		this.userPw = userPw;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public void setUserHp(String userHp) {
		this.userHp = userHp;
	}
	public void setUserEmail(String userEmail) {
		this.userEmail = userEmail;
	}
	public void setUserAddr(String userAddr) {
		this.userAddr = userAddr;
	}
	  
	  
}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>쇼핑몰 회원가입폼</title>
	

</head>
<body>
<div id='wrap'>
	<!-- 전송방식은 post, 액션은 어디로 보낼래? 액션.jsp 경로 -->
	<form name='signup' method='post' action='http://localhost:8080/shop/signup_action.jsp'>
		<ul>
			<li>
				<input type='text' name='userId' id='userId' placeholder='아이디를 입력하세요.' />
			</li>
			<li>
				<input type='password' name='userPw' id='userPw' placeholder='비밀번호 입력하세요.' />
			</li>
			<li>
				<input type='text' name='userName' id='userName' placeholder='이름 입력하세요.' />
			</li>
			<li>
				<input type='text' name='userHp' id='userHp' placeholder='휴대폰 입력하세요.' />
			</li>
			<li>
				<input type='text' name='userEmail' id='userEmail' placeholder='이메일 입력하세요.' />
			</li>
			<li>
				<input type='text' name='userAddr' id='userAddr' placeholder='주소 입력하세요.' />
			</li>
			
		</ul>
		<div>
			<!-- 버튼 타입이 submit 이기 때문에 버튼을 누르면 액션으로 전송된다. -->
			<button type='submit' class='submit-btn'>회원가입</button>
		</div>
	</form>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
    
<% 	
	request.setCharacterEncoding("UTF-8"); 
%>


<jsp:useBean id="signupDto" class="shop.SignupDTO" scope="page" /> 
<jsp:setProperty property="userId" name="signupDto" />
<jsp:setProperty property="userPw" name="signupDto" />
<jsp:setProperty property="userName" name="signupDto" />
<jsp:setProperty property="userHp" name="signupDto" />
<jsp:setProperty property="userEmail" name="signupDto" />
<jsp:setProperty property="userAddr" name="signupDto" />


<%
	// import="java.sql.*"
	// 컨넥션 변수 conn, ps, rs(result set), SQL   => 변수 4개 설정 필요하다.
	Connection conn = null; // 컨넥션 => 인가받은 접속 정보
	PreparedStatement ps = null; // 프리페어드스테이트먼트 =>PrepareStatement(sql) 실행 결과 변수 => 매개변수 value => ? : ps 
	ResultSet rs = null;  // 리절트셋 => 쿼리를 실행 executeQuery() 익스큐트 쿼리 실행 결과 변수 테이블 데이터 가져오기 => 사용
	String sql = null;  // sql 문자열 변수
	
	
	try{
		Class.forName("org.mariadb.jdbc.Driver");
		conn = DriverManager.getConnection("jdbc:mariadb://localhost:3307/shop", "root", "1234");
	}
	catch(Exception e){
		System.out.println("에러 메세지 :" + e.getMessage());
	}
	
	// 5단계 - 입력상자 값 signupDto=> DB에 저장하기
	sql = "INSERT INTO signup_table (userId,userPw,userName,userHp,userEmail,userAddr) VALUES (?,?,?,?,?,?)";
	try{
		ps = conn.prepareStatement(sql);
		ps.setString(1, signupDto.getUserId());
		ps.setString(2, signupDto.getUserPw());
		ps.setString(3, signupDto.getUserName());
		ps.setString(4, signupDto.getUserHp());
		ps.setString(5, signupDto.getUserEmail());
		ps.setString(6, signupDto.getUserAddr());
		ps.executeUpdate();
		
		System.out.println("5단계 폼데이터 DTO데이터 DB에 저장 완료.");
	}
	catch(Exception e){
		System.out.println("5단계 폼데이터 DTO데이터 DB에 저장 실패.");
		e.getMessage();
		e.printStackTrace(); // 오류 전체
	}
	

%>
728x90
반응형

관련글 더보기