CoP PSU IT Blog – Page 94 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

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 ที่กำหนดไม่ได้ใช้การตกแต่งนี้

ระวังการใช้งานบนเครื่องที่ยังเป็น Windows XP จะถูกติดตั้ง Key Logger ระบาดในมหาวิทยาลัย

May 23, 2018 11:29

ช่วง 2-3 วันนี้ ระบบ PSU Webmail ตรวจพบว่า มีบัญชีผู้ใช้อย่างน้อย 3 ราย ถูกใช้งานจากสิงคโปร์ และตุรกี แล้วส่ง email ออกไปเป็นจำนวนมาก ระบบตรวจจับได้ จึงทำการ Force Reset Password ของระบบ PSU Email บัญชีผู้ใช้ดังกล่าวอัตโนมัติ IP ที่ใช้งาน PSU Webmail ดังภาพด้านบน ตรวจสอบแล้ว พบว่า มาจาก 202.189.89.116 จากเครือข่ายของ Twentieth Century Fox ที่ ตุรกี 206.189.89.212 จากเครือข่ายของ Twentieth Century Fox ที่ สิงคโปร์ 128.199.202.189 จากเครือข่ายของ DigitalOcean ที่สิงคโปร์ ส่งอีเมลจำนวน 4 ฉบับ ถึง 800 emails ภายใน 1 นาที ดังภาพ ในการตรวจสอบเชิงลึกต่อไป พบว่า IP 206.189.89.116 ยังพยายาม Login ไปยังบัญชีผู้ใช้ 2 ใน 3 ข้างต้นอีกด้วย จึงสันนิษฐาน ว่า น่าจะเป็นคนร้ายกลุ่มเดียวกัน เพียงแต่สลับแหล่งที่เข้าใช้ PSU Webmail ไปมา จากการลงพื้นที่ ไปดูที่เครื่องผู้ใช้ พบว่า มีพฤติกรรมที่เหมือนกัน คือ ยืนยันว่า ไม่เคยคลิกเปิด email ที่ต้องสงสัยจริง ๆ (เอ่อ ใครก็จะพูดเช่นนั้น เอาว่าไม่มีหลักฐาน ก็ไม่สามารถสรุปได้ว่าไม่จริง) *** มีการใช้คอมพิวเตอร์ส่วนกลาง *** ซึ่งหนึ่งในนั้น จะเป็น Windows XP และมีโปรแกรมเถื่อนเป็นจำนวนมาก จึงขอตั้งข้อสังเกตว่า ถ้าผู้ใช้ยืนยันว่า ไม่ได้คลิก email หลอกลวงแน่ ๆ และยืนยันว่า ไม่ถูกหลอกแน่ ๆ เป็นจริง ก็น่าจะเป็นเพราะพฤติกรรมการใช้คอมพิวเตอร์ส่วนกลาง ที่เป็น Windows XP ซึ่งเป็นไปได้อีกว่า คงจะมี Key Logger หรือ โปรแกรมดักจับการพิมพ์บน Keyboard แล้วส่งไปให้คนร้าย ในภาพใหญ่ของมหาวิทยาลัยสงขลานครินทร์ ยังมีเครื่องรุ่นเก่าที่ยังใช้ Windows XP อยู่ แถมยังใช้โปรแกรมเถื่อนที่อาจจะติดมาจากร้าน หรือ คนในออฟฟิซเองเอามาติดตั้งอยู่ หากสามารถ Enforce ให้เปลี่ยนได้ น่าจะลดปัญหาพวกนี้ได้ กำลังหาหลักฐานที่หนักแน่นพอ เพื่อนำเสนอผู้ใหญ่ต่อไปครับ

ปัญหาในการลืมรหัสผ่านจะหมดไปด้วย … LastPass

May 23, 2018 11:17

blog ที่ 3 สำหรับปีนี้ ทางเราขอนำเสนอ แทน แท่น แท๊นนนน Extension ที่ชื่อว่า “LastPass” นั่นเอง ส่วนเสริมตัวนี้จะช่วยให้ปัญหาการลืม Password ที่เข้าเว็บต่างๆ ทั้งร้อยแปดพันเก้า ที่เราเข้าใช้งานหมดไป ในปัจจุบันนี้ต้องยอมรับอย่างนึงว่า เว็บไซต์ที่เราใช้บริการทั้งหลายทั้งมวลนั้นมีมากมายหลากหลายเหลือเกิน ทั้งงานเอย social เอย หรือแม้แต่จะเป็น ฐานข้อมูลในการเก็บข้อมูลต่างๆ ทั้งหมดเหล่านี้ล้วนจะต้องมีการสร้าง account เพื่อเข้าไปใช้งานทั้งสิ้น และสิ่งนึงที่เราจะเจอบ่อยๆ ก็คือ website นี้ รหัสผ่านอะไรแล้วน้ออออ !! 55+ อะ ไม่พูดพร่ำทำเพลงมากมาย ไปดูเจ้าตัว Extension “LastPass” กันเถิดดดด ….. 1. ติดตั้ง Extension ผ่านลิงค์นี้ได้เลย คลิก จากนั้นเริ่มต้นสร้างบัญชี เพื่อเข้าใช้งาน ปล…จากนั้นต่อไปในอนาคตเราก็จะปล่อยให้ LastPass ช่วยเราจำในส่วนที่เหลืออื่นๆไง 2.โดยให้ตั้งรหัสผ่านตามเงื่อนไขที่กำหนด (อันนี้เพื่อความปลอดภัยนั่นแหละ) 3. เมื่อเราตั้งรหัสผ่านตรงตามเงื่อนความปลอดภัยที่กำหนด ก็จะพบกับหน้าจอตามรูป จากนั้น คลิก “NEXT” โลดดด 4. เมื่อดำเนินการครบตามขั้นตอนแล้ว ก็จะพบกับหน้าตาเจ้า LastPass เรียบๆ ดูแล้วใช้งานง่าย ไม่ยากๆ 5. คราวนี้เราก็มาจัดการเพิ่มข้อมูล ที่เราต้องการให้เจ้า LastPass ช่วยเราจำกันเถอะ โดยสามารถคลิกเลือก ในส่วนเมนูด้านซ้ายของหน้าจอ หรือจะเลือกจาก Icon ด้านล่างมุมขวาของหน้าจอก็ได้เช่นเดียวกัน 6. ตัวอย่างเช่น สร้างข้อมูลรายละเอียดของเว็บที่เราเข้าใช้งานเป็นประจำ Gmail เป็นต้น จากขั้นตอนที่ 5 เมื่อคลิก เพิ่มเว็บไซต์ ก็จะพบกับหน้าจอประมาณนี้นะ เมื่อใส่รายละเอียดครบถ้วนแล้ว ก็กด “บันทึก” ได้เลย 7. จากนั้นระบบก็จะบันทึกข้อมูลเว็บไซต์ Gmail ของเราเอาไว้ เราก็ทำแบบนี้ไปเรื่อยๆ จนครบทุกเว็บที่เราอยาก ให้เจ้า LastPass ช่วยจำ เพียงเท่านี้ก็เรียบร้อย ปัญหาการลืมรหัสผ่านเข้าเว็บต่างๆ ที่มีมากมายก่ายกองของเรา ก็จะหมดไป ** ปล… แต่ต้องไม่ลืมรหัสผ่านที่ใช้เข้า LastPass ตัวนี้น๊าาาา 555+ 8. สำหรับความปลอดภัยอื่นๆ เราก็สามารถเข้าไปดู ไปตั้งค่าได้ โดยเลือกผ่านเมนู การตั้งค่าบัญชี ซึ่งก็จะมีทั้งแบบ ฟรี และหากต้องการที่ปลอดภัยมากขึ้นไปอีกระดับก็ต้องเป็นแบบ premium กันแหละ แนะนำว่าลองเล่น ลองคลิกๆ ศึกษาเพิ่มเติมกันได้นะ

รู้จัก 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) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้

How to install PSU SSL VPN Client ubuntu 18.04

May 22, 2018 10:57

เปิด terminal เริ่มด้วยการติดตั้งโปรแกรมที่จำเป็น sudo apt install -y openfortivpn สร้างแฟ้ม /home/username/fortivpn.config มีข้อความว่า host = vpn2.psu.ac.th port = 443 username = PSU Passport Username password = PSU Passport Password trusted-cert = 34df1a6bd3705782fd17152de0c4fe0b3e7f31302cbdcf737b113c17a5b9ff09 สั่งรันคำสั่ง sudo openfortivpn -c fortivpn.config ได้ข้อความประมาณว่า แปลว่าเชื่อมต่อได้แล้ว หากต้องการยกเลิกการเชื่อมต่อให้กด ctrl-c จะได้ข้อความประมาณว่า แปลว่ายกเลิกการเชื่อมต่อแล้ว ต้องเปิด terminal ที่รันคำสั่ง openfortivpn ไว้ตลอดเวลาที่เชื่อมต่อห้ามปิด จบสไตล์คอมมานไลน์ …. หากอยากได้ง่ายกว่านี้ ติดตั้งโปรแกรม OpenFortiGUI โหลดที่ https://hadler.me/linux/openfortigui/ โดยเลือกโปรแกรมสำหรับ Ubuntu 18.04 โหลดมาแล้วติดตั้งด้วยคำสั่ง sudo dpkg -i openfortigui_0.6.2-1_bionic_amd64.deb จะมี error message มากมาย ให้ต่อด้วยคำสั่ง sudo apt -f -y install เริ่มใช้งานเปิดโปรแกรม openFortiGUI โดยกดที่ปุ่ม Show Applications เลือก openFortiGUI จะได้หน้าต่าง คลิกปุ่ม Add เลือก VPN จะได้ กรอกข้อความตามรูป ช่อง username และ password ก็ใส่ PSU Passport ลงไปเสร็จแล้วกด Save ได้ดังรูป เลือก PSU แล้วคลิก Connect ได้ผลดังรูป คลิก x เพื่อปิดหน้าต่างสังเกตว่าจะมีรูป ที่มุมบนขวา หากจะยกเลิกการเชื่อมต่อ คลิกขวาที่ เลือก PSU เพื่อ dissconnect จบขอให้สนุก… *** จากที่ลองทดสอบพบว่า เมื่อเชื่อมต่อ AIS 4G จะไม่สามารถใช้วิธี OpenFortiGUI ได้ แต่ใช้วิธีคอมมานไลน์ได้ครับ