วันอาทิตย์ที่ 31 กรกฎาคม พ.ศ. 2559
check button if publish in create.html
ในหน้า create.html ให้มีปุ่ม save กับ publish เมื่อเป็นการสร้างรายการใหม่หรือยังไม่ publish รายการนั้น และให้มีปุ่ม update และ back to draft แทนปุ่ม save กับ publish เมื่อรายการนั้นถูก publish แล้วadd alert when save success or failure
ใน newsapp-jquery.js เมื่อคลิกปุ่ม save แล้วทำการบันทึกข้อมูลลงใน server แล้ว ทางฝั่ง server จะส่งผลการบันทึกกลับ โดยในที่นี้เราจะให้มีการ alert เกิดขึ้นมาทำการบันทึกข้อมูลสำเร็จหรือไม่add check button in edit_program()
ใน newsapp/views.py ทำการเพิ่มฟังก์ชัน edit_program() โดยรับข้อมูล json จากหน้า create.html ในตอนที่กดปุ่ม save โดยรับข้อมูล json มาแปลงแล้วทำการอัพเดตกับรายการและประกาศแต่ละตัว โดยมีการตรวจสอบข้อผิดพลาดด้วยadd data for send to server in saveAnnounce()
ใน newsapp-jquery.js เมื่อมีการกดปุ่ม save ให้มีการดึงข้อมูลใน field ต่างๆของหน้า create.html มารวบรวมไว้แล้วสร้างเป็นข้อมูลประเภท jsonadd action when click garbage button
ในไฟล์ newsapp-jquery.js ทำการสร้างฟังก์ชันให้ทำงานเมื่อมีการกดปุ่มรูปถังขยะเพื่อลบประกาศที่ไม่ต้องการออก โดยให้ส่งข้อมูลไปหา server แล้วทำการลบประกาศนั้นออก นอกจากนี้ยังมีการกำหนดให้ id page ของแต่ละปุ่มเปลี่ยนตามประกาศที่ถูกคลิกเลือกmove sortable to newsapp-jquery.js and add form to modal
ลบ script ที่ใช้กดเพิ่มประกาศออก เพราะถูกย้ายไปในไฟล์ newsapp-jqurty.js แล้ว จากนั้นในหน้า create.html ทำการเพิ่ม form ลงไปในแต่ละ modal เพื่อเตรียมใช้ในการเพิ่มข้อมูลของแต่ละ pluginedit delete_announce by delete all page in program that be delete
แก้ไขฟังก์ชัน delete_announce โดยเมื่อลบรายการไหน จะให้ลบ page ทุก page ที่เกี่ยวข้องกับรายการนั้นด้วยcreate delete_page_select in newsapp/views.py
สร้างฟังก์ชัน add_new_page() เพื่อใช้สำหรับสร้าง instance ของ PageList ใหม่ เมื่อมีการกดปุ่มเครื่องหมายบวกเพื่อเพิ่มประกาศ และสร้างฟังก์ชัน delete_page_select() เพื่อใช้ลบประกาศที่เลือกไว้ในหน้า create.html แล้วกดเครื่องหมายถังขยะเพื่อทำการลบmove add-new-widget from create page to newsapp-jquery.js
ทำการย้าย script ในหน้า create.html ที่ทำงานเกี่ยวกับการกดปุ่มเครื่องหมายบวกเพื่อเพิ่มประกาศ โดยย้ายมาอยู่ในไฟล์ newsapp-jquery.js แทนset index and name for first_page in to_create_announce()
เข้าไปแก้ไขฟังก์ชัน to_create_announce เพิ่มเติมโดยกำหนดค่า index ให้กับ PageList instance ในตอนสร้างรายการใหม่edit to_create_announce for work with create page
แก้ไขฟังก์ชัน to_create_announce ให้เหมาะสมกับหน้า create.html เพราะฟังก์ชันเก่าไม่ได้รองรับการทำงานของหน้า create.html จากนั้นก็มีการเตรียมฟังก์ชันเกี่ยวกับการเพิ่ม plugin เข้าไปในหน้า pageวันศุกร์ที่ 29 กรกฎาคม พ.ศ. 2559
วันพฤหัสบดีที่ 28 กรกฎาคม พ.ศ. 2559
customize show screen and create add, search button
ในหน้า view_screen.html ได้มีการปรับแต่งการแสดงผล ให้แสดงผลหน้าจอแถวละ 3 หน้าจอถ้าเกินให้ขึ้นบรรทัดใหม่และเพิ่มปุ่มสร้างหน้าจอกับปุ่มค้นหาหน้าจอด้วยcheck whitespace in name_field in create page
ในหน้า create.html ทำการตรวจสอบ whitespace ว่ามีการใส่ชื่อหรือไม่ โดยเข้าไปแก้ไขใน jquery-newsapp.js ให้ตรวจสอบการใส่ชื่อโดยจะบังคับให้ใส่ชื่อทุกครั้งที่มีการสร้างรายการadd edit_program() to get data from create page
สร้างฟังก์ชันใน newsapp/views.py เพื่อใช้รับค่า json จากหน้า create.html โดยรับข้อมูลจาก form ได้แก่ ชื่อรายการ เวลาเริ่ม เวลาหยุด และหน้าจอ จากนั้นลองส่งค่านั้นกลับไปแสดงในหน้า create.html เพื่อทดลองว่ารับส่งข้อมูลจากหน้าเว็บมา server ได้วันพุธที่ 27 กรกฎาคม พ.ศ. 2559
add saveAnnounce() for click save button in create page
ใน newsapp-jquery.js ให้ลองอ่านข้อมูลจาก form ในหน้า create.html มาแปลงข้อมูลเป็น json แล้วใช้ ajax ส่งข้อมูลนั้นไป server แล้วรอให้ server ส่งข้อมูลเดิมกลับมา เป็นการทดลองการส่งข้อมูลไปยัง serveradd modal to plugin buttons
ในหน้า create.html ให้การกดเลือก plugin แต่ละตัวมี modal ปรากฎขึ้นมาให้ใส่รายละเอียดต่างๆเข้าไป ถ้าเป็น text plugin จะมี ckeditor ขึ้นมาให้พิมพ์เนื้อหาบทความ ถ้าเป็น image plugin, pdf plugin และ video plugin จะให้ upload ไฟล์create toggleSelect for select page in create page
ในไฟล์ newsapp-jquery.js ทำฟังก์ชัน toggleSelect เพื่อใช้แสดงความแตกต่างระหว่าง page ที่ถูกกดเลือกกับ page ที่ไม่ถูกกดเลือก โดยจะให้สีพื้นหลังเปลี่ยนเมื่อถูกกดเลือกcreate page list viewer
ในหน้า create.html ได้ทำการนำ javascript sortable library มาใช้ในการสร้าง page viewer เพราะสามารถใช้ drag and drop ในการเรียงลำดับ page ได้add css to create page
ในไฟล์ create.html ได้ทำการเพิ่ม css เข้าไปเพื่อใช้ในการสร้าง page viewer ซึ่งเป็นแถบที่ใช้แสดงว่าในรายการนี้มีหน้า page อะไรบ้างAdviser meeting 28/7/2559
สิ่งที่ดำเนินการไปแล้ว1. add css to create page
2. create page list viewer
3. create toggleSelect for select page in create page
4. add modal to plugin buttons
5. add saveAnnounce() for click save button in create page
6. template หน้าสำหรับอ่านข่าวย้อนหลัง
วันอังคารที่ 26 กรกฎาคม พ.ศ. 2559
ถ่ายภาพหน้าเว็บด้วย phantomjs ด้วยภาษา python
เราได้ทำการหาเครื่องมือที่ใช้ในการถ่ายภาพหน้าเว็บเพื่อนำมาแสดงภาพ preview ของหน้าเว็บที่เราต้องการ ในที่นี้เราเลือกใช้ library ชื่อว่า phantomjs โดยเราจะนำมาประยุกต์ใช้กับภาษา python วิธีการใช้งาน ขึ้นแรกในเราดาวน์โหลด phantomjs จากนั้นนำไดเรกทอรีมาเก็บไว้ในโปรเจ็คเรา ต่อมาให้ใช้โค้ด python ดังด้านล่างนี้1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import selenium.webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC driver = selenium.webdriver.PhantomJS(executable_path='bin/phantomjs') #path to phantomjs driver.set_window_size(1024, 768) driver.get('http://localhost:8000/en') # target url wait = WebDriverWait(driver, 10) driver.execute_script('document.body.style.background = "white"') driver.save_screenshot('out.png') try: element = WebDriverWait(driver, 5).until( EC.presence_of_element_located((By.ID, "myDynamicElement")) ) finally: driver.quit() |
จากโค้ดด้านบน มีการประยุกใช้กับ selenium ด้วย การทำงานของโค้ดคือทำการรันเว็บด้วย phantomjs กำหนดขนาดหน้าเว็บ เข้า url ที่กำหนด จากนั้นกำหนดสีพื้นหลังเพราะค่าเดิมเป็นพื้นหลังแบบโปร่งแสง จากนั้นทำการบันทึกไฟล์รูปภาพ โค้ดในบรรทัดที่ 13 -15 ใช้ในกรณีเมื่อเกิดการค้างในระหว่างการทำงานของโค้ดจะช่วยให้แก้ไขอาการค้างนั้นได้
วันเสาร์ที่ 23 กรกฎาคม พ.ศ. 2559
วิธีใช้ cms api เพิ่ม image plugin ลงไปใน page
ปกติเวลาเราใช้ django cms แล้วเราต้องการเพิ่มรูปภาพในหน้า page ที่เราต้องการ เราจะต้องเข้าไปในหน้า page นั้นแล้วกดโหมด structure กดเลือก image plugin แล้วเลือกรูปภาพที่ต้องการมาใส่ ต่อไปนี้เราจะเสนอโค้ดที่ใช้ทำงานได้ในแบบเดียวกันคือนำไฟล์รูปภาพที่ต้องการมาใส่ในหน้า page ซึ่งรายละเอียดเป็นดังโค้ดด้านล่างนี้from django.contrib.auth.models import User from django.core.files import File from filer.models import Image from cms.api import create_page, add_plugin filename = 'file' filepath = 'path/to/file' user = User.objects.get(username='testuser') with open(filepath, 'rb') as f: file_obj = File(f, name=filename) image = Image.objects.create(owner=user, original_filename=filename, file=file_obj) page = create_page('My Page', 'my_template.html', 'en') placeholder = page.placeholders.get(slot='content') add_plugin(placeholder, 'FilerImagePlugin', 'en', image=image)
จากโค้ดด้านบน เรากำหนดชื่อไฟล์รูปภาพ ที่อยู่ของไฟล์รูปภาพและ user ผู้สร้าง จากนั้นทำการเปิดไฟล์โดยกำหนด 'rb' ด้วยเพื่อป้องกันการเกิดปัญหา EncodingError ต่อมาสร้าง object ของ File จากนั้น นำ object ของ File มาสร้างเป็น Image object ในตัวแปรชื่อ image จากนั้นเราก็สร้าง page กับ placeholder ของ page ที่เราเพิ่งสร้าง ขั้นตอนสุดท้ายก็ทำการเพิ่ม plugin ลงไป
วันพุธที่ 20 กรกฎาคม พ.ศ. 2559
modified form in create.html
ได้ทำการปรับแต่งตำแหน่งของ form field ต่างๆในหน้านี้ โดยได้ทำการเปลี่ยนตำแหน่งของ name, start_time, end_time และ screen ให้ไปอยู่ส่วนแถบบนสุดของหน้าจอ จากนั้นทำการเพิ่มปุ่ม plus เพื่อใช้เพิ่มหน้าประกาศกับเพิ่มปุ่ม garbage เพื่อใช้ลบประกาศในแถบบนถัดลงมา ในส่วนขวาของแถบบนเดียวกันกับปุ่ม plus และ garbage มีการเพิ่มปุ่ม save, preview, example และ closeAdviser meeting 21/7/2559
สิ่งที่ดำเนินการไปแล้ว1. แก้ไข gui ใน scopeproject2
2. ศึกษา bootstrap ในการทำ responsive web page
3. แก้ไข form field ในหน้า create.html รายละเอียดคลิกที่นี่
สิ่งที่จะดำเนินการต่อ
1. ตัดหน้าแรกของการสร้างรายการออก
2. ส่วน text plugin ให้แสดงหัวข้อที่เกี่ยวข้องกับประกาศที่จะสร้าง
3 หาสีปุ่ม save กับ cancel ที่ทั่วไปใช้กัน
4. ใช้สีขาวดำ ปุ่มที่นิยมใช้กดให้เป็นสีที่ดูเด่น
5. upload file ใช้คำภาษาอังกฤษ
6. หน้าตารางใช้สีขาวดำ
7. การทดสอบเสียงไว้รอให้ทดสอบภาพสำเร็จก่อน
วันพฤหัสบดีที่ 14 กรกฎาคม พ.ศ. 2559
Adviser meeting 15/07/2559
สิ่งที่ดำเนินการไปแล้ว1. update gui และ scopeproject2
สิ่งที่จะดำเนินการต่อ
1. แก้ไขหน้าภาพรวมรายการให้เป็นตารางเหมือนตารางเวลา
2. เอกสารให้แสดงฟังก์ชันสร้างรายการประกาศก่อน
3. เมื่อสร้างรายการประกาศใหม่ให้มีประกาศเปล่าๆเกิดขุึ้น
4. text plugin ใส่ตัวอย่างที่มีรูปภาพ
5. ลบโค้ดที่ไม่ได้ใช้ออก กับเขียนคอมเม้นโค้ด
วันอาทิตย์ที่ 10 กรกฎาคม พ.ศ. 2559
Adviser meeting 12/07/2559
สิ่งที่ดำเนินการไปแล้ว1. แก้ไข gui โปรเจ็ค
2. ศึกษา django permission
สิ่งที่จะดำเนินการต่อ
1. พัฒนาส่วนควบคุมการแสดงประกาศบนหน้าจอของเว็บแอป
2. พัฒนา video plugin, message plugin และ pdf viewer plugin
3. พัฒนาระบบ login
4. หน้าตารางเวลาหน้าจอน่าแสดงเวลาที่ประกาศนั้นเล่นด้วยว่าเล่นนานเท่าไหร่
5. ปุ่มใหม่ให้กดแล้วสร้างรายการเลย ส่วนการสร้างจอให้อยู่ที่อื่น
6. ปุ่ม save delete cancel ใน text plugin อยู่ใกล้กันมีความเสี่ยงกดผิด ควรมีเพียง save กับ delete
7. หาคำผิดในรายงาน scopeproject2
8. ใช้คำสั่ง menu ภาษาอังกฤษ
9. ตารางเวลาเอาวันที่เดือนปีออกเหลือคอลัมเดียว
10. คัดลอกรายการได้ ให้รานการใหม่เป็นของวันถัดไปของรายการเดิม
วันเสาร์ที่ 9 กรกฎาคม พ.ศ. 2559
django permission สำหรับ User
django ให้เรากำหนด permission ของบัญชีผู้ใช้งานได้ เมื่อเราสร้างเว็บแอปขึ้นมาแล้วต้องการจำกัดสิทธิของผู้ใช้งานในแต่ละประเภท เราทำได้โดยเข้าไปในหน้า admin แล้วกำหนด permission ให้แก่ผู้ใช้แต่ละคน แต่ว่าเรามีอีกวิธีในการเพิ่ม ลบ และตรวจ permission ของผู้ใช้โดยที่เรากำหนด permission ของผู้ใช้ในแต่ละฟังก์ชันใน views ได้เลย ดังตัวอย่างต่อไปนี้สร้าง model ที่มี class meta พร้อมสร้าง permission ขึ้นมา
from django.db import models
from django.contrib.auth.models import User
from django.db.models.signals import post_save
class UserProfile(models.Model):
user = models.OneToOneField(User)
name = models.CharField(null=True, blank=True, max_length=255)
class Meta:
permissions = (
('permission_code', 'Friendly permission description'),
)
def __str__(self):
return "%s's profile" % self.user
ในการสร้าง object ของ model จากโค้ดด้านบน ตอนแรกจะยังไม่มี permission ให้เราเพิ่ม permission ดังโค้ดด้านล่างนี้
from django.contrib.auth.models import Permission, User
from django.shortcuts import get_object_or_404
def user_gains_perms(request, user_id):
user = get_object_or_404(User, pk=user_id)
# any permission check will cache the current set of permissions
user.has_perm('myapp.change_bar')
permission = Permission.objects.get(codename='change_bar')
user.user_permissions.add(permission)
# Checking the cached permission set
user.has_perm('myapp.change_bar') # False
# Request new instance of User
# Be aware that user.refresh_from_db() won't clear the cache.
user = get_object_or_404(User, pk=user_id)
# Permission cache is repopulated from the database
user.has_perm('myapp.change_bar') # True
ในการใช้งานกับ views จะเป็นดังโค้ดด้านล่างนี้
@permission_required('control.permission_code')
def new(request):
somecode...
จากโค้ดด้านบนจะทำการตรวจสอบ permission ของผู้ใช้ก่อนจึงทำงานฟังก์ชั้นนี้ได้
ข้อมูลเพิ่มเติม https://docs.djangoproject.com/ja/1.9/topics/auth/default/
วันพุธที่ 6 กรกฎาคม พ.ศ. 2559
Adviser meeting 07/07/2559
สิ่งที่ดำเนินการไปแล้ว1. แก้ไข scope project2
https://docs.google.com/document/d/1tJOabGiX1nXsOXJwFnqYmJLcgnARzWbGBEhc_k1M80g/edit?usp=sharing
2. ออกแบบ GUI เพิ่มเติม
https://drive.google.com/file/d/0B0Tak9g3e17LWHA0MGY1MTN1aFU/view?usp=sharing 3. ทดลองใช้ ubuntu mate กับ Raspberry pi2
3.1- setup ให้เมื่อทำการ boot ubuntu mate ขึ้นมาจะทำการ startup firefox ขึ้นมาโดยจะเข้าไปที่หน้าโฮมเพจ(ตั้งไว้เป็น www.google.co.th)
3.2- พบปัญหา ใช้ wifi-module ต่อ network Maka ได้และ ping ติดต่อกับเครื่องอื่นๆในวง Maka ได้ แต่ Rpi ไม่สามารถต่อ internet ได้ แต่ทดลองใช้ต่อสาย Lan กับเราท์เตอร์ที่บ้านสามารถต่อเน็ตได้
สิ่งที่จะดำเนินการต่อ
1. พัฒนาส่วนควบคุมการแสดงประกาศบนหน้าจอของเว็บแอป
2. พัฒนา video plugin, message plugin และ pdf viewer plugin
3. พัฒนาระบบ login
4.แก้ไข gui
วันอาทิตย์ที่ 3 กรกฎาคม พ.ศ. 2559
Adviser meeting 4/07/2559
สิ่งที่ดำเนินการไปแล้ว1. พัฒนาส่วนควบคุมการแสดงประกาศบนหน้าจอของเว็บแอป
*เพิ่มรายละเอียด
2. แก้ไข scope project2
3. ทดลองใช้ ubuntu mate กับ Raspberry pi2
*เพิ่มรายละเอียด
4. update scope project2 ไปใน document repository ของโปรเจ็ค
สิ่งที่จะดำเนินการต่อ
1. พัฒนาส่วนควบคุมการแสดงประกาศบนหน้าจอของเว็บแอป
2. พัฒนา video plugin, message plugin และ pdf viewer plugin
3. ออกแบบ GUI เพิ่มเติม
สมัครสมาชิก:
บทความ
(
Atom
)


