{PHP} 예약 프로그램 만들기 - 개발 ( 예약하기, 전시 정보)
목차
- reservation DB
- 예약하기
- HTML- php
- CSS
- php
- 전시 정보
- HTML
- CSS
Rreservation DB
member db를 만든 것과 동일하게 bitnami wamp에 reservation db를 만들면 된다.
예약하기
html
reser.php
<?php
include('./db_conn.php');
// Check if "userid" key exists in the $_COOKIE array
$user_id = isset($_COOKIE["userid"]) ? $_COOKIE["userid"] : null;
// Redirect to login page if $user_id is not set
if (!$user_id) {
echo '<script>';
echo 'alert("로그인 후 예약이 가능합니다 !");';
echo 'window.location.href = "main.php";'; // JavaScript로 페이지 이동
echo '</script>';
exit(); // 중요: 여기서 스크립트 실행을 중지해야 합니다.
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="reservation.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Bodoni&family=Noto+Sans+KR:wght@100;300&display=swap"
rel="stylesheet">
</head>
<body>
<?php
include('./header.php');
?>
<div class="container">
<div class="login-form">
<form method="POST" action="reservation.php">
<!-- 날짜를 입력받는 input 태그 -->
<input type="date" name="testDate" class="text-field"><br>
<input type="number" name="person" placeholder="인원수" class="text-field" required><br>
<input type="submit" value="전송" class="submit-btn">
</form>
</div>
</div>
</body>
</html>예약하기 페이지는 로그인을 해야 들어 갈 수 있기 때문에
<?php
include('./db_conn.php');
// Check if "userid" key exists in the $_COOKIE array
$user_id = isset($_COOKIE["userid"]) ? $_COOKIE["userid"] : null;
// Redirect to login page if $user_id is not set
if (!$user_id) {
echo '<script>';
echo 'alert("로그인 후 예약이 가능합니다 !");';
echo 'window.location.href = "main.php";'; // JavaScript로 페이지 이동
echo '</script>';
exit(); // 중요: 여기서 스크립트 실행을 중지해야 합니다.
}
?>이런식으로 또 쿠키를 확인하고 쿠키가 없으면 alert를 출력후 main.php로 이동하게 만들었다.
캘린더를 만들어서 선택하는 방식으로 하려고했었는데 html에서 기본으로 제공하는 캘린더가 있다고 해서 ! 그것을 사용해주었다.
php
reservation.php
<?php
include('./db_conn.php');
// Check if "userid" key exists in the $_COOKIE array
$user_id = isset($_COOKIE["userid"]) ? $_COOKIE["userid"] : null;
// 예약 데이터를 전송하는 form이 POST 메소드로 전송될 때만 처리하도록 변경
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$date = mysqli_real_escape_string($conn, $_POST["testDate"]);
$person = mysqli_real_escape_string($conn, $_POST["person"]);
$query = "INSERT INTO reservation (users_id, reser_date, person) VALUES ('$user_id', '$date', '$person')";
if ($conn->query($query) === TRUE) {
echo '<script>';
echo 'alert("예약이 성공적으로 되었습니다!");';
echo 'window.location.href = "main.php";'; // JavaScript로 페이지 이동
echo '</script>';
exit(); // 중요: 여기서 스크립트 실행을 중지해야 합니다.
} else {
echo '<script>alert("예약실패!");</script>';
}
} else {
// POST 요청이 아닌 경우에 대한 처리 (선택사항)
echo '<script>alert("예약 데이터 전송해주세요");</script>';
}
$conn->close();
?>
css
login.css를 똑같이 사용해주었다.
전시 정보
html
menu.php
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="menu.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Bodoni&family=Noto+Sans+KR:wght@100;300&display=swap"
rel="stylesheet">
</head>
<body>
<?php
include('./header.php');
?>
<div>
</div>
<div class="container">
<img class="main_image" src="./image/1.jpg">
<span class="txt">
더현대 서울이 다가오는 크리스마스 시즌을 맞아 사운즈 포레스트에 ‘해리의 꿈의 상점(La boutique d’harry)’테마의 ‘H빌리지’를 선보입니다. 이번 H빌리지는 크리스마스 마을을
콘셉트로 대형 크리스마스 트리와 현대백화점 16개 전 점포를 상징하는 16개의 부티크(상점)&마르쉐(시장)등으로 구성됩니다. 아이곰 해리와 할아버지가 운영하는 해리 상점에서 펼쳐지는 크리스마스의
아름다운 이야기들. 크리스마스 이브 저녁, 할아버지의 꿈을 이뤄주기 위해 준비한 해리의 선물이 궁금하다면 La Boutique d' Harry에서 만나보세요!
</br></br></br>For the upcoming Christmas season, The Hyundai Seoul is introducing 'H Village' in Sounds
Forest, themed 'La boutique d'harry' (Harry's dream shop). The H Village features a large Christmas tree and
16 boutiques (shops) and marchés (markets) symbolizing all 16 Hyundai department stores, based on the
concept of a Christmas village. The beautiful story of Christmas unfolds in Harry the teddy bear and his
grandfather's shop. On Christmas Eve evening, find out what Harry has in store to make his grandfather's
dreams come true at La Boutique d'Harry!
</span>
</div>
<div class="map">
<h2 class="road">LOCATION</h2>
<p class="road">오시는 길</p>
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1700788023509" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script"
src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp": "1700788023509",
"key": "2gxys",
"mapWidth": "550",
"mapHeight": "200"
}).render();
function toggleImages() {
var images = document.querySelectorAll('.notice_img');
for (var i = 0; i < images.length; i++) {
// 이미지의 현재 상태를 확인하고 반대로 토글합니다.
images[i].style.display = (images[i].style.display === 'none') ? 'block' : 'none';
}
}
</script>
</div>
</html>별 내용은 없고 그냥 사진 그리고 전시 정보 , 지도를 불러왔다.
카카오맵을 html에 가져오는 방법은 간단하다.
아래 링크를 보고 따라하면 된다.
https://bos.kr/kwa-manual_v-1668?pc=p
css
menu.css
.container {
margin: 60px;
display: flex;
}
.main_image {
width: 340px;
border-radius:3%;
}
.txt {
padding-left: 30px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 22px;
margin-top: 20px;
flex-grow: 1; /* Allow the text to take remaining width */
}
.map{
margin :60px;
}
.road{
margin-bottom: 20px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 22px;
}
css는 이런식으로 하였다.
