กล่องตะโกนมือวัสดุก่อสร้าง PHP การกำหนดชื่อผู้ใช้ ระบบอัตโนมัติของกระบวนการทดสอบ

คุณต้องการที่จะมีมินิแชทบนเว็บไซต์ของคุณหรือไม่? ฉันคิดว่าหลายคนจะพูดว่า "ใช่" วันนี้เราจะมาดูมินิแชทของ Shoutbox ที่ยอดเยี่ยม ซึ่งทำงานบน php, mysql และ jQuery ก่อนที่คุณจะเริ่ม ให้ชมการสาธิต (หลังจากนั้นฉันแนะนำให้คุณอ่านบทเรียนให้จบเพื่อไม่ให้ด่วนสรุป)

มันไม่เจ๋งเหรอ? ตอนนี้เรามาพูดถึงวิธีการดำเนินการดังกล่าวกัน

สคริปต์ใช้ฐานข้อมูล Mysql ในการทำงาน มาสร้างตาราง Shoutbox ในฐานข้อมูลเพื่อทำให้งานง่ายขึ้น ฉันจะให้แบบสอบถาม SQL สำเร็จรูปแก่คุณ:

สร้างตาราง `กล่องข้อความ` (
`id` INT(5) ไม่เป็นโมฆะ AUTO_INCREMENT
`วันที่` การประทับเวลาไม่เป็นโมฆะ
`ผู้ใช้` VARCHAR(25) ไม่เป็นโมฆะ
`ข้อความ` VARCHAR(255) ไม่เป็นโมฆะ
คีย์หลัก (`id`)
) ชุดตัวละคร = utf8;

ไฟล์ SHOUTBOX.php ประมวลผลข้อความ ค้นหาในนั้น บรรทัดต่อไปนี้และแก้ไข:

กำหนด ("HOST", "โฮสต์ MySql ของคุณ - โดยปกติจะเป็น localhost");
กำหนด("USER", "ชื่อผู้ใช้ MySql");
กำหนด("รหัสผ่าน", "รหัสผ่านสำหรับ MySql ของคุณ");
กำหนด("DB", "ชื่อ DB");

ฉันคิดว่าไม่น่าจะมีปัญหาใด ๆ ในเรื่องนี้ :) การตั้งค่าเพิ่มเติมอีกสองสามรายการในไฟล์เดียวกัน:

ส่วนหัว ("ตำแหน่ง: index.html"); $res = getContent($ลิงค์, 50);

header - ที่นี่เราจะส่งผู้ใช้ที่ไม่ระมัดระวังซึ่งพยายามเรียกไฟล์ SHOUTBOX.php โดยตรงไปยังหน้า index.html
getContent($link, 50) - จำนวนโพสต์ต่อหน้า ใน ในตัวอย่างนี้ข้อความล่าสุด 50 ข้อความจะถูกเลือก

ตอนนี้เข้าแล้ว ในสถานที่ที่เหมาะสมแทรกแบบฟอร์มสำหรับส่งข้อความและคอนเทนเนอร์ div ที่จะมี ข้อความล่าสุดแชท:

แบบฟอร์มปกติที่มีอินพุต 3 ช่อง หลังจากแบบฟอร์มจะมี div#container อย่าสับสนกับการมีแท็ก p เดียว ข้อความทั้งหมดจะแสดงเป็น

ชื่อ-ข้อความ

(ดูไฟล์ SHOUTBOX.php) และในตอนท้ายเราเชื่อมต่อ jQuery และสคริปต์ Shoutbox.js เอง (คุณสามารถทำได้แบบดั้งเดิมระหว่างแท็ก head)

CSS ที่นี่รับผิดชอบเท่านั้น รูปร่างแชท. ดังนั้นเราจะไม่พิจารณาอย่างละเอียดในบทเรียนนี้ เพียงอย่าลืมใส่สไตล์จากไฟล์ css/general.css บนเพจของคุณ หรือดีกว่านั้น ให้สร้างการออกแบบที่กำหนดเอง สิ่งเดียวที่ควรจำไว้ก็คือ id และคลาสจากโค้ดด้านบนนั้นก็ใช้โดยสคริปต์ SHOUTBOX.js ด้วย ดังนั้นหากคุณเปลี่ยนชื่อ ID และคลาสเป็นของคุณเอง อย่าลืมทำใน SHOUTBOX.js ด้วยเช่นกัน

นั่นคือทั้งหมดสำหรับวันนี้ ให้บทเรียนนี้เป็นของขวัญสำหรับคุณในช่วงวันหยุด May Day ฉันคิดว่าคุณจะพบสถานที่สำหรับใช้มินิแชทนี้;)

ป.ล. สำหรับผู้ที่ต้องการแชทที่สมบูรณ์ยิ่งขึ้นจากสคริปต์นี้ เรามาแก้ไขสคริปต์ต้นฉบับกันเล็กน้อย:

แนวคิดก็คือเราจะอัปเดตเนื้อหาของหน้าต่างแชทผ่านทาง เวลาที่แน่นอน- ในการทำเช่นนี้ เราจำเป็นต้องมีปลั๊กอินที่จะทำให้งาน jquery.timers.js ง่ายขึ้นอย่างมาก เราเชื่อมต่อมันตามปกติ และเพิ่มบรรทัดต่อไปนี้ใน SHOUTBOX.js:

$(".content > p").everyTime(30000, function() (
$.อาแจ็กซ์((
ประเภท: "POST", url: "shoutbox.php", ข้อมูล: "action=update",
สมบูรณ์: ฟังก์ชั่น (ข้อมูล) (
กำลังโหลด.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("เร็ว");
}
});

everyTime(30000) - เวลาเป็นมิลลิวินาที หลังจากนั้นเนื้อหาหน้าต่างจะถูกอัพเดต ในตัวอย่างคือ 30 วินาที
ดาวน์โหลดปลั๊กอินด้วย Shoutbox.js ที่แก้ไขแล้ว การสาธิตใช้งานได้ตามเวอร์ชันดั้งเดิม แต่คุณสามารถทดสอบสคริปต์ที่อัปเดตบนเว็บไซต์ของคุณได้อย่างง่ายดาย

ป.ล. แก้ไขปัญหาตัวอักษร “ฉัน” และ “ช”
ฉันตัดสินใจแทนที่ตัวอักษรเหล่านี้ด้วยอักขระจาก "ตารางอักขระ Unicode" ค้นหาบรรทัดตัวพิมพ์ "insert": (บรรทัดที่ 66) ในไฟล์ SHOUTBOX.php และแทนที่เนื้อหาของเคสด้วยโค้ดนี้: เขียน กฎถัดไป:

$message = str_replace("sh", "sh", $_POST["ข้อความ"]); $message = str_replace("และ", "และ", $ข้อความ); $nick = str_replace("sh", "sh", $_POST["nick"]); $nick = str_replace("และ", "และ", $นิค); echo insertMessage($นิค, $ข้อความ);

วิธีแก้ปัญหานั้นค่อนข้างง่าย: ก่อนที่จะเพิ่มข้อความใหม่ลงในฐานข้อมูลเราเพียงแทนที่ตัวอักษรที่มีปัญหาด้วยตัวอักษรเดียวกัน แต่เป็นเวอร์ชันสัญลักษณ์

ในบทช่วยสอนนี้ เราจะสร้างกล่องตะโกนด้วย PHP และ jQuery ซึ่งช่วยให้ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถแสดงความคิดเห็นสั้น ๆ ให้กันและกันได้ เสียงตะโกนจะถูกจัดเก็บไว้บนเซิร์ฟเวอร์ในรูปแบบไฟล์ โดยไม่จำเป็นต้องมีฐานข้อมูลเช่น MySQL เราจะใช้ไลบรารี PHP สองไลบรารีเพื่อทำให้สิ่งต่าง ๆ ง่ายขึ้น - มู่เล่สำหรับจัดเก็บการตะโกนเป็นไฟล์ json และ RelativeTime สำหรับการสร้างการประทับเวลาสัมพันธ์ที่มนุษย์สามารถอ่านได้ เราจะใช้ Composer เพื่อติดตั้งไลบรารีเหล่านี้

ในฝั่งไคลเอ็นต์ เราใช้โค้ด jQuery ธรรมดาและไลบรารี Emoji One ซึ่งเป็นโปรเจ็กต์และไลบรารีฟรีสำหรับเพิ่มอิโมจิสวยๆ ให้กับเว็บแอป เอาล่ะ!

เรียกใช้กล่องตะโกน

คุณสามารถคว้าซอร์สโค้ดได้จากปุ่มดาวน์โหลดด้านบน มีความคิดเห็นมากมายและง่ายต่อการติดตาม หากต้องการเรียกใช้ เพียงอัปโหลดไปยังพื้นที่เว็บโฮสติ้งของคุณ หรือเพิ่มลงในโฟลเดอร์ apache htdocs หากคุณเรียกใช้ XAMPP หรือ MAMP จากนั้น เปิด http://localhost ในเบราว์เซอร์ของคุณ (หรือเว็บไซต์ของคุณ หากคุณอัปโหลดไปยังพื้นที่โฮสติ้งของคุณ) ต่อไปนี้คือบางสิ่งที่ควรมองหา:

• ไฟล์ zip มีการขึ้นต่อกันอยู่แล้ว ดังนั้นคุณไม่จำเป็นต้องติดตั้ง Composer ซึ่งทำให้ง่ายต่อการเริ่มต้นใช้งานโค้ด เพียงอัปโหลดและใช้งาน!
• ตรวจสอบให้แน่ใจว่าไดเร็กทอรี data/shouts มีอยู่และสามารถเขียนได้ มิฉะนั้น คุณจะดูข้อผิดพลาดในบันทึกของคุณ ไฟล์และจะไม่มีการตะโกนใด ๆ เก็บไว้ คุณอาจต้อง chmod เป็น 777 หากคุณยังเห็นข้อผิดพลาดอยู่
HTML

เริ่มจาก index.html กันก่อน ซึ่งเป็นเอกสาร HTML5 ทั่วไป ซึ่งรวมถึงไลบรารี JavaScript สคริปต์ และสไตล์ชีตของเรา ต่อไปนี้คือส่วนต่างๆ ที่เกี่ยวข้องกับ Shoutbox:

index.html กล่องตะโกน เขียนข้อความ × ข้อความชื่อเล่น

ด้วย JavaScript เราจะแทรกเสียงตะโกนที่เผยแพร่ลงใน

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

กล่องสนทนาด้วย PHP และ jQuery

รหัสจาวาสคริปต์

และนี่คือ script.js ของเรา ซึ่งทำให้ HTML ข้างต้นใช้งานได้:

Assets/js/script.js $(function())( // การจัดเก็บองค์ประกอบบางอย่างในตัวแปรสำหรับโค้ดพื้นฐานที่สะอาดกว่า var RefreshButton = $("h1 img"), SHOUTBOXForm = $(".shoutbox-form"), form = SHOUTBOXForm.find("form"), closeForm = SHOUTBOXForm.find("h2 span"), nameElement = form.find("#shoutbox-name"), commentElement = form.find("#shoutbox-comment"), ul = $("ul.shoutbox-content"); // แทนที่ :) ด้วยไอคอนอิโมจิ: emojione.ascii = true; // โหลดความคิดเห็น (); เผยแพร่การตะโกนไปยังฐานข้อมูล var canPostComment = true; form.submit(function(e)( e.preventDefault(); if(!canPostComment) return; var name = nameElement.val().trim(); var comment = commentElement .val().trim(); if(name.length && comment.length && comment.length< 240) { publish(name, comment); // Prevent new shouts from being published canPostComment = false; // Allow a new comment to be posted after 5 seconds setTimeout(function(){ canPostComment = true; }, 5000); } }); // Toggle the visibility of the form. shoutboxForm.on("click", "h2", function(e){ if(form.is(":visible")) { formClose(); } else { formOpen(); } }); // Clicking on the REPLY button writes the name of the person you want to reply to into the textbox. ul.on("click", ".shoutbox-comment-reply", function(e){ var replyName = $(this).data("name"); formOpen(); commentElement.val("@"+replyName+" ").focus(); }); // Clicking the refresh button will force the load function var canReload = true; refreshButton.click(function(){ if(!canReload) return false; load(); canReload = false; // Allow additional reloads after 2 seconds setTimeout(function(){ canReload = true; }, 2000); }); // Automatically refresh the shouts every 20 seconds setInterval(load,20000); function formOpen(){ if(form.is(":visible")) return; form.slideDown(); closeForm.fadeIn(); } function formClose(){ if(!form.is(":visible")) return; form.slideUp(); closeForm.fadeOut(); } // Store the shout in the database function publish(name,comment){ $.post("publish.php", {name: name, comment: comment}, function(){ nameElement.val(""); commentElement.val(""); load(); }); } // Fetch the latest shouts function load(){ $.getJSON("./load.php", function(data) { appendComments(data); }); } // Render an array of shouts as HTML function appendComments(data) { ul.empty(); data.forEach(function(d){ ul.append("
• "+ "" + d.name + ""+ "

  " + emojione.toImage(d.text) + "

  "+ "ตอบกลับ"+ "" + d.timeAgo + ""+ "
"); }); } });

ไลบรารี Emoji One มีเวอร์ชันสำหรับทั้ง JavaScript และ PHP ในเมธอด appendComments เราใช้ฟังก์ชัน emojione.toImage() เพื่อแปลงหน้ายิ้มที่พิมพ์ไว้ทั้งหมดให้เป็นอีโมจิ ดูฟังก์ชันทั้งหมดที่รองรับ และดูเว็บไซต์โค้ดอิโมจิที่มีประโยชน์นี้ เมื่อส่วนหน้าพร้อมแล้ว เรามาต่อที่ส่วนหลังกันดีกว่า

รหัส PHP

เรามีสองไฟล์ - publish.php และ load.php รายการแรกยอมรับคำขอ POST สำหรับการตะโกนที่เก็บไว้ในที่เก็บข้อมูล และรายการที่สองส่งคืนการตะโกนล่าสุด 20 ครั้ง ผู้เยี่ยมชมไม่ได้เปิดไฟล์เหล่านี้โดยตรง แต่จะจัดการเฉพาะคำขอ AJAX เท่านั้น

เผยแพร่.php