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 ดังตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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>
...\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 ดังนี้
โค้ด: เลือกทั้งหมด
<!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>
13. ทดลองใช้งานไฟล์ Javascript ดังนี้
13.1 ไปที่โฟล์เดอร์ app howdy เเล้วเข้าไปในโฟล์เดอร์ ชื่อ static จากนั้นสร้างโฟล์เดอร์ชื่อ js
13.2 เข้าไปในโฟล์เดอร์ js เเล้วสร้างไฟล์ javascript ชื่อ mymsg.js มีโค้ดดังนี้ 13.3 ที่ไฟล์ index.html ในโฟล์เดอร์ templates ให้เเก้ดังนี้
โค้ด: เลือกทั้งหมด
<!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>
จากโปรแกรมนี้ จะเป็นการสร้างเว็บด้วย Django Framework อย่างง่ายด้วย Python โดยภายในจะมีการเเนะนำตั้นเเต่วิธีการสร้างโปรเจค จนไปถึงการทดสอบหน้าเว็บที่สร้างขึ้นมา
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Python
- บทเรียนเกี่ยวกับ Python
- ถาม - ตอบเกี่ยวกับเรื่อง Python (606)
- ความรู้เกี่ยวกับ Python (160)
- VDO สอนเขียน Python (51)
- VDO สอนใช้ PostgreSQL