Joomla! CMS Present by อ อ . . เอกรัตน เอกรัตน ตันกําแหง ตันกําแหง
Joomla! CMSPresent by
ออ..เอกรัตนเอกรัตน ตันกําแหงตันกําแหง
วิทยากรวิทยากร
อ.เอกรัตน ตันกาํแหงMr.Eakkarat Tangamhang
E-mail : [email protected] : www.iamctd.com/eakkarat
Power by Joomla CMS
ยุคของเว็บไซต
• Web 1.0 = Read Only, static data withsimple markup
• Web 2.0 = Read/Write, dynamic datathrough web services
• Web 3.0 = Read/Write/Relate, data withstructured metadata + managed identity
Web 1.0
ยุค Web1.0 เว็บไซตในยุคนี้จะเปนการนําเสนอขอมูลตางๆ ของผูใหบริการเว็บไซตเผยแพรแกบุคคลทั่วไปที่สนใจ โดยเนื้อหาจะมีลักษณะเชนเดียวกับหนังสือ คือ ผูสนใจเขามาอานขอมูลตางๆ ไดเพียงอยางเดียว ไมมีสวนรวมในการนําเสนอหรือมีนอยคอนขางนอย
Web 2.0
ยุค Web2.0 ในยุคนี้ ผูใชงานอินเตอรเน็ตสามารถสรางเนื้อหา และนําเสนอขอมูลตางๆ มีการแบงปนความรูซึ่งกันและกัน อยางเชน เว็บสารานุกรมออนไลน wikipedia หรือการแชรไฟลมัลติมีเดียใน youtube เปนตน นอกจากนี้ผูสนใจเขาเยี่ยมชมเว็บไซตหรือบุคคลทั่วไปยังสามารถเพิ่มเติม
ขอมูล หรือสารสนเทศตางๆ เพื่อใหเว็บไซตมีความสมบูรณ
และมีขอมูลที่ถูกตองที่สุด
Web 3.0
ยุค Web 3.0 นั่น เปนการเพิ่มแนวความคิดในการจัดการขอมูลซึ่งเพิ่มจํานวนขึ้นอยางมากมายมหาศาลจากผล
พวงของเว็บในยุค Web 2.0 ทําใหเว็บตางๆ ตองมีระบบบริหารจัดการเว็บใหดีขึ้น งายขึ้น ดวยรูปแบบ metadata ซึ่งก็คือ การนําขอมูลมาบอกรายละเอียดของขอมูล หรือ data about data โดยระบบเว็บจะจัดการคนหาขอมูลใหเราเอง
การสรางเวบ็ไซตทั่วไป
• จดชื่อโดเมน (Domain Name)
• เชาพื้นที่ (Hosting)
• ออกแบบเวบ็ไซต
• เขียนโปรแกรมเพือ่จัดการระบบตางๆ เชน ระบบสมาชิก, ระบบการจัดการเนื้อหาบนเวบ็ไซต เปนตน
• อัพโหลดขึ้นเว็บไซต (Upload FTP)
• ประชาสัมพันธเว็บไซต
• อัพเดท และพัฒนาเว็บไซต
เครื่องมือในการพัฒนาเว็บไซต
GraphicAdobe Photoshop, Adobe Flash, Macromedia Framework etc.
WebEditor : HTML by Editplus, Notepad++ etc.WYSIWYG : Adobe Dreamwaver, Namo, Golive, Microsoft Frontpage etc.
เครื่องมือในการพัฒนาเว็บไซต
Programming HTML, DHTML, XHTML, PHP, ASP, JAVA, Perl, CGI Script, AJAX etc.
DatabaseMySQL, Microsoft SQL Server, Microsoft Access, Oracle etc.
Proprietary SoftwareProprietary Software
คือ โปรแกรมสวนมากที่ไมเปดเผยซอรสโคด
ขอจํากัด
•ผูใชมีสิทธิ์แคใชโปรแกรมเทานั้น ไมมีสิทธิ์แกไข•การปรับปรุงโปรแกรม ตองรอบริษัทผูผลิตเพียงเจาเดียว•เกิดการผูกขาดในอุตสาหกรรม
Free Software
ซอรฟแวร ทีม่ีเสรีภาพในการ• ใชงาน (freedom to run)
• ศึกษา (freedom to study)
• แจกจายตอ (freedom to redistribute)
• ปรับปรุง (freedom to improve)
Open Source Software
Open Source Software: OSS – ซอรฟแวรรหัสเปด
• ซอฟตแวรใดๆก็ตามที่ประกาศวาเปน“โอเพนซอรส” มีคุณลักษณะ
ตามหลักเกณฑของ OpenSource.org(www.opensource.org/docs/definition.php)
• ปจจุบันมีลิขสิทธิ์ที่ไดรับการรับรองมากกวา 50 ชนิด ซึ่งรวมถึง GPL, LGPL, MPL and BSD
ประเภทของลิขสิทธิ์
• LGPL (GNU Lesser General Public License) ไมตองเปดเผยซอรสโคดในสวนที่เปนโปรแกรมเดิมของผูพัฒนาเองแตตอง
เปดเผยในสวนที่เปนโอเพนซอรส หากมีการเอามาพัฒนารวมกัน
• Creative Common Licensehttp://creativecommons.org/about/licenses อนุญาต
ใหใชงานได ภายใตเงื่อนไขแบบตางๆ• BSD (Berkeley Software Distribution) ไมจําเปนตองเปดเผย
ซอรสโคด แลวแตผูพัฒนาจะเปดเผยหรือไมก็ได
ขอดขีอง open source
•ลดการละเมิดลิขสิทธิ์
ผูที่มีสิทธิ์การใชงานสามารถแจกจาย แกไข และขายไดอยางอิสระ
แกไขและปรับปรุงโปรแกรมไดเอง หรือจางเพื่อพัฒนา
เองไดตามตองการ
กอใหเกิดการแขงขันระหวางผูพัฒนา และการเติบโตของอุตสาหกรรมซอรฟแวร
ขอดขีอง open source
•ลดคาใชจาย
ผูใชไมตองเสียคาใชงานผลิตภัณฑ
จายเฉพาะคาอบรม, คาสนับสนุน เปนตน
Product
Service
Service
Cost
Cost
คําศัพทที่ควรรู
• Internet <Inter Network>• IP Address• Domain Name• URL <Uniform Resource Locator>• World Wide Web <www>• Web Server• Web Browser• Web Site• Web Page• Home Page
Benefits of Web Site
• เพื่อโอกาสทางการตลาด
• โฆษณาราคาถูก
• ประหยัดคาใชจาย
• ทดลองตลาด
• เพิ่มขอมูลไดทันที
• สรางภาพพจน
• เขาถึงกลุมเปาหมาย
• ฯลฯ
Work Flow Web
• Web Marketing• Web Design• Web Content• Web Programmer/ Develop• Web Master
Web Marketing
• วางแผนการตลาดบนอินเตอรเน็ตในรูปแบบตางๆ ศกึษาเว็บคูแขง วางตําแหนงเว็บไซต (Positioning) หา concept รางโครงรางเว็บไซต การประชาสัมพันธ
Web Design
• ออกแบบหนาตาของเว็บไซต กาํหนดรูปแบบ (Theme) ของเว็บไซต โดยเชื่อมโยงกับแนวคดิการตลาดจากกลุม Marketing
Web Content
• การจัดวางขอมูลขาวสาร (Content) ในหนาเว็บไซต ทําหัวขอตางๆ ของเว็บไซต (Web Outline) วางโครงสรางเว็บ
Web Programmer/ Develop
• ออกแบบฐานขอมูลของเว็บไซต (Database Design) ออกแบบกระบวนการทํางาน การเชื่อมตอของ WebPages (Page Flow Design) ที่เชื่อมตอระหวางแนวความคิดของ Design/ Content/ Marketing เขาดวยกัน
Web Master
• ผูวางแผน ดูแล บริหารและจัดการเวบ็ไซต ใหบรรลุตามวัตถุประสงคที่วางไว กลาวคือ– เว็บมาสเตอรเปนหวัใจหลกัของการบริหารเว็บไซต
• เว็บมาสเตอร ไมจําเปนตองเขียนโปรแกรมเปน ไมจาํเปนตองเขียนเว็บไซตได
การสราง Web Page
• เขียนเวบ็เพจดวย HTML
– วิธีนี้ ผูเขียนจะตองเรยีนรูการเขียนภาษา HTML เอง ซึ่งสามารถเขยีนไดบน Text Editor ทั่ว ๆ ไป เชน Notepad, WordPad , EditPlus, Microsoft Word แตเวลา Save ไฟลจะตองเปนนามสกลุ .htm หรือ .html
• เขียนเวบ็เพจโดยใช Tools
– วิธีนี้เหมาะสําหรับผูเขียนเว็บเพจมือใหม เพราะในตัวโปรแกรมจะมีตัวชวยในการทําเว็บเพจใหสามารถทําไดงายขึน้ เชน FrontPage , Dream Weaver, Netscape Composer
HTML <Hypertext Markup Language>
• เปนภาษาที่ใชในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอรเพื่อ
ตอบสนองในการแสดงผลบนจอภาพในระบบอินเทอรเน็ต ในลักษณะของเว็บเพจ ซึง่สามารถแสดงผลไดทั้งขอความ รูปภาพ ภาพนิง่ ภาพเคลือ่นไหว เสียง หรือแมกระทั่งการเชือ่มโยงไปยังเว็บไซตอื่นๆ ในระบบอินเทอรเน็ต
โปรแกรมที่ใชเขียน และ Complied
• Text Editor– เปนสวนที่ใชสาํหรับกาํหนดขอความ และรูปแบบคาํสั่งตางๆในมาตรฐาน
ของ HTML ซึ่งอาจะใช Notepad หรอื EditPlus กไ็ด แตเวลาเวลาบันทกึจะตองเปนนามสกุล .html หรอื .htm
• Web Browser
– เปนสวนที่ใชเรยีกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบอินเทอรเน็ต เปรยีบเสมือนการการคอมไพลและการรนัโปรแกรมในทางคอมพวิเตอร สําหรับ Web Browser ที่นยิมใชกันอยู คอื Internet Explorer และ Fire fox
Web Content Management System
CMS : เปนระบบบริหารการจัดการเนื้อหาแบบสําเร็จรูปประกอบดวย
• ระบบจัดการหนาตางเวบ็ Theme/ Template
• ระบบจัดการเนื้อหาขอมูล Content
• ระบบจัดการปายโฆษณา Banner
• ระบบสมาชิก User Manager
• สามารถพัฒนาเพิ่มเติมสวนตางๆของโปรแกรมได Component/ Module
Introduction to JoomlaIntroduction to Joomla
เปนโปรแกรมบริหารจัดการเว็บไซตที่ไดรับความนิยมอยาง
มากในปจจุบัน ดวยเหตุผลหลายอยางที่เลือกใช• เผยแพรและแกไขเนื้อหา ขาวสาร ประชาสัมพันธ และรูปภาพ• สรางและแบงหมวดหมูของเนื้อหาไดอยางสะดวก• สงเสริมการทําตลาดบนเว็บ ดวยการตรวจสอบสถิติผูเยี่ยมชม การสรางแบบสํารวจ จัดการแบนเนอรโฆษณา และสงอีเมลถึงสมาชิก• การจัดเว็บลิงคอยางงาย• การ Feed ขาว และการบริการสมาชิก
Joomla! Sample
www.joomla.org
www.joomlacorner.com
www.laingao.com
www.idesign.in.th
www.get-along.com
www.shopkajai.com
www.aquacheme.com
joomla.bu.ac.th
แนวคิดที่ตองคํานึงถงึการสรางเว็บไซต
• ชื่อโดเมนเนมจดจํางายและนาสนใจ
• การคิดและจดัลําดับเนื้อหาและการบริการ
• การดึงดูดผูเขาชมเว็บ
• วางกลไกรับผลประโยชนจากผูชม
ออกแบบสํารวจความสนใจของผูเขาชมเว็บ
วิเคราะหสถิติการเขาชมเวบ็วาผูเขาชมสนใจอะไรเปนพเิศษ
ใหผูเยีย่มชมมีสวนรวมในการสรางเนื้อหา และดแูลเว็บมีระบบสมคัรสมาชกิ , เพิม่ฐานสมาชกิ และการจดัเกบ็คาโฆษณา
การติดตั้ง Joomla
การติดตั้ง Joomla แบงเปน 2 แบบดวยกัน คือ1. การติดตั้ง Joomla ใชงานบนพื้นที่เวบ็ไซตจริง2. การติดตั้ง Joomla ใชงานบนพื้นที่เวบ็ไซตจําลอง ***
Process of Joomla
ดาวนโหลด และติดตั้ง Apche, PHP,
MySQL, phpMyadmin
สรางฐานขอมูล
ดวย phpMyadmin
ดาวนโหลด และติดตั้ง Joomla
การติดตั้งโปรแกรมในการจําลอง Server
• ดาวนโหลดโปรแกรมในการจําลองเครื่อง
– AppServ 2.5.x ขึ้นไป– WM Server Tool– Xampp
• ซึ่งโปรแกรมเหลานี้เปนโปรแกรมสําเร็จรูป ที่พรอมไปดวย– phpMyadmin– Apache– MySQL– PHP
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
• ดับเบิ้ลคลิก AppServ 2.5.9
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
localhost
E-mail admin
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
Password root
Encoding language
Confirm password
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
Please wait
การติดตั้งโปรแกรมในการจําลอง Server (ตอ)
Test Server AppServ
• Double Click Web Browse• Enter localhostlocalhostOr• Enter 127.0.0.1
Test PHP Script
• Double Click Text Editor (Editplus)• New File > Normal Text
<?phpphpinfo();
?>• Save in : c:/AppServ/www/…• Save > File Name: test.php
Test PHP Script (ตอ)
• Double Click Web Browse• Enter localhostlocalhost/test.php/test.php
Setup Joomla
• ดาวนโหลดโปรแกรม Joomla มากอนจาก www.joomla.org
• จากนั้นทําการแตกไฟล .zip ออก แลวคัดลอกมาวางไวใน c://AppServ/www
• ทําการเปลี่ยนชื่อโฟลเดอรตามตองการ
Setup Joomla (ตอ)
• Double web browser•พิมพในชอง Address bar วา
http://localhost/ชื่อโฟลเดอรที่เราคัดลอกมาวางเชน
http://localhost/siamtraining
Setup Joomla (ตอ)
1
2
Setup Joomla (ตอ)
Setup Joomla (ตอ)
Setup Joomla (ตอ)
1
3
5
2
4
Setup Joomla (ตอ)
1. กําหนดประเภทของฐานขอมูล
2. กําหนดชื่อ Host เริ่มตนในการใชงาน3. กําหนด Username ในการเขาใชฐานขอมูล4. กําหนด Password ในการเขาใชฐานขอมูล5. กําหนดชื่อฐานขอมูล
Setup Joomla (ตอ)
Setup Joomla (ตอ)
1
23
4
5
Setup Joomla (ตอ)
1. กําหนดชื่อเว็บไซต
2. กําหนด e-mail ของ Admin3. กําหนด password ของ Admin4. ยืนยนั Password ของ Admin5. ติดตัง้ขอมูลตัวอยางหรือไม
Setup Joomla (ตอ)
Setup Joomla (ตอ)
• ทําการลบ หรือเปลี่ยนชื่อโฟลเดอร Installation
• จากนั้นก็สามารถเขาใชงาน Joomla ไดตามปกติ
การเขาใชงาน Joomla
มีการเขาใชงานอยู 2 สวน คือ• สวนของหนาเวบ็ไซตปกติ
• สวนของหนาผูดแูลระบบ
หนาเว็บไซตปกติ
หนาเว็บไซตผูดูและรบบ
การจัดการและบริหารเว็บไซต
• การจัดการในสวนของผูดูแลระบบ
• ทําการเขาสูระบบในฐานะผูดูแลระบบกอน
• ระบุ Username
• ระบุ Password• Login
สวนประกอบหนาผูดูแลระบบ
Menu bar
Control Panel
Contents
Global Configuration
เปนการกาํหนดคาพื้นฐานของเว็บไซต โดยคลิกที่ Menu Site > Global Configuration
Setup Language Thai
• Download Thai-Language for Joomla From http://joomlacode.org/gf/project/thai/frs
• Menu Extensions > Install/Uninstall• Click Browse > Select file
th-TH_joomla_lang_full.1.5.9v2.zip
• Click Upload File & Install
Change Language
• Menu Extensions > Language Manager• Select Site or Administrator tabs• Select option language
• Click Default
Media Manager
เนือ้หาที่นําเสนอบนเว็บไซตสวนใหญประกอบไปดวยภาพ และภาพเคลื่อนไหว ซึง่การที่เราจะบริหารจัดการจะสามารถทําไดงายดวย Media Manager ทําใหการทํางานนั้นงายขึ้น• Menu Site > Media Manager
Process Media Manager
Media Manager
Create Folder
Upload file to folder
Delete Folder & File
Template for Joomla
เปนหนาตางของเว็บไซต ไมวาจะเปนรูปแบบในการจัดวางเนื้อหา การใชขอความ สี และกราฟกโดยรวมใหกับเว็บไซต รวมถึงเปนขอดีอยางหนึ่งที่หลายๆคนสนใจ CMS โดยเฉพาะ Joomla
Process Template for Joomla
Template Manager
Change Template
Edit Template
Delete Template
Install Template
For•Site•Administrator
Module