การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop

3,957 views

Published on

การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,957
On SlideShare
0
From Embeds
0
Number of Embeds
2,357
Actions
Shares
0
Downloads
99
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop

  1. 1. การบริหารจัดการ ระบบสารสนเทศบนเว็บด ้วย OSS – Joomla Workshop ศตพล ยศกรกุล ฝ่ ายบริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ http://stks.or.th, satapon@nstda.or.th http://facebook.com/firstsatapon
  2. 2. เนื้อหา • เทคโนโลยีเว็บไซต์ • OSS & Freeware • รู้จักกับ Joomla • การติดตั้ง Joomla บนเครื่องจาลอง • จัดการกับหน้าเว็บไซต์เบื้องต ้น • จัดการสมาชิก • จัดการเนื้อหาเว็บ • Media Manager • การทางานกับ Extension ของ ระบบ • การติดตั้ง Extension • การทางานกับ Extension – ตัวอย่าง • การทางานกับ Template • การปรับแก ้ไข Template เบื้องต ้น • ประเด็นน่ารู้เกี่ยวกับการพัฒนา เว็บไซต์จริง
  3. 3. เทคโนโลยีการพัฒนาเว็บไซต์ เผยแพร่ เนื้อหา เพิ่มลูกเล่น ระบบสมาชิก ระบบสืบค ้น ระบบจัดการเนื้อหา แบบฟอร์มต่างๆ CMSHTML * Edit Plus HTML * Generator * Dreamweaver * Front Page JavaScript HTML JavaScript PHP/ASP Database * MS Access * MySQL * Microsoft SQL * Oracle * PostgreSQL * DB2 CSS
  4. 4. CMS  Content Management System ระบบบริหาร จัดการเนื้อหาเว็บไซต์  พัฒนาบนฐานของ Web Programming + Database  ช่วยลดทรัพยากรต่างๆ ที่ เกี่ยวข ้องกับการพัฒนา/ จัดการเว็บ  กาลังคน  เวลา  งบประมาณ • ฟังก์ชันการทางานของ CMS • เนื้อหา • การจัดหมวดหมู่ • การสร ้างสรรค์ • การเผยแพร่ • การเก็บรักษาเอกสาร • สมาชิก • ส่วนเสริมการทางาน
  5. 5. โปรแกรมต่างๆ ในกลุ่ม CMS  Joomla  PHP-Nuke  MyPHPNuke  Mambo  MD-Pro  XOOPs  OpenCMS  Plone  JBoss  Drupal คุณเลือกใช ้เครื่องมือใด เพราะเหตุใด ????
  6. 6. http://cmsmatrix.org
  7. 7. http://trends.google.com  Joomla, mambo, wordpress, drupal, phpnuke
  8. 8. CMS  ถูกพัฒนาเพื่อใช ้สร ้างเว็บไซต์ที่ต ้องการให ้ความสาคัญกับ “เนื้อหาเว็บ” โดยเฉพาะในกลุ่ม Dynamic content  มีความสามารถเฉพาะด ้าน  ไม่ได ้รองรับกับงานทุกงานอัตโนมัติ  สามารถปรับเพิ่มเติมได ้  Extension  พัฒนาเอง (ในกลุ่ม Open Source)  แนวทางการเลือก CMS  Infrastructure  ความต ้องการของผู้พัฒนา/ผู้ใช ้/หน่วยงาน  ต ้องการการทางานในโหมด Online
  9. 9. HTML Editor & CMS Web ServerComputer ผู้ใช ้ โอนเอกสาร รายครั้ง (FTP) Web ServerComputer ผู้ใช ้ ต ้องทางาน Online ติดตั้งแล ้ว นาเข ้า ออนไลน์ HTML
  10. 10. เครื่องมือพัฒนาเว็บไซต์ในกลุ่ม OSS & Freeware OSS เปิดเผยต ้นฉบับโปรแกรม มีเสรีภาพในการปรับแก ้ไข เผยแพร่ และมีแบบฟรีให ้ เลือกใช ้ OS - Linux CMS - Joomla, Drupal Graphic Editor - Gimp PDF – PDFCreator FTP – WinSCP Office Suites – OpenOffice.org Freeware ซอฟต์แวร์ที่ให ้ใช ้ได ้ฟรี ภายใต ้เงื่อนไขที่ผู้พัฒนา กาหนด Graphic Editor – XnView Text Editor – NotePad++
  11. 11. Joomla ทางเลือกของเว็บยุคใหม่  เปิดเผย Source Code ---- Open Source Software  ดาวน์โหลดใช ้ได ้ฟรี  สนับสนุน Web Accessibility  สนับสนุนการสืบค ้น Search Engine Friendly, Google Friendly  Extension เสริมการทางานจานวนมาก  Communities ที่ยังพร ้อมสนับสนุนพัฒนาโปรแกรม  สนับสนุนการทางานตามแนวทางเทคโนโลยีเว็บ 2.0 www.joomla.org/
  12. 12. Joomla กับการประยุกต์ใช ้งาน  เว็บหน่วยงาน  เว็บส่วนตัว  เว็บประชาสัมพันธ์  เว็บผลงาน  เว็บการเรียนการสอน  e-Commerce  KM  Digital Collection  Library  Research
  13. 13. Joomla กับการประยุกต์ใช ้งาน  ไม่ใช่ CMS ที่เหมาะสมกับการออกแบบสร ้างเว็บทุกความต ้องการ  สารวจความต ้องการของท่าน  นามาเปรียบเทียบกับ CMS อื่นๆ ด ้วย http://www.cmsmatrix.org  นา CMS ที่ได ้มาดูความนิยมด ้วย http://trends.google.com  ทาไมถึง “ดัง” ในช่วงนี้  ง่าย เมื่อเทียบกับ CMS อื่นๆ  รองรับ SEO  มีเอกสารเผยแพร่เยอะ  พูดปากต่อปาก  มีกลุ่มผู้พัฒนาที่ยังทางานอยู่  มีเครื่องมือให ้เลือกใช ้เฉพาะ Extension หลากหลาย ทั้งฟรีและ ต ้องจ่ายเงิน
  14. 14. Joomla กับเกี่ยวเนื่องต่างๆ Server & Security การติดตั้ง ปรับแต่งโปรแกรม เนื้อหา System Administrator การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข ้อมูล การจัดการ Log file การจัดการสิทธิ์ของการเข ้าถึงระบบ - Web Master การติดตั้งและปรับแต่ง Joomla การจัดการสมาชิก Joomla การจัดการหมวดเนื้อหา Joomla การติดตั้ง Extension และเปิดใช ้งาน การแก ้ไขแม่แบบเว็บไซต์ด ้วยเทคนิคแทนที่ - Web Master การแก ้ไข CSS, HTML, PHP ระดับที่ 1 - Web Master & Web Programmer การแก ้ไข CSS, HTML, PHP ระดับสูง - Web Programmer การพัฒนา Joomla ด ้วย web programming ต่างๆ ทุกคน ภายใต ้ข ้อกาหนดร่วมกัน (มาตรฐานสื่อดิจิทัลต่างๆ)
  15. 15. ใช ้จริง ทาอย่างไร องค์กร  เตรียม Server  ติดตั้ง Linux  ฐานข ้อมูล MySQL  โปรแกรมภาษา PHP  สิทธิ์ในการเข ้าถึง Server ส่วนตัว  หน่วยงานเตรียมพื้นที่ให ้  สิทธิ์ในการเข ้าถึง Server  เช่าพื้นที่ ISP หรือ Data Provider อื่นๆ
  16. 16. ฝึกปฏิบัติ Joomla โดยแปลง พีซีธรรมดาเป็น Web Server AppServ คือคาตอบ Open Source Software ง่ายในการติดตั้ง ทางานได ้กับ PC และ OS ทุกระบบ
  17. 17. ติดตั้ง AppServ
  18. 18. C:AppServ ไดร์ฟและโฟลเดอร์ที่ควรจา
  19. 19. เลือกโปรแกรมย่อยที่ต ้องติดตั้ง
  20. 20. Server Name : ชื่อ Server หรือ IP-Address กรณีที่เป็ น เว็บจำลองให้ระบุเป็ น localhost Administrator's Email Address: อีเมล์ของผู้ดูแลระบบ Apache HTTP Port: เลขที่พอร์ทสื่อสำรของ Apache ปกติคือ พอร์ท 80 ข ้อมูล Apache
  21. 21. root password รหัสผ่ำน (ต้องจำให้ได้ด้วย กรณีเว็บจำลองแนะนำเป็ น 12345)‫‏‬ Character set กรณีที่ใช้ภำษำไทย ควรระบุเป็ น UTF-8 Unicode คลิกเลือกรายการ Enable InnoDB ค่าควบคุมสาหรับฐานข ้อมูล MySQL
  22. 22. ตัวอย่างหน้าเว็บที่ไม่ได ้ใส่ใจเกี่ยวกับ Character Set
  23. 23. ติดตั้ง AppServ สาเร็จ
  24. 24. ตรวจสอบ AppServ http://127.0.0.1 หรือ http://localhost
  25. 25. ปรับแต่ง Config ของ Server – AppServ # 1  Start, Program, AppServ, Configuration Server, PHP Edit the php.ini Configuration File  max_execution_time ควรมากกว่า 120  max_input_time ควรมากกว่า 120  memory_limit ควรมากกว่า 64M  post_max_size ควรมากกว่า 20M  upload_max_filesize ควรมากกว่า 20M  การปรับแก ้ไขจะต ้องระมัดระวังเป็นพิเศษ  บันทึกไฟล์ ปิดไฟล์
  26. 26. ปรับแต่ง Config ของ Server – AppServ # 2  Start, Program, AppServ, Configuration Server, Apache Edit the httpd.conf Configuration File  ลบเครื่องหมาย # ออกจากรายการ #LoadModule rewrite_module modules/mod_rewrite.so  การปรับแก ้ไขจะต ้องระมัดระวังเป็นพิเศษ  บันทึกไฟล์ ปิดไฟล์  Restart Server ด ้วยคาสั่ง Start, Program, AppServ, Control Server by Service, Apache Restart
  27. 27. เตรียมการก่อนติดตั้ง  Download ต ้นฉบับโปรแกรมจาก Joomla.org  Unzip ให ้อยู่ในรูปแบบโฟลเดอร์  Copy โฟลเดอร์โปรแกรมต ้นฉบับ Joomla ไปไว ้ใน c:appservwww  เปลี่ยนชื่อโฟลเดอร์ให ้ตรงกับงานที่ต ้องการนาเสนอ  ใช ้ภาษาอังกฤษ ตัวพิมพ์เล็ก ห ้ามเว ้นวรรคและ เครื่องหมายพิเศษ ยกเว ้น –  เป็นคาที่สื่อความหมายชัดเจน ผู้ใช ้จาได ้ง่าย เข ้าถึงง่าย
  28. 28. Unzip ไฟล์ต ้นฉบับ Joomla Copy ทั้งโฟลเดอร์มาที่ c:appservwwww
  29. 29. ติดตั้งโปรแกรม Joomla เปิดเว็บเบราว์เซอร์ พิมพ์คาสั่ง  http://127.0.0.1/ชื่อโฟลเดอร์  http://localhost/ชื่อโฟลเดอร์
  30. 30. จอภาพเริ่มต ้นติดตั้ง Joomla เลือกภาษา 1
  31. 31. ตรวจสอบการทางานกับไฟล์ประกอบการติดตั้ง 2
  32. 32. ยอมรับลิขสิทธิ์โปรแกรมและเงื่อนไขการใช ้งาน 3
  33. 33. ป้อนข ้อมูลฐานข ้อมูล MySQL
  34. 34. ข ้อมูลฐานข ้อมูล MySQL localhost root iskkuweb
  35. 35. ป้อนข ้อมูลระบบ FTP
  36. 36. ข ้อมูลเกี่ยวกับระบบเว็บไซต์
  37. 37. ข ้อมูลเกี่ยวกับระบบเว็บไซต์
  38. 38. ชื่อเว็บไซต์ (Site Title)  ภาษาอังกฤษ สามารถตามด ้วยข ้อความภาษาไทย  มีความยาวไม่เกิน 64 ตัวอักษร  มีความหมายชัดเจน  ประกอบด ้วยคาที่ผู้ใช ้คุ้นเคย และ/หรือนึกถึงใน ลักษณะคาค ้น (Keyword) ได ้ง่าย
  39. 39. ชื่อเว็บไซต์ (Site Title) IS KKU: กลุ่มวิชาการจัดการสารสนเทศและการ สื่อสาร มหาวิทยาลัยขอนแก่น
  40. 40. คาอธิบายเว็บ IS KKU: กลุ่มวิชาการจัดการสารสนเทศและ การสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยขอนแก่น
  41. 41. คาสาคัญ IS, KKU, กลุ่มวิชาการจัดการสารสนเทศและการ สื่อสาร ,คณะมนุษยศาสตร์และสังคมศาสตร์, มหาวิทยาลัยขอนแก่น, วิทยานิพนธ์, งานวิจัย
  42. 42. ยืนยันอีเมลและรหัสผ่าน
  43. 43. ข ้อมูลตัวอย่าง สำมำรถคลิกปุ่ ม “ติดตั้งข้อมูลตัวอย่ำง” เพื่อให้ Joomla ติดตั้งข้อมูลตัวอย่ำง เพื่อใช้ทดสอบกำรออกแบบพัฒนำเว็บไซต์
  44. 44. การติดตั้งเสร็จสมบูรณ์ ลบโฟลเดอร์ชื่อ Installation ออกจำกระบบ
  45. 45. เรียกดูเว็บไซต์ คลิกปุ่ ม ดูหน้ำเว็บไซต์
  46. 46. หน้าเว็บที่ไม่มีข ้อมูลตัวอย่าง
  47. 47. ส่วนประกอบหน้าเว็บ (คร่าวๆ) Header Module Content
  48. 48. การเข ้าสู่ระบบจัดการเว็บไซต์ http://127.0.0.1/ชื่อโฟลเดอร์/administrator
  49. 49. จอภาพส่วนควบคุมระบบ Admin Control Panel เข้าถึงได้โดยเลือกคาสั่ง Site, Control Panel
  50. 50. ปรับเว็บให ้สนับสนุน SEO Site, Global Configuration, Site ข ้อมูลสาคัญที่ต ้องปรับแก ้ไข • Site Name • Search Engine Friendly URLs • Global Site Meta Description • Global Site Meta Keyword 1 2
  51. 51. ปรับ Metadata Settings
  52. 52. Site Name & Meta Tag • Site Name – ไม่เกิน 64 ตัวอักษร ภาษาอังกฤษนา มีความหมาย ชัดเจน สอดคล ้องกับเนื้อหาในเว็บ ผู้ใช ้นึกถึงได ้ง่าย • Description – ไม่เกิน 250 ตัวอักษร เนื้อหาอธิบายเกี่ยวกับเว็บ • Keyword – คาค ้นที่ผู้ใช ้นึกถึงได ้ง่าย ครอบคลุมเนื้อหาของเว็บ ภาษาอังกฤษนา ปรับแต่งสม่าเสมอ ไม่เกิน 500 คา
  53. 53. http://www.submitexpress.com/analyzer ตัวช่วยตรวจสอบ Sitename, Meta Tag
  54. 54. <title>○ BOI : The Board of Investment of Thailand</title> <meta name="description" content="The Thai Board of Investment (BOI) - your investment and business information source for Thailand."> <meta name="keywords" content="investment, Thailand, Thai BOI, Board of Investment of Thailand, information, investor, statistics, Thai government">
  55. 55. http://truehits.net ตัวช่วยศึกษาพฤติกรรมผู้ใช ้
  56. 56. บันทึกและตรวจสอบการแสดงผล • โปรแกรมจะแสดงผลเฉพาะ Site Name ในส่วน Title bar ของเว็บเบราว์เซอร์ • Meta Description & Keyword จะเป็นข ้อมูลส่ง ให ้ Search Engine 1 2
  57. 57. การปรับแต่งค่า Global Config อื่นๆ • Site, Global Configuration • System • Server • Permission
  58. 58. ปรับแต่งระบบเครื่องแม่ข่าย Site, Global Configuration, Server 1 2ปรับแต่งระบบ Joomla Mail ด ้วย GMail Mailer: SMTP Server Mail From: <your_user_id>@gmail.com SMTP Auth: Yes SMTP Security: SSL SMTP Port: 465 SMTP Username: <your_user_id>@gmail.com SMTP Password: <your_password> SMTP Host: smtp.gmail.com
  59. 59. แก ้ไขข ้อมูลผู้ดูแลระบบ Admin Account • Site, User Manager • เปลี่ยนบัญชี Admin เป็นชื่ออื่น, เปลี่ยนรหัสผ่าน, ป้อนข ้อมูล ประกอบ
  60. 60. ข ้อมูลสาคัญที่ต ้องปรับแก ้ไข • Name • Username • E-mail •Time Zone
  61. 61. จัดการสมาชิกด ้วย User Manager • Add New User • Save
  62. 62. กลุ่มของ User ใน Joomla 1. กลุ่มผู้ชมเว็บ (Front-end User) 1.1 กลุ่มผู้ชมเว็บทั่วไป ที่ไม่ได ้เป็นสมาชิก 1.2 กลุ่มผู้ชมเว็บที่เป็นสมาชิก แบ่งได ้เป็น 4 กลุ่ม ย่อย 2. กลุ่มผู้ดูแลเว็บไซต์ (Back-end User)
  63. 63. กลุ่มผู้ชมเว็บที่เป็นสมาชิก แบ่งได ้ เป็น 4 กลุ่มย่อย 1. Registered User : สามารถ login เข ้าเว็บไซต์ และดู ข ้อมูลต่างๆ ได ้ตามที่ผู้ดูแลเว็บกาหนดสิทธิ์ไว ้เท่านั้น 2. Author : ดูข ้อมูล และสร ้างบทความได ้ แต่บทความนั้น ต ้องได ้รับการอนุมัติจากสมาชิกกลุ่ม Publisher ก่อนแสดงใน เว็บไซต์ 3. Editor : ดูข ้อมูล สร ้างบทความได ้และยังแก ้ไขบทความ ของผู้อื่นได ้ด ้วย แต่หากเป็นบทความใหม่ ต ้องได ้รับการ อนุมัติจากกล่ม Publisher ก่อน 4. Publisher : ดูข ้อมูล สร ้างบทความได ้แก ้ไขบทความ ของผู้อื่นได ้และมีเป็นผู้ตัดสินใจอนุมัติว่าจะให ้บทความของ สมาชิกกลุ่ม Auther และ Editor แสดงในเว็บไซต์หรือไม่
  64. 64. กลุ่มผู้ดูแลเว็บไซต์ (Back-end User) ผู้ดูแลเว็บ แบ่งได ้เป็น 3 กลุ่มย่อย 1. Manager : สามารถจัดการหมวดหมู่ของเนื้อหา (Section,Category,Article) และสร ้างหรือแก ้ไขเมนูต่างๆ ได ้ แต่ไม่มีสิทธิ์สร ้าง user 2. Administrator : สามารถจัดการเนื้อหา, แก ้ไขสิทธิ์การใช ้ งานของ User กลุ่ม Manager และ ผู้ชมที่เป็นสมาชิกได ้, install|uninstall component ต่างๆ แต่ไม่สามารถแก ้ไขค่า ใน Global Configuration, ไม่สามารถเปลี่ยนแปลง template และไม่สามารถใช ้งานระบบ Mass Mail ได ้ 3. Super Administrator : สามารถทาได ้ทุกอย่าง
  65. 65. ปรับแต่งหน้าเว็บด ้วย Module • Module เป็นโปรแกรมเสริม (Extension) ประเภท หนึ่งของ Joomla ทาหน้าที่ควบคุมการแสดงผลผ่าน Front-end • Joomla มี Module ที่พร ้อมใช ้งาน แต่ยังไม่เปิด แสดงผล และอนุญาตให ้ติดตั้ง Module เพิ่มเติมได ้ • Module จะถูกแสดงผลรอบๆ พื้นที่แสดงเนื้อหาเว็บ • การแสดงผล Module ควบคุมด ้วยรูปแบบเว็บ (Template) ผ่านชื่อตาแหน่ง (Position name)
  66. 66. Module ต่างๆ
  67. 67. ตัวอย่างการแสดงผล Module ส่วนแสดงเนื้อหำหลักของเว็บ Module ต่ำงๆ
  68. 68. รู้จัก Position Name • Module จะถูกกาหนดการแสดงผลด ้วย Position Name โดย Position Name จะมีชื่อเรียกและตาแหน่งแตกต่างกัน ไปตาม Template ที่เลือกใช ้งาน
  69. 69. template position preview Administrator > Extensions > Template Manager > Options > Global Configuration for Templates > Preview
  70. 70. template position preview พิมพ์ ?tp=1 ต่อจำก url เว็บไซต์ http://www.youtsite.com/?tp=1 http://127.0.0.1/xxx/?tp=1
  71. 71. เปลี่ยนชื่อเว็บไซต์ที่ Template Extensions > Template manager > Beez2 – Default
  72. 72. Search Module ณ ตาแหน่ง Position-0 • ตัวอย่าง ต ้องการเปิดใช ้งาน Search Module เพื่อเป็น ช่องทางให ้ผู้ใช ้ป้อนคาค ้น สาหรับค ้นเนื้อหาต่างๆ ภายใน เว็บ และแสดงผล ณ ตาแหน่ง Position-0 • Extensions, Module Manager
  73. 73. Search Module ณ ตาแหน่ง Position-0 • คลิกปุ่ ม New • คลิกรายการ Search
  74. 74. Search Module ณ ตาแหน่ง Position-0 1) ป้อนชื่อ Module 2) ตั้งค่าการแสดงผล 3) เลือกตาแหน่ง
  75. 75. Search Module ณ ตาแหน่ง Position-0
  76. 76. ปรับแต่ง Search Module Box Width ความกว ้างของช่องสืบค ้น Text ข ้อความที่ต ้องการให ้ปรากฏในช่อง สืบค ้น Search button แสดงปุ่ มคลิกเพื่อสืบค ้น หรือไม่ Button Position ตาแหน่งที่ต ้องการให ้แสดง ปุ่ มสืบค ้น Search button as image ต ้องการแสดงปุ่ ม สืบค ้นเป็นรูปภาพหรือไม่ Button Text ข ้อความกากับปุ่ มสืบค ้น
  77. 77. ข่าวสั้นแบบ Custom HTML Module • Custom HTML Module เป็นโมดูลที่อนุญาตให ้ ผู้พัฒนาเว็บสามารถนาเนื้อหาใดๆ มาแสดงผล ได ้อิสระ โดยใช ้ความสามารถของภาษา HTML • ข่าวประกาศ • การแลกเปลี่ยน Banner
  78. 78. แบนเนอร์ลิงค์แบบ Custom HTML Module • Extensions, Module Manager, New, Custom HTML • ป้อน/วางภาพ/คาสั่งใน Custom Output
  79. 79. การนาเข ้ารูปภาพ • รูปภาพจะต ้องมีฟอร์แมตเป็น .jpg, .gif, .png • กาหนดขนาดอย่างเหมาะสม ก่อนนาเข ้าระบบ • คลิกเมาส์ ณ ตาแหน่งที่ ต ้องการวางภาพ • คลิกปุ่ ม Image 1
  80. 80. การนาเข ้ารูปภาพ • คลิกปุ่ ม Browse เพื่อเลือกภาพแล ้วคลิกปุ่ ม Start Upload 2
  81. 81. การนาเข ้ารูปภาพ • คลิกเลือกภาพ ป้อนคาอธิบายภาพ และคลิกปุ่ ม Insert 3 4 5
  82. 82. • คลิกเลือกภาพหรือเลือกข ้อความ คลิกปุ่ ม Insert/edit link • ป้อน URL และเลือกรูปแบบ Target คลิกปุ่ ม Insert การสร ้างจุดเชื่อม (Link) 1 3 2
  83. 83. Custom HTML Module
  84. 84. ปรับแก ้ไข Module • Extension, Module Manager
  85. 85. Login Module • Login Module เป็นโมดูลที่ช่วยควบคุมการเข ้าสู่ ระบบโดยสมาชิกที่กาหนด • Extension, Module Manager, New, Login,
  86. 86. Login Module • Login Module จะเกี่ยวข ้องกับค่า ระบบใน Global Configuration ดังนี้
  87. 87. Login Module • Login Module จะเกี่ยวข ้องกับค่า ระบบใน Global Configuration ดังนี้
  88. 88. Custom HTML Module เฉพาะสมาชิก สร ้าง Custom HTML Module โดยเป็นข่าว ประกาศเฉพาะสมาชิก ดังตัวอย่าง
  89. 89. ค่ากาหนดที่สาคัญของ Custom Module เฉพาะสมาชิก Access Level ระดับการเข ้าถึง • Public ทุกคน • Registered เฉพาะสมาชิก • Special เฉพาะ ผู้ดูแลระบบ
  90. 90. Custom HTML Module เฉพาะสมาชิก • เมื่อ Preview ในสภาวะปกติ จะพบว่า Module นี้จะไม่ ปรากฏ • เมื่อ Login เข ้าสู่ระบบจะปรากฏ Module ดังกล่าว ดังนี้
  91. 91. การจัดการสมาชิกด ้วย User Manager • สร ้างสมาชิกใหม่ • บริหารจัดการสมาชิก • จัดการได ้ด ้วยคาสั่ง User, User Manager
  92. 92. ประเภทสมาชิก • Front-end สมาชิกที่มีสิทธิ์ Login จาก หน้า Front-end • Registered สมาชิกที่มีสิทธิ์เข ้าถึง เนื้อหาที่กาหนดสิทธิ์เฉพาะสมาชิก (Access Level = Registered) แต่ไม่ มีสิทธิ์สร ้าง/เผยแพร่เนื้อหาเข ้าระบบ • Author สมาชิกที่มีสิทธิ์เขียนเนื้อหา และแก ้ไขเนื้อหาของตนเองได ้(โดย เนื้อหานั้นต ้องผ่านการอนุมัติมาแล ้ว) • Editor สมาชิกที่มีสิทธิ์เขียนเนื้อหา และแก ้ไขเนื้อหาทั้งของตนเองและ ผู้อื่นได ้(โดยเนื้อหานั้นต ้องผ่านการ อนุมัติมาแล ้ว) • Publisher สมาชิกที่มีสิทธิ์ทาได ้ทั้ง เขียน แก ้ไขและอนุมัติการแสดงผล เนื้อหา • Back-end สมาชิกที่มีสิทธิ์ Login ได ้ ทั้ง Front-end และ Back-end • Manager สมาชิกที่มีสิทธิ์เหมือนกับ Publisher แต่สามารถทางานผ่านหน้า Administrator ได ้ทาให ้สามารถเพิ่ม/ ลบ Section/Category ของเนื้อหาได ้ • Administrator มีสิทธิ์เกือบเท่ากับ Super Administrator ยกเว ้นการสร ้าง สมาชิกที่เป็น Super Administrator • Super Administrator สมาชิกที่มีสิทธิ์ เต็มระบบ
  93. 93. สร ้างเนื้อหาเว็บไซต์ • วิเคราะห์เนื้อหาที่ต ้องการนาเสนอ • จัดเตรียม/ออกแบบเนื้อหาให ้เหมาะสมกับการนาเสนอผ่านเว็บ • เลือกรูปแบบการนาเสนอเนื้อหา • นาเสนอเนื้อหาในรูปแบบ Module • นาเสนอเนื้อหาผ่าน Component + Module • นาเสนอเนื้อหาในรูปแบบเมนู • Component • Article Manager • Static Content • Dynamic Content • นาเสนอเนื้อหาผ่าน Front Page
  94. 94. Module Module Module Module Module
  95. 95. เนื้อหา – กรณีตัวอย่าง • Why Thailand • Thailand's Advantages • Reasons to invest here • Infrastructure • Human Resources • Sectors of Opportunity • About BOI • Introducing the BOI • Organization Chart • BOI's Executives Joomla Section 1 Category 1 Category 2 Category 3 Article 1 Article 2 Article … Section 2 Section 3
  96. 96. เนื้อหา – กรณี BOI • Why Thailand • Thailand's Advantages • Reasons to invest here • Infrastructure • Human Resources • Sectors of Opportunity • About BOI • Introducing the BOI • Organization Chart • BOI's Executives BOI Why Thailand Why Thailand Thailand’s Advantages Reasons to invest here … About BOI Introducing to BOI Organization Chart BOI's Executives News News News 1 News 2 News …
  97. 97. เนื้อหากรณีอื่นๆ Section/Category/Article Website ข่าว ข่าว ประชาสัมพันธ์ งานวันครู สัมมนา วิชาการ ข่าวจัดซื้อจัด จ ้าง จัดซื้อ คอมพิวเตอร์ จัดซื้อ Server สาระความรู้ วิทยาศาสตร์การสอน
  98. 98. ขั้นตอนการสร ้างเนื้อหา • สร ้างหมวดเนื้อหาระดับ Category • Content, Category Manager • สร ้างเมนูแสดงผลเนื้อหาระดับ Section หรือ Category • Menus, Main Menu • สร ้างเนื้อหา • Content, Article Manager
  99. 99. Category Manager
  100. 100. สร ้างเมนูควบคุม Category
  101. 101. สร ้างเมนูควบคุม Section/Category
  102. 102. ดึงข่าวอัตโนมัติด ้วย Feed Display Module
  103. 103. Feed URL • URL ที่ถูกออกแบบมาเพื่อให ้สามารถดึงข ้อมูลในรูปแบบ XML - RSS ไปแสดงผลผ่านตัวอ่าน RSS Reader ได ้อัตโนมัติ 1
  104. 104. http://rssthai.com http://news.thaipbs.or.th/rss
  105. 105. สร ้างแบบสอบถามด ้วย Poll Component • Component เป็น Extension ที่ออกแบบมาเพื่อ บริหารจัดการงานใดๆ อันเป็นการเพิ่มความสามารถ ของ Joomla • Component มักจะเป็นส่วนในการสร ้างเนื้อหา การจะใช ้งานหรือแสดงผลจะถูกควบคุมด ้วย Menu หรือไม่ก็ Extension ที่เป็น Module หรือ Plug-ins • ตัวอย่าง Component ที่มาพร ้อมกับ Joomla คือ Poll ช่วยออกแบบแบบสอบถามอย่างง่าย
  106. 106. สร ้างแบบสอบถามด ้วย Poll Component • Components, Polls, New
  107. 107. สร ้างแบบสอบถามด ้วย Poll Component 1) ป้อนคาถามใน Title และชื่อกากับ ที่เป็นภาษาอังกฤษใน Alias 2) เลือก Published เป็น Yes เพื่อ เปิดใช้งาน Poll 3) ป้อนตัวเลือก 4) คลิกปุ่ม Save เพื่อบันทึก
  108. 108. สร ้างแบบสอบถามด ้วย Poll Component
  109. 109. แสดงผล Poll ด ้วย Poll Module • Extensions, Module Manager, New, Poll
  110. 110. แสดงผล Poll ด ้วย Poll Module
  111. 111. แสดงผล Poll ด ้วย Poll Module
  112. 112. คลังเว็บไซต์ด ้วย Web Link Components • Components, Web Links คลังเว็บไซต์ สถาบันการศึกษา มหาวิทยาลัย เกษตรฯ จุฬาลงกรณ์ฯ มหาวิทยาลัย ธรรมศาสตร์ สานักข่าว ช่อง 3 ช่อง 5 … ห ้องสมุด มก.บางเขน มก.กาแพงแสน …
  113. 113. คลังเว็บไซต์ด ้วย Web Link Components • Components, Web Links, Categories, New
  114. 114. คลังเว็บไซต์ด ้วย Web Link Components • Components, Web Links, Categories, New
  115. 115. คลังเว็บไซต์ด ้วย Web Link Components • Components, Web Links, Links, New
  116. 116. คลังเว็บไซต์ด ้วย Web Link Components • Components, Web Links, Links, New
  117. 117. คลังเว็บไซต์ด ้วย Web Link Components • Menus, Main Menu, New, Web Links, Web Link Category List Layout
  118. 118. คลังเว็บไซต์ด ้วย Web Link Components
  119. 119. คลังเว็บไซต์ด ้วย Web Link Components
  120. 120. ปรับแต่งการแสดงผล Web Links
  121. 121. ติดต่อสอบถาม – Contact Component • Components, Contacts, Categories, New • สร ้างหมวดการติดต่อ
  122. 122. ติดต่อสอบถาม – Contact Component • Components, Contacts, Contacts, New • สร ้างรายการติดต่อ
  123. 123. ติดต่อสอบถาม – Contact Component • Components, Contacts, Contacts, New • สร ้างรายการติดต่อ
  124. 124. สร ้างเมนูเรียกใช ้ฟอร์มติดต่อสอบถาม • Menus, Main Menu, New, Contacts, Standard Contact Layout
  125. 125. การสร ้างเนื้อหาบทความ Static • สร ้างเนื้อหาด ้วย Content, Article Manager • เลือก Category เป็น Uncategorized • สร ้างเมนูแสดงผลเนื้อหาด ้วย Menus, Main Menu, New, Article, Article Layout
  126. 126. Article Parameter
  127. 127. การแสดงผลเนื้อหา
  128. 128. การสร ้างเมนูควบคุมบทความ
  129. 129. การแสดงผลเนื้อหาหลัก  เนื้อหาหลักแสดงผลผ่าน Front-end  เนื้อหาล่าสุดแสดงแบบเต็มคอลัมน์เดียว  เนื้อหาอื่นๆ แสดง 2 คอลัมน์  สามารถกาหนดเฉพาะส่วนต ้น (Intro) แล ้วคลิกดูเนื้อหาที่เหลือ  แต่ละเนื้อหามีปุ่ มควบคุมเพิ่ม อย่างน้อย 3 ปุ่ ม  ปุ่ มสร้างเอกสาร PDF  ปุ่ มส่งอีเมลแนะนาเนื้อหา  ปุ่ มสั่งพิมพ์เนื้อหา  มีส่วนรายละเอียดการสร ้าง/แก ้ไข
  130. 130. Joomla Extension  Component  โปรแกรมที่ออกแบบมาเพื่อเพิ่มความสามารถของ Joomla ให ้ ทางานตามวัตถุประสงค์ เช่น JoomGallery สาหรับจัดการคลังภาพ  Module  โปรแกรมย่อยที่ออกแบบมาเพื่อควบคุมการแสดงผล หรือทางานที่ มีลักษณะไม่ใหญ่มากนัก เช่น โปรแกรมที่ออกแบบเพื่อแสดงผล ภาพของ JoomGallery ในลักษณะสไลด์  Plugin  โปรแกรมขนาดเล็กสุดที่ออกแบบเพื่อควบคุมการทางาน หรือช่วย ให ้งานสะดวกขึ้น เช่น JoomGallery Search ที่ทาให ้สามารถสืบค ้น ภาพได ้
  131. 131. การดาวน์โหลด Extension • เลือกและดาวน์โหลด Extension จากเว็บไซต์ http://www.joomla.org • ไฟล์ที่ได ้มักจะมีส่วนขยายเป็น .zip • ไม่ต ้อง unzip (ยกเว ้นบาง extension ที่มีการระบุไว ้ เฉพาะให ้unzip ก่อน) • มักจะคาบ่งชี้เฉพาะ เช่น • com_ แสดงว่าเป็น Components • mod_ แสดงว่าเป็น Module • plg_ แสดงว่าเป็น Plugins
  132. 132. การติดตั้ง Extension  เข ้าสู่เว็บไซต์ Joomla ในโหมด Administrator  http://127.0.0.1/administrator  http://doname/administrator  เลือกเมนูคาสั่ง Extension, Install/Uninstall
  133. 133. การติดตั้ง Extension • คลิกปุ่ ม Browse เพื่อเลือกไฟล์ Extension แล ้ว คลิกเลือก Upload & Install
  134. 134. การติดตั้ง Extension  ผลการติดตั้ง Extension ที่สมบูรณ์
  135. 135. ตรวจสอบการติดตั้ง Extension  Extension ที่ติดตั้งแล ้ว สามารถตรวจสอบได ้ 3 จุด ตามประเภทของ Extension คือ  เมนู Components  เมนู Module Manager  เมนู Plugin Manager
  136. 136. การถอนการติดตั้ง Extension  เลือกเมนูคาสั่ง Extension, Install/Install  คลิกเลือกแท็บประเภท Extension เช่น Components แล ้วเลือก Extension คลิกปุ่ ม Uninstall
  137. 137. ศึกษาและฝึกปฏิบัติ Joomla Extensions • http://extensions.joomla.org/
  138. 138. ห ้องสมุดออนไลน์ด ้วย Book Library  ดาวน์โหลด Extension Book Library  com_booklibrary_BASIC_1_5_3_2010_07_05.zip  ติดตั้ง Book Library Component
  139. 139. เทคนิคน่ารู้สาหรับ Web Master
  140. 140. ข ้อแนะนาการสร ้างรหัสผ่าน  กาหนดเกณฑ์การสร ้างรหัสผ่านให ้ตนเอง  ให ้ความสาคัญกับการสร ้างรหัสผ่าน  เช่น กาหนดอักขระพิเศษให ้สระ ปิดท ้ายด ้วย #  A $  E +  I ^  O @  U ! kampaengsaen k$mp$+ngs$+n#
  141. 141. การแก ้ไข Source Code ด ้วย NotePad++  NotePad++ Text Editor
  142. 142. ฟอนต์ภาษาไทยกับเว็บ HTML <font face=“Tahoma, MS Sans Serif, Thonburi”>…</font> CSS font-family: Tahoma, “MS Sans Serif”, Thonburi; เอกสารเว็บของท่าน กาหนดฟอนต์ใด
  143. 143. ตัวอักษรแตกเมื่อขยายขนาดฟอนต์
  144. 144. แหล่งข ้อมูลเพิ่มเติม  http://stks.or.th/wiki  http://stks.or.th/blog  http://stks.or.th/  http://slideshare.net/firstpimm

×