ทำระบบเว็บหนังออนไลน์ด้วย DJANGO: แสดงผลหน้าเว็บดูหนังออนไลน์ โดย ทำเว็บไปกับคุณพ่อ
หมวดหมู่ การฝึกพัฒนาซอฟต์แวร์ | เขียนโดยคุณ ทำเว็บไปกับคุณพ่อ

ทำระบบเว็บหนังออนไลน์ด้วย DJANGO: แสดงผลหน้าเว็บดูหนังออนไลน์

โพสต์เมื่อ 4 เดือน ago | มีผู้อ่านทั้งหมด 268 คน

บทความอื่นๆ ของ ทำเว็บไปกับคุณพ่อ


หลังจากในบทความที่แล้ว.. เราได้ทำความเข้าใจในเรื่องของ URL และหลักการทำงานของ URL ในระบบของ Django กันไปแล้ว ต่อมาก็จะเป็นส่วนที่เรียกได้ว่าสำคัญมากๆ อีกส่วนสำหรับการใช้งานระบบดูหนังออนไลน์ของเรา นั้นก็คือไฟล์ที่ชื่อว่า views.py นั้นเอง โดยในส่วนนี้เราสามารถกำหนด Logic ต่างๆ ที่จะให้หน้าเว็บของเรานั้นแสดงผลออกมาได้ และเรียกได้ว่าเป็นไฟล์ที่ค่อนข้างสำคัญในการที่จะพัฒนาโปรเจคด้วย Django จริงๆ ครับ 


มาดูในไฟล์ views.py กันสักหน่อย

สำหรับขั้นตอนแรกนั้นให้เราเปิดไฟล์ views.py ที่อยู่ภายใน โฟลเดอร์ movie ในโปรเจคของเราขั้นมาก่อน โดยภายในไฟล์จะมีข้อความปรากฏประมาณนี้  เตือนความจำกันเล็กน้อย.. การที่เราใช้ เครื่องหมาย "#" ในหน้าบรรทัด เป็นการบอกไม่ให้โปรแกรมที่เขียนด้วยภาษา Python ของเราอ่านบรรทัดนี้ครับ

from django.shortcuts import render
# Create your views here.


จากนั้นให้เราทำการเพิ่มข้อมูลในไฟล์ views.py กันสักเล็กน้อย

from django.shortcuts import render
# Create your views here.
def index(request):
    return render(request, 'frontend/index.html', {})


เป็นการสร้างฟังก์ชั่นที่ชื่อว่า index ขึ้นมาและเราจะสั่งให้ทุกๆ ครั้งที่มาการเรียกฟังกชั่น index จะไปเรียกหาไฟล์ index.html ในโฟลเดอร์ movie ครับ.. หลังจากนั้นให้กดบันทึกไฟล์และลองใช้คำสั่ง python manage.py runserver อีกครั้งจะเห็นว่า. มันก็ยังเข้าหน้าเว็บไม่ได้เลยนิหว่า...ถ้าขึ้นแบบนี้แสดงว่าเรามาถูกทางแล้วครับ 555



เริ่มต้นเกี่ยวกับ Template และ HTML 

     สำหรับ Django นั้นไฟล์ Template เปรียบเหมือนไฟล์ที่เราใช้สำหรับในการนำเสนอข้อมูลต่างๆ หรือแบบฟอร์มที่เราใช้ในการทำเสนองานต่างๆ นั้นเองครับ.. ถ้าจะให้ยกตัวอย่างก็เหมือนกับ PowerPoint ที่มีแม่แบบต่างๆ ออกมาให้เราเลือกตอนเปิดใช้งานโปรแกรม หรือ Photoshop , Canvas ที่มีรูปแบบขนาดภาพต่างๆ ไว้ให้เราเลือกก่อนออกแบบผลงาน เป็นต้น ครับ แต่สำหรับใน Django นั้น Template จะเป็นการเรียกภาษา HTML ออกมาแสดงผล ซึ่งแน่นอนว่าหน้าเว็บส่วนใหญ่ที่เราเจอกันบนอินเตอร์เน็ต ก็แสดงผลด้วย HTML เหมือนกันทั้งสิ้น


แล้ว HTML คืออะไรล่ะมาพูดถึงทำไม?

     ถ้าว่ากันตามภาพง่ายๆ HTML คือโค้ดที่เว็บเบราว์เซอร์ของเรานำมาตีความแสดงผลออกมาให้เราได้ชมกัน นกตัวอย่างเช่น Chrome, Firefox หรือ Safari เป็นต้น ส่วน HTML ย่อมาจาก "HyperText Markup Language" ซึ่งมาจากการผสมของคำว่า HyperText ที่เป็นการลิงค์โยงไปมาระหว่างหน้าเว็บไซต์ และ  Markup Language หมายความว่าแต่ละส่วนที่พูดถึงนั้นคืออะไร เช่น <head> คือส่วนหัว <body> ส่วนเนื้อหา หรือ <footer>ส่วนท้ายของหน้าเว็บเป็นต้น


มาลองสร้าง Template แรกกันดีกว่า

     ให้เราสร้างไฟล์เดอร์ที่ชื่อว่า templates ขึ้นมาในโฟลเดอร์ของ movie ของเรา


     และหลังจากสร้างเสร็จแล้วให้เราสร้างโฟลเดอร์ frontend ขึ้นมาอีกที และภายใน โฟลเดอร์ frontend  ให้เราสร้างไฟล์ชื่อว่า index.html ขึ้นมา สำหรับใครที่งง PATH จะเป็นประมาณนี้นะ

├───movie
│   ├───migrations
│   │   └───__pycache__
│   ├───templates
│       └───frontend
│   
└───moviesite


เมื่อสร้างเสร็จแล้วในไฟล์ index.html ให้เราใส่ข้อความไปประมาณนี้

<!DOCTYPE html> 
<html lang="en"> ## เริ่มการทำงานของภาษา HTML
<head> ### เปิดส่วนหัวข้อง HTML เพื่อที่จะประกาศค่าต่างๆ เช่น Title หรือ CSS เป็นต้น
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> ### ใส่ชื่อ Title ข้อมูลตรงนี้จะปรากฏตรงส่วน Tab ด้านบนตอนเราเข้าเว็บไซต์
</head> ## ปิดส่วนหัว
<body> ### เปิดส่วนเนื้อหาของ HTML เพื่อที่เราจะได้ใส่เนื้อหาต่างๆ
    <h1>สวัสดีเพื่อนๆ ที่มาอ่าน needhobby.</h1> ### H1 จะเป็นข้อความพาดหัวขนาดใหญ่ส่วนในภาษา HTML
</body>## ปิดเนื่้อหา
</html> ## ปิดการทำการของภาษา HTML

      หลังจากนั้นให้กดบันทึกไฟล์และลองใช้คำสั่ง python manage.py runserver อีกครั้งจะเห็นว่ามันก็ยังไม่ได้อยู่ดีใช้ไหมครับ 555. ในขั้นตอนนี้ให้เรากลับไปที่ไฟล์ setting.py ที่เราเคยทำกันในตอนแรกๆ กันก่อน หรือถ้าใครหาไม่เจอ ก็บทความนี้ ทำระบบเว็บหนังออนไลน์ด้วย DJANGO: สร้างเว็บหน้าแรก ครับ สำหรับใครที่อ่านมาถึงตรงนี้ต้องขอบอกว่าขอบคุณมากๆ จริงๆ ครับ ที่อ่านของผมรู้เรื่อง 555.

เอาล่ะมาเข้าเรื่องกันต่อ ที่ยังเข้าหน้าเว็บหน้าแรกของเราไม่ได้เป็นเพราะว่าเรายังไม่ได้ระบุข้อมูลของ templates ลงไปในส่วนของ setting.py ครับ ให้ระบุไปตามดังนี้ จากนั้นให้เรา save และใช้คำสั่ง  python manage.py runserver อีกครั้ง

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


ซึ่งผลลัพธ์ที่ออกมาก็จะเป็นหน้าตาแบบนี้ หลังจากเข้าไปยังหน้า 127.0.0.1:8000


เริ่มเป็นรูปเป็นร่าง แสดงผลข้อมูลได้แล้วว

คิดเห็นยังไงกับบทความของ ทำเว็บไปกับคุณพ่อ



บทความมาใหม่ที่อยากให้ลองอ่าน