Get Adobe Flash player

Monthly Archives: October 2016

การจัด Layout บนหน้าเว็บไซต์แบบอิสระโดยใช้ CSS Relative+Absolute

ในบางครั้งเราต้องการวาง Element ไว้บนตำแหน่งที่ไม่ชิดซ้าย ไม่ชิดขวา และไม่อยู่กึ่งกลางของพื้นที่ ซึ่งอาจจะเป็นตำแหน่งเยื้องขวาบนเล็กน้อยแต่ไม่สุด การใช้ CSS ในการกำหนดให้ Element ที่ต้องการอยู่ในตำแหน่งนั้นพอดีโดยใช้เทคนิค Relative+Absolute จะช่วยให้เราจัดตำแหน่งในกรณีนี้ได้ง่าย

CSS Relative+Absolute คือการกำหนดคุณสมบัติ Position ของ Element โดยกำหนดให้ Element แม่มี Position เป็น Relative ส่วน Element ลูกมี Position เป็น Absolute จากนั้นใช้การกำหนด Element ลูก ให้มีระยะห่างจากขอบตามต้องการโดยใช้คุณสมบัติ top, left, right หรือ bottom ดังตัวอย่างนี้

css-re-ab1

ดังในตัวอย่าง Element ลูกกำหนด top เป็น 80px คือเว้นระยะจากด้านบนลงมา 80px และ right เป็น 0 คือชิดขอบขวาผลที่ได้ Element จะอยู่ในตำแน่งดังภาพ

css-re-ab2

สามารถศึกษาคุณสมบัติอื่น ๆ ของ CSS Position เพิ่มเติมได้ที่ http://www.w3schools.com/css/css_positioning.asp

การปรับขนาดไฟล์สูงสุด (Maximum File Upload Size) ใน WordPress

ตามปกติเว็บโฮสติ้ง จะมีการกำหนดขนาดไฟล์สูงสุดที่สามารถอัพโหลดได้ไว้ เช่น 20 MB หรือ 50MB แต่ในบางครั้งเราอาจมีความจำเป็นต้องอัพไฟล์ที่มีขนาดใหญ่กว่าที่กำหนด เช่น ไฟล์คู่มือ ไฟล์รายงานประจำปีต่างๆ ทำให้เราต้องมีการปรับเปลี่ยนขนาดไฟล์สูงสุดให้เหมาะสมกับความต้องการ โดยไฟล์ที่เราต้องเข้าไปแก้ คือ ไฟล์ php.ini  มีบรรทัดที่เราต้องแก้ดังนี้

  • upload_max_filesize (ขนาดไฟล์สูงสุดที่สามารถอัพโหลดได้)
  • post_max_size = 64M (ขนาดโพสต์สูงสุดที่สามารถอัพโหลดได้

ขั้นตอนการปรับ Maximum File Upload Size

  1. เปิดโปรแกรม putty ไปยัง server เครื่องที่ต้องการปรับ ล็อกอินด้วยสิทธิ์ Admin
  2. ใช้คำสั่ง nano /etc/php/7.0/apache2/php.ini เพื่อเปิด ไฟล์ ini ด้วยโปรแกรม nano
  3. กดปุ่ม CTRL+W เพื่อเปิดช่อง Search
  4. ค้นหาบรรทัด post_max_size ซึ่งเราสามารถ copy ข้อความไปวางได้เลย จากนั้นปรับค่าอัพโหลดตามต้องการ เช่น upload_max_filesize = 50 M
  5. ค้นหาบรรทัด post_max_size ปรับค่าตามความต้องการ เช่น post_max_size = 100 M
  6. จากนั้นทำการ save โดยกดปุ่ม CTRL+O

การใส่ icon/logo ลงบน title website

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

untitled-3

รูป icon ของเว็บไซต์หลังใส่โค้ด

โค้ด html ที่ใช้

<link rel=”icon” type=”image/นามสกุลไฟล์” href=”pathที่อยู่ของรูปภาพที่จะทำเป็น icon หรือ logo” />

จะใส่ภายใน tag <head>….</head> ดังตัวอย่าง

untitled-2

code ที่ใช้ในการปรับแต่ง (กรอบสีส้ม)

ในส่วนของ type นี้จะเป็นการบอกว่าไฟล์รูปภาพนั้นเป็นไฟล์สกุลใด แต่ที่แนะนำคือไฟล์ .png ซึ่งจะเหมาะสำหรับการทำเว็บไซต์
ในส่วนของรูปภาพนั้น จะต้องนำมาใส่โฟลเดอร์โปรเจคของเว็บไซต์ก่อน แล้วจึงนำ path ที่อยู่ของรูปภาพมาใส่ใน href

 

ซึ่งหากทำถูกตามขั้นตอนจะได้ icon มาแสดงอยู่ทางซ้ายมือของชื่อเว็บไซต์ ดังภาพ

untitled-4

รูป icon ของเว็บไซต์หลังใส่โค้ด

วิธีการกำหนดค่าให้ตัวแปร sqlDatasource ที่ไม่ได้รับค่ามาจาก user

การเพิ่มหรือแก้ไขข้อมูลของฟิลด์ที่ไม่ต้องการให้ user กำหนดเองได้ หรือ ฟิลด์ที่ไม่ได้อยู่ใน Editform layout สามารถทำได้ดังนี้

ตัวอย่าง

ชื่อฟิลด์                         รายละเอียด

Created_User               ฟิลด์เก็บ username ของ user ที่สร้างข้อมูลใหม่

Created_Datetime       ฟิลด์เก็บวันเวลาที่ user สร้างข้อมูลใหม่

Modified_User             ฟิลด์เก็บ username ของ user ที่แก้ไขข้อมูลล่าสุด

Modified_Datetime     ฟิลด์เก็บวันเวลาที่ user แก้ไขข้อมูลล่าสุด

การกำหนดค่าของตัวแปรเหล่านี้ สามารถกำหนดค่าผ่าน e.NewValues[“Column name”] = value; ใน event RowInserting และ RowUpdating

1. RowInserting คือ event ในขณะก่อนเกิดการส่งค่าตัวแปรไปยัง sqlDatasource เพื่อทำการเพิ่มข้อมูลใหม่ (insert) ลงฐานข้อมูล

protected void ASPxGridView_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)

{

e.NewValues[“Created_Datetime”] = DateTime.Now;

e.NewValues[“Created_User”] = Session[“Username”]+””;

e.NewValues[“Modified_Datetime”] = DateTime.Now;

e.NewValues[“Modified_User”] = Session[“Username”]+””;

}

            จากโค้ดด้านบน เมื่อมีการจะบันทึกข้อมูลใหม่ จะกำหนดค่าตัวแปร Created_Datetime ,Modified_Datetime ด้วยเวลาปัจจุบัน (DateTime.Now) และ Created_User ,Modified_User ด้วย username ของ user ที่ใช้งานระบบอยู่ เป็นการเก็บสถานะการสร้างข้อมูลใหม่และการแก้ไขล่าสุดของแถวข้อมูลนั้นๆ

2.  RowUpdating คือ Event ในขณะก่อนเกิดการส่งค่าตัวแปรไปยัง sqlDatasource เพื่อทำการแก้ไขข้อมูล (update) ที่มีอยู่ในฐานข้อมูล

protected void ASPxGridView_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)

{

e.NewValues[“Modified_Datetime”] = DateTime.Now;

e.NewValues[“Modified_User”] = Session[“Username”]+””;

}

          จากโค้ดด้านบน เมื่อมีการจะแก้ไขข้อมูล จะกำหนดค่าตัวแปร Modified_Datetime ด้วยเวลาปัจจุบัน (DateTime.Now) และ Modified_User ด้วย username ของ user ที่ใช้งานระบบอยู่ เป็นการเก็บสถานะการแก้ไขล่าสุดของแถวข้อมูลนั้นๆ