Get Adobe Flash player

Angular-materialize Plugin สำหรับการใช้งาน AngularJS ร่วมกับ Materialize CSS

จากการแนะนำ CSS Framework ที่ออกแบบตามหลักการของ Material Design ที่ผ่านมา http://info.arit.rmutp.ac.th/2017/07/31/materialize/ หากต้องนำมาใช้ร่วมกับ AngularJs (version 1) ควรจะใช้ Plugin นี้เพื่อมาช่วยให้ทำงานร่วมกันได้ เพราะด้วยตัว Materialize CSS มี JavaScript เป็นของตัวเอง

การแนบไฟล์ JavaScript และ CSS ที่ต้องใช้

การเรียกใช้ Module ชื่อ ‘ui.materialize’

จากนั้น Form Input ต่าง ๆ ที่ถูก apply โดย Materialize CSS ไม่ว่าจะเป็น Text, Date และ Time จะถูกผูกค่ากับ ng-model ของ AngularJs ดังตัวอย่างต่อไปนี้

Input-date

HTML

JavaScript ใน Controller

อ่านรายละเอียดเพิ่มเติมได้ที่ https://krescruz.github.io/angular-materialize/

ปรับปรุงระบบสารบรรณอิเล็กทรอนิกส์ (edoc) ปรับข้อมูลผู้รับให้ตรงกับฐานข้อมูล กบ.

ปรับปรุงระบบสารบรรณอิเล็กทรอนิกส์ (edoc) ปรับข้อมูลผู้รับให้ตรงกับฐานข้อมูล กบ. โดย

  • ข้อมูลบุคลากรจะอ้างอิงกับฐานข้อมูล HRM ซึ่งเป็นฐานข้อมูลบริหารจัดการข้อมูลบุคลากรภายในมหาวิทยาลัยที่ดูแลโดยกองบริหารงานบุคคล
  • สามารถแยกข้อมูลบุคลากรตามตำแหน่งงาน และตำแหน่งทางการบริหารได้
  • สามารถแสดงข้อมูลบุคลากรที่ไปช่วยราชการนอกหน่วยงานได้ เช่นตำแหน่ง อาจารย์ที่ประจำคณะ แต่ไปช่วยราชการที่อื่น
  • สามารถแสดงข้อมูลหน่วยงานย่อย หรือระดับสาขา เพื่อให้สามารถส่งเอกสารให้อาจารย์แต่ละสาขาได้

วิธีการใช้ Node.js และ Git เพื่อทำการติดตั้ง bower, typescript, tsd และใช้ bower ติดตั้ง bootstrap, AngularJS

ขั้นตอนการติดตั้งจะต้องติดตั้ง Node.js ก่อนเพื่อใช้คำสั่ง npm ติดตั้ง bower หลังจากนั้นติดตั้ง Git เพื่อให้สามารถใช้งาน bower ติดตั้งไฟล์ลงใน path ที่ต้องการได้ หลังจากนั้นใช้คำสั่ง bower เพื่อติดตั้ง bootstarp,AngularJS ลง Proejct ได้

STEP 1 จะต้องติดตั้ง node.js ก่อน เพราะจะต้องใช้คำสั่ง npm เพื่อทำการติดตั้ง bower, typescript, tsd ฯลฯ

1) ติดตั้ง node.js จากเว็บ https://nodejs.org/en/

mvc1

 

หลังจากนั้นให้ทำการ install Node.js ตั้วล่าสุดลงไป

2) เมื่อลง Node.js ให้เปิด CMD ขึ้นมาเพื่อทำการสั่งให้ Node.js ทำการ install package ที่ต้องการใช้งานดังนี้

ติดตั้ง bower ใช้คำสั่ง npm install -g bower

 

mvc2

 

 

ติดตั้ง typescript (ไม่ใช้ก็ได้) ใช้คำสั่ง npm install -g typescript

mvc3

 

ติดตั้ง tsd ใช้คำสั่ง npm install -g tsd 

mvc4

 

STEP 2 ติดตั้ง Git โดยเข้าไปโหลดตัวติดตั้งได้ที่ https://git-scm.com/ หลังจากนั้นให้ install

mvc6

หลังจากนั้นให้กด next ไปเรื่อยๆ

mvc7

หลังจากนั้นให้กด next ไปเรื่อยๆ  จนพบหน้า Adjust PATH environment

mvc8

ในหัวข้อ Configuring the line ending conversion

mvc9

ในหัวข้อ Configuring the terminal emulator to use with Git Bash

mvc10

STEP 3 หลังจากนั้นเราจะใช้ bower สำหรับ install bootstrap และ AngularJS ลงใน folder project ของเรา

อันดับแรกให้สร้าง folder project ขี้นมาก่อนให้เปิด visual studio -> new project asp.net empty และกำหนดชื่อ project แล้วกด ok จะได้โปรเจ็คดังภาพด้านล่าง และต้องใช้ part สำหรับติดตั้ง bootstrap กับ AngularJS

mvc5

เปิด CMD ขึ้นมาแล้วพิมพ์ bower install bootstrap AngularJS ลงไป

mvc11

หลังจากนั้น bower จะทำการลงไฟล์ที่ต้องการใช้ในโปรเจ็คของเราตาม path ที่ประกาศไว้

mvc12

 

 

การทำ Datasource และกำหนดค่าเริ่มต้นให้กับ Combobox (ASP.NET C#)

DropDownList กับ Combobox มีความคล้ายคลึงกันในแง่ของการเอาไปใช้งาน และในส่วนของการตั้งค่า Datasource สำหรับตัว DropDownList กับ Combobox เองก็มีความคล้ายคลึงกัน ดังนี้

ชื่อ combobox.Item.Clear();
ชื่อ combobox.TextField = ชื่อ col ของ dataset;
ชื่อ combobox.ValueField = ชื่อ col ของ dataset;
ชื่อ combobox.DataSource = ชื่อของ dataset;
ชื่อ combobox.DataBind();

ตัวอย่างโค้ด

จะเห็นได้ว่าโค้ด มีความคล้ายคลึงกันมากในส่วนการนำค่า Dataset มากำหนดค่าให้กับ
แต่จะมีข้อแตกต่างเล็กน้อยในกรณีที่มีการกำหนด index หรือการกำหนด combobox ค่าใดค่าหนึ่งเริ่มต้นไว้ ดังรูป

สิ่งที่ใช้ในการเซตค่าเริ่มต้น นั่นคือส่วน .Value

ชื่อ combobox.SelectIndex = -1;
ชื่อ combobox.Value = ค่าที่กำหนด;

.SelectIndex ปกติแล้วจะใช้ในการกำหนด index ของตัว combobox และ dropdownlist
แต่ในที่นี้ ที่กำหนดเป็น -1 ตายตัว ก็คือการเคลียร์ค่า select เดิมก่อนจะกำหนดค่าใหม่

.Value 
ส่วนนี้จะเป็นโค้ดสำหรับการเซตค่าเริ่มต้นให้กับตัว combobox
ในขณะที่การกำหนดค่าเริ่มต้นของ dropdownlist จะใช้โค้ด

  • ชื่อdropdownlist.Items.FindByValue(ค่าที่กำหนดเป็น string).Selected = true;
  • ชื่อdropdownlist.SelectedValue = ค่าที่กำหนด;

พัฒนาระบบเก็บวัสดุและครุภัณฑ์สำนักงาน สำหรับใช้งานภายในสำนักวิทยบริการ

การพัฒนาระบบเก็บวัสดุและครุภัณฑ์สำนักงาน จะมีสองระบบ คือ 1) ระบบเก็บครุภัณฑ์สำนักงานจะดึงข้อมูลจากฐานข้อมูล ERP (ระบบบริหารทัพย์สินภายในมหาวิทยาลัย) เพื่อเชื่อมโยงกับเลขครุภัณฑ์ ส่วน 2) ระบบเก็บวัสดุ จะเป็นการเก็บข้อมูลที่นอกเหนือจากข้อมูลในระบบ ERP เพื่อให้สะดวกต่อการบริหารจัดการวัสดุสำนักงาน

ระบบวัสดุ เป็นส่วนหนึ่งของระบบบริหารจัดการครุภัณฑ์และวัสดุ ระบบที่ใช้บันทึกการเบิกวัสดุภายในสำนักวิทยบริการ ที่สามารถสร้างและแก้ไขรายละเอียดเกี่ยวกับวัสดุและใบเบิกวัสดุได้ ภายในระบบประกอบด้วย

  1. ระบบบันทึกรายละเอียดวัสดุ จะเป็นการบันทึกรายการวัสดุที่มีในคลังของสำนักวิทยบริการ ในหน้าวัสดุจะแสดงรายการวัสดุทั้งหมดและรายละเอียด
    เช่น วัสดุมีอะไรบ้าง เป็นชนิดไหหน ใช้งบใดในการจัดซื้อ จำนวนที่จัดซื้อ ราคาต่อหน่วย ยอดคงเหลือปัจจุบัน เป็นต้น

  2. ระบบบันทึกใบเบิกวัสดุ จะเป็นการบันทึกรายละเอียดการเบิกจ่ายวัสดุให้แก่บุคลากรของสำนักวิทยบริการ ในหน้าใบเบิกวัสดุจะแสดงรายละเอียดโดยรวมเกี่ยวกับใบเบิกวัสดุ
    เช่น ชื่อผู้เบิก ผู้จ่าย วัสดุที่เบิก ยอดคงเหลือ วันที่ทำการเบิก วันที่ทำการจ่าย เป็นต้น

 

วิธีการเข้าใช้

  1. ทำการล๊อคอินเข้าใช้ ด้วย username rmutp passport
  2. พิมพ์ password
  3. กดปุ่มเข้าสู่ระบบ ถ้าล๊อคอินสำเร็จ ระบบจะเข้าสู่หน้าส่วนกลางเพื่อเลือกโหมดการใช้งาน

 

วิธีเพิ่มรายการวัสดุ หรือ รายการใบเบิกวัสดุ


– ในการจะเพิ่มรายการวัสดุหรือใบเบิกวัสดุ เวลาที่ผู้ใช้งานต้องการจะเพิ่มรายการ
จะต้องคลิกไอคอน “เครื่องหมายบวก” ที่หน้าวัสดุหรือใบเบิกวัสดุ โดยไอคอนจะอยู่ตรงมุมซ้ายบนของตาราง


– เมื่อกดแล้ว ระบบจะนำผู้ใช้งานไปยังหน้าเพิ่มวัสดุ หรือเพิ่มใบเบิกวัสดุ
ให้ผู้ใช้ทำการกรอกรายละเอียดต่างๆ แล้วกดบันทึก เป็นอันเรียบร้อย

 

วิธีแก้ไขรายการวัสดุ หรือ รายการใบเบิกวัสดุ


– ในการจะแก้ไขรายการวัสดุหรือใบเบิกวัสดุ เวลาที่ผู้ใช้งานต้องการจะแก้ไขรายการ จะต้องดูจากลิสท์รายชื่อรายการในหน้านั้นๆ
เมื่อหารายการที่ต้องการแก้ไขเจอ ให้กดไอคอน “แก้ไข” ที่อยู่ทางซ้ายมือของแถวรายการข้อมูลนั้น


– เมื่อกดแล้ว ระบบจะนำผู้ใช้งานไปยังหน้าแก้ไขรายละเอียด โดยจะดึงข้อมูลจากของเดิมมาจากฐานข้อมูลมาแสดง
ให้ผู้ใช้ทำการแก้ไขรายละเอียดต่างๆ เมื่อแก้ไขเรียบร้อยแล้ว ให้กดบันทึกข้อมูลสู่ระบบ
หมายเหตุ : ในการแก้ไขข้อมูลที่เกี่ยวกับจำนวนวัสดุ ระบบไม่สามารถคำนวนยอดคงเหลืออัตโนมัติให้อย่างตอนที่ทำการเพิ่มรายการ
ทางผู้ใช้งานจึงควรใช้ความระมัดระวังในการแก้ไขข้อมูลในส่วนนี้