วันพุธที่ 3 มิถุนายน พ.ศ. 2558
ตั้งค่าให้ SQL Server ใช้ Instance เป็น IP ได้
Tip ง่ายๆที่ใครก็ลืมได้ สำหรับ DB Admin คงไม่ใช่ปัญหา แต่สำหรับ Programmer แล้ว บางทีก็ไม่ได้ทำกันบ่อยๆ อาจมีตกม้าตาย
วันอาทิตย์ที่ 10 พฤษภาคม พ.ศ. 2558
เขียน jQuery แบบง่ายๆ ภาค 1
ออกตัวก่อนว่าผมไม่ชอบเขียนโปรแกรมในรูปแบบของ Script มาตั้งแต่ไหนแต่ไร สาเหตุก็เพราะการ debug ที่ยากยิ่ง ท่านลองจินตนาการ JavaScript ในยุคเริ่มต้นที่กำลังบูมพร้อมๆกับ PHP4 , ASP3 สมัย 10 กว่าปีที่แล้ว มันไม่ง่ายเลยที่จะ debug JavaScript แถมสมัยนั้นยัง Copy กันไปใช้ดื้อๆ
จนมาถึงปัจจุบันที่ JavaScript ได้พัฒนาไปมาก มีทั้ง AJAX และ Lib เช่น jQuery มาให้ใช้ ผมเลยกลับมาสนใจอีกครั้ง อ้อ... และที่จะลืมเสียไม่ได้ยังมี google chrome ช่วยในการ debug
ในบทความนี้ผมจะแนะนำการทำงานกับ element ของ html โดยผ่าน jQuery ล้วนๆ โดยที่ไม่แตะในส่วนของ html body เลย ตัวอย่างง่ายๆนี้คือการสร้างปุ่มกดเพื่อสุ่มเลือกรายการรุ่นรถจักรยานยนต์
การทำงานคือ เมื่อโหลดเพจขึ้นมา ผมจะใช้ jQuery สร้างรายการพร้อมกับปุ่มกดขึ้นมาก่อน จากนั้นพอกดปุ่มโปรแกรมจะทำการสุ่มเลือกรายการและเปลี่ยนตัวอักษรเป็นสีแดงเพื่อบ่งบอกการเลือก
Code แบ่งเป็น 3 ส่วนครับ
ส่วนที่ 1 คือ ส่วนของ css จะอยู่ในส่วนของ tag header <head>...</head>
ภายในคือ css class .hilight เพื่อกำหนดสีแดง
<style>
.hilight{
color:#FF0000;
}
</style>
ส่วนที่ 2 คือ tag ในการเรียกใช้ lib ของ jQuery
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
ส่วนที่ 3 คือส่วนของ JavaScript อยู่ใน ส่วนของ tag header <head>...</head> เช่นกัน ซึ่งผมจะเขียนโปรแกรมการทำงานทั้งหมดไว้ในส่วนนี้
<script type="text/javascript">
//ประกาศตัวแปร array เพื่อเก็บค่ารายการทั้งหมด
var modelName=["Kawasaki Ninja H2","Honda CBR1000RR","Suzuki GSXR1000",
"BMW S1000RR","DUCATI Penigale 1299","Benelli 1130 cafe racer",
"KTM Superduke 1290","YAMAHA R1M","Triumph speed triple r"]
//ตรวจสอบการทำงานของ lib jQuery ว่าพร้อมหรือไม่ เขียนเต็มๆก็คือ $(document).ready(...)
$(function(){
//เพิ่ม tag div ใน tag body
$("body").html("<div></div>");
//เพิ่ม tag ul และปุ่มกด ใน tag div
var ul=$("div").append("<ul id=\"motorbikeModel\"></ul>");
var btn=$("div").append("<input id=\"btn1\" name=\"btn1\" type=\"button\" value=\"Select random\" />");
//วนลูปเพิ่มรายการจากตัวแปร array ที่ประกาศไว้ด้านบน
for(var m in modelName){
ul.append("<li>"+modelName[m]+"</li>");
}
//ทำ event handle ให้กับปุ่มกด
$("#btn1").click(function(){
//เรียกฟังชั่น เพื่อล้างค่าสไตล์ทั้งหมด
clear();
//หาค่าสุ่มรายการมาเก็บไว้ในตัวแปร rd
var rd=Math.ceil(Math.random()* $("li").length-1);
//เมื่อได้รายการที่สุ่มแล้วก็จัดการใส่ css class สี
$("li:eq("+rd+")").addClass("hilight");
});
//ฟังชั่นล้างค่าสไตล์ของรายการ
function clear()
{
//เก็บค่ารายการทั้งหมด ในที่นี้ค่าของ allItm จะเป็น array โดยอัตโนมัติ
var allItm=$("li");
//วนลูปเพื่อนำ css class ออก
for(var i=0;i < allItm.length;i++)
{
var itm=$(allItm)[i];
//หาว่ารายการนี้มี css class ชื่อ hilight อยู่แล้วหรือไม่
if($(itm).hasClass("hilight"))
//ถ้าพบว่ามีให้เอาออก
$(itm).removeClass("hilight");
//บรรทัดนี้ผมลองให้โปรแกรมเขียน log ออกมาแสดง
console.log(itm);
}
}
});
</script>
ลองทดสอบดู การกด 3 ครั้งได้ผลดังนี้
การทำงานเป็นไปตามวัตถุประสงค์ บทความหน้าผมจะเขียนเกี่ยวกับการ debug JavaScript ด้วย google Chrome เผื่อท่านใดยังไม่เคยลองเล่นครับ
จนมาถึงปัจจุบันที่ JavaScript ได้พัฒนาไปมาก มีทั้ง AJAX และ Lib เช่น jQuery มาให้ใช้ ผมเลยกลับมาสนใจอีกครั้ง อ้อ... และที่จะลืมเสียไม่ได้ยังมี google chrome ช่วยในการ debug
ในบทความนี้ผมจะแนะนำการทำงานกับ element ของ html โดยผ่าน jQuery ล้วนๆ โดยที่ไม่แตะในส่วนของ html body เลย ตัวอย่างง่ายๆนี้คือการสร้างปุ่มกดเพื่อสุ่มเลือกรายการรุ่นรถจักรยานยนต์
การทำงานคือ เมื่อโหลดเพจขึ้นมา ผมจะใช้ jQuery สร้างรายการพร้อมกับปุ่มกดขึ้นมาก่อน จากนั้นพอกดปุ่มโปรแกรมจะทำการสุ่มเลือกรายการและเปลี่ยนตัวอักษรเป็นสีแดงเพื่อบ่งบอกการเลือก
Code แบ่งเป็น 3 ส่วนครับ
ส่วนที่ 1 คือ ส่วนของ css จะอยู่ในส่วนของ tag header <head>...</head>
ภายในคือ css class .hilight เพื่อกำหนดสีแดง
<style>
.hilight{
color:#FF0000;
}
</style>
ส่วนที่ 2 คือ tag ในการเรียกใช้ lib ของ jQuery
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
ส่วนที่ 3 คือส่วนของ JavaScript อยู่ใน ส่วนของ tag header <head>...</head> เช่นกัน ซึ่งผมจะเขียนโปรแกรมการทำงานทั้งหมดไว้ในส่วนนี้
<script type="text/javascript">
//ประกาศตัวแปร array เพื่อเก็บค่ารายการทั้งหมด
var modelName=["Kawasaki Ninja H2","Honda CBR1000RR","Suzuki GSXR1000",
"BMW S1000RR","DUCATI Penigale 1299","Benelli 1130 cafe racer",
"KTM Superduke 1290","YAMAHA R1M","Triumph speed triple r"]
//ตรวจสอบการทำงานของ lib jQuery ว่าพร้อมหรือไม่ เขียนเต็มๆก็คือ $(document).ready(...)
$(function(){
//เพิ่ม tag div ใน tag body
$("body").html("<div></div>");
//เพิ่ม tag ul และปุ่มกด ใน tag div
var ul=$("div").append("<ul id=\"motorbikeModel\"></ul>");
var btn=$("div").append("<input id=\"btn1\" name=\"btn1\" type=\"button\" value=\"Select random\" />");
//วนลูปเพิ่มรายการจากตัวแปร array ที่ประกาศไว้ด้านบน
for(var m in modelName){
ul.append("<li>"+modelName[m]+"</li>");
}
//ทำ event handle ให้กับปุ่มกด
$("#btn1").click(function(){
//เรียกฟังชั่น เพื่อล้างค่าสไตล์ทั้งหมด
clear();
//หาค่าสุ่มรายการมาเก็บไว้ในตัวแปร rd
var rd=Math.ceil(Math.random()* $("li").length-1);
//เมื่อได้รายการที่สุ่มแล้วก็จัดการใส่ css class สี
$("li:eq("+rd+")").addClass("hilight");
});
//ฟังชั่นล้างค่าสไตล์ของรายการ
function clear()
{
//เก็บค่ารายการทั้งหมด ในที่นี้ค่าของ allItm จะเป็น array โดยอัตโนมัติ
var allItm=$("li");
//วนลูปเพื่อนำ css class ออก
for(var i=0;i < allItm.length;i++)
{
var itm=$(allItm)[i];
//หาว่ารายการนี้มี css class ชื่อ hilight อยู่แล้วหรือไม่
if($(itm).hasClass("hilight"))
//ถ้าพบว่ามีให้เอาออก
$(itm).removeClass("hilight");
//บรรทัดนี้ผมลองให้โปรแกรมเขียน log ออกมาแสดง
console.log(itm);
}
}
});
</script>
ลองทดสอบดู การกด 3 ครั้งได้ผลดังนี้
 |
| ครั้งที่ 1 |
 |
| ครั้งที่ 2 |
 |
| ครั้งที่ 3 |
การทำงานเป็นไปตามวัตถุประสงค์ บทความหน้าผมจะเขียนเกี่ยวกับการ debug JavaScript ด้วย google Chrome เผื่อท่านใดยังไม่เคยลองเล่นครับ
วันเสาร์ที่ 9 พฤษภาคม พ.ศ. 2558
.Net 4.5 ใช้งาน mySQL 5.6 ผ่าน DataSet(.xsd)
ห่างจาก mysql ไปพอสมควร ในชีวิตนี้ก็ใช้ mysql มาตั้งแต่เริ่มเข้าวงการ นึกย้อนไปก็ตั้งแต่ mysql 3.23 โน่นแหนะ จำได้ว่าพอกรโดนมา Version 5 ก็มีปัญหากับภาษาไทยทำให้สะดุดไปพักนึก ไปๆมาๆ ก็ไปซุกอยู่ในอ้อมกอดของ Oracle ซะงั้น วันนี้มีน้องๆบอกว่า mysql เค้าพัฒนาแล้ว เข้าถึงโดนผ่าน ADO DataSet ได้แล้ว เลยต้องมาทดสอบกันหน่อย หลังจากที่เขียนครั้งล่าสุดก็เมื่อสักปีกว่าๆ ได้แล้ว ตอนนั้นผมใช้ Version 5.5 ถ้าจำไม่ผิด ต้องติดตั้ง mysql Connection for .net เอง และถ้าอยากสบายก็เขียนเป็น Data Class แบบ EJB ของ Java คอยจัดการเอา
แต่มาวันนี้ mysql 5.6 ติดตั้งทีเดียวแบบจัดเต็ม ได้ Provider มาครบพร้อมใช้ เป็นอีกก้าวหนึ่งที่ Oracle เข้าไปเจาะ Microsoft ตรงๆ
 |
| ติดตั้ง mysql แล้วมาครบเลย |
ก่อนอื่นมาเช็ค Version กันก่อน โดยผมจะ Query ผ่าน Mysql Workbench ด้วยคำสั่ง "SELECT @@version"
จากนั้นก็เข้าไปทดสอบที่ Visual Studio ได้เลย ซึ่งผมใช้ Version 2013 ครับ
พอเข้ามา new project ก็จะพบกับหัวข้อเฉพาะของ project สำหรับ mysql เลยครับ
จากนั้นจะมี Dialog ให้ใส่ข้อมูลเพื่อ Connect Database ในที่นี้ผมใช้ฐานข้อมูลชื่อ mysqltest เข้าถึงโดย root
จากนั้นผมจะเลือกการทำงานกับฐานข้อมูลแบบ Dataset จากนั้นให้กดปุ่ม Next เพื่อไปเลือกตาราง ในที่นี้ผมเลือกใช้ตาราง province เพื่อดึงข้อมูลรายชื่อจังหวัด
จากนั้น Visual Studio จะสร้างไฟล์ให้เราหลายไฟล์ โดยจะมีฟอร์มหลัก(frmMain) ฟอร์มที่ใช้จัดการกับตาราง province (frmprovince)
 |
| จะเห็นว่าในฟอร์มหลักจะมีเมนูเพื่อเปิดฟอร์มที่ใช้จัดการตาราง province ให้ด้วย |
 |
| เมื่อรันโปรแกรม |
 |
| หน้าตาของไฟล์ .xsd DataSet ที่ได้ ไม่ต่างจากที่ใช้กับ Microsoft SQL Server เลย |
แต่มีจุดสังเกตุอย่างหนึ่งว่าฟอร์ม frmprovince ที่ Visual Studio สร้างให้นั้นเป็นเพียงการ Generate code ธรรมดา โดยใช้ Namespace MySql.Data.MySqlClient เท่านั้น
private void frmprovince_Load(object sender, EventArgs e)
{
string strConn = "port=xxx;server=localhost;user id=root;password=xxx;database=mysqltest;";
ad = new MySqlDataAdapter("select * from `province`", strConn);
MySqlCommandBuilder builder = new MySqlCommandBuilder(ad);
ad.Fill(this.newDataSet.province);
ad.DeleteCommand = builder.GetDeleteCommand();
ad.UpdateCommand = builder.GetUpdateCommand();
ad.InsertCommand = builder.GetInsertCommand();
MySqlDataAdapter ad3;
}
แต่เจตนาของผมอยากใช้ผ่าน DataSet ไฟล์ .xsd ผมจึงต้องเรียกใช้ TableAdapter ตามภาพ
จากนั้นผมจะลองทดสอบการดึงข้อมูลจากตาราง province ดูว่าเราจะใช้ได้ปกติไหม โดยที่ผมจะเขียน Code C# ที่ฟอร์มหลัก(frmMain) ดังนี้
public frmMain()
{
InitializeComponent();
NewDataSet DS = new NewDataSet();
new province1TableAdapter().Fill(DS.province1);
DataGridView dgv = new DataGridView();
dgv.DataSource = DS.province1;
dgv.Dock = DockStyle.Fill;
this.Controls.Add(dgv);
}
เมื่อรันโปรแกรมข้อมูลจากตาราง province จะแสดงใน DataGridView ตามภาพด้านล่าง
สรุป
ผมขอสรุปเบื้องต้นว่าการใช้งานสำหรับผู้ที่อยากจะใช้ .Net กับ mySQL นั้นสะดวกขึ้นอย่างมาก แต่อาจจะยังไม่เนียนสนิทเหมือนใช้กับ SQL Server ที่ผมพบก็คือการ Insert จะไม่มีชื่อของ Field มาให้เราเห็น Visual Studio จะมองเห็นเป็นแค่ parameter ตัวที่เท่าไหร่และ type เท่านั้น แต่ในความคิดของผมแค่นี้ก็ดีถมถืดแล้วครับ
วันอาทิตย์ที่ 19 เมษายน พ.ศ. 2558
Senior หรือ กรรมกรไอที
หลังจากห่างหายจากการเขียนบล๊อกไปหลายปี แต่ก็ยังมีผู้สนใจตามอ่านอยู่เป็นระยะ เรื่องวิชาการตอนนี้มีไม่มากเพราะผมทำงานอยู่ ณ ที่ปัจจุบันมาหลายปีดีดักแล้ว ใช้อะไรก็แบบเดิมๆ แถมยังมีเจ้าตัวน้อย(ลูกชาย)เลยเหนื่อยเอามากๆ คราวนี้ขอพูดเรื่องที่ผมสอนลูกน้องที่ทำงานไปก็แล้วกัน
...อยู่มาวันหนึ่งเห็นลูกน้องง่วนกับการเขียนโปรแกรม เลยเดินเข้าไปดู ให้ตายเถอะ!!! นั่งเขียน DataTable ด้วย Hardcode มันก็ดูดีอยู่หรอกนะ แต่งานมันจะล่าช้าเอา เลยถามไปว่า "นี่นั่งเขียนแบบนี้เพื่ออะไร ทั้งๆที่บริษัทมี Visual Studio ให้ใช้" คำตอบที่ได้คือ "ผมอยากเก่งครับพี่" บ๊ะ....คิดได้ไง
คำที่ผมอยากจะบอกจากประสบการณ์ ทั้งที่เคยโง่ เคยเป็นลูกน้อง จนมาเป็นหัวหน้าคนก็คือ
สุดท้ายก็อยากให้มือใหม่ น้องใหม่ได้ก้าวไปในทางที่ถูกจะได้ไม่เสียเวลาโดยเปล่าประโยชน์
สวัสดีครับ
...อยู่มาวันหนึ่งเห็นลูกน้องง่วนกับการเขียนโปรแกรม เลยเดินเข้าไปดู ให้ตายเถอะ!!! นั่งเขียน DataTable ด้วย Hardcode มันก็ดูดีอยู่หรอกนะ แต่งานมันจะล่าช้าเอา เลยถามไปว่า "นี่นั่งเขียนแบบนี้เพื่ออะไร ทั้งๆที่บริษัทมี Visual Studio ให้ใช้" คำตอบที่ได้คือ "ผมอยากเก่งครับพี่" บ๊ะ....คิดได้ไง
คำที่ผมอยากจะบอกจากประสบการณ์ ทั้งที่เคยโง่ เคยเป็นลูกน้อง จนมาเป็นหัวหน้าคนก็คือ
- งานต้องเสร็จตรงเวลา ตามกำหนด
- โปรแกรมจะเขียนแบบไหน ไม่สำคัญ แต่การใช้งานต้องได้ตามเป้าหมาย เช่น ความถูกต้อง ความเสถียร ต่อมาก็คือ performance หลายๆด้าน จริงๆมันจะระบุในเอกสาร SRS อยู่แล้วแหละ
- โปรแกรมจะเขียนด้วยภาษาไหนไม่สำคัญ แต่มันจะต้องเป็นไปตามข้อ 2. มันไม่เหมือน 10 กว่าปีที่แล้วที่เอามาคุยข่มกันว่า Delphi กับ VB ใครเจ๋งกว่า ASP3 กับ PHP4 ควรเลือกอันไหน นั่นมันความคิดของสังคมโปรแกรมเมอร์สมัยตลาดงานเริ่มร้อน ไปๆมาๆสุดท้ายคือคนให้ตังค์ที่จะตัดสินนั่นแหละ
- อยากเก่ง!!! คำนี้ใครๆที่ทำงานสายโปรแกรมคงต้องมีอยู่ในหัว แต่ การเขียน Code แข่งกับเครื่องมือมันไม่ได้เพิ่มพูนทักษะสักเท่าไหร่หรอก อยากเป็น Senior มันต้องเหนือคนอื่นๆ ต้องเป็นผู้สร้างที่แท้จริงๆ บวกการ analysis ด้านเทคนิคเข้าไปด้วย แถมยังต้องมีความคิดสร้างสรรค์อีก เช่นการทำ Component ให้ทีมใช้งาน หรือสมัยนี้นิยมทำกันแบบ Framework ถ้าอยากเล่นกับ Object ทีนี้ล่ะได้เสีย
สุดท้ายก็อยากให้มือใหม่ น้องใหม่ได้ก้าวไปในทางที่ถูกจะได้ไม่เสียเวลาโดยเปล่าประโยชน์
สวัสดีครับ
สมัครสมาชิก:
บทความ (Atom)