정지윤 / 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(); ...@@ -10,6 +10,11 @@ var router = express.Router();
10 10
11 // configuration =============================================================== 11 // configuration ===============================================================
12 12
13 +
14 +router.get('/jj',function(req,res){
15 + res.render('jj',{title : "첫번째 화면~"});
16 +})
17 +
13 router.get('/first',function(req,res){ 18 router.get('/first',function(req,res){
14 res.render('first',{title : "첫번째 화면~"}); 19 res.render('first',{title : "첫번째 화면~"});
15 }) 20 })
......
...@@ -105,13 +105,13 @@ ...@@ -105,13 +105,13 @@
105 <form method="POST" action="/res"> 105 <form method="POST" action="/res">
106 <!-- Form Name --> 106 <!-- Form Name -->
107 107
108 - <!-- 이름--> 108 + <!-- Text input-->
109 <div class="form-group"> 109 <div class="form-group">
110 - <label class="col-md-4 control-label" br>이름</label>
111 <div class="col-md-4 inputGroupContainer"> 110 <div class="col-md-4 inputGroupContainer">
112 <div class="input-group"> 111 <div class="input-group">
113 - <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 112 + <label class="col-md-4 control-label">이름</label>
114 - <input name="creater_id" placeholder="이름" class="form-control" type="text"> 113 + <i class="glyphicon glyphicon-envelope"></i>
114 + <input name="creater_id" placeholder="홍길동" class="form-control" type="text">
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
...@@ -119,10 +119,11 @@ ...@@ -119,10 +119,11 @@
119 119
120 <!-- 휴대전화--> 120 <!-- 휴대전화-->
121 <div class="form-group"> 121 <div class="form-group">
122 - <label class="col-md-4 control-label">휴대전화</label>
123 <div class="col-md-4 inputGroupContainer"> 122 <div class="col-md-4 inputGroupContainer">
124 <div class="input-group"> 123 <div class="input-group">
125 - <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> 124 + <label class="col-md-4 control-label">휴대전화</label>
125 +
126 + <i class="glyphicon glyphicon-earphone"></i>
126 <input name="phone" placeholder="010-123-4567" class="form-control" type="text"> 127 <input name="phone" placeholder="010-123-4567" class="form-control" type="text">
127 </div> 128 </div>
128 </div> 129 </div>
...@@ -132,10 +133,11 @@ ...@@ -132,10 +133,11 @@
132 133
133 <!-- Text input--> 134 <!-- Text input-->
134 <div class="form-group"> 135 <div class="form-group">
135 - <label class="col-md-4 control-label">예약확인 받을 이메일 주소</label>
136 <div class="col-md-4 inputGroupContainer"> 136 <div class="col-md-4 inputGroupContainer">
137 <div class="input-group"> 137 <div class="input-group">
138 - <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 138 + <label class="col-md-4 control-label">이메일주소</label>
139 +
140 + <i class="glyphicon glyphicon-envelope"></i>
139 <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> 141 <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
140 </div> 142 </div>
141 </div> 143 </div>
...@@ -143,10 +145,11 @@ ...@@ -143,10 +145,11 @@
143 145
144 <!--인원수--> 146 <!--인원수-->
145 <div class="form-group"> 147 <div class="form-group">
146 - <label class="col-md-4 control-label">인원 수</label>
147 <div class="col-md-4 selectContainer"> 148 <div class="col-md-4 selectContainer">
148 <div class="input-group"> 149 <div class="input-group">
149 - <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> 150 + <label class="col-md-4 control-label">인원 수</label>
151 +
152 + <i class="glyphicon glyphicon-list"></i>
150 <select name="num" class="form-control selectpicker" > 153 <select name="num" class="form-control selectpicker" >
151 <option value=" " >인원 수를 선택하세요.</option> 154 <option value=" " >인원 수를 선택하세요.</option>
152 <option>1~4명</option> 155 <option>1~4명</option>
...@@ -161,12 +164,13 @@ ...@@ -161,12 +164,13 @@
161 164
162 <!--예약시간--> 165 <!--예약시간-->
163 <div class="form-group"> 166 <div class="form-group">
164 - <label class="col-md-4 control-label">예약 시간</label>
165 <div class="col-md-4 selectContainer"> 167 <div class="col-md-4 selectContainer">
166 <div class="input-group"> 168 <div class="input-group">
167 - <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> 169 + <label class="col-md-4 control-label">예약 시간</label>
170 +
171 + <i class="glyphicon glyphicon-list"></i>
168 <select name="restime" class="form-control selectpicker" > 172 <select name="restime" class="form-control selectpicker" >
169 - <option value=" " >시간을 선택하세요.</option> 173 + <option value=" " >시간</option>
170 <option>10시</option> 174 <option>10시</option>
171 <option>11시</option> 175 <option>11시</option>
172 <option>12시</option> 176 <option>12시</option>
...@@ -179,9 +183,9 @@ ...@@ -179,9 +183,9 @@
179 <option>19시</option> 183 <option>19시</option>
180 <option>20시</option> 184 <option>20시</option>
181 </select> 185 </select>
182 - 186 + &nbsp;
183 <select name="resmin" class="form-control selectpicker" > 187 <select name="resmin" class="form-control selectpicker" >
184 - <option value=" " >분을 선택하세요.</option> 188 + <option value=" " >분</option>
185 <option>00분</option> 189 <option>00분</option>
186 <option>15분</option> 190 <option>15분</option>
187 <option>30분</option> 191 <option>30분</option>
...@@ -193,15 +197,16 @@ ...@@ -193,15 +197,16 @@
193 197
194 <!--예약날짜--> 198 <!--예약날짜-->
195 <div class="form-group"> 199 <div class="form-group">
200 + <div class="col-md-4 selectContainer">
201 + <div class="input-group">
196 <label class="col-md-4 control-label">예약 날짜</label> 202 <label class="col-md-4 control-label">예약 날짜</label>
197 - &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p> 203 + <input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p>
198 <script> 204 <script>
199 $( function() { 205 $( function() {
200 $( "#datepicker" ).datepicker(); 206 $( "#datepicker" ).datepicker();
201 } ); 207 } );
202 </script> 208 </script>
203 </label> 209 </label>
204 - <br><br><br><br><br><br><br><br><br><br>
205 </div> 210 </div>
206 <!-- radio checks 211 <!-- radio checks
207 <div class="form-group"> 212 <div class="form-group">
...@@ -223,11 +228,11 @@ ...@@ -223,11 +228,11 @@
223 <!-- Text area --> 228 <!-- Text area -->
224 229
225 <div class="form-group"> 230 <div class="form-group">
226 - <label class="col-md-4 control-label">요청사항</label> 231 + <div class="col-md-4 selectContainer">
227 - <div class="col-md-4 inputGroupContainer">
228 <div class="input-group"> 232 <div class="input-group">
233 + <label class="col-md-4 control-label">예약 날짜</label>
229 <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 234 <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
230 - <textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea> 235 + <textarea class="form-control" name="content" placeholder="Project Description" style="width:3500px; height:100px;"></textarea>
231 </div> 236 </div>
232 </div> 237 </div>
233 </div> 238 </div>
......
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +
4 + <head>
5 + <meta charset="utf-8">
6 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 + <meta name="description" content="">
8 + <meta name="author" content="">
9 +
10 + <title>식당 예약</title>
11 +
12 + <!-- Bootstrap core CSS -->
13 + <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
14 +
15 + <!-- Custom fonts for this template -->
16 + <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
17 + <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
18 + <link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
19 +
20 + <!-- Custom styles for this template -->
21 + <link href="css/grayscale.min.css" rel="stylesheet">
22 +
23 +
24 +
25 + <style type="text/css">
26 + .reservationTheme{
27 + background:url('/img/a-bg.jpg') no-repeat;
28 + }
29 + </style>
30 +
31 +
32 + <section id="about" class="reservationTheme content-section text-center">
33 + <div class="container">
34 + <br><br>
35 + <h2>Reservation</h2>
36 + <br><br>
37 + <form class="well form-horizontal" action=" " method="post" id="contact_form">
38 + <fieldset>
39 +
40 + <form method="POST" action="/res">
41 + <!-- Form Name -->
42 +
43 + <!-- Text input-->
44 +
45 + <div class="form-group text-center">
46 + <div class="col-md-4 inputGroupContainer ">
47 + <div class="input-group">
48 + <label class="col-md-4 control-label ">이름</label>
49 + <i class="glyphicon glyphicon-envelope"></i>
50 + <input name="creater_id" placeholder="홍길동" class="form-control" type="text">
51 + </div>
52 + </div>
53 + </div>
54 +
55 +
56 + <!-- 휴대전화-->
57 + <div class="form-group">
58 + <div class="col-md-4 inputGroupContainer">
59 + <div class="input-group">
60 + <label class="col-md-4 control-label">휴대전화</label>
61 +
62 + <i class="glyphicon glyphicon-earphone"></i>
63 + <input name="phone" placeholder="010-123-4567" class="form-control" type="text">
64 + </div>
65 + </div>
66 + </div>
67 +
68 +
69 +
70 + <!-- Text input-->
71 + <div class="form-group">
72 + <div class="col-md-4 inputGroupContainer">
73 + <div class="input-group">
74 + <label class="col-md-4 control-label">이메일주소</label>
75 +
76 + <i class="glyphicon glyphicon-envelope"></i>
77 + <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
78 + </div>
79 + </div>
80 + </div>
81 +
82 + <!--인원수-->
83 + <div class="form-group">
84 + <div class="col-md-4 selectContainer">
85 + <div class="input-group">
86 + <label class="col-md-4 control-label">인원 수</label>
87 +
88 + <i class="glyphicon glyphicon-list"></i>
89 + <select name="num" class="form-control selectpicker" >
90 + <option value=" " >인원 수를 선택하세요.</option>
91 + <option>1~4명</option>
92 + <option>5~10명</option>
93 + <option >10명~15명</option>
94 + <option >15명~20명</option>
95 + <option >20명 이상</option>
96 + </select>
97 + </div>
98 + </div>
99 + </div>
100 +
101 + <!--예약시간-->
102 + <div class="form-group">
103 + <div class="col-md-4 selectContainer">
104 + <div class="input-group">
105 + <label class="col-md-4 control-label">예약 시간</label>
106 +
107 + <i class="glyphicon glyphicon-list"></i>
108 + <select name="restime" class="form-control selectpicker" >
109 + <option value=" " >시간</option>
110 + <option>10시</option>
111 + <option>11시</option>
112 + <option>12시</option>
113 + <option>13시</option>
114 + <option>14시</option>
115 + <option>15시</option>
116 + <option>16시</option>
117 + <option>17시</option>
118 + <option>18시</option>
119 + <option>19시</option>
120 + <option>20시</option>
121 + </select>
122 + &nbsp;
123 + <select name="resmin" class="form-control selectpicker" >
124 + <option value=" " >분</option>
125 + <option>00분</option>
126 + <option>15분</option>
127 + <option>30분</option>
128 + <option>45분</option>
129 + </select>
130 + </div>
131 + </div>
132 + </div>
133 +
134 + <!--예약날짜-->
135 + <div class="form-group">
136 + <div class="col-md-4 selectContainer">
137 + <div class="input-group">
138 + <label class="col-md-4 control-label">예약 날짜</label>
139 + <input type="text" placeholder = "클릭하여 달력 보기" id="datepicker"></p></p>
140 + <script>
141 + $( function() {
142 + $( "#datepicker" ).datepicker();
143 + } );
144 + </script>
145 + </label>
146 + </div>
147 +<br>
148 + <div class="form-group">
149 + <div class="input-group">
150 + <label class="col-md-4 control-label">요청사항</label>
151 + <i class="glyphicon glyphicon-pencil"></i>
152 + <textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea>
153 + </div>
154 + </div>
155 + </div>
156 +
157 +
158 + <br>
159 + <br>
160 + <br>
161 + <!-- Success message -->
162 + <div class="alert alert-success" role="alert" id="success_message"> <i class="glyphicon glyphicon-thumbs-up"></i> 예약해주셔서 감사합니다.</div>
163 +
164 + <!-- Button -->
165 + <div class="form-group">
166 + <label class="col-md-4 control-label"></label>
167 + <div class="col-md-4">
168 + <button type="submit" class="btn btn-warning" >예약 <span class="glyphicon glyphicon-send"></span></button>
169 + </div>
170 +
171 + </div>
172 + </form>
173 + </fieldset>
174 + </form>
175 + </div>
176 + </div>
177 +
178 +
179 + <script>
180 + function onWriteSubmit()
181 + {
182 + if ( $("#creater_id").val().trim() == "" )
183 + {
184 + var message = "아이디를 입력해 주세요";
185 + $("#creater_id").val("");
186 + $("#creater_id").focus();
187 + alert(message);
188 + return false;
189 + }
190 +
191 + if ( $("#phone").val().trim() == "" )
192 + {
193 + var message = "폰번호를 입력해 주세요";
194 + $("#phone").val("");
195 + $("#phone").focus();
196 + alert(message);
197 + return false;
198 + }
199 + if ( $("#email").val().trim() == "" )
200 + {
201 + var message = "이메일 주소를 입력해 주세요";
202 + $("#email").val("");
203 + $("#email").focus();
204 + alert(message);
205 + return false;
206 + }if ( $("#num").val().trim() == "" )
207 + {
208 + var message = "인원수를 입력해 주세요";
209 + $("#num").val("");
210 + $("#num").focus();
211 + alert(message);
212 + return false;
213 + }if ( $("#restime").val().trim() == "" )
214 + {
215 + var message = "예약시간을 입력해 주세요";
216 + $("#restime").val("");
217 + $("#restime").focus();
218 + alert(message);
219 + return false;
220 + }
221 + if ( $("#resmin").val().trim() == "" )
222 + {
223 + var message = "예약 분을 입력해 주세요";
224 + $("#resmin").val("");
225 + $("#resmin").focus();
226 + alert(message);
227 + return false;
228 + }
229 + if ( $("#content").val().trim() == "" )
230 + {
231 + var message = "비고사항을 입력해 주세요";
232 + $("#content").val("");
233 + $("#content").focus();
234 + alert(message);
235 + return false;
236 + }
237 +
238 +
239 + }
240 + </script>
241 +
242 +
243 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
244 + <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
245 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
246 + </head>
247 +</html>
1 - 1 +<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
2 +<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
3 +<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
4 +<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js" type="text/javascript"></script>
2 5
3 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 6 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
4 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 7 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
...@@ -34,16 +37,16 @@ ...@@ -34,16 +37,16 @@
34 <form method="POST" action="/res"> 37 <form method="POST" action="/res">
35 <!-- Form Name --> 38 <!-- Form Name -->
36 39
37 -<!-- 이름--> 40 + <!-- Text input-->
38 -<div class="form-group"> 41 + <div class="form-group">
39 - <label class="col-md-4 control-label" br>이름</label> 42 + <label class="col-md-4 control-label">이름</label>
40 <div class="col-md-4 inputGroupContainer"> 43 <div class="col-md-4 inputGroupContainer">
41 <div class="input-group"> 44 <div class="input-group">
42 - <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 45 + <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
43 - <input name="creater_id" placeholder="이름" class="form-control" type="text"> 46 + <input name="email" placeholder="홍길동" class="form-control" type="text">
47 + </div>
44 </div> 48 </div>
45 </div> 49 </div>
46 -</div>
47 50
48 51
49 <!-- 휴대전화--> 52 <!-- 휴대전화-->
...@@ -152,10 +155,10 @@ ...@@ -152,10 +155,10 @@
152 <!-- Text area --> 155 <!-- Text area -->
153 156
154 <div class="form-group"> 157 <div class="form-group">
155 - <label class="col-md-4 control-label">요청사항</label>
156 <div class="col-md-4 inputGroupContainer"> 158 <div class="col-md-4 inputGroupContainer">
157 <div class="input-group"> 159 <div class="input-group">
158 - <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 160 + <label class="col-md-4 control-label">요청사항</label>
161 +<i class="glyphicon glyphicon-pencil"></i></span>
159 <textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea> 162 <textarea class="form-control" name="content" placeholder="Project Description" style="width:310px; height:100px;"></textarea>
160 </div> 163 </div>
161 </div> 164 </div>
......