|
 |
| |
ขอปรึกษาแนวทางการทำ โปรเจค ออกแบบ พื้นที่ หน่อยครับ |
| |
 |
|
|
 |
 |
|
ผมเคยเขียนโปรแกรมให้คลับเฮาส์ มีสาระสำคัญอยู่ส่วนหนึ่ง คือการวาดแผนผังของล็อคเกอร์
นึกๆแล้วยังสนุกอยู่เลยครับ แต่ผมหาโปรเจคนี้ไม่เจอแล้ว ถ้าเจอจะเอามาให้ดูเป็นตัวอย่างน่ะครับ
|
 |
 |
 |
 |
| Date :
2013-02-18 23:39:13 |
By :
sakuraei |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ถ้าทำเป็นตาราง สามารถใช้ DOM ทำได้ โดยใช้ jquery หรืออื่นๆ ช่วย
แต่ถ้าหากเป็นการวาดรูปโพลีกอนแล้ว อาจจะต้องใช้ HTML5 Canvas หรือ Flash + ActionScript ครับ
แบบแรกนี่เพียงพอหรือเปล่าครับ
|
| |
|
|
| |
| Date :
2013-02-19 00:27:39 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ประมาณนี้ครับ
ตัวอย่าง
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// ใช้ jquery ในการจัดการ event
$(function () {
var data = {}; // ข้อมูลตาราง
$("#grid td").mousedown(function (event) { // หากมีการคลิก
if ($(this).toggleClass("plot").hasClass("plot")) { // หากเป็นการคลิกเพื่อเพิ่ม
data[this.title] = true; // ให้เพิ่มข้อมูลตาราง
} else { // คลิกเพื่อลบ
delete data[this.title];
}
}).mouseover(function (event) {
$(this).addClass("over");
}).mouseout(function (event) {
$(this).removeClass("over");
});
$(document.forms[0]).on("submit", function () {
this.json_data.value = JSON.stringify(data); // ส่งข้อมูลเป็น JSON
});
});
</script>
<title>Grid Plotter Example</title>
<style type="text/css">
#grid {
border-collapse: collapse;
}
#grid th, #grid td {
width: 20px;
height: 20px;
border: black solid 1px;
padding: 0px;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
#grid th {
background-color: #cccccc;
}
.plot {
background-color: #ff9900;
}
.over {
background-color: #ffff00;
}
.over.plot {
background-color: #990000;
}
</style>
</head>
<body>
<form action="" method="get">
<table class="grid" id="grid" style="float: left;">
<tr>
<?php
// สร้างตาราง HTML ด้วย PHP
echo "<tr><th></th>";
for ($x = 1; $x <= 32; $x++) {
echo "<th>$x</th>";
}
echo "</tr>";
for ($y = 1; $y <= 32; $y++) {
echo "<tr>";
for ($x = 0; $x < 33; $x++) {
if ($x) {
echo "<td title=\"$x:$y\"></td>";
} else {
echo "<th>$y</th>";
}
}
echo "</tr>";
}
?>
</table>
<textarea cols="40" rows="20" readonly="readonly" style="float: left;">
<?php
// ข้อมูลพื้นที่ที่ผู้ใช้สร้างและส่งมา จะเอาไปใช้ยังไงค่อยว่ากันอีกที
print_r(($_GET['json_data']) ? json_decode($_GET['json_data'], true) : '');
?>
</textarea>
<hr style="clear: both;" />
<input type="hidden" name="json_data" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-02-19 02:14:47 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โอ้ว ๆ ๆ ๆ มันเริ่ดจริง ๆ อ่ะ .... สวดยวดเลยลวดเพี้ยด...
|
| |
|
|
| |
| Date :
2013-02-19 09:11:30 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองเอาสคริป มารันแล้วครับ ปรากฏว่า แค่ที่แปลงจาก json_data ไม่ปรากฏใน text area ครับผม
<textarea cols="40" rows="20" readonly="readonly" style="float: left;">
<?php
// ข้อมูลพื้นที่ที่ผู้ใช้สร้างและส่งมา จะเอาไปใช้ยังไงค่อยว่ากันอีกที
print_r(($_GET['json_data']) ? json_decode($_GET['json_data'], true) : '');
?>
</textarea>
ลองสั่ง <?=$_GET['json_data'];?>
ได้ output ออกมาประมานนี้ครับ
{\"19:6\":true,\"16:9\":true,\"19:7\":true,\"18:6\":true,\"18:8\":true,\"18:7\":true,\"17:9\":true,\"18:9\":true,\"19:9\":true,\"19:8\":true}
ใช้ browser chrome Version 24.0.1312.57 m และ Appserv 2.5.10 ในการทดสอบครับ
และผมต้องทำให้ ตรางที่วาด กดและเรียก modal ของ bootstrap ด้วย ซึ่งการเรียก modal จะต้องเรียกผ่าน tag href เช่น
Modal bootstrap
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
ใน Database ออกแบบไว้ให้มี 10 ร้านค้า เวลาผม select ออกมาจะทำการสร้าง modal ของร้านค้านั้นๆออกมาด้วยโดยใช้ ตัวแปร $i คอยตั้งชื่อ id="myModal<?=$i;?>" ไม่ให้ซ้ำกัน
คราวนี้ตารางที่ผมวาดด้านบน มันจะสามารถ เรียก modal แบบนี้ได้หรือเปล่าครับ สงสัยว่าตอนวาด เราจะรู้ยังไงว่าเรากำลังวาด ร้านที่1 (id="myModal1")
ขออภัยที่ถามยาวครับ 
|
ประวัติการแก้ไข
2013-02-19 13:01:13
| |
|
|
| |
| Date :
2013-02-19 12:45:57 |
By :
zinlucifer |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แบบนั้นทำได้ครับ จะกี่ร้านค้าก็ได้
แต่คงต้องขอให้ลองศึกษาจาวาสคริปต์ หรือ jquery มากกว่านี้อีกนิด เพราะส่วนที่คุณถามล่าสุดไม่ได้ยากครับ
เพราะถ้าตอบไป คงต้องตอบยาว จนเหมือนกับต้องเขียนโค้ดทั้งหมดให้อ่ะครับ
|
| |
|
|
| |
| Date :
2013-02-19 13:17:44 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมดูลิงก์แล้ว
สงสัยว่าในเมื่อเลือกใช้ Flash แล้ว ทำไมไม่ทำเป็น Flash ให้หมดเลยอ่ะครับ
ง่ายกว่า และความสามารถสูงกว่ามานั่งทำด้วย html + javascript แบบนี้ครับ
|
| |
|
|
| |
| Date :
2013-02-19 13:18:53 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
รบกวนสอบถามต่อหน่อยนะครับ ได้เปลี่ยนวิธีการไปนิดหน่อยคือ เปลี่ยนเป็นกำหนด class ไปให้ tag td แทน และเก็บชื่อ class เข้า array
ของ json คราวนี้อยากทราบว่า ผมจะเก็บ array เข้าฐานข้อมูลอย่างไร และตอนที่ วนค่า เพื่อสร้างรูปแบบ พื้นที่ ผมจะเรียก class ได้ถูกต้อง
อย่างไรครับ
รูปแบบ Array ที่ได้
stdClass Object
(
[1:1] => plot
[3:2] => plot2
[2:3] => plot
[5:3] => plot2
)
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>..::: Virtual Mall Management System :::..</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../css/jquery.countdown.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../js/jquery-latest.js" type="text/javascript"></script>
<script src="../js/jquery.countdown.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.alerts.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script type="text/javascript">
// ใช้ jquery ในการจัดการ event
$(function () {
var data = {}; // ข้อมูลตาราง
$("#table td").mousedown(function (event) { // หากมีการคลิก
var check =($('#radio:checked').val());
if ($(this).toggleClass(check).hasClass(check)) { // หากเป็นการคลิกเพื่อเพิ่ม
data[this.title] = check; // ให้เพิ่มข้อมูลตาราง
} else { // คลิกเพื่อลบ
delete data[this.title];
}
}).mouseover(function (event) {
$(this).addClass("over");
}).mouseout(function (event) {
$(this).removeClass("over");
});
$(document.forms[1]).on("submit", function () {
this.json_data.value = JSON.stringify(data); // ส่งข้อมูลเป็น JSON
});
});
</script>
<style type="text/css">
.plot {
background-image: url(../display/1358345035_1176796432.jpg);
background-size: 100% auto;
}
.plot2 {
background-image: url(../display/1359045811_1176796655.jpg);
background-size: 100% auto;
}
.over {
background-color: #ffff00;
}
.over.plot {
background-color: #990000;
}
</style>
</head>
<body>
<?
if($_SESSION['admin']!="true")
{
header("location:../index.php");
}
require("../connect/connect.php");
require("../connect/function.php");
?>
<? include("./head.php"); ?>
<!-- NAVBAR
================================================== -->
<div class="container">
<div class="row">
<? include("./menuleft.php"); ?>
<div class="span9">
<div class="hero-unit">
<div class="page-header">
<h2>Recomment Shop</h2>
</div>
<form id="form1" class="form-inline" name="form1" method="post" action="">
<input type="radio" name="radio" id="radio" value="plot" />
<input type="radio" name="radio" id="radio" value="plot2" />
</form>
<form action="" method="get">
<table class="table table-bordered" id="table" style="width:800px; height:800px;">
<?php
for ($y = 1; $y <= 5; $y++) {
echo "<tr>";
for ($x = 0; $x < 6; $x++) {
if ($x) {
echo "<td title=\"$x:$y\"></td>";
}
}
echo "</tr>";
}
?>
</table>
<textarea cols="40" rows="20" readonly="readonly" style="float: left;">
<?php
$result = stripcslashes($_GET['json_data']);
// ข้อมูลพื้นที่ที่ผู้ใช้สร้างและส่งมา จะเอาไปใช้ยังไงค่อยว่ากันอีกที
$arr = json_decode($result);
if($_GET['json_data']!="")
{
print_r ($arr);
}
?>
</textarea>
<hr style="clear: both;" />
<input type="hidden" name="json_data" />
<input type="submit" value="Submit" />
</form>
</div> <!--/hero-unit--><!--/row-->
</div><!--/span9-->
</div><!--/row-fluid-->
<hr>
<footer>
<p>Copyright © 2012. All Rights Reserved.</p>
</footer>
</div><!--/.fluid-container-->
</body>
</html>
|
| |
|
|
| |
| Date :
2013-02-28 15:39:51 |
By :
zinlucifer |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แบบง่ายที่สุดเลยนะครับ
เก็บเข้าฐานข้อมูลเป็น json นั่นล่ะครับ
แล้วตอนอ่านออกมาค่อยแปลงเป็นข้อมูลที่จะใช้กับ PHP หรือ javascript อะไรก็ว่าไป
การอ่านด้วย PHP
$data = json_decode($_GET['json_data'], true);
// เพราะเราเก็บข้อมูลในลักษณะ key เป็นสตริงบอกตำแหน่ง และ value เป็น boolean ที่จะบอกว่าไม่ว่าง
// เช่น '1:5' => 1
// ซึ่งจะมีแค่ข้อมูลของพื้นที่ที่ไม่ว่างเท่านั้น (พื้นที่ที่ว่างจะไม่ส่งมา เพราะรู้อยู่แล้วว่าว่าง)
// เราก็จะอ่านมันออกมาทีละจุดได้ด้วย foreach
foreach ($data as $point => $unused) { // $point คือสตริงในรูปแบบ x:y
list($x, $y) = explode(':', $point); // แยกมันเป็น x และ y ด้วย :
echo "ตำแหน่ง x: $x y: $y เป็นพื้นที่ไม่ว่าง<br />\n";
}
|
ประวัติการแก้ไข
2013-02-28 16:39:40
2013-03-01 03:50:10
| |
|
|
| |
| Date :
2013-02-28 16:38:59 |
By :
cookiephp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณครับจะลองดู 
|
| |
|
|
| |
| Date :
2013-02-28 20:24:23 |
By :
zinlucifer |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ติดตาม 
|
| |
|
|
| |
| Date :
2013-03-01 03:45:39 |
By :
weaned |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
Quote:
