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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การสร้างเว็บด้วย Django อย่างง่าย ด้วย Python Part 1

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

by mindphp » 08/01/2019 9:12 pm

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

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

by theoneozz » 08/01/2019 1:14 pm

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

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

3.สร้าง app ชื่อ howdy ในโปรเจ็กต์ ดังนี้
...\sripts\mydjango\helloapp>python manage.py startapp howdy <enter>
จะได้โครงสร้างโฟล์เดอร์ดังนี้
2.JPG
2.JPG (19.83 KiB) Viewed 2024 times
4.ทำการบอกให้โปรเจ็กต์ของเรารู้ว่ามี app ที่สร้างขึ้นชื่อ howdy โดยการปรับเเต่งพารามิเตอร์ในไฟล์ settings.py ดังนี้
3.JPG
3.JPG (18.53 KiB) Viewed 2024 times
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 ดังตัวอย่าง

Code: Select all

<!DOCTYPE html> 
<html>
 <head>
 <meta charset="utf-8"> 
<title>Page nina</title> 
</head> 
<body>
<h1>This is a Heading</h1> 
<p>This is a paragraph.</p> 
<h2>สวัสดี</h2>
</body> 
</html>
9.กลับไปที่โฟล์เดอร์หลักของโหปรเจ็กต์ซึ่งมีไฟล์ manage.py อยู่ แล้วทำการรันเซิร์ฟเวอร์ดังนี้
...\helloapp\>python manage.py runserver <enter >จะได้หน้า console ดังนี้
8.JPG
8.JPG (42.99 KiB) Viewed 2025 times
10.ไปที่เบราเซอร์ เรียกใช้ app ที่ช่อง url จะได้ผลลัพธ์ดังนี้
9.JPG
9.JPG (25.82 KiB) Viewed 2025 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 2025 times
11.2 ในไฟล์ setting.py เช่นเดียวกันให้ตรวจสอบว่ามีบรรทัดนี้ปรากฏอยู่หรือไม่ ถ้าไม่มีให้เติมบรรทัดนี้ต่อท้ายดังนี้
11.JPG
11.JPG (23.81 KiB) Viewed 2025 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 2025 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 2025 times
12.3 แก้ไขไฟล์ index.html ดังนี้

Code: Select all

<!DOCTYPE html> 
<html> 
<head>
 <meta charset="utf-8"> 
<title>Page สวัสดี</title>
<link rel="stylesheet" href="static/css/blueh1.css"> 
</head> 
<body> 
{% load static %} 
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p> 
<h2>สวัสดี</h2> 
<img src="static/image/dog.jpg"
alt="My dog" style="width: 250px; height: 200px;"><br> 
<img src="{% static "image/bktiger.jpg" %}"
alt="Black Tiger" style="width: 250px; height: 200px;"/> 
</body> 
</html>
12.4 จะได้ผลลัพธ์ดังนี้
Image

13. ทดลองใช้งานไฟล์ Javascript ดังนี้
13.1 ไปที่โฟล์เดอร์ app howdy เเล้วเข้าไปในโฟล์เดอร์ ชื่อ static จากนั้นสร้างโฟล์เดอร์ชื่อ js
13.2 เข้าไปในโฟล์เดอร์ js เเล้วสร้างไฟล์ javascript ชื่อ mymsg.js มีโค้ดดังนี้
16.JPG
16.JPG (13.28 KiB) Viewed 2025 times
13.3 ที่ไฟล์ index.html ในโฟล์เดอร์ templates ให้เเก้ดังนี้

Code: Select all

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Page aia</title>
 <link rel="stylesheet" href="static/css/blueh1.css"> 
<script type="text/javascript" src="static/js/mymsg.js"></script> 
</head> 
<body>
 {% load static %} 
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p> 
<h2>สวัสดี</h2> 
<img src="static/image/dog.jpg"
alt="My dog" style="width: 250px; height: 200px;"><br> 
<img src="{% static "image/bktiger.jpg" %}"
alt="Black Tiger" style="width: 250px; height: 200px;"/> 
<form>
<input type="button" value="click" onclick="msg()"/> </form> </body> </html>
13.4 จะได้ผบลัพธ์มีปุ่มอยู่ด้านล่างเมื่อกดจะได้ผลดังนี้
Image

จากโปรแกรมนี้ จะเป็นการสร้างเว็บด้วย Django Framework อย่างง่ายด้วย Python โดยภายในจะมีการเเนะนำตั้นเเต่วิธีการสร้างโปรเจค จนไปถึงการทดสอบหน้าเว็บที่สร้างขึ้นมา
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Python
- บทเรียนเกี่ยวกับ Python
- ถาม - ตอบเกี่ยวกับเรื่อง Python (606)
- ความรู้เกี่ยวกับ Python (160)
- VDO สอนเขียน Python (51)
- VDO สอนใช้ PostgreSQL

Top