tomatocms workshop at hue-aptech it center, 2010
DESCRIPTION
Introduction to TomatoCMS at Hue-Aptech IT centerTRANSCRIPT
![Page 1: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/1.jpg)
Creating website with TomatoCMS
www.tomatocms.com
TomatoCMS Workshop, Hue, Vietnam 12/12/2010 1
![Page 2: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/2.jpg)
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
![Page 3: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/3.jpg)
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
![Page 4: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/4.jpg)
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
• http://twitter.com/phuoc69
• http://facebook.com/phuoc69
• (84) 123 213 8486
TomatoCMS Workshop, Hue, Vietnam 12/12/2010 4
![Page 5: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/5.jpg)
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
![Page 6: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/6.jpg)
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
![Page 7: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/7.jpg)
1. IntroductionAt OSSFest 2010
TomatoCMS Workshop, Hue, Vietnam 12/12/2010 7
![Page 8: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/8.jpg)
1. IntroductionAt FossAsia 2010
TomatoCMS Workshop, Hue, Vietnam 12/12/2010 8
![Page 9: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/9.jpg)
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
![Page 10: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/10.jpg)
1. Introduction (cont.)What are the key features?• Many CMSes: Joomla, Drupal, Wordpress, …
• Reinvent the wheel?
12/12/2010TomatoCMS Workshop, Hue, Vietnam 10
![Page 11: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/11.jpg)
1. Introduction (cont.)What are the key features?
12/12/2010TomatoCMS Workshop, Hue, Vietnam 11
![Page 12: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/12.jpg)
1. Introduction (cont.)What are the key features?
12/12/2010TomatoCMS Workshop, Hue, Vietnam 12
![Page 13: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/13.jpg)
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
![Page 14: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/14.jpg)
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
![Page 15: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/15.jpg)
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
![Page 16: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/16.jpg)
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
![Page 17: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/17.jpg)
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
![Page 18: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/18.jpg)
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
![Page 19: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/19.jpg)
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
![Page 20: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/20.jpg)
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
![Page 21: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/21.jpg)
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
![Page 22: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/22.jpg)
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
![Page 23: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/23.jpg)
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
![Page 24: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/24.jpg)
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
![Page 25: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/25.jpg)
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
![Page 26: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/26.jpg)
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
![Page 27: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/27.jpg)
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
![Page 28: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/28.jpg)
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
![Page 29: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/29.jpg)
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
![Page 30: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/30.jpg)
Questions?
12/12/2010TomatoCMS Workshop, Hue, Vietnam 30
![Page 31: TomatoCMS Workshop at Hue-Aptech IT center, 2010](https://reader036.vdocuments.us/reader036/viewer/2022062406/5593a94d1a28ab62068b4589/html5/thumbnails/31.jpg)
Thank you!
12/12/2010TomatoCMS Workshop, Hue, Vietnam 31