วันอังคารที่ 22 กรกฎาคม พ.ศ. 2557

การทำ Webboard ด้วย PHP MySQL ตอนที่ 1 เตรียมความพร้อม/ออกแบบหน้าจอ/ออกแบบฐานข้อมูล

     บทความต่อจากนี้ไป ผมจะสอนทำ Webboard กันครับ โดยใช้ภาษา PHP กับ โปรแกรมฐานข้อมูล MySQL เป็นตัวหลักในการพัฒนาโปรแกรม และที่พิเศษคือ ผมจะให้ Webboard สามารถแสดงผลแบบ Responsive โดยใช้ Bootstrap เพื่อให้รองรับการแสดงผลบนอุปกรณ์จำพวก Smart Device เช่น มือถือ แท็บเลต และผมเอง เพิ่งเริ่มต้นศึกษา Bootstrap อยู่เหมือนกัน และต้องการให้ Webboard ที่ผมสอนมีความแปลกใหม่ รองรับเทคโนโลยีใหม่ๆ ที่ค่อนข้างที่จะเปลี่ยนแปลงไวมาก และต้องตามให้ทันอยู่เสมอ
     เว็บบอร์ดที่สอนจะเป็นเว็บบอร์ดแบบง่ายๆ ไม่มีOptionมากมายแบบ Smf หรือ phpbb จะมีเพียงการใช้งานหลักๆที่จำเป็นเท่านั้น เช่น การตั้งกระทู้/แสดง/ตอบกระทู้/ปักหมุด ,  มีระบบหมวดกระทู้ , มีระบบสมัครสมาชิก สมาชิกสามารถลงทะเบียน//Login เข้าสู่ระบบ เป็นต้น

การออกแบบฐานข้อมูล
     ให้สร้างฐานข้อมูลชื่อ db_wb และให้สร้างเทเบิลตามนี้ครับ (จะขอข้ามเรื่องของการวิเคราะห์ระบบด้วยDiagramแบบต่างๆนะครับ เพราะระบบไม่ได้ซับซ้อนอะไรมากครับ)



เทเบิล tbl_category  (หมวดหมู่กระทู้) มีฟิลด์ดังนี้
cg_id  กำหนดให้เป็นPrimary Key ชนิดข้อมูลเป็น INT(4)
cg_name คือชื่อหมวดกระทู้ ชนิดข้อมูลเป็น VARCHA(80)
cg_des คือคำอธิบายหมวดกระทู้ มีชนิดข้อมูลเป็น TEXT
cg_order สำหรับไว้เป็นค่าการเรียงลำดับหมวดหมู่เพื่อใช้แสดงผลในหน้าHome มีขนาด INT(4)
cg_replie_totals ไว้เก็บจำนวนความคิดเห็นทั้งหมดในหมวดนั้นๆ
cg_topic_totals ไว้เก็บจำนวนกระทู้ทั้งหมดให้หมวดหมู่นั้นๆ

เทเบิล tbl_board (กระทู้และความคิดเห็น) มีฟิลด์ดังนี้
board_id เป็น Primary Key มีชนิดข้อมูลเป็น INT(10)
board_parent_id สำหรับแยกกระทู้กับความคิดเห็น มีชนิดข้อมูลเป็น INT(10)
board_topic ชื่อหัวข้อกระทู้ มีชนิดข้อมูลเป็น VARCHAR(80)
cg_id รหัสหมวดกระทู้ จะมีความสัมพันธุ์กับเทเบิล tbl_category ชนิดข้อมูลเป็น INT(4)
mem_id รหัสสมาชิก จะมีความสัมพันธุ์กับเทเบิล tbl_member ชนิดข้อมูลเป็น INT(ุ6)
board_detail เนื้อหาหรือรายละเอียดของกระทู้/ความคิดเห็น ชนิดข้อมูลเป็น TEXT
board_time_add เก็บวันที่ตั้งกระทู้/แสดงความคิดเห็น (ตอบกระทุ้) ชนิดข้อมูลเป็น DateTime
board_time_update เก็บวันที่เวลาแก้ไขกระทู้ ชนิดข้อมูลเป็น DateTime
board_views เก็บจำนวนผู้เข้าชมกระทู้นั้นๆ ชนิดข้อมูลเป็น INT(7)
board_replies เก็บจำนวนความคิดเห็น (ตอบกระทู้) ในกระทู้นั้นๆ ชนิดข้อมูลเป็น INT(7)

เทเบิล tbl_member (เก็บข้อมูลสมาชิก) มีฟิลด์ดังนี้
mem_id กำหนดให้เป็นPrimary Key ชนิดข้อมูลเป็นINT(7)
mem_user เก็บ username สำหรับ Login ของสมาชิก ชนิดข้อมูลเป็น VARCHAR(20)
mem_pass เก็บ Password สำหรับ Login ของสมาชิก ชนิดข้อมูลเป็น VARCHAR(20)
mem_email เก็บ อีเมลของสมาชิก ชนิดข้อมูลเป็น VARCHAR(50)
mem_name เก็บชื่อของสมาชิก ชนิดข้อมูลเป็น VARCHAR(30)
mem_image เก็บชื่อรูปประจำตัวของสมาชิก ชนิดข้อมูลเป็น VARCHAR(20)
mem_level  เป็นตัวแบ่งว่าเป็นสมาชิกหรือผู้ดูแลระบบ ชนิดข้อมูลเป็น CHAR(1) โดยให้ค่า 1=ผู้ดูแลระบบ,2=สมาชิก

เราจะได้คำสั่ง sql ทั้งหมดดังนี้ครับ
--
-- Database: `db_wb`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_board`
--

CREATE TABLE IF NOT EXISTS `tbl_board` (
  `board_id` int(10) NOT NULL AUTO_INCREMENT,
  `board_parent_id` int(10) DEFAULT '0',
  `board_topic` varchar(80) COLLATE utf8_unicode_ci DEFAULT NULL,
  `cg_id` int(7) DEFAULT NULL,
  `mem_id` int(6) DEFAULT NULL,
  `board_detail` text COLLATE utf8_unicode_ci,
  `board_time_add` datetime DEFAULT NULL,
  `board_time_update` datetime DEFAULT NULL,
  `board_views` int(7) DEFAULT '0',
  `board_replies` int(7) DEFAULT '0',
  PRIMARY KEY (`board_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=62 ;

--
-- Dumping data for table `tbl_board`
--

INSERT INTO `tbl_board` (`board_id`, `board_parent_id`, `board_topic`, `cg_id`, `mem_id`, `board_detail`, `board_time_add`, `board_time_update`, `board_views`, `board_replies`) VALUES
(51, 0, 'เรียนปรึกษาครับ ผมอยากลาออกจากงานภายใน 1 ปีครึ่ง ควรทำไงดี', 12, 1, 'ขอปรึกษาหน่อยนะครับ ผมทำงานรัฐวิสาหกิจแห่งหนึ่งซึ่งบุคคลภายนอกมองว่าเงินเดือนดี แต่จริงๆแล้วไม่ใช่เช่นนั้น
\r\nคือผมทำงานมา 7 ปี มีหนี้อยู่ล้านต้นๆ และตอนนี้รัฐวิสาหกิจก็ไม่ได้การปรับเงินเดือนเลย (แต่ข้าราชการปรับไป 4 รอบแล้ว)
\r\nตัวผมเองเลยเริ่มมาหารายได้ทางอื่นซึ่ง ก็ได้จากการขายทางเว็บนี้แหละครับ ถึงแม้จะมีรายได้ไม่แน่นอนแต่เฉลี่ยแล้วพอๆกับเงินเดือนหรือมากกว่า
\r\nแต่ด้วยที่คิดว่าตัวเองยังไม่เก่ง เลยไม่กล้าที่จะลาออกมาโดยพ่วงหนี้ มาด้วย กะลูก 2 เมีย 1 เบิกสวัสดิการไม่ได้เพราะไม่ได้จดทะเบียน
\r\nผมควรวางแผนยังไงครับ กับการที่จะหันมาทำมาหากินบนโลกออนไลน์เต็มตัว ขอคำแนะนำหน่อยครับ', '2014-08-10 22:01:50', '2014-08-10 22:01:50', 0, 0),
(52, 0, 'เกมเศรษฐีเล่นแบบให้ computer ai เล่นโอกาสชนะเยอะกว่าเล่นเองอีกว่าไหม', 12, 1, 'เกมเศรษฐีเล่นแบบให้ computer ai เล่นโอกาสชนะเยอะกว่าเล่นเองอีกว่าไหม', '2014-08-10 22:06:29', '2014-08-10 22:06:29', 1, 0),
(53, 0, 'อีกสามปีข้างหน้าจะเกิดอะไรขึ้นกับ เกม ออนไลน์ บน pc ครับ', 12, 1, 'อีกสามปีข้างหน้าจะเกิดอะไรขึ้นกับ เกม ออนไลน์ บน pc ครับ
\r\n
\r\nถ้าให้ผมเดา คนจะหายไปเรื่อยๆ หนีไปเล่น บนมือถือกันหมด', '2014-08-10 22:07:32', '2014-08-12 19:25:39', 1, 1),
(54, 0, 'ระวังการขายเสนอขายบริการหรือสินค้าทาง PM อย่าโลภ', 6, 22, 'Admin ได้รับการร้องเรียน และ ได้ตรวจพบการเสนอขายบริการสอน Adsense ในราคา 4,900 บาท ทาง PM
\r\n
\r\nขอเตือนสมาชิกทุกท่านว่า ข้อความเสนอขายสินค้าทาง PM ต่างๆ ต้องพิจารณาให้ดี และ อย่าโลภ จนเสียเงินฟรี  เพราะหาหลักฐานฟ้องร้องยาก wanwan004
\r\n
\r\nถ้ามีความเสียหายเกิดขึ้น บอร์ดขอไม่ยุ่งเกี่ยวกับ กรณีผู้ขายที่ไม่มี Verify Seller นะครับ ', '2014-08-10 22:50:22', '2014-08-12 18:19:08', 2, 1),
(55, 0, 'กระทู้ลงชื่อ ให้ซ่อม PM ครับ โดย tdelphi', 6, 22, 'สวัสดีครับ
\r\n
\r\nเห็นหลายท่านแจ้งความประสงค์ว่า ไม่สามารถเข้าไปอ่าน pm ได้ หรือมีปัญหาเรื่องอื่น รบกวนลงชื่อ user ในกระทู้นี้ด้วยครับ
\r\n
\r\nadmin จะได้รีบดำเนินการซ่อมให้ ตามลำดับ ไม่ต้องส่ง pm มานะครับ ไม่ว่าของบอร์ดหรือ facebook
\r\n
\r\n1. user1 -> เปิด pm ไม่ได้ ระบบแจ้ง error
\r\n2.
\r\n3.
\r\n
\r\ntdelphi', '2014-08-10 22:57:04', '2014-08-12 18:18:00', 2, 3),
(56, 53, NULL, NULL, 1, 'ทดสอบครับ', '2014-08-12 18:04:11', NULL, 0, 0),
(57, 55, NULL, NULL, 22, 'ทดสอบแสดงความคิดเห็น', '2014-08-12 18:14:01', NULL, 0, 0),
(58, 55, NULL, NULL, 22, 'ทดสอบความคามคิดเห็น 2', '2014-08-12 18:17:00', NULL, 0, 0),
(59, 55, NULL, NULL, 1, 'ทดสอบแสดงความคิดเห็นโดยแอดมิน', '2014-08-12 18:18:00', NULL, 0, 0),
(60, 54, NULL, NULL, 1, 'สุดยอดเลยครับ', '2014-08-12 18:19:08', NULL, 0, 0),
(61, 53, NULL, NULL, 1, 'ทดสอบอีกครั้งครับ', '2014-08-12 19:25:39', NULL, 0, 0);

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE IF NOT EXISTS `tbl_category` (
  `cg_id` int(4) NOT NULL AUTO_INCREMENT,
  `cg_name` varchar(80) DEFAULT NULL,
  `cg_des` text,
  `cg_order` int(4) DEFAULT NULL,
  `cg_replie_totals` int(7) DEFAULT '0',
  `cg_topic_totals` int(7) DEFAULT '0',
  PRIMARY KEY (`cg_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`cg_id`, `cg_name`, `cg_des`, `cg_order`, `cg_replie_totals`, `cg_topic_totals`) VALUES
(6, 'ข่าวสารจากทีมงาน', 'ข่าวสาร ประกาศ กิจกรรมบอร์ดต่างๆ (สมาชิกใหม่ อ่านกฏที่นี่ก่อนอันดับแรก)', 1, 4, 2),
(7, 'Tutorial (ห้ามตั้งคำถามห้องนี้)', 'แบ่งปันความรู้และบทความต่างๆ ทุกเรื่องสำหรับมือใหม่และมือเก่า ', 2, 0, 0),
(8, 'Roadmap (ห้ามตั้งคำถามในห้องนี้)', 'ชี้แนวทาง แผนการหารายได้ Adsense & Other ', 3, 0, 0),
(10, 'Amazon', 'สอบถามปัญหาเกี่ยวกับ Amazon การสร้าง aStore โชว์ยอดจากการขายของ แชร์ข้อมูลและเทคนิคที่เป็นประโยชน์ได้ที่นี่ (ห้องหลักกรุณาเน้นถามคำถาม) ', 4, 0, 0),
(11, 'Programming', 'สำหรับ Programmer ผู้สนใจในการพัฒนา Application , Script , ปั่นเว็บ , ทำ SEO แบบต่างๆ ....... ปวดหมอง ไข้ขึ้น แก้ปัญหาไม่ตก ปรึกษาเพื่อนๆชาว Programmer ด้วยกันได้ที่นี่เลย (เน้นเขียนโปรแกรมถ้าแจกโปรแกรมไปห้อง tool) ', 5, 0, 0),
(12, 'Cafe', 'นั่งคุยกันเล่นๆ เฮฮา อารมณ์ดี พูดคุยนอกเรื่อง เล่าเรื่อง รวมถึงคำถามปรึกษาเรื่องต่างๆทั่วไป (คำถามวิชาการไป general) ', 6, 1, 3);

-- --------------------------------------------------------

--
-- Table structure for table `tbl_member`
--

CREATE TABLE IF NOT EXISTS `tbl_member` (
  `mem_id` int(7) NOT NULL AUTO_INCREMENT,
  `mem_user` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `mem_pass` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `mem_email` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL,
  `mem_name` varchar(30) COLLATE utf8_unicode_ci DEFAULT NULL,
  `mem_image` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `mem_level` char(1) COLLATE utf8_unicode_ci DEFAULT '2',
  PRIMARY KEY (`mem_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=23 ;

--
-- Dumping data for table `tbl_member`
--

INSERT INTO `tbl_member` (`mem_id`, `mem_user`, `mem_pass`, `mem_email`, `mem_name`, `mem_image`, `mem_level`) VALUES
(1, 'admin', '123456', 'pjman007@hotmail.com', 'ผู้ดูแลระบบ', NULL, '1'),
(22, 'panuwatk', '123456', 'tight-pw@hotmail.com', 'panuwat', '060814161825.jpg', '2');

การออกแบบหน้าจอเว็บไซต์
ขั้นตอนตรงนี้อาจทำควบคู่กับการออกแบบฐานข้อมูล เพราะอาจมีการเปลี่ยนแปลงของข้อมูลตลอดเวลาครับ

1.หน้าสมัครสมาชิก ผู้ที่สามารถตั้งกระทู้/ตอบกระทู้ได้ต้องเป็นสมาชิกเท่านั้นครับ ส่วนบุคคลทั่วไปสามารถอ่านกระทู้ได้เท่านั้น


2.หน้าเข้าสู่ระบบ สำหรับสมาชิก (Login)



3.หน้าโฮม (Home Page) เป็นหน้าหลักของเว็บไซต์ จะแสดงให้เห็นเป็นหน้าแรกเมื่อเปิดเว็บไซต์ขึ้นมาครับ หน้านี้จะแสดงหมวดกระทู้ขึ้นมาโชว์ก่อน สมาชิก/บุคคลทั่วไป สามารถเข้าใช้งานได้

4.หน้าแสดงกระทู้จากหมวดหมู่กระทู้ หน้านี้จะแสดงกระทู้ตามหมวดหมู่ที่เราเลือกจากหน้า Home Page สมาชิก/บุคคลทั่วไปสามารถเข้าใช้งานได้


5.หน้าแสดงกระทู้จากหมวดหมู่กระทู้ สำหรับผู้ดูแลระบบ จะเหมือนข้อ 4 เพียงแต่เพิ่มคอลัมน์จัดการ ให้สามารถลบหรือแก้ไขกระทู้ได้


6.หน้าแสดงรายละเอียดกระทู้/ตอบกระทู้ สมาชิกสามารถอ่าน/ตอบกระทู้ได้ ส่วนบุคคลทั่วไปสามารถอ่านได้อย่างเดียวเท่านั้น ไม่สามารถตอบกระทู้ได้


7.หน้าแสดงรายละเอียดกระทู้/ตอบกระทู้ สำหรับผู้ดูแลระบบ (Admin) เหมือนกับข้อ 5 เพียงแต่ให้แอดมินสามารถลบกระทู้/ลบความคิดเห็นได้


8.หน้าตั้งกระทู้ สำหรับสมาชิก แต่บุคคลทั่วไปไม่สามารถเข้ามาใช้งานในส่วนนี้ได้ หน้านี้ได้ออกแบบรวมไปถึงการแก้ไขกระทู้ด้วย เพราะเราจะใช้แบบฟอร์มเดียวกัน


9.หน้าตั้งกระทู้ของผู้ดูแลระบบ จะมีพิเศษเพิ่มเข้ามาคือสามารถปักหมุดกระทู้ได้ หน้านี้ดีไซน์รวมถึงหน้าแก้ไขกระทู้ด้วย


10.หน้าเพิ่ม/แก้ไข หมวดกระทู้โดยผู้ดูแลระบบ ผู้ดูแลระบบเท่าที่สามารถเพิ่มหมวดหมู่กระทู้ได้

11.หน้าจัดการ หมวดหมู่กระทู้สำหรับผู้ดูแลระบบ เป็นหน้าแสดงรายชื่อหมวดกระทู้ทั้งหมด แอดมินสามารถเรียงลำดับการแสดงผลหมวดหมู่ แก้ไข และลบหมวดหมู่ได้


เตรียมความพร้อมก่อนการพัฒนาโปรแกรม Webboard
ให้สร้างโฟลเดอร์ชื่อ mywb ใน www ของ Appserv และสร้างโฟลเดอร์และไฟล์ตามนี้ครับ (ในตัวอย่างผมใช้ wamp นะครับ ไม่ใช่ appserv)




1.สร้างโฟลเดอร์ bin สำหรับไว้เก็บไฟล์เชื่อมต่อกับฐานข้อมูลและไฟล์ฟังก์ชั่นต่างๆที่สำคัญ
2.โฟลเดอร์ bootstrap ให้ดาวน์โหลดจากเว็บ getbootstrap.com และเปลี่ยนชื่อโฟลเดอร์เป็น bootstrap
3.โฟลเดอร์ css สำหรับเอาไว้เก็บไฟล์ stylesheet ที่มีนามสกุล .css
4.โฟลเดอร์ images เอาไว้เก็บไฟล์รูปภาพต่างๆ และภายในมีโฟลเดอร์ชื่อ member เอาไว้เก็บรูปประจำตัวของสมาชิก
5.โฟลเดอร์ js สำหรับเอาไว้เก็บไฟล์ javascript ที่มีนามสกุล .js และให้ดาวน์โหลดไฟล์ jquery จากเว็บ jquery.com มาไว้ในโฟลเดอร์นี้ ให้ตั้งชื่อว่า jquery.js โดยให้เลือกเวอร์ชั่นล่าสุดในตอนนี้คือ 1.11.1
6.ไฟล์ index.php สำหรับเป็นหน้าโฮม (Home Page) ของเว็บไซต์ และในตอนนี้ผมได้ออกแบบคร่าวๆดังนี้ครับ


เมื่อเปิดดูในมือถือ เช่น iPhone 5 จะได้ผลลัพธุ์ดังนี้ โดยใช้เครื่องมือ Chrome Dev Tools ตรวจสอบการแสดงผลครับ



สำหรับเรื่องของดีไซน์ ไม่ขอเน้นเรื่องความสวยงามนะครับ 555 แต่อาจมีการเปลี่ยนแปลงในอนาคตครับ แล้วพบกันในบทความหน้าครับ จะเป็นเรื่องของระบบสมาชิกครับ ผมจะสอนในเรื่องของการสมัครสมาชิกและเข้าสู่ระบบ (Login)ครับ

6 ความคิดเห็น :