วิธีสร้างสคริปต์แสดงความคิดเห็นแบบง่ายๆ ระบบแสดงความคิดเห็นอย่างง่ายโดยใช้ AJAX ความคิดเห็นบน Facebook: ข้อดีและข้อเสีย

ในบทนี้ ฉันจะพูดถึงวิธีการแสดงความคิดเห็นใน HTML, CSS, PHP ความคิดเห็นคือข้อความที่ไม่ปรากฏบนหน้าเว็บ ใช้สำหรับคำอธิบาย การเตือนความจำ และคำอธิบายประเภทต่างๆ สำหรับผู้ดูแลเว็บ ซึ่งช่วยให้คุณสามารถจัดโครงสร้างเอกสารได้ ความคิดเห็นเป็นสิ่งที่ขาดไม่ได้เมื่อแก้ไขโค้ดทำให้คุณสามารถนำทางมาร์กอัปของหน้าเว็บได้อย่างรวดเร็วและค้นหาบล็อกที่ต้องการ ความคิดเห็นมักจะใช้ในการดีบักโค้ด HTML ตัวอย่างเช่น คุณสามารถคอมเม้นต์บล็อกโค้ดเฉพาะเป็นการชั่วคราวได้ เพื่อที่จะไม่ถูกดำเนินการ และหากจำเป็น คุณสามารถกู้คืนได้อย่างง่ายดาย

ความคิดเห็นในรูปแบบ HTML

ใน HTML ความคิดเห็นจะถูกสร้างขึ้นโดยใช้อักขระ: . ดังนั้นข้อความใด ๆ ระหว่างอักขระเหล่านี้ถือเป็นความคิดเห็น ลองดูตัวอย่าง:

ตัวอย่างความคิดเห็นในรูปแบบ HTML

ความคิดเห็นใน CSS

ความคิดเห็นใน CSS ถูกสร้างขึ้นโดยใช้อักขระ: /* และ */ หากต้องการแสดงความคิดเห็น คุณเพียงแค่ต้องวางโค้ดหน้าเว็บระหว่างอักขระเหล่านี้:

/* เริ่มต้นบล็อกด้วยสไตล์สำหรับ Body*/ body ( พื้นหลัง: #efeded; ตระกูลฟอนต์: Verdana, Helvetica, sans-serif; ขนาดตัวอักษร: 12px; ระยะขอบ: 0px; การขยาย: 0px; ) /* สิ้นสุดของ บล็อกที่มีสไตล์สำหรับ Body*/ Comments ใน PHP

ความคิดเห็นใน PHP อาจเป็นบรรทัดเดียวหรือหลายบรรทัด:

1) ความคิดเห็นบรรทัดเดียวใน PHP ถูกสร้างขึ้นโดยใช้อักขระ: // เพียงวางอักขระนี้ไว้หน้าบรรทัด จากนั้นจะมีการใส่ความคิดเห็น ตัวเลือกนี้ใช้ในกรณีที่ความคิดเห็นประกอบด้วยบรรทัดเดียว

2) ในการใช้ความคิดเห็นแบบหลายบรรทัด จะใช้สัญลักษณ์ต่อไปนี้: /* และ */ ตัวเลือกนี้มีประโยชน์หากความคิดเห็นครอบคลุมหลายบรรทัด

เราจึงเรียนรู้ที่จะทำ

คราวนี้ เรากำลังสร้างระบบการแสดงความคิดเห็น AJAX แบบง่ายๆ นี่จะสาธิตวิธีการบรรลุการทำงานร่วมกันอย่างมีประสิทธิภาพระหว่าง JQuery และ PHP/MySQL โดยใช้ JSON ระบบทำงานในลักษณะที่เพิ่มความคิดเห็นลงในเพจโดยไม่มีความคิดเห็น รีบูตเต็มรูปแบบทำให้รู้สึกเหมือนว่าไซต์ทำงานเฉพาะบนคอมพิวเตอร์ของผู้ใช้เท่านั้น จึงหลีกเลี่ยงความจำเป็นในการรอเป็นระยะเวลาหนึ่งเพื่อโหลดหน้าเว็บใหม่พร้อมความคิดเห็นที่เพิ่มเข้ามา

นี่เป็นการสาธิตคร่าวๆ เกี่ยวกับสิ่งที่เราวางแผนจะนำไปใช้:

ขั้นตอนที่ 1 - XHTML

ก่อนอื่น มาดูมาร์กอัปความคิดเห็นกันก่อน รหัสนี้สร้างโดย PHP ในความคิดเห็น ซึ่งเราจะมาดูกันในอีกสักครู่

สาธิต.php ชื่อ 30 กรกฎาคม 2553

ความคิดเห็น

Div ของคลาสอวาตาร์มีไฮเปอร์ลิงก์ที่สอดคล้องกับอวตาร (หากผู้ใช้ระบุลิงก์ที่ถูกต้องไปยังอวตารเมื่อส่งความคิดเห็น) เช่นจาก Gravatar.com เราจะกลับมาที่สิ่งนี้อีกครั้งเมื่อเราทำงานกับ PHP สุดท้ายนี้ เรามีชื่อและเวลาอยู่ใน DIV เช่นเดียวกับความคิดเห็น ซึ่งก็คือข้อความในย่อหน้า

องค์ประกอบที่สำคัญอีกประการหนึ่งของส่วน XHTML คือแบบฟอร์มส่งความคิดเห็น (ต้องระบุทุกช่องยกเว้นช่อง URL)

สาธิต.php

เพิ่มความคิดเห็น

ชื่อของคุณ? อีเมลของคุณ?

อวตารของคุณคืออะไร? (ไม่บังคับ) คุณต้องการจะพูดอะไร?

ขั้นตอนที่ 2 - PHP PHP จัดการการเชื่อมต่อฐานข้อมูลข้อมูลมายเอสคิวแอล

และสร้างมาร์กอัปความคิดเห็น นอกจากนี้ AJAX ยังใช้ต่อท้ายและแทรกความคิดเห็นลงในตารางความคิดเห็น คุณสามารถดูรหัสที่แสดงความเห็นได้ที่หน้าด้านล่างนี้

Demo.php /* / เลือกความคิดเห็นทั้งหมดและกรอก $comments array */ $comments = array(); $result = mysql_query("SELECT * จากความคิดเห็น เรียงตาม id ASC"); ในขณะที่($row = mysql_fetch_assoc($result)) ( $comments = ความคิดเห็นใหม่($row); )

แบบสอบถาม MySQL ดึงข้อมูลรายการทั้งหมดจากฐานข้อมูลและเติมอาร์เรย์ $comments ด้วยอ็อบเจ็กต์คลาสความคิดเห็นที่คุณเห็นด้านล่าง อาร์เรย์นี้จะถูกส่งออกหลังจากเรียกใช้สคริปต์

Demo.php /* / แสดงความเห็นทีละรายการ */ foreach($comments as $c)( echo $c->markup(); )

ความคิดเห็นแต่ละรายการมีวิธีมาร์กอัป () ซึ่งสร้างโค้ด HTML สำหรับการพิมพ์หน้าเว็บ คุณสามารถดูวิธีการและคลาสนี้ด้านล่าง

Comment.class.php – ขั้นตอนที่ 1 ความคิดเห็นของคลาส ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( / */ เมธอดนี้จะส่งออกมาร์กอัปความคิดเห็น XHTML */ // สร้างนามแฝงเพื่อที่เราจะได้ไม่ต้อง // เขียน $this->ข้อมูลข้อมูลทุกครั้ง: $d = &$this->data $link_open = ""; = ""; if($d["url"])( // หากบุคคลนั้นกรอก URL เมื่อ // เพิ่มความคิดเห็น // กำหนดไฮเปอร์ลิงก์ $link_open = ""; $link_close = ""; ) // การแปลงเวลา $d[ "dt"] = strtotime($d["dt"]); // จำเป็นสำหรับรูปภาพ Gravatar เริ่มต้น: $url = "http://".dirname($_SERVER["SERVER_NAME"]. $ _SERVER["REQUEST_URI "])."/img/default_avatar.gif"; กลับ " ".$link_open" ".$link_close"

".$link_open.$d["name"].$link_close"

1, "html"=>$insertedComment->มาร์กอัป())); ) else ( /* แสดงข้อความแสดงข้อผิดพลาด */ echo "("status":0,"errors///.json_encode($arr).")""; )

send.php รับข้อมูลความคิดเห็นเป็นคำขอ AJAX โดยจะตรวจสอบและสร้างออบเจ็กต์ JSON ไม่ว่าจะเป็นมาร์กอัป XHTML ที่แสดงผลสำเร็จ หรือรายการข้อความแสดงข้อผิดพลาด JQuery ใช้สถานะความเป็นเจ้าของเพื่อกำหนดว่าควรแสดงข้อความแสดงข้อผิดพลาดหรือควรเพิ่มความคิดเห็นมาร์กอัปหน้า

คุณสามารถดูสองตัวอย่างด้านล่าง ขั้นตอนที่ 1 - XHTMLก่อนอื่น มาดูมาร์กอัปความคิดเห็นกันก่อน รหัสนี้ .

สร้างโดย PHP พร้อมคลาส ความคิดเห็น

สาธิต.php

ชื่อผู้ใช้ 30 มิ.ย. 2553 ข้อความแสดงความคิดเห็นกอง ชื่อผู้ใช้ 30 มิ.ย. 2553 อวตาร ชื่อผู้ใช้ 30 มิ.ย. 2553 มีลิงก์ (หากผู้ใช้ป้อน URL ที่ถูกต้องเมื่อโพสต์ความคิดเห็น) และรูปภาพประจำตัวซึ่งเราได้รับจาก Gravatar.com เราจะกลับไปสร้างมาร์กอัปในขั้นตอน PHP ในที่สุดก็ตามมาชื่อ

เวลา

และข้อความแสดงความคิดเห็น

เพิ่มความคิดเห็น

องค์ประกอบที่สำคัญอีกประการหนึ่งใน XHTML คือแบบฟอร์มแสดงความคิดเห็น มันถูกส่งโดยใช้ POST ต้องกรอกทุกช่องยกเว้น URL

สาธิต.php ชื่อ อีเมล เว็บไซต์ (ไม่บังคับ) เนื้อหาความคิดเห็นแบบฟอร์มถูกส่งโดยใช้ AJAX การตรวจสอบจะดำเนินการใน พื้นหลังใน send.php แต่ละฟิลด์มีองค์ประกอบที่สอดคล้องกัน ฉลาก.

พร้อมชุดแอตทริบิวต์

สำหรับ

demo.php /* / เลือกความคิดเห็นทั้งหมดและกรอก $comments array ด้วย object */ $comments = array(); $result = mysql_query("SELECT * จากความคิดเห็น เรียงตาม id ASC"); ในขณะที่($row = mysql_fetch_assoc($result)) ( $comments = ความคิดเห็นใหม่($row); )

แบบสอบถาม MySQL เลือกรายการทั้งหมดจากตารางและเติมอาร์เรย์ $comments ด้วยวัตถุคลาส ความคิดเห็น. อาร์เรย์นี้จะแสดงเพิ่มเติมเมื่อมีการเรียกใช้สคริปต์

demo.php /* / พิมพ์ความคิดเห็นทีละรายการ: */ foreach($comments as $c)( echo $c->markup(); )

ความคิดเห็นแต่ละรายการมีเมธอดมาร์กอัป () ที่สร้างโค้ด HTML ที่ถูกต้อง ซึ่งพร้อมที่จะแสดงบนเพจ ด้านล่างนี้คือคำจำกัดความของคลาสและเมธอด

คลาสได้รับแถวจากฐานข้อมูล (ได้รับโดยใช้ mysql_fetch_assoc()) และเก็บไว้ในตัวแปร $data ใช้ได้เฉพาะกับวิธีการเรียนเท่านั้น

comment.class.php - ส่วนที่ 1 ความคิดเห็นของคลาส ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( / */ วิธีการนี้ส่งออกมาร์กอัป XHTML สำหรับความคิดเห็น */ // ตั้งนามแฝงเพื่อที่เราจะได้ไม่ต้องเขียน $this->data ทุกครั้ง: $d = &$this->data; $link_open = "";

$link_close = "";

"; }

if($d["url"])( // หากใส่ URL เมื่อเพิ่มความคิดเห็น // กำหนดแท็กเปิดและแท็กปิดของลิงก์ $link_open = ""; $link_close = ""; ) // Convert เวลาในรูปแบบ UNIX: $d["dt"] = strtotime($d["dt"]);

// จำเป็นต้องตั้งค่ารูปภาพเริ่มต้น: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif";

comment.class.php - ส่วนที่ 2 public static function validate(&$arr) ( /* / วิธีการนี้ใช้ในการตรวจสอบข้อมูลที่ส่งผ่าน AJAX / / มันจะคืนค่าจริง/เท็จขึ้นอยู่กับความถูกต้องของข้อมูล และเติม / $arr array ซึ่งถูกส่งผ่านเป็นพารามิเตอร์ไม่ว่าจะเป็นข้อมูลหรือเป็นข้อความแสดงข้อผิดพลาด */ $errors = array(); $data = array(); // ใช้ฟังก์ชัน filter_input ที่นำมาใช้ใน PHP 5.2.0 if( !($data["email" ] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "กรุณากรอกอีเมลที่ถูกต้อง"; ) if(!($data["url "] = filter_input(INPUT_POST," url",FILTER_VALIDATE_URL))) ( // หากป้อน URL ไม่ถูกต้องในช่อง URL // ให้ทำเสมือนว่าไม่ได้ป้อน URL: $url = ""; ) // ใช้ ตัวกรองที่มีฟังก์ชันโทรกลับ: if(!( $data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors[ "body"] = "กรุณากรอกข้อความความคิดเห็น "; ) if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text" )))) ( $errors["name" ] = "กรุณาระบุชื่อ";

) if(!empty($errors))( // หากมีข้อผิดพลาด ให้คัดลอกอาร์เรย์ $errors ไปที่ $arr: $arr = $errors; return false; ) // หากป้อนข้อมูลถูกต้อง ให้ล้างข้อมูลและ คัดลอกไปที่ $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // อีเมลจะต้องเป็นตัวพิมพ์เล็ก: $arr["email"] = strtolower (ตัดแต่ง($ arr["อีเมล"]));

กลับเป็นจริง; - validate() วิธีการ (ยังเป็นส่วนหนึ่งของชั้นเรียน) ถูกกำหนดเป็นแบบคงที่ ซึ่งหมายความว่าสามารถเรียกได้โดยตรงโดยใช้โครงสร้าง Comment::validate() โดยไม่ต้องสร้างคลาสอ็อบเจ็กต์ วิธีนี้จะตรวจสอบข้อมูลที่ส่งผ่าน AJAX วิธีการใช้คุณลักษณะใหม่

filter ซึ่งมีให้ใช้งานใน PHP 5.2.0 วิธีนี้ทำให้เราสามารถตรวจสอบและกรองข้อมูลที่ส่งไปยังสคริปต์ได้อย่างง่ายดาย ตัวอย่างเช่น, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)หมายความว่าเรากำลังตรวจสอบว่า $_POST["url"] เป็น URL ที่ถูกต้องหรือไม่ หากเป็นเช่นนั้น ฟังก์ชันจะส่งกลับค่าของตัวแปร มิฉะนั้นจะส่งกลับค่า false ก่อนที่จะใช้ฟังก์ชันนี้คุณต้องใช้). การแสดงออกปกติเพื่อตรวจสอบข้อมูล (โดยใช้ชุดการออกแบบ

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

comment.class.php - ส่วนที่ 3 ฟังก์ชันคงที่ส่วนตัว validate_text($str) ( /* / เมธอดนี้ใช้เป็น FILTER_CALLBACK */ if(mb_strlen($str,"utf8")