File: /home/klungadmin/domains/klungbaan.com/private_html/index.php
<?php
// klungbaan-like-th.php
// ตัวอย่างเทมเพลต PHP ไฟล์เดียว — ภาษาไทย
// วางไฟล์นี้ในไดเรกทอรี public ของเซิร์ฟเวอร์ที่รองรับ PHP
// ข้อมูลตัวอย่างบทความ (ในโปรดักชันให้เปลี่ยนเป็นข้อมูลจากฐานข้อมูล)
$posts = [
[
'title' => 'รวมคอนโดใกล้สถานีพระราม 9 (เส้นสีส้ม)',
'excerpt' => 'รีวิวคอนโดย่านพระราม 9 ทั้งราคา การเดินทาง และสิ่งอำนวยความสะดวกรอบ ๆ',
'date' => '2019-10-17',
'category' => 'รีวิวโครงการและทำเล'
],
[
'title' => 'คอนโดน่าอยู่แถวสุขุมวิท งบประมาณไม่แพง',
'excerpt' => 'คัดคอนโดที่คุ้มค่าราคา ใกล้ BTS และสิ่งอำนวยความสะดวก',
'date' => '2019-09-03',
'category' => 'รีวิวโครงการและทำเล'
],
[
'title' => 'ขายเอง vs ฝากขายกับนายหน้า: อะไรดีกว่ากัน',
'excerpt' => 'เปรียบเทียบข้อดีข้อเสียระหว่างการขายบ้านด้วยตัวเองและผ่านนายหน้า',
'date' => '2019-08-08',
'category' => 'การลงทุนอสังหาริมทรัพย์'
]
];
$site = [
'title' => 'บล็อกสไตล์ KlungBaan — ตัวอย่างภาษาไทย',
'logo' => 'KLUNGBAAN'
];
function esc($s){ return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
?>
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php echo esc($site['title']); ?></title>
<style>
/* สไตล์เรียบง่าย อิงเลย์เอาท์แบบพื้นฐาน */
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai"; margin:0; background:#f7f7f7; color:#222}
.container{max-width:1000px;margin:24px auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:700;font-size:20px}
nav ul{list-style:none;padding:0;margin:0;display:flex;gap:14px}
nav a{text-decoration:none;color:#0b4da2}
.hero{background:#fff;padding:18px;margin:12px 0;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
.post{background:#fff;padding:16px;border-radius:8px}
.post h3{margin:0 0 8px}
.meta{font-size:13px;color:#666;margin-bottom:10px}
aside .card{background:#fff;padding:12px;border-radius:8px;margin-bottom:12px}
footer{text-align:center;color:#888;margin:28px 0;font-size:14px}
@media(max-width:880px){.grid{grid-template-columns:1fr}aside{order:2}}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo"><?php echo esc($site['logo']); ?></div>
<nav>
<ul>
<li><a href="#">หน้าแรก</a></li>
<li><a href="#">รีวิวโครงการและทำเล</a></li>
<li><a href="#">สินเชื่อบ้าน</a></li>
<li><a href="#">การลงทุนอสังหาริมทรัพย์</a></li>
<li><a href="#">เกี่ยวกับเรา</a></li>
</ul>
</nav>
</header>
<div class="hero">
<h1>ยินดีต้อนรับสู่บล็อกตัวอย่าง — เวอร์ชันภาษาไทย</h1>
<p>นี่คือตัวอย่างไฟล์ PHP แบบไฟล์เดียวที่ออกแบบให้เลย์เอาท์ใกล้เคียงกับ blog.klungbaan.com — สามารถเชื่อมต่อกับฐานข้อมูลจริงต่อไปได้</p>
</div>
<div class="grid">
<main>
<section>
<h2>บทความล่าสุด</h2>
<?php foreach($posts as $p): ?>
<article class="post">
<h3><?php echo esc($p['title']); ?></h3>
<div class="meta"><?php echo esc($p['category']); ?> · เผยแพร่ <?php echo esc($p['date']); ?></div>
<p><?php echo esc($p['excerpt']); ?></p>
<p><a href="#">อ่านต่อ →</a></p>
</article>
<?php endforeach; ?>
<p><a href="#">ดูบทความทั้งหมด</a></p>
</section>
</main>
<aside>
<div class="card">
<h4>ค้นหา</h4>
<form action="#" method="get">
<input name="q" placeholder="ค้นหาบทความ" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px">
</form>
</div>
<div class="card">
<h4>หมวดหมู่</h4>
<ul>
<li>รีวิวโครงการและทำเล</li>
<li>สินเชื่อบ้าน</li>
<li>การลงทุนอสังหาริมทรัพย์</li>
</ul>
</div>
<div class="card">
<h4>เกี่ยวกับเรา</h4>
<p>นี่คือตัวอย่างเว็บไซต์ — เปลี่ยนเป็นข้อมูลบริษัทหรือประวัติส่วนตัวของคุณได้</p>
</div>
</aside>
</div>
<footer>
©<?php echo date('Y'); ?> ตัวอย่างเว็บไซต์ สงวนลิขสิทธิ์
</footer>
</div>
</body>
</html>