การสร้างเว็บด้วย Django อย่างง่าย

แนะนำ สอบถาม ภาษา C สำหรับผู้เริ่มต้น ภาษา Java ภาษา Python

Moderators: mindphp, ผู้ดูแลกระดาน

theoneozz
PHP Super Member
PHP Super Member
Posts: 313
Joined: 07/01/2019 12:19 pm

การสร้างเว็บด้วย Django อย่างง่าย

Post by theoneozz »

การสร้างเว็บด้วย Django อย่างง่าย
1.สร้างโปรเจ็กต์ชื่อ helloapp ด้วยคำสั่ง
...\scripts\mydjango>django-admin startproject helloapp <enter>

2.จากนั้นจะได้โฟลเดอร์มีโครงสร้างดังนี้
5.JPG
5.JPG (20.28 KiB) Viewed 502 times
- ไฟล์ settings.py
- ไฟล์ urls.py ใช้สำหรับการ map url ของระบบ

3.สร้าง app ชื่อ howdy ในโปรเจ็กต์ ดังนี้
...\sripts\mydjango\helloapp>python manage.py startapp howdy <enter>
จะได้โครงสร้างโฟล์เดอร์ดังนี้
5.JPG
5.JPG (20.28 KiB) Viewed 502 times
4.ทำการบอกให้โปรเจ็กต์ของเรารู้ว่ามี app ที่สร้างขึ้นชื่อ howdy โดยการปรับเเต่งพารามิเตอร์ในไฟล์ settings.py ดังนี้
5.JPG
5.JPG (20.28 KiB) Viewed 502 times
5.migration เพื่อใช้ในการจัดการกับตัวฐานข้อมูล ถ้าสร้างโมเดลฐานข้อมูลขึ้นใหม่ต้องทำ Migration ทุกครั้งในตัวอย่างนี้ไม่ได้ใช้ฐานข้อมูลจึงไม่ต้องทำ Migration อย่างไรก็ตามการทำ Migration ใช้คำสั่งดังนี้ >python manage.py migrate <enter>

6.กำหนด urls เเละ templates
6.1 กำหนด urls ของ project โดยให้ไปแก้ไขไฟล์ urls.py ที่ ...\helloapp\helloapp\urls.py ให้เป็นดังนี้
5.JPG
5.JPG (20.28 KiB) Viewed 502 times
6.2 กำหนด url ของ app ให้ไปสร้างไฟล์ urls.py ที่ ...\helloapp\howdy\เนื่องจากในโฟล์เดอร์นี้ไม่มีไฟล์นี้อยู่ โดยไฟล์ urls.py ใน howdy นี้มีรายละเอียดดังนี้
5.JPG
5.JPG (20.28 KiB) Viewed 502 times
7.สร้างไฟล์จัดการ view โดยแก้ไขไฟล์ views.py ที่ ...\helloapp\howdy\views.py ดังนี้
6.JPG
6.JPG (30.48 KiB) Viewed 502 times
8.ให้สร้างไฟล์ html template โดยไปที่โฟล์เดอร์ ...\helloapp\howdy\เเล้วสร้างไฟล์ index.html ในโฟล์เดอร์ Templates ดังตัวอย่าง
7.JPG
7.JPG (28.82 KiB) Viewed 502 times
9.กลับไปที่โฟล์เดอร์หลักของโหปรเจ็กต์ซึ่งมีไฟล์ manage.py อยู่ แล้วทำการรันเซิร์ฟเวอร์ดังนี้
...\helloapp\>python manage.py runserver <enter >จะได้หน้า console ดังนี้
8.JPG
8.JPG (42.99 KiB) Viewed 502 times
10.ไปที่เบราเซอร์ เรียกใช้ app ที่ช่อง url จะได้ผลลัพธ์ดังนี้
9.JPG
9.JPG (25.82 KiB) Viewed 502 times
11.ถ้าต้องการใส่ภาพหรือ static file อื่นๆ เช่น เสียง วิดีโอ หรือแม้แต่ไฟล์พวก css,javascript ให้ ดำเนินการดังนี้
11.1 ไปที่ไฟล์ Settings.py ให้ตรวจสอบว่าใน section INSTALLED_APPS มี app ชื่อ django.contrib.staticfiles ติดตั้งอยู่หรือไ่ ถ้าไม่มีให้เติมบรรทัดนี้ลงไป
10.JPG
10.JPG (38.94 KiB) Viewed 502 times
11.2 ในไฟล์ setting.py เช่นเดียวกันให้ตรวจสอบว่ามีบรรทัดนี้ปรากฏอยู่หรือไม่ ถ้าไม่มีให้เติมบรรทัดนี้ต่อท้ายดังนี้
11.JPG
11.JPG (23.81 KiB) Viewed 502 times
11.3 ในโฟล์เดอร์ของ app howdy ให้สร้างชื่อโฟล์เดอร์ชื่อ static จากนั้นเข้าไปใน static เเล้วสร้างโฟล์เดอร์ชื่อ image ให้หาภาพ 2 ภาพเเละตั้งชื่อ cat.jpg และ bktiger.jpg ใส่ไว้ในโฟล์เดอร์นี้

11.4 ให้แก้ไขไฟล์ index.html ดังนี้
12.JPG
12.JPG (60.14 KiB) Viewed 502 times
จาก Source Code ข้างต้นอธิบายได้ดังนี้
- บรรทัดหมายเลข (1) กับบรรทัดหมายเลข (3) จะทำงานร่วมกัน เรียกว่าเป็นการสร้าง tag ขึ้นมาใช้งาน บรรทัด(1) เป็นการโหลดแท็กที่สร้างขึ้นมาเพื่อใช้งาน บรรทัดที่ (3) เป็นการใช้งานเเท็กนั้น
- ส่วนบรรทัดหมายเลข (2) เป็นการเข้าถึงเนื้อหา media ที่สร้างขึ้นโดยตรงจากโฟล์เดอร์

11.5 จากข้อ 11.4 แสดงการเข้าถึงเนื้อหา media ได้ 2 วิธี จะใช้วิธีใดก็ได้

12.การโหลด ไฟล์ css เข้ามาใช้งาน ก็ทำลักษณะเดียวกันกับไฟล์ image ดังนี้
12.1 ภายในโฟล์เดอร์ static ให้สร้างโฟล์เดอร์ชื่อ css แล้วเข้าไปในโฟล์เดอร์นี้
12.2 สร้างไฟล์ css ชื่อ ch1.css มีเนื้อหาดังนี้
13.JPG
13.JPG (10.45 KiB) Viewed 502 times
12.3 แก้ไขไฟล์ index.html ดังนี้
14.JPG
14.JPG (60.69 KiB) Viewed 502 times
12.4 จะได้ผลลัพธ์ดังนี้
15.JPG
15.JPG (42.56 KiB) Viewed 502 times
13. ทดลองใช้งานไฟล์ Javascript ดังนี้
13.1 ไปที่โฟล์เดอร์ app howdy เเล้วเข้าไปในโฟล์เดอร์ ชื่อ static จากนั้นสร้างโฟล์เดอร์ชื่อ js
13.2 เข้าไปในโฟล์เดอร์ js เเล้วสร้างไฟล์ javascript ชื่อ mymsg.js มีโค้ดดังนี้
16.JPG
16.JPG (13.28 KiB) Viewed 502 times
13.3 ที่ไฟล์ index.html ในโฟล์เดอร์ templates ให้เเก้ดังนี้
17.JPG
17.JPG (69.36 KiB) Viewed 502 times
13.4 จะได้ผบลัพธ์มีปุ่มอยู่ด้านล่างเมื่อกดจะได้ผลดังนี้
18.JPG
18.JPG (36.68 KiB) Viewed 502 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “Programming - C/C++ & java & Python”

Who is online

Users browsing this forum: No registered users and 2 guests