Fixed Table Header Scrolling

July 3, 2017 16:16

ในปัจจุบันในการพัฒนา website  เราจะเห็นว่า Table เกือบจะเป็นส่วนหนึ่งในการพัฒนาของแต่ละหน้า  ซึ่งส่วนใหญ่จะเป็นการแสดงผลของการค้นหาข้อมูลต่างๆของเมนูหรือหัวข้อในแต่ล่ะเรื่อง บ้างก็อาจจะมีข้อมูลน้อย บ้างก็อาจจะมีข้อมูลเยอะ ทำให้การแสดงผลมีความยาวล้นหน้าเพจ ถึงแม้ว่าปัจจุบันจะมีการนำ paging มาใช้แต่ในบางกรณีอาจจะมีความจำเป็นที่ต้องการตรวจสอบข้อมูลในการค้นหาทั้งหมดในหน้าเดียวกัน  แต่ปัญหาที่ตามมาในการแสดงผลทั้งหมดในหน้าเดียวกันก็คือเมื่อเรา scroll ลงมาข้างล่างสุด Header ของตัวตารางจะไม่ Fixed ไว้ และเลื่อนหายไปข้างบน ทำให้ยากลำบากในการตรวจสอบข้อมูล เนื่องจากผู้ใช้งานอาจจะลืมว่าคอลัมภ์ที่กำลังตรวจสอบอยู่นั้นคือคอลัมภ์อะไร จึงต้อง scroll ขึ้นไปดู Header อีกครั้ง ทำให้มีความล่าช้าในการตรวจสอบข้อมูล วันนี้จึงนำวิธีการ Fixed Header ของตาราง โดยใช้ css มาเสนอเพื่อเป็นแนวทางในการพัฒนากับผู้อ่าน ดังนี้ค่ะ   ตัวอย่างที่1 (CSS ในหน้า Html เดียวกัน)) tbody { display:block; height:400px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } thead { width: calc( 100% – 1em ) } ตัวอย่างที่1(การเรียกใช้ CSS ในหน้า Html เดียวกัน) <table id=”tableSearch” class=”table table-responsive table-hover” style=”border-collapse:collapse;border:1px solid #C0C0C0;table-layout:auto;width:1500px;”> <thead> <tr class=”filters” style=”background-color:#C0C0C0″> <th align=”left”>Order</th> <th align=”left”>Name</th> </tr></thead> <tbody><tr> <td colspan=”14″ style=”text-align:center;color:#808080 “>Order</td> <td colspan=”14″ style=”text-align:center;color:#808080 “>Name</td> </tr></tbody> </table> ตัวอย่างที่2 (CSS) html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal;

Read More »

ELK #04

June 30, 2017 14:40

คราวนี้มาติดตั้งบน Docker บ้าง ถ้าเครื่อง Server เป็น Ubuntu 16.04 ทำตามขั้นตอนนี้เพื่อให้สามารถใช้งาน Docker ได้ วิธีการติดตั้ง Docker บน Ubuntu 16.04 เนื่องจาก Elasticsearch 5.x ใช้ Virtual Memory มากขึ้น ลองใช้คำสั่งนี้ดูค่าปัจจุบัน sysctl vm.max_map_count ค่า Default น่าจะประมาณนี้ vm.max_map_count = 65530 ให้ทำการเพิ่มด้วยคำสั่งนี้ sudo -i sudo echo “vm.max_map_count=262144” >> /etc/sysctl.conf exit จากนั้นให้ทำการ Reboot ติดตั้ง docker image ของ sebp/elk ด้วยคำสั่ง sudo docker pull sebp/elk โดย Default จะได้ Lastest Version ใช้คำสี่งต่อไปนี้ เพื่อ Start ELK ขึ้นมา โดยเปิด port ให้ Kibana: 5601, Elasticsearch: 9200, Logstash: 5044 และทำงานเป็นแบบ Detach หรือ Background นั่นเอง sudo docker run -d -p 5601:5601 -p 9200:9200 -p 5044:5044 -it –name elk sebp/elk หรือถ้าจะใช้ Docker Compose ก็สามารถใช้งานด้วยวิธีการนี้ เริ่มจาก ติดตั้ง Docker Compose ด้วยคำสั่ง sudo -i curl -L https://github.com/docker/compose/releases/download/1.14.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose chmod +x /usr/local/bin/docker-compose exit จากนั้น สร้างไฟล์ /path/to/your/config/elk.yml เนื้อหาดังนี้ elk: image: sebp/elk ports: – “5601:5601” – “9200:9200” – “5044:5044” จากนั้นก็ Start sudo /usr/local/bin/docker-compose -f /path/to/your/config/elk.yml up -d elk หากต้องการให้ container ทำการ start ทุกครั้งที่ Reboot ใช้คำสั่ง sudo crontab -e แล้วใส่บรรทัดนี้ต่อท้ายไฟล์ @reboot /usr/local/bin/docker-compose -f /home/mama/elk.yml up -d elk ทดสอบว่า Container ที่กำลังทำงานอยู่มีอะไรบ้าง sudo docker ps วิธีดูว่า มี Container อะไรบ้าง (ทั้งที่ทำงานและไม่ทำงาน) sudo docker ps -a วิธีดูว่าเกิดอะไรขึ้นกับ Container (ในที่นี้ ชื่อ elk) sudo docker logs elk ถึงจุดนี้ ก็สามารถใช้งาน Kibana ทาง web url: http://your.host:5601 ได้แล้ว   Reference: https://elk-docker.readthedocs.io/  

Read More »

การติดตั้ง Laravel 5 + WAMP

June 28, 2017 23:51

Laravel คืออะไร??   Laravel คือ PHP framework ที่นิยมตัวหนึ่ง ซึ่งมาในรูปแบบของ MVC pattern เช่นเดียวกับ Codeigniter โดยข้อดีของ Laravel คือ โปรแกรมเมอร์ไม่ต้องพยายามเขียนโค้ดเองทั้งหมด Laravel ช่วยลดงานในการพัฒนาโดยสร้างระบบสำเร็จรูปมาให้อย่างพวก authentication, routing, sessionsและ caching. ด้วยความที่เป็น framework ที่นิยม ทำให้มี document และ code ตัวอย่างที่หาอ่านได้ง่าย WAMP คืออะไร? WAMP ย่อมาจาก Windows Apache MySQL PHP ซึ่งก็คือ Apache server หรือตัวจำลอง server ที่ไว้ run จาก localhost นั่นเอง ข้อดีของ WAMP คือ สามารถสลับ PHP version ที่ใช้การ run แต่ละครั้งโดยสลับจากหน้าเมนู interface ของโปรแกรมได้เลย โดยไม่ต้อง stop/start ใหม่ การติดตั้ง 1.download WAMP และทำการติดตั้งให้เรียบร้อย 2.Configure SSL ตั้งค่าเปิดการใช้งาน SSL เพื่อให้ Composer สามารถ run ได้ โดยเข้าไปตั้งค่าที่ไฟล์ php.ini ที่เก็บอยู่ใน path C:\wamp\bin\php\php5.4.16\php.ini (path ที่ install WAMP) แล้วกด Ctrl+F ค้นหา “extension=php_openssl.dll” เมื่อเจอแล้ว ให้เอาเครื่องหมาย ; ที่อยู่ข้างหน้าออกแล้วกด save 3.ติดตั้ง Composer Composer คือ เครื่องมือในการจัดการ library และ package ต่างๆ ของ PHP Framework Download Composer for Window และทำการติดตั้ง **หมายเหตุ ต้องติดตั้ง WAMP ก่อน Composer เนื่องจากตัว Composer จะ run ด้วย php ซึ่งติดมากับ WAMP 4.ติดตั้ง Laravel Framework ตรวจสอบว่า Composer ได้ถูกติดตั้งและพร้อมใช้งานแล้ว โดยเปิด command prompt ขึ้นมาและพิมพ์คำสั่ง composer หากทำการติดตั้งและพร้อมใช้งานแล้วจะได้ผลลัพธ์ดังรูป ต่อมา ติดตั้ง Laravel โดยเข้าไปที่ path C:\wamp64\www ซึ่งเป็นที่เก็บตัว project web ของ WAMP Serverหลังจากนั้นให้พิมพ์คำสั่งตามด้านล่าง โดยให้ระบุชื่อ project หลัง /laravel เช่นในตัวอย่างคำสั่ง ชื่อ project ของเราคือ test composer create-project –prefer-dist laravel/laravel test หลังจากนั้น Composer จะไป download Laravel Framework และ Library ที่เกี่ยวข้องมาให้ ดังรูป เมื่อติดตั้งเสร็จเรียบร้อยแล้วจะได้ Application key ของ project ที่เราสร้างขึ้น ดังรูป เข้าไป Directory ที่เราได้สร้าง project ไว้ จะพบโครงสร้าง project ดังรูป 5. ทดสอบ run project (อย่าลืม start WAMP ก่อน run ทุกครั้งนะคะ) โดยเปิด browser ขึ้นมา และพิมพ์ localhost/test/public/ จะได้ผลลัพธ์ดังรูป เป็นอันเสร็จสิ้นกระบวนการติดตั้ง

Read More »

TeamViewer QuickSupport

June 28, 2017 15:53

สำหรับการเขียน blog ในรอบนี้ คิดอยู่นานว่าจะเขียนอะไรดี แต่เนื่องด้วยภาระหน้าที่ในงานส่วนใหญ่ที่ทำ คือการ support ให้กับลูกค้า และ ณ ปัจจุบันนี้ กลุ่มของลูกค้าที่ทางผู้เขียนต้องติดต่อประสานงานด้วยนั้น ก็หลากหลายมากกกกก (กอ ไก่ หมื่นตัว – -“) และปัญหาหลักๆ ที่เกิดขึ้นก็คือ การอธิบายปัญหาระหว่างลูกค้า และตัวเรานั้น “เข้าใจไม่ตรงกัน”   ดังนั้นวันนี้ทางผู้เขียนจึงอยากจะแนะนำ Application ที่จะช่วยให้การติดต่อ ระหว่างเครื่อง Notebook ของเรา กับเจ้า Tablet หรือ Smartphone ของลูกค้า ง่ายขึ้นไปอี๊กกกก ^__^   TeamViewer QuickSupport เป็น Application ที่มีให้ดาวน์โหลดทั้งบน iOS และ Android ละนะ สำหรับตัวอย่างหน้าตา App ก็คล้ายๆ ตัว TeamViewer ที่เราใช้บน PC หรือ Notebook นี่แหละ   ** แต่ต้องขอบอกก่อนว่า feature ที่ได้เนี่ยอาจจะไม่เหมือนกันนะ สำหรับ samsung ก็จะมี quicksupport for samsung เลย สำหรับรุ่นอื่นๆ ก็อาจจะต้องมีการลง add-on เพิ่มเติม เพื่อที่จะสามารถใช้งาน feature remote control ได้ และสำหรับเจ้า add-on เนี่ย ก็ไม่ได้มีทุกค่ายนะ ยังไงก็สามารถทดลองเล่นๆ กันดูได้ เริ่มแรกก็สามารถเข้าไปดาวน์โหลดได้ที่ Play Store ค้นหา App teamviewer quicksupport จากนั้นคลิก Install กันได้เลย เมื่อติดตั้งเรียบร้อยแล้วก็ Open โปรแกรมขึ้นมา *** สำหรับเครื่องไหนที่จะต้องดาวน์โหลด add-on เพิ่มเติม มันก็จะมี pop up แจ้งบอกเรานะ สำหรับ add-on ก็มีจะเยอะแยะหลายรุ่น ลองเลือกๆ กันดูได้เลย เปิด TeamViewer บน PC หรือ Notebook ขึ้นมา เพื่อเริ่มต้นการ Remote หน้าจอของผู้ใช้ นำ Your ID ของลูกค้ามากรอกในช่อง Partner ID จากนั้น คลิก connect to partner *** แต่ถ้าคอมพิวเตอร์เราไม่มีโปรแกมดังกล่าว ก็สามารถเข้าผ่าน https://start.teamviewer.com ได้เหมือนกันนะ เมื่อเริ่มต้น connect บนฝั่งของทาง smartphone ของลูกค้าก็จะมีการให้ยืนยันการเชื่อมต่อ ว่าจะ อนุญาต หรือปฏิเสธ ให้เลือกอนุญาต จากนั้นการเชื่อมต่อก็จะพร้อมใช้งานได้ทันที 🙂 เมื่อเชื่อมต่อเรียบร้อยแล้ว เราก็จะเห็นหน้าจอของลูกค้า ผ่านทางเครื่องคอมพิวเตอร์ของเรา และสามารถควบคุมอุปกรณ์ได้จากระยะไกล หรือสามารถตรวจสอบสถานะอุปกรณ์ ติดตั้ง App หรือจะตั้งค่าข้อมูลต่างๆ บน Smartphone หรือ Tablet ของลูกค้าได้อย่างง่ายดาย จากนี้ต่อไป ไม่ว่าลูกค้าของเราจะอยู่ส่วนไหนของมุมโลก เพียงแค่มี Internet และ App เทพตัวนี้ Teamviewer quicksupport เราก็จะสามารถ Remote เพื่อเข้าไปดูหน้าจอจริงๆ ไปดูปัญหาที่ลูกค้าเจอจริงๆ ได้อย่างง่ายดาย และรวดเร็ว สรุปประโยชน์ของ App ตัวนี้ สามารถเชื่อมต่อ ระหว่าง เครื่องคอมพิวเตอร์ กับ อุปกรณ์เคลื่อนที่ เพื่อทำการช่วยเหลือ ในกรณีที่เกิดปัญหาต่างๆ ได้ทันที แม้จะอยู่กันคนละซีกโลก ! สามารถถ่ายโอนไฟล์ระหว่างกันได้ เช่น รูปภาพ PDF หรืออื่นๆ สามารถ แชท (ส่งข้อความ) ระหว่างกันได้ทันที โดยไม่จำเป็นต้องโทรติดต่อกันให้ยุ่งยาก สามารถตรวจสอบ ข้อมูลอุปกรณ์ รายละเอียดของอุปกรณ์ (Smartphone หรือ

Read More »

ELK #03

June 27, 2017 13:56

วิธีการติดตั้ง Kibana บน Ubuntu 16.04 ก่อนอื่น Update sudo apt -y update ; sudo apt -y upgrade ติดตั้ง Java JDK sudo apt -y install default-jdk Download และติดตั้ง wget https://artifacts.elastic.co/downloads/kibana/kibana-5.4.2-amd64.deb sudo dpkg -i kibana-5.4.2-amd64.deb จากนั้นแก้ไขไฟล์ /etc/kibana/kibana.yml เพิ่มบรรทัดสุดท้าย server.host: “192.168.xxx.yyy” elasticsearch.url: “http://your.elastic.host:9200” จากนั้น Start Service sudo service kibana start เปิด Web Browser ไปที่ http://192.168.xxx.yyy:5601

Read More »