Get Adobe Flash player

sarinya.k

การทำตัวอักษรวิ่งด้วย 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)

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

การใส่ Placeholder ลงใน Text input

Placeholder คือข้อความตัวอย่างหรือคำอธิบายที่ใส่ text input เพื่ออธิบายคุณลักษณะของ text หรือ textarea หรือกระทั่งใช้ในการยกตัวอย่างรูปแบบข้อความที่อยากให้ผู้ใช้งานกรอกลงในหน้าเว็บไซต์ เช่น รูปแบบการกรอกอีเมล หรือ ตัวอย่างการกรอก url เพื่อแสดง link website

Code ที่ใช้ :

placeholder=“ตัวอย่างข้อความ”

 

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

จะแสดงผลได้ดัวตัวอย่าง :

ตัวอย่างเมื่อทำการกรอกข้อมูล :

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

การเซตค่าให้กับ DropdownList (ASP.NET C#)

ในการตั้งค่า Datasurce สำหรับตัว DropDownList จากตาราง ปกติสามารถเซตได้จากการเซตที่หน้า layout โดยเลือกจากไอเท็ม แต่ทั้งนี้ ในการเซตค่าก็สามารถดึงค่า DataTable เขียนผ่านโค้ดได้เช่นกัน ด้วยการเขียนชุดคำสั่งดังนี้

DropDownList1.DataSource = ชื่อ DataSet/DataTable;
DropDownList1.DataTextField = ชื่อ Col;
DropDownList1.DataValueField = ชื่อ Col;
DropDownList1.DataBind();

อธิบายโค้ด :

– DropDownList1.DataSource คือการตั้งค่า DataSource ให้กับตัว DropDownList (ซึ่งชื่อ DropDownList ในที่นี้คือ DropDownList1)
ในการเขียนให้นำชื่อ DataSet หรือ DataTable ที่ต้องการมาเติมหลังเครื่องหมายเท่ากับ

– DropDownList1.DataTextField ส่วนนี้คือการกำหนด Text ที่จะแสดงบนตัว DropDownList
โดยเวลาเซต ต้องเลือกจากชื่อ Column ของ DataTable ที่เลือกมา

– DropDownList1.DataValueField ส่วนนี้คือการกำหนด Value ที่จะแสดงบนตัว DropDownList (ซึ่งเป็นค่าที่จะถูกซ่อนไว้)
เวลาเซต ต้องเลือกจากชื่อ Column ของ DataTable เช่นกัน ซึ่งอาจจะเป็น Column เดียวกันกับ DataTextField หรือไม่ก็ได้
ขึ้นอยู่กับว่าเวลาที่ผู้ใช้งานทำการ Select ค่าบน DropDownList แล้วต้องการให้เก็บค่าในรูปแบบใด

การสร้างปุ่มปิดซ่อนข้อความ ด้วย html

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

เมื่อกดปุ่ม ข้อความที่ซ่อนจะปรากฏ…

วิธีการซ่อนข้อความดังกล่าวสามารถทำได้ดังนี้

จากโค้ด จะแบ่งคร่าวๆได้ 2 ส่วน คือ
1. ส่วนที่เกี่ยวกับปุ่มที่ใช้สั่งเปิดหรือปิดข้อความ จะอยู่ภายใต้แท็ก <button>  ซึ่งสามารถกำหนดค่า id ให้กับปุ่มในส่วนของ getElementById(‘ชื่อไอดี’) (ในตัวอย่างใช้ชื่อไอดีว่า spoiler) เพื่อใช้แยกแยะแต่ละปุ่ม

ส่วนข้อความที่แสดงบนปุ่มนั้น สามารถกำหนดในตำแหน่งที่วงด้วยเส้นสีเขียว (ในตัวอย่างใช้คำว่า เปิด/ปิด)

2. ส่วนที่เกี่ยวข้องกับข้อความ จะอยู่ภายใต้แท็ก <div> ซึ่งเราจะสามารถใส่ข้อความที่ต้องการซ่อนลงไปในตำแหน่งที่วงด้วยเส้นสีม่วง

 

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

Credit : http://www.allbloggertricks.com/2013/05/how-to-add-openclose-button-to-blogger.html

การตรวจสอบ record ซ้ำในตารางด้วย SQL Command

ในการทำฐานข้อมูล มักประกอบด้วยข้อมูลจำนวนมากมายมหาศาล บางครั้งอาจมีจำนวนที่มากเกินกว่าที่คนเราจะสามารถตรวจสอบข้อผิดพลาดด้วยตาเปล่าได้ และหนึ่งในปัญหาที่พบเห็นได้บ่อยก็คือ การมีข้อมูลซ้ำ ที่จะทำให้เกิดความซ้ำซ้อนของข้อมูล และสามารถส่งผลกระทบต่อการ select ข้อมูลที่อาจก่อให้เกิดความผิดพลาดได้ ดังนั้นการตรวจสอบ record จึงมีความจำเป็นต่องานบางประเภท

ในการเขียนโค้ด SQL ที่เพื่อนับจำนวน record ซ้ำ จะใช้คำสั่งดังนี้

SELECT ชื่อcolที่ใช้เป็นเงื่อนไข , COUNT(*) count

FROM ชื่อตาราง

GROUP BY ชื่อcolที่ใช้เป็นเงื่อนไข Having COUNT(*) > 1

ชื่อcolที่ใช้เป็นเงื่อนไข ในที่นี้จะหมายถึง column ที่เราเลือกที่จะใช้เป็นตัวหลักในการตรวจสอบค่าซ้ำในแต่ละ record
ควรจะเลือก column ที่ไม่ควรมีค่าซ้ำหรือ primary key

เช่น ในฐานข้อมูลบุคคล column ที่สมควรจะเลือกใช้ในการตรวจสอบก็จะเป็น column จำพวกบัตรประชาชน เลขประจำตัว ซึ่งมักจะเป็นเลขเฉพาะที่ใช้ระบุถึงแต่ละคน ทำให้ง่ายต่อการตรวจสอบค่าซ้ำ

ตัวอย่าง

SELECT CITIZEN_ID , COUNT(*) count

FROM EMPLOYEE

GROUP BY [CITIZEN_ID] Having COUNT(*) > 1

เมื่อพิมพ์คำสั่งและกด query คำสั่ง โปรแกรมจะนับจำนวน record ที่มีค่า CITIZEN_ID มากกว่า 1 record ขึ้นมาแสดง

ใส่สีให้เว็บด้วย CSS Color

การใช้สีเป็นองค์ประกอบพื้นฐานหนึ่งในการออกแบบหน้าเว็บไซต์ให้มีความน่าสนใจ ไม่ว่าจะเป็นสีพื้นหลัง สีตัวอักษรหรือองค์ประกอบอื่นๆบนเว็บไซต์

 

ในการเขียนโค้ด CSS ที่ใช้ในการปรับแต่งสี จะใช้คำสั่งดังนี้

color : ค่าสี ;

 

คำสั่ง color นี้จะใช้เป็นตัวกำหนดค่าสีของตัวอักษร แต่ถ้าหากว่าต้องการกำหนดค่าสีขององค์ประกอบส่วนอื่นบนเว็บไซต์ จะต้องกำหนดเพิ่มว่าต้องการตั้งค่าสีให้องค์ประกอบใด เช่น

  • ถ้าเป็นสีพื้นหลัง จะใช้คำสั่งเป็น background-color
  • ถ้าเป็นสีตัวอักษร จะใช้คำสั่งเป็น border-color

 

ส่วนค่าสีที่อยู่ในคำสั่งนั้น สามารถเขียนได้ในรูปแบบต่างๆ ดังนี้

  • กำหนดโดยใช้ชื่อสี ซึ่งเป็น keyword ที่จะให้ค่าสี เช่น black ,skyblue ,green หรืออื่นๆ
  • กำหนดโดยใช้ค่าสี RGB ในรูปแบบคำสั่ง rgb(R,G,B) โดยที่ค่า R แทนค่าสีแดง G แทนค่าสีเขียว B แทนค่าสีน้ำเงิน ค่าตัวแปรทั้งสามสามารถมีค่าได้ตั้งแต่ 0-255 เช่น สีแดง จะเซตเป็น rgb(255,0,0)
  • กำหนดโดยใช้ค่าสี RGB ในรูปแบบคำสั่ง rgb(R%,G%,B%) โดยที่ค่า R แทนค่าสีแดง G แทนค่าสีเขียว B แทนค่าสีน้ำเงิน ค่าตัวแปรทั้งสามสามารถมีค่าเปอร์เซ็นต์ตั้งแต่ 0%-100%
  • กำหนดโดยใช้ค่า Hex code (เลขฐานสิบหก) ในรูปแบบคำสั่ง #RRGGBB โดยค่าตัวแปรที่เรียงกัน เป็นการบอกค่าสีแบบ rgb แบบหนึ่งเช่นกัน โดยค่า RR จะหมายถึงค่าสีแดง GG จะหมายถึงค่าสีเขียว และ BB จะหมายถึงค่าสีน้ำเงิน แต่ละสีจะมีตัวแปรได้ 2 ตัว และตัวแปรแต่ละตัวจะมีค่าได้ตั้งแต่ 0-F เช่น สีแดง จะเซตเป็น #FF0000
  • กำหนดโดยใช้ค่า Hex code (เลขฐานสิบหก) แบบย่อ ในรูปแบบคำสั่ง #RGB ซึ่งมีหลักการเขียนแบบเดียวกับ Hex code ที่เขียนเรียงกัน 6 ตัว แต่แบบย่อจะลดเหลือ 3 ตัวแทน เช่น สีแดง จะเซตเป็น #F00

การใช้ CSS Border Radius

คำสั่งใน CSS ที่เกี่ยวกับ Border จะใช้จัดการเกี่ยวกับเส้นขอบต่างๆ เช่น ขอบตาราง กรอบล้อมรอบข้อความ กรอบตามค่าเริ่มต้น หากไม่เซตอะไร กรอบนั้นจะเป็นสี่เหลี่ยมมุมฉาก แต่เราก็สามารถปรับแต่งส่วนขอบได้ใหม่เช่นกัน ด้วยคำสั่ง  Border Radius  ที่ใช้สำหรับปรับแต่งให้ขอบของวัตถุให้มีลักษณะโค้งมน ไม่เป็นเหลี่ยมมุม

โค้ด css ที่ใช้ในการปรับแต่ง ใส่ทั้งหมด 3 บรรทัด ดังนี้

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

ในส่วนค่า px บนตัวคำสั่ง จะเป็นตัวกำหนดค่าความโค้งของขอบ ยิ่งค่าน้อย ขอบจะยิ่งเหลี่ยม ยิ่งค่ามาก ขอบจะยิ่งมน