Web Programming Course Assignments
- Use Netscape or Microsoft Internet Explorer to connect to the class web
page at
http://cs-netlab-01.lynchburg.edu/courses/WebProg
- Log on to your server account and change your password as needed. Your password should meet the following criteria.
- It should be at least 7 characters long.
- It should be something you can remember so you do not have to write it down.
- It should not be anything obvious.
- It should not be a word in the dictionary.
- Create a folder on your P: drive named WebProg. You will store your completed homework assignments here.
You must give me full control of this folder so that I can grade your assignments. To do this use MyComputer to browse to your P: drive. You may create the folder by clicking on File-New-Folder. As stated above name the folder WebProg.
Next, right-click on the folder. Then click on Properties. This will bring up a window. Click on the Security Tab at the top of this window. Next click on Add and select Lynchburg-edu from the top drop-down box. You may then browse the list of users to find me or simply type roussos_c in the bottom window in place of the first line that reads << Type names separated by semicolons or choose from list >>. Click OK and another window will appear where you will be able to define privileges. Give me Full-Control of the folder.
- We will use email extensively in this course so ensure that your college email account is working properly. Your college email account should be username@students.lynchburg.edu where username is the username that you use to log into College computers. You must either check your College email frequently (daily) or make it forward to another email account that you check frequently.
- Learn to use FTP (file transfer protocol) to copy files from one computer
to another. WS_FTP is easy to use and is located in most labs around campus.
You will use WS_FTP to copy files from your diskettes to your server account.
Instructions on the use of WS_FTP are located here. More general instructions on using WS_FTP are located at http://www.lynchburg.edu/public/docs/USERGUID/FTP.HTM
To connect to your server account type in studentserv.lynchburg.edu for the host name. Enter your username and click OK. At the password prompt enter your password.
IMPORTANT NOTE:
FTP might not connect directly to your account. You will need to click on ChgDir and enter /people to change your directory to the folder where users' accounts are located. You will then need to scroll down to find your account in the alphabetical list. Alternatively you can enter /people/YourUserName after you click on ChgDir.
- Getting a high ranking in Google for your website is generally very important. Review the web page at http://www.google.com/webmasters/guidelines.html and related pages and be prepared to discuss it and answer questions.
- Create an HTML document using notepad - Homework. HTML documents are simply text files. If you know HTML tags you can create documents using a simple text editor such as notepad. You will demonstrate this by creating a simple web page describing how you might use web programming in your future profession.
- Research HTML editors - Homework. We will use one almost every class. You may wish to try the freeware version of HTML Assistant. You can download it at http://cs-netlab-01.lynchburg.edu/users/anonymous/HTMLAsst/
The file name is pro3free.exe
While researching HTML/Web programming editors, keep in mind that many have serious flaws that do not surface until you have used the editor for some time.
You must identify at least one editor you discover and be prepared to demonstrate its use to the class.
An ideal editor will "understand" HTML tags, JavaScript, PHP and the DOM (Document Object Model) which is the hierarchy of objects and their attricutes in the web document environment. An ideal editor WILL NOT reformat or otherwise modify code you have written without your permission.
- Create an HTML document using your selected editor - Project #1
.
Create an HTML document for a club, organization, etc. that you are associated with. Your file must be called Proj1.htm and be located in folder Proj1 in your Projects folder. Your page must use all of the following devices in a meaningful way.
- The basic, common tags such as <BR>, <HR>, <B>, <I>, <Hn>, etc.
- lists
- links - internal and external
- tables
- images
- fonts
- <DIV>
- styles
- Web Search - Project #2
Search the web to find web page elements/features that you consider useful and otherwise good website development practice. Identify each, stating why the element/feature is useful, appealing/attractive, etc. Put this data into a paper called WebSiteFeatures.doc and place it into the Projects folder on your P: drive.
Examples of good practice include incorporating a means to easily determine what is on the site, for example, an index of the site. This helps the user find what he/she needs quickly or determine that the site does not contain what he/she needs. An alternative/addition is having a search mechanism. What are the advantages/disadvantages of an index over a site search mechanism?
- Read the Chapter on JavaScipt from The Internet Encyclopedia published by Wiley and be prepared to answer questions on the content.
- Project #3 - Calendar or Slide Show in a web page
For this project you have your choice of creating a JavaScript calendar or a slide show of images. We will discuss both of the applications in further detail in class but this MUST BE your original work. You may not copy code from the web. Both applications in their basic form are not very difficult and both may be enhanced greatly to provide more functionality than the basic rendition.
Specifications - Calendar
- must show an entire month in a relatively standard format
- the user must be able to select any year
- the currently select day must be highlighted
- when the user clicks on a calendar cell the corresponding year, month and day must be made displayed. This is to ensure that a programmer using your code will be able easily access the selected date.
Many calendar enhancements are possible. For ex., when the web page first loads it is preferable that the calendar display the current year and month.
Specifications - Slide Show
- must allow the user to move to the first, previous, next and last image
- must allow the user to access any image directly either by number, thumbnail or other convenient mechanism
- must properly display the selected image
- some mechanism must be provided so that the user may easily specify the images of the slide show and their order, the size of the image window, other parameters
Many slide show enhancements are possible. For ex., it would be quite useful to create a C++ or VB program to interface with the user and allow the user to specify the parameters listed above. The program could then write the HTML/JavaScript code; most of which could be simply stored in a file that the program loads.
- Web Programming - Project #4
Our next web programming project will be the start of an ongoing project. You are to create a web store where you will sell "something" that makes sense to sell over the net. You may have flexibility in determining what you wish to sell and what your site will look like. You must meet the requirements that will be specified as we develop the store. The requirements for this phase of the project are listed below.
We will work on parts of this project in class and I will work on my own web store.
You might wish to consider some alternatives to the standard store business model. For example, the store could be run like a shop (even a consignment shop). In the shop model customers may make offers for items in the store. The store is free to accept or reject the offers and the customer is free to rescind the offer before payment is actually made. In a consignment shop the items are owned by different individuals. Who owns the item must approve the sale.
Another option would be to run the store like an auction (the eBay model).
Requirements - phase I.
- Create the primary navigation bar for the site. It may be implemented as an image map or as a table of images or buttons. Later we will learn how to use DHTML and/or Javascript to modify the image as the mouse passes over it.
- Use appropriate href and alt tags for each menu item.
- Use the title tag to create an appropriate title.
- Test what you have done to make sure it all works properly.
Requirements - phase II.
- Create a stand-alone user registration form. (Later we will incorporate this form in to the main project)
- Name this subproject, RegiForm.htm and put it in your Projects folder on your P drive. You may view the form at
The Knowledge College for help.
- The form should contain space for name, address, phone, email, gender + ? (later we will write functions to validate contents). Your RegiForm must use all of the input devices utilized in The Knowledge College form.
- Check the RFCs on the mailto: protocol. (Be prepared to answer test questions re: RFCs)
- The registration form will email its information to you using mailto. (Since the use of mailto is often problematic we will later substitute a PHP script to do the mailing.)
Requirements - phase III.
- Employ judicious use of the status bar.
- Utilize the image object and the onMouseOver event to dynamically change images.
- Use page redirection to redirect alternate home pages.
Requirements - phase IV.
- Use tables to structure page elements.
- Create a text menu bar with links to other sites/pages including help and login.
- Employ judicious use of alert to notify the user of a condition.
Requirements - phase V.
- Define styles and use them to give attributes to html elements.
- Define and utilize sequential and overlapping document elements using the span and div tags.
- Create a button that executes a JavaScript function using the onClick event
- Utilize the event object and the onKeyUp event to process keystrokes.
- Create a clock that updates the time approximately every second or another useful device that utilizes the setTimer function..
Requirements - phase VI.
- Use form elements such as text and selection boxes to gather user input/preferences. Validate the contents of these elements using JavaScipt.
- Use a cookie to store and retrieve user preferences.
- Use the date object to write the date from the server as well as the client.
- Create a new window containing information about the user's environment.
Requirements - phase VII.
- Pass information from one web page to another using only client-side scripting.
- Create a registration or order form.
- Utilize a mailto with subject to send information to the page administrator.
- Define and use JavaScript functions to validate input.
- Create navigational controls to move backward and forward in the history list.
- Create a bar graph using image sizing.
Requirements - phase VIII.
- Perform calculations using javaScript.
- Create a Nerd Tools area including links to a calculator, calendar, etc.
- Dynamically create a basic monthly calendar utilizing a loop.
Requirements - phase IX.
- Create a login/user authorization table in a database.
- Create a login form
- Validate logins using the user authorization table.
Requirements - phase X.
- Create an inventory table in a database.
- Display inventory by category upon request from the main page
- Web Programming - Project #5
Create a web page that uses PHP to display the most useful special variables (similar to phpinfo()).
You may receive a better grade by making a better user interface and providing more options and formatting the output.
- Programming exercise - HTML document creation using JavaScript
Create an html document listing all characters with ASCII codes from 0 - 255 using a computer program written in Javascript. You must use a loop - preferably a double for loop to display the characters in columns.
Put this project in a subfolder of your Projects folder named Characters. The file Characters.htm should reside in this folder and contain Javascript code to write out the characters in several columns so they are easily viewable.
Top of this page
Home page 