0Pricing
Python For Kids · บทเรียน

การสร้างเว็บแอปพลิเคชันอย่างง่าย

สร้างเว็บแอปพลิเคชันแรกของคุณด้วย Flask

การสร้างเว็บแอปพลิเคชันอย่างง่าย เป็นบทเรียน Python For Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Python For Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Python For Kids มีบทเรียนทั้งหมด 4 บทเรียน

การสร้างเว็บแอปอย่างง่าย

เมื่อคุณเรียนรู้พื้นฐานของ Flask แล้ว ก็ถึงเวลาสร้างเว็บแอปพลิเคชันอย่างง่าย แอปนี้จะมีหลายเส้นทาง แม่แบบ HTML และการโต้ตอบบางส่วน

ในบทเรียนนี้ เราจะสร้างเว็บแอปพื้นฐานทีละขั้นตอน

การสร้างเว็บแอปพลิเคชันอย่างง่าย — ภาพประกอบ 1

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

สร้างโฟลเดอร์ใหม่สำหรับโครงการของคุณและเริ่มต้นสภาพแวดล้อมเสมือน:

python -m venv venv

เปิดใช้งานสภาพแวดล้อมเสมือนและติดตั้ง Flask:

pip install flask
# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

ขั้นตอนที่ 2: การสร้างโครงสร้างแอป

สร้างโฟลเดอร์และไฟล์ต่อไปนี้:

  • app.py: ไฟล์แอปพลิเคชันหลัก
  • templates/: โฟลเดอร์สำหรับแม่แบบ HTML
  • static/: โฟลเดอร์สำหรับไฟล์คงที่ เช่น CSS และรูปภาพ

ขั้นตอนที่ 3: การกำหนดเส้นทาง

ใน app.py ให้กำหนดเส้นทางสำหรับหน้าหลักและหน้าเกี่ยวกับ:

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

if __name__ == '__main__':
    app.run(debug=True)

ขั้นตอนที่ 4: การเพิ่มแม่แบบ

สร้างไฟล์ HTML ชื่อ home.html ภายในโฟลเดอร์ templates/:

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

ขั้นตอนที่ 5: การใช้ render_template

อัปเดตเส้นทาง home และ about ให้ใช้แม่แบบ:

# Using templates
from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

ขั้นตอนที่ 6: การเพิ่มไฟล์แบบคงที่

สร้างไฟล์ style.css ภายในโฟลเดอร์ static/ แล้วเชื่อมโยงไฟล์นั้นใน home.html:

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

ขั้นตอนที่ 7: การเรียกใช้แอป

เรียกใช้แอปพลิเคชัน Flask ของคุณ:

python app.py

เปิดเบราว์เซอร์และไปที่ http://127.0.0.1:5000/ เพื่อดูเว็บแอปของคุณขณะทำงาน

ข้อผิดพลาดที่พบบ่อยเมื่อสร้างเว็บแอป

ต่อไปนี้คือข้อผิดพลาดที่ควรหลีกเลี่ยง:

  • ไม่จัดระเบียบโครงสร้างแอป (เช่น ไม่มีโฟลเดอร์ templates/ และ static/)
  • กำหนด URL แบบตายตัวแทนการใช้ url_for()
  • ไม่ทดสอบแอปในโหมดแก้ไขข้อผิดพลาด

เราเรียนรู้อะไรไปบ้าง

ในบทเรียนนี้ คุณได้เรียนรู้:

  • วิธีตั้งค่าโครงสร้างโครงการ Flask
  • วิธีกำหนดเส้นทางและใช้แม่แบบ
  • วิธีรวมไฟล์แบบคงที่ เช่น CSS ไว้ในแอปของคุณ
  • วิธีเรียกใช้แอปพลิเคชัน Flask และดูแอปในเบราว์เซอร์

ทำได้ดีมาก ไปต่อยังหัวข้อถัดไปกันเถอะ

การสร้างเว็บแอปพลิเคชันอย่างง่าย — ภาพประกอบ 11

คำถามที่พบบ่อย

บทเรียน “การสร้างเว็บแอปพลิเคชันอย่างง่าย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างเว็บแอปพลิเคชันอย่างง่าย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Python For Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Python For Kids มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างเว็บแอปพลิเคชันอย่างง่าย”

สร้างเว็บแอปพลิเคชันแรกของคุณด้วย Flask คุณปฏิบัติ Python For Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Python For Kids หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Python For Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างเว็บแอปพลิเคชันอย่างง่าย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Python For Kids นี้ได้ไหม

ได้ บทเรียน Python For Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐานของ Web Framework
  2. บทนำสู่ Flask
  3. การสร้างเว็บแอปพลิเคชันอย่างง่าย
  4. การเชื่อมต่อ Python กับฐานข้อมูล
← กลับไปที่ Python For Kids