พัฒนาเว็บไซต์และโปรแกรม « แลกเปลี่ยนเรียนรู้:km tool

archive page

บันทึกใน ‘พัฒนาเว็บไซต์และโปรแกรม’

แก้ปัญหาข่าวหายไปจากระบบอย่างไร้ร่องรอย

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Tuesday, February 22nd, 2011
news nivate

ระบบจัดการข่าว .. ที่ข่าวหายไปอย่างไร้ร่องรอย

22 ก.พ.54 ระบบจัดการข่าวออนไลน์ที่มีการพัฒนาขึ้น และใช้งานมาแล้วระยะหนึ่ง .. ช่วงหลังผู้ใช้งานระบบพบปัญหาว่าข่าวเดิมหายไป แล้วเขาเชื่อว่ามีผู้ไม่ประสงค์ดีเข้าไปลบข่าวออก เมื่อตรวจพฤติกรรมของผู้ใช้งานระบบก็พบว่า มีการเปิดเว็บเพจระบบจัดการข่าวผ่าน bookmark ประกอบกับการปฏิบัติการทันทีเมื่อคลิ๊ก เช่น ลบเมื่อคลิ๊ก เปลี่ยนสถานะเมื่อคลิ๊ก โดยไม่มีการกรองผ่าน captcha หรือ password verify ซึ่งปัญหาอาจเกิดจาก  google.com หรือ browser เข้ามาดูดเว็บเพจ ทำให้มีการเรียกใช้ลิงค์จนเกิด action อย่างไม่ตั้งใจ
จึงแก้ไขโปรแกรมอย่างง่าย ด้วยการเพิ่ม password verify ผ่านการพิมพ์ก่อน action ทำให้การกดปุ่มลบหรือเปลี่ยนสถานะการแสดงข่าวไม่ทำงาน จนกว่าจะรับข้อมูลที่ยืนยันผ่านผู้ใช้งานระบบ ก็เชื่อว่าปัญหาข่าวหายไปอย่างไร้ร่องรอยจะไม่เกิดขึ้นอีก


ลิงค์ภาพจาก fb ไปแสดงในเว็บศิษย์เก่า

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Monday, February 21st, 2011
yonok album of facebook.com

รวมภาพจากอัลบั้นของศิษย์เก่า

21 ก.พ.54 วันนี้ใช้ประโยชน์จากระบบ album ของ facebook.com โดยดึงภาพออกมาแสดงในเว็บไซต์ของศิษย์เก่าโยนก (thaiabc.com/ynalumni) และศิษย์เก่าอัสสัมชัญ (aclalumni.com) แล้วเชื่อมลิงค์กลับไปยัง album นั้น ซึ่งเจ้าของอาจเป็นใครก็ได้ที่เป็นศิษย์เก่า หรือสมาชิกขององค์กร ทำให้มีความยืดหยุ่นในการเชื่อม album และไม่จำเป็นต้องเป็นเพื่อน เพียงแต่สามารถมองเห็นภาพ และคัดลอกลิงค์ออกมาก็นำไปเผยแพร่ต่อได้แล้ว

ปัญหาเกิดขึ้น ต้นเดือนกุมภาพันธ์ 2554 ทาง fb เริ่มใช้ hightlightbox คือแสดงภาพด้วยการ popup เฉพาะตัวภาพ แล้วปิดการคัดลอกลิงค์ภาพ ทำให้ยุ่งยากขึ้นในการคัดลอกลิงค์ภาพที่ต้องการ หากต้องการก็ต้องใช้วิธีกด share แล้ว copy image link ออกมาในขั้นตอนนั้น แล้วเรียกภาพนั้นไปแสดงเป็น album listing ภายนอก facebook.com ดังตัวอย่าง


การสร้างงานและส่งออกไปเป็นเว็บเพจด้วย fireworks CS4

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Thursday, February 17th, 2011
firework

firework

18 ก.พ.54 มีเพื่อนชื่อ ธรณ. สร้างงานไว้ด้วย Adobe Fireworks CS4 และใช้พัฒนาควบคู่ไปกับ Adobe Dreamweaver CS4 ซึ่งมีแนวทางการนำมาแก้ไขปรับปรุง ทั้งเปลี่ยนสี เปลี่ยนภาพ แต่ใช้ theme เดิม ดังนี้
1. เปิดแฟ้มต้นฉบับและทำงานออกแบบให้แล้วเสร็จ ตัวอย่างนี้เป็นภาพขนาด 2000 * 1000 pixels และจะเก็บในสกุล .png ซึ่งเป็นรูปแบบของ fire works ซึ่งขั้นตอนแรกมีรายละเอียดในการออกแบบ และใช้งานมากมายตามความซับซ้อนของเนื้องาน
2. จัดเก็บอีกครั้งด้วยการ save as เป็นแบบ Flattened PNG กำหนดขนาดเป็น 50% ผลคือแฟ้มนี้มีเพื่อนส่งออกไม่สามารถแก้ไขรายละเอียดได้ง่ายเหมือนต้นฉบับ และขนาดภาพคือ 1000 * 500 pixels เพื่อนำไปเป็นเว็บเพจ ซึ่งวางแผนไว้ว่าเว็บเพจกว้าง 1000 pixels และภาพถูกตัดออกเป็นชิ้นให้ download ได้อย่างรวดเร็ว แทนการใช้ภาพใหญ่เพียงภาพเดียว
3. ใช้ select tool สร้างพื้นที่ที่ต้องการตัด แล้วเลือก edit, insert, rectangular slice ผลการ slice จะเกิดขึ้นผลการตัดภาพใน web layer สำหรับเทคนิคตัดภาพนี้คล้ายกับที่เคยพบในโปรแกรม imageready แต่ปัจจุบันถูกรวมเข้าเป็นส่วนหนึ่งของ photoshop ตั้งแต่รุ่น CS2 ไปแล้ว หากจะตัดภาพทำ gif animation ก็ใช้ photoshop ได้เลย
4. ขั้นสุดท้ายส่งงานออกไปใช้ด้วยการเลือก file, export เป็น HTML and images ก็จะได้แฟ้ม html พร้อมภาพอีกหลายภาพ ที่จะไปใช้งานใน dreamweaver หรือควบคุมด้วย php ใน editor ใด ๆ ต่อไป
+ http://www.thaiall.com/fireworks/


ลงสีในเว็บเพจด้วย javascript

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, February 13th, 2011
sesamo.com

sesamo.com

13 ก.พ.54 เว็บ sesamo.com แสดงการใช้ javascript ที่ยอดเยี่ยม ทำให้ผู้ใช้ลงสีในภาพตามความต้องการ โดยใช้หลักของ javascript หย่อนสีลงไปในบริเวณปิด ตามต้องการ กรณีนี้ใช้สำหรับเด็กได้ฝึกลงสีให้กับภาพ โดยไม่ต้องใช้การ load ภาพทุกครั้งที่ลงสี แต่เป็นหน้าที่ของ browser ฝั่ง client ล้วน ๆ
http://www.sesamo.com/colouring/cake.html


แบบของแฟ้มภาพยนตร์ออนไลน์ (itinlife276)

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, January 23rd, 2011
mp4 flv

mp4 flv

22 ม.ค.54 สื่อมัลติมีเดียที่เคยพบเห็นในโลกออนไลน์เริ่มเปลี่ยนไป จากที่เคยพบแต่ภาพนิ่ง และเสียงเพลง เริ่มกลายรูปเป็นวิดีโอคลิ๊ป หรือมิวสิกวิดีโอ เพราะข้อจำกัดเรื่องพื้นที่เก็บข้อมูล และความเร็วในการดาวน์โหลด (Download) มิใช่ปัญหาอีกต่อไป ปัจจุบันมิวสิกวิดีโอได้รับความนิยมเข้ามาแทนการฟังแต่เสียงเพลง สามารถดูรายการทีวี เกมส์โชว์ ละคร หรือข่าวย้อนหลังผ่านสื่อออนไลน์ได้ทุกเวลา ได้เห็นคลิ๊ปวิดีโอที่เพื่อนอัพโหลดหลังบันทึกด้วยกล้องของโทรศัพท์ยุคใหม่ ลักษณะแฟ้มที่ส่งเข้าสู่โลกออนไลน์มีได้หลายประเภท เมื่อส่งเข้าไปแล้วจะถูกแปลงให้อยู่ในรูปแบบ และขนาดที่เหมาะสมสำหรับการนำเสนอ ซึ่งพบวิดีโอคลิ๊ปในเว็บไซต์ที่ได้รับความนิยมอย่าง youtube.com หรือ facebook.com เป็นต้น

วิดีโอที่นำเสนอในอินเทอร์เน็ตให้ผู้ใช้เปิดชมแบบ Streaming ที่นิยมมี 2 ประเภท คือ Flash Video และ MP4 ซึ่งสามารถนำเสนอผ่านเว็บไซต์แบบดาวน์โหลดไปพร้อมกับการชมโดยใช้ Flash Player Plug-in สำหรับ Web Browser จุดเด่นของแฟ้มคือมีการบีบอัดแฟ้มให้เล็กอย่างมีประสิทธิภาพกว่าแฟ้มแบบอื่น ถ้าผู้ใช้เปิดวิดีโอจาก youtube.com จะพบว่าสามารถคัดลอกวิดีโอที่อยู่ในห้องชั่วคราวออกมาเปิดได้ในภายหลัง ซึ่งมีรูปแบบเป็น Flash Video (.flv) แต่ถ้าเป็นวิดีโอจาก facebook.com จะเป็น MP4 การยอมรับแฟ้ม MP4 พบได้ในกล้องดิจิทอลของ Sanyo บางรุ่นที่บันทึกวิดีโอเป็น MP4 จึงสามารถคัดลอกแฟ้มออกจากหน่วยความจำ แล้วนำไปใช้ได้ทันที

แม้การพัฒนาเทคโนโลยีในโลกออนไลน์จะเปลี่ยนไปอย่างรวดเร็ว แต่ระบบปฏิบัติการที่ติดตั้งในเครื่องคอมพิวเตอร์ของผู้ใช้ทั่วไป ส่วนหนึ่งยังไม่สามารถเปิดอ่านแฟ้ม .flv หรือ .mp4 จึงต้องหาโปรแกรมที่มีความสามารถมาติดตั้งเพิ่มเติม อาทิ Flv Player จากการเปรียบเทียบวิดีโอแบบเก่าที่มีนามสกุล mpg,  wmv และ avi กับวิดีโอแบบใหม่ที่มีนามสกุล flv และ mp4 พบว่าขนาดของแฟ้มแบบเก่าจะใหญ่กว่า และยังไม่มีวิธีนำเสนอแบบ streaming คือ เปิดแล้วสามารถดูได้ทันทีในขณะที่มีการดาวน์โหลดอย่างต่อเนื่อง มิได้รอให้ดาวน์โหลดจนจบแล้วจึงเห็นฉากแรก ถ้าผู้อ่านมีแฟ้ม mpg แล้วต้องการแปลงเป็น mp4 หรือ flv ก็จะมีหลายวิธี ซึ่งวิธีหนึ่งคืออัพโหลดภาพยนตร์ของเราไปยัง youtube.com และ facebook.com แล้วเปิดดูแบบออนไลน์ เมื่อเปิดแล้วก็จะเข้าไปคัดลอกแฟ้ม flv และ mp4 จากห้องชั่วคราว (Temporary Internet Files) ได้โดยง่าย

http://www.thaiabc.com/downloadn/FLV_MP4_Player_2.0.25.zip


อัพโหลดหลายไฟล์ผ่าน click เดียว

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, January 22nd, 2011
swf file upload

swf file upload

22 ม.ค.54 การ upload แฟ้มเข้าเครื่องบริการทีละแฟ้มนั้น ใช้คำสั่งไม่เกิน 5 บรรทัดก็สามารถทำได้ แต่ถ้าต้องการ upload หลายแฟ้มด้วยการ click ครั้งเดียว ต้องเขียนหลายบรรทัด .. การศึกษาเรื่องนี้เกิดจาก คุณแบงค์ (เพื่อนร่วมงาน) ถามว่า ทำอย่างไร upload หลายแฟ้มเข้าเครื่องบริการผ่าน web browser .. ผมเองก็เคยเห็นใน hi5.com หรือ facebook.com เมื่อหลายปีก่อน เมื่อสืบค้นดูก็พบว่า swfupload.org มี code จึงนำมาดัดแปลง และเปิดให้ทดสอบ
ที่ http://www.thaiall.com/php/multiupload

การแก้ไข script มีหลายจุด คือ ยกเลิก preload alert ที่แสดงว่ามีปัญหาออกไป เปลี่ยนห้องรับแฟ้มให้เป็นห้องเดียวกับ script เลือกใช้ตัวอย่างจาก multiinstanceupload

+ http://demo.swfupload.org/v250beta3/
+ http://www.thaiall.com/download/multiupload_swfupload.zip


นักศึกษาลง IIS ในเครื่องใหม่ไม่ได้

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Wednesday, January 19th, 2011
windows iis starter asp

windows iis starter asp

18 ม.ค.54 สอนนักศึกษาเขียน ASP บน IIS ซึ่งห้องปฏิบัติการใช้ Windows XP Pro มีนักศึกษายก notebook มาให้ดูว่าลง Windows 7 แล้วหา IIS ไม่พบ ผมก็พยายามเปิดบริการ และหาไม่พบเช่นกัน แต่มาพบสาเหตุว่า ที่ไม่ได้นั้น เป็นเพราะ windows ที่ติดตั้งคือ windows 7 starter มาฟรี ซึ่งเป็นรุ่นที่ไม่สามารถเรียกใช้ IIS ได้ ก็แนะนำให้ไปหาซื้อ Windows 7 รุ่นที่สูงกว่า หรือไม่ก็เปลี่ยนกับมาใช้ Windows XP หรือไม่ก็ลง 2 OS ไปเลย
http://technet.microsoft.com/en-us/library/cc753473.aspx


พบปัญหาเข้าระบบ webbased mail ไม่ได้

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Tuesday, January 18th, 2011
httpd log

httpd log

18 ม.ค.54 เมื่อวานเย็น – วันนี้เช้า เกิดปัญหาไม่สามารถ login เข้าระบบ web-based mail ขององค์กร อาการคือ user & password ไม่ถูกยอมรับให้ผ่านเข้าระบบ เมื่อรำลึกถึงเหตุการณ์ในอดีต ก็มีกรณีหนึ่งที่เป็นไปได้ คือ เครื่องบริการเต็ม จึงใช้ ssh เข้าไปใช้ #df ก็พบว่าเต็มจริง จึงเข้าไปลบ log ต่าง ๆ ที่มีขนาดใหญ่ (ไม่แตะต้อง mail box ของแต่ละคน) และปรับแก้ #/etc/aliases แล้ว #newaliases เพื่อ forward อีเมลของสมาชิกเก่า แทนการลบออกจากระบบไปยัง  mail box หนึ่ง เพื่อรอเวลาตรวจสอบ และลบทิ้งบัญชีผู้ใช้ในโอกาสต่อไป เมื่อพื้นที่เหลือเพิ่มขึ้นก็ login เข้าระบบ web-based mail ได้ตามปกติ


กรณีศึกษา single sign on กับระบบสารสนเทศ

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, January 15th, 2011
รายงานยอดสมัครเรียน เข้าระบบ single sign on

รายงานยอดสมัครเรียน เข้าระบบ single sign on

15 ม.ค.54 กรณีศึกษา : แนวคิดของ single sign on คือ การล็อกอินครั้งเดียว แล้วเข้าได้ทุกระบบ  ขณะนี้บุคลากรในองค์กรสามารถใช้งานได้แล้วในระบบอินทราเน็ต ที่มีสารสนเทศจากเจ้าของระบบฐานข้อมูลเป็นผู้ร่วมกำหนดนโยบาย โดยรายงานตัวล่าสุด คือ การคัดกรองข้อมูลจากระบบฐานข้อมูลทะเบียน มาเป็นระบบสารสนเทศยอดสมัครเรียนจริงจำแนกตามวันที่สมัครจริง และกำหนดระดับการเข้าถึงเพื่อจัดสารสนเทศให้กับผู้มีสิทธิ์เข้าถึง วัตถุประสงค์ของรายงาน เพื่อให้คณะวิชา และอาจารย์ได้ทราบผล ซึ่งเป็นสารสนเทศสำคัญในการกำหนดแผนปฏิบัติการที่เกี่ยวข้องต่อไป .. ถ้าต้องการเห็นรายงานต้องเข้าระบบอินทราเน็ตและแสดงสิทธิ์

คุณทนงศักดิ์ เมืองฝั้น (เอก) แนะนำว่ากระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร เปิดตัวเว็บ e-Gov ตัวใหม่ ที่ใช้เทคโนโลยี single sign on (www.egov.go.th) เห็นการแยกบริการเป็นหมวดหมู่ที่ชัดเจน 2 กลุ่ม คือ แยกตามบทบาท ประกอบด้วย ประชาชนทั่วไป ธุรกิจ ภาครัฐ และชาวต่างชาติ เมื่อดูบริการของภาครัฐยังพบการจัดกลุ่มอายุของผู้รับบริการไว้ 4 ประเภท คือ วัยเด็ก วัยรุ่น วัยทำงาน และวัยสูงอายุ


เลขเด็ดกับ sketchup

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Tuesday, January 4th, 2011
sketchup

sketchup

4 ม.ค.54 วันนี้ลองดูเลขตัวหนึ่งก็พบเลข 512 เป็นเลขสวยในกลุ่มสแตติกเว็บเพจของผมครับ เพราะวันนี้เพิ่มโฮมเพจ /sketchup เข้าไปอีก 1 เว็บเพจ (ได้แรงบันดาลใจมาจาก อ.หนุ่ย มืออาร์ทของมหาวิทยาลัย) และคิดว่าในชีวิตจำเลข 512 ที่คู่กับ sketchup น่าจะดี ที่สนใจก็เพราะ 512 มีค่าเท่ากับ 1 sector หรือครึ่งหนึ่งของ 1 KB นั่นเอง เป็นเลขที่เคยทำให้ผมต้องปิดเว็บไซต์ counterthai.com ด้วยนโยบาย static file ที่แยกแต่ละ page ตาม user และเครื่องที่เช่าไว้กำหนดขนาดของ cluster เท่ากับ 8 sectors นั่นหละครับ

+ http://www.thaiall.com/sketchup
+ http://sketchup.google.com/

+ http://www.thaiall.com/update.htm

ท่านสามารถตรวจจำนวน cluster ผ่าน computer management, defragmentation, report ได้ครับ