บทที่ 1 วางแผนสคริป im
บทที่ 1 วางแผนสคริป im
จะทำงานอะไรต้องมีแผนและวางขอบเขตเล็กน้อยครับ ผมว่ามันคงไม่อยากไปถ้าเราวางโครงสร้างและตัวระบบของสคริบเราไว้ก่อนว่า มันควรที่จะมีอะไร และมันทำงานอย่างไร
แผนเริ่มต้นนี้ แก้ไขได้เรื่อยๆครับ เป็นการวางงานของเราก่อนเฉยๆ ผมชอบทำอย่างนี้แหละเขียนๆไว้ก่อน เขียนลงไปเลย A4 แผ่นใหญ่อยู่ ไม่พอก็ A3 ออฟฟิตผมมีเยอะ ส่วนใหญ่ที่ผมเขียนจะเริ่มจากมีไฟล์อะไรบ้าง แต่ละไฟล์มันทำงานอย่างไร เชื่อมกับไฟล์ไหนอีก
ตอนนี้คิดไว้ มีหน้า
ไฟล์แรก index.php ทราบๆกันอยู่ว่าเป็นไฟล์หน้าแรกของตัวเว็บเรานะครับ ซึ่งข้อมูลในหน้าแรกนั้นแล้วแต่คนออกแบบเลยนะครับว่าให้มีอะไรอยู่ ในที่นี้ผมจะทำให้มันโชว์สินค้าแล้วกันครับ ให้เป็นกล่องๆ มีรูปและ Title ของสินค้าก่อนครับ Special อย่างอื่นค่อยว่ากันในเรื่องของ Workshop ต่อไป
ไฟล์ product.php ชื่อชัดเจนครับสำหรับตัวนี้ หน้าแสดงสินค้านั่นเอง ซึ่งผมจะใช้ค่า มาหนึ่งค่าเพื่อดึงข้อมูลขึ้นมาแสดงครับ ในที่นี้ผมจะเรียกว่า id ครับผม เป็น id สินค้า ที่ใช้ระบุว่าสินค้าอยู่ตรงไหนอย่างไร ซึ่งส่วนใหญ่ที่ผมใช้ ค่า id จะเป็นค่าระบุว่า ข้อมูลอยู่บรรทัดไหนของไฟล์ข้อมูลครับ ซึ่งค่า id แล้วแต่คนกำหนดว่ามันสื่อถึงอะไรนะครับ หน้าสินค้าก็จะมีเรื่องของการรีวิวสินค้า ปุ่ม ลิงค์ออก ซึ่งแล้วแต่จะออกแบบ ของผมเอาง่ายๆก่อนละกัน Title/ Images/ Link/ Review นะครับ
ไฟล์ data.csv เป็นเอกสารสำหรับเก็บข้อมูลสิ้นค้าทั้งหมดนะครับ ซึ่งผมจะเก็บไว้ที่อันเดียวนี่แหละครับ ส่วนเรื่องหลายๆไฟล์ใน 1 โฟลเดอร์ ค่อยอัพสเกลเอาครับ ผมจะทำเป็นข้อมูล 3 คอลัมนะครับ Title, Images, Link ส่วนเรื่องข้อมูลจะเอามายังไงค่อยหาทางกันอีกครับ สมมติว่ามีข้อมูลเรียบร้อยละกัน เดี๋ยวผมเอา data.csv ตัวอย่างมาแปะไว้ให้โหลดละกันครับ
ไฟล์ style.css เสริมความหล่อของเว็บด้วย CSS ซึ่งอย่างที่กล่าวนะครับ ผมจะไม่ใช้ css framework ในการเขียนครั้งนี้นะครับ แต่จะเขียนตัว CSS ที่เป็นพื้นฐานให้ดูจะได้เอาไปใช้แก้อย่างอื่นได้ด้วย
ไฟล์ sitemap.php ทำไมไม่ใช้ sitemap.xml ละ ตอบเลยครับว่าผมจะให้ลองเขียนให้มันสร้างไฟล sitemap.xml ในตัวมันเองและสามารถตั้งเวลาให้อัพเดท ปรับข้อมูลใน sitemap.xml ได้ครับ มันน่าจะดีกว่า หรือว่าอย่างไรดี อันนี้ต้องคุยกันฮ่าๆ แต่ผมมีความเชื่อว่า google ชอบของสดใหม่ครับ
ส่วนอีก 3 ไฟล์นั้น เป็นตัวเสริมพลังให้กับสคริปครับ ช่วยเรื่อง permalink เรื่องของ bot เรื่องของ icon ของเว็บเรา มีความสำคัญเลยทีเดียวครับ
ตอนนี้คิดไว้ มีหน้า
- index.php
- product.php
- data.csv
- style.css
- sitemap.php
- robot.txt
- .htaccess
- favicon.ico เอาไว้ทำหล่อ
สำหรับผม น่าจะมีเท่านี้นะครับ เอาสคริบง่ายๆเล็กๆนี่แหละครับ ถ้ามี Workshop หรือ CMS ตัวอื่นค่อยว่ากัน ตอนนี้เอา cms ตัวเล็กๆที่พอมองภาพออกก่อนดีกว่าครับ
สำหรับสคริบตัวนี้ ผมจะไม่ไปดึง css framework มาใช้นะครับ กะจะลองเขียน css ไปในตัวเลยครับ เผื่อเอาไปแก้ไขและปรับปรุงหรือว่าออกแบบ Template อย่างอื่นได้ด้วย
 |
| สคริป im |
เอาละครับทีนี้มาไล่ทีละไฟล์ว่ามีเนื้อหาอะไรบ้าง และควรจะมีอะไรอยู่
 |
| ไฟล์ index.php |
|
| ไฟล์ product.php |
 |
| ไฟล์ data.csv |
ไฟล์ data.csv เป็นเอกสารสำหรับเก็บข้อมูลสิ้นค้าทั้งหมดนะครับ ซึ่งผมจะเก็บไว้ที่อันเดียวนี่แหละครับ ส่วนเรื่องหลายๆไฟล์ใน 1 โฟลเดอร์ ค่อยอัพสเกลเอาครับ ผมจะทำเป็นข้อมูล 3 คอลัมนะครับ Title, Images, Link ส่วนเรื่องข้อมูลจะเอามายังไงค่อยหาทางกันอีกครับ สมมติว่ามีข้อมูลเรียบร้อยละกัน เดี๋ยวผมเอา data.csv ตัวอย่างมาแปะไว้ให้โหลดละกันครับ
 |
| ไฟล์ style.css |
 |
| ไฟล์ product.php |
ส่วนอีก 3 ไฟล์นั้น เป็นตัวเสริมพลังให้กับสคริปครับ ช่วยเรื่อง permalink เรื่องของ bot เรื่องของ icon ของเว็บเรา มีความสำคัญเลยทีเดียวครับ
การทำงานของสคริปเบื้องต้น
ตอนนี้เรามีข้อมูล มีไฟล์ ครบแล้ว ต่อไปผมก็จะพูดเรื่องของการทำงานของสคริปครับ ว่าสคริบตัวนี้ทำงานคร่าวๆ อย่างไรบ้างนะครับ
เบื้องต้นสคริปตัวนี้ เป็นสคริปขนาดเล็กครับ สคริปที่ง่าย ดังนั้นไม่ต้องเขียนให้ยากครับ หน้าแรกของเว็บจะรวมสินค้าบางส่วนไว้ ให้สามารถส่งลิงค์ไปที่หน้าสินค้า (product.php) ได้ โดยใช้ค่า id ไปดึงค่าของข้อมูลจาก data.csv มาแสดงครับ
เมื่อมีหน้าแรก หน้าสินค้า ก็จะมีหน้า sitemap ครับ ซึ่งเจ้านี้ จะทำงานของมันเอง เราไม่ต้องยุ่งอะไรกับมันละครับ เอา sitemap.xml ไปทำความรู้จักกับ google พอ
การทำงานของสคริบน่าจะมีเท่านี้แหละครับ บทต่อไปเราก็จะมาเริ่มเขียนกันเลยดีกว่าครับ หากมีข้อสงสัยในบทแรกนี้ สอบถามที่ comment ด้านล่างนะครับ
{ ข้อความข้างต้นหากมีข้อผิดพลาดเรื่องต่างๆ ช่วยแจ้งผมด้วยนะครับเพื่อเป็นวิทยาทานของทุกท่าน }
บทเรียนทั้งหมด
บทเรียนทั้งหมด
2 ความคิดเห็น