EasySite Overview

Background - What's EasySite, and why should I use it?
Requirements - What do I need on my web server to use EasySite?
Installation - Ok, so how do I get started?
Site Settings - How do I change the look and feel of my website?
Pages and Forms - How do I add content?
Menus - How do I create sub-menus and change the look and feel of the menus?
Users and Groups - How can I password-protect certain parts of my website?
Files and Backup/Restore - Uploading binary documents, and backing up your data.

Background

EasySite is a Content Management System (CMS) build on PHP and MySQL, and is designed to provide individuals of all levels of computer efficiency with a fast, yet powerful, way to maintain and update the content of a website. For beginners, this is a way to create a sophisticated website without requiring advanced programming knowledge. For intermediate and advanced users, it's a way to create a sophisticated website in a fraction of the time that it might have taken before, and maintain the website easily from any web-enabled computer. EasySite was developed by Darren Gates and Alexander Pereverzev, and is sold on www.TUFaT.com, the $5 Script Archive.

Websites are often created with programs like Macromedia Dreamweaver or Microsoft Frontpage, or perhaps even coded by hand. But there are a lot of drawbacks to using these methods. It is very difficult to introduce user authentication into your website, and to create and maintain advanced, DHTML menus. Typically, you must use specialized add-on scripts to accomplish these things, which can be very daunting. Also, if your company or organization wishes to provide its employees or members with individualized websites, you may wish to use the same database and server, and provide users with their own, simple content-management tools - after all, you don't want them to come to you for every small change! EasySite was created to address these needs.

I like to call EasySite a "Designer's Content Management System" because of it's unique, layer-oriented architecture. All of the content of pages and menus essentially floats above the design. Thus, you can position any element anywhere on the screen, which allows extremely powerful and quick designing. No more slicing images and exporting with HTML! Now, you can just position your background design as a single, large image, and then position the text directly over it.

This tutorial will explain the major features of EasySite, and the general steps that one would go through during the creation of a website using the EasySite content management system. It is assumed that you understand the basics of how to upload files to a server, and also that you have PHP and MySQL installed on your server, and ready for use (see Requirements below). If you are not sure if you have these, then you should consult with your website host. Most hosts provide their users with some form of "Control Panel" to maintain a website - for example, where you add/edit/remove e-mail accounts, and view statistics for your website. Most likely, this is also the area where you will find management controls for MySQL. However, it's always best to consult with your website host or administrator to be sure.

Requirements

EasySite requires at least PHP 4.1.2 and a server running MySQL (any version). You should have PHP sessions enabled and correctly configured on your server. If you are not sure whether or not you have PHP & MySQL, you should do the following:

1 ) Locate the file called "info.bak" in the EasySite distribution
2 ) Rename "info.bak" to "info.php"
3 ) Upload "info.php" to your server
4 ) Execute (Run) info.php by opening the file with your web browser. For example:

http://www.your_domain.com/info.php

If you see a purple / blue screen with lots of useful information about your server, then you know that you have PHP installed. The output that you see will also tell you which version of PHP you have, which PHP extensions are installed, and a lot of other useful information. Here's a sample of what this screen *might* look like (it's different for every server):

If you have a database other than MySQL, you can probably get EasySite to work on your other databases, too, since EasySite uses PHP Pear for database abstraction. Pear is a way to "abstract" the database so that software is more platform independent. In addition, EasySite uses Smarty templates to separate the application logic from the display logic - i.e., the PHP from the HTML. However, it has only been tested in a MySQL-environment. By separating the application and template logic, you can easily modify the look of the content-management tools if you are so inclined, without having to be concerned with introducing bugs into the application logic.

Another important aspect of EasySite is the idea of layering in HTML. Non-layered HTML may define the overall structure of a page layout, but using HTML layers permit greater positioning control over the page layout by allowing content to "float" over the background. The idea of EasySite is to make maximal use of layers to allow super-easy content-managment. Most content-managers, like Mambo and PHP-Nuke, require a base HTML template, thus limiting their ease and simplicity of use. EasySite knows no such limits.

For web developers, it means never having to worry about "slicing" images again - instead of trying to fit the HTML to the design, you can simply design the background and float the page and menu content over it. Your website consists now essentially of two things: the background design (probably just one or two images - a main background, and a "repeat" image to fill in space), and the content that layers on top of the background design.

Installation

The first step is to install EasySite. This is probably going to be the most challenging step for most users. Darren is available for a $25 fee to install EasySite on your server, provided that PHP and MySQL are available. If you'd like to do it yourself, read on (it's very easy to do):

Most web servers have a "public_html" or "htdocs" or "www" folder, or something similar to that, where the publicly-accessible website documents (.html files, .php files, etc.) are stored. You should upload all of the files in the EasySite distribution to this folder. Normally, an FTP program is used to upload files to a server. My personal favorite is AbsoluteFTP, although any FTP client (WS_FTP or CuteFTP, for example) will work fine. Thus, your web server might look something like this:

   /public_html
      index.php
      install.php
      config.php
      ... other EasySite .php files ...
      /templates_c
      /cache
      /pages
      /manage
      ... other EasySite folders ...

Thus, when users go to www.your_domain.com, they are accessing the index.php file which comes with EasySite, and is stored in the public_html folder of your web server. You may put the EasySite files in a subfolder on your website, too. In that case, users would go to:

www.your_domain.com/some_folder/index.php

...where index.php is the EasySite index file. In the screenshot that I have provided above, I have uploaded the system to a folder called "easysite".

Be sure that you have your MySQL database name, host name, user name, and password handy. You should be aware that some website control panels (like CPanel) append a prefix to the database and user names for MySQL. You should also check to ensure that you have sufficient permissions to update your database, and add tables to the database.

With your web browser, go to:

www.your_domain.com/install.php

Or, if you uploaded the EasySite files to a subfolder, then, you would go to:

www.your_domain.com/some_folder/install.php

You *may* or may not have to chmod some files and folders during the installation process. If you do not know what chmoding a file or folder means, then you should contact your website host.

Most FTP programs, like CuteFTP, WS_FTP, and AbsoluteFTP have the ability to do this. During installation, EasySite will attempt to do the chmod-ing for you, but it may not be able to, depending on your server's security settings. Usually a chmod to "666" is sufficient, although in some cases, you may need to chmod "777" to get the installation to work correctly. In AbsoluteFTP, for example, CHMODing files and folders is as simple as right-clicking on the file or folder, and then left-clicking on the Properties option from the popup menu. Then, make sure that the middle column (for "groups") is "writable" for all users: the Owner, the Group, and all Others.

Be sure to delete the install.php file, and the install_files folder, after completing the installation wizard! Otherwise, malicious web users would be able to change your EasySite configuration!

Edit the Site Settings

Assuming that you were able to complete the installation wizard successfully, you should now have a sample website in place. It's probably not what you want, however, unless you coincidentally run a company called "ACME Widgets". The EasySite installer creates some pages and menu items for you during installation, but this is only to get you started. We have some editing to do!

By default, your content management tools are stored in the sub-directory called "manage". You can access them using your web browser by going to:

www.your_domain.com/manage/

Or, if you installed EasySite to a sub-folder, you would go to:

www.your_domain.com/some_folder/manage/

At the bottom of the default template (in the "Footer" template area), there is a link at says [ Admin Access ]. This link will also take you to the /manage folder, where you can login to the Content Management Tools. The system will prompt you for the login page (see screenshot at right). During installation, you proably specified the Administrator user name and password. You should input those into this login prompt.

The first thing that you'll probably want to do is change the site settings. For example, you may want to use a different background instead of the default blue and white. Go to the Global Settings section to edit these settings. The blue borders at the left, right, top and bottom are the "Color Bars", and they are images that repeat across the page horizontally and vertically. These are optional, of course, and you can delete them or change them in the "Template Sections" section of the Global Settings tool.

The best way to learn about these settings is simply to change them and see what happens. For example, if you set a larger value for "Horizontal offset" of the "Main Body" template section, then you will immediately notice that the main body area of your website shifts to the right. Setting a smaller value will cause the main body area to shift to the right, etc. The diagram above shows some of the site settings that you can modify using this tool. Some of them produce analogous, but subtly different effects. For example, increasing the "section padding" and "main body" padding will both move the section content farther away from the edge of the body area, but the section padding will also slightly increase the space between sections at the same time. "Image Padding" is the padding around embedded images, when present. When an image is left-aligned however, the left padding is not used, and when the image is right-aligned, the right padding is not used.

You will no doubt also wish to change the background template images. I strongly recommend that you review the "TPS" tutorial, too. This tutorial shows you what the various template sections mean, step by step. For example, about 90% of websites use a very standard template layout which involves a background corner image, and a horizontal or vertical repeating image of some type. These template areas are shown below. EasySite provides even more control than that, because you can also change the right-side and bottom template areas, too.

In the "General Site Settings" option, some users are confused by the "WYSIWYG Text Editor" setting. This option is only useful if you have Internet Explorer version >= 5.5. It will allow you to use a word-processor-like interface while editing text in the Page Manager. To see the WYSIWYG editor in action, you will need to use the Page Editor tool. It is entirely optional, of course. Also, some users are confused by the "PHP Date/Time Format". This is used in the "last update" code only. If you live in Europe you might want to set this to 'd/m/y' instead of the default 'm/d/y'.

Probably the first thing that new users ask of EasySite is: how do I change the color bars that are added by the installation wizard? Again, the Site Settings tool comes to the rescue. The Horizontal Color Bar (section A5 in the Template Layout tool) repeats along the x-axis at the top of the page, and the Vertical Color Bar (section A8 in the Template Layout tool) repeats along the y-axis at the left side of the page. You may delete or replace the color bars, of course, since they are entirely optional. Color Bars are a common design paradigm in many websites, which is why they are added by default (essentially so that you can see that it's possible).

Styles

Styles (cascading style sheets, or CSS) are a way to enforce a consistent look and feel across all pages of your website. It is STRONGLY recommended that you use styles instead of attempting to use the WYSIWYG editor to achieve the look that you want. When you change a style with the style editor, all text that is based on that style automatically adjusts - for example, page section text, form text, etc. There are a few pre-defined styles, which are used for some form parts, as well as the content-management tools. Thus, by using styles, if you wish to change all of the text throughout the website to a slightly lighter color, you do not have to manually edit every page section - the color change automatically propagates through all pages, forms, layers, etc.

When a page is accessed, the style information is read from the database and outputted directly to the user's web browser as CSS data. Actual external style sheets (with the .css extension) are not used in EasySite (at least, not in it's core... some modules might use external style sheets).

Creating Pages and Forms

The Page Editor

By now, after playing around with the site settings and styles, you should have the *look* of the website as you want it. It's time to add some content! Return to the content management index page (www.your_domain.com/manage/), and access the Page Editor by choosing the "Home Page" in the list of existing pages, and then click Continue. This page and a few others were created automatically with the EasySite installer.

Here's the idea behind the page editor tool: typically, a page is divided into paragraphs or 'sections'. Within a paragraph, it's very common to embed images. If you move the paragraph around, you probably want the image to stay with it, and you also probably want any style formatting to remain with the paragraph section. That's the rationale behind the page editor tool layout. If you've ever used Microsoft Word's "outline" format, this concept will be familiar to you. Styles and embedded images or objects stay with the paragraph if it is moved around.

Of course, you don't have to put your page into sectional blocks, but it's recommended. You could, for example, put all of your content in a single section. In fact, this might even be useful if you use a program like Dreamweaver or Frontpage to create the page content... you can simply copy/paste all of the HTML source code into the edit block (of course, you might as well just use EasySite's built-in WYSIWYG editor in such a case!). Stylistically, it's not a good idea to over-use the WYSIWYG editor, because you probably don't want your website to look like a ransom note (or, maybe you do!). In fact, to make your website look the best, you should avoid using the WYSIWYG Editor completely, and only use pre-defined, and possibly a few custom-defined, styles.

Any images that you embed into a page section will be incorporated directly into the page section text, and the "Popup" image will appear as a small popup window when a user clicks on the Embedded Image. Of course, all of this is entirely optional - you don't have to put any images into your page at all, and you don't have to link to popup images. You can also link images to external URLs by specifying the "Image Link", and you can anchor the embedded images to the right or left-side of the page. By specifying an image anchor, you can ensure that the section text wraps naturally around the image.

The "style" drop-down list will apply a uniform style to the entire page section. Alternately, you can use the WYSIWGY content editor if you have Internet Explorer >= 5.5 for Windows. Again, this is NOT recommended, however, since it's very easy to make your website look really, really ugly by adding too much fomatting. But sometimes, there is a look that you just can't get without it.

If you want this page to be the default page for your website (so that this page will load when users go to www.your_website.com), then make sure that the "Make this the default page for this website." checkbox is checked. At the top of the page editor, there is some extra information, like which menu item links to this page, and also how many users have viewed the page. Be sure to specify a Page Title, too, so that you can easily identify it later.

The Form Editor

The Form Editor is quite similar to the page editor in many ways. Forms are divided into sections, which can be "bumped" around the form, deleted, etc. As you can probably see, it makes a lot of sense to use "sections" for the form editor, since labels and form fields always go together. If you want to restrict the input values, you can use the "Validator" options. For example, you may wish to require that a valid e-mail address is entered, or that the input is numeric. By checking the "Required?" option, you can ensure that the field has a non-blank value before submission. If you are a web developer, it's quite easy to add more validators if you have a small amount of Javascript knowledge: for example, you may wish to restrict input to only valid social security numbers, or only valid driver's license numbers, etc. These would require custom validators.

When a user submits a form, where does the content go? Where does the user get re-directed to? These values are set at the top of the Form Editor. You can specify the subject, recipient, and even CC values for your form. Upon submission, you may redirect the user to any existing page, for example a "Thanks" page of some kind. Like with pages, it is possible to make a form appear as the default page for your website. You can also redirect to another form to create multi-part forms. In this case, the values of the previous form are saved as "hidden" fields until final submission of the series of forms. EasySite knows that you are at the end of your form series when a redirection to a page is detected, rather than a redirection to another form.

To test your form, click on the URL link in the form editor. You may also use this special URL link in other parts of your website. For example, if you want to embed a link to this form in a page section, you would copy this link and insert it into the page section directly.

A couple of items which sometimes cause confusion for users is the "Select/List Values" and the "Field Size" options. The list values for select lists should be delimited by commas. Unlike the HTML <select> tag, there are only output labels, not values and labels. Thus, for purposes of submission, values = labels. This might be changed in a later version of EasySite, but for most users this is probably sufficient. The Field Size is an integer if Single-line Text, or two values separated by a comma for Multi-line Text. For example, "4,50" would be a valid value for Field Size in a Multi-line Text situation. The first value is the number of rows, and the second value is the number of columns for the Multi-line Text (also known as a "textarea"). In the event that two numbers are inputted for a field that is not a textfield, only the first value is used for the field size, since the height of a single-line text field is always 1.

Menus

Menu Structure

A very big part of EasySite is the menu system. EasySite's menu editor is very powerful. Not only can you re-organize any menu in terms of depth and order, but you can even add more menus (in fact, infinitely many!), and define custom settings for each menu. This is where EasySite truly stands out as an advanced content-manager. EasySite may be the only content-management system for PHP/MySQL with a DHTML menu editor with this degree of power. Here's quick summary of the menu controls:

It's probably self-explanatory, but the "Link to" combo list allows you to link a menu item to an existing page, form, or file. You can also specify no link at all, or link to an exernal URL or e-mail address. If you choose to link to an email, you do NOT need the "mailto:" in front of the address - EasySite will do this automatically.

Menu Settings

There are two basic types of menus available in EasySite: "Standard" and "Tree". Instead of trying to explain what they mean, you should play with the menu settings to see how it works. It's easy to see what most of the menu settings do simply by playing around with the tools.

The font sizes & styles in the menus are NOT controlled by the Edit Styles tool in the EasySite content manager. The reason for this is that there could be many menus in a website, each with its own set of distinct styles, which would make the styles tool quite large and difficult to maintain. Also, it is very common for websites to have a different style in the menus than other parts of a website.

In the menu editor, you can click on the small pencil icon to directly edit the style of any particular menu item. Otherwise, all menu items assume the default menu style & settings.

Users & Groups

When you install EasySite for the first time, the default username & password is "admin" and "pass". Obviously, you should change this as quickly as possible, or every EasySite user in the world will be able to quickly guess your login. To change this, use the "Users & Groups" tool, then choose the user named "admin" and click on "Go". For each users, it's possible to view personal information, like name, contact info, etc. Thus, you can actually use EasySite as a simple personal information manager!

If your company or organization has many departments, you can distinguish among your users by department ("group"), and assign shared permissions to all users in a group. This is useful if you want to upgrade or downgrade a set of permissions for all users who belong to a certain group. Instead of changing the permissions of a single user, just change the group permissions, and all users in the group will be affected by the change.

EasySite also has the ability to download or export your site users as a tab or comma delimited file for importing into Excel or a Personal Information Manager... heck, why not just use EasySite as your Personal Information Manager? Later versions of EasySite will probably expand on this concept quite a bit.

Files & Backup/Restore

Uploaded Files

You can upload files, like Microsoft Word and Excel documents, and PDF files, to your site using this tool. Please note that there may be a size restriction, depending on your web server's settings. Typically, this size limit is about 1000 KB (1 MB). Since the file information is stored directly in the database, you can control access to the file quite easily using the EasySite group permissions tool, and you can link this uploaded resource to any menu for direct downloading.

Backup & Restore

You should always make a point of backing up your website's data any time that you make a lot of changes to your site using the content management tools. Since your entire EasySite website is database-driven, this is as simple as backing up the database. It is NOT necessary to backup the "web files" (the .php files and .tpl files, etc.) because these essentially never change. If you lose them, then you can just use the files that come with the default EasySite distribution from TUFaT.com. I do recommend that you backup your current web files and database any time that you upgrade EasySite to a new version. Care is taken to ensure that the upgrades are seamless and correct, but sometimes minor bugs slip through the cracks. In short, I consider it your responsibility to backup your data, not mine.

Thanks for using EasySite, and enjoy!
Darren

(c) 2002 - 05, Darren Gates, All Rights Reserved
TUFaT.com