-----

CODECHARGE STUDIO 5 QUICK START 2 (Using Employee Template)

INTRODUCTION

In this tutorial you will learn how to create a project from the available template and publish it to a localhost server.

PREPARATION

In order to follow this tutorial you need to prepare two folder structures:

1) Development Folder.

You need a Development Folder to keep your working files/folders. For example, C:\DEV\projects\

2) Server Folder.

You need a Server Folder to host your published files/folders. For this tutorial, we will be using usbwebserver software package, i.e a type of Apache-MySQL-PHP package. Download the zip package from http://usbwebserver.com . Extract the server root folder into C Drive. You should have done it correctly if the web root path is C:\USBW\root\. Create a new folder “projects” under the C:\USBW\root\ folder (refer the example below).

GETTING STARTED WITH EMPLOYEE TEMPLATE

1) The first time you run CodeCharge Studio 5, you see the following:

2) Go to the Solutions section.

Click Employee Directory.

3) In the project details section, enter texts as follows.

Click Create Project.

4) Using File Explorer, check that a new project files/folders structure is created in C:\DEV\projects\employee1\

5) Back to CodeCharge Studio 5 Application Window.

5.1) Notice that the Project Explorer shows the employee1 project components.

Some of the components are logical, i.e. they may not exist physically in the project folder in the C:\DEV\projects\employee1\.

Logical components include the Diagrams, Connections and Resources objects.

5.2) Click the Files Explorer.

This tab shows you the physical files that can be found in the C:\DEVV\projects\employee1\

6) Double-click Default.html.

Then, click HTML tab.

You will see HTML codes for Default.html.

Click Preview tab.

7) Double-click Default.ccp.

Then, click HTML tab.

You see the similar codes to Step 6 above (HTML Tab).

Click Code tab.

You will see the PHP codes for Default.php

8) Steps 6 and 7 shows us how CodeCharge manage the project codes; the HTML file contains the presentation format for a page while the CCP file contains the programming code for that page.

9) Click the Preview tab.

You will see a preview of the page. This gives an impression on how a page would be displayed in a web browser on a live website later on.

10) Click Live Page tab.

A Project Settings dialog window pops up.

Enter details as follows.

Click OK.

CodeCharge may ask you to allow it to create the Server Path.

Click Yes.

The page now is displayed in the Live Page tab. Take note of the URL.

11) Find the Live Page button under Publishing Section of the Home Tab.

Click the down arrow and select Live Page in Browser.

A Web Browser automatically runs and opens the URL http://localhost:8080/projects/employee1/Default.php

(If you wonder what’s the difference between Live Page and Quick Live Page, read this forum thread, http://forums.yessoftware.com/posts.php?post_id=46475 )

12) Despite the page is viewable on localhost, the whole website is not yet alive.