Web Transformations: Electronic media for a digital world!

Using a Database Interface to Update Your Web Site

If you have a frequent need to update certain pages of your Web site, we can create those pages to use content from a database. You can then update the content of your Web site by updating the information in the database, without having to know anything about web design or HTML programming. The interface is a special set of Web pages we create in a separate administration area of the Web site that is password-protected. Only persons with an authorized login account will be able to change the database content.

The following demonstration illustrates how the administration area can be used to easily update your Web site content. The demo uses a Dance Web site created by Web Transformations. The dance instructors need to be able to add information to their Web site about new pieces of dance choreography, and to upload the dance instruction cuesheet files into a documents folder on their Web site.

Log In

To log in to your administration area, you would open your browser and enter the address for the home page of your password-protected site; e.g., www.mywebsite.com/myadmin/. The opening page would look something like the one below:

Screen shot of login page for your administration area


Administration Area

After entering your username and password and clicking the Log In button, you would be taken to the Menu page for your administration area:

Screen shot of the Menu page for your administration area

The menu provides an easy means for you to choose the type of activity you wish to perform within this database interface area. The menu choices are presented in a logical sequence.


View Current Listings

If you wanted to add a new dance listing, you might first want to view the dance listings that are currently displayed on your Web site—to make sure you aren't going to duplicate something that has already been added to the site. For this purpose, you would click the option to View Current Dance Listings:

Screen shot of a page showing current dance listings

For demonstration purposes, we will add a dance listing called Test Dance Listing Entry—not the most exciting dance name I can imagine, but it will serve to demonstrate the process. It's important to realize that the listings will appear in alphabetical order according to a key field in the database. In this case, the dances are sorted by Dance ID, and the Dance ID has been designed specifically to ensure that the listings will sort the Dance Names in alphabetical order (i.e., the first 4 letters of the Dance ID correspond to the first 4 letters of the Dance Name). Looking through the current listing, we see that our exciting new dance has not yet been added to the database.


Add a New Listing

There are a couple of different options you can use to start creating the new dance entry. At the bottom of the listings there are two links: the Top link would take you to the top of the same page, and the Administration Menu link would return you to the menu so you could choose the Add a Dance Listing option.

Screen shot of the menu return link at the bottom of the listing page

If you click the Top link or scroll to the top of the listing page, you will see a text link that allows you to Add a Dance without having to return to the Administration Menu page.

Screen shot showing the Add a Dance link at the top of the listing page

Creating a new product listing on your Web site is as easy as filling out a form. You've probably done this hundreds of times when you purchased products online or signed up for newsletters or discussion groups. Notice that there are 3 columns in the form shown below. The 1st column tells you the type of information that should be entered for each field on the form. The 3rd column provides explanatory text and a sample text entry to help you fill out the form with confidence.

Screen shot of the interface from that allows a new listing to be entered in the database
This form allows a new dance listing to be added to the database.

Once the form is completed and you click the Insert button, an entry is created in the database.

Screen shot showing a completed form for entry of a new listing in the database

You are then taken back to the dancing listing page, where you can verify that your new dance does appear within the dance listings.

Screen shot showing the new dance displayed alphabetically within the full dance listing

Notice that in this master list (above) you are seeing only a few fields from the data entry form. In order to see a complete listing of all details about a particular dance, click the Details text link in the View column of this master dance list. You will now see complete details about the selected dance.

Screen shot showing a form with complete details about the selected danceIf any of the details are incorrect, you can click the Edit link at the top of this View Details page. There is also a link at the bottom of the page that allows you to Edit this Dance.

You may note that the Filename and Music Filename are underlined in blue text, indicating these are links. You have not yet uploaded your cuesheet file to the documents folder or your music file to the music folder, so if you click either of these links right now your browser will produce an error message (such as "Page Not Found"). However, once you have loaded your cuesheet file, clicking the underlined filename will cause your browser to open the document in a Web page:

Screen shot showing the opened dance cuesheet


Edit (Modify) a Listing

Editing a listing to modify the current content is very similar to adding a new listing. When you select a dance by clicking the Edit text link to the left of any listing, you will see a familiar Web page form. This time the fields are already filled in with the current information for each field of the form:

Screen shot showing a dance listing with the current exisitng content

Simply change the contents of any field and click the Edit button at the bottom of the form. You will be taken to the View Details page for the dance listing you have just updated. This allows you to verify that the information is now stored correctly in the database.


Delete a Listing

You can also delete a current listing by choosing the Delete link next to any dance on the View Listings page.

Screen shot showing the Delete option for a record listing
From the View Listings page you can select to view the Details of a listing,
Edit a listing, or Delete a listing.

We build in some precautions to help you avoid deleting a listing by mistake, or deleting the wrong item from the list:

Screen shot showing the delete warning message
Warning message helps prevent accidental deletion of a listing

Not only do you have a chance to change your mind about deleting an entry, the warning message also confirms that you have selected the listing with ID# TEST-Tran for deletion. If you accidentally clicked the wrong listing, you can cancel out of this operation and choose the correct item for deletion.

Once you click the OK button, you will be taken to the listing of all dances so you can verify that the old listing has been removed from the database.

Screen shot showing the listing of dances, with the TEXT-Tran listing now removed
The dance listing after deletion of TEST-Tran


Upload a File

You may find that you need to upload certain types of files to your Web site. In this example, the dance instructors need to upload a PDF version of their cuesheet to a documents folder, and an MP3 music file to a music folder. This action can be performed either before or after the information about the dance is entered into the database.

From the Menu on the Administration home page, select the Upload a Cuesheet option. This will open the file upload page:

Screen shot showing the Upload file page

Clicking the Browse button will allow you to select the cuesheet file from its current location on your own local computer. An example file selection is shown below:

Screen shot showing a file that has been selected using the Browse button

If your file is uploaded successfully, you will be sent to the Success page:

Screen shot showing the file upload success page

If there is a problem uploading your file, you will receive a File Upload Error! page that explains some of the reasons your file might have been rejected by the Web server. You can fix the errors in your file, and choose the upload option again.

Screen shot showing the file upload error page

Once your file is uploaded successfully, you can return to the View Details page for your new dance listing and click the Filename links to make sure the files open properly within the browser.

Screen shot showing the View Details page with the file links that can be tested

Your Web site is now updated and will immediately display the new dance listing on your choreography page!


Web Transformations, LLC