Get Adobe Flash player

sarinya.k

Devexpress – สร้างตัวเลือกปีบน Dropdown / Combobox

ในกรณีที่เป็นตัวเลือกปีที่จะมีการเปลี่ยนแปลงตลอดเวลา เราจะใช้การ datasource ดึงข้อมูลปีปัจจุบันจากข้อมูล DateTime ดังนี้

เมื่อกำหนดค่าและทำการ datasource จะได้ drop down หรือ combo box ที่แสดงค่าปีปัจจุบันตามที่กำหนด (ในที่นี้เลือกแสดงค่าเป็นปี พ.ศ.)

และเมื่อทำการกดที่ลูกศรทางขวาเพื่อดูตัวเลือก ก็จะแสดงตัวเลือกตามที่กำหนดไว้

 

การสร้าง Brush ใช้เองบน Photoshop

กรณีที่ผู้ใช้อยากได้ brush ที่เป็นลวดลายเฉพาะ หรือในรูปแบบที่ถูกใจ สามารถทำตามขั้นตอนได้ดังนี้

 

1. เลือกรูปที่ต้องการนำมาทำเป็น brush โดยทำการ crop รูปให้ได้ขนาดตามต้องการ

2. กดเลือกคำสั่งที่เมนู Edit > Define Brush Preset

3. ทำการตั้งชื่อ brush จากนั้นกด OK

4. brush ที่สร้างขึ้นเองจะถูกเพิ่มเข้าไป
ซึ่งจะดูได้จากรูปแบบของ brush เวลาที่กดใช้ (ส่วนที่เพิ่มใหม่จะอยู่ล่างสุด)

หรือสามารถดูได้จาก brush preset จากเมนู Window > Brush Preset (ส่วนที่เพิ่มใหม่จะอยู่ล่างสุด เช่นกัน)

 

หลังจากสร้างแล้ว เมื่อทดลองใช้ ก็จะได้ brush ในลวดลายตามที่ผู้ใช้ต้องการ

CSS : การเน้น text input เวลาทำการกรอกข้อมูล

ปกติเมื่อมีการใช้งาน text input หากไม่มีการตกแต่งใดๆ ในขณะที่ทำการที่กรอกข้อมูลลงไป textbox input ก็จะมีรูปลักษณ์ไม่ต่างไปจากตอนที่ไม่ได้กรอกข้อมูล แต่ถ้าหากต้องการเพิ่มลูกเล่นให้ text input มีการเน้นจุดที่ทำการกรอกข้อมูล ก็สามารถทำได้โดยกำหนดค่า input ภายใต้ <style>…</style> แล้วใช้โค้ดนี้

input[type=ประเภทtextbox]:focus {
ลักษณะ text input ที่ต้องการ เช่น สี สีขอบ ความหนาของขอบ ฯลฯ;
}

 

ตัวอย่างการใช้งาน (สมมติกำหนดให้ input 2 ประเภทแสดงผลต่างกัน)

 

จะได้ผลลัพธ์ดังนี้

– เมื่อทำการกรอกส่วนที่เป็นประเภท text
ส่วนที่ทำการกรอกข้อมูลจะขึ้นขอบสีดำหนารอบตัว text input ตามที่ตั้งค่าไว้ว่า border: 3px solid #555

– เมื่อทำการกรอกส่วนที่เป็นประเภท password
ส่วนที่ทำการกรอกข้อมูลจะมีพื้นหลังสีเหลืองอ่อนภายใน text input ตามที่ตั้งค่าไว้ว่า background-color: lightyellow

จะเห็นได้ว่า สิ่งที่ทำให้ text input ทั้งสองประเภทแสดงผลลัพธ์ต่างกัน อยู่ที่คำสั่งภาย :focus ของ input แต่ละชนิดนั่นเอง
ซึ่งการกำหนด input[type=???]:focus ก็ต้องสอดคล้องกับ type=”???”  ที่เซตบนตัว input ด้วย

CSS : การตกแต่ง link

โค้ด css จะใช้ในการตกแต่งส่วนต่างๆของหน้าเว็บไซต์ให้มีความสวยงาม คราวนี้เราจะมาอธิบายในส่วนของการใส่สีส่วนต่างๆของ link ที่อยู่ภายใต้ <style>…</style>

  • a:link จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่แสดงปกติ
  • a:visited จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ที่ผู้ใช้งานเคยคลิกแล้ว
  • a:hover จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่เลื่อนเมาส์เข้าไปยังบริเวณ link นั้นๆ
  • a:active จะเป็นส่วนสำหรับตั้งค่าตกแต่ง link ในเวลาที่ผู้ใช้งานกดคลิก link นั้นๆ

 

ตัวอย่างการตั้งค่า

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

  • a:link ตั้งค่า background เป็นสีเหลือง จึงแสดงผลลัพธ์นี้เป็นค่าเริ่มต้นสำหรับ link

  • a:hover ตั้งค่า background เป็นสีเขียวอ่อน จึงแสดงผลลัพธ์นี้เมื่อผู้ใช้งานนำเมาส์ไปวางบริเวณ link

  • a:active ตั้งค่า background เป็นสีชมพู จึงแสดงผลลัพธ์นี้ในขณะที่ผู้ใช้งานคลิกเมาส์ที่ตัว link

  • a:visited ตั้งค่า background เป็นสีฟ้า จึงแสดงผลลัพธ์นี้หลังจากกลับมาที่หน้าเดิมที่เคยคลิก link ดังกล่าวไปแล้ว

 

CSS : การใช้ cursor

ปกติแล้วเวลาใช้งานเว็บไซต์ต่างๆ CURSOR หรือเมาส์ที่ชี้มักจะแสดงในรูปลูกศร หรือเป็นรูปมือเวลาเลื่อนเมาส์ไปชี้ที่ LINK ต่างๆ แต่ถ้าต้องการตกแต่งเว็บไซต์ให้มีความน่าสนใจยิ่งขึ้น การเปลี่ยนรูป CURSOR ก็เป็นอีกเทคนิคหนึ่งที่สามารถทำได้ง่ายๆ

การเปลี่ยนรูป CURSOR สามารถเขียนด้วย CSS ด้วยคำสั่งนี้

cursor: รูปแบบที่ต้องการให้แสดง;

 

ตัวอย่างการใช้

<a href=”https://www.yourlink_url.com” style=”cursor:crosshair“>ลากเมาส์มาตรงนี้</a>

 

ผลลัพธ์

ลากเมาส์มาตรงนี้
 

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

Credit :

  • http://coursesweb.net/css/css-cursor-property-custom-cursors
  • https://www.webcodegeeks.com/css/css-cursor-pointer-example/
  • http://www.codetukyang.com/html/technic/mouseover_chg_cursor.htm

CSS : การใช้ overflow ในการจำกัดพื้นที่แสดงข้อมูล

กรณีที่เราอยากจัด layout บนหน้าเว็บเพจให้สวยงาม โดยกำหนดว่าอยากจะให้ข้อมูลแสดงภายในขนาดพื้นที่ๆจัดไว้ เราสามารถกำหนด style ด้วยคำสั่ง overflow เพื่อช่วยจัดการในกรณีที่ข้อมูลมีเนื้อหาหรือขนาดใหญ่เกินพื้นที่ๆกำหนดได้ ด้วยคำสั่ง

 

– overflow: รูปแบบที่ต้องการให้แสดง;

 

overflow สามารถแสดงผลในรูปแบบต่างๆ ตามตัวอย่าง โดยสมมติกำหนดพื้นที่แสดงข้อมูลเป็นพื้นที่สีฟ้า เมื่อเขียนคำสั่งรูปแบบต่างๆจะให้ผลต่างกันดังนี้

  •  overflow: visible แสดงข้อมูลที่ต้องการทั้งหมด

  • overflow: hidden ซ่อนข้อมูลส่วนที่ล้นเกินพื้นที่

  • overflow: scroll แสดงข้อมูลทั้งหมดภายใต้พื้นที่ที่กำหนด โดยใช้ scroll bar แสดงผลส่วนที่ล้น

  • overflow: auto แสดงผลอัตโนมัติ ถ้าข้อมูลเกินก็จะมีแถบ scroll bar ขึ้นให้ (ในรูปตัวอย่างข้อมูลเกิน จึงแสดงผลเหมือน scroll)

 

การทำตัวอักษรวิ่งด้วย HTML

นอกจากการเขียนเนื้อหาเว็บไซต์ด้วยตัวอักษรธรรมดาแล้ว ในการเขียนเว็บด้วย HTML ยังสามารถเพิ่มลูกเล่นให้กับตัวอักษรด้วยการกำหนดให้ตัวอักษรสามารถเคลื่อนไหวได้อีกด้วย ซึ่งสามารถเพิ่มความน่าสนใจให้กับเว็บนั้นๆได้ แถมวิธีการเขียนก็ไม่ยุ่งยาก ตัวโค้ดที่ใช้ ได้แก่

<marquee direction=”ทิศทางการวิ่ง” width=”ความกว้าง” height=”ความสูง” scrollamount=”ความเร็วในการวิ่งของตัวอักษร” scrolldelay=”เวลาหน่วง”>ข้อความที่จะแสดง</marquee>

 

ในการเขียนคำสั่งสร้างตัวอักษรที่มีการเคลื่อนไหว เราจะเขียนภายใต้ <marquee> และปิดด้วย </marquee>
ทีนี้ ในการตั้งค่าตัวอักษรว่าจะให้เคลื่อนที่อย่างไร จะมาเซตในส่วนของ <marquee>

– direction=”ทิศทางการวิ่ง” เป็นการกำหนดทิศทางการวิ่งของตัวอักษร มี 4 อย่าง ได้แก่

  • <marquee direction=”left”>ข้อความวิ่งจากขวาไปซ้าย</marquee>
  • <marquee direction=”right”>ข้อความวิ่งจากซ้ายไปขวา</marquee> 
  • <marquee direction=”up”>ข้อความวิ่งจากล่างขึ้นบน</marquee>
  • <marquee direction=”down”>ข้อความวิ่งจากบนลงล่าง</marquee>

– width=”ความกว้าง” เป็นการกำหนดความกว้างของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ left หรือ right) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์

– height=”ความสูง” เป็นการกำหนดความสูงของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ up หรือ down) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์เช่นเดียวกับการกำหนดความกว้าง

– scrollamount=”ความเร็วในการวิ่งของตัวอักษร” และ scrolldelay=”เวลาหน่วง” เป็นการกำหนดความเร็วในการวิ่งและกำหนดความหน่วงของ โดยกำหนดเป็นตัวเลข ถ้าตัวเลขมากก็ยิ่งเร็วมาก ตัวเลขน้อยก็ยิ่งช้า

 

เพิ่มเติม
หากต้องการเซตให้ข้อความวิ่งไปวิ่งมา จะเซตด้วย behavior=”alternate” เช่น <marquee behavior=”alternate”>ข้อความที่ต้องการ<marquee>

นอกจากนี้ ยังสามารถเซตค่าสีพื้นหลัง สีอักษร ขนาดฟ้อนท์กับ <marquee> ได้เหมือนตัวอักษรตามปกติ

การทำ 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. กดปุ่มเข้าสู่ระบบ ถ้าล๊อคอินสำเร็จ ระบบจะเข้าสู่หน้าส่วนกลางเพื่อเลือกโหมดการใช้งาน

 

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


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


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

 

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


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


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

HTML : การใส่ลูกเล่นให้รูปภาพเปลี่ยนรูปเมื่อนำเมาส์ไปชี้

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

<img src=”urlรูปภาพที่ 1” border=”0″
onmouseover=”this.src=’urlรูปภาพที่ 2‘;”
onmouseout=”this.src=’urlรูปภาพที่ 1‘;”
/>

ตัวอย่างการใส่โค้ด :

ในการนำรูปภาพมาใส่ลูกเล่น ให้นำ url รูปภาพมากำหนดให้กับค่า src ซึ่งจะต้องตรงกับ url ที่ใช้กับ onmouseout (ตามตัวอย่างใช้ไอคอนพื้นหลังสีฟ้า) ในขณะที่ url ที่ใช้กับ onmouseover จะกำหนดเป็นอีก url หนึ่ง (ตามตัวอย่างใช้ไอคอนพื้นหลังสีเขียว)

ซึ่งจะแสดงผลได้ดังนี้

  • ลักษณะรูปภาพในหน้าเว็บปกติ จะแสดงรูปที่ 1 (url รูปใน src และ onmouseout)

 

  • เมื่อนำเมาสืชี้ไปที่รูปภาพไอคอนที่เชตไว้ ลักษณะรูปภาพในหน้าเว็บจะเปลี่ยนเป็นรูปที่ 2 (onmouseover)

ทั้งนี้ หากผู้ใช้นำเมาส์ออกห่างจากพื้นที่ของรูปภาพ รูปภาพเดิมที่เซตไว้ก็จะกลับคืนมาเป็นหน้าเว็บไซต์ปกติ