Computer 10: Lesson 10 - Online Crimes and Hazards
AIESEC CMS - User guide
1. AIESEC CMS - User guide
1. 1. Installation
a. 1.1 Expert version
b. 1.2 Beginner version
i. 1.2.1 Normal installation
ii. 1.2.2 Config file
iii. 1.2.3 Config changes
iv. 1.2.4 Database
v. 1.2.5 LCs list
c. 1.3 Further configuration
2. 2 General Settings
a. 2.1 How to login into the administration of the website
b. 2.3 Mailing system (this mailing system is ussed by different modules and also for
recovering the administrator password)
c. 2.4 Contact
d. 2.5 Google analytics code
3. 3 Website content
a. 3.1 Pages
i. 3.1.1 Making a page private
ii. 3.1.2 How to enter images in the content
iii. 3.1.3 Naming pages in Pretty URLs
iv. 3.1.4 Creating link to an other page
b. 3.2 Files/Images
c. 3.3 News
d. 3.4 Photo albums
i. 3.4.1 Creating a new album
ii. 3.4.2 Displaying uploaded albums within a page
iii. 3.4.3 Displaying albums from PicasaWeb within a page
e. 3.5 Events
i. 3.5.1 Creating an event
ii. 3.5.2 Displaying a calendar of events or a specific event
f. 3.6 Global Content Blocks
g. 3.7 Adding comments to a page
4. 4 Adding / Editing / Deleting administrators and editors
a. 4.1 Adding new admin users:
b. 4.2 Setting permissions for your admin users
c. 4.3 Adding front-end users
d. 4.4 Administering user groups
5. 5 Extending the current configuration
a. 5.1 Adding a new language
6. 6 Thanks
a. 6.1 People who made it happen
1. Installation
1.1 Expert version
modify config.php directly according to the server settings.
Import the database from the file database.sql from the database folder.
2. 1.2 Beginner version
1.2.1 Normal installation
Install CMS Made simple multilingual version from here:
http://s3.amazonaws.com/cmsms/downloads/4144/cmsms-mle-1.6.3-base.tar.gz .
You can find more information of how to install CMS made simple on your website:
http://wiki.cmsmadesimple.org/index.php/User_Handbook/Installation
1.2.2 Config file
Save config.php and delete all other content. Copy and uploads the files provided in the Zip arhive
and override the config.php file from the arhive with the config.php file mentioned above.
1.2.3 Config changes
In the config.php modify: $config['url_rewriting'] = 'none'; with:
$config['url_rewriting'] = 'mod_rewrite';
$config['page_extension'] = '/';
$config['use_hierarchy'] = true; This would create the website to have pretty URLs.
1.2.4 Database
Import the database from the file database.sql from the database folder.
1.2.5 LCs list
Open with notepad (or similar) the file tmp/templates/selectlc.tpl
In the last part of the file there is the following code:
<select class="ints" id="Select LC"
onchange="location.href=this.options[selectedIndex].value" size="1" name="select-
lc"> <option value="http://www.aiesec.ro">National</option>
<option value="http://www.aiesec.org/romania/brasov/">Brasov</option>
<option value="http://www.aiesec.org/romania/bucuresti/">Bucuresti</option>
<option value="http://www.aiesec.org/romania/cluj-napoca/">Cluj-Napoca</option>
<option value="http://www.aiesec.org/romania/constanta/">Constanta</option>
<option value="http://www.aiesec.org/romania/craiova/">Craiova</option>
<option value="http://www.aiesec.org/romania/galati/">Galati</option>
<option value="http://www.aiesec.org/romania/iasi/">Iasi</option>
<option value="http://www.aiesec.org/romania/oradea/">Oradea</option>
<option value="http://www.aiesec.org/romania/pitesti/">Pitesti</option>
<option value="http://www.aiesec.org/romania/ploiesti/">Ploiesti</option>
<option selected="selected" value="http://www.aiesec.org/romania/sibiu/">Sibiu</opt
ion>
<option value="http://www.aiesec.org/romania/targumures/">Targu Mures</option>
<option value="http://www.aiesec.org/romania/timisoara/">Timisoara</option>
</select> Put the text selected="selected" in front of your LC, This will select automatically when
the page is opened your LC from the dropdown list on the top of the page. The code before is an
example for the AIESEC Sibiu website.
3. For websites outside Romania: modify the above list to contain the websites of your LCs in your
country.
1.3 Further configuration
Set the rights(permissions) 777 to the folders:
• tmp/cache
• tmp/tempaltes_c
• modules (optional) - this would give you the rights to remove modules or install new ones
from the administration web interface
• uploads (optional) - you can upload from the administration web interface picture and
other files
• config_lang.php (only if you want to add or remove other languages in which your webiste
is shown. As default there is English -as default language- and Romanian )
2 General Settings
2.1 How to login into the administration of the website
www.yourwebsite.ro/admin The default username is admin, and the password is also admin -
make sure to change this when you go live!
2.2 To edit the Webiste name(with your LC Name for example) go
to Site Admin ->General Settings ->Site Name
2.3 Mailing system (this mailing system is ussed by different
modules and also for recovering the administrator password)
Go to Extensions ->CMS Mailer ->
4. If you are not an advanced user use the following settings (this is a sample for the website
www.aiesecms.ro):
• mailer method: sendmail
• smtp hostname: aiesecms.ro (website domain name without www.)
• from address: the e-mail address from which the end user sees that the e-mail was sent
from.
• From Username the name from which the end user sees that the e-mail was sent from.
2.4 Contact
Go to Content->Global Content Blocks->Contact (don't forget to edit not just the english version
but also the romanian one)
2.5 Google analytics code
Content->Global Content Blocks->googleanaytics select the english verion and then deactivate
the wysiwyg editor and just the put the google alaytics code in the content box between the tags
{literal} and {/literal}. {literal}
your google analytics code goes here
{/literal}
3 Website content
3.1 Pages
5. • add content (select template)go to CONTENT -> PAGES and there are all the pages you
have, to add a new page click on "Add New Content"
• Attention! It is prefered to write at first the page in english version and than in romanian
(or an other language), because the CMS was configured to take the options and text from
the english version in case the romanian one was not yet written.
Very important!!!!!!
Please select carefully the Parent of the page. For example if you have a page which you
would like to appear in the menu in the students section, select as parent the students
page from the root pages. The same things apply for the partners and alumni pages but
also for the About pages (the menu which appears on the buttom of the page near the
footer).
Also select the template according to the stakeholder. For this go to the options tab, and
select the desired template. You have displayed 4 templates. One for each stakeholder
(each one having the colors according to the brand), and a general one for pages that can't
be included in the 3 main sections.
• The menu is not only hierarchical, but also acts as a breadcrumbs section (showing at first
the active parent pages that led you to a certain page). This offers more control over the
navigation while keeping a unity in design, but it also means you have a limited number of
visible menu entries and menu levels to work with. The first level is Home / Students /
6. Partners / Alumni so this one is fixed. Starting from here, you can have for each
section six second-level pages which will be visible in the menu, five third-level
pages for each second-level page (because the second-level page leading to one of
these will be shown as the first menu entry and kept active), four fourth-level pages for
each third-level page (with the previous parent pages active) and so on. The order in the
navigation is the one used to also draw the menu. Pages that go over those limits (or, for
that matter, even first-level pages which are not one of Students, Partners or Alumni)
will not be displayed in the menu.
• In the content section you can enter and modify the text that will appear on the website. If
you use copy->paste from a word document use the paste button above the field (the 4th
button).
3.1.1 Making a page private
To do this, simply add the word private in the "Extra Page Attribute 1" field. This way, you can
make any page visible only to logged-in users for the specific section to which the page belongs
(for example, a private page in the Alumni section will remain invisible to users that are not
alumni even if they are logged in). Furthermore, the private pages are only listed in the menu
when if they are visible to the user at that time.
3.1.2 How to enter images in the content
Using the WYSIWYG editor, you have the option to insert pictures. Click on the image icon from
the top part of the textarea. There is a field where you can put the URL to the image if it is hosted
on an other website. If you hav e uploaded the image previosely using the Image manager, click
on the small image, right of the textbox where you should entern the URL. A widows opens where
you can browse you images and seelct the one you desire to insert on the page. You have further
options fot the image. Feel free to explore all those options.
3.1.3 Naming pages in Pretty URLs
Another important attribute of the page is the page alias. The CMS uses this alias in the URL
(address of the page). It is important for search engines like google to have a relevant page alias
wqhich reflect the content of the page. Normally this alias is automatically generated by the CMS
from the title field.
3.1.4 Creating link to an other page
To create a link to an other page from the website use {cms_selflink page="alias"} and
replace alias with the page alias which you can find while editing the page in the options section.
7. This tag has also the following parameters:
• (optional) page - Page ID or alias to link to.
• (optional) dir anchor (internal links) - New option for an internal page link. If this is used
then anchorlink should be set to your link.
• (optional) anchorlink - New paramater for an internal page link. If this is used then dir
="anchor" should also be set. No need to add the #, because it is added automatically.
• (optional) urlparam - Specify additional parameters to the URL. Do not use this in
conjunction with the anchorlink parameter
• (optional) tabindex ="a value" - Set a tabindex for the link.
• (optional) dir start/next/prev/up (previous) - Links to the default start page or the next or
previous page, or the parent page (up). If this is used page should not be set.
Note! Only one of the above may be used in the same cms_selflink statement!!
8. • (optional) text - Text to show for the link. If not given, the Page Name is used instead.
• (optional) menu 1/0 - If 1 the Menu Text is used for the link text instead of the Page Name
• (optional) target - Optional target for the a link to point to. Useful for frame and javascript
situations.
• (optional) class - Class for the <a> link. Useful for styling the link.
• (optional) lang - Display link-labels ("Next Page"/"Previous Page") in different languages (0
for no label.) Danish (dk), English (en) or French (fr), for now.
• (optional) id - Optional css_id for the <a> link.
• (optional) more - place additional options inside the <a> link.
• (optional) label - Label to use in with the link if applicable.
• (optional) label_side left/right - Side of link to place the label (defaults to "left").
• (optional) title - Text to use in the title attribute. If none is given, then the title of the page
will be used for the title.
• (optional) rellink 1/0 - Make a relational link for accessible navigation. Only works if the dir
parameter is set and should only go in the head section of a template.
• (optional) href - If href is used only the href value is generated (no other parameters
possible). Example: <a href="{cms_selflink href="alias"}"><img src=""></a>
• (optional) image - A url of an image to use in the link. Example: {cms_selflink dir="next"
image="next.png" text="Next"}
• (optional) alt - Alternative text to be used with image (alt="" will be used if no alt
parameter is given).
• (optional) imageonly - If using an image, whether to suppress display of text links. If you
want no text in the link at all, also set lang=0 to suppress the
label. Example: {cms_selflink dir="next" image="next.png" text="Next" imageonly=1}
• (optional) ext - For external links, will add class="external and info text. warning: only
text, target and title parameters are compatible with this parameter
• (optional) ext_info - Used together with "ext" defaults to (external link).
• (optional) assign - Assign the results to the named smarty variable.
A list of all available tags you can find in Extension->Tags
3.2 Files/Images
• Files -> go to Content-> File Manager
• Images->go to Content -> Image Manager
9. In the images manager you will find a folder called slideshow. This contains also 3 folders:
students, partners, and alumni. Each of them contain the pictures that are shown in the flash
under the menu (see picture). You can add your pictures there and they will automatically appear
in the website. It is preffered that the picture have the dimensions 593x200px.
3.3 News
• categories go to -> content-> news-> categories ->there it has to be 2 categories one in
englesh (news) and one in your on language.
• To add a news go to ->content->news->article->scroll down and there is add article.
• title/headding/content: go to ->content->news
• the news module is not multilanguage!
o Solved this issue, and another one with the same block of news showing up in the
Home pages for all LCs
Please consult https://docs.google.com/a/aiesec.net/View?
id=dfwggtzp_8hn8jzjdw#Showing_news_on_Home_pages_spe_8942962195724249
for more details
11. 3.4 Photo albums
3.4.1 Creating a new album
You can create photo albums to include in your pages and events using a Smarty tag. Here is
how:
1. Put in a new folder all the images that you want to upload. Make sure they are small
enough to suit web viewing without taking to much space (ideally, they would fit in a
rectangle of 800x800 pixels - so the largest of the two dimensions should be no larger than
800 pixels - and saved as JPEG with 85% quality. This way, they can be viewed and
enjoyed and each image will be somewhere around 10 - 15K). The albums themselves
should be no larger than 60 photos (according to some studies, this is the limit after which
people get bored of flipping through pictures online).
2. After shrinking the images to suit the parameters above (you can use Microsoft Picture
Editor for bulk shrinking and saving within the specified parameters), select all them and
create a zip archive. This is in order to take advantage of an option that the CMS offers,
that is: to try and un-archive the files you upload to the album :-)
3. Log in to the CMS - remember, you need to have admin rights to create a new album.
4. From the navigation menu, go to Content -> File Manager. Once there, navigate to the
folder images/Photo Albums/ then create here a new directory where you will upload
your photos, and navigate into that folder. Then select the Upload Files tab, and on the
first of the five fields choose the archives you made that contains your photos, and check
the "Try to unpack file after upload (only tgz and most zip-files)?" box next to that field.
Once you do this, hit OK and wait until the photos are uploaded and unpacked.
5. Now, again from the navigation menu, go to Content -> Photo Albums, and click on
"Add an album". Optionally, you can create a new category for the album to be placed
under, because within a new page of the CMS you also have the possibility to display ALL
albums within a specific category.
6. The first thing you see is a field to set the name for your album. Keep it short and simple
(this KISS principle should be used with all titles and menu entries). After you input the
name and hit Submit, you will be taken to a second page where you can... Add pictures.
Once you click that button, navigate into Photo albums/<your_new_folder> and select
the pictures you wish to include. Tip: you could click Select all at the bottom... :)
7. Optional: you can play some more with the options, not that it will make much difference.
3.4.2 Displaying uploaded albums within a page
1. Very important: after you create the album, go again to Content -> Photo albums and
see the number assigned to your new album in the IDs column. Using that number, you
will be able to integrate your album into any page by using the following Smarty tag
(where <ID> is the number assigned to your album):
o {cms_module module='album' albums='<ID>'}
2. Go to the page or event for which the album was created, edit the content, turn off the
WYSIWYG editor (by unchecking the box below the main editor area) and then insert the
Smarty tag for your album where you want it to appear.
3. You can also share multiple albums in the same spot by enumerating all of their IDs
separated by commas, or you can share albums from a specific category by replacing the
albums='<ID>' parameter with categories='<ID>' where you specify the ID or IDs of
the categories for which you wish to display the albums.
12. 3.4.3 Displaying albums from PicasaWeb within a page
1. There's no need to upload any pictures to the server for this one, just need to have an
album already created in Picasa, with the pictures you want to display.
2. Go to the page or event for which the album was created, edit the content, turn off the
WYSIWYG editor (by unchecking the box below the main editor area) and then insert the
Smarty tag, replacing the <username> with your desired one, and the <albumname>
with the name of an album as it appears in the page URL when you load it from
picasaweb.google.com:
o {cms_module module='PicasaWebAlbumBrowser' user='<username>'
album='<albumname>'}
for a picasa link that would like
this: http://picasaweb.google.com/<username>/<albumname>#
3.5 Events
3.5.1 Creating an event
Here are the steps you need to follow in order to create a new event:
1. Log in to the administrative section of the CMS. You need to have administrative rights to
add an event.
2. From the administration menu, navigate to Content -> Calguys Calendar.
3. Click on Add Event and input the required data for your new event. Optionally, in the
Details section of that event you can insert a photo album (see above how that works).
Your event can also be a recurrent one - appearing once after a specified period (days,
months, years)... You can play around with this.
4. Check the category that the event belongs to and click the Add button to finish.
3.5.2 Displaying a calendar of events or a specific event
1. Create a new page in the proper section (Alumni, students, partners). See section 3.1 for
details on how to do this.
2. In the content of the page, turn off the WYSIWYG editor, and then where you want the
event or calendar to appear, insert the following Smarty tag:
o To list a single event: {cms_module module="CGCalendar" display="event"
event_id="<ID>"} where you will replace <ID> with the event id listed
under Content -> Calguys Calendar
o To list the calendar of events: {cms_module module="CGCalendar"
display="calendar"}
o Optionally, you can add a category="<category_name>" parameter to the
Smarty tag, to filter the events and display only those belonging to a specific
category. You can also specify multiple categories by listing all the names separated
by commas.
3.6 Global Content Blocks
Global Content Blocks used to be called "HTML Blobs". Little blobs of HTML code that you can re-
use in many templates and pages without having to copy text all over the place.
go to Content-> Global Content Blocks
13. • If you want to edit a global content block click on it ,and there chose the language.
• If you want a global content block in a Page you copy the code that is on the same line.
Example: for Contact -> {global_content name='contact'}
To edit the Sidebar (the one with the widgets), you have to edit the 3 global content blocks for
each template (students, partners and alumni). These are called StudentsSidebar,
PartnersSidebar and AlumniSidebar.
This mainly include some modules For example:
• Twitter: {cms_module module='SocialmediaWidget' action="showtwitter" title="My
Twitter" twitterId="45938959"} Replace the red number with your twitter id. To find your
User ID please click here http://help.twitter.com/forums/10711/entries/15360
• Youtube: {cms_module module='SocialmediaWidget' action="showyoutube"
title="Youtube" youtubeCode="44559DA16E808CC5"}
To find out the youtube code click on the playlist and its the string after the p= in the URL
For Example http://www.youtube.com/watch?v=E-
spe4JgEvA&feature=PlayList&p=44559DA16E808CC5&playnext=1&playnext_from=PL&index=13
To create your custom widget in the sidebar area write the following:
{cms_module module='SocialmediaWidget' action="showwidget" title="Your title"
blockname="your-global-contentblock-name"} and replace your contentblock name with the block
name where the content is which you want to include in the widget.
For advanced users and web developers
You can include directly php code in the WYSIWYG editor (articles,pages or news) by including the
php code between the tags {php} and {/php}. For example: {php}
echo "hello world";
{/php} If you have such a php code and you want to include it on more than one page, you can
create a user defined tag (Extensions->user defined tags). After you create it you can include the
tag in the templates in which you want the php code to be processed.
For further information about the CMS take a look at the official website www.cmsmadesimple.org
or to the documentation website http://wiki.cmsmadesimple.org/index.php/Main_Page
3.7 Adding comments to a page
To achieve this, simply add the following code at the end of the page: {cms_module
module='comments'}
4 Adding / Editing / Deleting administrators
and editors
4.1 Adding new admin users:
Log in to the website's admin section, then navigate to Users & Groups => Users. Here you
can add new users and assign roles to them.
14. • if you want to add people who would be able to add news or pages to the website and edit
the content, make them part of the Editor group
• if you want to add users that would be able to change the look&feel of the website and edit
the templates, add them to the Designer group.
• if you want the users you add to have full control over the website, make them part of the
Admin group.
4.2 Setting permissions for your admin users
The users are grouped together, and you can set permissions for a specific group. Typically the
Admin group has full permissions over any section of the website. The users that are part of the
Editor group should be able to create and edit new content (but not delete existing one, this
should only be allowed for the admin) - by content we mean pages, news and events. The users
from the Designer group should be given permissions to modify the templates or create new ones.
4.3 Adding front-end users
The frontend user accounts are created in three ways:
• automatically, after a successful login with an @aiesec.net address; depending on the
@aiesec.net status, the accounts will be assigned to the Students or Alumni groups.
• following a registration request made by a new user, after approval from an administrator
• manually, by a website admin.
Depending on the frontend group they are part of, the users will have access to private content
for their section (for instance, logged-in students will be able to apply for an event and offer
feedback, whereas normal guests will only be able to see details about that event).
4.4 Administering user groups
In order for the frontend logins to work correctly,
5 Extending the current configuration
5.1 Adding a new language
Before you try to edit the languages, make sure that the file config_lang.php from the root is
writeable
Go to site admin-> global settings -> MLE Languages
Here you can select the language that you want to add or remove. Be sure to use the UTF8
standard so that the website supports all the special symbols present in the new language.
6 Thanks
6.1 People who made it happen
This CMS has been customized for AIESEC by:
• Octavian Cretu - AIESEC Romania Web Officer
15. • Bogdan Rusu - AIESEC Iasi Web developer
This documentation has been created for you by:
• Octavian Cretu - AIESEC Romania Web Officer
• Otilia Obreja - Brand&Adv TL AIESEC Targu Mures
• Gratiela Dumitrescu - VP Communication AIESEC Ploiesti
• Bogdan Rusu - AIESEC Iasi Web developer