고정 헤더 영역
상세 컨텐츠
본문
728x90
호텔 객실 예약 관리
1. 객실타입관리
<예상도>
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호텔 객실 예약 관리 - 객실타입관리</title>
</head>
<style>
#add{
border-radius: 4px;
}
#delet{
border-radius: 4px;
}
#empty{
border-radius: 4px;
}
.button{
border: 2px solid brown;
background-color: beige;
color: brown;
padding: 5px;
}
.button:hover{
color: white;
background-color: brown;
}
</style>
<body>
<table style="width: 700px; border-collapse: collapse;">
<tr style="background-color:burlywood;">
<td style="width: 30%;">객실타입관리 <a href="room.html">객실관리</a> <a href="book.html">예약관리</a></td>
<td style="width: 40%; text-align: left; color:white;" ><h1> 호텔 객실 예약관리</h1></td>
</tr>
<tr style="background-color: beige;">
<td valign="top" >
<table valign="top" align=right style="border: 1px solid black;">
<tr>
<td colspan="2">
<select size="15" style="width: 200px;">
<option value="Suite Room">Suite Room</option>
<option value="Family Room">Family Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
</select>
</td>
</tr>
</table>
</td>
<td align="left">
<table valign="right" >
<tr>
<td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 120px"></td>
</tr>
<tr>
<td>객실타입명</td><td><input type=name id=qty name=name style="width: 120px"></td>
</tr>
<table>
<tr>
<td align="center">
<button class="button" id=add>추가</button>
<button class="button" id=delet>삭제</button>
<button class="button" id=empty>비우기</button></td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</body>
</html><결과>
2.객실관리
<예상도>
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호텔 객실 예약 관리 - 객실관리</title>
</head>
<style>
#add{
border-radius: 4px;
}
#delet{
border-radius: 4px;
}
#empty{
border-radius: 4px;
}
.button{
border: 2px solid lightskyblue;
background-color: lightcyan;
color: rgb(102, 187, 221);
padding: 5px;
}
.button:hover{
color: white;
background-color: rgb(65, 171, 179);
}
</style>
<body>
<table style="width: 700px; border-collapse: collapse;">
<tr style="background-color: rgb(129, 206, 230);" >
<td style="width: 30%;"><a href="type.html">객실타입관리</a> 객실관리 <a href="book.html">예약관리</a></td>
<td style="width: 40%; text-align: left; color: aliceblue;" ><h1> 호텔 객실 예약관리</h1></td>
</tr>
<tr style="background-color:lightcyan;">
<td valign="top">
<table valign="top" style="border: 1px solid black;" align=right >
<tr>
<td colspan="2">
<select size="15" style="width=400px">
<option value="Beakdou">백두산 Suite Room 120k</option>
<option value="Hanla">한라산 Family Room 100k</option>
<option value="Gangduck">광덕산 Deluxe Room 100k</option>
<option value="Teajo">태조산 Single Room 80k</option>
</select>
</td>
</tr>
</table>
</td>
<td align="left">
<table valign="right">
<tr>
<td>객실번호</td><td><input type=number id=qty name=qty style="width: 120px"></td>
</tr>
<tr>
<td>객실명</td><td><input type="text" id=name name=name style="width: 120px"></td>
</tr>
<tr>
<td>객실타입</td>
<td><select name="type">
<option value="">객실타입을 선택</option>
<option value="Suite Room">Suite Room</option>
<option value="Family Room">Family Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
</select></td>
</tr>
<tr>
<td>숙박가능인원</td><td><input type=number id=people name=people style="width: 120px">명</td>
</tr>
<tr>
<td>1박요금</td><td><input type=number id=price name=price style="width: 120px">원</td>
</tr>
<tr>
<table>
<td>
<button class=button id=add>추가</button>
<button class=button id=delet>삭제</button>
<button class=button id=empty>비우기</button></td>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html><결과>
3.예약관리
<예상도>
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호텔 객실 예약 관리 - 예약관리</title>
</head>
<style>
#complete{
border-radius: 4px;
}
#cancle{
border-radius: 4px;
}
#empty{
border-radius: 4px;
}
.button{
border: 2px solid lightskyblue;
background-color: lightcyan;
color: rgb(102, 187, 221);
padding: 5px;
}
.button:hover{
color: white;
background-color: rgb(65, 171, 179);
}
</style>
<body>
<table style="width: 800px; border-collapse: collapse;">
<tr style="background-color: rgb(129, 206, 230);" >
<td style="width: 30%;"><a href="type.html">객실타입관리</a> <a href="room.html">객실관리</a> 예약관리</a></td>
<td style="width: 40%; text-align: center; color: aliceblue;" ><h1> 호텔 객실 예약관리</h1></td>
<td style="width: 30;"></td>
</tr>
<tr style="background-color:lightcyan;">
<td align="left">
<table valign="top" align=right style="width: 300px;">
<tr valign="top">
<td>체크인</td><td><input type=date id=checkin name=checkin style="width: 100px">~</td>
</tr>
<tr>
<td>체크아웃</td><td><input type=date id=checkout name=checkout style="width: 100px"></td>
</tr>
<tr>
<td>객실타입</td>
<td><select name="type">
<option value="">객실타입을 선택하시오</option>
<option value="Suite Room">Suite Room</option>
<option value="Family Room">Family Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
</select></td>
</tr>
<tr>
<td colspan="2"><button id=find>찾기</button></td>
</tr>
<tr>
<td colspan="2">
<select size="15" style="width=400px;">
<option>예약가능한 객실목록</option>
</select>
</td>
</tr>
</table>
</td>
<td align="left">
<table style="width: 330px;">
<tr>
<td>체크인</td><td><input type=date id=checkin name=checkin style="width: 100px">~</td>
</tr>
<tr>
<td>체크아웃</td><td><input type=date id=checkout name=checkout style="width: 100px"></td>
</tr>
<tr>
<td>객실번호</td><td><input type=number id=qty name=qty style="width: 60px"></td>
</tr>
<tr>
<td>객실명</td><td><input type="text" id="name" name="name" style="width: 100;"></td>
</tr>
<tr>
<td>객실타입</td>
<td><select name="type">
<option value="">객실타입을 선택하시오</option>
<option value="Suite Room">Suite Room</option>
<option value="Family Room">Family Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Single Room">Single Room</option>
<option value="Double Room">Double Room</option>
</select></td>
</tr>
<tr >
<td>숙박인원</td><td><input type=number id=checkin name=checkin style="width: 120px"></td>
</tr>
<tr>
<td>대표자명</td><td><input type=number id=checkout name=checkout style="width: 60px"></td>
</tr>
<tr>
<td>연락처</td><td><input type=name id=qty name=name style="width: 120px"></td>
</tr>
<tr>
<td>총숙박요금</td><td><input type="number" id="total" name="total" style="width: 120px;"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class=button id=complete>완료</button>
<button class=button id=cancle>취소</button>
<button class=button id=empty>비우기</button></td>
</tr>
</table>
</td>
<td>
<table>
<tr >
<td>예약된 객실목록</td>
</tr>
</table>
<table>
<tr>
<select size="20" style="width: 250px;">
</select>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html><결과>
728x90
'HTML' 카테고리의 다른 글
| 2023.01.13 (0) | 2023.01.13 |
|---|---|
| 2023.01.12 (0) | 2023.01.12 |
| 2023.01.11 (0) | 2023.01.11 |
