Get Adobe Flash player

sarinya.k

SQL : การ Copy ข้อมูลจาก Column ไปยังอีก Column

ในการ Copy  ข้อมูลจากคอลัมน์ไปยังอีกคอลัมน์ ในที่นี้จะหมายถึงการทำสำเนาข้อมูลทั้งหมดในคอลันน์นั้น ซึ่งเหมาะกับการทำงานกับจำนวนข้อมูลมากๆ ทำให้ผู้ใช้งานไม่ต้องเสียเวลาในการระบุ Value ของแต่ละ record

รูปแบบคำสั่ง

UPDATE ชื่อตาราง

SET ชื่อColumnB = ชื่อColumnA

WHERE เงื่อนไข (ถ้ามี)

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

ซึ่งหากเป็นการ Copy ข้อมูลจากคอลัมน์จากตารางอื่น จะใช้รูปแบบคำสั่งนี้

รูปแบบคำสั่ง

UPDATE ชื่อตารางB

SET ชื่อColumnB = (SELECT ชื่อColumnA FROMชื่อตารางA

WHERE ชื่อตารางB.ชื่อColumnIDของB = ชื่อตารางA.ชื่อColumnIDของA)

จะเห็นได้ว่า การ Copy ข้อมูลจากอีกตารางมา จะต้องมีการ Select ค่าซ้อนภายใต้วงเล็บก่อนที่จะเอามาเทียบค่ากับคอลัมน์ B บนตาราง B
ซึ่งจะต้องมีการเช็คค่าด้วยคอลัมน์ตัวกลางอีกตัวหนึ่งว่าสองตารางมีค่าตรงกัน (ให้เสมือนว่าสองตารางเชื่อมกันอยู่)

SQL : การใช้ CASE WHEN

CASE WHEN เป็นรูปแบบคำสั่งในการเช็คเงื่อนไขเพื่อการแสดงผลในรูปแบบ SQL ซึ่งถ้าเปรียบเป็นการเขียนโค้ดในภาษาอื่นๆทั่วไปก็คือการเช็คเงื่อนไขแบบ IF…ELSE… นั่นเอง

 

รูปแบบคำสั่ง

SELECT
CASE WHEN เงื่อนไข(1) THEN คำสั่ง(1)
WHEN เงื่อนไข(2) THEN คำสั่ง(2)
WHEN เงื่อนไข(3) THEN คำสั่ง(3)
….

ELSE คำสั่งอื่นๆกรณีที่ไม่เข้าเงื่อนไขใด END AS ชื่อฟิลด์ที่ต้องการ
FROM ชื่อตาราง

ในการกำหนดเงื่อนไข จะเขียนหลัง WHEN ซึ่งหากเงื่อนไขถูกต้อง คำสั่งจะทำตาม THEN
แต่ถ้าไม่ถูกต้อง ก็จะไม่มีการทำตามคำสั่งหลัง THEN ของเงื่อนไขนั้นๆ แล้วจะไปเช็คเงื่อนไขถัดไปของคำสั่ง WHEN
โดย WHEN สำหรับเงื่อนไขแรกจะขึ้นต้นด้วย CASE WHEN ส่วนเงื่อนไขถัดๆไปจะเขียนด้วย WHEN
และถ้าสุดท้ายไม่เข้าเงื่อนไขใดๆเลยก็จะทำตามคำสั่งของ ELSE จากนั้นให้ปิด syntax การเช็คเงื่อนไขด้วย END

 

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

สมมติ กรณีนี้เราต้องการดึงค่า citizen_id มาจาก employee โค้ดข้างต้นจะหมายถึง
สร้างเงื่อนไขว่า หากค่า id_card ไม่เป็นค่าว่าง และ nation_code เป็น TH ให้ดึงค่าจาก  id_card มาแสดง
แต่ถ้าหาก id_card ไม่เป็นค่าว่าง และ nation_code ไม่เป็น TH ให้ดึงค่าจาก  pass_id มาแสดง
แต่ถ้าไม่เข้าสองเงื่อนไขแรก (เช่น id_card เป็นค่าว่าง) ก็ให้แสดงคำว่า Unknown!! แทน

 

 

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 = ค่าที่กำหนด;