Creating website with TomatoCMS

www.tomatocms.com

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 1

Table of ContentWhat will we cover?

• Introduction to TomatoCMS

• Install Guide

• Create simple website

• Custom layout and skin

• Questions

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 2

ListenersWho is this for?

• Web developers

• Front-end developers

• Who care about web technologies

• Who care about CMSes

• Assumption: You know about PHP, HTML, CSS, JavaScript

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 3

About me• Full name: Nguyễn Hữu Phước

• 2007: Senior developer, Bammboo Team

• 2007 – 2008: Lead developer, Visky Team

• 2009 – present: Founder and lead developer of TomatoCMS

• core@tomatocms.com

• http://twitter.com/phuoc69

• http://facebook.com/phuoc69

• (84) 123 213 8486

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 4

1. IntroductionWhat is TomatoCMS?

• CMS – Content Management System

• Free and Open Source (GPL v2)

• Can be used to create:o online newspaper

o blog

o online gallery

o portfolio website

o etc.

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 5

1. IntroductionAward and Events

• 1st runner-up of Most Promising Open Source Project Award 2010

by Pack Publishing House (UK)

• 10th Open Source Software Festival 2010 (OSSFest)

29th Sep 2010 – 01st Oct 2010, Bangkok, Thailand

• Free and Open Source Software Asia 2010 (FossAsia)

12th Nov 2010 – 14th Nov 2010, Ho Chi Minh city, Vietnam

• And now: TomatoCMS Workshop

12th Dec 2010, Hue city, Vietnam

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 6

1. IntroductionAt OSSFest 2010

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 7

1. IntroductionAt FossAsia 2010

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 8

1. IntroductionCommunity

• It has been translated into many languages: English, Vietnamese, Thai, Chinese, Arabic, Iranian, Russian, Dutch,Bulgarian, German, Polish, Portuguese

• Official website – www.tomatocms.com - has been translated into 16 languages

• Official forum: forum.tomatocms.com

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 9

1. Introduction (cont.)What are the key features?• Many CMSes: Joomla, Drupal, Wordpress, …

• Reinvent the wheel?

12/12/2010TomatoCMS Workshop, Hue, Vietnam 10

1. Introduction (cont.)What are the key features?

12/12/2010TomatoCMS Workshop, Hue, Vietnam 11

1. Introduction (cont.)What are the key features?

12/12/2010TomatoCMS Workshop, Hue, Vietnam 12

1. Introduction (cont.)Are there anything else?

• Multiple lingual websites:o I18N: Now available in Bulgarian

, Chinese, Dutch, English, German, Polish, Portuguese, Russian, Thai, and Vietnamese

o RTL languages

o Localization

• SEOo meta tags

o friendly and customizable URL

o sitemap builder

o Google Analytic, Google Web Master intergrated

12/12/2010TomatoCMS Workshop, Hue, Vietnam 13

1. Introduction (cont.)Are there anything else?

• High performanceo database replication (master / slave)

o cache (File / Memcached / Export to HTML)

o cache individual widget / entire page

o compress CSS, Javascript, HTML

• High securityo permission system based on ACL architecture

o SQL injection free

o CSRF protection

12/12/2010TomatoCMS Workshop, Hue, Vietnam 14

1. Introduction (cont.)What is core platform?

• Zend Framework 1.10

http://framework.zend.com

• jQuery 1.3.2

http://jquery.com

• 960 Grid System

http://960.gs

12/12/2010TomatoCMS Workshop, Hue, Vietnam 15

1. Introduction (cont.)More about platform

• Well-designed architect

• Follows MVC, OOP

• Supports hook, plugin

• Modular architecture with more than 10 built-in modules

• Supports template/theme

12/12/2010TomatoCMS Workshop, Hue, Vietnam 16

1. Introduction (cont.)Does it run on my environment?

• Operating system: o Windows, Linux, MacOS

• Databases: o MySQL 5, PostgreSQL 8, MS SQL Server 2005

• Browsers: o Chrome, Firefox, Safari, IE 7/8 o We are not IE6’s friend

• All-in-one installers: o XAMPP, WAMP, MAMP

• Shared hosting? Yes!

12/12/2010TomatoCMS Workshop, Hue, Vietnam 17

2. Install Guide• Installer:

o Dependent installers of Apache, MySQL, PHP

o Or all-in-one installers: WAMP, MAMP

• Guide: Install TomatoCMS with WAMPo Using Install Wizard

• Download WAMP

• Install WAMP

• Create database with phpMyAdmin

• Download TomatoCMS

• Use Install Wizard

TomatoCMS Workshop, Hue, Vietnam 12/12/2010 18

2. Install Guide (cont.)• Guide: Install TomatoCMS with WAMP

o Install manually

• Download WAMP

• Install WAMP

• Use phpMyAdmin to create database/user

• Use phpMyAdmin to import sample data

o Website in the sub-directory:

/install/ tomatocms_sample_db_mysql.sql

o Website in the web-root directory:

/install/tomatocms_sample_db_mysql_virtualhost.sql

12/12/2010TomatoCMS Workshop, Hue, Vietnam 19

2. Install Guide (cont.)• Guide: Install TomatoCMS with WAMP

o Config manually

/tomatocms/application/config/application.ini

[db]

...

[web]

...

url.base = "http://localhost/tomatocms/index.php"

url.static = "http://localhost/tomatocms”

...

[install]

date = "2010-12-12 10:00:00"

version = "2.0.8"

12/12/2010TomatoCMS Workshop, Hue, Vietnam 20

2. Install Guide (cont.)• Run under the sub-directory:

o URL: http://localhost/tomatocms/

o TomatoCMS directory:

ApacheInstalledDir/htdocs/tomatocms or WAMPInstalledDir/www/tomatocms

• Run under the root directory:o URL: http://localhost(:port)

o Virtual Host configuration

ApacheInstalledDir/conf/httpd.confListen 80

NameVirtualHost *:80

<VirtualHost *:80>

DocumentRoot "C:/tomatocms"

<Directory "C:/tomatocms">

AllowOverride All

Options -Indexes +FollowSymLinks

Order allow,deny

Allow from all

</Directory>

</VirtualHost>

12/12/2010TomatoCMS Workshop, Hue, Vietnam 21

3. Create Simple WebsiteDo the administation actions!

• Sign in to the back-endo http://localhost/tomatocms/index.php/admin (sub-directory based)

or

o http://localhost/admin (root based)

• Try to use:o News module: Create new article

o Multimedia module: Upload images

o Menu module: Add more item to the menu

12/12/2010TomatoCMS Workshop, Hue, Vietnam 22

3. Create Simple WebsiteLayout structure

• Template directory: /application/templates/default/layouts

• Layout file: XML

• Understand concepts: container, widget

12/12/2010TomatoCMS Workshop, Hue, Vietnam 23

3. Create Simple WebsiteContainer concept

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE layout SYSTEM "http://schemas.tomatocms.com/dtd/layout.dtd">

<layout>

<container cols="12">

<container cols="5" position="first">

</container>

<container cols="3">

</container>

<container cols="4" position="last">

</container>

</container>

<container cols="12">

<container cols="8" position="first">

</container>

<container cols="4" position="last">

</container>

</container>

</layout>

12/12/2010TomatoCMS Workshop, Hue, Vietnam 24

3. Create Simple WebsiteWidget concept

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE layout SYSTEM "http://schemas.tomatocms.com/dtd/layout.dtd">

<layout>

<container cols="12">

<container cols="5" position="first">

<widget module="news" name="hotest" load="php"></widget>

</container>

<container cols="3">

<widget module="news" name="newest" load="php"></widget>

</container>

<container cols="4" position="last">

<widget module="ad" name="zone" load="php"></widget>

<widget module="news" name="searchbox" load="php"></widget>

</container>

</container>

</layout>

12/12/2010TomatoCMS Workshop, Hue, Vietnam 25

3. Create Simple WebsiteHow to change the layout

• Try to change the layout:o Add containers

o Add widgets

12/12/2010TomatoCMS Workshop, Hue, Vietnam 26

3. Create Simple WebsiteHow to develop new widget?

• Widget directory:

/application/modules/ModuleName/widgets/WidgetName

• Files:o Information: about.xml

o Configuration: config.phtml

o Languages: lang.en_US.ini, lang.vi_VN.ini, etc

o Ouput: show.phtml

o Controller: Widget.php

• Develop new widget (based on what students want)

12/12/2010TomatoCMS Workshop, Hue, Vietnam 27

3. Create Simple WebsiteHow to change the look and feel?

• Each template can have many skins

• Skin directory: /skins/TemplateName/SkinName

• Skin file: /skins/TemplateName/SkinName/default.css

• Naming convention for widget classes: t_ModuleName_WidgetName

• Try to change the CSS styles and see what happen!

12/12/2010TomatoCMS Workshop, Hue, Vietnam 28

Follow us• Social networks:

o Twitter: www.twitter.com/tomatocms

o Facebook: www.facebook.com/tomato.cms

• Websites:o Live demo: demo.tomatocms.com

o Community: forum.tomatocms.com

12/12/2010TomatoCMS Workshop, Hue, Vietnam 29

Questions?

12/12/2010TomatoCMS Workshop, Hue, Vietnam 30

Thank you!

12/12/2010TomatoCMS Workshop, Hue, Vietnam 31