วันจันทร์ที่ 24 มีนาคม พ.ศ. 2557

Google Maps Api V3 กับการสร้าง Polyline แบบง่ายๆ



    ผมได้สอนใช้งาน Google map api เวอร์ชั่น 3 มาบ้างแล้ว ศึกษาบทความที่เกี่ยวข้องได้จาก Google Maps API คราวนี้ผมจะสอนสร้างเส้น Polyline บ้างครับ และมีสมาชิกหลายท่าน อยากให้ผมสอนเรื่องนี้เหมือนกัน บทความนี้จะสอนทำ Polyline ให้กับแผนที่แบบง่ายๆกันก่อนครับ
     Polyline จะมีลักษณะเป็นเส้นที่ลากไปเป็นจุดๆ มีประโยชน์ต่อการหาระยะทาง หรือเป็นไกด์บอกเส้นทางไปยังจุดหมายที่เราต้องการ โดยเราสามารถลากเส้นไปตามแผนที่ เพื่อบอกที่อยู่ ที่เราต้องการเดินทางไปได้

    มาดูตัวอย่าง การสร้าง Polylines แบบง่ายๆ กันเลยครับ

วันพฤหัสบดีที่ 13 มีนาคม พ.ศ. 2557

สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 2 (จบ) บันทึกข้อมูลสมาชิกและอัปโหลดรูปสมาชิก

     ต่อเนื่องจากบทความก่อนหน้านี้ที่ผมได้สอน คือ สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form บทความนี้ผมจะสอนใช้ Yii Framework ทำการเขียนคำสั่งบันทึกข้อมูลของสมาชิกลงฐานข้อมูลกับการเขียนคำสั่งอัปโหลดรูปประจำตัวของสมาชิก ไปเก็บไว้ในโฟลเดอร์สมาชิกที่เราสร้างไว้

1.อันดับแรก เข้าไปเปลี่ยนชื่อไฟล์ users.php ใน โฟลเดอร์ models ให้ชื่อ user.php ออกก่อนครับ เพราะผมเจอปัญหาในส่วนของการเซต Scenario ดังนั้นสรุปได้ว่า การตั้งชื่อ model ไม่ควรมี s ต่อท้ายครับ ให้แก้ไขดังรูป


2.ต่อมาเราไปสร้างโฟลเดอร์สำหรับเก็บรูปของสมาชิกครับ ผมจะสร้างในโฟลเดอร์ images ครับ ตั้งชื่อโฟลเดอร์ว่า users ดังรูป

3.สุดท้าย เราจะเข้าไปที่ controllers ชื่อว่า UsersController.php เราจะแก้ไขคำสั่งเดิมในเมธอดชื่อ actionRegister ให้ใช้คำสั่งดังนี้
public function actionRegister() {
        $model = new User;
          $model->setScenario('register');
        if (isset($_POST['Users'])) {
            $model->attributes = $_POST['Users'];
            $userPicFile = CUploadedFile::getInstance($model, 'user_pic'); //สร้าง Instance ให้กับรูปภาพ โดยเรียกใช้คลาส CUploadedFile ที่ Yii สร้างไว้ให้แล้ว
            if (!empty($userPicFile)) {
                $rnd = date('dmYHis'); //สำหรับใช้เป็นชื่อของรูปภาพและสามารถป้องกันการอัปโหลดภาพชื่อซ้ำกัน
                $pictype = end(explode('.', $userPicFile)); //ตัดให้เหลือแต่นามสกุลไฟล์ เช่น jpg ,png,gif
                $picName = "{$rnd}.{$pictype}"; //เอาชื่อกับนามสกุลไฟล์มาเรียงกันใหม่ จะได้ชื่อไฟล์ที่ไม่ซ้ำกับของคนอื่น สามารถป้องกันการอัปโหลดภาพทับกัน
                $model->user_pic=$picName;//Set ชื่อรูปภาพให้กับตัวแปร user_pic เพื่อบันทึกลงในฐานข้อมูล
                $pathUpload = Yii::app()->basePath . '/../images/users/' . $picName;//กำหนด path สำหรับเก็บไฟล์รูปประจำตัว
                $userPicFile->saveAs($pathUpload);//อัปโหลดรูปประจำตัวของสมาชิกไว้ในพาธ images/users/
            }
            if ($model->save()) {//บันทึกลงฐานข้อมูล
               //เมื่อบันทึกข้อมูลเสร็จจะให้ทำอะไรต่อไป ก็แล้วแต่ปุ๊!!! ส่วนผมจะใช้คำสั่ง redirect ไปยังหน้า index ผมใช้คำสั่ง
               $this->redirect(array('index'));
               //exit(); //จบการทำงาน
            }
        }
        $this->render('register', array('model' => $model));
    }

เท่านี้ก็เสร็จสมบูรณ์แล้วครับ ให้ทดสอบโดยพิมพ์ต่อท้าย URL ว่า  index.php? r=users/register และลองกรอกข้อมูลให้ครบถ้วนแล้วกดปุ่ม Submit ดูครับ ข้อมูลจะต้องถูกเก็บไว้ในเทเบิลชื่อ users และรูปภาพจะเก็บไว้ใน images/users

แล้วพบกันโอกาสหน้าครับ ผมจะพูดถึงเรื่อง การแก้ไข/ลบและแสดงข้อมูลบ้างครับ และสุดท้ายจะสอน Bootstrap ประยุกต์ใช้กับ Yii Frameworkครับ

วันพฤหัสบดีที่ 6 มีนาคม พ.ศ. 2557

Yii Framework กับการเปลี่ยนข้อความต่างๆให้เป็นภาษาไทย

     ภาษาเริ่มต้นของ Yii Framework จะเป็นภาษาอังกฤษครับ จะแสดงเป็นข้อความแจ้งเตือนต่างๆ เช่น ข้อความแจ้งเตือนจากการกรอกข้อมูล (Form Validate) , Error 404 , ข้อความ Error ต่างๆ เพื่อแจ้ง Bug ของโค๊ดที่เราเขียนให้ทราบ
     บทความที่ผมได้สอนไปก่อนหน้านี้ คือ สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form เราจะเห็นข้อความแจ้งเตือนจากการกรอกข้อมูลในฟอร์ม ซึ่งจะแสดงเป็นภาษาอังกฤษ เพราะเรายังไม่ได้กำหนดภาษาไทยให้กับ Yii Framework นั่นเองครับ ดังรูป

เราสามารถเปลี่ยนข้อความเหล่านี้ให้เป็นภาษาไทยได้ง่ายๆครับ ให้ทำตามรูปดังนี้

 ไปที่ Yii Projectของท่าน >> เลือก protected >> เลือก config >> เปิดไฟล์ main.php เพิ่มค่าอาเรย์ 'language'=>'th' ดังรูปข้างบน

จะได้ผลลัพธ์ดังนี้
1.ข้อความแจ้งเตือนการกรอกข้อมูลจากฟอร์มที่เป็นภาษาไทย

2.หน้าที่เกี่ยวข้องกับการแสดงผลของหน้าเว็บ เช่น Error 404 , สิทธิการเข้าถึงหน้าเว็บไซต์ เป็นต้น

วันเสาร์ที่ 1 มีนาคม พ.ศ. 2557

สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form


     หลังจากที่ได้สอนพื้นฐานการสร้างฟอร์มคร่าวๆไปแล้ว ในบทความก่อนหน้านี้ ว่าด้วยเรื่องของ การสร้าง Form ใน Yii Framework
     คราวนี้จะสอนการตรวจสอบข้อมูลจากฟอร์มหรือ Form Validation กันบ้างครับ และจะทำให้เราเห็นการทำงานของ MVC ของ Yii Framework ได้ชัดเจนยิ้งขึ้น เพราะจะต้องใช้ทั้งสามส่วนเพื่อทำงานร่วมกันครับ สำหรับการ Validation ข้อมูล จะเป็นหน้าที่ Model ครับ โดย Controller จะทำหน้าที่รับข้อมูลจากฟอร์ม    ที่ได้จากส่วนของ Views แล้วส่งไปให้ Class Validation ของ model ตรวจสอบอีกที
      Validate ของ Yii Framework จะมีการตรวจสอบที่ค่อนข้างจะยืนหยุ่นเป็นอย่างมาก รองรับการตรวจสอบแบบ Pattern โดยใช้ Regular Expression เข้ามาช่วยก็ได้ การตรวจสอบไฟล์หรือรูปภาพที่อัพโหลดเข้ามา เช่น ตรวจสอบนามสกุลไฟล์ , ขนาดของไฟล์ , ชื่อไฟล์ซ้ำ ฯลฯ โดยที่เราไม่ต้องเขียนโค๊ดเองเลย ทำให้สะดวกเป็นอย่างมาก และที่ผมชอบที่สุด คือ การกำหนดอ็อพชั่นที่ชื่อว่า on เช่น array('product_image','required',on=>'forInsert');  จะหมายถึงให้ตรวจสอบรูปสินค้าตอนเพิ่มสินค้าเท่านั้น  ว่ามีรูปสินค้าหรือป่าว เหมือนบังคับว่าต้องเลือกรูปสินค้าด้วยนะ ส่วนตอนอัพเดทสินค้าก็ไม่จำเป็นต้องตรวจสอบรูปสินค้า เพราะลูกค้าอาจไม่ต้องการเปลี่ยนรูปสินค้า แต่เราจะตรวจสอบอย่างอื่นเกี่ยวกับรูปภาพแทน เช่น ตรวจนามสกุล ในกรณีที่ลูกค้าต้องการอัพเดทรูป

1.อันดับแรก เราจะสร้างฐานข้อมูลกันก่อนครับ ผมจะสร้างเทเบิลชื่อ users และฐานข้อมูลชื่อ db_yii ดังรูป


2.เมื่อเราสร้างฐานข้อมูลและเทเบิล users เสร็จแล้ว เราจะเข้าไปในส่วนของ Yii Code Generator โดยพิมพ์ต่อท้าย URL ว่า index.php?r=gii แล้วใส่รหัสผ่านให้เรียบร้อย ศึกษาเพิ่มเติมจาก -> Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator
เราจะสร้างส่วนของ model ให้กับ yii ก่อนครับ โดยไปที่เมนู  Model Generator กำหนดค่าดังรูป



Table Name หมายถึงให้เรากรอกชื่อเทเบิลในฐานข้อมูลของเราเข้า ซึ่งเทเบิลที่ผมสร้างชื่อ users นั่นเอง