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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 2

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

โดย theoneozz » 08/01/2019 2:24 pm

ต่อจาก
การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 1
viewtopic.php?f=144&t=52720

การสร้างการเชื่อมโยงระหว่างเพจ
1.ถ้า app ที่สร้างขึ้นใน part 1 ถ้ามีการสร้างไฟล์เพิ่มเติมคือไฟล์ about.html จะมีโครงสร้างดังนี้

โค้ด: เลือกทั้งหมด

helloapp---manage.py 
             ---helloapp---...
             ---howdy---...
             ---templates---index.htm
                                ---page2.html
2.จากโครงสร้าง project ข้างต้น ความต้องการคือ ให้สร้าง link เชื่อมโยงจากไฟล์ index.html ไปยัง page2.html ในขณะเดียวกัน เมื่อเปิดไฟล์ aabout.html เเล้วให้สามารถคลิกเมาส์กลับมาไฟล์ index.html ได้ด้วย (index.html คือ HomePage)
3.แก้ไขไฟล์ index.html โดยเพิ่มประโยค 2 ประโยคนนี้นี้ไว้ภายใน<body>...</body> บริเวณใดก็ได้ตามต้องการ ในที่นี้วางไว้ส่วนล่างสุด จากนั้นแก้ไขไฟล์ page2.html ดังนี้
a1.png
a1.png (154.83 KiB) Viewed 1840 times
ไฟล์ index.html
Link แรกเป็นการเรียกใช้เพจภายนอก ใช้งานได้ทันที
Link ที่สองเป็นการเรียกใช้เพจภายใน ยังใช้งานไม่ได้ ต้องทำการแก้ไข
a2.png
a2.png (152.47 KiB) Viewed 1840 times
ไฟล์ page2.html
บรรทัดที่ขีดเส้นใต้คือบรรทัดที่มีการสร้าง link เพื่อกลับไปหน้าเเรกหรือ HomePage
4.จากข้อ 3 Link ที่ 2 ที่เรียกใช้เพจ page2.html จะยังใช้ไม่ได้ จนกว่าจะต้องดำเนินการต่อไปนี้เเล้ว
4.1 แก้ไขไฟล์ urls.py ในโฟล์เดอร์ howdy โดยเพิ่ม Path ดังนี้
a3.png
a3.png (113.1 KiB) Viewed 1840 times
4.2 แก้ไขไฟล์ views.py ในโฟล์เดอร์ howdy โดยเพิ่มคลาสสำหรับจัดการเพจ page2.html
a4.png
a4.png (134.4 KiB) Viewed 1840 times
5.ผลลัพธ์ที่ได้
หน้า index.html
a5.png
a5.png (199.62 KiB) Viewed 1840 times
หน้า Page2.html
a6.png
a6.png (44.67 KiB) Viewed 1840 times
สรุป โปรแกรมนี้จะต่อจากส่วนที่เเล้ว โดยจะมีการเพิ่มหน้า Page2.html เข้ามาเพื่อทดสอบการเชื่อมต่อระหว่างเว็บเพจทั้งสองเว็บ
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Python
- บทเรียนเกี่ยวกับ Python
-ถาม - ตอบเกี่ยวกับเรื่อง Python (606)
- ความรู้เกี่ยวกับ Python (160)
- VDO สอนเขียน Python (51)
- VDO สอนใช้ PostgreSQL

ข้างบน