วิธีสร้างเว็บไซต์กระดานข้อความโดยใช้ PHP และ MYSQL: 5 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

คำแนะนำนี้จะแสดงวิธีสร้างเว็บไซต์กระดานข้อความโดยใช้ php, mysql, html และ css หากคุณยังใหม่ต่อการพัฒนาเว็บ ไม่ต้องกังวล จะมีคำอธิบายโดยละเอียดและการเปรียบเทียบเพื่อให้คุณเข้าใจแนวคิดได้ดีขึ้น

วัสดุที่จำเป็น:

• โปรแกรมแก้ไขข้อความ (เช่น Sublime Text, Atom ฯลฯ) ฉันจะใช้ข้อความประเสริฐ
• WAMP ย่อมาจาก Windows Apache MySQL และ PHP
• MAMP ย่อมาจาก Mac Apache MySQL และ PHP

MAMP สำหรับผู้ใช้ Mac: https://www.mamp.info/en/ (รวมถึง MySQL และ PHP)

WAMP สำหรับผู้ใช้ Windows: https://www.wampserver.com/en/ (รวมถึง MySQL และ PHP)

ข้อความประเสริฐ:

ขั้นตอนที่ 1: ภาพรวมโครงการ

วิธีติดตามข้อความคือเก็บไว้ในฐานข้อมูล ในบทช่วยสอนนี้ เราจะใช้ MySQL (ฉันใช้ WAMP เนื่องจากฉันมีระบบปฏิบัติการที่ใช้ windows)

1. กำหนดค่า PHP และ MySQL โดยตรวจสอบให้แน่ใจว่าได้ดาวน์โหลดแล้ว และคุณสามารถไปยังตำแหน่งไฟล์บนคอมพิวเตอร์ของคุณได้
2. เปิดพรอมต์คำสั่งและไปที่ไดเร็กทอรี mysql แล้วพิมพ์ "mysqladmin -u root -p password" คำสั่งนี้จะถามรหัสผ่านของคุณและให้คุณป้อนรหัสผ่านอีกครั้ง
3. ตอนนี้เริ่มเซิร์ฟเวอร์ WAMP หรือ MAMP ของคุณ จะมีไอคอนสีเขียวปรากฏขึ้นเมื่อเซิร์ฟเวอร์โหลดเสร็จ คลิกไอคอน -> MySQL -> คอนโซล MySQL เพื่อให้แน่ใจว่าคุณสามารถเข้าสู่ระบบด้วยรหัสผ่านที่สร้างขึ้นใหม่
4. ตอนนี้งานคือการสร้างฐานข้อมูลที่จะเก็บข้อมูลเกี่ยวกับข้อความ ลองนึกถึงสิ่งที่มักจะต้องการจากข้อความ รายการทั่วไป ได้แก่ ชื่อ เวลาที่โพสต์ข้อความ เวลาที่โพสต์ข้อความ และตัวข้อความเอง
5. สร้างฐานข้อมูลชื่อ "ข้อความ"
6. สร้างตารางชื่อ "ความคิดเห็น" และเพิ่มแถว: id (ประเภทจำนวนเต็มที่เพิ่มอัตโนมัติ), ชื่อ (ประเภท Varchar), ความคิดเห็น (ประเภท Varchar), เวลา (ประเภท Varchar), วันที่ (ประเภท Varchar),
7. เชื่อมต่อกับฐานข้อมูล "ข้อความ" ในชื่อไฟล์ php "db.php"
8. สร้างช่องป้อนข้อมูลสำหรับชื่อผู้เขียนและพื้นที่ข้อความสำหรับข้อความ
9. ตรวจสอบข้อมูลก่อนแทรกลงในฐานข้อมูล หากทุกอย่างเรียบร้อยดี ให้ใส่ข้อความ ชื่อผู้แต่ง วันที่และเวลาที่โพสต์
10. แสดงข้อความโดยดึงบันทึกฐานข้อมูลทั้งหมดลงใน html div และจัดรูปแบบหน้าโดยใช้ CSS
11. Horray คุณเรียนรู้การสร้างระบบส่งข้อความสำเร็จแล้ว

ขั้นตอนที่ 2: ขั้นตอนที่ 2 - ตั้งค่าฐานข้อมูล

ภาพที่ 1 - เมื่อสร้างฐานข้อมูลแล้ว คุณสามารถป้อนคำสั่ง 'แสดงฐานข้อมูล' เพื่อให้แน่ใจว่าสร้างฐานข้อมูลสำเร็จ

แสดงฐานข้อมูล;

ภาพที่ 2 - ในการจัดเก็บข้อมูลในฐานข้อมูล จำเป็นต้องสร้างตาราง การสร้างตารางที่มีแถวที่จำเป็นเป็นกุญแจสำคัญในการตรวจสอบให้แน่ใจว่าเว็บไซต์มีข้อมูลที่จำเป็นทั้งหมด ความคิดเห็นของตารางจะมีข้อมูลที่จำเป็นทั้งหมด

เพื่อให้สามารถเชื่อมต่อกับฐานข้อมูลข้อความ ให้ใช้คำสั่ง "GRANT ALL PRIVILEGES ON message.*" คุณสามารถใช้ชื่อผู้ใช้และรหัสผ่านของคุณเองได้ โปรดอย่าลืม

สร้างข้อความฐานข้อมูล ให้สิทธิ์ทั้งหมดบนข้อความ * ถึง 'ชื่อผู้ใช้' @ 'localhost' ที่ระบุโดย 'รหัสผ่าน';

รูปภาพที่ 3 - ป้อน 'อธิบายความคิดเห็น' เพื่อให้แน่ใจว่าสร้างตารางสำเร็จ คุณสามารถดูแถวและประเภทข้อมูลได้โดยออกคำสั่งนี้

อธิบายความคิดเห็น;

รูปที่ 4 - เนื่องจากแถวสำหรับความคิดเห็นไม่ได้อยู่ตรงนั้น ให้เพิ่มด้วยคำสั่ง ALTER TABLE ความคิดเห็นเป็นแบบ VARCHAR(255) ซึ่งหมายความว่าความคิดเห็นจะเป็นข้อความที่มีความยาวไม่เกิน 255 อักขระ

ALTER TABLE message ADD COLUMN ความคิดเห็น VARCHAR(255) NOT NULL;

255 หมายถึงความยาวสูงสุดสำหรับความคิดเห็น ไม่ null หมายความว่าเมื่อมีการแทรกข้อความลงในฐานข้อมูล ช่องแสดงความคิดเห็นในฐานข้อมูลต้องไม่ว่างเปล่า (null ไม่มีอยู่จริง)

ขั้นตอนที่ 3: สร้างไฟล์ Php

ขั้นตอนต่อไปนี้จะเกิดขึ้นในตัวแก้ไขข้อความที่คุณเลือก ฉันจะใช้ข้อความประเสริฐ

1. เราจะต้องสร้างสองไฟล์ หนึ่งจะเรียกว่า db.php ซึ่งจะเชื่อมต่อหรือเว็บไซต์กับฐานข้อมูล MYSQL (ภาษาการสืบค้นมาตรฐานของฉัน) และ index.php ซึ่งเป็นหน้าที่ของข้อความที่จะเกิดขึ้น

2. ขั้นแรก ให้สร้าง db.php เมื่อฐานข้อมูลถูกตั้งค่าข้อมูลประจำตัวการเชื่อมต่อเพื่อเชื่อมต่อกับฐานข้อมูล ไฟล์นี้จะเชื่อมต่อ index.php กับฐานข้อมูล เพื่อให้เราสามารถใส่ข้อมูลที่จำเป็นในการสร้างห้องสนทนา

รหัสสำหรับ db.php

?php define("DB_SERVER", "localhost");

กำหนด ("DB_USER", "kylel95"); กำหนด ("DB_PASSWORD", "รหัสผ่าน"); กำหนด ("DB_NAME", "ข้อความ"); $connect = mysqli_connect(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);

ถ้า(mysqli_connect_errno())

{ die("การเชื่อมต่อฐานข้อมูลล้มเหลว: ". mysqli_connect_error(). " (". mysqli_connect_errno(). ")"); }

?>

3. ต่อไป มาสร้าง index.php กัน ไฟล์นี้เป็นที่ที่เราสร้างห้องสนทนา เราจะใช้ช่องป้อนข้อมูลของ html สำหรับชื่อ พื้นที่ข้อความสำหรับข้อความ และองค์ประกอบ div เพื่อบรรจุข้อความ เราจะใช้ CSS (Cascase Style Sheet) เพื่อจัดตำแหน่งองค์ประกอบของหน้าและตกแต่งเนื้อหาของหน้า

รหัสสำหรับ index.php

?phprequire_once('db.php');

if(isset($_POST['submit'])) { $time = date("g:i:s A"); $date = date("n/j/Y"); $msg = $_POST['ข้อความ']; $name = $_POST['fname']; $result = ""; if(!empty($msg) && !empty($name)) { //name time date message $query = "INSERT INTO comments ("; $query.= " ชื่อ เวลา วันที่ ความคิดเห็น"; $query = ") ค่า ("; $query.= " '{$name}', '{$time}', '{$date}', '{$msg}' "; $query.= ")"; $result = mysqli_query($เชื่อมต่อ, $query); } } ?>

textarea { border-radius: 2%; } #thread { เส้นขอบ: 1px #d3d3d3 ทึบ; ความสูง: 350px; ความกว้าง: 350px; ล้น: เลื่อน; }

?php $select = "เลือก * จากความคิดเห็น"; $q = mysqli_query($เชื่อมต่อ, $เลือก); ในขณะที่($row = mysqli_fetch_array($q, MYSQLI_ASSOC)) { echo $row['name']. ": " $row['comment'].""; } ?> ชื่อ:ส่ง

4. เราจะใช้ฟังก์ชัน date() ของ php ที่บิวด์อิน เพื่อรับวันที่และเวลาที่ข้อความถูกโพสต์ และว่างเปล่า () เพื่อให้แน่ใจว่าผู้ใช้จะไม่ป้อนข้อความหรือชื่อว่างเปล่า

5. เมื่อส่งข้อมูลในแบบฟอร์มแล้ว เราจะใส่ชื่อ ข้อความ เวลาและวันที่ลงในฐานข้อมูล

6. ตอนนี้เราจะสอบถามจากฐานข้อมูลและรับความคิดเห็นทั้งหมด ความคิดเห็นจะถูกเก็บไว้ใน div

?>

ขั้นตอนที่ 4: เติมไฟล์ Db.php และ Index.php

1. db.php (db ย่อมาจากฐานข้อมูล) ใช้ชื่อผู้ใช้และรหัสผ่านที่ฉันใช้เมื่อสร้างฐานข้อมูลเมื่อฉันออกคำสั่ง "GRANT ALL PRIVILEGES"

ฟังก์ชันdefine ที่ด้านบนสุดของไฟล์ระบุว่าตัวแปร DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME เป็นค่าคงที่ (ไม่มีการเปลี่ยนแปลงค่า) คำสั่ง if ตรวจสอบว่าการเชื่อมต่อกับฐานข้อมูลล้มเหลวหรือไม่

2. ในไฟล์ index.php เราจะใช้ฟังก์ชัน require ของ php เพื่อเชื่อมต่อเพจกับฐานข้อมูล ถัดไป สร้างช่องป้อนข้อมูลสำหรับชื่อ จากนั้นทำ textarea สำหรับข้อความ เมื่อสร้างสิ่งเหล่านี้แล้ว ให้ไปที่ https://localhost:8080/messages/index.php (คุณอาจไม่มีหมายเลขพอร์ตเช่น 8080) เพื่อให้แน่ใจว่าคุณเห็นช่องป้อนข้อมูลและ textarea

3. ต่อไป ให้รวบรวมข้อมูลแบบฟอร์มแล้วแทรกลงในฐานข้อมูล

4. ตอนนี้ ให้เพิ่มการสืบค้นฐานข้อมูลและส่งออกข้อความทั้งหมดไปยัง div

5. เพื่อจัดรูปแบบสิ่งต่าง ๆ ให้ดีขึ้น มาเพิ่ม CSS เพื่อทำให้สวยขึ้นเล็กน้อย

PS: ฉันพิมพ์ผิด โปรดเปลี่ยน 'ข้อความ' เพื่อแสดงความคิดเห็นใกล้กับคำสั่ง INSERT สำหรับตัวแปร $query

ขั้นตอนที่ 5: ขั้นตอนที่ 5: ตัวอย่างและขั้นตอนถัดไป

หวังว่าคุณจะเห็นบางสิ่งที่คล้ายกับสิ่งที่อยู่ด้านบนหลังจากเพิ่ม css และทดสอบมัน

ขั้นตอนถัดไป: เพิ่ม css เพื่อทำให้ไซต์น่าสนใจยิ่งขึ้น