Author: maliwan.s

  • Hello…Flatpickr!!

    หลายคนอาจะเคยพบปัญหาการเลือก วัน เดือน ปี ในcalendar การกรอกข้อมูลที่เป็นวันที่ใน web ต่างๆ การเลือกช่วงวันที่ใช้งานยาก โดยเฉพาะในการเลือก ช่วงเวลา ที่ย้อนหลัง ไปหลายปี บาง web อาจต้องกดเลื่อนเดือนที่ละเดือนไปเรื่อยๆ ต้องใช้เวลานาน ทำให้รู้สึกเบื่อ… วันนี้เราจะมานำเสนอ Flatpickr ที่เป็นไลบรารี่ javascript ใช้สำหรับรับ input ที่เป็น datetime picker ที่ยืดหยุ่น มีขนาดเล็กและใช้ง่าย โดย output ที่ได้จะเป็น String ตาม format ที่เราต้องการ

    Flatpickr js รูปแบบจะเป็นแนว Lean กับ UX-driven สามารถใช้งานได้กับ JS ธรรมดาหรือ jQuery โดย Flatpickr รองรับภาษาไทยได้โดยเลือก Localization เป็นไทยเพื่อให้สามารถแสดงเป็นภาษาไทย และรองรับรูปแบบเวลาที่แสดง 24 ชม. เพราะจะเข้าใจง่ายกว่า AM กับ PM ซึ่ง library อื่นๆ อีกหลายตัวยังไม่สามารถรองรับ จุดเด่น คือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที

    การใช้งานสามารถใช้ได้ง่ายๆ โดยใช้แค่ 2 ไฟล์ ก็สามารถใช้ option ได้เกือบครบ ซึ่งไฟล์ ที่จำเป็นประกอบด้วย ไฟล์ js 1 ไฟล์ และ ไฟล์ css 1 ไฟล์

    <link rel=”stylesheet” href=”flatpickr.css”>

    <script src=”flatpickr.js”></script>

    ถ้าใช้งานร่วมกับ jquery ก็ต้อง เพิ่ม library jquery เข้ามาด้วย

      <script src=”jquery.min.js”></script>

    การใช้งาน

    $(“.selector”).flatpickr(
    optional_config
    );

    ตัวอย่างกล่อง input ที่ใช้เลือก วันที่

     <input type=”text” id=”timePicker” placeholder=”Please select Time”>

    การแสดงเวลาแบบ Basic
    $(“#basicDate”).flatpickr({
    enableTime: true,
    dateFormat: “F, d Y H:i”,
    time_24hr: true
    });

    ภาพที่ 1 ฺBasic Calendar

    เราสามารถกำหนดช่วงของวันที่ค้นหาได้ง่ายขึ้น เนื่องจากมี Range Calendar (ภาพที่ 2) ให้ใช้งาน หรือจะเป็นเลือกแบบ Multiple เลือกทีละหลายๆวันก็ได้ และยังมี Plugin หรือ Theme ให้เลือกใช้งานอีกด้วย

    การแสดงเวลาแบบ Range Datetime
    $(“#rangeDate”).flatpickr({
    mode: ‘range’,
    dateFormat: “Y-m-d”
    });

    ภาพที่ 2 Range Calendar

  • แนะนำ Knex js

    สำหรับผู้ที่เขียน web แล้วต้องมีการเชื่อมต่อกับ database นั้น การเชื่อมต่ออาจไม่ใช่เรื่องง่าย ถ้าจะใช้ JavaScript มาช่วยอาจมีความซับซ้อนหรือมีความยุ่งยากมาก ดังนั้นจึงมี tool เพื่อนำมาใช้ในการจัดการ database โดยเฉพาะผู้ที่ถนัด Node.js และ Browser โดย tool ที่กล่าวถึงนั้น คือ “knex.js”

    knex.js เป็น SQL query builder ที่สามารถต่อกับฐานข้อมูลได้หลากหลาย สามารถที่จะเรียนรู้เข้าใจง่ายและสามารถปรับเปลี่ยนได้ตลอด โดยปัจจุบันสามารถรองรับการทำงานกับ database  Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, และ Amazon Redshift สามารถรันได้ทั้ง Node.js และ Browser รองรับ transactions, polling, streaming queries, promise และอื่นๆ

    การติดตั้งสามารถลงผ่าน npm ได้เหมือน ตัวอื่นๆในตระกูล Node เช่น

    npm install knex –save

    และโหลด library สำหรับเชื่อมต่อฐานข้อมูลต่างๆ ผ่านคำสั่งดังนี้

    npm install pg
    npm install sqlite3
    npm install mysql
    npm install mysql2
    npm install oracle
    npm install mssql

    ตัวอย่างการ connect กับ database Mysql

    var knex = require(‘knex’)({
    client: ‘mysql’,
    connection: {
    host : ‘127.0.0.1’,
    user : ‘your_database_user’,
    password : ‘your_database_password’,
    database : ‘myapp_test’
    }
    });

    การใช้คำสั่งของ sql ( select, insert, update, delete) สามารถเขียนได้ง่าย โดยมีฟังก์ชั่นมาให้พร้อมใช้งานแล้ว

    ตัวอย่างการใช้คำสั่ง select

    Ex1 : select * from f_student_payment สามารถใช้คำสั่ง

    knex.select().table(‘f_student_payment’) หรือ 

    knex.select().from(‘f_student_payment’)

    Ex2 : select ‘payment_id’, ‘student_id’, ‘address’ from ‘f_student_payment’

    knex.select(‘payment_id’, ‘student_id’, ‘address’).from(‘f_student_payment’)

    Ex3 : select * from ‘f_student_payment’ where ‘student_id’ = ‘5710121045’

    knex(‘f_student_payment’).where(‘student_id’, ‘5710121045’)

    ตัวอย่างการใช้คำสั่ง insert

    Ex4 : insert into ‘f_student_payment’ (‘student_id’) values (‘621012025’)

    knex(‘f_student_payment’).insert({ student_id : ‘621012025’})

    ตัวอย่างการใช้คำสั่ง update

    Ex5 : update ‘f_student_payment’ set ‘student_id’ = ‘621012025’

    knex(‘f_student_payment’).update(‘student_id’, ‘621012025’)

    ตัวอย่างการใช้คำสั่ง delete

    Ex6 : delete from f_student_payment where student_id = ‘621012025’

    knex(‘f_student_payment’)
    .where(‘student_id’, ‘621012025’)
    .del()

  • Gatsby Framework

    Gatsby คืออะไร?

    • เป็น open source framework มีพื้นฐานมาจาก React
    • เป็น Static Site Generator กล่าวคือเมื่อเขียนเว็บ -> Build -> HTML+ css + javascript -> Deploy กับ web server หลายๆเว็บ เช่น apache, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ

    Create Gatsby Project
    ก่อนอื่นเราจะต้องมาติดตั้งตัว gatsby-cli ซึ่งสามารถใช้ได้ทั้งคำสั่ง Yarn หรือ NPM ดังภาพที่ 1

    npm install -g gatsby-cli

    yarn global install gatsby-cli

    ภาพที่ 1 ติดตั้ง gatsby-cli

    เมื่อเราติดตั้ง gatsby-cli ขั้นตอนต่อไปก็จะเป็นการสร้าง website ใหม่ด้วย คำสั่ง

    gatsby new blog

    หลังจากสร้าง blog เรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ ในที่นี้คือ “blog” แล้วใช้คำสั่ง 

    gatsby develop เพื่อรัน development server

    และเราจะได้ default page ที่ Gatsby สร้างให้ ซึ่งสามารถเข้าถึงเว็บได้ด้วย http://localhost:8000 ดังภาพที่ 2

    ภาพที่ 2 Gatsby Default Starter

    ต่อไปเราจะลองแก้ไข Gatsby Config ในไฟล์ gatsby-config.js แล้วกลับไปยัง Browser ที่เราเปิดไว้ในภาพที่ 2จะได้ผลลัพธ์ดังภาพที่ 3 กล่าวคือเราสามารถแก้ Code แล้วSave หน้าเว็บก็จะอัพเดททันทีโดยที่เราไม่ต้องสั่ง Build ใหม่ เนื่องจาก Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอ เหมือนรัน develop

    ภาพที่ 3 ผลลัพธ์จากการแก้ไข gatsby-config.js

  • Angular : Routing

    ต่อจากการการทำ Directives ในบล็อกก่อนหน้า เราจะมาพูดถึงการสร้าง Routing ที่เป็นส่วนช่วยในการเปลี่ยนหน้าของระบบ ซึ่งจะทำให้ระบบสามารถแบ่งส่วนได้ชัดเจนมากยิ่งขึ้น โดยในหัวข้อนี้เราจะทำการสร้างเมนู เพื่อให้สามารถเปลี่ยนหน้าแบบไม่ต้องโหลดได้ โดยเราจะสร้าง Component “Home” เพื่อเป็นหน้าหลัก โดยใช้คำสั่ง

    >ng generate component home

    จากนั้นให้เราสร้างเมนู ในไฟล์ app.component.html ดังภาพที่ 1

    ภาพที่ 1 สร้างเมนู Home, Calculator, User
    ภาพที่ 2 ผลลัพธ์จากการเพิ่มเมนู

    การที่เราจะทำให้ Angular เปลี่ยนหน้าโดยที่ไม่ต้องโหลดหน้าใหม่ เราสามารถใช้ความสามารถของ Router ที่จะพาไปยังหน้าที่เราต้องการ โดยเราจะต้องเข้าไปทำการตั้งค่าที่ไฟล์ app.module.ts เพื่อให้ Angular ทราบก่อน โดยเราจะนิยาม Route หรือเส้นทางของเราใน myRoutes เพื่อบอกว่าเมื่อไหร่ที่เข้ามาจาก /pages ให้วิ่งไปที่ component ชื่อ HomeComponent, CalculatorComponent หรือ UserComponent และถึงแม้เราจะมีเส้นทางแล้ว แต่หาก root module ของเราไม่รู้จักก็เท่านั้น เราจึงต้องทำให้ root module ของเรารับรู้ผ่าน RouterModule.forRoot() ดังภาพที่ 3

    ภาพที่ 3 การตั้งค่าที่ไฟล์ app.module.ts

    จากนั้นไปยังไฟล์ app.component.html ที่เราสร้างไว้ในภาพที่ 1 และแก้ไข ดังภาพที่ 4 และแสดงผลลัพธ์ในภาพที่ 5

    ภาพที่ 4 ใส่ลิงค์ให้เมนู
    ภาพที่ 5 ผลลัพธ์

    สรุปการทำ Routing เหมาะกับการทำ Single Page Application เพื่อส่ง request ขอข้อมูลแค่บางส่วนของหน้าเท่านั้น…

  • Angular : Directives

    Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่

    1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น

    • ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน
    • ng-controller : จะใช้ controller จัดการกับ view ไหน
    • ng-model : binding ค่าเข้า view กับ model
    • ng-show/ ng-hide : เพื่อแสดง/ซ่อน element
    • ngFor : ใช้ในการวนลูป
    • ngIf : ใส่เงื่อนไขเช็คค่า

    2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น

    • HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive>
    • attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div>
    • class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div>
    • comment เช่น <!–directive: ma-directive test –>

    เราจะมาลองทำทั้งสองแบบ ก่อนอื่นสร้าง component ใหม่ชื่อ user โดยใช้คำสั่งดังภาพที่ 1 และใส่เพิ่ม tag

    <app-user></app-user> ในหน้า app.component.html

    ภาพที่ 1 สร้าง user component

    จากนั้นเปิดไฟล์ user.component.ts เพิ่มโค้ดดังภาพที่ 2 ซึ่งเป็นการกำหนดตัวแปรชื่อ users เก็บข้อมูลแบบ array แต่ละ user ประกอบไปด้วย name, code และ status ซึ่งเราจะนำไปวนลูปแสดงข้อมูล

    ภาพที่ 2 สร้าง array ของ users

    การใช้ Built-in Directive ในที่นี้จะยกตัวอย่าง ngFor สำหรับการวนลูป ซึ่งเราสามารถนำไปใส่ใน HTML Tag หรือ HTML Element นั้นๆได้เลยในไฟล์ user.component.html และหากต้องการใส่เงื่อนไข เราสามารถใช้ ngIf เพื่อเช็คค่าต่างๆ ดังภาพที่ 3

    ภาพที่ 3 ตัวอย่างการใช้ ngFor และ ngIf

    จากภาพที่ 3 เราใช้ ngIf เพื่อตรวจสอบสถานะของ user โดยถ้าสถานะเป็น single จะแสดงรูปดาว และสถานะ married จะแสดงรูปหัวใจ เมื่อรันหน้าเว็บจะปรากฎหน้าจอดังภาพที่ 4

    ภาพที่ 4 ผลลัพธ์ที่ได้

    สำหรับตัวอย่างการทำ Custom Directive เราจะมาสร้าง highlight เมื่อเอาเมาส์ไปชี้ที่ชื่อ user โดยใช้คำสั่งดังภาพที่ 5 เพื่อสร้างDirective ชื่อ highlight

    ภาพที่ 5 คำสั่งสร้าง Custom Directive

    จากนั้นเปิดไฟล์ highlight.directive.ts ดังภาพที่ 6 ซึ่ง selector เป็นตัวบอกว่าคอมโพเน้นของเราจะมีชื่อเป็นอะไรเมื่อไปปรากฎที่ HTML Element หรือ Attribute ส่วนการเรียกใช้งานก็ให้อ้าง attribute “appHighlight” ตามภาพที่ 3

    ภาพที่ 6 highlight directive

    จากภาพที่ 6 เป็นการเซตค่าเมื่อเอาเมาส์ไปชี้ onMouseEnter โดยจะไปเรียกฟังก์ชั่น highlight() เพื่อที่จะเปลี่ยนสีพื้นหลัง และ ขนาดตัวอักษร และเมื่อเอาเมาส์ออกเรียกฟังก์ชั่น undoHighlight() ซึ่งจะได้ผลลัพธ์ดังภาพที่ 7

    ภาพที่ 7 แสดงผลลัพธ์การทำ highlight directive

  • Angular : Data Binding & 2-Way Data Binding

    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

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

    1. selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ
    2. templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html
    3. styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด

    ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ

    และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้

     

     

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

    • Controllers
    • Services
    • Filters
    • Directives
    • อื่นๆ

    ทดลองใช้ FormsModule ซึ่งเป็นโมดูลที่ใช้ในการจัดการฟอร์มต่างๆ ของ HTML รวมทั้งช่วยในการทำ Data Binding ในส่วนของข้อมูลฝั่งควบคุมกับค่าในฟอร์มของฝั่งที่แสดง เปิดไฟล์ app.module.ts และทำการแก้ไข ดังนี้

    บรรทัดที่เพิ่มเข้าไปคือการเพิ่มโค้ดเข้าไปเพื่อดึงโมดูลนี้มาใช้งาน จากนั้นลองนำส่วนของฟอร์มมาใช้กับโปรเจคโดยเปิดไฟล์ app.component.html ขึ้นมา และเพิ่มโค้ดตามรูปด้านล่าง

    และลองรัน Browser จะได้ผลัพธ์ ดังนี้

     

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

         สวัสดีวันค่ะ… บล็อคนี้เราก็ยังคงอยู่กับ 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