ลองเล่นกับ Google Maps API V.3 : แผนที่แรกของผม

         ผมได้เห็นหลายๆเว็บไซต์ที่ใช้บริการติดแผนที่ของ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)
เอาล่ะครับไม่อยากอธิบายมาก Copy โค๊ดข้างล่างไปลองใช้กันเลยครับ

สอนเขียนสคริปต์jQuery ป้องกันการCopyข้อมูล

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% ครับ

ฟังกชั่นป้องการการคลิกขวาเพื่อCopyข้อมูล พิมพ์Codeดังนี้ ไม่มีอะไรยุ่งยาก และSupportกับทุกๆBrowser

$.fn.notRightClick = function() {//ฟังก์ชั่นปิดการคลิกเมาส์ขวา
        $(this).bind('contextmenu', function(e){
         e.preventDefault();
        return false;
        });
    };

ฟังก์ชั่นป้องการการCopyข้อมูล จากการDragเมาส์ไฮไลท์ตัวอักษรและกดCopyข้อมูล นอกจากนี้ ฟังก์ชั่นนี้ ยังสามารถป้องการกดปุ่ม CTRL+A (เลือกทั้งหมด) ได้อีกด้วย พิมพ์Codeดังนี้

$.fn.disableSelection = function() {//ฟังก์ชั่นปิดการCopyข้อมูล
        return this.each(function() {
            $(this).css({
                '-moz-user-select':'none', //รองรับ firefox
                '-webkit-user-select':'none',  //รองรับ chome,safari browser อื่นๆ ที่ใช้เอนจิน webkit
                '-ms-user-select':'none' //รองรับ IE
            }).each(function() {
                 this.onselectstart = function() {
                    return false;
                };
           });
      });
 };

สอนทำ Tooltip ขั้นเทพ โดยใช้เทคนิค AJAX, PHP และ ฐานข้อมูล MySQL

ตัวอย่าง การแสดงข้อมูลสมาชิกใน 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 สุดเจ๋ง ด้วย jQuery

แสดงข้อความ 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 + Spry (PHP + MySQL)

เพิ่มข้อมูลลงในฐานข้อมูลด้วยโปรแกรม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 TextField สำหรับกรอกจำนวนสินค้า
4.เลือก Input TextField สำหรับกรอกราคาสินค้า
5.เลือก  TextArea สำหรับรายละเอียดของสินค้า
6.ปุ่มเพิ่มสินค้า (โทดที..ลืมติดหมายเลข ^_^'')