Database System 2560: กุมภาพันธ์ 2017

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

การใช้ CSV File.

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

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

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

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

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

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

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

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

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

จากนั้นตรงโค้ดสร้างปุ่ม ให้ประกาศการใช้งาน class นั้นๆ ลงไป

ผลที่ได้

การใช้งาน CSS File

สร้างไฟล์ .css ขึ้นมาในโฟลเดอร์ static ของเรา

ใส่รายละเอียดที่เราต้องการลงไป

ในไฟล์ templates ให้เราทำการ load static ลงไป และใส่คำสั่ง <link rel="stylesheet" href="{% static 'ชื่อไฟล์.css' %}"> ลงไปใน head

นี้คือผลลัพธ์ที่ได้

commit โค้ดล่าสุด ขึ้นไปบน git hub เรียบร้อยแล้ว

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

เพิ่มคอมเมนต์

เพิ่ม comment ให้กับโค้ด ตามภาพ

ทำการเปลี่ยนชื่อ class จากเดิม ให้สื่อความหมาย

จากเดิมชื่อ class คือ Data ซึ่งไม่สื่อความหมาย ได้ทำการเปลี่ยนชื่อเป็น Account คือชื่อของแอพ

ลด method รายรับรายจ่าย ให้เหลือเพียง method เดียว

จากเดิมที่มีสอง method ได้ทำการรวมเป็น method เดียว ดังภาพ

จากนั้นได้เปลี่ยน input ด้วยการใช้ radio หรือปุ่มกด

หน้าเว็บเพจในปัจจุบัน

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

Git Hub.

เข้าไปที่โฟลเดอร์โปรเจคของเรา และพิม git init

พิม git add -A เพื่อเพิ่มทุกไฟล์ที่มีอยู่ในโฟลเดอร์นั้น

พิม git commit -m "ข้อความ" เพื่อเป็นการ commit งานของเราขึ้นไปที่เว็บ

พิม git push ตามด้วยลิงค์เว็บไซต์ git ของเรา เพื่อดันงานขึ้นไปตามลิงค์เว็บต่อท้าย

พิมคำสั่งตามที่ขึ้นมาใน terminal กรอก Username และ Password ที่สมัครเอาไว้ เป็นอันเสร็จ

เข้าหน้าเว็บที่เป็น repository ของงานจะพบกับไฟล์งานของเราทั้งหมด

บัญชี รายรับ - รายจ่าย.

ชื่อโปรเจคว่า myapp

ชื่อ app คือ account

ใน models.py มี class Data ซึ่งเป็นตัวเก็บข้อมูลลง database โดยเก็บข้อมูล 2 แบบคือ ตัวแปร data_text รับข้อมูลที่เป็น text mode ตัวแปร data_money รับข้อมูลที่เป็นตัวเลข และ ตัวแปร pub_date รับข้อมูลที่เป็นเวลา

ใน views.py มี 4 method คือ 1. index เป็น method ไว้ render หน้า index

2. income เป็น method ไว้รับค่าข้อมูลรายรับ และจำนวนเงินรายรับเข้ามา และนำจำนวนนั้นไปบวกเข้ากับเงินที่มีอยู่

3. expense เป็น method ไว้รับค่าข้อมูลรายจ่าย และจำนวนเงินรายจ่ายเข้ามา และนำจำนวนนั้นไปคูณกับ -1 และนำไปบวกกับเงินที่มีอยู่

4. history เอาไว้แสดงข้อมูลรายรับ-รายจ่ายทั้งหมด พร้อมทั้งแสดงจำนวนเงินล่าสุดที่บวกลบทุกข้อมูลในตารางแล้ว

ใน urls.py จะใส่ลิงค์ไปยังหน้าต่างๆทั้งหมดของแอพ

ใน index.html จะมีเพียงรูป และลิงค์ไปยังหน้ากรอกข้อมูล และหน้าดูประวัติ

ใน detail.html จะมี input เป็นแบบช่องกรอกข้อมูล โดยกำหนดให้เป็นชนิด text และ number ไว้ ตามด้วย input ที่เป็นเวลา และตามด้วยปุ่ม submit ทั้งของรายรับและรายจ่าย โดยมีลิงค์เชื่อมไปยังหน้า index และ history อีกด้วย

ใน history.html จะแสดงข้อมูลรายรับ - รายจ่ายทั้งหมดในรูปแบบของตาราง และเรียงข้อมูลตามวันที่ใส่ล่าสุด โดยจะแสดงข้อมูล จำนวนเงิน รายรับ และรายจ่าย วันเวลา และที่บรรทัดสุดท้ายจะแสดงยอดเงินคงเหลือทั้งหมดด้วย โดยจะมีลิงค์เชื่อมไปยังหน้า index และหน้า detail อีกครั้ง

หน้า index.html

หน้า detail.html

หน้า history.html

tutorial 04 - Django

ใน TU 4 นั้น จะนำ Form ของภาษา HTML เข้ามาใช้ใน Templates ที่เราได้สร้างไว้ใน Part 3 ก่อนหน้านี้พร้อมทั้งสามารถโหวต Choice ต่างๆของเราผ่านทาง Browser และบันทึกค่าลงใน Database ของเราได้อีกด้วยแถมท้ายด้วยการใช้ Generic View เพื่อให้โค้ดที่เขียนนั้นสั้นลงจากเดิม

ในส่วนแรกนั้นจะเป็นการเพิ่ม error_massage ที่ detail.html กล่าวคือเมื่อมีการ Error จะไม่ไปหน้า Error เหมือน TU ที่แล้ว แต่จะเป็นการแสดงข้อความขึ้นมา ว่าเกิดการ Error นะ

ต่อมาที่ views.py ที่ method vote จะเพิ่มคำสั่งที่ว่า หากไม่ได้เลือกช้อยส์ใดๆเลย และกด vote จะแสดงข้อความว่า You didn't select a choice. แต่ถ้าหากกดโหวตช้อยส์ใด ก็ให้คะแนนของช้อยส์นั้น +1

จากนั้นที่ method results กำหนดให้ pk = question_id ซึ่ง pk ย่อมาจาก primary key นั่นเอง

ไปที่ results.html จากโค้ดคือ ทำการเพิ่มลิงค์ที่เชื่อมไปยังหน้า detail หรือหน้าแสดงคำถาม โดยลิงค์จะแสดงข้อความว่า Vote again?

ไปที่ urls.py ที่ detail และ results จะเปลี่ยนจาก question_id เป็น pk ดังที่เราได้กำหนดไว้ข้างต้น

ในส่วนสุดท้าย ที่ views.py จะเปลี่ยนจาก method เป็น class ยกเว้น method vote เป็นการใช้ generic view เพื่อให้โค้ดอ่านง่ายขึ้น โดยศึกษา generic view เพิ่มเติมได้ที่ djangoproject.com

tutorial 03 - Django

ใน TU3 นี้จะสอนการสร้าง templates เพิ่มแสดงหน้าเว็บ และการเชื่อมลิงค์ต่างๆของแอพ

เริ่มแรกไปที่ views.py ก็อบโค้ดตามภาพไปวางในไฟล์ของเรา โดยจะมี 3 method ดังนี้ 1.detail เป็น method ที่ใช้แสดงหน้าเว็บที่มีคำถามต่างๆของแอพ 2.results เป็น method ที่ใช้ช้อยส์ในคำถามนั้นๆ และ 3.vote ที่ใช้แสดงหน้าเว็บเมื่อกด vote เสร็จแล้ว

ต่อมาไปที่ urls.py ก็อบโค้ดตามภาพไปวางไว้ในไฟล์ของเรา โดย url จะมีลิงค์ไปที่หน้า index หน้า detail หน้า result และหน้า vote ซึ่งตรงกับชื่อ method ใน views.py

เว็บจะบอกว่า ให้เราของลิงค์ไปคำถามที่ 34 หน้าเว็บจะ render หน้าของคำถามที่ 34 ออกมา จะได้คำว่า You're looking at question 34

กลับไปที่ views.py แก้ไขตรง method index ให้เป็นดังภาพ โดยโค้ดข้างต้น จะแสดงคำถามล่าสุด 5 คำถาม เรียงตามวันเวลาที่สร้างคำถาม

เว็บจะบอกให้เราสร้างโฟลเดอร์ templates ในแอพ และในโฟลเดอร์ templates ก็สร้างโฟลเดอร์ที่มีชื่อเดียวกับแอพ คือ polls ขึ้นมาอีกที และในโฟลเดอร์ polls นั้นให้สร้าง index.html ขึ้นมา

เปิดไฟล์ index.html ขึ้นมา และก็อบโค้ดดังภาพใส่ลงไปในไฟล์ของเรา โดยไฟล์นี้ จะเป็นไฟล์ที่เชื่อมกับ method index ใน views.py ซึ่งจะแสดงคำถามล่าสุด 5 คำถาม แต่หากไม่มีคำถามจะขึ้นว่า No polls are available.

กลับไปที่ views.py ก็อบโค้ดดังภาพไปวางในไฟล์ของเราเพื่อเป็นการเชื่อมไปยัง templates ของเรา

จากภาพที่แล้ว เราจะทำการให้โค้ดกระชับและอ่านง่ายขึ้นโดยทำเป็นโค้ดดังภาพข้างต้น

ต่อมาที่ไฟล์เดิม เราจะทำการแก้ไขหน้า Error ให้แสดงข้อความที่เราต้องการ โดยใส่โค้ดไปในไฟล์ของเราที่ method detail ดังภาพข้างต้น

จากนั้นสร้าง detail.html ในที่เดียวกับ index.html และใส่ข้อความไปดังภาพ

เมื่อไปที่หน้าเว็บเพจแล้ว หากเกิดการ Error จะขึ้นข้อความว่า Question does not exist

โดยในเว็บจะบอกให้เราใส่ question id เป็นเลขที่ไม่ตรงกับคำถามใดๆที่เรามี

จากนั้นทำโค้ดให้กระชับ เหมือนกับที่ทำกับ method index

กลับไปที่ detail.html ให้ใส่โค้ดไปในไฟล์ของเราดังภาพ ซึ่งจะเชื่อมกับ method detail ใน views.py เช่นกัน โดยโค้ดจะแสดงคำถามด้วยตัวหนา และแสดงช้อยส์ของคำถามนั้นทั้งหมด

ไปที่ urls.py ให้ใส่ app_name = 'polls' เข้าไปดังภาพ เป็นการกำหนดชื่อแอพของเรา ว่าลิงค์ที่มีอยู่คือของแอพๆไหน

ไปที่ index.html ให้แก้ไขโค้ดจากด้านบนเป็นด้านล่าง หลังจากที่เรากำหนดชื่อแอพของเราใน urls.py แล้ว เป็นการบอกว่า ให้เชื่อมลิงค์ไปที่หน้า detail ของแอพ polls นั่นเอง

Database System 2560