joomla! cms

Joomla! CMSPresent by

ออ..เอกรัตนเอกรัตน ตันกําแหงตันกําแหง

วิทยากรวิทยากร

อ.เอกรัตน ตันกาํแหงMr.Eakkarat Tangamhang

E-mail : eakkabank@gmail.comWebsite : 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