Monthly Archives: สิงหาคม 2010

ajax คืออะไร jQuery ทำไมใช่และไม่ใช่ ajax


มีคนเข้าใจผิดว่า การใช้  JQuery ในเว็บแล้วจะทำให้เว็บนั้นเป็น Ajax ไปด้วย หรือถ้าจะเขียน ajax ต้องใช้ jQuery การอธิบายต้องเริ่มจากวิวัตนาการของเว็บตั้งแต่เริ่มแรกครับ

  • ในยุคแรกเว็บแบบดังเดิมมีเพียงภาษา html เพื่อแสดงผลที่ทำสำเร็จรูปเอาไว้แล้วเท่านั้น ใครก็ตามที่เข้าไปอ่านข้อมูลจะพบกับข้อมูลเดียวกัน เหมือนหนังสือเล่มเดียวกันที่ทุกคนจะอ่านเนื้อหาเดียวกันเพราะว่าภาษา html มีต้นแบบมาจากการกำหนดในการทำต้นฉบับหนังสือ จึงเรียกเว็บแบบ static
  • ต่อมามีการนำภาษาฝั่งเว็บเซิร์ฟเวอร์ มาใช้เพื่อตอบสนองความต้องการเฉพาะบุคลขึ้นมาเป็นเว็บแบบ dynamic โดยเว็บเซิร์ฟเวอร  สร้างหน้าเว็บจากต้นแบบ (โดยใช้ภาษาสำหรับเขียนเว็บบนเว็บเซิร์ฟเวอร เช่น php ,asp ,cgi คำนวณและส่งผลลัพธ์ออกมาเป็นภาษา html ) โดยเริ่มจากระบบเว็บเมล์  (คงไม่อยากให้ใครมาอ่านเมล์คุณเหมือนยุคที่ 1 นะครับ) การกระทำกิจกรรมแต่ละครั้ง เช่น login เข้าสู่ระบบจะมีขั้นตอน
  1. เข้าหน้าล็อกอิน
  2. โปรแกรมเว็บเบราว์เซอร์จะสร้างหน้าจาก html ที่ได้จาก server
  3. พิมพ์ข้อมูลและส่ง
  4. ส่งข้อมูลให้ server ถ้า net ช้าเราจะเห็นหน้าขาวๆ เพราะเว็บเบราว์เซอร์ไม่มีหน้าเว็บที่จะแสดง ระหว่างรอผลตอบกลับจาก server
  5. ถ้าชื่อผู้ใช้และรหัสผ่านถูกต้องก็จะเห็นหน้าต้อไป ถ้าไม่ก็จะโดนสั่งให้ไปหน้า login อีกครั้ง
  • เว็บยุคต่อมาเนื่องจากภาษา html ทำได้แค่แสดงหน้าตา ทำลิงค์และจัดข้อความเท่านั้นจึงมีการนำภาษา JavaScript ซึ่งทำงานบนเว็บเบราว์เซอรมาช่วย เรียกว่า dhtml (dynamic html) โดยมันใช้เพื่อ
  1. นำมาตรวจสอบข้อมูล เช่น ถ้าผู้ใช้ลืมใส่รหัสผ่านและกดปุ่ม login ระบบจำส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ โดยผลลัพธ์แน่นอนว่าจะต้องโดนปฏิเสธไม่ให้เข้าระบบ  JavaScript  จะช่วยตรวจสอบเบื้องต้นเช่น ถ้าไม่ได้กรอกชื่อผู้ใช้หรือรหัสผ่าน ก็จะมีข้อความเตือนให้กรอกข้อมูลให้ครบก่อน การบังคับให้กรอกอีเมล์ ให้ใส่ได้เฉพาะตัวเลข ก่อนจะยอมให้ส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ เมื่อข้อมูลทั้งหมดถูกต้อง
  2. ตกแต่งให้หน้าเว็บมีความน่าสนใจมากขึ้น มี animation เช่น ทำเป็นรูปตัวการ์ตูนวิ่งตามเมาส์ ตัวหนังสือวิ่ง ซ่อนบางส่วนไว้ไม่แสดงจนกว่าคลิกที่บางจุด
  3. คำนวณเล็กๆ น้อยๆ เช่นบวกราคาสินค้าที่ต้องจ่าย
  4. อำนวยความสะดวกมักจะเป็น ปุ่มเลือก / ทั้งหมดในอีเมล์เป็นต้น

วิธีนี้มีข้อดีคือ

  1. เว็บเซิร์ฟเวอร์ทำงานน้อยลง เพราะบางส่วนจะทำที่เครื่องผู้ใช้
  2. ผู้ใช้ไม่ต้องเสียเวลารอและกรอกข้อมูลใหม่ทั้งหมด โอกาสที่จะรอการทำงาน ซึ่งเห็นเป็นหน้าขาวน้อยลง  (ช่วยให้รู้สึกว่าเร็วขึ้น )
  3. ผู้ใช้ได้ใช้เว็บที่สวยงาม น่าสนใจใช้สะดวก
  4. นอกจากนี้ยังนำ JavaScript มาช่วยในการคำนวณเล็กๆน้อย เข่น บวกราคาสินค้าทั้งหมด
  • ต่อมา พ.ศ. 2545 บริษัทไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับเว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูลโดยไม่ต้องส่งข้อมูลหน้าเว็บทั้งหมดมาใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchangeเว็บเซิร์ฟเวอร 2000 โดยต้องใช้กับ ไออี (อินเทอร์เน็ตเอกซ์พลอเรอ) เท่านั้นต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วยจนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี เมื่อ กูเกิล ได้เปิดบริการจีเมล ซึ่งใช้ XMLHttpRequest จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น
    เทคนิคนี้ไม่มีชื่อเรียกอย่างเป็นทางการจน Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ
    เอแจ็กซ์ (AJAX – Asynchronous JavaScript And XML) เป็นชื่อของเทคนิคที่จะเปลี่ยนแปลงบางส่วนของหน้าเว็บเท่าที่เปลี่ยนไปจริงๆ โดยไม่ต้องเปลี่ยนส่วนที่ไม่เกี่ยวข้อง
    หลักการทำงานคือ
    วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous
    แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)

วิธีนี้มีข้อดีคือ

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

เพราะว่า เว็บเบราว์เซอร์แต่ละตัวมีความแตกต่างกันมาก การเขียนโปรแกรมต้องคำนึงถึงความแตกต่างของแต่ละตัว โดยเฉพาะไออีต่างเวอร์ชั่นกันก็อาจจะเขียนต่างกันอย่างสิ้นเชิง จึงมีการเขียนไลบรารี่ (Library)  มาช่วยแก้ปัญหานี้หลายตัว เช่น dojo  ,ext และ JQuery เป็นหนึ่งในนั้น โดยเป็นไลบรารี่ที่สามารถใช้เขียนงานที่เป็น dhtml และ ajax

สรุปคือ

  1. เป็น dhtml เมื่อใช้ javascript เช่นพวก accordion tab เปลี่ยนการแสดงผลหน้าเว็บ
  2. เป็น Ajax ถ้ามีการทำงานโดยแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ เฉพาะที่จำเป็นเท่านั้น เช่น ใช้คำสั่งส่งข้อมูลไปเว็บเซิร์ฟเวอร์และรับข้อมูลมาเปลี่ยนเฉพาะที่เปลี่ยนไปจริงๆ
Advertisements

การติดตั้ง moodle ขั้นพื้นฐาน


การติดตั้ง Moodle เพื่อสร้างเว็บเพื่อการเรียนการสอนออนไลน์  เป็นเรื่องที่ไม่ยากกว่าการติดตั้ง cms ทั่วๆ ไปอย่าง joomla หรือ Moodle เพียงแต่ต้องมีข้อกำหนดพื้นฐานบางอย่างต่างออกไปเล็กน้อย

    การติดตั้ง Moodle

  1. Download appserv จาก http://www.appservnetwork.com จากนั้นติดตั้งไปตามปกติ
  2. Download version ล่าสุดจาก http://download.Moodle.org/
  3. ระหว่างรอไปสร้าง database เพื่อเก็บข้อมูลการใช้งานโดยเวอร์ชั่น 1.9.9  สามารถใช้ MySQL 4.1.16 ขึ้นไป Postgres 8.0 ขึ้นไปหรือ MSSQL 9.0 or Oracle 9.0 เราจะใช้ MySQL  เป็นฐานข้อมูลเพราะ ฟรี ดี ติดมากับ appserv แล้ว (อันนี้สำคัญ) เปิด phpmyadmin พิมย์ชื่อฐานข้อมูลที่ต้องการลงใน Create new database  (สร้างฐานข้อมูลใหม่ )  เลือก COLLATE เป็น  utf8_unicode_ci เพื่อให้รอบรับหลายภาษา  หรือถ้าสะดวกจะใช้สั่ง
    CREATE DATABASE Moodle;
    ALTER DATABASE Moodle DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

    Moodle คือชื่อฐานข้อมูลที่ต้องการจะเปลี่ยนเป็นชื่ออื่นก็ได้
  4. แก้ config apache เข้าไปที่ folder c:\apache\conf  เปิดไฟล์ httpd.conf  แก้ AcceptPathInfo  เป็น on  เพื่อให้สามารถส่งตัวแปรแบบ google friendly ได้ (http://server/file.php/arg1/arg2) ถ้าไม่มีตัวแปรนี้เพราะไม่ได้ลง curl ไว้ก็ให้ข้ามไป
  5. แก้ php.ini  ถ้าลง appserv จะอยู่ใน c:\windows ส่วน  xampp อยู่ที่ xampp/php ตามนี้
    register_globals = 0 ; (บังคับ)
    safe_mode = 0; (บังคับ)
    memory_limit = 40M; (ขั้นต่ำ  40M Moodle ตั้งแต่ version 1.8 เป็นต้นไป ถ้าทำระบบใหญ่ตั้ง  128M )
    magic_quotes_runtime = 0;  (บังคับ)
    file_uploads = 1; (หรือมากกว่า)
    session.auto_start = 0;  (บังคับ)
    session.bug_compat_warn = 0
    post_max_size = 16M
    upload_max_filesize = 16M (ต้องใหญ่กว่าขนาด  scorm ที่จะ upload ขึ้นไป)
  6. แตกไฟล์ ติดตั้ง Moodle โดยเรียก http://localhost/Moodle folder/install.php
  7. เลือก Language เป็น thai (th) กดต่อไป
  8. ตรวจสอบการตั้งค่า PHP ถ้าเสดงสำเร็จให้กดต่อไป ถ้าไม่สำเร็จแสดงว่าติดตั้ง php extension ไม่ครบ (ลง appserv หรือ xampp จะไม่มีปัญหาส่วนนี้)
  9. ระบุที่ตั้งของการติดตั้ง Moodleโดย
    1. ที่อยู่ของเว็บ คือ url ที่ใช้เรียก Moodle
    2. Moodle ไดเรกทอรี คือ folder ที่ติดตั้ง Moodle อันนี้ไม่ต้องแก้
    3. ไดเรกทอรีข้อมูล อันนี้มักเข้าใจผิดกันบ่อย มันคือ folder ที่ไว้เก็บไฟล์ สื่อการเรียนการสอน ที่ upload ไปแต่ละวิชา หรือแตกออกมาจาก SCORM ไม่ใช้ folder เก็บข้อมูลของ database อันนี้ต้องสร้าง folder ใหม่แล้ว copy path มาวางไว้เอง

    กดต่อไป

  10. ตั้งค่าฐานข้อมูล
    1. ประเภท เป็น MySQL
    2. โฮสต์เซิร์ฟเวอร์ เป็น localhost
    3. ฐานข้อมูล ระบุชื่อฐานข้อมูลที่สร้างในขั้นตอนที่ 3
    4. สมาชิก คือ ชื่อ username ที่ใช้ login database
    5. รหัสผ่าน คือ password ที่ใช้ login database
    6. คำนำหน้าตาราง (Table Prefix) คือ ส่วนที่จะแยกตารางฐานข้อมูลของ Moodle ออกจากของตัวอื่นถ้าใช้ร่วมกัน หรือถ้ามี Moodle อยู่แล้วแต่อยากจะให้ แยกกันระหว่างตัวเก่าและตัวใหม่ สามารถแก้คำนำหน้าส่วนนี้ได้ โดยใช้ตัวอักษรภาษาอังกฤษและ _ เท่านั้น

    กดต่อไป

  11. ตรวจสอบเวิร์ฟเวอร์ ถ้ามีการเตือนให้ตรวจสอบ curl ไม่ต้องสนใจ ส่วนประกอบอื่นๆ ถ้าสูงกว่าที่แนะนำถือว่าเป็นเรื่องที่ดีครับ กดต่อไป
  12. ดาวน์โหลดไฟล์ภาษา ไทยเพิ่มเติม หรือข้ามไว้กลับมาโหลดเพิ่มเติมจาก http://download.moodle.org/lang16/th_utf8.zip นำไปว่าในไดเรกทอรีข้อมูล/lang ในครั้งหน้า กดต่อไป
  13. ตั้งค่าตัวแปรเสร็จสิ้นแล้ว ตัวติดตั้งจะสร้างไฟล์ config.php ขึ้นมาใหม่ ถ้าลบไฟล์นี้จะสามารถใช้งานตัวติดตั้งได้อีกครั้ง หรืออาจจะสร้างขึ้นมาเองโดยดูตัวอย่างจาก config-dist.php กดต่อไป การติดตั้งก็จะเสร็จสมบูรณ์

อ่านข้อมูลเพิ่มเติมได้ที่ http://docs.moodle.org/en/Administrator_documentation

%d bloggers like this: