Database System 2560

วันจันทร์ที่ 17 เมษายน พ.ศ. 2560

models.py

เพิ่ม object grade เข้ามา ซึ่ง grade = เกรดที่ได้ (A B+ B C+ C D+ D F)

views.py

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

show.html

ได้เพิ่มช่อง เกรดที่ได้ ขึ้นมา และดึงข้อมูลจากดาต้าเบสมาแสดงผล นั้นคือ data.grade ดึงเกรดที่เทียบจากคะแนนมาแล้ว แสดงผลบนตารางของเรา

ผลลัพธ์จะได้ดังภาพ เกรดจะขึ้นตามคะแนนที่เทียบของแต่ละวิชา

urls.py

โดยตั้งให้เมื่อเรียกใช้หน้าใดๆ แล้วให้เรียกใช้ method นั้นๆ ที่กำหนดไว้ในภาพ

index.html

เป็นหน้าแรกของโปรแกรม โดยจะมีเพียงชื่อโปรแกรม รูปภาพ และ hyperlink เพื่อให้ผู้ใช้คลิกเพื่อเข้าสู่โปรแกรม

detail.html

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

show.html

เป็นหน้าแสดงผลการเรียน โดยจะโชว์ชื่อวิชาที่เรากรอก และคะแนนที่เราได้ โดยผ่านการคำนวณจากโปรแกรมมาแล้ว โชว์ให้เห็นว่าเราได้คะแนนวิชานั้นๆ เท่าไหร่ (ณ ตอนนี้ยังไม่ได้เทียบเป็นเกรด ยังเป็นเพียงการโชว์คะแนนให้เห็นเพียงเท่านั้น)

ผลลัพธ์ที่ได้จะเป็นดังนี้ ด้านซ้ายมือของตารางคือชื่อวิชาที่เรากรอกใส่เข้าไป ส่วนด้านขวาคือคะแนนของวิชานั้นๆ ที่เรากรอกลงไป โดยคะแนนที่โชว์คือ คะแนนที่ผ่านการคำนวณมาแล้วจากโปรแกรมว่าเราได้เท่าไหร่ แต่ ณ ตอนนี้ ยังไม่ได้เทียบเป็นเกรด (รูปที่เห็นถ่ายก่อนการแก้ไขทศนิยมให้เป็น 2 ตำแหน่ง)

App Grade TU1

Models.py

มี class ชื่อว่า Grade และมี Object ต่างๆ ดังนี้ subject = ชื่อวิชา score = คะแนนที่ได้ full = คะแนนเต็ม total = คะแนนรวม (คะแนนที่ผ่านการคำนวณมาแล้ว)

Views.py

มี 3 method โดย method แรก คือ index ใช้ render หน้า index ต่อมา method operand ใช้รับข้อมูลมาจากผู้ใช้ และคำนวณคะแนนรวมของผู้ใช้ว่าได้เท่าไหร่ตามสมการ equation = float(score)*100/float(full) จากนั้นนำไปทำให้เป็นทศนิยม 2 ตำแหน่ง โดยใช้ net = ("%.2f" % round(equation,2)) และส่งข้อมูลไปเซฟที่ information ดังในภาพ และสุดท้าย method show ใช้ render หน้าโชว์ผลการเรียน

วันเสาร์ที่ 18 มีนาคม พ.ศ. 2560

Account App - Tutorial 3.

1.Writing more views

ไปที่ account/views.py แล้วแก้ไขดังภาพข้างล่าง

โดยโปรแกรมจะมีอยู่ 3 หน้าได้แก่ 1.index เป็นหน้าแรกของการเข้าโปรแกรม 2.detail เป็นหน้ากรอกข้อมูลรายรับ-รายจ่าย 3.history เป็นหน้าดูประวัติรายรับ-รายจ่าย

จากนั้นไปที่ account/urls.py แล้วแก้ไขดังภาพข้างล่าง

2.Writing templates

ขั้นตอนแรกให้เราสร้าง โฟลเดอร์ templates ขึ้นมาก่อน โดยสร้างดังนี้ polls/templates/polls/ กล่าวคือ สร้างโฟลเดอร์ templates ขึ้นมาในโฟลเดอร์ account แล้วสร้างโฟลเดอร์ account ข้างในโฟลเดอร์ templates อีกทีหนึ่ง แล้วจึงสร้างไฟล์ .html ขึ้นมาในโฟลเดอร์ account ดังกล่าว

เริ่มแรกเราจะสร้าง templates ของหน้า index ก่อน โดยให้สร้างไฟล์ index.html ขึ้นมา แล้วแก้ไขดังนี้

ต่อมาให้สร้าง detail.html แล้วแก้ไขดังภาพข้างล่าง

สุดท้ายให้สร้าง history.html แล้วแก้ไขดังภาพข้างล่าง

เมื่อเสร็จแล้วให้ migrate อีกครั้งหนึ่ง ( ตาม Tutorail 2) จากนั้นลองเข้าหน้าเว็บ จะได้ผลดังนี้

หน้า index.html

หน้า detail.html

หน้า history.html

Account App - Tutorial 2

ขั้นตอนแรกเราต้องทำการ python manage.py migrate เสียก่อน ซึ่งมันเกี่ยวกับ Database ฉะนั้นเราจึงไม่พูดถึง

1.Creating models

ให้แก้ไขที่ account/models.py ดังนี้

โดย class Account คือตัวกำหนดว่าในโปรแกรมจะมีอะไรบ้าง ซึ่งนั้นคือ account_text เป็นตัวบันทึกรายการที่เป็นลายลักษณ์อักษร ส่วน account_money เป็นตัวบันทึกรายการที่เป็นจำนวน และ pub_date ใช้เก็บวันที่ละเวลาที่ทำการบันทึก

2.Activating models

ไปที่ teach/settings.py แล้วแก้ไขดังนี้

INSTALLED_APPS = [
    'account.apps.AccountConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

จากนั้นเราต้องทำให้รู้ว่า มันมีส่วนประกอบอะไรบ้าง โดยพิม python manage.py makemigrations account เข้าไปใน terminal ผลจะได้ดังภาพข้างล่าง

Account App - Tutorial 1.

1.Creating a project.

ขั้นตอนแรก เราจะสร้างโฟลเดอร์โปรเจคของเราขึ้นมาโดยการพิม django-admin startproject teach เข้าไปใน terminal และพิม python manage.py runserver เพื่อเช็คว่าโปรเจคเราสามารถรันเซอร์เวอร์ได้ โดยเข้าไปที่ 127.0.0.1:8000 ถ้าหากรันได้ จะขึ้นดังรูปด้านล่าง

2.Creating the Account app.

ขั้นตอนแรก เราจะสร้างโฟลเดอร์แอพของเราขึ้นมาในโฟลเดอร์โปรเจค (teach) ของเรา โดยการพิม python manage.py startapp account เข้าไปใน terminal




3.Write your first view

  ขั้นตอนแรกให้เราไปที่ account/views.py แล้วแก้ไขดังนี้

from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")
จากนั้นให้เราสร้าง urls.py ขึ้นมาในโฟลเดอร์ account ของเรา แล้วแก้ไขดังนี้ 
from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

จากนั้นให้ไปแก้ไขที่ teach/urls.py ดังนี้
from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^account/', include('account.urls')),
    url(r'^admin/', admin.site.urls),
]
สุดท้ายให้รันเซอร์เวอร์อีกครั้งโดยการพิม python manage.py runserver เข้าไปใน terminal แล้วไปที่  http://localhost:8000/account/ จะได้ผลดังภาพด้านล่าง

วันอาทิตย์ที่ 26 กุมภาพันธ์ พ.ศ. 2560

การใช้ CSV File.

เริ่มแรกก็อปโค้ดจาก django tutorial มาใส่ไว้ใน views.py

แก้ไขโค้ดในส่วนของ writerow และสร้าง loop for ไว้รวบรวมข้อมูลที่เข้ามาใหม่

สร้างปุ่มเพื่อสามารถกดดาวน์โหลดไฟล์ CSV ได้

เพิ่ม url สำหรับเรียกใช้ฟังก์ชันดาวน์โหลดไฟล์ CSV

จะเห็นว่ามี Hyper Link เพิ่มขึ้นมาชื่อว่า Download CSV File

เมื่อคลิกที่ลิงค์แล้ว จะเริ่มการดาวน์โหลดไฟล์ทันที

เมื่อเปิดไฟล์ขึ้นมา จะพบกับข้อมูลที่เราเก็บอยู่ดังภาพ

วันพุธที่ 22 กุมภาพันธ์ พ.ศ. 2560

การใช้ CSS File.

CSS ไฟล์คืออะไร?

CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น

ที่มา: http://www.enjoyday.net/webtutorial/css/css_chapter01.html

ได้ทำการแก้ไข ให้เมื่อเข้าลิงค์ของ server แล้ว รันโปรแกรมของเราขึ้นมาทันที

ก่อนหน้านี้คเยเป็น r'^account/' เช่นเดียวกับ admin แต่ได้ทำการเปลี่ยนเป็น r'^' กล่าวคือ เมื่อไม่พบอักษรใดๆ ให้รันไปที่โปรแกรม account ของเรา

ได้ผลดังภาพ เมื่อเราเข้า 127.0.0.1:8000 เว็บจะ render หน้า index ของโปรแกรม account ขึ้นมาทันที

การใช้งาน CSS

การทำ hyper-link ให้เป็นสีที่เราต้องการ

ใส่การกำหนดไปว่าให้ลิงค์ที่เชื่อมไปหน้าอื่นเป็นสีอะไร ในที่นี้คือสีแดง โดยปกติแล้วจะเป็นสีน้ำเงินให้ตอนเริ่มต้น

หน้า detail.html ในปัจจุบัน

ในส่วนนี้คือการประกาศ class ชื่อ button และใส่รายละเอียดต่างๆ กล่าวคือ สีพื้นหลังเป็นสีชมพู ความหนาไม่ระบุ สีตัวหนังสือคือสีขาว ขนาด 15px 32px ตำแหน่งตัวหนังสือคือตรงกลาง รูปร่างเป็นกล่องสี่เหลี่ยม และฟอนต์ขนาด 16px