• user warning: Table 'cache_filter' is marked as crashed and should be repaired query: SELECT data, created, headers, expire, serialized FROM cache_filter WHERE cid = '3:bd16b97b0e4c8bb265503eb26b3b0636' in /home/tgv/htdocs/includes/cache.inc on line 27.
  • user warning: Table 'cache_filter' is marked as crashed and should be repaired query: UPDATE cache_filter SET data = '<!--paging_filter--><p><v:shapetype coordsize=\"21600,21600\" o:spt=\"67\" adj=\"16200,5400\" path=\"m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe\" id=\"_x0000_t67\"><v:stroke joinstyle=\"miter\"></v:stroke><v:formulas><v:f eqn=\"val #0\"></v:f><v:f eqn=\"val #1\"></v:f><v:f eqn=\"sum height 0 #1\"></v:f><v:f eqn=\"sum 10800 0 #1\"></v:f><v:f eqn=\"sum width 0 #0\"></v:f><v:f eqn=\"prod @4 @3 10800\"></v:f><v:f eqn=\"sum width 0 @5\"></v:f></v:formulas><v:path o:connecttype=\"custom\" o:connectlocs=\"10800,0;0,@0;10800,21600;21600,@0\" o:connectangles=\"270,180,90,0\" textboxrect=\"@1,0,@2,@6\"></v:path><v:handles><v:h position=\"#1,#0\" xrange=\"0,10800\" yrange=\"0,21600\"></v:h></v:handles></v:shapetype></p>\n<p align=\"center\" class=\"MsoNormal\" style=\"margin: 0cm 0cm 10pt\">\n<v:shape fillcolor=\"white [3201]\" strokecolor=\"#666 [1936]\" strokeweight=\"1pt\" type=\"#_x0000_t67\" id=\"_x0000_s1027\" style=\"z-index: 251659264; position: absolute; margin-top: 31.5pt; width: 10.5pt; height: 23.25pt; margin-left: 39.75pt\"><v:fill color2=\"#999 [1296]\" focusposition=\"1\" focus=\"100%\" type=\"gradient\"></v:fill><v:shadow on=\"t\" color=\"#7f7f7f [1601]\" offset=\"1pt\" offset2=\"-3pt\" opacity=\".5\" type=\"perspective\"></v:shadow></v:shape><span style=\"font-size: x-large\">ผังงาน (Flowchart)</span> [ <a href=\"http://www.rsv.ac.th/e-learning/RsvWork/WriteFlowchart.htm\"><u><span style=\"color: #ff0000\">refer.</span></u></a> ] <br />\nเว็บเพจหน้านี้สนใจผังงานโปรแกรม มากกว่าผังงานระบบ .. เพื่อเสริมบทเรียน <a href=\"http://www.thaiall.com/article/teachpro.htm\"><u><span style=\"color: #ff0000\">สอนเขียนโปรแกรม</span></u></a>\n</p>\n<p class=\"MsoNormal\" style=\"margin: 0cm 0cm 10pt\">\n<table align=\"center\" width=\"760\">\n<tbody>\n<tr>\n<td align=\"center\" vAlign=\"top\"><u><span style=\"color: #ff0000\"><img src=\"http://www.thaiall.com/flowchart/_process.gif\" /><br />\n </span></u>Process Symbol </td></tr></tbody></table></p>\n<hr color=\"#dddddd\" />\n <img src=\"http://www.thaiall.com/flowchart/_io.gif\" /><br />\n Input/Output Symbol \n<hr color=\"#dddddd\" />\n <img src=\"http://www.thaiall.com/flowchart/_decision.gif\" /><br />\n Decision Symbol \n<hr color=\"#dddddd\" />\n <img src=\"http://www.thaiall.com/flowchart/_terminal.gif\" /><br />\n Terminal Symbol \n<hr color=\"#dddddd\" />\n <img src=\"http://www.thaiall.com/flowchart/_document.gif\" /><br />\n Document Symbol \n<hr color=\"#dddddd\" />\n <img src=\"http://www.thaiall.com/flowchart/_connector.gif\" /><br />\n Connector Symbol \n<td width=\"10\" bgColor=\"#dddddd\"></td>\n<td vAlign=\"top\">\n<table align=\"center\" width=\"100%\">\n<tbody>\n<tr>\n<td vAlign=\"top\"><b>ความหมายของผังงาน</b><br />\n<dd>ผังงาน (Flowchart) คือ รูปภาพ (Image) หรือสัญลักษณ์(Symbol) ที่ใช้เขียนแทนขั้นตอน คำอธิบาย ข้อความ หรือคำพูด ที่ใช้ในอัลกอริทึม (Algorithm) เพราะการนำเสนอขั้นตอนของงานให้เข้าใจตรงกัน ระหว่างผู้เกี่ยวข้อง ด้วยคำพูด หรือข้อความทำได้ยากกว่า <br />\n <b>ผังงานแบ่งได้ 2 ประเภท</b> <br />\n 1. ผังงานระบบ (System Flowchart) <br />\n คือ ผังงานที่แสดงขั้นตอนการทำงานในระบบอย่างกว้าง ๆ แต่ไม่เจาะลงในระบบงานย่อย <br />\n 2. ผังงานโปรแกรม (Program Flowchart) <br />\n คือ ผังงานที่แสดงถึงขั้นตอนในการทำงานของโปรแกรม ตั้งแต่รับข้อมูล คำนวณ จนถึงแสดงผลลัพธ์ <br />\n <b>ประโยชน์ของผังงาน</b> <br />\n 1. ทำให้เข้าใจ และแยกแยะปัญหาได้ง่าย (Problem Define) <br />\n 2. แสดงลำดับการทำงาน (Step Flowing) <br />\n 3. หาข้อผิดพลาดได้ง่าย (Easy to Debug) <br />\n 4. ทำความเข้าใจโปรแกรมได้ง่าย (Easy to Read) <br />\n 5. ไม่ขึ้นกับภาษาใดภาษาหนึ่ง (Flexible Language) </dd>\n</td>\n<td align=\"center\" width=\"182\" vAlign=\"top\"><img src=\"http://www.thaiall.com/flowchart/_notred.gif\" /> <br />\n ตัวอย่างผังงานระบบไฟแดง</td>\n</tr>\n</tbody>\n</table>\n<p> <b>การโปรแกรมแบบมีโครงสร้าง หรือ การโปรแกรมโครงสร้าง ประกอบด้วยอะไรบ้าง</b><br />\n<dd>ผมขอตอบอย่างสั้น ๆ ว่าทุกภาษาต้องมีหลักการ 3 อย่างนี้คือ การทำงานแบบตามลำดับ(Sequence) การเลือกกระทำตามเงื่อนไข(Decision) และ การทำซ้ำ(Loop) แม้ตำราหลาย ๆ เล่มจะบอกว่า decision แยกเป็น if กับ case หรือ loop นั้นยังแยกเป็น while และ until ซึ่งแตกต่างกัน แต่ผมก็ยังนับว่าการเขียนโปรแกรม แบบมีโครงสร้างนั้น มองให้ออกแค่ 3 อย่างก็พอแล้ว และหลายท่านอาจเถียงผมว่าบางภาษาไม่จำเป็นต้องใช้ Structure Programming แต่เท่าที่ผมศึกษามา ยังไม่มีภาษาใด เลิกใช้หลักการทั้ง 3 นี้อย่างสิ้นเชิง เช่น MS Access ที่หลายคนบอกว่าง่าย ซึ่งก็อาจจะง่ายจริง ถ้าจะศึกษาเพื่อสั่งให้ทำงานตาม wizard หรือตามที่เขาออกแบบมาให้ใช้ แต่ถ้าจะนำมาใช้งานจริง ตามความต้องการของผู้ใช้แล้ว ต้องใช้ประสบการณ์ในการเขียน Structure Programming เพื่อสร้าง Module สำหรับควบคุม Object ทั้งหมดให้ทำงานประสานกัน </dd></p>\n<table align=\"center\" width=\"100%\">\n<tbody>\n<tr>\n<td width=\"30%\" vAlign=\"top\"><b>1. การทำงานแบบตามลำดับ(Sequence)</b> : รูปแบบการเขียนโปรแกรมที่ง่ายที่สุดคือ เขียนให้ทำงานจากบนลงล่าง เขียนคำสั่งเป็นบรรทัด และทำทีละบรรทัดจากบรรทัดบนสุดลงไปจนถึงบรรทัดล่างสุด สมมติให้มีการทำงาน 3 กระบวนการคือ อ่านข้อมูล คำนวณ และพิมพ์ </td>\n<td width=\"30%\" vAlign=\"top\"><b>2. การเลือกกระทำตามเงื่อนไข(Decision or Selection)</b> : การตัดสินใจ หรือเลือกเงื่อนไขคือ เขียนโปรแกรมเพื่อนำค่าไปเลือกกระทำ โดยปกติจะมีเหตุการณ์ให้ทำ 2 กระบวนการ คือเงื่อนไขเป็นจริงจะกระทำกระบวนการหนึ่ง และเป็นเท็จจะกระทำอีกกระบวนการหนึ่ง แต่ถ้าซับซ้อนมากขึ้น จะต้องใช้เงื่อนไขหลายชั้น เช่นการตัดเกรดนักศึกษา เป็นต้น ตัวอย่างผังงานนี้ จะแสดงผลการเลือกอย่างง่าย เพื่อกระทำกระบวนการเพียงกระบวนการเดียว </td>\n<td width=\"30%\" vAlign=\"top\"><b>3. การทำซ้ำ(Repeation or Loop)</b> : การทำกระบวนการหนึ่งหลายครั้ง โดยมีเงื่อนไขในการควบคุม หมายถึงการทำซ้ำเป็นหลักการที่ทำความเข้าใจได้ยากกว่า 2 รูปแบบแรก เพราะการเขียนโปรแกรมแต่ละภาษา จะไม่แสดงภาพอย่างชัดเจนเหมือนการเขียนผังงาน ผู้เขียนโปรแกรมต้องจินตนาการด้วยตนเอง </td>\n</tr>\n</tbody>\n</table>\n\n</td>\n\n\n\n\n<table align=\"center\" width=\"100%\">\n<tbody>\n<tr>\n<td align=\"center\" vAlign=\"top\"><img src=\"http://www.thaiall.com/flowchart/_struc1.gif\" /></td>\n<td align=\"center\" vAlign=\"top\"><img src=\"http://www.thaiall.com/flowchart/_struc2.gif\" /></td>\n<td align=\"center\" vAlign=\"top\"><img src=\"http://www.thaiall.com/flowchart/_struc3.gif\" /></td>\n</tr>\n</tbody>\n</table>\n<table align=\"center\" width=\"760\">\n<tbody>\n<tr>\n<td width=\"175\" vAlign=\"top\"><b>โจทย์ที่ 1</b> <br />\n - พิมพ์เลข 0 ถึง 4 ทางจอภาพ \n<p> <b>ตัวอย่างผังงาน</b><br />\n <img src=\"http://www.thaiall.com/flowchart/_print04.gif\" /> </p></td>\n<td width=\"3\" bgColor=\"#dddddd\"></td>\n<td width=\"240\" vAlign=\"top\"><b>โจทย์ที่ 2</b> <br />\n - รับค่าจากแป้นพิมพ์เก็บลงตัวแปรอาร์เรย์ 5 ตัว <br />\n - แล้วทำซ้ำอีกครั้ง เพื่อหาค่าสูงสุด <br />\n <b>ตัวอย่างผังงาน</b><br />\n <img src=\"http://www.thaiall.com/flowchart/_armax.gif\" /> </td>\n<td vAlign=\"top\"><b>อัลกอริทึม</b> <br />\n 1. กำหนดค่าเริ่มต้นให้ max, i และ ar <br />\n 2. ทำซ้ำเพื่อรับค่าเก็บใน ar ให้ครบ 5 ครั้ง <br />\n 3. กำหนดค่าเริ่มต้นให้ i อีกครั้ง <br />\n 4. ทำซ้ำเพื่อนำค่าที่เก็บไว้ใน ar มาหาค่า max <br />\n 5. พิมพ์ค่าสูงสุด ที่หาได้ </td>\n</tr>\n</tbody>\n</table>\n<hr width=\"760\" color=\"#dddddd\" />\n<table align=\"center\" width=\"760\">\n<tbody>\n<tr>\n<td width=\"260\"><img src=\"http://www.thaiall.com/flowchart/_whilewhile01.gif\" /> </td>\n<td vAlign=\"top\">คำถามที่ 3 <br />\n - พิมพ์พีระมิดของตัวเลขดังตัวอย่าง \n<pre>\n <span style=\"font-family: fixedsys\"><b>Result</b>112123123412345 \n <table>\n <tbody>\n <tr>\n <td vAlign=\"top\"><span style=\"font-family: fixedsys\">\n <pre>\n <b>Source Code</b>&lt;?$i = 1;while ($i &lt;= 5){ $j = 1; while ($j &lt;= $i) { echo $j; $j++; } echo &quot;&lt;br&gt;&quot;; $i++;}?&gt; \n </pre><p> </p></span></td>\n<td width=\"2\" bgColor=\"#808080\"></td>\n<td vAlign=\"top\"><span style=\"font-family: fixedsys\">\n<pre>\n <b>Source Code</b>#include &lt;iostream.h&gt;#include &lt;conio.h&gt;void main() { for(int i=1;i&lt;=5;i++) { for(int j=1;j&lt;=i;j++) { cout &lt;&lt; j; } cout &lt;&lt; &quot;end&quot; &lt;&lt; \'\\n\'; } getch();} \n </pre><p> </p></span></td>\n</tr>\n</tbody>\n</table>\n<p> </p></span> \n</pre></td>\n</tr>\n</tbody>\n</table>\n<hr width=\"760\" color=\"#dddddd\" />\n<table align=\"center\" width=\"760\">\n<tbody>\n<tr>\n<td vAlign=\"top\">Download : <a href=\"http://www.thaiall.com/flowchart/diaflowchart01.dia\"><u><span style=\"color: #ff0000\">diaflowchart01.dia</span></u></a><br />\n <u><span style=\"color: #ff0000\"><img src=\"http://www.thaiall.com/flowchart/diaflowchart01.png\" /></span></u> </td>\n<td vAlign=\"top\">\n<div align=\"justify\">\n <b>Dia - Diagram Drawing</b> ใน <a href=\"http://www.thaiall.com/article/chantra.htm\"><u><span style=\"color: #ff0000\">ซีดีจันทรา</span></u></a> (Download : <a href=\"ftp://thaiopensource.org/software/dia/dia-setup-0.95.zip\"><u><span style=\"color: #ff0000\">Dia</span></u></a> + <a href=\"ftp://thaiopensource.org/software/gtk/gtk+-2.8.18-setup-1.zip\"><u><span style=\"color: #ff0000\">GTK</span></u></a>) <span style=\"color: #444444\"><br />\n<dd>Dia (ไดอะ) เป็นโปรแกรมวาดภาพกราฟฟิกส์แบบเวกเตอร์ที่ออกแบบมา เพื่อให้ใช้ในการ เขียนไดอะแกรมโดยเฉพาะ สามารถเขียนไดอะแกรมได้หลายชนิดอย่างรวดเร็ว Dia มี ชุดออปเจคที่ช่วยในการวาด Entity Relationship Diagram, UML Diagram, Flowchart Diagram, Network Diagram ,วงจรไฟฟ้าอย่างง่าย ๆ รวมถึงไดอะแกรมอื่น นอกจากนี้ Dia ยังสามารถเพิ่มชุดออปเจคได้ด้วยการเขียนไฟล์ XML<span style=\"color: #000000\"> </span></dd>\n<p></p></span>\n </div>\n</td>\n</tr>\n</tbody>\n</table>\n', created = 1720147273, expire = 1720233673, headers = '', serialized = 0 WHERE cid = '3:bd16b97b0e4c8bb265503eb26b3b0636' in /home/tgv/htdocs/includes/cache.inc on line 112.

ผังงานโปรแกรม

รูปภาพของ chatta2010

ผังงาน (Flowchart) [ refer. ]
เว็บเพจหน้านี้สนใจผังงานโปรแกรม มากกว่าผังงานระบบ .. เพื่อเสริมบทเรียน สอนเขียนโปรแกรม


Process Symbol



Input/Output Symbol

Decision Symbol

Terminal Symbol

Document Symbol

Connector Symbol
ความหมายของผังงาน
ผังงาน (Flowchart) คือ รูปภาพ (Image) หรือสัญลักษณ์(Symbol) ที่ใช้เขียนแทนขั้นตอน คำอธิบาย ข้อความ หรือคำพูด ที่ใช้ในอัลกอริทึม (Algorithm) เพราะการนำเสนอขั้นตอนของงานให้เข้าใจตรงกัน ระหว่างผู้เกี่ยวข้อง ด้วยคำพูด หรือข้อความทำได้ยากกว่า
ผังงานแบ่งได้ 2 ประเภท
1. ผังงานระบบ (System Flowchart)
คือ ผังงานที่แสดงขั้นตอนการทำงานในระบบอย่างกว้าง ๆ แต่ไม่เจาะลงในระบบงานย่อย
2. ผังงานโปรแกรม (Program Flowchart)
คือ ผังงานที่แสดงถึงขั้นตอนในการทำงานของโปรแกรม ตั้งแต่รับข้อมูล คำนวณ จนถึงแสดงผลลัพธ์
ประโยชน์ของผังงาน
1. ทำให้เข้าใจ และแยกแยะปัญหาได้ง่าย (Problem Define)
2. แสดงลำดับการทำงาน (Step Flowing)
3. หาข้อผิดพลาดได้ง่าย (Easy to Debug)
4. ทำความเข้าใจโปรแกรมได้ง่าย (Easy to Read)
5. ไม่ขึ้นกับภาษาใดภาษาหนึ่ง (Flexible Language)

ตัวอย่างผังงานระบบไฟแดง

การโปรแกรมแบบมีโครงสร้าง หรือ การโปรแกรมโครงสร้าง ประกอบด้วยอะไรบ้าง

ผมขอตอบอย่างสั้น ๆ ว่าทุกภาษาต้องมีหลักการ 3 อย่างนี้คือ การทำงานแบบตามลำดับ(Sequence) การเลือกกระทำตามเงื่อนไข(Decision) และ การทำซ้ำ(Loop) แม้ตำราหลาย ๆ เล่มจะบอกว่า decision แยกเป็น if กับ case หรือ loop นั้นยังแยกเป็น while และ until ซึ่งแตกต่างกัน แต่ผมก็ยังนับว่าการเขียนโปรแกรม แบบมีโครงสร้างนั้น มองให้ออกแค่ 3 อย่างก็พอแล้ว และหลายท่านอาจเถียงผมว่าบางภาษาไม่จำเป็นต้องใช้ Structure Programming แต่เท่าที่ผมศึกษามา ยังไม่มีภาษาใด เลิกใช้หลักการทั้ง 3 นี้อย่างสิ้นเชิง เช่น MS Access ที่หลายคนบอกว่าง่าย ซึ่งก็อาจจะง่ายจริง ถ้าจะศึกษาเพื่อสั่งให้ทำงานตาม wizard หรือตามที่เขาออกแบบมาให้ใช้ แต่ถ้าจะนำมาใช้งานจริง ตามความต้องการของผู้ใช้แล้ว ต้องใช้ประสบการณ์ในการเขียน Structure Programming เพื่อสร้าง Module สำหรับควบคุม Object ทั้งหมดให้ทำงานประสานกัน

1. การทำงานแบบตามลำดับ(Sequence) : รูปแบบการเขียนโปรแกรมที่ง่ายที่สุดคือ เขียนให้ทำงานจากบนลงล่าง เขียนคำสั่งเป็นบรรทัด และทำทีละบรรทัดจากบรรทัดบนสุดลงไปจนถึงบรรทัดล่างสุด สมมติให้มีการทำงาน 3 กระบวนการคือ อ่านข้อมูล คำนวณ และพิมพ์ 2. การเลือกกระทำตามเงื่อนไข(Decision or Selection) : การตัดสินใจ หรือเลือกเงื่อนไขคือ เขียนโปรแกรมเพื่อนำค่าไปเลือกกระทำ โดยปกติจะมีเหตุการณ์ให้ทำ 2 กระบวนการ คือเงื่อนไขเป็นจริงจะกระทำกระบวนการหนึ่ง และเป็นเท็จจะกระทำอีกกระบวนการหนึ่ง แต่ถ้าซับซ้อนมากขึ้น จะต้องใช้เงื่อนไขหลายชั้น เช่นการตัดเกรดนักศึกษา เป็นต้น ตัวอย่างผังงานนี้ จะแสดงผลการเลือกอย่างง่าย เพื่อกระทำกระบวนการเพียงกระบวนการเดียว 3. การทำซ้ำ(Repeation or Loop) : การทำกระบวนการหนึ่งหลายครั้ง โดยมีเงื่อนไขในการควบคุม หมายถึงการทำซ้ำเป็นหลักการที่ทำความเข้าใจได้ยากกว่า 2 รูปแบบแรก เพราะการเขียนโปรแกรมแต่ละภาษา จะไม่แสดงภาพอย่างชัดเจนเหมือนการเขียนผังงาน ผู้เขียนโปรแกรมต้องจินตนาการด้วยตนเอง
โจทย์ที่ 1
- พิมพ์เลข 0 ถึง 4 ทางจอภาพ

ตัวอย่างผังงาน

โจทย์ที่ 2
- รับค่าจากแป้นพิมพ์เก็บลงตัวแปรอาร์เรย์ 5 ตัว
- แล้วทำซ้ำอีกครั้ง เพื่อหาค่าสูงสุด
ตัวอย่างผังงาน
อัลกอริทึม
1. กำหนดค่าเริ่มต้นให้ max, i และ ar
2. ทำซ้ำเพื่อรับค่าเก็บใน ar ให้ครบ 5 ครั้ง
3. กำหนดค่าเริ่มต้นให้ i อีกครั้ง
4. ทำซ้ำเพื่อนำค่าที่เก็บไว้ใน ar มาหาค่า max
5. พิมพ์ค่าสูงสุด ที่หาได้

คำถามที่ 3
- พิมพ์พีระมิดของตัวเลขดังตัวอย่าง
									Result112123123412345						
			
																		Source Code<?$i = 1;while ($i <= 5){  $j = 1;  while ($j <= $i) {    echo $j;    $j++;  }  echo "<br>";  $i++;}?>												
						

																		Source Code#include <iostream.h>#include <conio.h>void main() {  for(int i=1;i<=5;i++) {    for(int j=1;j<=i;j++) {      cout << j;    }    cout << "end" << '\n';  }  getch();}												
						


Download : diaflowchart01.dia
Dia - Diagram Drawing ใน ซีดีจันทรา (Download : Dia + GTK)
Dia (ไดอะ) เป็นโปรแกรมวาดภาพกราฟฟิกส์แบบเวกเตอร์ที่ออกแบบมา เพื่อให้ใช้ในการ เขียนไดอะแกรมโดยเฉพาะ สามารถเขียนไดอะแกรมได้หลายชนิดอย่างรวดเร็ว Dia มี ชุดออปเจคที่ช่วยในการวาด Entity Relationship Diagram, UML Diagram, Flowchart Diagram, Network Diagram ,วงจรไฟฟ้าอย่างง่าย ๆ รวมถึงไดอะแกรมอื่น นอกจากนี้ Dia ยังสามารถเพิ่มชุดออปเจคได้ด้วยการเขียนไฟล์ XML

สร้างโดย: 
เชษฐา จำเล

มหาวิทยาลัยศรีปทุม ผู้ใหญ่ใจดี
 

 ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง

ช่วยกันนะครับ 
ไทยกู๊ดวิวจะได้อยู่นานๆ 
ไม่ถูกปิดเสียก่อน

ขอขอบคุณในความร่วมมือครับ

อ่านรายละเอียด

ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558 
มีผลบังคับใช้แล้ว 
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ

 

สมาชิกที่ออนไลน์

ขณะนี้มี สมาชิก 0 คน และ ผู้เยี่ยมชม 574 คน กำลังออนไลน์