|
 |
| |
ยังแก้ไม่ได้เลยครับช่วยขยาย form ตรงส่วน table กับ ข้าง ขวา html หน่อยครับ |
| |
 |
|
|
 |
 |
|
[img=555]https://www.thaicreate.com/upload/stock/201Code (PHP)
<?session_start();?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ไออุ่นรีสอร์ท</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Work+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="site-wrap">
<div class="site-mobile-menu">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div> <!-- .site-mobile-menu -->
<div class="site-navbar-wrap js-site-navbar bg-white">
<div class="container">
<div class="site-navbar bg-light">
<div class="py-1">
<div class="row align-items-center">
<div class="col-2">
<h2 class="mb-0 site-logo"><a href="index.html"><font face="JasmineUPC" size="6">ไออุ่นรีสอร์ท</font></a></h2>
</div>
<div class="col-10">
<nav class="site-navigation text-right" role="navigation">
<div class="container">
<div class="d-inline-block d-lg-none ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle"><span class="icon-menu h3"></span></a></div>
<ul class="site-menu js-clone-nav d-none d-lg-block">
<li class="active">
<a href="index.html">Home</a>
</li>
<li class="has-children">
<a href="#">การจอง</a>
<ul class="dropdown arrow-top">
<li><a href="bookingroom.php">ห้องพัก</a></li>
<li><a href="bookingmeetingroom.php">ห้องประชุม</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content1 {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.leftcolumn {
float: left;
width: 75%;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
<script type="text/javascript">
function chk()
{
var inputdatepicker=document.getElementById('inputdatepicker').value;
var inputdatepicker2=document.getElementById('inputdatepicker2').value;
var people=document.getElementById('people').value;
var datastring = 'inputdatepicker='+inputdatepicker+'&inputdatepicker2='+inputdatepicker2+'&people='+people;
$.ajax({
type:"post",
url:"RoomP.php",
data:datastring,
cache:false,
success:function(msg){
$('body').append( msg );
}
}
)
return false;
}
$(function(){
$("#inputdatepicker").datepicker({
minDate :0,
orientation: "bottom auto",
format: 'dd/mm/yyyy'
});
$("#inputdatepicker2").datepicker({
minDate :0,
orientation: "bottom auto",
format: 'dd/mm/yyyy'
});
});
</script>
<img src = "images/1.jpg" width="2380" height="750">
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center mb-5 section-heading">
<h2 class="mb-5">จองห้องพัก</h2>
</div>
</div>
<?
if($_SESSION["datein"]==null&&$_SESSION["dateout"]==null&&$_SESSION["people"]==null){
?>
<center>วันที่เข้าพัก:
<input type="text" id="inputdatepicker" name="inputdatepicker" class="datepicker" data-date-format="mm/dd/yyyy" value="<?=date('m/d/Y')?>" >
วันที่ออก:
<input type="text" id="inputdatepicker2" name="inputdatepicker2" class="datepicker" data-date-format="mm/dd/yyyy" value="<?=date("m/d/Y", strtotime("+1 day"));?>">
<br>
<br>
จำนวนผู้เข้าพัก:
<input type="number" name="people" id="people" min="1" max="10"> คน
<button type="button" onclick=" return chk();" class="btn btn-success btn-xs">ค้นหา</button>
<div class="container">
<div class="row">
<div class="col-md-9">
<?
}
else if($_SESSION["datein"]!=null&&$_SESSION["dateout"]!=null&&$_SESSION["people"]!=null)
{
$newDate = date("m/d/Y", strtotime($_SESSION["datein"]));
$newDate2 = date("m/d/Y", strtotime($_SESSION["dateout"]));
?>
<center>วันที่เข้าพัก:
<input id="inputdatepicker" class="datepicker" data-date-format="mm/dd/yyyy" value="<?=$newDate?>" >
วันที่ออก:
<input id="inputdatepicker2" class="datepicker" data-date-format="mm/dd/yyyy" value="<?=$newDate2?>">
<br>
<br>
จำนวนผู้เข้าพัก:
<input type="number" name="people" id="people" min="1" max="10" value="<?=$_SESSION["people"]?>" > คน
<button type="button" onclick=" return chk();" class="btn btn-success btn-xs">ค้นหา</button>
<div class="container">
<div class="row">
<div class="col-md-9">
<?
$connect = mysqli_connect("localhost", "root", "1234", "ioonresort");
mysqli_set_charset($connect,"utf8");
$st="ว่าง";
$query = "SELECT room.RoomID, room.RoomName, roomtype.RoomTypeName , room.Price , room.img1, room.img2, room.img3,room.img4, room.img5, room.img6 ,room.people,room.DetailRoom FROM room join roomtype using (RoomTypeID) WHERE room.roomID NOT IN (SELECT room.RoomID FROM room
join detailbookingroom using (RoomID) join bookingroom using (BookingID) WHERE NOT ('".$_SESSION["dateout"]."' < DayST OR '".$_SESSION["datein"]."'> DayEnd)) ";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
echo "<center>";
echo"<br>";
echo"<table class='table'>";
echo"<center>";
echo"<tbody>";
while($show = mysqli_fetch_array($result)){ //ใช้ในการคืนค่าข้อมูลในฐานข้อมูลที่อยู่ในลักษณะเป็นแถวหรือว่าเป็น record
if($bg == "#FFDEAD") { //ส่วนของการ สลับสี
$bg = "#FFF8DC";
} else {
$bg = "#FFDEAD";
}
echo "<tr bgcolor= $bg >";
echo "<td align='center'><img src=img/".$show['img1']." width='180px'></td>";
echo "<td align='center'><font face='JasmineUPC' size='6' > ".$show['RoomTypeName']." ".$show['DetailRoom']."";
echo"<br>";
echo "<button type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal'>Open Small Modal</button></font>";
echo "</td>";
?>
<td align="center"> <button class="collapsible"> <font face='JasmineUPC' size='6' >จอง</font></button>
<div class="content1">
<font face='JasmineUPC' size='6' ><a href='orderroom.php?id=<?php echo $show['RoomID'];?>'>เลือก
</div></td>
<?
}
?>
</tr>
</tbody>
</table>
<?
}
else
{
echo 'ไม่มีห้องพักว่าง';
}
}
else {
echo 'โปรดเลือกวันที่';
}
?>
</div>
<div class="col-md-3">
<div class="rightcolumn">
<div class="card">
<h2>การจองห้องพัก</h2>
<form action="update.php" method="post">
<?php
function msg($txt){
echo '<script>';
echo "alert(\"$txt\");";
echo '</script>';
}
function Redirect($txt,$url){
echo '<script>';
echo "alert(\"$txt\");";
echo "window.location.href = '$url';";
echo '</script>';
}
echo "<center>";
echo" <div class='container'>";
echo"<table class='table table-bordered'>";
echo"<center>";
echo"<thead>";
echo"<tr>";
echo"<th><center><font face='JasmineUPC' size='6' >ชื่อห้องพัก</font></center></th>";
echo"<th><center><font face='JasmineUPC' size='6' >ประเภทห้องพัก</font></center></th>";
echo"<th><center><font face='JasmineUPC' size='6' >จำนวนห้อง</font></center></th>";
echo"<th><center><font face='JasmineUPC' size='6' >เตียงเสริม</font></center></th>";
echo"<th><center><font face='JasmineUPC' size='6' >เอาออก</font></center></th>";
echo"</tr>";
echo"</thead>";
echo"<tbody>";
$Total = 0;
$SumTotal = 0;
for($i=0;$i<=(int)$_SESSION["intLine"];$i++)
{
if($_SESSION["strProductID"][$i] != "")
{
$hostname = "localhost";
$username = "root";
$pass = "1234";
$dbname = "ioonresort";
$connect = mysql_connect($hostname,$username,$pass);
$sql = mysql_select_db($dbname);
if(!$connect) die ("ไม่สารมารถเข้าสู่ระบบได้");
if(!$sql) die ("ไม่สามารถเชื่อมต่อได้");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM room join roomtype using(RoomTypeID) WHERE RoomID = '".$_SESSION["strProductID"][$i]."' ";
$objQuery = mysql_query($strSQL) or die(mysql_error());
$objResult = mysql_fetch_array($objQuery);
$Total = $objResult["Price"];
$Totalpeople = $objResult["people"];
$Sumroompeople=$Sumroompeople+($Totalpeople+$_SESSION["strQty"][$i]);
$SumTotal = $SumTotal + $Total+($_SESSION["strQty"][$i]*400);
$toroom = 1;
$Sumroom= $Sumroom + $toroom;
?>
<tr>
<?
if($bg == "#FFDEAD") { //ส่วนของการ สลับสี
$bg = "#FFF8DC";
} else {
$bg = "#FFDEAD";
}
echo "<tr bgcolor= $bg >";
?>
<input type="hidden" name="txtProductID<?php echo $i;?>" value="<?php echo $_SESSION["strProductID"][$i];?>"></font></td>
<td><center><font face="JasmineUPC" size="6" ><?php echo $objResult["RoomName"];?></font></td>
<td><center><font face="JasmineUPC" size="6" ><?php echo $objResult["RoomTypeName"];?></font></td>
<td><center><font face="JasmineUPC" size="6" ><?php echo $toroom?> ห้อง</font></td>
<td><input type="number" name="txtQty<?php echo $i;?>" value="<?php echo $_SESSION["strQty"][$i];?>" min="0" max="2" size="2"></font>
</select> <input type="submit" onclick="return chk();" value="เพิ่มที่นอนเสริม" ></td>
<td><center><a href="delete.php?Line=<?php echo $i;?>"><font face='JasmineUPC' size='6' >x</a></td>
<td><center><font face="JasmineUPC" size="6" ><?php echo$_SESSION["intLine"];?></font></td>
<td><center><font face="JasmineUPC" size="6" ><?php echo $Sumroompeople;?></font></td>
</tr>
<?php
}
}
?>
</table>
</form>
ราคารวม <?php echo number_format($SumTotal,2)." บาท";?>
<br>
จำนวนห้อง <?php echo number_format($Sumroom)." ห้อง";?>
<br>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="footer-heading mb-4 text-white">About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quos rem ullam, placeat amet.</p>
<p><a href="#" class="btn btn-primary pill text-white px-4">Read More</a></p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h3 class="footer-heading mb-4 text-white">Quick Menu</h3>
<ul class="list-unstyled">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Approach</a></li>
<li><a href="#">Sustainability</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6">
<h3 class="footer-heading mb-4 text-white">Ministries</h3>
<ul class="list-unstyled">
<li><a href="#">Children</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Bible Study</a></li>
<li><a href="#">Church</a></li>
<li><a href="#">Missionaries</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div class="col-md-12"><h3 class="footer-heading mb-4 text-white">Social Icons</h3></div>
<div class="col-md-12">
<p>
<a href="#" class="pb-2 pr-2 pl-0"><span class="icon-facebook"></span></a>
<a href="#" class="p-2"><span class="icon-twitter"></span></a>
<a href="#" class="p-2"><span class="icon-instagram"></span></a>
<a href="#" class="p-2"><span class="icon-vimeo"></span></a>
</p>
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright © <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script> All Rights Reserved | This template is made with <i class="icon-heart text-primary" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank" >Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script src="js/aos.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script src="js/main.js"></script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content1 = this.nextElementSibling;
if (content1.style.display === "block") {
content1.style.display = "none";
} else {
content1.style.display = "block";
}
});
}
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
for (var i = 0; i < total; i++) {
new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/[email protected]/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';
}
}
});
}
});
</script>
</body>
</html>
90302132307.jpg[/img]
Tag : PHP, MySQL, HTML, CSS, HTML5
|
ประวัติการแก้ไข
2019-03-03 01:40:54
2019-03-03 01:40:56
|
 |
 |
 |
 |
| Date :
2019-03-02 13:24:20 |
By :
zoneteendome |
View :
831 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2019-03-02 13:26:25 |
By :
zoneteendome |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จาก code ใช้ bootstrap อยู่แล้วนี่ครับ กำหนดแบ่ง layout ได้เลยนะครับ ส่วนของ content ถ้ามันแคบไปก็กำหนด width ใหม่ได้เลยนะครับ
|
| |
|
|
| |
| Date :
2019-03-02 14:19:30 |
By :
Manussawin |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เดี่ยวลองทำดูนะครับ
|
| |
|
|
| |
| Date :
2019-03-02 14:30:58 |
By :
zoneteendome |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แก้ไมได้ครับช่วยหน่อยครับ
|
| |
|
|
| |
| Date :
2019-03-03 01:39:21 |
By :
zoneteendome |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ต้องการแบบไหน ทำ layout มาดูด้วยครับ ใช้ paint brush ก็ได้ วาด กรอบ ออกมาดู
ที่เห็นเป็น result ที่ไม่ต้องการ แล้วจะแนะนำอย่างไรดี
|
| |
|
|
| |
| Date :
2019-03-03 07:37:01 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แบบนี้อะครับ อยากตรง ส่วน table กว้างขึ้นกว่านีเอะครับ เพราะอันเก่าแคบเกินไป
|
| |
|
|
| |
| Date :
2019-03-03 11:38:14 |
By :
zoneteendome |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้ว ครับ
<div class="container">
เปลี่ยน เป็น <div class="container-fluid">
|
| |
|
|
| |
| Date :
2019-03-03 12:31:17 |
By :
zoneteendome |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
