Lin Lin Dev

         ผมได้เห็นหลายๆเว็บไซต์ที่ใช้บริการติดแผนที่ของ Google หรือ Google Maps API ก็เลยมีความคิดที่อยากลองทำบ้าง เผื่ออนาคตอาจได้นำมาใช้งานบ้างครับ (เพียงแต่ตอนนี้ยังไม่มีโอกาสเอามาใช้งาน)  ก็เลยเข้าไปที่เว็บ https://developers.google.com/maps/documentation/javascript/tutorial ก็ได้ลองทำตัวอย่างแรกจากหน้านี้แหละครับ จากนั้นก็ค่อยๆต่อยอดจนได้ผลลัพธุ์ที่ต้องการ และจะนำเสนอให้ท่านได้ชมกันครับ ^_^ และอยากจะบอกDocumentเขียนได้ดีมากครับ และมีโค๊ดตัวอย่างประกอบดีมากๆเลยครับ แนะนำให้เข้าไปศึกษาตามลิงค์ที่กล่าวถึงข้างต้นได้เลยครับ   ขออธิบายนิดนึงครับ ว่า Google Map API คือ อะไร         Google Maps API คือ บริการของ Google อีกรูปแบบหนึ่ง เราสามารถนำข้อมูลของ Google Maps มาแสดงในหน้าเว็บเพจของเราตามที่เราต้องการ เช่น สามารถกำหนดตำแหน่งที่ตั้ง, สถานที่, ที่นัดหมาย เป็นต้น โดยเราสามารเรียกใช้ข้อมูลและMethodต่างๆที่Googleได้จัดเตรียมไว้ในแล้วหรือที่เราเรียกว่า API (Application Programming Interface) เอาล...

lเ        ได้เวลาอัพเดทบทความอีกแล้วครับ วันนี้จะสอนเขียน jQuery เพื่อ ป้องกันการCopyเนื้อหาในเว็บไซต์ ของเราไปเผยแพร่ที่อื่น ซึ่งเราจะ เขียนคำสั่งไม่ให้Copyตัวอักษร และ ห้ามไม่ให้คลิกขวา ครับ แต่ปัญหาของ jQuery คือ jQuery มันคือ Javascript Framwork ซึ่งเราสามารถเปิด/ปิดการทำงานของสคริปต์ได้จากโปรแกรมท่องเนตหรือ Web Browser ของเรา ดังนั้น ถ้าหากมีการปิดการทำงานของ JavaScript เนื้อหาในเว็บไซต์ของเราก็สามารถ Copyข้อมูล ได้เช่นกัน ดังนั้นมันจึงสามารถ ป้องกันการCopyข้อมูล ได้ดีในระดับนึงเท่านั้นครับ         ปัญหาอีกอย่างนึงของสคริปต์ JavaScript คือ การSupportกับBrowser ไม่ว่าจะเป็น Firefox , Chome , IE จะมีบางคำสั่งที่ไม่สามารถทำงานได้ครบทุกๆ Browser เนื่องจาก Browser แต่ละเจ้า ใช้เอนจินต์ของใครของมัน ไม่มีมาตรฐานที่แน่นอน ทำให้คำสั่ง JavaScript รวมถึงคำสั่ง CSS บางคำสั่ง รองรับเฉพาะบาง Browser เท่านั้นครับ และสคริปต์ที่ผมจะสอนต่อไปนี้ ผมรับรองว่า Support กับทุกๆ Browser 100% ครับ ฟังกชั่นป้องการการคลิกขวาเพ...

ตัวอย่าง การแสดงข้อมูลสมาชิกใน Tooltip       บทความก่อนหน้า ผมได้ สอนทำTooltipสุดเจ๋ง ด้วยjQuery   ซึ่งเป็น Tooltip แบบง่ายๆแต่ไม่ธรรมดาไปแล้ว คราวนี้เราจะนำมาประยุกต์ใช้ร่วมกับภาษา PHP และฐานข้อมูล MySQL กันบ้างครับ โดยเราจะใช้ AJAX API ของ jQuery เพื่อร้องขอ(Request)ข้อมูลของสมาชิกที่ต้องการ มาแสดงใน Tooltip ครับ เราจะนำโค๊ด jQuery จากในบทความก่อนหน้า ( สอนทำ Tooltip สุดเจ๋ง ด้วย jQuery ) มาดัดแปลงโค๊ดนิดหน่อยครับ       มาดูผลลัพธุ์ของโปรแกรมกันก่อนเลยครับ -> ตัวอย่าง Tooltip AJAX 1.อันดับแรกผมอยากให้ท่านดูโครงสร้างของเทเบิล tb_member ของผมก่อนครับ CREATE TABLE `tb_member` ( `mb_id` int(10) NOT NULL auto_increment, `mb_name` varchar(50) NOT NULL, `mb_email` varchar(50) NOT NULL, `mb_tel` varchar(30) NOT NULL, `mb_address` text NOT NULL, `mb_user` varchar(20) NOT NULL, `mb_pass` varchar(20) NOT NULL, `mb_image` varchar(20) default NULL, `mb_date` date default NULL, PRIMARY KEY (`mb_id`) ) ...

แสดงข้อความ Tooltip       Tooltip คือ กล่องข้อความ สำหรับอธิบายรายละเอียดของข้อความ ที่มีขนาดสั้นหรือคลุมเครือยากต่อความเข้าใจ เราจะเห็น Tooltip ได้ทั่วไปของเอกสาร HTML โดยกำหนดที่ Attibute Title  เช่นใน Link Tag เราจะเขียนดังนี้ <a  href="#" title="This is Tooltip">Tooltip</a> และ Tag อื่น เช่น div,span,p,h1,h2 เราก็สามารถสร้าง Tooltip ได้ใน Attribute Title ได้เช่นกัน       แต่ Tooltip ที่มีการแสดงผลแบบเดิมมันดูเชยไปหน่อยครับ ^_^’’ ผมก็เลยเอาjQueryมาประยุกต์ใช้ เพื่อใส่Effectให้มีการแสดงผลตามที่เราต้องการครับ ดูตัวอย่างได้จากที่นี่ครับ ตัวอย่าง Tooltip  ให้สร้างไฟล์ .html และให้ Copy Code นี้ไปใช้เลยครับ

เพิ่มข้อมูลลงในฐานข้อมูลด้วยโปรแกรมDreamweaver       หลังจากที่ผมได้สอนดึงข้อมูลในฐานข้อมูลมาแสดงไปแล้ว  คือ แสดงข้อมูลจากฐานข้อมูล , แสดงและแบ่งหน้าข้อมูล และ แสดงข้อมูลใน Select(List/Menu)       คราวนี้จะสอนเพิ่มข้อมูลลงในฐานข้อมูลบ้างครับ ซึ่งในโปรแกรม Dreamweaver เองก็มีOption จำพวก Insert Record, Update Record, Delete Record อยู่ครับ แต่บทความนี้จะสอนใช้งาน Insert Record ก่อนนะครับ ส่วนที่เหลือจะทยอยสอนในบทความต่อไป       เริ่มกันเลยนะครับ อันดับแรกให้สร้างไฟล์ .php ขึ้นมา 2 ไฟล์ คือไฟล์ add.php และ add_succ.php ไฟล์ add.php -> เราจะสร้างฟอร์มกรอกข้อมูล และให้Dreamweaverสร้างโค๊ดPHP เพื่อประมวลผลและบันทึกข้อมูลลงในฐานข้อมูล ในไฟล์นี้ครับ ...ให้ทำตามขั้นตอนดังนี้ +++ ให้ออกแบบฟอร์มให้มีหน้าตาดังรูป โดยไปที่แถบ Spry แล้วเลือก Input ต่างๆ ดังรูป 1.เลือก Input TextField สำหรับกรอกชื่อสินค้า 2.เลือก Input Select(List/Menu) ให้ทำตามในบทความนี้เลยครับ แสดงข้อมูลใน Select(list/menu) 3.เลือก Input ...