Joomla! final

LOGO

Joomla! 2.5 Training

Website: www.isan.msu.ac.th/apirak E-mail: apirak@isan.msu.ac.thMr.Apirak Tooltham, ISAN Research Group.

ISAN Research GroupMahasarakham University Faculty of Informatics

ISAN Research Group

Contents

Introduction to Joomla!1

Installing Joomla!2

Organizing your Joomla!3

Templates & Extensions4

ISAN Research Group

Joomla! 2.5 Training

3 Days: Joomla! Training Course

LOGO

Day 1: Introduction to Joomla!Mr.Apirak Tooltham, ISAN Research Group.

ISAN Research Group

Introduction Movie

ISAN Research Group

Joomla! 2.5 Training

Introduction

ISAN Research Group

Joomla! 2.5 Training

Joomla! เป็�นระบบจัดการเน �อหา “Content Management System” (CMS) ป็ระเภท Open Source ซึ่��งป็�จัจั�บน Version 2.5 และ 3.0

“ หั�วใจของการทำ�าเว�บไซต์� คื�อ ข�อมู�ลทำ��อ�พเดต์ เคืล��อนไหัวต์ลอดเวลา มู!ใช่#เพ�ยงแคื#หัน�าต์าทำ��สวยงามู ”

What is Joomla!

Introduction to Joomla! [2]

ISAN Research Group

Joomla! 2.5 Training

Why Joomla!

สามูารถจ�ดการเน�(อหัาภายในเว�บไซต์�ได�อย#างเป็+นระบบ

ไมู#ต์�องมู�คืวามูร��ในการเข�ยนโป็รแกรมูหัร�อฐานข�อมู�ล

ใช่�ระยะเวลาส�(นในการพ�ฒนาเว�บไซต์�

เป็+น Open Source จ0งสามูารถใช่�งานได�ฟร�มู�กล2#มูผู้��ใช่�และน�กพ�ฒนาอย�#ทำ��วโลก จ0งมู�การพ�ฒนาอย�#อย#างต์#อเน��อง

สามูารถน�าโป็รแกรมูเสร!มูต์#างๆ มูาเพ!�มูป็ระส!ทำธิ!ภาพของเว�บไซต์�ได�

Abilities

Intranet

PersonalWebsite Corporate

Website

E-Commerce

Community

Joomla! 2.5

สามูารถน�ามูาใช่�เป็+น

ISAN Research Group

Joomla! 2.5 Training

Example Website

ISAN Research Group

Joomla! 2.5 Training

Discover over 3187 Government web sites built with Joomla!

Interface

Front-End

เป็�นส่�วนแส่ดงผลข้!อมู#ลข้องเว$บไซึ่ต์'

Joomla!Interface

Back-End

เป็�นส่�วนท(�ใช้!ในการบร+หารจัดการเว$บไซึ่ต์'

ISAN Research Group

Joomla! 2.5 Training

Interface [2]

ISAN Research Group

Joomla! 2.5 Training

Front End

Top Menu

Web ContentSide Menu

Interface [3]

ISAN Research Group

Joomla! 2.5 Training

Back End

Information Panel

Shortcut Button

Menu Bar

Installation Type

Installing

Local Host

Apache

MySQL

PHP

Apache

MySQL

PHP

ISAN Research Group

Joomla! 2.5 Training

Web Hosting

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop

Assignment Workshop

ท,าการต์+ดต์�งโป็รแกรมูจั,าลอง Server ลงบนเคร �องคอมูพิ+วเต์อร'ข้องผ#!เข้!ารบการอบรมู จัากน�นท,าการ Copy ไฟล'ข้!อมู#ลข้อง Joomla! ลงใน Local Host เร(ยก http://localhost:8080 เพิ �อต์รวจัส่อบการท,างาน จัากน�นส่ร!างฐานข้!อมู#ลใน MySQL ด!วย PHPMyAdmin แล!วท,าการต์+ดต์�ง Joomla! 2.5 จัากน�นทดลองเร(ยกหน!า Front-End และ Back-End เพิ �อต์รวจัส่อบผลการต์+ดต์�ง

ISAN Research Group

Joomla! 2.5 Training

Installing Web Server

Installing Web Server

USBWebserver Version 8.5

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop

http://localhost:8080

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [2]

Create MySQL Database User: root

Password: usbwhttp://localhost:8080/phpmyadmin/

1

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [3]

Create MySQL Database

2

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [4]

Create MySQL Database

3 4

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [5]

Create MySQL Database

5

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [6]

Installing Joomla!http://localhost:8080/joomla

1

2

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [7]

Installing Joomla!

3

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [8]

Installing Joomla!

4

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [9]

Installing Joomla!

6

5

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [10]

Installing Joomla!

7

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [11]

Installing Joomla!

8

9

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [12]

Installing Joomla!

10

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [13]

Installing Joomla!

11

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [14]

Installing Joomla!

Front-End

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [15]

Installing Joomla!

Back-End

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [16]

Installing Thai Language Pack

http://localhost:8080/administrator/

1

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [17]

Installing Thai Language Pack

2

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [18]

Installing Thai Language Pack

3

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [19]

Installing Thai Language Pack

4

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [20]

Installing Thai Language Pack

5

6

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [21]

Installing Thai Language Pack

7

8

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [22]

Installing Thai Language Pack

9

10

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [23]

Installing Thai Language Pack

11

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [24]

Installing Extension

1

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [25]

Installing Extension

2

3

4

5

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [26]

Installing Extension

6

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [27]

Enable JCE Editor Extension

1

ISAN Research Group

Joomla! 2.5 Training

Installing Workshop [28]

Enable JCE Editor Extension

2

3

4

ISAN Research Group

Joomla! 2.5 Training

Relax

Time Out

ISAN Research Group

Joomla! 2.5 Training

Publish

ISAN Research Group

Joomla! 2.5 Training

Publish [2]

Workshop: Let’s go! Publish your first Article…

ISAN Research Group

Joomla! 2.5 Training

Structure

Joomla! Structure

ISAN Research Group

Joomla! 2.5 Training

Structure [2]

Section Category Article

หัมูวดหัมู�#หัล�ก หัมูวดหัมู�#ย#อย บทำคืวามู/หัน�าเพจ

Create Step

ISAN Research Group

Joomla! 2.5 Training

Structure [3]

Section Category Article

หัมูวดหัมู�#หัล�ก หัมูวดหัมู�#ย#อย บทำคืวามู/หัน�าเพจ

Delete Step

ISAN Research Group

Joomla! 2.5 Training

Create Site

Section CategoryTop menu - หน!าแรก

- บ�คลากร- ข้�าวป็ระช้าส่มูพินธ์'- ภาพิก+จักรรมู- ต์+ดต์�อเราMain

menu- ป็ระวต์+โรงเร(ยน- ว+ส่ยทศน'/ป็รช้ญา- พินธ์ก+จั/เป็6าหมูาย- ท,าเน(ยบผ#!บร+หาร- กล��มูส่าระว+ช้า- ป็ฏิ+ท+นป็ฏิ+บต์+งาน- ข้!อมู#ลนกเร(ยน- ผลงานนกเร(ยน

ISAN Research Group

Joomla! 2.5 Training

Web Building Basics

The Frontend:12

3

4

5

7

6

1. Search box2. Top Menu3. Breadcrumbs4. Two different menus5. Login form6. Main body of the front page7. Banner ads

ISAN Research Group

Joomla! 2.5 Training

Step-By-Step

Remove sample data

Customize The site’s template

Add Content: create framework, add articles and add menu items

Add new features: create a contact form and poll

Finish your very first, fully functional Joomla-powered website

ISAN Research Group

Joomla! 2.5 Training

Template Layouthttp://localhost:8080/joomla/?tp=1

ISAN Research Group

Joomla! 2.5 Training

Relax

Time Out

ISAN Research Group

Joomla! 2.5 Training

User Management

User Group

Public ผ#!ใช้!ท�วไป็Manager ผ#!บร+หารจัดการข้!อมู#ลต์�างๆ ในเว$บไซึ่ต์'Administrator

ผ#!ด#แลระบบ ส่ามูารถเป็:ด/ป็:ด/ต์+ดต์�งการท,างาน

Super User ผ#!มู(ส่+ทธ์+ส่#งส่�ดในการบร+หารจัดการเว$บไซึ่ต์'Registered ส่ามูารถเข้!าใช้!งานเว$บไซึ่ต์'ได!ต์ามูป็กต์+Author ส่ามูารถเข้(ยนบทความูได! แต์�เผยแพิร�ไมู�ได!Editor ส่ามูารถเข้(ยน/แก!ไข้บทความูได! แต์�เผย

แพิร�ไมู�ได!Publisher ส่ามูารถเข้(ยน/แก!ไข้บทความูได! และเผย

แพิร�ได!

ISAN Research Group

Joomla! 2.5 Training

User

User Add

1

1

ISAN Research Group

Joomla! 2.5 Training

User [2]

User Add

2

3

ISAN Research Group

Joomla! 2.5 Training

User [3]

User Edit / Active / Block / Unblock / Delete

1

2

LOGO

Day 2: Joomla! WorkshopMr.Apirak Tooltham, ISAN Research Group.

ISAN Research Group

ISAN Research Group

Joomla! 2.5 Training

Joomla! 2.5 Workshop

ส่ร!าง Website ข้องผ#!เข้!ารบการอบรมูด!วย CMS Joomla! 2.5 ส่ามูารถออกแบบได!ต์ามูความูต์!องการ โดยท,าการต์+ดต์�งเว$บไซึ่ต์'ข้องต์นไว!บนโป็รแกรมูจั,าลอง Server บนเคร �องคอมูพิ+วเต์อร'

Assignment Workshop

LOGO

Day 3: Template & ExtensionMr.Apirak Tooltham, ISAN Research Group.

ISAN Research Group

http://www.artisteer.com

ISAN Research Group

Joomla! 2.5 Training

Template Building

Artisteer Version 4

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Overview

Menu Tab

Work Space

Page Menu

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Menu

Home Tab

Edit Tab

Colors & Fonts Tab

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Menu [2]

Layout Tab

Content Tab

Background Tab

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Menu [3]

Sheet Tab

Header Tab

Menu Tab

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Menu [4]

Blocks Tab

Vertical Menu Tab

Controls Tab

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Menu [5]

Footer Tab

ISAN Research Group

Joomla! 2.5 Training

Artisteer 4 Workshop

Assignment Workshop 2

ส่ร!าง Template ข้อง Joomla! 2.5 ด!วย Artisteer 4 โดยออกแบบต์ามูความูต์!องการข้องผ#!เข้!ารบการอบรมู จัากน�นท,าการ Export งานออกมูา แล!วน,าไป็ท,าการทดลองต์+ดต์�งบน Joomla! ท(�ต์+ดต์�งไว!บน Server ข้องต์น พิร!อมูท�งต์รวจัส่อบว�าส่ามูารถท,างานได!หร อไมู� และแส่ดงผลหน!าเว$บได!ต์ามูท(�ออกแบบไว!ในโป็รแกรมู Artisteer 4 หร อไมู�

Assignment Workshop 1

ท,าการต์+ดต์�ง Artisteer 4 ลงในเคร �องข้องผ#!เข้!ารบการอบรมู จัากน�นทดลองใช้!งานเมูน#ต์�างๆ ข้องโป็รแกรมู

ISAN Research Group

Joomla! 2.5 Training

Relax

Time Out

ISAN Research Group

Joomla! 2.5 Training

Joomla! Extensions

Extension Directory

http://extensions.joomla.org/

http://www.joomlacorner.com http://www.joomla.org

http://www. wordpressplus.orghttp://www.scriptmafia.org

ISAN Research Group

Joomla! 2.5 Training

Recommended Site

http://http://www.cmsplugin.com

LOGO

Question & Answer

ISAN Research Group

Joomla! 2.5 Training