• 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 > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนของ…

    >> Read More <<

  • ระวังการใช้งานบนเครื่องที่ยังเป็น 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 Fox ที่ สิงคโปร์ 128.199.202.189 จากเครือข่ายของ DigitalOcean ที่สิงคโปร์ ส่งอีเมลจำนวน 4 ฉบับ ถึง 800 emails ภายใน 1 นาที…

    >> Read More <<

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


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

    >> Read More <<

  • รู้จัก 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 ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น 2-way data binding เพื่อ sync Model กับ View เดิม Angular 1 เป็น javascript และตั้งแต่ Angular…

    >> Read More <<

  • 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 จะได้ข้อความประมาณว่า แปลว่ายกเลิกการเชื่อมต่อแล้ว ต้องเปิด terminal ที่รันคำสั่ง openfortivpn ไว้ตลอดเวลาที่เชื่อมต่อห้ามปิด จบสไตล์คอมมานไลน์ …. หากอยากได้ง่ายกว่านี้ ติดตั้งโปรแกรม OpenFortiGUI โหลดที่ https://hadler.me/linux/openfortigui/ โดยเลือกโปรแกรมสำหรับ Ubuntu…

    >> Read More <<

  • การทดสอบแบบอัตโนมัติ ด้วย 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 ก็จะไม่สามารถ Run คำสั่งทั้งหมดในไฟล์นี้ได้ ***โครงสร้างที่สำคัญในการ Run Test Case คือ Setting และ Test Cases ซึ่งในการสร้างไฟล์สำหรับ Test ด้วย…

    >> Read More <<

  • Grammarly For Chrome


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

    >> Read More <<

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


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

    >> Read More <<

  • 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 the highest payoff in their organizations. They guide you through a series of 20 foundational…

    >> Read More <<