A FMIS – Page 2 – CoP PSU IT Blog

Angular : Data Binding & 2-Way Data Binding

May 24, 2018 23:52

Data Binding เป็นการติดต่อสื่อสารกันระหว่าง Business Logic หรือไฟล์ที่เป็นนามสกุล .ts กับ .html เราจะทดลองสร้างคอมโพเนนท์ใหม่ ชื่อ Calculator ดังภาพที่ 1 ภาพที่ 1 คำสั่งสร้างคอมโพเนนท์ และแก้ไขไฟล์ app.component.html ให้แสดงเฉพาะคอมโพเนนท์ calculator โดยการลบโค้ดทั้งหมดในไฟล์และใส่โค้ดดังภาพที่ 2 ภาพที่ 2 เพิ่ม Tag app-calculator ในไฟล์ calculator.component.html (ภาพที่ 3) เราจะใส่ property binding ใน HTML Tag ให้เป็นไปตามที่เราต้องการโดยการใช้เครื่องหมาย [ ] ซึ่งเราจะลองทำให้ตัวแปรกำหนดการ disabled ปุ่ม และในไฟล์ calculator.component.ts (ภาพที่ 4) เราจะกำหนดตัวแปรชื่อ isAllowed เป็น true ก็จะสามารถกดปุ่มได้ แต่หากเป็น false จะเป็นการ disable ปุ่ม ซึ่งตรงนี้เราเป็นการใช้ property binding ภาพที่3 property binding ใน HTML Tag ภาพที่ 4 สร้างตัวแปร Binding ต่อไปเราจะสร้าง events เช่น การกดปุ่ม การคลิ๊ก เป็นต้น เราจะใช้เครื่องหมาย ( ) ในการกำหนด โดยเราจะเพิ่ม Event Binding ลงในปุ่ม CALCULATE ในไฟล์ calculator.component.html ดังภาพที่ 5 ภาพที่ 5 เพิ่ม events และสร้างตัวแปร result กับ ฟังก์ชั่น calculate() ไว้ใน calculator.component.ts ซึ่งเมื่อเรามีการกดปุ่ม แอพจะไปเรียก calculate() ขึ้นมาดังภาพที่ 6 ภาพที่ 6 เขียนฟังก์ชั่น calculate หลังจากนี้เราจะมาทำ 2-Way Binding ซึ่งก็คือการนำค่าของตัวแปรมาผูกกับค่าขอ HTML Form ต่างๆ ทำให้เมื่อแก้ไขค่าใน Form นั้นๆ แล้วค่าของตัวแปรจะเปี่ยนทันที โดยจะใช้สัญลักษณ์ [( )] ในตัวอย่างต่อไปเราจะสร้างตัวแปรสองตัวและนำค่ามาแสดง โดยสามารถเปลี่ยนค่าได้จาก Textbox เปิดไฟล์ calculator.component.html ขึ้นมารับค่า input 2 ตัว ดังภาพที่ 7 ภาพที่ 7 สร้าง input รับค่า และเปิดไฟล์ calculator.component.ts สร้างตัวแปรเก็บค่าชื่อ num1และ num2 และ addResult เก็บค่าผลบวกของทั้งสองตัวเพื่อเอามาแสดงใน result เมื่อกดปุ่ม calculate จะไปเรียกฟังก์ชั่น calculate() ดังภาพที่ 8 และเมื่อรันแอพขึ้นมาจะปรากฏหน้าจอดังภาพที่ 9 ภาพที่ 8 เขียนโค้ดบวกค่า input ทั้งสอง และแสดงผล ภาพที่ 9 แสดงผลการรันแอพ

Angular with Bootstrap & Component

May 23, 2018 23:59

ในบทความนี้เรานำ Bootstrap มาใช้ในโปรเจค ซึ่ง Bootstrap เป็น CSS Framework ที่ใช้ในการตกแต่งเว็บให้มีความสวยงามและเป็นระเบียบมากยิ่งขึ้น ก่อนอื่นเราต้องติดตั้ง Bootstrap โดยใช้คำสั่ง เปิดไฟล์ angular.json และเพิ่มโค้ดในส่วน styles หลังจากนั้นลองรันแอพ จะเห็นได้ว่า font ของตัวอักษรเปลี่ยนแปลงไป หากต้องการดูว่า Bootstrap 3 ทำอะไรได้บ้าง สามารถดูได้ที่ https://getbootstrap.com/docs/3.3/ ต่อไปเราจะมาดูกันว่าหลังจากรันแอพแล้วเกิดอะไรขึ้นบ้าง มีการโหลดไฟล์ใดบ้าง ไฟล์แรกที่จะถูกเรียกขึ้นมาก็คือ main.ts ในบรรทัดที่ 11 จะมีการเรียกต่อไปยังโมดูลที่ชื่อ AppModule โดยดูจากการ import ด้านบนแล้วโมดูลนี้ก็คือไฟล์ app/app.module ซึ่งอยู่ที่ src > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนของ @Component ประกอบด้วย properties : selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้

รู้จัก Angular กันดีกว่า

May 22, 2018 23:43

Angular เป็น Front-end JavaScript Framework ที่ทำงานบนฝั่ง Client ที่เรานำไปสร้าง Reactive Single Page Applications (SPA) ซึ่งก็คือทุกๆหน้าจะถูกโหลดมารวมอยู่ในหน้าเดียว การคลิ๊กเปลี่ยนหน้าหรือการคลิ๊กปุ่มต่างๆ จะทำให้เรารู้สึกเหมือนเป็น Desktop Application ที่ไม่มีการโหลดเปลี่ยนหน้า Angular เป็น Model-View-Controller (MCV) และยังเป็น Model-View-ViewModel (MVVM) อีกด้วย มีการเชื่อมการทำงานระหว่าง JavaScript เข้ากับ DOM Element ของ HTML ใช้การทำงาน client-side template สามารถสร้าง template ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น 2-way data binding เพื่อ sync Model กับ View เดิม Angular 1 เป็น javascript และตั้งแต่ Angular 2 ขึ้นไปเป็น typescript ปัจจุบัน Angular 6 ซึ่งมีอะไรใหม่ๆเพิ่มเข้ามา ได้แก่ Angular CLI เพิ่มคำสั่ง ng add, ng update, ng generate library(สร้าง Library) Angular 6 ได้มีฟีเจอร์ใหม่ที่เรียกว่า Workspace ทำให้สามารถสร้าง Project ได้หลายตัวภายใน Workspace เดียว จึงได้มีการเพิ่มโฟลเดอร์ภายในโฟลเดอร์ dist เพื่อบอกว่าเป็นไฟล์ของโปรเจคใด สามารถสร้าง Web Component ด้วย Angular Elements Angular Material เพิ่ม Component ใหม่อย่าง Tree, Badge และ Bottom Sheet ส่วนตัว CDK ตัว overlay เพิ่ม positionStrategy แบบใหม่ Provider แบบใหม่ที่สนับสนุนการทำ Tree Shaking เพื่อช่วยในการลดขนาด Bundle เพิ่มประสิทธิภาพ Animation มาพร้อมกับ RxJS 6 (A reactive programming library for JavaScript) เวอร์ชันใหม่ ซึ่งมีการเปลี่ยนวิธี import แบบใหม่มาตั้งแต่ versions 5 เรามาทดลองสร้างโปรเจคกันดีกว่า ก่อนอื่นเราจะต้องติดตั้ง nodejs, Visual Studio Code และ 1. ติดตั้ง angular 2. สร้างแอพพลิเคชั่น การรัน server สามารถทำได้ด้วยการพิมพ์คำสั่งเข้าไปในโฟลเดอร์ของโปรเจค และ คำสั่งที่ใช้ในการรันแอพ ดังนี้ 3. เปิด Project โดยใช้ “Visual Studio Code” ที่ได้ติดตั้งไว้ในตอนแรก File > Open Floder… > my-app ดังในรูปด้านล่าง ซึ่งโฟลเดอร์ที่เราสนใจหลักๆ ก็คือ src/app เปิดไฟล์ app.component.html เพิ่มในส่วน <h1> … </h1> และเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนนี้เป็นตัวควบคุมของ component นี้ ในบรรทัดที่ 9,10 เป็นการสร้างตัวแปร title , Date ตามลำดับ ที่ถูกนำไปใช้ในไฟล์ app.component.html ซึ่งในส่วนนี้จะเรียกว่า Data Binding และทำการเปิด Browser ไปที่ http://localhost:4200/ จะได้ผลลัพธ์ดังรูป ใน Angular จะใช้โมดูลเปรียบเสมือนกล่องแต่ละชิ้นมาประกอบกันเพื่อทำงานในแต่ละส่วนโดยมีข้อดีคือสามารถนำโค้ดกลับมาใช้ใหม่ได้ (reusable) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้

ติดตั้ง Microsoft Office 2010 บน Linux Mint 18.2

July 14, 2017 23:01

สวัสดีวันค่ะ… บล็อคนี้เราก็ยังคงอยู่กับ Linux Mint “Sonya” ที่มาพร้อมกับ Applicationพื้นฐานติดตั้งมาด้วย สำหรับคนที่ยังไม่คุ้นเคยกับ Linux ก็จะมีคำถามว่าแล้วโปรแกรมนี้ที่เคยใช้ในฝั่ง Windows มันมีให้ใช้ใน Linux มั้ย อย่างเช่น Microsoft Office อันนี้ Linux ก็มี LibreOffice ให้ใช้แทน และ LibreOffice Writer สามารถ Save เป็น นามสกุล .doc, .docx มาเปิดบน Windows ได้ แต่ Fonts อาจจะเพี้ยนๆหน่อยตอนเอามาเปิดบน Windows ก็มีทางเลือกให้เราติดตั้ง Fonts ที่ต้องการลงไป ดังภาพที่ 1 ภาพที่1 ติดตั้ง Font บน Linux หรือไม่แน่ใจว่า Office ตัวอื่นจะประสบปัญหาอะไรไหมตอนเอาไปเปิดกับ Windows อยากได้โปรแกรมของ Microsoft Office ทั้งหมดเอาไปใช้เลย!! ก็ทำได้ ก่อนอื่นก็ต้องลง PlayOnLinux ซึ่งเป็นโปรแกรมที่ช่วยให้สามารถใช้โปรแกรม Windows บน Linuxได้ โดยทำตามขั้นตอนดังนี้ค่ะ Step1: ไปที่ Software Manager > Search Palyon… > Install > รอวนไปค่ะ ช้าเร็วขึ้นกับเน็ตด้วย ตามภาพที่ 2 ภาพที่2 Install PlayOnLinux Step2: เปิดโปรแกรม PlayOnLinux ดังภาพที่ 3 ภาพที่3 Open PlayOnLinux เมื่อรัน PlayOnLinux ขึ้นมา ให้กด Install ดังภาพที่ 4 ภาพที่4 หน้าจอ PlayOnLinux เลือกเมนู Office และเลือก Microsoft Office Version ที่ต้องการติดตั้ง ตามภาพที่ 5 ภาพที่5 List Program in Office Category จากนั้นก็ Next Step ไปค่ะ ตามภาพที่ 6 ภาพที่6 Installation Wizard ระหว่างทางนั้น ในเมื่อชีวิตเราไม่ได้โรยด้วยกลีบกุหลาบ Error ตามภาพที่ 7 ก็มา ตั้งสติแล้วก็ไปลง winbind ซะ!!! ภาพที่7 Fatal Error กลับมาลง Office กันอีกที Again & Again(ไปฟังเพลงปลอบใจพลางนะ) ถ้าคุณได้ไปต่อมันก็จะขึ้นให้ Browse ไปยังที่เก็บไฟล์ .exe ตามภาพที่ 8 กด Open ไปอีกหน้าจอ แล้วกด Next รอจนติดตั้งเสร็จ ภาพที่8 Setup File ในที่สุดก็ติดตั้งเสร็จ จะแสดงผลลัพธ์ดังภาพที่ 9 ซึ่ง Shortcut ถูกสร้างไว้บน Desktop สามารถเรียกใช้ได้เลย ตามภาพที่ 10 ภาพที่9 Installed Program ภาพที่10 Office Shortcut on Desktop

การสลับภาษาด้วย “~” Linux Mint 18.2 64 bit

July 6, 2017 16:43

สำหรับใครที่ในช่วงนี้เบื่อๆเซ็งๆระบบปฎิบัติการ Windows อยากลองอะไรใหม่ๆให้กับชีวิตบ้าง ใจก็อยากไป macOS แหละ ครั้นจะเอามาลงที่เครื่องเรา มันได้เหรอ(คิดในใจเบาๆ) ว่าแล้วก็หันไปซบอก OpenSource อย่าง linux ดีกว่า linux ก็จะประสบปัญหาการเปลี่ยนภาษาเหมือนตอนที่เราลง Windows ใหม่ๆ ต้องกด Left Alt + Shift เพื่อเปลี่ยนภาษา มันก็จะลำบากหน่อยๆ กดไปบ้างไม่ไปบ้างแต่คนที่ชินแล้วก็ปล่อยเขาไปนะค่ะ ส่วนเรายังไม่ชินปกติก็จะใช้ Grave “~” ตลอด ซึ่ง linux เดิมจะใช้ ปุ่ม Ctrl+Shift ในการเปลี่ยนภาษา สืบไปสืบมาได้ความว่า linux จะใช้ “~” แทนการอ้างอิง path home จึงไม่สามารถใช้ “~” เปลี่ยนภาษาได้ แต่สำหรับใครที่ยังไม่ชินก็สามารถติดตั้งโปรแกรมเพิ่มเติม เพื่อให้สามารถเปลี่ยนภาษาได้เนอะ ก่อนอื่นต้องทำการ download โปรแกรมมาติดตั้งติดตั้งในเครื่องเพื่อใช้ในการสลับภาษาโดยชื่อว่าgrave-key.tar.gz สามารถ download ได้ที่ http://noc.rmutl.ac.th/main/wp-content/plugins/download-monitor/download.php?id=29 วิธีการติดตั้ง ไฟล์ที่ download มาจะมีนามสกุล .gz โดยเป็นไฟล์ zip ประเภทหนึ่งบนระบบปฎิบัติการ linux ดังนั้นก่อนการใช้งาน จึงต้องทำการ คลาย zip ก่อน โดยโปรแกรม zip จะถูกติดตั้งเป็นโปรแกรมพื้นฐานมาแล้ว จึงสามารถใช้งานได้ทันที โดยวิธีการคลายzip เข้าไปยังตำแหน่งไฟล์ที่ download คลิกขวาที่ไฟล์ แล้วเลือก “open with archive manager” โปรแกรมที่ไช้ในการคลาย zip จะถูกเปิดขึ้นมา หลังจากนั้น กด Extract แล้วเลือกตำแหน่ง เก็บไฟล์ ดังภาพที่ 1 ภาพที่ 1 Extract File ด้วย open with archive manager ทำการ install โปรแกรม โดยใช้ command ในส่ง install เปิดโปรแกรม terminal เข้าไปยังตำแหน่ง path ที่ไฟล์โปรแกมอยู่ run โปรแกรม ด้วยคำสั่ง ./script.sh ภาพที่ 2 run โปรแกรม ตั้งค่า keyboard เพื่อให้สามารถใช้งานได้ โดยเปิดโปรแกรม Keyboard ตามขั้นตอนดังภาพที่ 3 หรือ Search คำว่ “keyboard” ตรงรูปแว่นขยายด้านบน