Introduction to TomatoCMS at Hue-Aptech IT center

1. Creating website with TomatoCMS www.tomatocms.com TomatoCMS Workshop, Hue, Vietnam 12/12/2010 1

2. Table of Content What will we cover? Introduction to TomatoCMS Install Guide Create simple website Custom layout and skin Questions TomatoCMS Workshop, Hue, Vietnam 12/12/2010 2

3. Listeners Who 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

4. 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

5. 1. Introduction What is TomatoCMS? CMS – Content Management System Free and Open Source (GPL v2) Can be used to create: online newspaper blog online gallery portfolio website etc. TomatoCMS Workshop, Hue, Vietnam 12/12/2010 5

6. 1. Introduction Award 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

7. 1. Introduction At OSSFest 2010 TomatoCMS Workshop, Hue, Vietnam 12/12/2010 7

8. 1. Introduction At FossAsia 2010 TomatoCMS Workshop, Hue, Vietnam 12/12/2010 8

9. 1. Introduction Community 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

10. 1. Introduction (cont.) What are the key features? Many CMSes: Joomla, Drupal, Wordpress, … Reinvent the wheel? 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 10

11. 1. Introduction (cont.) What are the key features? 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 11

12. 1. Introduction (cont.) What are the key features? 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 12

13. 1. Introduction (cont.) Are there anything else? Multiple lingual websites: I18N: Now available in Bulgarian , Chinese, Dutch, English, German, Polish, Portuguese, Russian, Thai, and Vietnamese RTL languages Localization SEO meta tags friendly and customizable URL sitemap builder Google Analytic, Google Web Master intergrated 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 13

14. 1. Introduction (cont.) Are there anything else? High performance database replication (master / slave) cache (File / Memcached / Export to HTML) cache individual widget / entire page compress CSS, Javascript, HTML High security permission system based on ACL architecture SQL injection free CSRF protection 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 14

15. 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/2010 TomatoCMS Workshop, Hue, Vietnam 15

16. 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/2010 TomatoCMS Workshop, Hue, Vietnam 16

17. 1. Introduction (cont.) Does it run on my environment? Operating system: Windows, Linux, MacOS Databases: MySQL 5, PostgreSQL 8, MS SQL Server 2005 Browsers: Chrome, Firefox, Safari, IE 7/8 We are not IE6’s friend  All-in-one installers: XAMPP, WAMP, MAMP Shared hosting? Yes! 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 17

18. 2. Install Guide Installer: Dependent installers of Apache, MySQL, PHP Or all-in-one installers: WAMP, MAMP Guide: Install TomatoCMS with WAMP Using Install Wizard Download WAMP Install WAMP Create database with phpMyAdmin Download TomatoCMS Use Install Wizard TomatoCMS Workshop, Hue, Vietnam 12/12/2010 18

19. 2. Install Guide (cont.) Guide: Install TomatoCMS with WAMP Install manually Download WAMP Install WAMP Use phpMyAdmin to create database/user Use phpMyAdmin to import sample data Website in the sub-directory: /install/ tomatocms_sample_db_mysql.sql Website in the web-root directory: /install/tomatocms_sample_db_mysql_virtualhost.sql 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 19

20. 2. Install Guide (cont.) Guide: Install TomatoCMS with WAMP 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/2010 TomatoCMS Workshop, Hue, Vietnam 20

21. 2. Install Guide (cont.) Run under the sub-directory: URL: http://localhost/tomatocms/ TomatoCMS directory: ApacheInstalledDir/htdocs/tomatocms or WAMPInstalledDir/www/tomatocms Run under the root directory: URL: http://localhost(:port) Virtual Host configuration ApacheInstalledDir/conf/httpd.conf Listen 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/2010 TomatoCMS Workshop, Hue, Vietnam 21

22. 3. Create Simple Website Do the administation actions! Sign in to the back-end http://localhost/tomatocms/index.php/admin (sub-directory based) or http://localhost/admin (root based) Try to use: News module: Create new article Multimedia module: Upload images Menu module: Add more item to the menu 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 22

23. 3. Create Simple Website Layout structure Template directory: /application/templates/default/layouts Layout file: XML Understand concepts: container, widget 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 23

24. 3. Create Simple Website Container 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/2010 TomatoCMS Workshop, Hue, Vietnam 24

25. 3. Create Simple Website Widget 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/2010 TomatoCMS Workshop, Hue, Vietnam 25

26. 3. Create Simple Website How to change the layout Try to change the layout: Add containers Add widgets 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 26

27. 3. Create Simple Website How to develop new widget? Widget directory: /application/modules/ModuleName/widgets/WidgetName Files: Information: about.xml Configuration: config.phtml Languages: lang.en_US.ini, lang.vi_VN.ini, etc Ouput: show.phtml Controller: Widget.php Develop new widget (based on what students want) 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 27

28. 3. Create Simple Website How 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/2010 TomatoCMS Workshop, Hue, Vietnam 28

29. Follow us Social networks: Twitter: www.twitter.com/tomatocms Facebook: www.facebook.com/tomato.cms Websites: Live demo: demo.tomatocms.com Community: forum.tomatocms.com 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 29

30. Questions? 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 30

31. Thank you! 12/12/2010 TomatoCMS Workshop, Hue, Vietnam 31