เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Posted: **08/01/2019 1:14 pm**

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

2.จากนั้นจะได้โฟลเดอร์มีโครงสร้างดังนี้

: 1.JPG (14.95 KiB) Viewed 2023 times

- ไฟล์ settings.py
- ไฟล์ urls.py ใช้สำหรับการ map url ของระบบ

3.สร้าง app ชื่อ howdy ในโปรเจ็กต์ ดังนี้
...\sripts\mydjango\helloapp>python manage.py startapp howdy <enter>
จะได้โครงสร้างโฟล์เดอร์ดังนี้

: 2.JPG (19.83 KiB) Viewed 2023 times

4.ทำการบอกให้โปรเจ็กต์ของเรารู้ว่ามี app ที่สร้างขึ้นชื่อ howdy โดยการปรับเเต่งพารามิเตอร์ในไฟล์ settings.py ดังนี้

: 3.JPG (18.53 KiB) Viewed 2023 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 (42.99 KiB) Viewed 2024 times

10.ไปที่เบราเซอร์ เรียกใช้ app ที่ช่อง url จะได้ผลลัพธ์ดังนี้

: 9.JPG (25.82 KiB) Viewed 2024 times

11.ถ้าต้องการใส่ภาพหรือ static file อื่นๆ เช่น เสียง วิดีโอ หรือแม้แต่ไฟล์พวก css,javascript ให้ ดำเนินการดังนี้
11.1 ไปที่ไฟล์ Settings.py ให้ตรวจสอบว่าใน section INSTALLED_APPS มี app ชื่อ django.contrib.staticfiles ติดตั้งอยู่หรือไ่ ถ้าไม่มีให้เติมบรรทัดนี้ลงไป

: 10.JPG (38.94 KiB) Viewed 2024 times

11.2 ในไฟล์ setting.py เช่นเดียวกันให้ตรวจสอบว่ามีบรรทัดนี้ปรากฏอยู่หรือไม่ ถ้าไม่มีให้เติมบรรทัดนี้ต่อท้ายดังนี้

: 11.JPG (23.81 KiB) Viewed 2024 times

11.3 ในโฟล์เดอร์ของ app howdy ให้สร้างชื่อโฟล์เดอร์ชื่อ static จากนั้นเข้าไปใน static เเล้วสร้างโฟล์เดอร์ชื่อ image ให้หาภาพ 2 ภาพเเละตั้งชื่อ cat.jpg และ bktiger.jpg ใส่ไว้ในโฟล์เดอร์นี้

11.4 ให้แก้ไขไฟล์ index.html ดังนี้

: 12.JPG (60.14 KiB) Viewed 2024 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 (10.45 KiB) Viewed 2024 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 จะได้ผลลัพธ์ดังนี้

13. ทดลองใช้งานไฟล์ Javascript ดังนี้
13.1 ไปที่โฟล์เดอร์ app howdy เเล้วเข้าไปในโฟล์เดอร์ ชื่อ static จากนั้นสร้างโฟล์เดอร์ชื่อ js
13.2 เข้าไปในโฟล์เดอร์ js เเล้วสร้างไฟล์ javascript ชื่อ mymsg.js มีโค้ดดังนี้

: 16.JPG (13.28 KiB) Viewed 2024 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 จะได้ผบลัพธ์มีปุ่มอยู่ด้านล่างเมื่อกดจะได้ผลดังนี้

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

Posted: **08/01/2019 9:12 pm**

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

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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

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

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