การสร้างเว็บด้วย Django อย่างง่าย
1.สร้างโปรเจ็กต์ชื่อ helloapp ด้วยคำสั่ง
...\scripts\mydjango>django-admin startproject helloapp <enter>
2.จากนั้นจะได้โฟลเดอร์มีโครงสร้างดังนี้
- ไฟล์ settings.py
- ไฟล์ urls.py ใช้สำหรับการ map url ของระบบ
3.สร้าง app ชื่อ howdy ในโปรเจ็กต์ ดังนี้
...\sripts\mydjango\helloapp>python manage.py startapp howdy <enter>
จะได้โครงสร้างโฟล์เดอร์ดังนี้
4.ทำการบอกให้โปรเจ็กต์ของเรารู้ว่ามี app ที่สร้างขึ้นชื่อ howdy โดยการปรับเเต่งพารามิเตอร์ในไฟล์ settings.py ดังนี้
5.migration เพื่อใช้ในการจัดการกับตัวฐานข้อมูล ถ้าสร้างโมเดลฐานข้อมูลขึ้นใหม่ต้องทำ Migration ทุกครั้งในตัวอย่างนี้ไม่ได้ใช้ฐานข้อมูลจึงไม่ต้องทำ Migration อย่างไรก็ตามการทำ Migration ใช้คำสั่งดังนี้ >python manage.py migrate <enter>
6.กำหนด urls เเละ templates
6.1 กำหนด urls ของ project โดยให้ไปแก้ไขไฟล์ urls.py ที่ ...\helloapp\helloapp\urls.py ให้เป็นดังนี้
6.2 กำหนด url ของ app ให้ไปสร้างไฟล์ urls.py ที่ ...\helloapp\howdy\เนื่องจากในโฟล์เดอร์นี้ไม่มีไฟล์นี้อยู่ โดยไฟล์ urls.py ใน howdy นี้มีรายละเอียดดังนี้
7.สร้างไฟล์จัดการ view โดยแก้ไขไฟล์ views.py ที่ ...\helloapp\howdy\views.py ดังนี้
8.ให้สร้างไฟล์ html template โดยไปที่โฟล์เดอร์ ...\helloapp\howdy\เเล้วสร้างไฟล์ index.html ในโฟล์เดอร์ Templates ดังตัวอย่าง
9.กลับไปที่โฟล์เดอร์หลักของโหปรเจ็กต์ซึ่งมีไฟล์ manage.py อยู่ แล้วทำการรันเซิร์ฟเวอร์ดังนี้
...\helloapp\>python manage.py runserver <enter >จะได้หน้า console ดังนี้
10.ไปที่เบราเซอร์ เรียกใช้ app ที่ช่อง url จะได้ผลลัพธ์ดังนี้
11.ถ้าต้องการใส่ภาพหรือ static file อื่นๆ เช่น เสียง วิดีโอ หรือแม้แต่ไฟล์พวก css,javascript ให้ ดำเนินการดังนี้
11.1 ไปที่ไฟล์ Settings.py ให้ตรวจสอบว่าใน section INSTALLED_APPS มี app ชื่อ django.contrib.staticfiles ติดตั้งอยู่หรือไ่ ถ้าไม่มีให้เติมบรรทัดนี้ลงไป
11.2 ในไฟล์ setting.py เช่นเดียวกันให้ตรวจสอบว่ามีบรรทัดนี้ปรากฏอยู่หรือไม่ ถ้าไม่มีให้เติมบรรทัดนี้ต่อท้ายดังนี้
11.3 ในโฟล์เดอร์ของ app howdy ให้สร้างชื่อโฟล์เดอร์ชื่อ static จากนั้นเข้าไปใน static เเล้วสร้างโฟล์เดอร์ชื่อ image ให้หาภาพ 2 ภาพเเละตั้งชื่อ cat.jpg และ bktiger.jpg ใส่ไว้ในโฟล์เดอร์นี้
11.4 ให้แก้ไขไฟล์ index.html ดังนี้
จาก 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 มีเนื้อหาดังนี้
12.3 แก้ไขไฟล์ index.html ดังนี้
12.4 จะได้ผลลัพธ์ดังนี้
13. ทดลองใช้งานไฟล์ Javascript ดังนี้
13.1 ไปที่โฟล์เดอร์ app howdy เเล้วเข้าไปในโฟล์เดอร์ ชื่อ static จากนั้นสร้างโฟล์เดอร์ชื่อ js
13.2 เข้าไปในโฟล์เดอร์ js เเล้วสร้างไฟล์ javascript ชื่อ mymsg.js มีโค้ดดังนี้
13.3 ที่ไฟล์ index.html ในโฟล์เดอร์ templates ให้เเก้ดังนี้
13.4 จะได้ผบลัพธ์มีปุ่มอยู่ด้านล่างเมื่อกดจะได้ผลดังนี้
การสร้างเว็บด้วย Django อย่างง่าย
Moderators: mindphp, ผู้ดูแลกระดาน
-
- PHP Super Member
- Posts: 313
- Joined: 07/01/2019 12:19 pm
-
- Similar Topics
- Replies
- Views
- Last post
-
-
การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 1
by theoneozz » 08/01/2019 1:14 pm » in Python Knowledge - 1 Replies
- 1987 Views
-
Last post by mindphp
08/01/2019 9:12 pm
-
-
-
การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 2
by theoneozz » 08/01/2019 2:24 pm » in Python Knowledge - 1 Replies
- 1078 Views
-
Last post by Marigold
08/01/2019 4:14 pm
-
-
- 1 Replies
- 567 Views
-
Last post by mindphp
14/06/2019 3:30 pm
-
- 2 Replies
- 3415 Views
-
Last post by konseo
15/02/2011 2:06 am
-
- 0 Replies
- 81 Views
-
Last post by tsukasaz
29/11/2017 10:36 am
-
- 0 Replies
- 1319 Views
-
Last post by napharat079
18/04/2019 6:21 pm
-
-
วิธีสร้างหมวดหมู่ของบทความให้กับ WordPress อย่างง่าย
by M032 » 12/01/2016 4:56 pm » in Wordpress user Guide Knowledge - 0 Replies
- 2453 Views
-
Last post by M032
12/01/2016 4:56 pm
-
-
- 0 Replies
- 737 Views
-
Last post by pnut
29/08/2016 10:23 am
Who is online
Users browsing this forum: Google Adsense [Bot] and 5 guests