정지윤 / project_opensource

Go to a project
Toggle navigation Toggle navigation pinning
정지윤
eced1253 1 parent 230a68ee

예약확인 시 자동 메일링 추가

Inline Side-by-side
Showing 5 changed files with 65 additions and 500 deletions
......@@ -14,7 +14,6 @@ var router = express.Router();
router.get('/jj',function(req,res){
res.render('jj',{title : "첫번째 화면~"});
})
router.get('/first',function(req,res){
res.render('first',{title : "첫번째 화면~"});
})
......@@ -27,22 +26,20 @@ router.get('/list', function(req, res){
res.render('list',{title :"게시판"});
});
router.get('/res', function(req, res){
res.render('reservation',{title :"예약"});
});
router.post('/res',function(req, res){
router.post('/jj',function(req, res){
var creater_id = req.body.creater_id;
var phone = req.body.phone;
var email = req.body.email;
var num = req.body.num;
var restime = req.body.restime;
var resmin = req.body.resmin;
var date = req.body.date;
var content = req.body.content;
pool.getConnection(function (err, connection)
{
// Use the connection
var sqlForInsertBoard = "insert into menu(creater_id, phone, email, num, restime, resmin, content) values('"+creater_id+"', '"+phone+"', '"+email+"','"+num+"','"+restime+"','"+resmin+"', '"+content+"')";
var sqlForInsertBoard = "insert into menu(creater_id, phone, email, num, restime, resmin,date, content) values('"+creater_id+"', '"+phone+"', '"+email+"','"+num+"','"+restime+"','"+resmin+"','"+date+"', '"+content+"')";
connection.query(sqlForInsertBoard, function (err, rows) {
if (err) console.error("err : " + err);
console.log("rows : " + JSON.stringify(rows));
......
......@@ -87,246 +87,6 @@
</div>
</section>
<style type="text/css">
.reservationTheme{
background:url('/img/a-bg.jpg') no-repeat;
}
</style>
<section id="about" class="reservationTheme content-section text-center">
<div class="container">
<br><br>
<h2>Reservation</h2>
<br><br>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<form method="POST" action="/res">
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="col-md-4 control-label">이름</label>
<i class="glyphicon glyphicon-envelope"></i>
<input name="creater_id" placeholder="홍길동" class="form-control" type="text">
</div>
</div>
</div>
<!-- 휴대전화-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="col-md-4 control-label">휴대전화</label>
<i class="glyphicon glyphicon-earphone"></i>
<input name="phone" placeholder="010-123-4567" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<label class="col-md-4 control-label">이메일주소</label>
<i class="glyphicon glyphicon-envelope"></i>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!--인원수-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">인원 수</label>
<i class="glyphicon glyphicon-list"></i>
<select name="num" class="form-control selectpicker" >
<option value=" " >인원 수를 선택하세요.</option>
<option>1~4명</option>
<option>5~10명</option>
<option >10명~15명</option>
<option >15명~20명</option>
<option >20명 이상</option>
</select>
</div>
</div>
</div>
<!--예약시간-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 시간</label>
<i class="glyphicon glyphicon-list"></i>
<select name="restime" class="form-control selectpicker" >
<option value=" " >시간</option>
<option>10시</option>
<option>11시</option>
<option>12시</option>
<option>13시</option>
<option>14시</option>
<option>15시</option>
<option>16시</option>
<option>17시</option>
<option>18시</option>
<option>19시</option>
<option>20시</option>
</select>
&nbsp;
<select name="resmin" class="form-control selectpicker" >
<option value=" " >분</option>
<option>00분</option>
<option>15분</option>
<option>30분</option>
<option>45분</option>
</select>
</div>
</div>
</div>
<!--예약날짜-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 날짜</label>
<input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</label>
</div>
<!-- radio checks
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
-->
<!-- Text area -->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 날짜</label>
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="content" placeholder="Project Description" style="width:3500px; height:100px;"></textarea>
</div>
</div>
</div>
<br>
<br>
<br>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message"> <i class="glyphicon glyphicon-thumbs-up"></i> 예약해주셔서 감사합니다.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >예약 <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</form>
</fieldset>
</form>
</div>
</div>
<script>
function onWriteSubmit()
{
if ( $("#creater_id").val().trim() == "" )
{
var message = "아이디를 입력해 주세요";
$("#creater_id").val("");
$("#creater_id").focus();
alert(message);
return false;
}
if ( $("#phone").val().trim() == "" )
{
var message = "폰번호를 입력해 주세요";
$("#phone").val("");
$("#phone").focus();
alert(message);
return false;
}
if ( $("#email").val().trim() == "" )
{
var message = "이메일 주소를 입력해 주세요";
$("#email").val("");
$("#email").focus();
alert(message);
return false;
}if ( $("#num").val().trim() == "" )
{
var message = "인원수를 입력해 주세요";
$("#num").val("");
$("#num").focus();
alert(message);
return false;
}if ( $("#restime").val().trim() == "" )
{
var message = "예약시간을 입력해 주세요";
$("#restime").val("");
$("#restime").focus();
alert(message);
return false;
}
if ( $("#resmin").val().trim() == "" )
{
var message = "예약 분을 입력해 주세요";
$("#resmin").val("");
$("#resmin").focus();
alert(message);
return false;
}
if ( $("#content").val().trim() == "" )
{
var message = "비고사항을 입력해 주세요";
$("#content").val("");
$("#content").focus();
alert(message);
return false;
}
}
</script>
<!-- Download Section -->
<section id="download" class="download-section content-section text-center">
......@@ -334,7 +94,7 @@
<div class="col-lg-8 mx-auto">
<h2>Reservation</h2>
<p>당일 예약은 전화예약만 가능합니다.</p>
<a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">예약하기</a>
<a href="/jj" class="btn btn-default btn-lg">예약하기</a>
</div>
</div>
</section>
......
......@@ -39,7 +39,7 @@
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<form method="POST" action="/res">
<form method="POST" action="/jj">
<!-- Form Name -->
<!-- Text input-->
......@@ -155,7 +155,7 @@
<label class="col-md-4 control-label"></label>
<i class="glyphicon glyphicon-list"></i>
<select name="num" class="form-control selectpicker" >
<select name="date" class="form-control selectpicker" >
<option><script language="JavaScript">
var today = new Date( )
......@@ -219,7 +219,7 @@
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >예약하기 <span class="glyphicon glyphicon-send "></span></button>
<button type="submit" class="btn btn-default btn-lg" >예약하기 <span class="glyphicon glyphicon-send "></span></button>
</div>
</div>
......@@ -228,7 +228,9 @@
</form>
</div>
</div>
</script>
<script type="text/javascript" src="/mail"></script>
<script>
function onWriteSubmit()
......@@ -280,6 +282,14 @@
alert(message);
return false;
}
if ( $("#date").val().trim() == "" )
{
var message = "예약 날짜를 입력해 주세요";
$("#date").val("");
$("#date").focus();
alert(message);
return false;
}
if ( $("#content").val().trim() == "" )
{
var message = "비고사항을 입력해 주세요";
......
<!DOCTYPE html>
<html lang="en">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<html>
<div class="container">
<head>
<title></title>
</head>
<body>
<h1>예약이 확인되었습니다!</h1>
<button onclick="goBack()" class="btn btn-primary" style='color: black; background-color:rgb( 200, 200, 200);'>뒤로가기</button>
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>식당 예약</title>
<style type="text/css">
.reservationTheme{
background:url('/img/res2.jpg') no-repeat;
}
</style>
<section id="about" class="reservationTheme content-section ">
<div class="container">
<br><br>
<h2>Thank you!</h2>
<h5>예약이 성공적으로 완료되었습니다</h5>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4 center">
<a href="/first" class="btn btn-default btn-lg">홈으로</a>
</div>
<script type="text/javascript" src="/mail"></script>
</body>
</div>
</head>
</html>
<!-- <form method="POST" action="/jj">
......
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://resources/demos/style.css">
<div class="container">
<br><br>
<label class="col-md-4 control-label"><legend>예약하기</legend></label>
<br><br>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<form method="POST" action="/res">
<!-- Form Name -->
<!-- 이름-->
<div class="form-group">
<label class="col-md-4 control-label" br>이름</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="creater_id" placeholder="이름" class="form-control" type="text">
</div>
</div>
</div>
<!-- 휴대전화-->
<div class="form-group">
<label class="col-md-4 control-label">휴대전화</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="010-123-4567" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">예약확인 받을 이메일 주소</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!--인원수-->
<div class="form-group">
<label class="col-md-4 control-label">인원 수</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="num" class="form-control selectpicker" >
<option value=" " >인원 수를 선택하세요.</option>
<option>1~4명</option>
<option>5~10명</option>
<option >10명~15명</option>
<option >15명~20명</option>
<option >20명 이상</option>
</select>
</div>
</div>
</div>
<!--예약시간-->
<div class="form-group">
<label class="col-md-4 control-label">예약 시간</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="restime" class="form-control selectpicker" >
<option value=" " >시간을 선택하세요.</option>
<option>10시</option>
<option>11시</option>
<option>12시</option>
<option>13시</option>
<option>14시</option>
<option>15시</option>
<option>16시</option>
<option>17시</option>
<option>18시</option>
<option>19시</option>
<option>20시</option>
</select>
<select name="resmin" class="form-control selectpicker" >
<option value=" " >분을 선택하세요.</option>
<option>00분</option>
<option>15분</option>
<option>30분</option>
<option>45분</option>
</select>
</div>
</div>
</div>
<!--예약날짜-->
<div class="form-group">
<label class="col-md-4 control-label">예약 날짜</label>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</label>
<br><br><br><br><br><br><br><br><br><br>
</div>
<!-- radio checks
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
-->
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">요청사항</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea>
</div>
</div>
</div>
<br>
<br>
<br>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message"> <i class="glyphicon glyphicon-thumbs-up"></i> 예약해주셔서 감사합니다.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >예약 <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</form>
</fieldset>
</form>
</div>
</div>
<script>
function onWriteSubmit()
{
if ( $("#creater_id").val().trim() == "" )
{
var message = "아이디를 입력해 주세요";
$("#creater_id").val("");
$("#creater_id").focus();
alert(message);
return false;
}
if ( $("#phone").val().trim() == "" )
{
var message = "폰번호를 입력해 주세요";
$("#phone").val("");
$("#phone").focus();
alert(message);
return false;
}
if ( $("#email").val().trim() == "" )
{
var message = "이메일 주소를 입력해 주세요";
$("#email").val("");
$("#email").focus();
alert(message);
return false;
}if ( $("#num").val().trim() == "" )
{
var message = "인원수를 입력해 주세요";
$("#num").val("");
$("#num").focus();
alert(message);
return false;
}if ( $("#restime").val().trim() == "" )
{
var message = "예약시간을 입력해 주세요";
$("#restime").val("");
$("#restime").focus();
alert(message);
return false;
}
if ( $("#resmin").val().trim() == "" )
{
var message = "예약 분을 입력해 주세요";
$("#resmin").val("");
$("#resmin").focus();
alert(message);
return false;
}
if ( $("#content").val().trim() == "" )
{
var message = "비고사항을 입력해 주세요";
$("#content").val("");
$("#content").focus();
alert(message);
return false;
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>