Part 1 พัฒนาร้านค้าออนไลน์ : ออกแบบหน้าแรก (Home page design)
posted on 11 May 2009 14:34 by bjtower
หลังจากพร้อมที่จะเริ่มพัฒนาเว็บแอพพลิเคชั่น
เริ่มต้นด้วยการขึ้นโครงหน้าแรกของเว็บไซต์ครับหรือที่เรียกว่าโฮมเพจ
index.php เป็นไฟล์แรกที่เราจะทำการออกแบบรูปร่างหน้าตาของหน้าแรกนะครับ ไฟล์นี้จะทำเป็นหน้าเว็บเพจต้นแบบที่จะคัดลอกไปใช้กับหน้าเว็บอื่นด้วยเป็นเทมเพลทเริ่มต้น ผมขออ้างอิงเท็มเพลทของเว็บที่จะใช้งานจากเว็บไซต์อ้างอิงของผมเองนะครับให้เป็นเว็บตัวอย่าง ที่ http://www.bjtower.com/ สังเกตว่าพื้นหลังสุดเป็นแบ็คกราวด์ที่เกิดจาก tag body ดังนั้นหารูปแบ็คกราวด์สวยๆใส่ลงไปที่ tag body นี้เลยครับ
<!-- <body background = "path ไฟล์รูป"> -->
การใส่ path ที่อยู่ของรูปแบบนี้เป็นแบบ fix ลองเปรียบเทียบกับแบบล่างดูครับ
<!-- <body background = "<?php echo $background_pic ?>"> -->
*** echo $background_pic *** ส่วนของ code ตรงนี้ คือ PHP code ที่อยู่ใน tag เปิดปิด การ echo หมายถึงการนำค่าของตัวแปรนั้นออกมาใช้งาน การเขียนแบบล่างจะเป็น dynamic เนื่องจากเป็นการเอาตัวแปรเก็บค่าไว้ก่อนซึ่งสามารถเอาตัวแปรนี้ $background_pic ไปใช้กับหน้าเว็บเพจอื่นในภายหลังได้ ถ้าต้องการเปลี่ยนแบ็คกราวด์ ก็เปลี่ยนทีเดียวที่ตัวแปร $background_pic ไม่ต้องตามไปเปลี่ยนทุกหน้า
มาต่อกันที่แบ็คกราวด์ของเว็บไซต์ครับ สังเกตว่าแบ็คกราวด์ในเว็บไซต์ตัวอย่างจะมีชั้นในอีกชั้นหนึ่ง ที่เป็นแบ็คกราวด์สีออกจางๆเพื่อให้ ตัวหนังสือดูสบายตาแบ็คกราวด์นี้เป็นของ tag table ชั้นนอกสุด
<!--
<table style="<?php echo $backgroundInsideStyle; ?>" align="center" width="800" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
// โครงสร้างเนื้อหาของหน้าแรก
</td>
</tr>
</table>
-->
ตัวแปรที่เก็บ path ของรูปภาพเพิ่มอีก 1 ตัวคือ $backgroundInsideStyle และโครงสร้างเนื้อหาของหน้าเว็บขึ้นกับแต่ละคนจะออกแบบครับ
ย้อนกลับไปเรื่องของตัวแปรทั้งสองที่เกิดขึ้นในหน้าแรกนี้ ให้สร้างไฟล์ชื่อ image_file.php เพื่อเป็นที่เก็บที่อยู่ของตัวแปรทั้ง 2 ครับ
ภายในจะเขียนโค้ด ดังนี้
image_file.php
<?php
$background_pic = "images/background_pic.gif";
$backgroundInsideStyle = "images/backgroundInsideStyle.gif";
?>
ถึงขั้นตอนนี้เราจะมีไฟล์อยู่ 2 ไฟล์นะครับ
1. index.php
2. image_file.php
ถัดไปให้สร้างไฟล์ขึ้นมา 1 ไฟล์คือ session.php เราจะทำไฟล์นี้เป็นไฟล์ที่อยู่ที่ส่วนบนสุดของทุกๆหน้าเว็บเพจที่เราสร้างครับ โดยไฟล์นี้ มีหน้าที่ในการสร้างเซสชั่นให้หับผู้เข้าชมเว็บ
เซสชั่นคืออะไร ?
เซสชั่น เรียกง่ายๆว่าเป็นตัวที่ทำหน้าเก็บค่าของตัวแปรที่เราสร้างไว้จากหน้าเว็บเพจหน้าหนึ่งไปใช้ในเว็บเพจหน้าอื่นได้จนกว่า เซสชั่นนั้นจะถูกทำลายไป
ยกตัวอย่าง เมื่อมีผู้ชมชื่อ "A" เข้าชมหน้าแรกของเว็บไซต์ จากนั้น A ก็เข้าชมหน้าเว็บที่สองของทางเว็บไซต์ เราจะทราบได้อย่างไรว่า คนที่เข้าชมเว็บไซต์หน้าที่สอง นี้เป็น A คนเดิมไม่ใช่คนอื่นเข้ามาใหม่
ทำได้โดยกำหนดตัวแปรเซสชั่นขึ้นมา 1 ตัวครับ สิบปากว่าไม่เท่าตาเห็น ลองดูโค้ดกันเลยละกันครับ
session.php
<?php
ob_start(); // บรรทัดนี้เปิดการทำงานของบัฟเฟอร์ครับ ใส่ไว้แหละ เพราะถ้าไม่ใส่บางทีจะ error ถ้ามีการใช้เซสชั่นครับ
session_start(); // เริ่มต้นเซสชั่น ตัวแปรที่ถูกลงไว้กับเซสชั่นจะมีค่าอยู่แม้ทำการเปลี่ยนหน้าเว็บเพจไปเป็นอีกหน้าหนึ่ง
require "image_file.php"; // คำสั่ง require เหมือนเป็นการเอาโค้ดทั้งหมดใน image_file.php มาแปะไว้ตรงนี้ครับ ดังนั้นภายใน session.php จะมีตัวแปรเก็บ path ของรูปภาพ 2 ตัวแรกอยู่
// #### ส่วนนี้เป็นการ สร้าง session ขึ้นมาครับ ##### //
if (!$user_session) // ทำไมต้องมี if ???
{
$user_session = md5(uniqid(microtime())); // เข้ารหัส md5 ของค่าเวลาเกิดเป็นค่าที่ไม่ซ้ำกัน (Unique) ครับ นำค่าเหล่านี้มาเก็บ ในตัวแปรธรรมดา $user_session
session_register("user_session"); // นำตัวแปร $user_session ลงไว้ในตัวแปรเซสชั่นด้วยบรรทัดนี้ครับ
}
// #### ส่วนนี้เป็นการ สร้าง session ขึ้นมาครับ ##### //
?>
ทำไมต้องมี if (!$user_session) ???
ก่อนอธิบายบรรทัดนี้ ขอทำต่อให้จบก่อนนะครับ นำไฟล์ session.php นี้ไปใส่ใน index.php
จะได้ไฟล์ index.php เป็นแบบนี้ครับ
index.php
<?php
require "Sessions.php";
?>
<!--
<table style="<?php echo $backgroundInsideStyle; ?>" align="center" width="800" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
// โครงสร้างเนื้อหาของหน้าแรก
</td>
</tr>
</table>
-->
กลับมาที่ ทำไมต้องมี if (!$user_session) ???
เมื่อมาถึงตรงนี้สังเกตนะครับว่าเวลาผู้ชมเข้ามาที่ index.php โค้ดจะรันเข้าที่ session.php ก่อนเพราะอยู่บนสุดของไฟล์ index.php
ดังนั้น เซสชั่นของผู้ชมคนแรก $user_session ก่อนเข้าไฟล์ session.php จะมีค่าว่าง(null)ถูกต้องนะครับ เมื่อตัวแปร $user_session เป็นค่าว่าง หมายความว่า ใน if (!$user_session) จะทำให้ condition หรือเงื่อนไขภายในวงเล็บเป็นจริง (true) เพราะ ค่าว่างหมายถึงค่า false เครื่องหมาย ! หน้าตัวแปร ความหมายง่ายๆคือ "ไม่" เมื่อ ไม่ false แสดงว่า true .... พอเข้าใจนะครับ
ดังนั้นเมื่อผู้ชมคนแรกเข้ามาที่ index.php ครั้ง แรก $user_session จะเก็บค่าที่ได้จาก md5(uniqid(microtime())); มาเป็นตัวแปรเซสชั่น เมื่อผู้ชมคนนี้เข้าที่หน้าเว็บเพจถัดไป ค่า $user_session ก็จะไม่ถูกสร้างใหม่เพราะติดเงื่อนไข if (!$user_session) จึงสามารถเช็คได้ว่าผู้ชมหน้าสองเป็นคนๆเดิมครับ
สรุปจนถึงตอนนี้ครับ เราจะมีไฟล์อยู่ 3 ไฟล์
1. session.php
2. image_file.php
3. index.php
ต่อฉบับหน้าเราจะมาทำโครงสร้างเนื้อหาของหน้าแรกครับ
ปล. <!-- --> เครื่องหมาย 2 อันนี้ให้เอาออกตอนนำไปใช้งานนะครับ เนื่องจากติดปัญหาตัว rich text editor มันแปลงเป็นตารางจริงๆ เลยต้องใส่ เครื่องหมาย comment ไว้
Chocolate,
รายการสินค้า
หน้าแรก
คู่มือการใช้งาน
เว็บบอร์ด
เข้าสู่ระบบจัดการร้านค้า
เข้าสู่อาคารช้อปปิ้ง
ลงทะเบียนร้านค้าใหม่
69shop
online
