Step Juice

สร้าง Trigger บนฐานข้อมูล MySQL ด้วย phpMyAdmin

2015-07-19T12:46:00.002+07:00

ผมเพิ่งรู้ว่าเจ้า phpMyAdmin สามารถสร้าง Trigger ได้ด้วย โอ้วจ๊อดดมันยอดดมาก...เอ่อ..เอาเป็นว่าเรามาเข้าเรื่องของเราดีกว่า..แหะๆ
ว่าด้วยเรื่องของ Trigger
Trigger คือ คืออะไรละ..แง่ว.. ฮ่าๆ ผมจะบอกอย่างงี้ก็แล้วกัน..มันเป็น Event หรือตัวตรวจจับการกระทำต่างๆ ของ Database(ในที่นี้คือ MySQL) ที่เกิดขึ้นกับ Table เช่นการ INSERT, UPDATE, DELETE เมื่อมีเหตุการเหล่านี้เกิดขึ้น Trigger ก็จะทำงาน...ส่วนมันจะทำงานอะไรนั้นก็ขึ้นอยู่กับเราว่าจะกำหนดให้มันทำอะไร
เพื่อไม่ให้เป็นการเสียเวลาผมขอรวบรัดตัดตอนมาที่การสร้าง Table เพื่อทดสอบเจ้าตัว Trigger ของเราโดยผมจะสร้างตารางขึ้นมา 2 ตาราง

1. ตาราง tbl_profile มีโครงสร้างตารางดังนี้

ชื่อ	ชนิด
id	int(11)	PK, AUTO_INCREMENT
fullname	varchar(255)
email	vachar(150)
phone	varchar(15)

2. ตาราง tbl_log มีโครงสร้างตารางดังนี้

ชื่อ	ชนิด
id	int(11)	PK, AUTO_INCREMENT
action_name	varchar(100)
column_name	vachar(150)
old_value	varchar(255)
new_value	varchar(255)
log_time	datetime

ผมสร้างตารางเรียบร้อยแล้วในหน้า phpMyAdmin สังเกตุเมนูด้านบนจะมีเมนูที่ชื่อว่า Trigger(เทกเกรอ์) ให้เราคลิกเข้าไปเลยครับตามภาพ

เมื่อคลิกเข้าไปที่เมนูทริกเกอร์ก็จะเป็นหน้าจอดังภาพครับ จากนั้นให้เราคลิกที่ปุ่ม "เพิ่ม Trigger"

จากนั้นจะมี Dialog ปรากฏขึ้นมาให้เราสร้าง Trigger ตามภาพ

ให้เรากำหนดค่าลงไปตามนี้ครับ

Trigger name : update_log
ตาราง : tbl_profile
Time : AFTER
เหตุการณ์ : UPDATE
Definition : ใส่ code MySQL ตามด้านล่างเลยครับ

begin
if old.fullname <> new.fullname then
    INSERT INTO tbl_log(action_name,key_id,column_name,old_value,new_value,log_time)
    VALUES('UPDATE',old.id,'fullname',old.fullname,new.fullname,NOW());
end if;
if old.email <> new.email then
    INSERT INTO tbl_log(action_name,key_id,column_name,old_value,new_value,log_time)
    VALUES('UPDATE',old.id,'email',old.email,new.email,NOW()); 
end if;
if old.phone <> new.phone then
    INSERT INTO tbl_log(action_name,key_id,column_name,old_value,new_value,log_time)
    VALUES('UPDATE',old.id,'phone',old.phone,new.phone,NOW());
end if;
end

ใส่แค่นี้แหละครับ :) จากนั้นก็กดปุ่ม "ไป" phpMyAdmin ก็จะสร้าง Trigger ให้เรา จากนั้นให้เราลองแก้ไขข้อมูลในตาราง tbl_profile ในฟิลด์ไหนก็ได้ครับ fullname, email, phone เลือกเอาสักฟิลด์ หรือจะลองแก้หมดทั้งสามฟิลด์เลยก็ได้
เมื่อแก้ไขข้อมูลในตาราง tbl_profile เรียบร้อยแล้วให้เราลองไปเปิดดูข้อมูลในตาราง tbl_log จะมีข้อมูลปรากฏขึ้นมาครับ

ผมขอเขียนบทความเอาไว้เท่านี้ก็แล้วกันนะครับ ศึกษาข้อมูลเพิ่มเติมได้ที่คลิปวีดีโอด้านล่างนี้เลยครับ

ดาวน์โหลดฐานข้อมูลตัวอย่างได้ที่นี่

Google Map API การบันทึกพิกัด latitude, longitude ลงในฐานข้อมูล MySQL

2015-07-11T08:43:00.003+07:00

สวัสดีครับเพื่อนๆ

หลังจากที่ได้กลับมาอัพเดต blog อีกครั้ง ตอนนี้ก็มาถึงคิวของ Google Map API คราวนี้ผมจะมานำเสนอเทคนิคการบันทึกพิกัดจาก Google Map ลงในฐานข้อมูลครับ

นี่คือภาพตัวอย่าง..เมื่อเราคลิกที่แผนที่จะมี Marker ปักหมดในตำแหน่งที่เราคลิก และมีตัว Infowindow ปรากฏขึ้นมาให้เราบันทึกค่าพิกัด Lat,Lng ส่วนวิธีการทำอย่างไรนั้น..ให้ทุกท่านได้รับชมผ่านคลิปวิดีโอด้านล่างเลยครับ

ซ่อนโพสของกลุ่ม 18+ ออกจากฟีดของ facebook

2015-07-07T13:51:00.002+07:00

ทุกท่านคงเคยมีปัญหากับภาพโป๊ขึ้นเต็มฟีดใช่หรือไม่(ไปเข้ากลุ่ม 18+ มาละสิ) ทุกวันนี้คงปฏิเสธไม่ได้ว่าเราทำงานกันผ่าน facebook อย่างผมก็มีกลุ่ม facebook ที่เป็นกลุ่มเอาไว้สำหรับคุยเรื่องงานกันโดยเฉพาะอยู่ 4 5 6 7 กลุ่ม -*- กันเลยทีเดียว... บางทีเวลาประชุมผมยังเคยเปิด facebook เข้าไปเอาไฟล์ พรีเซ็นเตชั่น หรือไฟล์งานต่างๆในกลุ่ม facebook แล้วถ้าตอนนั้นคุณต่อจอโปรเจคเตอร์แล้วภาพโป๊ขึ้นมาบนฟีด...จะทำยังไง!!! มีอายสิครับแบบนี้ ฮ่าๆ..

ไม่เป็นไรครับผมมีวิธีซ่อนโพสที่มาจากกลุ่มออกจากฟีดโดยที่ไม่ต้องไปกดออกจากลุ่มให้เสียดาย...วิธีก็มีดังนี้ครับ

1. ให้เราเข้ามาที่หน้าฟีดของ facebook จากนั้นเอาเมาส์ไปชี้ค้างไว้ตรงด้านหน้าของ icon ฟีดข่าว..มันจะมี icon เฟืองเล็กๆขึ้นมา...จากนั้นให้คลิกที่ icon เฟือง มันจะมีเมนู "แก้ไขการกำหนดลักษณะ" ปรากฏขึ้นมา..อย่ารอช้าให้คลิกเข้าไปเร็วไว ดังภาพ...

2. เมื่อคลิกเข้าไปที่เมนู "แก้ไขการกำหนดลักษณะ" จะมีหน้าต่างขึ้นมาให้เรากำหนดลักษณะฟีดข่าว ให้เรามองหาคำว่า "กลุ่ม" ด้านซ้ายมือ จากนั้นก็รีบคลิกอย่างไว. ดังภาพ

3. เมื่อคลิกเข้ามาในเมนูที่ชื่อว่า "กลุ่ม" มันก็จะโชว์ชื่อกลุ่มต่างๆขึ้นมามากมายก็ให้เราหากลุ่มที่เราต้องการจะไม่ให้โพสของกลุ่มมันขึ้นมาบนฟีด..จากนั้นก็ทำการคลิกที่ปุ่มคำว่า "กำลังติดตาม" คลิกลงไปอย่างแรง

4. เมื่อคลิกที่ปุ่ม "กำลังติดตาม" คำว่า "กำลังติดตาม" จะกลายเป็นคนว่า "ติดตาม" เท่านี้ก็ก็เป็นอันเสร็จขั้นตอนการซ่อนโพสของกลุ่มออกจากฟีด......จบแบ้ว

ไว้พบกันใหม่โอกาสหน้าสวัสดีครับ :)

สร้าง App Android ด้วย Cordova และ Bootstrap

2015-07-06T17:00:00.000+07:00

สวัสดีครับเพื่อนๆ วันนี้ผมจะมาแนะนำการสร้างแอพพลิเคชั่นบนมือถือ ด้วย Cordova

และนี่คือภาพอธิบายสถาปัตยกรรมของ Cordova

ในบทความนี้ผมจะไม่ขอพูดถึงการติดตั้ง Cordova ให้ไปหาวิธีติดตั้งกันเอาเองนะครัช ..แหะๆ..เอาไว้มีโอกาสผมจะมาแนะนำอีกทีก็แล้วกันครับ
เพราะฉะนั้นผู้ที่จะลองทำตามบทความนี้ควรติดตั้ง Cordova ให้เรียบร้อยก่อนนะครับ จริงๆแล้วต้องติดตั้งหลายตัวเลยมีทั้ง Android Studio, JAVA JDK, Cordova, node js และอะไรอีกผมจำไม่ได้เอาไว้ค่อยพูดถึงกันอีกทีนะครับ...(รีบเปลี่ยนเรื่อง)

เอาละครับขั้นตอนที่ 1 ให้เราเปิดตัว cmd ขึ้นมาครับจากนั้นไปที่พาทที่เราต้องการจะเก็บไฟล์โปรเจค Cordova เอาไว้ครับ. อย่างเช่นเครื่องผมต้องการเก็บไฟล์โปรเจค Cordova ไว้ที่พาท D:\DEV\Cordova ผมก็พิมพ์ลงไปใน cmd ตามนี้ครับ

C:\>D:
D:\>cd DEV\Cordova

ขั้นตอนที่ 2 มาสร้าง app กันเลย!!! โดยให้เราเรียกใช้เจ้าตัว Cordova ผ่าน cmd นี่แหละครับทำแบบนี้ครับ

D:\DEV\Cordova>cordova create hello com.example.hello HelloWorld

อธิบายคำสั่งด้านบนนะครับคือเราเรียกใช้คำสั่ง create ซึ่งเป็นคำสั่งที่ใช้ในการสร้างโปรเจคของ Cordova นั่นเอง จากนั้นใส่อากิวเมนต์ให้มันครับ ตัวแรกคำว่า hello ตัวนี้คือชื่อโปรเจค Cordova จะสร้าง Folder hello ขึ้นมาให้เราเพื่อใช้ในการเก็บไฟล์โปรเจคครับ อากิวเมนต์ตัวที่สอง com.example.hello ตัวนี้จะเป็นเหมือนกับชื่อ package ของ app เราครับถ้าไม่กำหนดชื่อให้มันมันจะกำหนดให้เรา -*- เป็น io.cordova.hellocordova แนะนำว่าควรกำหนดเอาไว้จะดีกว่าครับ ไม่งั้นจะมีปัญหาตอนติดตั้ง app คือสมมุติว่าเราสร้าง app มา 3-4 ตัวโดยที่ไม่ตั้งชื่อ package จะทำให้เวลาเราติดตั้ง app จะติดตั้งได้แค่ตัวเดียวครับ พอเราจะติดตั้งตัวอื่นๆมันจะให้อัพเดตแทน...เหตุเพราะชื่อ package มันเหมือนกัน -*- OK นะครับ

ต่อไปอากิวเมนต์ตัวที่สาม HelloWorld ตัวนี้จะเป็นชื่อของแอพพลิเคชั่นของเราครับ. ก็ตั้งได้ตามใจชอบเลยครับ. แต่ถ้าไม่ตั้ง App ของคุณก็จะมีชื่อเป็น HelloCordova เหมือนๆกันหมด

และทั้งหมดทั้งมวลที่ผมอธิบายไปข้างต้นสามารถเข้าไปแก้ไขได้ในภายหลัง ในไฟล์ config.xml ครับ. ส่วนต้องเข้าไปแก้ตรงไหนอย่างไร...ไปหาวิธีแก้เอาเอง ฮ่าๆ

เรามาต่อกันที่ขั้นตอนที่ 3 การ add Platforms จริงๆแล้ว cordova สามารถสร้าง app ได้หลากหลาย platforms มากครับ แต่ในที่นี้เราจะสร้างแอพแอนดรอยด์กันเพราะฉะนั้นเราจะทำแบบนี้ครับ

D:\DEV\Cordova>cd hello

อธิบายคำสั่งด้านบนคือการเข้าไปที่ Folder โปรเจคของเราซึ่งก็คือ Folder ที่มีชื่อว่า hello นั่นเอง!

ต่อๆๆขั้นตอนที่ 4...พอเข้ามาที่ Folder โปรเจคได้แล้วเราก็มาทำการ add platforms กันครับโดยใช้คำสั่งดังนี้

D:\DEV\Cordova\hello>cordova platform add android

เรียบร้อยแล้ว. ตอนนี้เราสร้างแอพแอนดรอยด์ได้แล้ว..เรื่องจริงนะไม่ได้หลอกถ้าไม่เชื่อผมจะรันแอพ Cordova ให้ดูโดยใช้คำสั่งดังนี้ครับ

D:\DEV\Cordova\hello>cordova run

หมายเหตุ: การใช้คำสั่ง cordova run ควรเข้าไปในพาทโปรเจคของ cordova ก่อนจึงจะสามารถใช้คำสั่งนี้ได้นะครับ

และนี่คือหน้าตาโปรแกรมที่เราสร้างมันขึ้นมากับมือเมื่อตะกี้...(จริงๆแล้ว Cordova สร้างให้) เอาละครับเมื่อเรารันโปรเจคของเราได้แล้ว...ต่อไปก็เข้าสู่การนำ Bootstrap เข้ามาใส่ใน Cordova ซึ่งวิธีก็มีดังนี้!!!!

ก่อนอื่นให้เราไปหาโหลด Theme free ของ Bootstrap มาครับส่วนผมขอเลือก theme ของ bootstrap ตัวนี้ครับ SB Admin2 โหลดได้ที่ http://startbootstrap.com/template-overviews/sb-admin-2/

เมื่อเราดาวน์โหลด theme มาเรียบร้อยแล้วให้เราก็อปปี้ไฟล์ theme ที่เราโหลดมาทั้งหมดไปไว้ที่ folder โปรเจคของเราโดยในที่นี้โปรเจคของผมอยู่ที่ D:\DEV\Cordova\hello อะอะอะเดี๋ยวก่อนไม่ได้ให้ก็อปปี้ไว้ที่ตรงนี้นะครับให้เราก็อปปี้ไว้ที่ Folder www ครับ เพราะงั้นผมจะก็อปปี้เอาไปไว้ตามพาทนี้ครับ D:\DEV\Cordova\hello\www ที่นี่แหละครับที่ผมจะบอก :)
ก่อนก็อปปี้ให้ลบไฟล์ตัวเติมที่ Corova สร้างเอาไว้ให้ออกให้หมดก่อนนะครับเหลือไว้แค่ Folder img ก้ได้ครับ เอาละผมจะก็อปปี้ไปไว้ละนะ

ก็อปปี้เสร็จเรียบร้อย...และนี่คือไฟล์ และ Folder ทั้งหมดใน www ของผม...อย่างที่เห็นครับมันเป็น Web และมี ไฟล์ index.html ด้วย และตัว index.html ก็คือหน้าหลักของแอพเรานั่นเอง...

ทีนี้เรามาลองรันโปรแกรมกันใหม่อีกรอบโดยใช้คำสั่ง cordova run ดังตัวอย่างด้านล่าง

D:\DEV\Cordova\hello>cordova run

แท่นแทนแท๊น...มันออกมาแร้ว Bootstrap on Cordova :)

จบเสียที....หอบแปบ....บทความนี้เป็นบทความที่ยาวมากๆ หลังจากที่ผมกลับมาเขียนบล็อกในรอบ 5ปี... ฮ่าๆๆๆ เอาละครับเมื่อรัน Cordova + Bootstrap ได้แล้วผมก็คงต้องขอจบบทความแต่เพียงเท่านี้ไว้พบกันใหม่บทความหน้าครับ :)

แสดง Font ไทยสวยๆบนหน้าเว็บไซต์

2015-07-03T09:46:00.000+07:00

สวัสดีครับ วันนี้ผมจะมาแนะนำวิธีการใส่ฟอนต์ในหน้าเว็บ โดยเข้าไปโหลดฟอนต์ในหน้าเว็บ f0nt.com ซึ่งเป็นเว็บไซต์ที่รวบรวมฟอนต์ไทยสวยงามมากมาย และที่สำคัญสามารถนำมาใช้ได้ฟรี (หรือเปล่านะ :) แบบว่าขอยืมอ่ะคับ ฮ่าๆ) แล้วนำมาแปลงเป็น font ที่สามารถนำมาใช้ได้ในหน้าเว็บ เอาละครับเรามาเริ่มกันเลย

ขั้นตอนแรก ให้เราเข้าไปที่เว็บไซต์ f0nt.com ในหน้าเว็บจะมีฟอนต์ต่างๆมากมายให้เราเลือก เราก็เลือกๆมาสักตัวครับ ในตัวอย่างผมขอเลือกใช้ font ตัวนี้ก็แล้วกัน

ส่วนวิธีการดาวน์โหลดผมขอไม่บอกนะครับ..ฮ่าๆ บอกนิดนึงก็ได้... คลิกเข้าไปที่ชื่อฟอนต์เลยครับ แล้วมันจะมีลิงค์ให้ดาวน์โหลดอยู่ด้านล่าง...คลิกโหลดมาได้เลยคับ...โหลดมาแล้วมันจะเป็นไฟล์ .zip ก็แตกไฟล์ออกมาจะได้เป็นไฟล์ .ttf อย่างของผมจะได้ไฟล์ชื่อว่า paaymaay_regular.ttf

เอาละครับเมื่อได้ฟอนต์มาแล้วขั้นตอนต่อไปให้เราเข้าไปที่เว็บไซต์ https://www.kirsle.net/wizards/ttf2eot.cgi เพื่อแปลง font .ttf ไปเป็นไฟล์ .eot ซึ่งไฟล์ตัวนี้จะสามารถนำมาใช้บนหน้าเว็บได้นั้นเอง....ต่อๆๆไปเมื่อเราเข้ามาที่เว็บที่ผมบอกไปเมื่อกี้ได้แล้วให้เราทำการ convert ไฟล์โดยคลิกที่ปุ่ม "เลือกไฟล์" จากนั้นเลือกไฟล์ฟอนต์ .ttf ที่เราโหลดมา เมื่อเลือกไฟล์เสร็จแล้วให้เรากดที่ปุ่ม "Convert TTF to EOT!"

เมื่อ Convert ได้แล้วมันจะมีลิงค์ให้เราดาวน์โหลดฟอนต์ตามภาพครับโหลดเบย

สังเกตุว่าเขาจะมีตัวอย่างการนำไปใช้ให้เราด้วยครับ ตามนี้ครับ

มาถึงขั้นตอนการนำไปใช้แล้วครับผมขอแสดง code html การนำไปใช้นะบัดนี้.......

<html>
 <head>
 step-juice.blogspot.com 


<body>




ฟอนต์ "ป้ายไม้" สวยจุง

ฟอนต์ "ป้ายไม้" สวยจุง

ฟอนต์ "ป้ายไม้" สวยจุง

ฟอนต์ "ป้ายไม้" สวยจุง
</body>
</html>

และนี่คือผลลัพธ์การแสดง font ในหน้าเว็บ

เอาไว้ผมจะมาอธิบาย Code HTML ทีหลังนะครับ และขอทิ้งลิงค์ตัวอย่างไว้ให้ได้ไปศึกษากันครับ

โหลด Code ตัวอย่าง

การนำข้อมูลจาก Excel มาลงฐานข้อมูล MySQL โดยใช้ PHP

2015-05-18T14:06:00.003+07:00

สวัสดีครับ ไม่ได้พบกันซะนานเนื่องจากแก่ตัวลงเลยเริ่มที่จะขี้เกียจเขียน blog -*- แหะๆ ตอนนี้ผมหันไปทำเป็น Video แนะนำเทคนิคทางๆบน Youtube ใครใสใจไปติดตามกันได้นะครับ

และนี้เป็นคลิป Video แนะนำเทคเนิคการนำเข้าข้อมูลจากไฟล์ Excel มาลงฐานข้อมูลโดยใช้ความสามารถของ PHP เชิญรับชมได้เลยครับ

การนำ google map มาใส่บนเว็บแบบ simple simple (ง่ายมักมาก)

2012-04-24T14:35:00.000+07:00

google map api lv3 no key

สวัสดีครับวันนี้ผมจะมาแนะนำ การนำ google map api lv3 มาใส่บนเว็บ ซึ่งเวอร์ชั่นนี้เราสามารถนำมาใช้ได้โดยไม่ต้องสมัคร google map api key
หมายเหตุ: อนาคตอาจต้องสมัคร -*- แต่ ณ ตอนนี้ผมลองแล้วสามารถแสดง map ได้ปกติครับ

เราลองมาดูวิธีการนำ google map มาใช้กันครับ
สิ่งสำคัญที่ทำให้ google map สามารถแสดงบนเว็บของเราได้หลักๆมีสามสิ่งดังนี้ครับ

1. การดึง script ของ google map api มาใช้ โดยใช้ script tag มันเรียกว่าอะไรหว่า ฮ่าๆ
ดูตัวอย่างด้านล่างดีกว่าครับ

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

2. เมื่อเราดึง script ของ google map api มาได้แล้ว จากนั้นเราจะเรียกใช้ class หรือ function ต่าง
ๆ ซึ่งเป็น javascript มาใช้ในการสร้างแผนที่
เรามาดู code กันเลยดีกว่า

 var map;
      function initialize() {

  var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(15.000682,103.728207),  // ตัวเลขแสดงถึงพิกัด lat lng ในประเทศไทย จังหวัดสุรินทร์ อิอิ
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),  // วาดแผนที่ลง tag div ที่มี id ชื่อว่า map_canvas
            myOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize); // สร้างแผนที่เมื่อโหลดหน้าเว็บ

3. tag DIV ที่ใช้ในการแสดงแผนที่ ก็ไม่มีอะไรมากครับเอาแท็ก DIV มาใส่แล้วก็กำหนด
ความกว้าง ความสูงให้มัน ตามต้องการ และอย่าลืมกำหนด ID ให้มันด้วย แบบนี้

<div id="map_canvas" style="width:500px;height:400px;"></div>

มาดูตัวอย่างไฟล์ html เต็มๆกันดีกว่า

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> google map api lv 3 by step juice </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

<script type="text/javascript">
      var map;
      function initialize() {

  var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(15.000682,103.728207),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


 </head>

 <body>
  
<div id="map_canvas" style="width:500px;height:400px;"></div>


 </body>
</html>

ภาพตัวอย่าง

ติดตามเทคนิคอื่นๆ ผ่านทาง Youtube chanel ใหม่ของผมได้นะครับ

http://www.youtube.com/watch?v=s2zVSD7ay3M

facebook แจ้งเตือน แอพไม่สนับสนุน HTTPS จะทำอย่างไร

2012-04-18T15:42:00.007+07:00

facebook dialog แจ้งเตือน แอพไม่สนับสนุน https

Secure browsing is not supported

This application does not yet support secure browsing (HTTPS).

มีวิธีแก้ไขดังนี้ครับ

เอาเครื่องหมายถูกออก

ทำตามรูปไปก่อนนะครับเดี๋ยวมาอธิบาย ฮ่าๆ

คำสั่งที่ใช้บ่อยใน linux

2011-10-04T14:20:00.000+07:00

คำสั่ง copy

cp -r /home/hope/files/* /home/hope/backup

Copies all the files, directories, and subdirectories in the files directory into the backup directory.

เพิ่มไว้ดูเอง ชอบลืมคำสั่ง เวลาใช้ก็ค้นหาที เลยเอามาเก็บไว้ใน blogger ซะเลย -*-

ประเภทของข้อมูลใน MySQL

2011-05-05T22:41:00.000+07:00

นี่คือตารางบอกประเภทของข้อมูลใน MySQL เอาแบบตัวที่ใช้บ่อยๆ เลยนะ

เดี๋ยวอธิบายให้ฟังแล้วกัน ว่าประเภทของข้อมูลมีความสำคัญอย่างไร

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

ลองไปดูในตารางประเภทข้อความครับว่ามีตัวใดเหมาะสม

บอกให้เลยแล้วกันครับส่วนใหญ่ก็จะใช้ VARCHAR ครับ ในการเก็บชื่อคน

คือสามารถเก็บตัวอักษรได้สูงสุด 255 ตัว ชื่อคนคงไม่เกิน 255 ตัวอยุ่แล้ว -*-

ใน SQL เราสามารถกำหนดขอบเขตของข้อมูลได้ครับ แต่กำหนดได้ไม่เกินความยาวสูงสุด

ของประเภทข้อมูลนั้นๆนะ ส่วนการกำหนด กำหนดยังไงเอาไว้ไปดูตัวอย่างเลยดีกว่า -*-

นี่ล่ะครับ การออกแบบฐานข้อมูลต้องคำนึงถึงประเภทของข้อมูลว่าเก็บข้อมูลเป็นอะไร

และมีขนาดข้อมูลที่จะจัดเก็บเท่าไร

เอาล่ะเรามาดูกันว่ามีประเภทข้อมูลตัวไหน น่าสนใจ

ประเภทข้อมูล วันที่ และเวลา

ประเภท	ช่วงข้อมูล	คำอธิบาย
DATE	1000-01-01 9999-12-31	วันที่ แสดงเป็น YYYY-MM-DD (ปี เดือน วัน)
TIME	-838 :59:59 838 :59:59	เวลา แสดงเป็น HH:MM:SS (ชั่วโมง นาที วินาที) หมายเหตุ ช่วงข้อมูลกว้างกว่าความต้องการใช้
DATETIME	1000-01-01 00 :00:00 9999-12-31 23:59:59	วันที่และเวลา แสดงเป็น YYYY-MM-DD HH:MM:SS (ปี เดือน วัน ชั่วโมง นาที วินาที)
TIMESTAMP [(M)]	1970-01-01 00:00:00 บางกรณีเป็น 2037 timestamp	timestamp ใช้กับรายงานทรานแซคชัน รูปแบบการแสดงขึ้นกับค่าของ M ช่วงข้อมูลด้านบน ขึ้นกับ UNIX
YEAR	70 – 69 (1970 – 2069) 1901 - 2155	ปี สามารถระบุเป็นรูปแบบ 2 หรือ 4 ตำแหน่ง แต่ละรูปแบบมีช่วงข้อมูลต่างกัน

ประเภทข้อมูลตัวเลข

ประเภท	ช่วงข้อมูล	การเก็บ (ไบต์)	คำอธิบาย
TINYINT [(M)]	-127..128 หรือ 0..255	1	จำนวนเต็มขนาดเล็กมาก
SMALLINT [(M)]	-32768..32767 หรือ 0..65535	2	จำนวนเต็มขนาดเล็ก
MEDIUMINT [(M)]	-8388608.. 8388607 หรือ 0.. 16777215	3	จำนวนเต็มขนาดกลาง
INT [(M)]	-2 31 .. 2 31 -1 หรือ 0.. 2 32 -1	4	จำนวนเต็มปกติ
INTEGER [(M)]			ชื่อเดียวกับ INT
BIGINT [(M)]	-2 63 .. 2 63 -1 หรือ 0.. 2 64 -1	8	จำนวนเต็มปกติ

ประเภท	ช่วงข้อมูล	การเก็บ (ไบต์)	คำอธิบาย
FLOAT ( precision )	ขึ้นกับ precision	แปรผัน	สามารถระบุเป็น Single หรือ Double
FLOAT [(M,D)]	?1.175494351E-38 ?3.402823466E+38	4	ขนาด Single เทียบเท่ากับ FLOAT (4) แต่ระบุการแสดงความกว้างและจำนวนทศนิยม
DOUBLE [(M,D)]	?1.7976931348623157E+308 ?2.2250738585072014E-308	8	ขนาด Double เทียบเท่ากับ FLOAT (8) แต่ระบุการแสดงความกว้างและจำนวนทศนิยม
DOUBLE PRECISION [(M,D)]	เท่ากับ DOUBLE		ชื่อเดียวกับ DOUBLE [(M,D)]
REAL [(M,D)]	เท่ากับ DOUBLE		ชื่อเดียวกับ DOUBLE [(M,D)]
DECIMAL[(M [,D])]	แปรผัน	M+2	จำนวนทศนิยมที่จัดเก็บเป็น char ช่วงข้อมูลขึ้นกับ M และแสดงความกว้าง
NUMERIC [(M,D)]	เท่ากับ NUMERIC		ชื่อเดียวกับ NUMERIC

ประเภทข้อมูลข้อความ

ประเภท

ช่วงข้อมูล

คำอธิบาย

[NATIONAL]

CHAR (M) [BINARY]

1 ถึง 255 ตัวอักษร

ความยาวตายตัวตาม M โดย M อยู่ระหว่าง 1 ถึง 255 คีย์เวิร์ด NATIONAL ระบุชุดตัวอักษรเริ่มต้น นี่เป็นค่าเริ่มต้นใน MySQL แต่รวมอยู่ในมาตรฐาน ANSI SQL คีย์เวิร์ด BINARY ระบุข้อมูลต้องได้รับการปฏิบัติเป็นไม่ใช่ case sensitive (ค่าเริ่มต้นเป็น case sensitive )

[NATIONAL]

VARCHAR (M) [BINARY]

1 ถึง 255 ตัวอักษร

เหมือนกับ CHAR ยกเว้นความยาวแปรผัน

ประเภท	ช่วงความยาวมากที่สุด (ตัวอักษร)	คำอธิบาย
TINYBLOB	2 8 -1 (คือ 255)	ฟิลด์ BLOB ขนาดเล็ก
TINYTEXT	2 8 -1 (คือ 255)	ฟิลด์ TEXT ขนาดเล็ก
BLOB	2 16 -1 (คือ 65,535)	ฟิลด์ BLOB ขนาดปกติ
TEXT	2 16 -1 (คือ 65,535)	ฟิลด์ TEXT ขนาดปกติ
MEDIUMBLOB	2 24 -1 (คือ 16,777,215)	ฟิลด์ BLOB ขนาดกลาง
MEDIUMTEXT	2 24 -1 (คือ 16,777,215)	ฟิลด์ TEXT ขนาดกลาง
LONGBLOB	2 32 -1 (คือ 4,294,967,295)	ฟิลด์ BLOB ขนาดใหญ่
LONGTEXT	2 32 -1 (คือ 4,294,967,295)	ฟิลด์ TEXT ขนาดใหญ่

ผมไปขโมยตารางพวกนี้มาจากเว็บด้านล่างนี้ครับ เข้าไปศึกษาเพิ่มเติมได้ครับ

เขาอธิบายไว้ละเอียดพอสมควร จริงๆอยากให้ลองไปศึกษาดีดีครับเรื่องของประเภทข้อมูล

ส่วน blog ผมขออธิบายไว้แค่นี้ครับ ฮ่ะๆๆ ขี้เกี๊ยดขี้เกียด

อย่างที่บอกครับ เน้นการใช้งาน ทฤษฎีอย่าได้แคร์ ^^

นี่ครับเว็บ

http://www.widebase.net/database/mysql/mysqltutorial/mysqltutor0205.shtml

รู้จักกับ Table

2011-05-05T21:40:00.000+07:00

ก่อนที่เราจะลุยกับภาษา SQL เรามารู้จักกับ Table กันก่อน -*-

และก่อนที่จะไปพูดถึง Table ขอพูดถึงคำว่า ฐานข้อมูลก่อน -*-

ฐานข้อมูล หมายถึง ข้อมูลรวมถึงความสัมพันธ์ของข้อมูลที่จัดเก็บรวบรวมไว้เป็นกลุ่ม

จัดเก็บไว้ที่ไหน??? ใช่แร้ววเก็บไว้ใน Table นั้นแหละครับ -*-

มาดูกันสิว่า Table เป็นยังไง

ภาพนี้ก็คงอธิบายได้ทุกอย่างแล้ว -*- ไม่ต้องพูดไรแล้วมั้งฮ่าๆๆ

Table นี้ดูไปแล้วก็คงเป็น Table เก็บข้อมูลเบอร์โทรศัพท์

คือมี ฟิลด์ 2 ฟิลด์ ชื่อว่า name และ phone

ฟิลด์ name เก็บข้อมูลที่เป็น ชื่อคน และ phone เก็บข้อมูล หมายเลขโทรศัพท์

ลองคิดกันเล่นๆนะครับว่าถ้าเราอยากจะเก็บข้อมูล อะไรข้อมูลหนึ่ง

เอาเป็น ข้อมูลส่วนตัวก็ได้

เราจะต้องมีฟิลด์อะไรบ้าง แต่ล่ะฟิลด์ใช้เก็บข้อมูลอะไร

อ่าาา นี้แหละครับคือการออกแบบฐานข้อมูล

บทความต่อไปผมจะแนะนำชนิดของข้อมูลใน SQL ก็แบบข้อมูลมันมีหลายชนิดอ่ะครับ

เช่น ตัวเลข, ตัวหนังสือ ใช่ไหมครับ

เอาล่ะไว้ไปพูดถึงบทความหน้าดีกว่า

รู้จักกับ SQL

2011-05-05T20:51:00.000+07:00

ขอบอกก่อนว่าผมไม่เก่ง อย่าเชื่อผมมาก -*- ซะงั้น
SQL ที่ผมจะกล่าวถึงนั้น เน้นการใช้งาน ทฤษฎีอย่าได้แคร์ 555+
และจะใช้โปรแกรมจัดการฐานข้อมูลที่มีชื่อว่า MySQL (แนะนำแค่พื้นฐานนะ ^^)
เอาล่ะมาเริ่มกันดีกว่า

SQL ย่อมาจาก Structured Query Language (มีออกข้อสอบ จำไว้ให้แม่น 555+ -*-)

SQL เป็นภาษาที่ใช้ทำงานกับข้อมูลบนฐานข้อมูล เป็นภาษามาตรฐานระดับโลก(เวอร์ไปไหม) -*-
ก็คือถ้าเราเรียนรู้ภาษา รู้ไวยากรณ์ของ SQL เราก็สามารถนำภาษา SQL ไปใช้กับโปรแกรมจัดการฐานข้อมูลได้อีกมากมาย เช่น MSAccess, SQL Server, MySQL, Orable เป็นต้น

คำสั่ง SQL ประกอบด้วยชุดคำสั่งหลักๆ 3 ประเภทด้วยกัน ได้แก่

1. DDL (Data Definition Language) เป็นชุดคำสั่งที่ใช้ในการนิยาม กำหนด หรือสร้างข้อมูล
บนฐานข้อมูล เช่น เทเบิล(table), อินเด็กซ์(index), วิว(view) ได้แก่คำสั่ง CREATE TABLE,
CREATE VIEW เป็นต้น

2. DML (Data Manipulation Language) เป็นชุดคำสั่งที่ใช้สนการประมวลผล หรือจัดการกับข้อมูล
ในฐานข้อมูล ได้แก่คำสั่ง SELECT, INSERT, UPDATE เป็นต้น

3. DCL (Data Control Language) เป็นคำสั่งที่ใช้ในการควบคุมสิทธิ์ของผู้ใช้ในการใช้ข้อมูล
รวมทั้งส่วนที่ใช้ควบคุมการใช้งานฐานข้อมูลจากผู้ใช้หลายๆ คนพร้อมกัน ได้แก่ คำสั่ง GRANT, REVOKE เป็นต้น

แค่นี้พอมั้ง สาระแยอะไปแระ -*- พบกันใหม่บทความหน้า

ComboBox Event SelectedIndexChanged C#.net

2010-12-26T12:04:00.000+07:00

สร้าง db_test
มี table 2 ตัว
1 tbl1 มีรายละเอียดตามนี้

2 tbl2 มีตายละเอียดตามนี้

สร้าง ComboBox มา 2 ตัว
1 ชื่อ combo1
2 ชื่อ combo2

form1.cs


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Data.SqlClient;

namespace combobox1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            String strConnString;
            strConnString = "Server=nasa;Uid=sa;PASSWORD=1234;database=db_test;Max Pool Size=400;Connect Timeout=600;";
            objConn = new SqlConnection(strConnString);
            objConn.Open();

            DataSet ds = new DataSet();
            SqlDataAdapter da1 = new SqlDataAdapter("SELECT * FROM tbl1", objConn);
            da1.Fill(ds, "combolist");
            combo1.DataSource = ds;//กำหนด DataSet
            combo1.DisplayMember = "combolist.name_a";
            combo1.ValueMember = "combolist.id_a";
            objConn.Close();

            //ใส่ Event ให้กับ combo1 เมื่อทำการเปลี่ยนค่าใน combo1 จะเรียกใช้ฟังก์ชั่น Combo1_SelectedIndexChanged
            this.combo1.SelectedIndexChanged +=
            new System.EventHandler(Combo1_SelectedIndexChanged); 
        }
        SqlConnection objConn;
        private void Form1_Load(object sender, EventArgs e)
        {            

           
        }

        private void Combo1_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            String strConnString;
            strConnString = "Server=nasa;Uid=sa;PASSWORD=1234;database=db_test;Max Pool Size=400;Connect Timeout=600;";
            objConn = new SqlConnection(strConnString);
            objConn.Open();

            DataSet ds = new DataSet();
            SqlDataAdapter da1 = new SqlDataAdapter("SELECT * FROM tbl2 WHERE id_a = "+combo1.SelectedValue, objConn);  //combo1.SelectedValue คือการดึงค่า Value ของ combo1 
            da1.Fill(ds, "combolist");
            combo2.DataSource = ds;//กำหนด DataSet
            combo2.DisplayMember = "combolist.name_b";
            combo2.ValueMember = "combolist.id_b";
            objConn.Close();
        }

    }
}

C# Add zeroes before number เพิ่มเลขศูนย์หน้าตัวเลข

2010-10-06T11:30:00.000+07:00

เพิ่มเลขศูนย์หน้าตัวเลขด้วย C#.NET โดยเราสามารถกำหนดได้ว่าให้ตัวเลข
มีทั้งหมดกี่หลัก และจะต้องมีเลขศูนย์นำหน้า เพื่อให้ครบหลักเสมอ

เพื่อให้เห็นภาพเรามาดูตัวอย่างกันเลยดีกว่า -*-

ตัวอย่าง


String.Format("{0:00000}", 15);

ผลลัพธ์

00015

เห็นป่าวครับ เราจะได้ตัวเลขห้าหลัก หรือห้าตัว โดยมีศูนย์เพิ่มเข้าไปด้านหน้า
ดูจากตัวอย่างน่าจะเข้าใจใช่ไหมครับ -*-

ผมแถมให้อีกตัวอย่างแล้วกัน


using System;
using System.Collections.Generic;
using System.Text;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            for (int i = 100; i <= 110; i++)
            {
                Console.WriteLine(string.Format("{0:00000}", i));
            }
            Console.ReadLine();
        }
    }
}

ผลลัพธ์

00100
00101
00102
00103
00104
00105
00106
00107
00108
00109
00110

ลองเล่นดูครับ

Javascript For Loop

2010-10-02T13:38:00.000+07:00

คำสั่ง for
เป็นคำสั่งที่ทำให้โปรแกรมทำงานซ้ำ ๆ ตามจำนวนรอบที่กำหนด
โดยจะต้องรู้จำนวนรอบการทำงาน ที่แน่นอน

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


for(ค่าตัวแปรเริ่มต้น; เงื่อนไข; การเปลี่ยนค่าตัวแปร)
{
  //คำสั่ง
}

ตัวอย่าง


<html>
 <head>
  <title> step-juice.blogspot.com:: javascript for loop </title>
 </head>
 <body>
  <script language="JavaScript">
 for(var i = 1; i <= 12; i++)
 {
  document.write(i +" ");
 }
  </script>
 </body>
</html>

ผลลัพธ์ของโปรแกรม
โปรแกรมจะแสดงเลข 1-12 ออกมา

1 2 3 4 5 6 7 8 9 10 11 12

อธิบายโปรแกรม
บรรทัดที่ 7

for(var i = 1; i <= 12; i++)
var i = 1; คือค่าเริ่มต้น

i <= 12;
คือเงื่อนไงในการทำซ้ำ ในที่นี้เงื่อนไขคือ i น้อยกว่าหรือเท่ากับ 12 หรือไม่
ให้กับไปดูที่ค่าเริ่มต้นครับ ค่าเริ่มต้นคือ i = 1 ใช่ไหมครับเพราะฉะนั้น i น้อยกว่าหรือไม่เท่ากับ 12 แน่นอน
โปรแกรมจึงทำซ้ำไปเรื่อยๆ ครับ จนกว่าจะเท่ากับ 12 ^^
แล้ว i มันจะเท่ากับ 12 ได้ยังไง มาดูที่ตรงนี้ครับ

i++ เจ้าตัวนี้นี่เองที่เพิ่มค่า i ไปอีก 1 อย่างที่บอกครับโปรแกรมจะทำซ้ำไปเรื่อย ๆ จนกว่า i จะเท่ากับ 12
เพราะฉะนั้นมันจะกลับมาทำ i++ ไปเรื่อย ๆ ครับ พอมันบวก i มา 12 รอบ มันจะเป็น 1 + 12 =13 ใช่ไหมครับ ^^
เงื่อนไขคือ i <= 12 แต่ตอนนี้ i มันไป 13 แล้วครับ ไม่ตรงเงื่อนไข ออกจากการทำซ้ำทันที ^^ งงไหมฮ่ะๆๆๆๆ

บรรทัดที่ 9

document.write(i +" ");
เป็นการเขียนข้อความลงไปในหน้าเว็บครับ ในที่นี้ผมให้มันเขียนคำว่า i + " " คือ i เป็นตัวเลขบวกช่องว่าง(" ")
ลงไป 12 รอบครับ ผลลัพธ์เลยออกมาเป็น 1 - 12 โดยมีช่องว่างต่อท้ายลงไปเสมอ

ต่อไปเรามาประยุกต์ใช้ for loop กันเล่นๆ ดีกว่าครับ โดยผมจะเขียนโปรแกรมแสดงสูตรคูณออกมา
เอาล่ะมาเริ่มกันเลย

โปรแกรมแสดงแม่สูตรคูณ ตามตัวเลขที่ป้อนเข้าไป


<html>
 <head>
  <title> step-juice.blogspot.com:: โปรแกรมแสดงแม่สูตรคูณ </title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <script language="JavaScript">
 function show()
 {
  var number = document.getElementById("number").value;
  var objDiv = document.getElementById("divShow");
  for(var i = 1; i<=12; i++)
  {  
   objDiv.innerHTML += number + " x " + i + " = " +  parseInt(number) * i + "< br  />"; // tag br ใน blog มันเขียนติดกันไม่ได้ แก้ให้มันติดกันด้วยนะครับ -*-
 }
 }
 </script>
 </head>
 <body>
 สูตรคูณแม่ <input type="text" name="number" id="number"> <input type="button" value="แสดงแม่สูตรคูณ" onclick="show()">
 <div id="divShow"></div>
 </body>
</html>

ผลลัพธ์

ไว้ผมจะมาอธิบายโปรแกรมทีหลังครับ

adding website address bar icon or favicon

2010-09-29T13:35:00.000+07:00

การทำ icon บน address bar ของ web หรือที่เรียกกันว่า favicon

ส่วนวิธีทำก็ง่ายแสนง่าย
ให้เราหารูปภาพที่เป็น .ico ขนาดภาพสัก 16x16 px หรือ 32x32 px ก็ได้ครับ
เมื่อได้ภาพเรียบร้อยแล้วก็ อัพเข้า server

แล้วก็เพิ่ม tag ตัวนี้เข้าไปในหน้าเว็บ
<link rel="shortcut icon" href="ชื่อไอคอน.ico">
ให้ tag นี้อยู่ภายใต้ tag <head>...</head> นะครับ

ตัวอย่าง


<html>
<head>
<link rel="shortcut icon" href="favicons.ico">
</head>
<body>
step-juice:: adding website address bar icon or favicon
</body>
</html>

จากตัวอย่างไฟล์รูปภาพของผมมีชื่อว่า favicons.ico ซึ่งอัพไว้นอกสุด ที่เดียวกับไฟล์เว็บเลยครับ
ใส่ part ของรูปภาพให้ถูกต้องด้วยนะครับ

รูปตัวอย่าง

บทความนี้ก็มีเพียงเท่านี้ครับสวัสดีครับ

จำลอง ระบบ tracking ด้วย google map api

2010-09-27T17:38:00.001+07:00

ผมอยากจะเขียนเกี่ยวกับ google map มานานแล้ว
แต่ไม่มีเวลาสักที ก็เลยตั้งใจว่าวันนี้ยังไงๆ ก็ต้องเขียนให้ได้
แต่ไม่รู้จะเขียนเรื่องอะไร พอคิดได้ ก็นึกชื่อบทความไม่ออก ^^"
เอาชื่อนี้ไปก่อนก็แล้วกัน

ในบทความนี้ ผมจะแนะนำเทคนิคที่จะนำไปประยุกต์ ใช้กับระบบ GPS tracking ได้
หวังว่าจะเป็นแนวทาง เป็นประโยชน์กับผู้ที่กำลังศึกษาเรื่องนี้ได้บ้าง

เพื่อให้เห็นภาพ เรามาดูภาพกันก่อนเลย -*-

สังเกตทางขวามือครับ จะมีปุ่ม UP DOWN LEFT RIGHT ฮ่าๆๆๆ
เป็นปุ่มที่ทำให้ตัว marker หรือตัวหมุดแดงวิ่งนั้นเอง อิอิ ^^
จำลองว่ารถวิ่งอะไรแบบนั้น แล้วลองมาดูที่แผนที่ google map ครับ
จะเห็นว่ามีเส้นม่วง ๆ ลากไปมา นั้นเป็นเส้นที่บอกว่า หมุดวิ่งไปตรงไหนบ้าง
ก็คือสมมุติว่ารถวิ่งไปตรงไหนบ้าง นั้นแหละครับ แบบนี้พอจะนึกภาพออกไหมครับ
ในตัวอย่างนี้ แผนที่สามารถเลื่อนตาม marker หรือหมุดแดง ได้ด้วย
หาก marker หรือ หมุดแดง วิ่งออกนอกขอบเขตบนแผน ณ ขณะนั้น
คือวิ่งหลุดออกขอบ อ่ะครับ แผนที่จะ pan ตาม จะว่ายังไงล่ะ ต้องลองเล่นดูอ่ะครับ ^^

งั้นเรามาดู code กันเลย ^^

ไฟล์ map.js (เป็นไฟล์ javascript)


var map;
var marker;

 function setup_map() 
  {
    if (GBrowserIsCompatible()) 
   {
   map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.setCenter(new GLatLng(14.902321826141808,100.986328125), 10);
   var setPosition = new GLatLng(14.902321826141808, 100.986328125);
   //var icon01 = i_icon("img/icon62.png");
   //marker    = new GMarker(setPosition,{icon:icon01});
   marker    = new GMarker(setPosition);
   map.addOverlay(marker);

    GEvent.addListener(map,"click", function(overlay, latlng) { 
     if (latlng) { 
      map.clearOverlays();
      var myHtml = "Latitude : " +  latlng.lat() + "
 Longitude : " +  latlng.lng();  
      document.getElementById("hid_lat").value =  latlng.lat()    ;
      document.getElementById("hid_lng").value =  latlng.lng()  ; 
      var setPosition = new GLatLng(   latlng.lat()  , latlng.lng());
      var icon01 = i_icon("img/icon62.png");
      //marker    = new GMarker(setPosition,{icon:icon01});
      marker    = new GMarker(setPosition);
      map.addOverlay(marker);
     }
    });
    }
    }

function i_icon(part)
{
 var icon = new GIcon(); 
    icon.image = part;
    icon.iconSize = new GSize(27, 27);
    icon.iconAnchor = new GPoint(6, 10);
 return icon;
} 

var points = new Array();
var index = 0;
function line(latlng)
{
 points[index] = latlng;
 var lines = new GPolyline(points)
 map.addOverlay(lines);
 index += 1;
}

function out_panto(latlng)
{
 var bounds = map.getBounds();
 var northEast = bounds.getNorthEast();
 var southWest = bounds.getSouthWest();

 var up = northEast.lat();
 var right = northEast.lng();
 var left = southWest.lng();
 var down = southWest.lat();

 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();

 if((lat > up) || (lat < down) || (lng > right) || (lng < left) )
 {
  map.panTo(latlng);
 }
}

function up()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng((lat + 0.08),lng);
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function right()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng(lat,(lng + 0.08));
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function left()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng(lat,(lng - 0.08));
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function down()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng((lat - 0.08),lng);
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

var run=0;
function cre_arr(lat,lng)
{
 var objDiv = document.getElementById("objDiv");
 var text = "arr["+ run +"] = new GLatLng("+lat+","+lng+")<br/>";
 objDiv.innerHTML += text;
 run ++;
}

ไฟล์ index.html


<HTML>
 <HEAD>
  <TITLE> google map</TITLE>
 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAtXdWMLpEcIkWX8leMQ2VDhRPy7m0Y_j0naXG6P2DwVJc1O6ImBTQOdMKRSvB7KM6CSNKCNp0zOchUw"
            type="text/javascript"></script>
<script type="text/javascript" src="map.js" > </script> 
 </HEAD>

 <BODY onload="setup_map()">
<table>
<tr>
 <td>  
  <div id="map" style="width: 500px; height: 387px"></div> 
 </td>
 <td>
  <TABLE>
   <TR align="center">
    <TD></TD>
    <TD><INPUT TYPE="button" value="UP" onclick="up()"></TD>
    <TD></TD>
   </TR>
   <TR>
    <TD><INPUT TYPE="button" value="LEFT" onclick="left()"></TD>
    <TD></TD>
    <TD><INPUT TYPE="button" value="RIGHT" onclick="right()"></TD>
   </TR>
   <TR>
    <TD></TD>
    <TD><INPUT TYPE="button" value="DOWN" onclick="down()"></TD>
    <TD></TD>
   </TR> 
  </TABLE>
 </td>
</tr>
</table>

  <INPUT TYPE="hidden" id="hid_lat" NAME="hid_lat" value="0">
  <INPUT TYPE="hidden" id="hid_lng" NAME="hid_lng" value="0">

 <div id="objDiv"></div>

 </BODY>
</HTML>

เดี๋ยวผมจะมาอธิบายโค้ดทีหลังนะครับ
ถ้าใครยังไม่มีแผนที่ของ google map ให้ไปดูวิธีเรียกใช้ google map ได้ที่ลิงค์ด้านล่างนี้ครับ
การนำ Google Map มาใช้ใน 4 ขั้นตอน

Javascript switch และ break

2010-09-24T19:29:00.000+07:00

คำสั่ง Switch
- เป็นการเปรียบเทียบค่า เพื่อเลือกดำเนินการตามทางเลือก
จากหลายๆ ทาง จะคล้ายๆกับคำสั่ง IF แต่มีความสับซ้อนน้อยกว่า ^^

เอาล่ะเรามาดูตัวอย่างการใช้ switch กัน


<html>
 <head>
  <title> step-juice.blogspot.com switch และ break  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
 function show()
 {
  var m = document.getElementById("m").value;
  var objDiv = document.getElementById("divShow");
  switch(m)
  {
   case "มกราคม":
   case "มีนาคม":
   case "พฤษภาคม":
   case "กรกฏาคม":
   case "สิงหาคม":
   case "ตุลาคม":
   case "ธันวาคม":
    objDiv.innerHTML = "เดือนนี้มี 31 วันจ้า";
   break;

   case "เมษายน":
   case "มิถุนายน":
   case "กันยายน":
   case "พฤศจิกายน":
    objDiv.innerHTML = "เดือนนี้มี 30 วันจ้า";
   break;
  }
 }
</script>
 </head>
 <body>
  เดือน <input type="text" name="m" id="m"><input type="button" value="ตกลง" onclick="show()">
  <div id="divShow"></div>
 </body>
</html>

ผลลัพธ์ของโปรแกรม

เอาไว้ผมจะมาอธิบายโปรแกรมให้ฟังทีหลังนะครับ

ลองเอาไปคิดดูเล่นๆ นะครับ ว่าถ้าเขียนโปรแกรมลักษณะนี้
ในรูปแบบ if จะยุ่งยากและซับซ้อนแค่ไหน ลองนำ code ไปใช้งานดูนะค๊าบ
แล้วพบกันใหม่ :)

Javascript If Else

2010-09-24T13:56:00.000+07:00

การเลือกทำ if...else

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


<html>
 <head>
  <title> Step-Juice Javascript If else </title>
 </head>
 <body>
 <script language="JavaScript">
  if(3 > 2) // 3 > มากกว่า 2 จริงป่าว
   alert("true"); // ถ้าเป็นจริง alert คำว่า true ออกมา
 </script>
 </body>
</html>

คำสั่ง else ใช้ร่วมกับคำสั่ง if เมื่อต้องการให้ทำคำสั่งบางอย่างในกรณีที่เงื่อนไข เป็นเท็จ
แบบว่าถ้าเงื่อนไขเป็นจริง ให้ทำคำสั่งหนึ่ง แต่ถ้าเป็นเท็จ ก็ให้ทำอีกคำสั่งหนึ่ง เช่น


<html>
 <head>
  <title> Step-Juice Javascript If else </title>
 </head>
 <body>
 <script language="JavaScript">
  if(3 < 2) // 3 น้อยกว่า 2 ใช่หรือไม่ แน่นอนว่าไม่จริง -*-
   alert("true"); // จริงให้ alert คำว่า ture
  else 
   alert("false"); // เท็จให้ alert คำว่า false 
 </script>
 </body>
</html>

คำสั่ง else if ใช้ร่วมกับ คำสั่ง if ใช้ในกรณีที่เรามีหลาย ๆ เงื่อนไข และแต่ล่ะเงื่อนไข
ต้องการให้ทำคำสั่ง ที่แตกต่างกัน

เอาล่ะต่อไปมาดูตัวอย่างที่ใช้หากินเกี่ยวกับ else if กันเลย ฮ่ะๆๆ นั้นก็คือโปรแกรมคำนวณเกรดนั้นเอง


<html>
 <head>
  <title> step-juice.blogspot.com โปรแกรมคำนวณเกรด  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
 function calculateGrade()
 {
  var g = document.getElementById("g").value;
  var objDiv = document.getElementById("showGrade");
  if(g >= 80)
   objDiv.innerHTML = "ได้เกรด A";
  else if(g >= 70)
   objDiv.innerHTML = "ได้เกรด B";
  else if(g >= 60)
   objDiv.innerHTML = "ได้เกรด C";
  else if(g >= 50)
   objDiv.innerHTML = "ได้เกรด D";
  else
   objDiv.innerHTML = "ได้เกรด F";
 }
</script>
 </head>
 <body>
  เกรด <input type="text" name="g" id="g"><input type="button" value="คำนวณเกรด" onclick="calculateGrade()">
  <div id="showGrade"></div>
 </body>
</html>

อธิบายโปรแกรม
บรรทัดที่ 6 function calculateGrade() เป็นการสร้างฟังก์ชั่นสำหรับคำนวณเกรด ขึ้นมา
เอาไว้ผมจะเขียนอธิบายเรื่อง function ในบทความหน้าครับ ^^
มาดูต่อกันในบรรทัดที่ 8

var g = document.getElementById("g").value;

บรรทัดนี้เป็นการเข้าไปอ่านค่าใน Element ที่เป็น TextBox และเก็บค่าไว้ในตัวแปร g

มาต่อที่บรรทัดที่ 9

var objDiv = document.getElementById("showGrade");

บรรทัดนี้คือการเข้าถึง Element ที่เป็น Tag Div เพื่อกำหนดค่าให้มันแสดงเกรดออกมา
หากไม่เข้าใจ บรรทัดที่ 8-9 ให้กลับไปดูในบทความที่ชื่อว่า Javascript การแสดงข้อความใน Tag Div ได้ครับ

เอาล่ะต่อไปเรามาดูประเด็นหลักของเราดีกว่า ก็คือเจ้าตัว else if นั้นเอง
ในบรรทัดที่ 10

if(g >= 80)

เช็คว่า g มีค่ามากกว่า หรือ เท่ากับ 80 ใช่หรือไม่ หากใช่จะแสดงข้อความ ได้เกรด A

ต่อไปเรามาดูกันที่บรรทัด 12

else if(g >= 70)

นี่คือเงื่อนไขถัดมา จะทำในกรณีที่เงื่อนไขก่อนหน้าไม่เป็นจริง คือถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า
หรือ เท่ากับ 70 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด B

มาถึงตรงนี้ทุกคนคงเข้าใจกันหมดแล้ว ^^ ผมคงไม่ต้องอธิบายในเงื่อนไขต่อๆไป :p
งั้นขอข้ามไปที่บรรทัด 24

เกรด <input type="text" name="g" id="g"><input type="button" value="คำนวณเกรด" onclick="calculateGrade()">

เห็นที่ผมไฮไลท์เป็นสีแดงไหมครับ ให้ดูตรงคำว่า onclick="calculateGrade()"
นี่เป็น Event ของ button หรือ ปุ่ม นั้นแหละครับ ใช้เมื่อต้องการให้ทำคำสั่งบางอย่าง
เมื่อมีการคลิกที่ปุ่ม ในที่นี้ผมต้องการให้ทำ function calculateGrade() หรือ function สำหรับ คำนวณเกรด
ที่เราเขียนขึ้นมานั่นเอง

เอาล่ะทีนี้เรามารันโปรแกรมดูกันดีกว่า

จากภาพผมกรอกตัวเลข 79 เข้าไปใน TextBox จากนั้นกดปุ่มคำนวณเกรด
ผลลัพธ์แสดงออกมาด้านล่างเป็นคำว่า ได้เกรด B
ตื่นเต้น!! จริง ๆ เลยครับ เขียนโปรแกรมนี่มันสนุกจริงๆ ฮ่าๆๆ
ลองเปลี่ยนตัวเลขเป็นเลขอื่น แล้วกดปุ่มคำนวณเกรด ดูนะครับ

เอาล่ะสำหรับบทความ Javascript If Else ก็คงจบเพียงเท่านี้
พบกันใหม่บทความหน้าครับ

Javascript การแสดงข้อความใน Tag Div

2010-09-20T23:56:00.000+07:00

ก่อนที่เราจะเริ่มเขียน Javascript ผมอยากจะแนะนำวิธีการ
แสดงข้อความในตำแหน่งที่เราต้องการก่อน เพื่อประโยชน์ในการ
แสดงผลลัพธ์ของ Javascript

การแสดงข้อความตรงตำแหน่งที่ต้องการ โดยการใช้ Tag div ให้เป็นประโยชน์
คือให้สร้าง Tag div ไว้ในตำแหน่งที่ต้องการแสดงข้อความ
จากนั้นจึงใช้ Javascript เขียนข้อความลงไปใน Tag div

เอาล่ะมาดูตัวอย่างกันเลย


<html>
<head>
<title>if else  :: step-juce.blogspot.com </title>
<script language="JavaScript">
 function displayText()
 {
  document.getElementById("showText").innerHTML = "HELLO";
 }
</script>
</head>
<body onload="displayText()">
 <hr />
 <div id="showText" ></div>
 <hr />
</body>
</html>

ผลลัพธ์

อธิบายโปรแกรม
- บรรทัดที่ 4-9 มี function ที่ชื่อว่า displayText() ซึ่งเป็น
ฟังก์ชั่นไว้สำหรับแสดงข้อความว่า HELLO ออกมา ไว้ผมจะอธิบายความรู้เรื่อง function
ใน Javascript อีกครั้งในคราวหน้า ตอนนี้ให้เรามาดูที่บรรทัดที่ 7

document.getElementById("showText").innerHTML = "HELLO";

นี้คือรูปแบบหนึ่งของ DOM(Docment Object Model) เป็นข้อกำหนดซึ่งทำให้เราเข้าถึง
Element ต่างๆในเอกสาร HTML เราสามารถเข้าถึง Element เพื่ออ่าน หรือแก้ไขข้อความ
ของมันได้ เช่นถ้าต้องการเข้าถึง Element div ซึ่งมี ID คือ showText จะเขียนโค้ดดังนี้

objDiv = document.getElementById("showText");

เมื่อต้องการเขียนข้อความลงไปภายใน Tag div ก็ให้เรากำหนดค่าให้กำพร็อพเพอร์ตี้ innerHTML แบบนี้

objDiv = document.getElementById("showText");
objDiv.innerHTML = "HELLO";
หรือ จะเขียนสั้นๆ แบบนี้ก็ได้
document.getElementById("showText").innerHTML = "HELLO";

ต่อไปเรามาดูบรรทัดที่ 11

<body onload="displayText()">

ดูที่ Atrribute onload คือ Event ที่จะทำงานก็ต่อเมื่อ
มีการเรียกใช้หน้าเว็บเพจ onload="displayText()" จึงเป็นการเรียกใช้
function displayText() ให้ทำงาน ซึ่งก็คือ ฟังก์ชั่นสำหรับแสดง ข้อความนั้นเอง ^^"

PHP switch และ break

2010-09-20T22:01:00.000+07:00

คำสั่ง Switch
- เป็นการเปรียบเทียบค่า เพื่อเลือกดำเนินการตามทางเลือก
จากหลายๆ ทาง จะคล้ายๆกับคำสั่ง IF แต่มีความสับซ้อนน้อยกว่า

มาดูโค้ดกันดีกว่า -*-

<?
$color = "red";
switch($color){ //รับค่าที่จะใช้ในการเปรียบเทียบ
 case "red": //จะทำเมื่อตัวแปร $color = "red"
  echo "TEXT";
  break;
 case "blue": //จะทำเมื่อตัวแปร $color = "blue"
  echo "TEXT";
  break;
 case "green": //จะทำเมื่อตัวแปร $color = "green"
  echo "TEXT";
  break;
}
?>

ผลลัพธ์
- ตัวแปร $color มีค่าเท่ากับ "red" ซึ่งตรงกับ case "red"
ผลลัพธ์จริงแสดงคำว่า TEXT เป็นตัวอักษรสีแดงออกมา

TEXT

มาดูอีกตัวอย่างกันดีกว่า

<?
$m = "มกราคม";
  switch($m)
  {
   case "มกราคม":
   case "มีนาคม":
   case "พฤษภาคม":
   case "กรกฏาคม":
   case "สิงหาคม":
   case "ตุลาคม":
   case "ธันวาคม":
  echo "เดือนนี้มี 31 วันจ้า";
   break;

   case "เมษายน":
   case "มิถุนายน":
   case "กันยายน":
   case "พฤศจิกายน":
  echo "เดือนนี้มี 30 วันจ้า";
   break;
  }
?>

ดูตามตัวอย่างคงเห็นภาพนะครับว่าเมื่อใดควรใช้ if else
เมื่อใดควรใช้ switch break

ลองเอาไปเล่นดูนะครับ ^^

PHP Class Connect Database

2010-09-15T21:33:00.000+07:00

เพิ่ม ลบ แก้ไข ข้อมูล ด้วยคลาส กับ PHP
เป็นคลาส ที่ผมคิดค้นขึ้นมา ซ้ำกับใครก็โทษทีนะค๊าบ เอาล่ะเรามาเริ่มกันเลย

- config.php

<?
DEFINE("_host",  "localhost" ); // host name ชื่อโฮสต์
DEFINE("_db_user",  "root" ); // database user ชื่อผู้ใช้งานดาต้าเบส
DEFINE("_db_pass",  "1234" ); // database pass รหัสผ่าน
DEFINE("_db_name",  "test" ); // database name ชื่อดาต้าเบส
?>

- J_MySQL.php

<?
/********************************************************************
(-/\-)
Create by :: Nattapong Pradabsook, Surin, Thailand
Date  :: 29/08/2010
Good luck :']
********************************************************************/


class J_SQL
{

var $db_host;
var $db_user;
var $db_pass;
var $db_name;
var $db_connect;


function J_SQL()
{
$this->db_host = _host;
$this->db_user = _db_user;
$this->db_pass = _db_pass;
$this->db_name = _db_name;
}

//ฟังก์ชั่นติดต่อฐานข้อมูล
function J_ConnectDB()
{
$this->db_connect  = @mysql_connect($this->db_host,$this->db_user,$this->db_pass) or die(mysql_error());
}

//ฟังก์ชั่นเลือกฐานข้อมูล
function J_SelectDB()
{
@mysql_select_db($this->db_name) or die(mysql_error());
}

//ฟังก์ชั่นที่ทำให้ MySQL แสดงอักขระเป็น tis620
function set_char_tis620()
{
$cs1 = "SET character_set_results=tis620";
$cs2 = "SET character_set_client = tis620";
$cs3 = "SET character_set_connection = tis620";
@mysql_query($cs1) or die('Error query: ' . mysql_error());
@mysql_query($cs2) or die('Error query: ' . mysql_error());
@mysql_query($cs3) or die('Error query: ' . mysql_error());
}

//ฟังก์ชั่นที่ทำให้ MySQL แสดงอักขระเป็น utf8
function set_char_utf8()
{
$cs1 = "SET character_set_results=utf8";
$cs2 = "SET character_set_client = utf8";
$cs3 = "SET character_set_connection = utf8";
@mysql_query($cs1) or die('Error query: ' . mysql_error());
@mysql_query($cs2) or die('Error query: ' . mysql_error());
@mysql_query($cs3) or die('Error query: ' . mysql_error());
}

//ฟังก์ชั่นเรียกดูข้อมูลในฐานข้อมูล  คืนค่าเป็น อะเรย์
function J_Select($fieldNames,$tableName)
{
$sql = "SELECT ".$fieldNames." FROM ".$tableName;
$rs = @mysql_query($sql) or die(mysql_error());
while($row = @mysql_fetch_array($rs))
{
$array[] = $row;
}
return $array;
}


//ฟังก์ชั่นเพิ่มข้อมูลลงในฐานข้อมูล
 function J_Insert($fieldsAndValues,$tableName)
 {
   $sql = "INSERT INTO ".$tableName;
  $f = "(";
  $val = " VALUES(";
  for($i = 0 ; $i < count($fieldsAndValues);$i++)
  {
   $f .= key($fieldsAndValues);
   if($i != (count($fieldsAndValues)-1))
    $f .= ",";
   $val .= "'".$fieldsAndValues[key($fieldsAndValues)]."'";
   if($i != (count($fieldsAndValues) - 1))
    $val .= ",";
   next($fieldsAndValues);
  }
  $f .= ")";
  $val .= ")";
    $sql .= $f.$val;
  return @mysql_query($sql) or die(mysql_error());  
 }
 
//ฟังก็ชั่นปรับปรุงข้อมูลในฐานข้อมูล
 function J_Update($fieldsAndValues,$key,$tableName)
 {
  $sql = "UPDATE ".$tableName." SET "; 
  $w  = "";
  for($i = 0 ; $i < count($fieldsAndValues);$i++)
  {
   $sql .= key($fieldsAndValues)." = '".$fieldsAndValues[key($fieldsAndValues)]."'";
   if($i != (count($fieldsAndValues)-1))
    $sql .= ", ";
   
   if($i == $key[$i])
   {
    $w .= key($fieldsAndValues)." = '".$fieldsAndValues[key($fieldsAndValues)]."'";
    if($i != (count($key)-1))
     $w .= " AND ";
   }   
   next($fieldsAndValues);
  }
   $sql .= " WHERE ".$w;
  return @mysql_query($sql) or die(mysql_error());
 }


//ฟังก์ชั่นทำคำสั่ง sql โดยไม่มีการแสดงผลเช่น INSERT, DELETE, UPDATE
 function J_ExecuteNonQuery($sql)
 {
  @mysql_query($sql) or die(mysql_error());
 }


//ฟังก็ชั่นลบข้อมูลในฐานข้อมูล
 function J_Delete($fieldsAndValues,$tableName)
 {
  $sql = "DELETE FROM ".$tableName; 
  $w  = "";
 for($i = 0 ; $i < count($fieldsAndValues);$i++)
 {
  $w .= key($fieldsAndValues)." = '".$fieldsAndValues[key($fieldsAndValues)]."'";
  if($i != (count($fieldsAndValues)-1))
   $w .= " AND ";

    next($fieldsAndValues);
  }
    return @mysql_query($sql) or die(mysql_error());
 }


 //ฟังก์ชั่นปิดการเชื่อมต่อฐานข้อมูล
 function J_Close()
 {
  @mysql_close($this->db_connect);
 }

?>

สร้างตารางที่มีฟีลด์ตามนี้ครับ

ฟิลด์

name

phone

เมื่อสร้างเสร็จแล้วเราก็มาลุยกันเลย
เริ่มต้นด้วยการ INSERT

- insert.php

<?
include("config.php"); // เรียกไฟล์ config.php เข้ามา
include("J_MySQL.php"); // เรียกไฟล์ J_MySQL.php เข้ามา

$juice = new J_SQL; //สร้างออบเจ็ค J_SQL ขึ้นมา

//เรียกใช้เมธอด J_ConnectDB() หรือจะเรียกว่าฟังก์ชั่นก็ได้
//งั้นเรียกฟังก์ชั่นดีกว่า ต่อไปนี้ขอเรียกเมธอด ว่าฟังก์ชั่นก็แล้ว -*-
//ส่วนฟังก์ชั่น แต่ล่ะตัวคืออะไรให้กลับไปดูที่ไฟล์ J_MySQL.php

$juice->J_ConnectDB();
$juice->J_SelectDB();  // เรียกใช้ฟังก์ชั่น J_SelectDB()
$juice->set_char_utf8(); // เรียกใช้ฟังก์ชั่น set_char_utf8()

// ทีเด็ดอยู่ที่ตรงนี้ครับ ฮ่าๆๆๆๆ

$ins["id"] = "1";
$ins["name"] = "juice";
$ins["phone"] = "044-444288";
$ins["email"] = "info@step-juice.com";

/**
ที่เห็นอยู่ด้านบนก็คือ Array แบบกำหนด Key นั้นเอง
คงเดาออกแล้วใช้ไหมครับว่าผมใช้ Array ทำอะไร
สังเกตว่า Key ของ Array ที่มีชื่อว่า $ins นั้นมีชื่อตรงกับ
ฟิลล์ใน Tabale tbl_test เลยใช่ไหมครับ
แล้วค่าใน Array ก็คืออ.. ใช่แล้วว คือค่าที่เราจะ Insert เข้าไปนั้นเอง
**/

/**
เอาล่ะมาดู Code กันต่อมันยังไม่จบ -*-
ต่อไปเรียกใช้ฟังก์ชั่น J_Insert() มี อาร์กิวเมนต์ สองตัว
ตัวแรกรับค่าเป็น Array ในที่นี้ใส่ Array ที่ชื่อว่า $ins นั่นเอง
ตัวที่สองรับค่าเป็น String ให้เราใส่ชื่อ Table เข้าไป
ในที่นี้ Table ของเรามีชื่อว่า "tbl_test" นั่นเอง ^^
**/

$juice->J_Insert($ins,"tbl_test");
$juice->J_Close();  // ปิดการเชื่อมต่อ Database
?>

- select.php

<?
include("config.php");
include("include/J_MySQL.php");

$juice = new J_SQL;
$juice->J_ConnectDB();
$juice->J_SelectDB();
$juice->set_char_utf8();

$fieldName = "name,email";
$tableName = "tbl_test";
$result = $juice->J_Select($fieldName,$tableName);
if(count($result) > 0){
foreach($result as $read)
{
echo "name :: ".$read["name"]." <br / > "; // tag br  มันพิมพ์ยากแท้ใน bloger -*- แก้ให้ถูกด้วยนะคับ
echo "email :: ".$read["email"]." <br / > ";
}
}
$juice->J_Close();
?>

- update.php

<?
include("config.php");
include("include/J_MySQL.php");

$juice = new J_SQL;
$juice->J_ConnectDB();
$juice->J_SelectDB();
$juice->set_char_utf8();

$ins["id"] = "1";
$ins["email"] = "info@step-juice.blogspot.com"; //ค่าที่ต้องการ Update ในฟิลล์ Email
$key = array(0);
//$key = array(0); หมายถึงใช้ array ตัวที่ 0 เป็นเงื่อนไขในการ WHERE
//ในที่นี้จะได้เป็น WHERE id = 1; ลองเล่นดูครับ
$juice->J_Update($ins,$key,"tbl_test");
$juice->J_Close();
//อัพเดตเสร็จให้กลับไป select ข้อมูลขึ้นมดูอีกทีที่ ไฟล์ select.php เลยครับ
?>

- delete.php

<?
include("config.php");
include("include/J_MySQL.php");

$juice = new J_SQL;
$juice->J_ConnectDB();
$juice->J_SelectDB();
$juice->set_char_utf8();

$del["id"] = "1"; //เงื่อนไขที่ต้องการ delete ในฟิลล์ id
$del["email"] = "info@step-juice.blogspot.com"; //เงื่อนไขที่ต้องการ delete ในฟิลล์ Email

$juice->J_Delete($del,"tbl_test");
//ในที่นี้จะได้เป็น DELETE FROM tbl_test WHERE id = '1' AND email = 'info@step-juice.blogspot.com';

$juice->J_Close();

//ลบเสร็จให้กลับไป select ข้อมูลขึ้นมดูอีกทีที่ ไฟล์ select.php เลยครับ
?>

ถ้าไม่เข้าใจตรงไหนถามได้เลยนะครับ
จะพยายามแวะมา อธิบายเพิ่มเติม ^^"

เพิ่มแถวใน GridView ด้วยการรับค่าจาก Form โดยใช้ Session และ Data Table

2010-09-12T16:18:00.000+07:00

หน้า Form

สร้าง TextBox ที่มี ID ชื่อว่า txtQ

สร้าง Button 2 ตัว ที่มี ID ดังนี้
1. btnAdd
2. btnClear

สร้าง GridView ที่มี ID ชื่อว่า gvShowList

ตัวอย่างหน้าเว็บ

หน้า Code


        protected void btnAdd_click(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr;
            DataTable sessDataTable = new DataTable();            

            sessDataTable.Columns.Add("ID");
            sessDataTable.Columns.Add("QUESTION");
            
            if (Session["question"] != null)
            {
                sessDataTable = (DataTable)(Session["question"]);
                dr = sessDataTable.NewRow();
                dr["ID"] = gvShowList.Rows.Count + 1;
                dr["QUESTION"] = txtQ.Text;
                sessDataTable.Rows.Add(dr);                
            }
            else
            {
                dr = sessDataTable.NewRow();
                dr["ID"] = "1";
                dr["QUESTION"] = txtQ.Text;
                sessDataTable.Rows.Add(dr);
                Session["question"] = sessDataTable;
            }
            gvShowList.DataSource = sessDataTable;
            gvShowList.DataBind();
            gvShowList.Visible = true;
        }

        protected void btnClear_click(object sender, EventArgs e)
        {
            Session["question"] = null;
            gvShowList.DataSource = null;
            gvShowList.DataBind();
        }

รูปตัวอย่าง

extension php_curl.dll ใช้งานไม่ได้

2010-05-27T17:07:00.000+07:00

Fatal error: Call to undefined function curl_init()

วิธีแก้

1. เข้าไปที่ Appserv\php5
- Copy File libeay32.dll และ ssleay32.dll
- นำ File ทั้งสองไปวางไว้ที่ C:\Windows\System32
2. เปิด Extension ที่ C:\Windows\php.ini
- เปิดไฟล์ php.ini ขึ้นมา
- ค้นหาคำว่า extension=php_curl.dll
- ลบเครื่องหมาย ; หน้าคำว่า extension=php_curl.dll ออก
3. Restart Service Apache

เอาข้อมูลจาก Database ใส่ DropDownList ด้วย C#.NET

2010-05-18T14:49:00.000+07:00

สร้าง Drop Down List ขึ้นมาตัวหนึ่งชื่อว่า DropDownList1



Select template


using System.Data.SqlClient;

SqlConnection objConn;
       
private void Form1_Load(object sender, EventArgs e)
{
 String strConnString;
 strConnString = "Server=NASA;Uid=sa;PASSWORD=1234;database=db_test;Max Pool Size=400;Connect Timeout=600;";
 objConn = new SqlConnection(strConnString);
 objConn.Open();

 DataSet ds = new DataSet();
 SqlDataAdapter da1 = new SqlDataAdapter("SELECT * FROM tbl_list", objConn);
 da1.Fill(ds);

 if (!IsPostBack)
 {
   for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
   {
   DropDownList1.Items.Add(new ListItem(ds.Tables[0].Rows[i][1].ToString(), ds.Tables[0].Rows[i][0].ToString()));
   }
 }

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
 {
        //code ที่ต้องการเขียนเมื่อมีการเลือกข้อมูลใน Listbox
 }


}

เดี๋ยวค่อยมาแต่งคำพูดกันอีกที เขียนไว้ก่อน อิอิ