นศติด I - แก้ไข comment ของ user story ในกรณี test เกิดผิดพลาด

test_error_login.py

test_error_register.py

กล่าวคือแก้ไข user story ให้ตรงกับความผิดพลาดของผู้ใช้ ว่าทำผิดแบบนี้แล้วจะเกิดอะไรขึ้น

https://github.com/Framekumpuk/grade/commit/36b4a721ffbf04504571b6952be6cbb177a507ba

นศติด I - Test error login and register that are fail.

views.py

แก้ไขโค้ดในส่วนของ 

1. method keepUser ให้เช็คว่าผู้ใช้ได้กรอก Username กับ Password แล้วหรือยัง หากไม่กรอกอย่างใดอย่างนึง จะเรนเดอร์หน้า Error ขึ้นมา

2. method index ก่อนหน้านี้คือ ถ้ามี Error หรือผู้ใช้กรอกรหัสผิด จะให้เรนเดอร์หน้าเดิม ปรับมาเป็นการเรนเดอร์หน้าข้อความแจ้งเตือนแทน

หน้าแสดงข้อความแจ้งเตือนว่า การ login เกิดความผิดพลาด 

หน้าแสดงข้อความแจ้งเตือนว่า การ sign up เกิดความผิดพลาด

https://github.com/Framekumpuk/grade/commit/7dc7c5a98e3b83a78d5272e0888cba9309084152

นศติด I - อธิบายปัญหาการคอมมิทที่เกิดขึ้น

เนื่องจากจะทำการ test โปรแกรม จึงได้สำรองไฟล์ไว้ ดังภาพ

โฟล์เดอร์เริ่มต้นชื่อว่า bs และได้สำรองไฟล์ไปที่โฟล์เดอร์ a

แต่เมื่อทำ test โปรแกรม ได้ทำในโฟล์เดอร์ a และคอมมิทจากโฟลเดอร์ a ไป

จึงทำให้เกิดปัญหาการคอมมิทเนื่องจาก 

'commit ผิด repository หรือ เป็น repository ที่ไม่มี commit ล่าสุด'

และได้แก้ปัญหาตามลิงค์ดังกล่าว

http://a5830106a.blogspot.com/2017/06/i-commit.html

อธิบายให้เข้าใจยิ่งขึ้นคือ

1. ตอนอยู่โฟลเดอร์ bs ได้ทำการ commit 1 push 1

2. สำรองไฟล์งานไว้ที่โฟล์เดอร์ a

3. ทำการ commit 2 push 2 จากโฟลเดอร์ bs

4. ทำการ test จากโฟลเดอร์ a และคอมมิท 3 push 3 ไป จึงเกิดเออเร่อ

เนื่องจาก ในโฟลเดอร์ a มีเพียงคอมมิทที่ 1 และ 3 แต่ไม่มี 2

นศติด I - เพิ่มคอมเมนต์ใน tests.py

tests.py

เพิ่มคอมเมนต์ใน tests.py ตาม user story ว่าโค้ดส่วนไหน user กำลังทำอะไร

ผลการ test หรือ ผลการเรียนของ user ตาม user story ที่ user จะได้เห็น

https://github.com/Framekumpuk/grade/commit/c3bf44acb822978c066538c69334b0df36815cbb

นศติด I - แก้สีพื้นหลัง และกล่องข้อความ ของ detail.html

เนื่องจากก่อนหน้านี้สีพื้นหลังเป็นสีเหลือง และกล่องข้อความจัดอยู่ในรูปแบบไม่สวยงาม

ซึ่งก่อนหน้านี้ได้ทำการแก้ไปแล้ว แต่เนื่องจากปัญหาการคอมมิท เมื่อ pull งานกลับมาจึงทำให้พื้นหลังกลับไปเป็นเหมือนเดิม จึงได้ทำการแก้ไขอีกครั้ง และ push ขึ้นไปใหม่

ภาพ detail.html ก่อนหน้านี้

ภาพ detail.html ในปัจจุบัน

https://github.com/Framekumpuk/grade/commit/5f24993e343b9ae349fc7f02569e939c4205e491

นศติด I - แก้บัค commit ไม่ผ่าน

เกิดปัญหาการคอมมิท ดังภาพข้างต้น ทำให้ไม่สามารถคอมมิทไฟล์ล่าสุดไปได้

วิธีแก้ไขปัญหาดังกล่าวคือ กลับไปที่โฟลเดอร์ bs และทำดังนี้

1. pull งานกลับมาใหม่อีกครั้ง

2. แก้ไฟล์งานให้เป็นไฟล์ล่าสุด

3. git add -A

4. commit ไฟล์

5. push ขึ้นไปอีกรอบหนึ่ง

จากนั้นก็จะ push งานได้ตามปกติ

นศติด I - อัพแอพขึ้น PythonAnywhere

ทำการอัพแอพขึ้น PythonAnywhere แล้ว ตามลิงค์

http://framekumpuk.pythonanywhere.com/

ปล. ทำการแก้ไขคำผิดแล้ว ซึ่งการสมัครสมาชิกต้องเป็น sign up ไม่ใช่ sign in แก้ไขครั้งแรกแก้ไปบางจุด ปัจจุบันทำการแก้ไขครบทุกจุดแล้ว อัพขึ้น PythonAnywhere แล้ว แต่ยังทำการ commit ไม่ผ่าน เนื่องจากปัญหาบางประการ หากทำการแก้ไขได้แล้ว จะทำการประกาศในบล็อคต่อไปครับ

https://github.com/Framekumpuk/grade/commit/fcdee21620c42749dcc643dea21b4c5ec35d362c

นศติด I - Functional_tests

tests.py

จากภาพ จะอธิบายเป็น user story

1. มีนักศึกษาคนหนึ่งชื่อของเขาคือธิติ เขาได้ทราบผลสอบกลางภาคของเขาในรายวิชา Mathematics ว่า เขาได้คะแนน 58 คะแนน จากคะแนนเต็ม 90 คะแนน เขาจึงได้เข้าโปรแกรมคำนวณเกรดว่าเขาจะได้เกรดอะไรในเทอมนี้ โดยเขาคาดคะเนไว้ว่า ปลายภาคเขาน่าจะได้ประมาณ 64 คะแนนเต็ม 90 

2. เมื่อเขาเปิดหน้าเว็บขึ้นมา เขาพบกับคำว่า Grade Simulation และช่องให้ผู้ใช้กรอก Username กับ Password แต่เขายังไม่เคยใช้แอพนี้มาก่อน เขาเลยกดปุ่ม sign up เพื่อสมัครสมาชิก เขาได้ใส่ Username ไปว่า titi และ Password คือ dontseemypass จากนั้นเขาจึงกด ส่ง

3. เขาพบกับหน้า Success และเขียนข้อความว่า Thank titi จากนั้นเขาจึงกด back to login

4. เข้ากลับมาสู่หน้า log in อีกครั้ง และกรอก Username กับ Password ตามที่เขาสมัคร และกดปุ่มส่ง

5. เขาพบกับหน้า index ที่มีรูปภาพของโปรแกรมปรากฎอยู่ด้วย เขากดปุ่มเข้าสู่โปรแกรมใต้ภาพ

6. เมื่อเขามาที่หน้าหรอกข้อมูล เขาได้กรอกข้อมูลลงไปตามดังข้อที่ 1. และกดปุ่ม submit

7. เขาพบกับหน้าผลการเรียนของเขา เขาได้เกรดวิชานี้คือ A เขาดีใจมาก และขอบคุณอาจารย์ผู้สอนที่ใจดีคนนั้น เขาจะตั้งใจเรียนต่อไป ให้สมกับที่อาจารย์ให้เกรดเขามา เขามีกำลังใจในการเรียนมากขึ้น

https://github.com/Framekumpuk/grade/commit/e13824e5bf977b6fca229446427bb3f1d9db4d18

นศติด I - templates inheritance

base.html

เป็นหน้าต้นฉบับของ templates หน้าอื่นๆ โดยประกอบไปด้วย ส่วนหัวคือชื่อของหน้า template นั้นๆ ส่วนของสีพื้นหลัง คือสีชมพู มีช่องให้กรอกชื่อ กรอกรหัสผ่าน และปุ่มกดตกลง

login.html

สืบทอดคุณสมบัติของ base.html มา (ดูได้จากบรรทัดแรก) โดนส่วนหัวเปลี่ยนชื่อเป็น Log in มีปุ่มกดไปยังหน้า index หรือปุ่ม ส่ง หรือปุ่มกด sign up เพื่อไปยังหน้าสมัครสมาชิก

นี้คือหน้าตาของหน้า login

signup.html

สืบทอดคุณสมบัติของ base.html มาเช่นกัน เปลี่ยนชื่อส่วนหัวเป็น sign up และมีปุ่มกดส่งการสมัคร จะเรนเดอร์หน้า Success คือสมัครเสร็จแล้ว และปุ่มกดกลับไปยังหน้า login อีกครั้ง

นี้คือหน้าตาของหน้า sign up

success.html

จะเป็นหน้าที่หลังจากผู้ใช้สมัครสมาชิกเสร็จแล้วกดส่ง จะเรนเดอร์มาหน้านี้ พร้อมกับคำพูดว่า Thank ตามด้วย Username ของผู้สมัคร และปุ่มกดกลับไปยังหน้า login

นี้คือหน้าตาของหน้า success เมื่อผู้ใช้สมัครเสร็จแล้ว โดยในภาพ ผู้ใช้ ใช้ Username ว่า Framekumpuk

https://github.com/Framekumpuk/grade/commit/8cbb65463d0ef6bc351a1d65fff5f24aa71f9733

https://github.com/Framekumpuk/grade/commit/08c9f3eb0984e39b4bc7429f1867a130a05b115e

นศติด I - เพิ่มระบบ User ของแอพ

views.py

เพิ่ม method login, signin โดย login เอาไว้เมื่อผู้ใช้ ใส่ Username และ Password จากนั้นกดล็อคอิน จะเข้าสูหน้าล็อคอิน ว่าล็อคอินเรียบร้อยแล้ว ส่วน signin เอาไว้ให้ผู้ใช้กดเข้าเพื่อสมัครสมาชิกของแอพ

เพิ่มเงื่อนไขให้กับ method index เช็คว่ามีผู้ใช้ผู้นี้ในระบบหรือไม่ หากผู้ใช้ใส่ Username Password แล้วกดส่ง หากไม่มีผู้ใช้ผู้นี้ จะขึ้นหน้า login เหมือนเดิม แต่ถ้าหากมีผู้ใช้ผู้นี้ในระบบ จะเรนเดอร์หน้า index ขึ้นมา

https://github.com/Framekumpuk/grade/commit/d1f8f44734728852cf9a1439cceeee79f4f25e63

https://github.com/Framekumpuk/grade/commit/427d4297d886aa22ca3e6fd78bd692248edcf8c2

นศติด I - เพิ่ม Comment ในโค้ด Views.py

เพิ่ม Comment ในไฟล์ Views.py โดยอธิบายในส่วนของสมการต่างๆ และ loop for ว่าคืออะไร

https://github.com/Framekumpuk/grade/commit/48f889119e52357d310b6960fb3876d593f85f36

แก้ไขเกี่ยวกับการตกแต่งบน Web application และ Link video presentation of Grade Simulator.

ทำการจัดเรียงกล่อง input ให้เป็นการเรียนในแนวตั้ง และเปลี่ยนสีพื้นหลัง

ตัวอย่างผลการเรียน

Video presentation Grade simulator program: https://youtu.be/oHCXFFSWsKg

About App Grade

เพิ่มลิงค์ไปที่หน้า about เพื่อดูข้อมูลเกี่ยวกับโปรแกรม

ในหน้า about จะบอกรายละเอียดและคุณสมบัติเกี่ยวกับโปรแกรม พร้อมปุ่มที่เชื่อมไปยังหน้ากรอกข้อมูล

ทำการ commit ล่าสุดไปเรียบร้อยแล้ว

App Grade Bootstrap.

index.html

ได้ทำการเพิ่มส่วนหัวของไฟล์ .html เพื่อเป็นการใช้งาน css โดยรูปแบบต่างๆของหน้าเว็บ สามารถดูจาก https://hackerthemes.com/bootstrap-cheatsheet/#alert-link

ตัวอย่างการใช้งาน hyperlink ของ bootstrap เราสามารถดูตัวอย่างของโค้ดนั้นๆได้ และเพียงก็อปโค้ดมาวางใส่ในไฟล์ html ของเราก็สามารถใช้งานได้เลย ดังภาพด้านล่าง

detail.html

ได้ทำการเพิ่มส่วนหัวเข้าเช่นกัน และเพิ่ม class ของปุ่ม button เข้าไป ซึ่งได้จาก bootstrap cheat sheet เช่นกัน

เพียงก็อปส่วนของชื่อคลาสมาใส่ก็สามารถใช้งานได้แล้ว ดังภาพด้านล่าง

ทั้งนี้ทุกหน้าที่ใช้ bootstrap ฟอนต์จะเปลี่ยน และเส้นตารางก็เปลี่ยนเช่นกัน ดังภาพ

App Grade TU5

models.py

ได้ทำการเพิ่ม mean sd final_score และ final_full เข้ามา ซึ่งแต่ละ object หมายถึง ค่าเฉลี่ย ส่วนเบี่ยงเบนมาตรฐาน คะแนนไฟนอลที่ได้ และคะแนนเต็มของไฟนอล ตามลำดับ

views.py

ได้ส่วนของการคำนวณเกรดแบบอิงกลุ่ม ได้ทำการค้นหามาว่า การตัดเกรดอิงกลุ่มนั้นจะได้ค่าทางสถิติ 3 ตัวแปรคือ mean sd และ z โดยส่วนใหญ่ค่า z จะอยู่ที่ 1.5 จึงได้กำหนดค่า z ไว้ที่ 1.5 ไปเลย

detail.html

ได้ทำการเพิ่มกล่อง input ของ object คะแนนไฟนอล ค่าเฉลี่ย และส่วนเบี่ยงเบนมาตรฐาน

หน้าต่างที่ได้จะเป็นดังภาพด้านบน

ทำการใส่คะแนนลงไปดังภาพ เมื่อคำนวณตามสมการแล้วจะได้ดังนี้

คะแนนที่ได้ คือ [(33+23)*100]/70 = 80 คะแนน

คิดในกรณีที่จะได้ A คือ คะแนนที่ได้ต้องมากกว่า mean + z*sd

ซึ่ง mean + z*sd = 19.23 + 1.5*40.51 = 79.995

ดังนั้น 80 > 79.995 เกรดที่ได้จึงต้องได้ A ตามภาพด้านล่าง

App Grade TU4

models.py

เพิ่ม object credit ขึ้นมา ซึ่ง credit = หน่วยกิตของแต่ละวิชา

views.py

ใน method show ได้เพิ่มอาเรย์เก็บเกรดที่เป็นตัวอักษร (keep_grade) และเกรดที่เป็นตัวเลข (grade_keep) ส่วน grade_alp คือเกรดของแต่ละวิชาที่ผู้ใช้กรอกคะแนน sum_credit คือหน่วยกิตของแต่ละวิชาที่ผู้ใช้กรอกเข้ามา จากนั้นใช้ loop for ในการวนข้อมูลใน Database มาใช้งาน โดนลูปแรกคือ วนเอาหน่วยกิตของทุกวิชามารวมกันเก็บไว้ในตัวแปร sum_credit และลูปที่สองคือ วนเพื่อเช็คว่า วิชานั้นๆได้เกรดละไร และเกรดนั้นเท่ากับเลขไหน จากนั้นจะเอาเลขนั้นๆ ไปคูณกับหน่วยกิตของวิชานั้นๆ เช่น Discrete mathematics ได้ A ซึ่ง A = 4 และมีหน่วยกิตของวิชาคือ 3 โปรแกรมก็จะเอา 4*3 และเก็บไว้ในตัวแปร tmp จากนั้นโปรแกรมจะวนสองลูปไปเรื่อยๆ จนหมดข้อมูลในดาต้าเบส และเข้าสมการคำนวณเกรดเฉลี่ยคือ gpa = tmp/sum_credit และนำไปทำเป็นทศนิยม 2 ตำแหน่ง คือ result = ("%.2f" % round(gpa,2)) ถือเป็นอันเสร็จ

detail.html

ได้เพิ่มช่อง input ให้ผู้ใช้ใส่หน่วยกิตของแต่ละวิชาเข้าไป เพื่อใช้ในการคำนวณเกรดเฉลี่ย

หน้าต่างของเว็บจะเป็นดังภาพด้านบน

show.html

เพิ่มส่วนแสดงผลเกรดเฉลี่ยเข้ามาด้านล่างของตาราง ดังภาพ

จะได้ผลดังภาพด้านบน ขวาสุดคือชื่อวิชา ตรงกลางคือคะแนนที่ได้ ซ้ายคือเกรด ล่างคือเกรดเฉลี่ย

App Grade TU3

models.py

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

views.py

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

show.html

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

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