이벤트 참여 페이지 만들기
이벤트 참여 회원 데이터를 DB에 저장
정규식 맛보기
event_info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2025년 SUMMER!! SUPER EVENT!!</title>
<style>
.memo{
resize:none;
}
</style>
</head>
<body>
<form id="f" method="post" action="./event_infook.do">
<p>[이벤트 참여!!]</p>
<!-- 각 태그의 name은 데이터베이스의 컬럼명 -->
고객명 : <input type="text" name="ename"><br>
<!-- placeholder : input 안 회색 설명 -->
연락처 : <input type="text" name="etel" maxlength="11" placeholder="-는 미입력"><br>
이메일 : <input type="text" name="email"><br>
<!-- memoclass : textarea resize:none;으로 사이즈조절 막기 -->
이벤트 참여 이유 : <textarea cols="50" rows="3" name="ememo" class="memo"></textarea><br>
<input type="checkbox" name="info1" value="Y">개인 정보 활용<br>
<input type="checkbox" name="info2" value="Y">제 3자의 정보제공<br>
<input type="button" value="이벤트 참여" onclick="eventok()"><br>
</form>
<!-- DB와 별동대 / 정규식 코드 알려줌-->
<input type="button" value="정규식코드" onclick="wordck()"><br>
</body>
<script src="event_info.js?v=13"></script>
</html>
event_info.js
function wordck(){
//var w = "010123-45678";
//범위
//let ck = /[0-9]/; //0~9 하나라도 있으면 true
//let ck = /[a-zA-Z]/; //a~z, A~Z 하나라도 있으면 true
//console.log(ck.test(w));
//test() : true, false
//^는 not의 역할
//let ck = /^[0-9]/; //0~9 말고 하나라도 있으면 true
//let ck = /[0-9]/;
//console.log(w.match(ck));
//match() : 배열형태의 값 출력
//첫글자만 검토함
//let ck = /[0-9]/;
//let ck = /^[0-9]/;
//g : 그룹 => 전체를 확인
//let ck = /^[0-9]/g;
//010-1234-5678 => true, 01012345678 => false
//var w = "010-1234-5678";
//let ck = /^\d{2,3}-\d{3,4}-\d{4}$/;
//01012345678 => true, 010-1234-5678 => false
var w = "01012345678";
let ck = /^\d{2,3}\d{3,4}\d{4}$/;
//$ : 해당 패턴에 문자열을 대입하여 체크하는 방식
//d : 숫자
console.log(ck.test(w));
//match, test알아두기 근데 test만 알아도 웬만한건 다 하긴하는데 match도 알아두기
}
function eventok(){
if(f.ename.value==""){
alert("고객명을 입력하세요!");
}else if(f.etel.value==""){
alert("연락처를 입력하세요");
}else if(f.email.value==""){
alert("이메일을 입력하세요");
}else if(f.ememo.value==""){
alert("이벤트 참여 이유를 입력하세요");
}else if(f.info1.checked == false){
alert("개인정보활용에 동의하셔야 이벤트참여가 가능합니다");
}else if(f.info2.checked == false){
alert("제 3자의 정보제공에 동의하셔야 이벤트참여가 가능합니다");
}else{
let ck = /^\d{2,3}\d{3,4}\d{4}$/; //슷자 외에 다른 문자,길이 9~11이 아닐 경우 false
if(ck.test(f.etel.value)==false){
alert("연락처를 정상적으로 입력하세요");
}else{
f.submit();
}
}
}
dbconfig.java : 데이터베이스 환경설정 모델
package event;
import java.sql.Connection;
import java.sql.DriverManager;
//database 환경설정 및 셋팅값
public class dbconfig {
//Connection 임포트는 sql 인터페이스!
public static Connection info() throws Exception{
//String database = "com.mysql.jdbc.Driver"; //v5.1, v5.5
//mysql version에 연결 설정 파트
String database = "com.mysql.cj.jdbc.Driver"; //v5.7 ~
/*mysql 연결 경로
* db연결할때 쓴 경로
* 포트 바꿀때 같이 바꿔줘야함
* 남에거에 저장할땐 localhost 대신 남의 아이피 넣기
*/
String dburl = "jdbc:mysql://localhost:3306/mrp";
String user = "project"; //mysql 아이디
String passwd = "p402402"; //mysql 패스워드
Class.forName(database); //어떤 라이브러리를 이용하여 DB에 접속할 것인지를 정함
Connection con = DriverManager.getConnection(dburl,user,passwd); //mysql -u 아이디 -p 랑 같은 역할
return con;
}
}
event_infook.java (servlet)
package event;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class event_infook extends HttpServlet {
private static final long serialVersionUID = 1L;
Connection con = null;
PrintWriter pw = null;
Statement st = null;
dbconfig db = new dbconfig();
public event_infook() {
try {
/* 두줄을 아래 한줄로
dbconfig db = new dbconfig();
this.con = db.info();
*/
//this.con = new dbconfig().info();
//System.out.println("Database 연결 성공!");
}catch (Exception e) {
//System.out.println("Database 연결 실패!");
}
}
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
res.setContentType("text/html;charset=utf-8");
String ename = req.getParameter("ename");
String etel = req.getParameter("etel");
String email = req.getParameter("email");
String ememo = req.getParameter("ememo");
String info1 = req.getParameter("info1");
String info2 = req.getParameter("info2");
//SQL Query문 (DML) - select, insert, update, delete
String sql ="insert into event(eidx,ename,etel,email,info1,info2,ememo,ejoin)"
+ "values ('0','"+ename+"','"+etel+"','"+email+"','"+info1+"','"+info2+"','"+ememo+"',now())";
//String sql = "insert into event values(?,?,?,?,?)"; //실무에서 이런거
this.pw = res.getWriter();
try {
this.con = this.db.info();
//SQL 문법을 실행시키는 클래스(기초) //실무에선 다른거씀 저거쓰면 보안다뚫림 ㅎ;
this.st = this.con.createStatement();
int result = this.st.executeUpdate(sql); //executeUpdate : insert,update,delete일 때만 씀
//executeUpdate의 결과값은 0,1만 날아옴
if(result == 1) {
this.pw.write("<script>"
+ "alert('정상적으로 이벤트에 참여되었습니다.');"
+ "location.href='event_info.html';"
+ "</script>");
}else {
this.pw.write("<script>"
+ "alert('이미 이벤트에 등록되어있습니다.');"
+ "location.href='event_info.html';"
+ "</script>");
}
}catch (Exception e) {
System.out.println("SQL 문법 오류!");
System.out.println(e);
}finally { //정상적인 Database를 모두 핸들링 후 역순으로 close를 순차적으로 적용해야함
try {
this.pw.close();
this.st.close();
this.con.close(); //Database 연결 끊기
}catch (Exception e) {
System.out.println("데이터베이스가 올바르게 종료되지 않았습니다.");
}
}
}
}
MySQL과 이클립스를 연결시
SQL Results 윈도우에서 오른쪽 위 아이콘을 눌러 테이블을 생성할수있다
create table event(
eidx int not null auto_increment,
ename char(50) not null,
etel char(11) not null,
email varchar(50) not null,
info1 enum('Y','N') not null default 'N',
info2 enum('Y','N') not null default 'N',
ememo text not null,
ejoin timestamp not null default current_timestamp,
primary key(eidx),
unique (etel),
unique (email)
);
테이블을 작성해서 web_app > META-INF 에 저장하기!