Angular with Bootstrap & Component

ในบทความนี้เรานำ 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…

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

ช่วง 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…

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

blog ที่ 3 สำหรับปีนี้ ทางเราขอนำเสนอ แทน แท่น แท๊นนนน Extension ที่ชื่อว่า “LastPass” นั่นเอง ส่วนเสริมตัวนี้จะช่วยให้ปัญหาการลืม Password ที่เข้าเว็บต่างๆ ทั้งร้อยแปดพันเก้า ที่เราเข้าใช้งานหมดไป ในปัจจุบันนี้ต้องยอมรับอย่างนึงว่า เว็บไซต์ที่เราใช้บริการทั้งหลายทั้งมวลนั้นมีมากมายหลากหลายเหลือเกิน ทั้งงานเอย social เอย หรือแม้แต่จะเป็น ฐานข้อมูลในการเก็บข้อมูลต่างๆ ทั้งหมดเหล่านี้ล้วนจะต้องมีการสร้าง account เพื่อเข้าไปใช้งานทั้งสิ้น และสิ่งนึงที่เราจะเจอบ่อยๆ ก็คือ website นี้ รหัสผ่านอะไรแล้วน้ออออ !! 55+ อะ ไม่พูดพร่ำทำเพลงมากมาย ไปดูเจ้าตัว Extension “LastPass” กันเถิดดดด…

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

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 ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น…

How to install PSU SSL VPN Client ubuntu 18.04

เปิด 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 จะได้ข้อความประมาณว่า…

การทดสอบแบบอัตโนมัติ ด้วย Robot framework กับ Selenium Library (ตอนที่ 2 การใช้งาน)

มาลุยกันต่อในตอนที่ 2 กันค่ะ อันดับแรกต้องทำการติดตั้ง Selenium WebDriver กันก่อน สามารถไปดาวน์โหลดได้ที่ https://www.seleniumhq.org/download/ เมื่อติดตั้งเรียบร้อยแล้วเรามาทำความรู้จักโครงสร้างหลักใน Robot Framework กันค่ะ ในส่วนของ Setting จะเป็นการกำหนด Library ในที่นี้จะใช้ Selenium2Lirary ในส่วนของ Keyword จะใช้ในกรณีที่เราต้องการที่จะสร้าง Keyword ของเราขึ้นมาใช้งานเอง ซึ่งจะใช้ได้เฉพาะในไฟล์นี้เท่านั้น ในส่วนของ Variables คือการกำหนดตัวแปร สำหรับการใช้งาน ในส่วนของ Test Cases คือส่วนของการเขียน Test Cases ซึ่งสิ่งสำคัญในส่วนนี้คือ ชื่อ Test Cases ถ้าไม่มีการตั้งชื่อให้กับ Test Cases…

Grammarly For Chrome

Blog ที่2 สำหรับปีนี้ ทางผู้เขียนก็อยากจะขอนำเสนอ Extension เจ๋งๆ ให้ได้รู้จักกันอีกสักอันละกันเนอะ เชื่อเลยว่าหลายๆคน ที่ไม่ถนัดในภาษาอังกฤษมากนัก (อย่างเช่นผู้เขียนนี่แหละ – -“) จะต้องกราบงามๆ ให้กับคนที่พัฒนาสร้างสรรค์ Extension ที่ชื่อว่า Grammarly ตัวนี้ขึ้นมาให้เราได้ใช้กัน … __/\__ *** ถ้าพร้อมแล้วก็มาทำความรู้จัก Grammarly For Chrome กันเถอะ *** Grammarly เป็น Extension ที่จะทำหน้าที่คอยจับตามองในสิ่งที่เราพิมพ์ลงไปแบบ Real-time (ทันที) และจะคอยบอกให้เรารู้ ว่าเราพิมพ์ผิดคำไหน ตกตรงจุดไหน และที่สำคัญเจ้าตัวนี้มันจะแนะนำวิธีแก้ไขให้ หรือบางทีก็จะมีการแสดงอธิบายเพิ่มเติมให้ด้วย ความฉลาดของเจ้าตัวนี้หลักๆ ที่จะช่วยเราได้อย่างเช่น…

วิธีการใส่เลขหน้า ให้กับเอกสาร PDF แบบบ้าน ๆ

สืบเนื่องจาก ทะเลาะกับ Printer เป็นวันๆ เพื่อที่จะใส่เลขหน้าให้กับเอกสาร PDF เสียกระดาษ เวลา และอารมณ์ไปเยอะ สุดท้าย ก็ได้วิธีการ เห็นว่าน่าจะเป็นประโยชน์ จึงอยากนำมาเล่าสู่กันฟัง Printer ที่ใช้เป็น Ricoh Africo MP301 SPF รุ่นนี้ มีที่ใส่กระดาษ 2 Tray อันบนคือ Tray 1 เอาไว้ใส่กระดาษเปล่า ส่วน อันล่าง Tray 2 ไว้ใส่กระดาษใช้แล้ว ซึ่ง ในที่นี้ เราจะเอาไว้ใส่กระดาษที่มีเลขหน้าในขั้นตอนต่อไป ปัญหาคือ ต้องจัดรูปเล่มเอกสารใหม่ เอาไฟล์ Word บ้าง…

CIS Control v7

Cybersecurity Best Practices CIS Controls and CIS Benchmarks are global industry best practices endorsed by leading IT security vendors and governing bodies. CIS Controls : Secure Your Organization IT security leaders use CIS Controls to quickly establish the protections providing…