งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

1 พัฒนาเว็บแอพลิเคชัน ด้วย Django ปฏิบัติการเกี่ยวกับวิศวกรรม คอมพิวเตอร์ (01204223) ผศ. ดร. ชัยพร ใจแก้ว ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "1 พัฒนาเว็บแอพลิเคชัน ด้วย Django ปฏิบัติการเกี่ยวกับวิศวกรรม คอมพิวเตอร์ (01204223) ผศ. ดร. ชัยพร ใจแก้ว ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์"— ใบสำเนางานนำเสนอ:

1 1 พัฒนาเว็บแอพลิเคชัน ด้วย Django ปฏิบัติการเกี่ยวกับวิศวกรรม คอมพิวเตอร์ ( ) ผศ. ดร. ชัยพร ใจแก้ว ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์

2 2 แนะนำ Django เฟรมเวิร์คสำหรับสร้างเว็บแอพลิเคชัน พัฒนาด้วยภาษาไพธอน 2.x ( ยังไม่ รองรับ 3.x) ตัวอย่างเว็บที่สร้างด้วย Django  Washington Post (http://www.washingtonpost.com)http://www.washingtonpost.com  Guadian.co.uk  E-Labsheet (http://cloud3.cpe.ku.ac.th/elab)http://cloud3.cpe.ku.ac.th/elab "The Web Framework for Perfectionists with Deadlines"

3 3 เอกสาร HTML ประกอบด้วยข้อความและแท็ก (Tag) ช่องว่างที่มากกว่าหนึ่งช่องและการขึ้น บรรทัดใหม่ไม่มีผลต่อเอกสาร Example Hello Welcome to my homepage. เปิด แท็ก ปิด แท็ก ไฟล์ html ผลลัพธ์บนบราวเซอร์ Example Hello Welcome to my homepage.

4 4 การตอบสนองคำร้องขอ ใน Django Database Views /views.py URL resolver urls.py Models /models.py Templates templates/*.html Request Response Client (Web browser) Server (Web App)

5 5 สร้างโปรเจ็คใหม่ สร้างโปรเจ็คชื่อ myweb ภายในโปรเจ็ค myweb สร้างแอพ ฯ ชื่อ shape หมายเหตุ : ภายในหนึ่งโปรเจ็คมีได้ หลายแอพลิเคชัน $ django-admin startproject myweb $ cd myweb $./manage.py startapp shape

6 6 ระบุแอพฯ ที่ต้องการใช้ งาน แก้ไขไฟล์ settings.py โดยเพิ่ม shape เข้าไปในรายการแอพลิเค ชันที่ใช้ : INSTALLED_APPS = ( 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.sites', 'django.contrib.messages', 'shape', # Uncomment the next line to enable the admin: # 'django.contrib.admin', # Uncomment the next line to enable admin documentation: # 'django.contrib.admindocs', ) (settings.py)

7 7 สร้างวิวแรก สร้างวิวชื่อ index ใน shape/views.py หมายเหตุ : ทุกวิวฟังก์ชันจะต้องรับ request เป็นอาร์กิวเมนต์แรกเสมอ from django.http import HttpResponse def index(request): return HttpResponse('Hello') (shape/views.py)

8 8 กำหนดวิวให้รูทพาธ (/) ระบุให้พาธ / ถูกส่งไปประมวลผล โดยวิว index โดยแก้ไขไฟล์ urls.py from django.conf.urls.defaults import * # Uncomment the next two lines to enable the admin: # from django.contrib import admin # admin.autodiscover() urlpatterns = patterns('', url(r'^$', 'shape.views.index'), # Example: # (r'^first/', include('first.foo.urls')), # Uncomment the admin/doc line below to enable admin documentation: # (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: # (r'^admin/', include(admin.site.urls)), ) regular expression (urls.py)

9 9 ทดสอบแอพลิเคชัน รันเว็บเซิร์ฟเวอร์ผ่าน manage.py กรอก ลงใน ช่อง Location ของเว็บบราวเซอร์http:// :8000/  หรือพิมพ์ ก็ได้เช่นกันhttp://0:8000 $./manage.py runserver Validating models... 0 errors found Django version 1.2.5, using settings 'myweb.settings' Development server is running at Quit the server with CONTROL-C.

10 10 เทมเพลท สำหรับเอกสารที่ซับซ้อน การสร้างอ็อบ เจ็กต์ HttpResponse โดยตรงจากวิวเป็น เรื่องยุ่งยาก  ต้องสั่งพิมพ์ tag ต่าง ๆ เอาเอง Django มีทางลัดในการสร้าง HttpResponse จาก " เทมเพลท " (Template) ที่เตรียมไว้ล่วงหน้า เทมเพลทมีลักษณะเหมือนเอกสาร HTML  ให้ Web Designer เป็นผู้สร้างให้ ไม่ใช่ โปรแกรมเมอร์  สร้างได้สะดวกโดยอาศัยซอฟต์แวร์ประเภท HTML Editor เช่น DreamWeaver, Kompozer

11 11 สร้างเทมเพลท index.html เตรียมไดเรคตอรีให้เทมเพลท สร้างเอกสาร templates/index.html ดัง แสดง ( ใช้โปรแกรม Kompozer หรือ ซอฟต์แวร์ HTML Editor ใดก็ได้ ) $ mkdir templates ใช้รูปแบบ H1 สร้างลิ้งค์ไปที่ shape/rectangle/, shape/circle/ และ shape/triangle/ ตามลำดับ Horizontal Bar ใส่ชื่อตัวเอง (templates/index.html)

12 12 กำหนดที่เก็บเทมเพลท แก้ไขไฟล์ settings.py เพื่อระบุที่ อยู่ของเทมเพลท import os PROJECT_DIR = os.path.dirname(__file__) : TEMPLATE_DIRS = ( os.path.join(PROJECT_DIR, 'templates'), ) (settings.py)

13 13 เรียกใช้งานเทมเพลทจาก วิว แก้ไขฟังก์ชัน index ใน shape/views.py  ใช้ทางลัด render_to_response สร้างอ็อบเจ็กต์ HttpResponse จาก เทมเพลท รีโหลดหน้าเว็บเพื่อดูความถูกต้อง from django.http import HttpResponse from django.shortcuts import render_to_response def index(request): return render_to_response('index.html') (shape/views.py)

14 14 HTML Form เอกสาร HTML สามารถบรรจุฟอร์มเพื่อรับ ข้อมูลจากผู้ใช้

15 15 กำหนดวิวให้พาธ /shape/rectangle เพิ่ม URL mapping ใน urls.py from django.conf.urls.defaults import * # Uncomment the next two lines to enable the admin: # from django.contrib import admin # admin.autodiscover() urlpatterns = patterns('', url(r'^$', 'shape.views.index'), url(r'^shape/rectangle/$', 'shape.views.rectangle_form'), # Example: # (r'^first/', include('first.foo.urls')), # Uncomment the admin/doc line below to enable admin documentation: # (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: # (r'^admin/', include(admin.site.urls)), ) (urls.py)

16 16 สร้างวิว rectangle_form เพิ่มฟังก์ชันลงไปใน views.py def rectangle_form(request): return render_to_response('rectangle.html') (shape/views.py)

17 17 สร้างฟอร์ม rectangle.html เป็นเทมเพลท พาธที่แสดงฟอร์มนี้คือ /shape/rectangle/  การระบุ Action เป็น calculate ทำให้การกด Submit ส่งข้อมูลไปยังพาธ /shape/rectangle/calculate ชื่อ : width ชื่อ : height

18 18 เตรียมเทมเพลทแสดงผล คำนวณ เราจะออกแบบให้ใช้เทมเพลทและวิว เดียวกันสำหรับการคำนวณเกี่ยวกับ สี่เหลี่ยม วงกลม สามเหลี่ยม ฯลฯ สร้างเทมเพลทชื่อ result.html ดังนี้ ระบุตำแหน่งที่ให้ วิวส่งค่ามา แสดงผล (templates/result.html)

19 19 สร้างวิวสำหรับคำนวณ เพิ่มฟังก์ชันใน views.py def calculate(request, shape_type): if shape_type == 'rectangle': w = float(request.POST['width']) h = float(request.POST['height']) circum = 2*(w+h) area = w*h return render_to_response('result.html', { 'area' : area, 'circum' : circum }) ค่าเหล่านี้จะถูกแทนที่ในเทมเพลท รับอาร์กิวเมนต์ระบุชนิดของรูปทรง (shape/views.py)

20 20 กำหนดวิวให้พาธ เราจะให้พาธต่อไปนี้ถูกส่งไปวิวเดียวกัน  /shape/rectangle/calculate  /shape/circle/calculate  /shape/triangle/calculate ระบุนิพจน์เรกูลาร์ใน urls.py urlpatterns = patterns('', url(r'^$', 'shape.views.index'), url(r'^shape/rectangle/$', 'shape.views.rectangle_form'), url(r'^shape/(.*)/calculate$', 'shape.views.calculate'), ) ข้อความส่วนนี้จะถูก ส่งไปเป็นอาร์กิวเมนต์ ของวิว (urls.py)

21 21 ระงับการใช้ CSRF Protection Django มีระบบป้องกัน Cross-Site Request Forgery (CSRF) ให้กับทุกวิวที่ รับข้อมูลจากฟอร์ม  ในตัวอย่างนี้คือวิว calculate  เราจะระงับการใช้งานไปก่อนเพื่อความสะดวก แก้ไข shape/views.py decorator ให้กับ calculate from django.views.decorators.csrf import csrf_exempt def calculate(request, shape_type): : (shape/views.py)

22 22 แบบฝึกหัด / การบ้าน เพิ่มการคำนวณเกี่ยวกับวงกลม และสามเหลี่ยม  วงกลม : รับค่ารัศมี  สามเหลี่ยม : รับค่าพิกัดของมุมทั้ง สาม


ดาวน์โหลด ppt 1 พัฒนาเว็บแอพลิเคชัน ด้วย Django ปฏิบัติการเกี่ยวกับวิศวกรรม คอมพิวเตอร์ (01204223) ผศ. ดร. ชัยพร ใจแก้ว ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์

งานนำเสนอที่คล้ายกัน


Ads by Google