정지윤 / project_opensource

Go to a project
Toggle navigation Toggle navigation pinning
정지윤
53d3e9e7 1 parent ccdc727c

예약 화면 추가

Inline Side-by-side
Showing 6 changed files with 289 additions and 29 deletions
......@@ -10,6 +10,11 @@ var router = express.Router();
// configuration ===============================================================
router.get('/jj',function(req,res){
res.render('jj',{title : "첫번째 화면~"});
})
router.get('/first',function(req,res){
res.render('first',{title : "첫번째 화면~"});
})
......
......@@ -105,13 +105,13 @@
<form method="POST" action="/res">
<!-- Form Name -->
<!-- 이름-->
<!-- Text input-->
<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">
<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>
......@@ -119,10 +119,11 @@
<!-- 휴대전화-->
<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>
<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>
......@@ -132,10 +133,11 @@
<!-- 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>
<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>
......@@ -143,10 +145,11 @@
<!--인원수-->
<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>
<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>
......@@ -161,12 +164,13 @@
<!--예약시간-->
<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>
<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 value=" " >시간</option>
<option>10시</option>
<option>11시</option>
<option>12시</option>
......@@ -179,9 +183,9 @@
<option>19시</option>
<option>20시</option>
</select>
&nbsp;
<select name="resmin" class="form-control selectpicker" >
<option value=" " >분을 선택하세요.</option>
<option value=" " >분</option>
<option>00분</option>
<option>15분</option>
<option>30분</option>
......@@ -193,15 +197,16 @@
<!--예약날짜-->
<div class="form-group">
<div class="col-md-4 selectContainer">
<div class="input-group">
<label class="col-md-4 control-label">예약 날짜</label>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p>
<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">
......@@ -223,11 +228,11 @@
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">요청사항</label>
<div class="col-md-4 inputGroupContainer">
<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:310px; height:100px;"></textarea>
<textarea class="form-control" name="content" placeholder="Project Description" style="width:3500px; height:100px;"></textarea>
</div>
</div>
</div>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>식당 예약</title>
<!-- 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">
<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 text-center">
<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>
<br>
<div class="form-group">
<div class="input-group">
<label class="col-md-4 control-label">요청사항</label>
<i class="glyphicon glyphicon-pencil"></i>
<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>
</head>
</html>
<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>
......@@ -34,16 +37,16 @@
<form method="POST" action="/res">
<!-- Form Name -->
<!-- 이름-->
<div class="form-group">
<label class="col-md-4 control-label" br>이름</label>
<!-- 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-user"></i></span>
<input name="creater_id" placeholder="이름" class="form-control" type="text">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="홍길동" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- 휴대전화-->
......@@ -152,10 +155,10 @@
<!-- 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>
<label class="col-md-4 control-label">요청사항</label>
<i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea>
</div>
</div>
......