Year: 2016

การใช้ CSS Border Radius

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

การ insert data datatable เข้าฐานข้อมูลด้วยวิธีการ Bulk insert

วิธีการ Bulk insert เป็นการ insert ข้อมูลจำนวนมากเข้าฐานข้อมูลภายในครั้งเดียวโดยใช้ระยะเวลาสั้น ในกรณีนี้เป็นการนำข้อมูลจาก datatable เข้าสู่ฐานข้อมูล sql sever string strConn = “Server=serverName;Database=databaseName; Persist Security Info=True;User ID=id;Password=password“;   using (SqlConnection conn = new SqlConnection(strConn)) { conn.Open(); using (SqlBulkCopy bulkCopy = new SqlBulkCopy(conn)) { bulkCopy.DestinationTableName = “SqlTableName“; //Table ปลายทางใน database ที่จะ copy มาไว้ // ถ้า datatable มี Structure ไม่เหมือนกับ table ใน database ต้องทำการ mapping […]

การใช้คำสั่ง Vlookup ในโปรแกรม Excel

คำสั่ง Vlookup (Vertical Lookup) เป็นฟังก์ชั่นใน Excel ที่จัดอยู่ในประเภทการค้นหาและอ้างอิงข้อมูล เช่น เอาไว้หาว่ารหัสนักศึกษาที่ต้องการค้นหามีชื่อว่าอะไร จากตารางอ้างอิงที่เรามีอยู่ เป็นต้น รูปแบบคำสั่ง    = VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) lookup_value = CELL ที่จะนำมาเป็นคีย์ที่ใช้ในการค้นหา table_array = ตารางที่เราสร้างเพื่อใช้ค้นหา col_index_num = Column ที่เราต้องการข้อมูล range_lookup = true หรือ 1 (คีย์ที่ค้นหาสามารถเอาค่าใกล้เคียงได้) , false หรือ 0 (คีย์ที่ค้นหาจะได้ข้อมูลที่ตรงกันเท่านั้น) ตัวอย่างการใช้คำสั่ง Vlookup ค้นหาชื่อนักศึกษา จากรหัสนักศึกษา จากสูตร = VLOOKUP (lookup_value,table_array,col_index_num,range_lookup) ใส่ค่าที่ต้องการค้นหา = vlooup(c2,A2:B149,2,0) คำอธิบาย c2 คือ คอลัมน์ข้อมูลของรหัสนักศึกษาที่ต้องการค้นหาชื่อ A2:B149 คือ  ขอบเขตข้อมูลทั้งหมดที่อ้างอิงถึง 2 คือ ค่าคอลัมน์ […]

การเปลี่ยนสีพื้นหลังตารางทั้งแถวให้กับ gridview

การนำเสนอข้อมูลในตารางเป็นที่นิยมในการนำเสนอข้อมูลบนเว็บไซต์ และบางครั้งในการนำเสนอก็มักจะมีการเน้นสีเพื่อเน้นข้อมูลเฉพาะแถว เช่น ข้อมูลรวม หรือหัวข้อต่างๆ เพื่อให้แถวนั้นๆดูโดดเด่นขึ้นมา ให้ง่ายต่อการสังเกตเห็น หรือบางครั้งก็อาจเพื่อความสวยงามของตาราง ในการเขียนโค้ดเพื่อเปลี่ยนสี row ของ gridview สามารถกระทำได้ดังตัวอย่าง เริ่มต้น สมมติว่าต้องการเปลี่ยนสีแถวล่างสุดของตารางนี้ให้เป็นสีม่วงอ่อน   ในไฟล์ .aspx ให้เติมคำสั่งนี้ลงไปใน gridview OnHtmlRowPrepared=”ชื่อคำสั่ง“ ตัวอย่าง   ในไฟล์ .cs เขียนโค้ดดังนี้ protected void ชื่อคำสั่ง (object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e)    {        if (e.RowType != GridViewRowType.Data) return;        string text = e.GetValue(“ชื่อ colที่จะใช้เช็คค่าเงื่อนไข“).ToString();        if (เงื่อนไข)        {            e.Row.BackColor = System.Drawing.Color.FromArgb(ค่าสี);        }    } ตัวอย่าง   ก็จะเปลี่ยนสีพื้นหลังเฉพาะแถวที่ต้องการได้ผลดังนี้

แนะนำ Plugin Query Monitor สำหรับตรวจสอบการทำงานของ WordPress

ในการใช้ WordPress เพื่อจัดทำเว็บไซต์ มักจะมีการติดตั้ง Plugin หรือส่วนเสริม เพื่อเพิ่มความสามารถในการทำงานต่าง ๆ ตามที่ผู้ดูแลเว็บต้องการ บางเว็บไซต์อาจจะต้องติดตั้ง Plugin หลายสิบตัวเพื่อให้เว็บไซต์เป็นไปตามที่ต้องการ อย่างไรก็ตามเมื่อมีการใช้งาน Plugin มากขึ้นอาจจะเกิดปัญหาให้เว็บไซต์โหลดช้า จึงเป็นที่มาของ Plugin Query Monitor สามารถ Install ได้ผ่านระบบจัดการของ WordPress โดย Query Monitor เมื่อ Active ใช้งานแล้วจะทำการ Capture การทำงานทั้งหมดตั้งแต่มีการเรียกหน้าเว็บไซต์ ไม่ว่าจะเป็น HTTP Request, Query ฐานข้อมูล และการโหลด Script ต่าง ๆ ดังภาพ จะเห็นว่ารายงานของ Query Monitor จะแสดงให้ผู้ดูแลเว็บไซต์สามารถตรวจสอบได้ว่าอะไรคือสาเหตุที่ทำให้เว็บไซต์โหลดช้า รายละเอียดเพิ่มเติม https://wordpress.org/plugins/query-monitor/

ปรับปรุงระบบบริหารชมรม CLUB ครั้งที่1

ปรับปรุงระบบบริหารชมรม CLUB ครั้งที่ 1 ทั้งหมด 3 จุด ดังนี้ แบ่งฐานข้อมูลนักศึกษาชมรมในแต่ละปีการศึกษา   ชุดปุ่มแสดงแผนภูมิจำนวนนักศึกษาชมรมในแต่ละปีการศึกษา ในหน้าแรก   ปรับปรุงการแสดงรายชื่อชมรม โดยขึ้นกับปีการศึกษานั้น   สามารถเข้าใช้งานได้ที่ http://std-club.rmutp.ac.th/

ปรับปรุงระบบประชุมอิเล็กทรอนิกส์ e-meeting

ปรับปรุงระบบประชุมอิเล็กทรอนิกส์ e-meeting เพิ่มระบบการแนบไฟล์เอกสารเชิญประชุม และการตอบรับเข้าร่วมประชุมผ่าน e-mail สามารถเข้าใช้งานได้ที่ http://e-meeting.rmutp.ac.th/ ขั้นตอนการใช้งานมีดังนี้

การจัด 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 ดังตัวอย่างนี้ ดังในตัวอย่าง Element ลูกกำหนด top เป็น 80px คือเว้นระยะจากด้านบนลงมา 80px และ right เป็น 0 คือชิดขอบขวาผลที่ได้ Element […]

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

ตามปกติเว็บโฮสติ้ง จะมีการกำหนดขนาดไฟล์สูงสุดที่สามารถอัพโหลดได้ไว้ เช่น 20 MB หรือ 50MB แต่ในบางครั้งเราอาจมีความจำเป็นต้องอัพไฟล์ที่มีขนาดใหญ่กว่าที่กำหนด เช่น ไฟล์คู่มือ ไฟล์รายงานประจำปีต่างๆ ทำให้เราต้องมีการปรับเปลี่ยนขนาดไฟล์สูงสุดให้เหมาะสมกับความต้องการ โดยไฟล์ที่เราต้องเข้าไปแก้ คือ ไฟล์ php.ini  มีบรรทัดที่เราต้องแก้ดังนี้ upload_max_filesize (ขนาดไฟล์สูงสุดที่สามารถอัพโหลดได้) post_max_size = 64M (ขนาดโพสต์สูงสุดที่สามารถอัพโหลดได้ ขั้นตอนการปรับ Maximum File Upload Size เปิดโปรแกรม putty ไปยัง server เครื่องที่ต้องการปรับ ล็อกอินด้วยสิทธิ์ Admin ใช้คำสั่ง nano /etc/php/7.0/apache2/php.ini เพื่อเปิด ไฟล์ ini ด้วยโปรแกรม nano กดปุ่ม CTRL+W เพื่อเปิดช่อง Search ค้นหาบรรทัด post_max_size ซึ่งเราสามารถ copy ข้อความไปวางได้เลย จากนั้นปรับค่าอัพโหลดตามต้องการ เช่น upload_max_filesize […]

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

การตกแต่งเว็บไซต์ให้สวยงามก็เป็นสิ่งสำคัญที่ช่วยดึงดูดให้เว็บไซต์ดูน่าสนใจ ไม่เว้นแม้แต่จุดเล็กๆน้อยๆอย่างชื่อเว็บไซต์ที่แสดงบนเบราเซอร์ ซึ่งนอกจากจะใช้แสดงชื่อเว็บไซต์ได้แล้ว ในการเขียนโค้ด เราสามารถใส่รูป icon หรือ logo ลงไปประกอบชื่อเว็บไซต์ได้อีกด้วย นอกจะให้ประโยชน์ในแง่ความสวยงามแล้ว มันยังช่วยให้ผู้ใช้งานสามารถสังเกตเห็นแถบชื่อเว็บไซต์นั้นๆได้ง่ายขึ้น เนื่องจากสามารถเลือก icon ที่มีสีสันและรูปที่สะดุดตา และสามารถใส่เอกลักษณ์เฉพาะตัวลงไปได้ ซึ่งขั้นตอนในการแต่งเว็บส่วนนี้ก็ไม่ได้ยุ่งยาก รูป icon ของเว็บไซต์หลังใส่โค้ด โค้ด html ที่ใช้ <link rel=”icon” type=”image/นามสกุลไฟล์” href=”pathที่อยู่ของรูปภาพที่จะทำเป็น icon หรือ logo” /> จะใส่ภายใน tag <head>….</head> ดังตัวอย่าง code ที่ใช้ในการปรับแต่ง (กรอบสีส้ม) ในส่วนของ type นี้จะเป็นการบอกว่าไฟล์รูปภาพนั้นเป็นไฟล์สกุลใด แต่ที่แนะนำคือไฟล์ .png ซึ่งจะเหมาะสำหรับการทำเว็บไซต์ ในส่วนของรูปภาพนั้น จะต้องนำมาใส่โฟลเดอร์โปรเจคของเว็บไซต์ก่อน แล้วจึงนำ path ที่อยู่ของรูปภาพมาใส่ใน href   ซึ่งหากทำถูกตามขั้นตอนจะได้ icon มาแสดงอยู่ทางซ้ายมือของชื่อเว็บไซต์ ดังภาพ รูป icon ของเว็บไซต์หลังใส่โค้ด