Modifying Template Files in Your Personal Web Page

Problem:

What are these files mainmenu.php, personal_vars.php, and index.php in my home directory? How do I use them to modify pages on my ISyE home site? How do I add new pages?



Solution:

Note: These instructions apply only to ISyE faculty and staff interested in hosting a personal website on ISyE's web server. If you are ISyE faculty or staff and would like to find out more relating to setting up and using your personal web space, please refer to this Knowledgebase article. The ISyE IT group is happy to assist you in getting you started, or, if you wish to set up your web space by yourself, please download the template files and put them into your home directory.

If you have questions or comments, please feel free to contact Andy Haleblian.

This tutorial assumes that

  1. You have a basic understanding of HTML.
  2. You know how to retrieve and put web files to and from your personal web space. For information relating to file transfer and available software, the ISyE Knowledgebase contains articles on using FTP Voyager and WinSCP.
  3. You have access to and know how to use a chosen webpage editor. Popular choices include

    Note: We strongly suggest against using Microsoft Word to edit your web pages. Microsoft Word has a tendency to write bloated, poorly formatted, and sometimes poorly supported code.

These instructions were developed using Macromedia Dreamweaver as a reference, but are applicable to other webpage editors. Please note that these instructions are not meant to be a guide relating to using any particular piece of software.

What are Templates and How Do They Work?

A template is a standard design or method of carrying the same web page elements across multiple web pages with minimal effort. Our application concerns including a standardized ISyE header, footer, navigational menu, and html style (using CSS) across multiple ISyE faculty and staff pages. Please note we are employing the use of PHP (PHP Hypertext Preprocessor) for this purpose. This web scripting language is supported by ISyE's web server and is a straightforward solution for our application.

Parts of the index.php file

Each page within the user's web space using the ISyE template is based on the index.php file (usually named index.php if it is the only file in that directory – the default document, or a different filename if multiple files are located in same folder). For our purposes, we will refer to the template file as index.php. This file includes PHP code that dynamically pulls in the header, footer, menu, and styling from external files located elsewhere on the web server. This template file can also contains individual content specific to that page that the user can edit. Usually, this is the only part of the file that the user will have to modify.

To Edit an Existing Page on Your Website:

  1. To find the folder on the server that contains the page that you wish to edit, look at the page's URL in the address bar of a web browser. Using your home directory as a base reference, the relative location of the folder on the server is identical to the relative location of the page in the URL.

    For example, if the URL of your home page is

    http://www.isye.gatech.edu/~andyh/

    and the page that you wish to edit is your Research page located at

    http://www.isye.gatech.edu/~andyh/research/

    and your Home page is located on the server at

    /home/net/www_users/andyh

    (where the public_html soft link points to in your UNIX home directory) then your Research page is in the folder located on the server at

    /home/net/www_users/andyh/research

    The index.php file with content for the research page

    Note : Filenames within our UNIX system are case sensitive. When editing and reference files in html code, please ensure that this is taken into consideration.

  2. Find the folder on the server that contains the page you wish to edit (according to Step 1). Open the file in this folder using your favorite webpage editor.

  3. To edit the content of your web page, edit the code between the lines

    and

    These are the start and end tags for content

  4. When you are done, upload the file back to the server to the directory you downloaded it from.

To Create a New Page within Your Personal Web Space:

  1. In your home directory, create a folder to contain the files for your new page(s). Note that your folder name cannot contain any spaces.

    Creating and naming a new folder

  2. Copy the index.php file from your home directory and paste it in your new folder.

    Copying and pasting index.php into that new folder

  3. Open this file up in your editor and delete the lines

    include("isyeinternet/includes/contactinfo.php"); ?>

    Between the lines

    and

    ,

    write the HTML code for your new web page. Note that the and tags, as well as any HTML code that would normally go between the and tags, are not necessary.

    Modifying the index.php file

  4. Go to the line

    require_once('personal_vars.php');

    at the top of the file and add ../ in front of personal_vars.php as many times as there are subdirectory levels between the newly created index.php file and top level of your web page directory.

    Editing the personal_vars.php line

    For instance, the index.php file in the biography folder is one subdirectory level below the top level of my web page directory. To relate this and have the path render correctly, I add ../ in front of personal_vars.php.

  5. Save the file and upload it to the server.

  6. If you wish to add a link to this page within the navigational menu on the left side of the page, open up the file mainmenu.php in the top most level of your web directory and alter the menu accordingly (we have included the most frequently used menu structure, so use this code as a reference, and feel free to modify it for your needs).

    The mainmenu.php file

  7. If you see a commented-out line that contains the name of the folder you created in Step 1, delete the on either side of that line. If not, copy a line of code beginning with · that is not commented out and paste it on the line below.

    Copying and pasting a new line into mainmenu.php

  8. Change the folder name to the name of the folder you created, and change the text between the anchor tags to the name of your new page.

    Editing the new line

  9. Save mainmenu.php, upload it to the server, and view it in a web browser.

    The finished website


Properties ID: 000072   Views: 33091   Updated: 1 year ago
Filed under:
Web