Test-Driven Development

Functional test

    เป็นการทดสอบการทำงานของตัวโปรแกรมโดยรวม

User story

    ใช้เป็นหลักการเขียน Functional test โดยจะเขียน test โดยคำนึงถึงสิ่งที่ผู้ใช้จะพบเมื่อใช้งานโปรแกรม

Expected failure

    การทดสอบล้มเหลว แต่เป็น error ที่คิดว่าจะต้องเกิดขึ้นอยู่แล้ว ทำให้แก้ไขได้ง่าย

Unit test

    เป็นการทดสอบในมุมมองของผู้พัฒนาโปรแกรม จะเป็นการทดสอบส่วนย่อยๆของโปรแกรม

Refactoring  

    การปรับปรุง code ให้ดีขึ้น โดยจะทำหลังจากที่ทำการทดสอบผ่านแล้ว และหลังจากทำการปรับปรุง code แล้วก็ต้องทำการทดสอบใหม่อีกครั้ง เพื่อยืนยันว่า code ตัวใหม่ทำงานได้ถูกต้อง

 

7. css

css 

    ใช้สำหรับจัดและตกแต่งหน้าเว็บ

6. ตาราง

Table

    ทำให้หน้าเว็บแสดงผลข้อมูลในรูปแบบตารางเพื่อความเป็นระเบียบ

5. form สำหรับเพิ่มข้อมูล

    ทำการสร้าง form สำหรับ client หรือผู้ใช้สามารถเพิ่มข้อมูลของตนเองได้

4. สร้างหน้าเว็บแสดงผล

สร้างหน้าเว็บ

การสร้างหน้าเว็บแสดงผล จะประกอบด้วย 3 ส่วน ได้แก่ url  view และ template

3. หน้า admin

สร้าง superuser

    เข้า terminal ไปที่หน้า project และใช้คำสั่ง

python3 manage.py createsuperuser

   หลังจากนั้นทำการกรอก username, email, password ที่จะใช้ login หน้า admin

2. ออกแบบ Model

ออกแบบ Model

    ออกแบบ model สำหรับเก็บข้อมูลของเว็บไซต์ โดยในที่นี้จะเก็บข้อมูบเป็น รายชื่อบัญชี และรายการ

1. เริ่มสร้าง project, สร้าง app

สร้าง Project

    สร้าง project โดยการพิมพ์คำสั่งลงใน terminal ดังนี้

django-admin startproject mysite

     จะเป็นการสร้าง project ชื่อ "mysite"

django - tutorial 4

- เขียน form สำหรับรับค่าใน template detail
  ทำการส่งค่าเป็นแบบ post
  เรียกใช้หน้า vote เมื่อกด submit

 - แก้ไข method vote
   request.POST['choice'] จะ return หมายเลขของตัวเลือกที่ได้ทำการเลือกไว้ใน form
   หลังจากแก้ไขจำนวน vote ให้เรียกใช้หน้าเว็บ results

 - แก้ใข method และ template สำหรับแสดงผล result

 

หน้าเว็บ result 

   choice.votes|pluralize จะทำการตรวจสอบจำนวนค่า votes ของ choice นั้น

   หากมีค่าเป็น 1 จะ return '' (string ว่าง) 

   หากไม่ใช้จะ return 's'

 

ใช้ generic ช่วยในการเขียนเว็บ 

  แก้ไข question_id เป็น pk ในส่วน detail และ result

  vote ใช้ question เนื่องจากไม่ได้ใช้ generic ในส่วนนี้

 ListView  display a list of objects.
 DetailView  display a detail page for a particular type of object.
 context_object_name : name of queryset (default is 'object_list')

django - tutorial 3

- เพิ่มส่วนของ polls/veiw.py โดยมี method index(หน้าแรก) detail(หน้าข้อมูลคำถาม) result และ vote

 

template

เป็นส่วนแสดงผลหน้าเว็บโดยจะรับค่าจาก view มาแสดงตามรูปแบบที่ได้กำหนดไว้

ตัวอย่างไฟล์ template

 รูปแบบการเขียนเหมือนไฟล์ html ทั่วไป

{{ a }} แสดงค่าตัวแปร a

{% for %} สำหรับใช้ for loop จำเป็นต้องมี {% endfor %}

{% if %} สำหรับใช้ condition จำเป็นต้องมี {% endif %}

{% url %} สำหรับ link ไปยังไฟล์อื่น 

รูปแบบ 

 {% url '[app name]:[name]' [arg[0]] [arg[1]] ... %}

   ex: {% url 'polls:detail' question.id %}

จะ link ไปยัง app:polls name:detail และส่ง question.id เป็น arg

หน้าเว็บ index

หน้าเว็บ detail

Django - tutorial 2

 - python manage.py migrate

สร้าง model ใน model.py

แก้ไขส่วน setting.py

manage.py makemigrations polls

manage.py sqlmigrate polls 0001

manage.py migrate

เพิ่ม code ใน model.py

สร้าง admin user และเข้าส่วน admin

เพิ่มส่วน question ในหน้า admin

-ใช้งานส่วน question

Django - tutorial 1

- สร้าง project ด้วยคำสั่ง djang-admin startproject [ชื่อ project]

- ใน project จะประกอบด้วยไฟล์ดังนี้

- สร้าง sever ด้วยคำสั่ง python manage.py runserver

- หน้าเว็บเพจ 127.0.0.1:8000

- สร้าง app polls

แก้ไขไฟล์ view.py

-ก่อน

 -หลัง

สร้างไฟล์ url.py

 

แก้ไขไฟล์ mysite/url.py 

ก่อน

 หลัง

เมื่อ runserver และเข้าที่ http://127.0.0.1:8000/polls/ จะพบกับหน้าเว็บที่เขียนไว้ใน view

CSV

 เก็บรวบรวมข้อมูลจากเว็บเพจไว้ในไฟล์ csv

- ไฟล์สำหรับหน้าเว็บรับข้อมูล

     รับข้อมูล 2 ชนิด คือ ชื่อ และวันเกิด 

     ใช้ <select> มาช่วยในการเลือกวันเกิด

     มี link สำหรับไปยังหน้าแสดงสถิติ

- ไฟล์หน้าเว็บหลังจากป้อนข้อมูล
     import csv ในการเก็บข้อมูลในไฟล์ csv
     'a' ใน open('day.csv', 'a') สำหรับเปิดไฟล์เพื่อเขียนข้อมูลต่อจากข้อมูลเดิม
     fieldnames คือการกำหนดหัวข้อของแต่ละ column ช่วยในการระบุ column ที่ต้องการ
     มี link ไปยังหน้าเว็บแสดงสถิติและหน้าเว็บกรอกข้อมูล

 

 -  หน้าเว็บแสดงสถิติ 

     มี array สำหรับเก็บ ชื่อ, สี, จำนวนคนเกิด ของแต่ละวัน 

     นับจำนวนคนเกิดแต่ละวันโดยการเช็ค column day ของแต่ละแถว

     หาวันที่มีคนเกิดเยอะที่สุด

     แสดงจำนวนคนที่เกิดในแต่ละวัน

     มี link สำหรับกลับไปหน้ากรอกข้อมูล

  

 - ไฟล์ csv

     เก็บข้อมูลเป็นชื่อ และวันเกิด

 

 

 - หน้าเว็บแรกสำหรับกรอกข้อมูล

 - หน้าเว็บหลังจาก submit

 - หน้าเว็บแสดงผล

CGI - Dynamic Web Pages

    สร้างหน้าเว็บ html เพื่อรับ input จาก client ก่อนที่จะเรียกใช้ไฟล์ python ใน cgi-bin เพื่อให้ ไฟล์ python สามารถนำ input ที่รับไปใช้ ก่อนที่จะแสดงผล
     - ไฟล์ html สำหรับรับกรอกข้อมูล
ใช้ <input> สำหรับแสดงผลเป็นกล่องรับข้อมูล โดยกำหนด
        type: กำหนดประเภทของค่าที่ต้องการรับ เช่น ข้อความ ตัวเลข เป็นต้น
        name: เป็นชื่อของตัวแปรสำหรับส่ง ให้ไฟล์ .py
        type submit เป็นรูปแบบปุ่มสำหรับเรียกใช้ไฟล์ .py โดยสามารถระบุข้อความที่ต้องการให้แสดงได้โดยใช้ value

    - ไฟล์ .py มีการ import cgi เพื่อให้สามารถเรียกค่าจากไฟล์ html มาได้ โดยเลือกรับค่าที่ต้องการตาม name ที่ได้ประกาศไว้ใน html
ในที่นี้จะรับ ค่าส่วนสูงและน้ำหนักมาเพื่อคำนวน BMI

     - สร้าง server และเข้ามาที่ localhost เปิดไฟล์ html ที่ได้สร้างไว้

     - พบกับหน้าเว็บ html กรอกข้อมูล และกดปุ่ม calculate

     - ไฟล์ .py จะรับ input ไปคำนวนและแสดงผลออกมา