Getting Started and DOM Essentials
In this lab you will create a basic website on a theme of your choosing, then add dynamic capabilities to this website based on manipulating the DOM directly. Later labs will build your website into a full-fledged web application.
Picking Your Theme
You will continue this theme/site for the next few labs, so choose wisely. You want to pick a theme that is rich enough to expand. The only hard requirement is that there must be some plausible reason for users to contribute "content" to your site. This could be comments, product descriptions, ratings, etc.
Your topic should make sense with the following requirements that we'll add in later labs:
- User interaction where the user can submit some kind of information that you save on the server to show later.
- The user information has multiple aspects to it, such as titles, details, times, dates, names, etc.
- A database backend (to keep track of user-provided content)
- The ability to refresh data on the page without hitting reload (e.g. to present search results)
- A search box with an "auto-complete" function (where users type some characters and the system provides suggested endings).
Most topics involve users submitting some kind of information, which you will then make searchable through a search box and results screen. A bad idea is a site devoted to one person. Multiple users is best. Examples from previous years that you are free to adopt/adapt:
- A blogging site
- A site that keeps track of a user's exercise history.
- A local hometown website
- A site that lets users submit favorite books/authors.
- A movie lookup site.
- Site for a sports team or ECA.
- Site for your company
- Site for buying used auto parts
General Web Page Guidance
All labs (that are web pages) should conform to basic standards and propriety. For all labs in this course, you may not use editors such as FrontPage, DreamWeaver, etc. unless specifically authorized by the instructor.
For this particular lab, you must include all of the requirements listed below (for full credit). But keep in mind that merely doing these requirements is not enough. Carefully consider the web site's programming accuracy, functionality, artistic quality, and creativity. The grading standards from IT350 (see bottom of page) will again be the guide.
Initial Setup Instructions
Follow naming conventions very carefully in this course. Lab1 is not the same as Lab01. Lab01.htm is not the same as Lab01.html.
Map your W: drive to your personal web space (your "web drive"). You may already have a mapping to zee, but follow these instructions anyway to map to nuzee.academy.usna.edu:
- Go to My Computer and select "Map Network Drive" from Tools.
- For Drive, pick W. For Folder, enter \\nuzee.academy.usna.edu\mXXXXXX (Substitute your alpha for XXXXXX).
- Check the "Reconnect at login box."
- You shouldn't need to click on "different user name", or provide any different password.
- Click OK, then click Finish.
- Verify that you can access your W drive.
- Note: you should use this mapping for accessing all of your UNIX files (for all courses, unless told otherwise). Use this rather than "zee".
Set up the web server
- "ssh" into intranet.cs.usna.edu (this machine is our web server). You can use putty or some other tool. Use your normal credentials.
- If it doesn't exist from previous semesters, create a new directory public_html (mkdir public_html)
- Change permissions to allow web access to your home directory, and your new public_html directory:
chmod a+x .
chmod a+rx public_html
- Make a subdirectory it452 (on Windows, or on unix: mkdir public_html/it452 )
- Everything that you create for this course should be inside the public_html/it452/ folder - we'll try to mention that, but it is always implicit in lab directions if not specified.
- Important - the following will save much pain later. You should also do this on your PC in your room: Open up Start Menu, then Control Panel. Click Appearance and Personalization. Under Folder Options, click "Show hidden files and folders". Select the View tab. Look for an option titled "Hide extensions for known file types." Scroll down and uncheck the box for "Hide extensions for known file types".
- Download and save this default.htm page to your directory at W:/public_html/it452/default.htm
- Save it as default.htm, not default.html
- Save all your work under your W: drive. Your X: drive is not visible to the web server. Files saved on the local drive may be erased when you log out!
- Note: the next step will probably fail! Try it anyway, then read the following step for a solution.
- Try to view your page at http://intranet.cs.usna.edu/~mXXXXXX/it452/default.htm (substitute your alpha number for XXXXXX). Remember, your files are stored in public_html, but this is not part of the URL. For viewing, use Chrome.
- It is very likely you will get a "Permission denied" error when you do the step above. This will happen often, so remember the following fix! You need to grant read and write permission to the webserver to access your files. Simplest solution: use ssh/putty, and from your top level (home directory) execute this:
chmod -R a+rx public_html/it452
This recursively (-R) changes the permissions on all files and folders inside your public_html/it452 directory. You will need to do this every time you create a new file (including Perl files, text files, etc. that we will create in later labs).
- Now personalize the default.htm that you saved (see Editor Help below). It is already mostly setup for you, just replace YOURNAME on the page, the slogan, and that's it! (Permission changes should NOT need to be re-done after you edit an existing file.)
- Create a folder on your web drive under W:\public_html\it452 named Lab01
- Base Design: In Lab01 create a file "index.html" (use the starter page to begin) that looks like the home page for your theme, and satisfies the following:
- Is a valid HTML5 page that introduces your theme (HTML5, not XHTML. Ask the instructor if you don't know about this).
- Contains a welcome header, like "Welcome to 23rd Company Blog!", not "Welcome to Lab #1".
- Contains brief content with a slogan and summary description of what the site is.
- Contain some pictures
- Uses an external stylesheet to apply reasonable styling (this can be simple, but get in the habit now of using it).
- Is not just a white page with black text... (but don't spend too long here, you want to get onto DOM...)
- DOM Manipulation: Once you've got the basics working, add some DOM manipulation. The idea is to practice being able to dynamically manipulate the page in interesting ways. You decide on how you want it to work - ideally this would fit in with the theme of the page and resemble some useful functionality, but that's not a strict requirement for this lab. However, at a minimum your page must:
- NOT simply be just like the in-class examples - use the same techniques, but make it different! For example, you might move around list items or paragraphs or images. If you do want to use a table, make sure the functionality is different than the class examples.
- Be commented - easier to comment as you go!
- Be able to move an existing node to somewhere else (e.g. when the user clicks something).
- Be able to create a new text node or other element.
- Be able to delete some element.
- At some point, have code to iterate over all the children of some node (e.g. to change their style in some way).
- At some point, dynamically change the style of some node.
- Never get "stuck" in a final state. In other words, there is always something I can click on to move something or add something new (unless, maybe, the user has deleted all the relevant things to click on)
- At some point, make use of either 'nodeType' or 'tagName' to do something useful (think/ask ahead of time how you will do this!!). It's likely that iterating may also be involved here, but that's not required.
- Ensure your page works with Chrome (IE/Firefox encouraged, not required).
- Ensure that index.html has the validation button (and validate!) and that you have met all requirements.
- Important final step - add some specific instructions to default.htm (next to Lab01 link). What exactly should a user (or the instructor) click, enter, etc. to see that you met the requirements? You will do this for every lab, and in every case, assume that the user has no idea what to do - and especially has no idea what to enter in any text box (so your directions should suggest something that works).
NOTE: all HTML files must validate as HMTL5 without errors for full credit. The penalty for a file that does not validate is 10%.
You are encouraged to use Notepad++. You can use Crimson Editor if you really want to, but we've had unexplained problems with it mysteriously erasing files. Use at your own risk!
When saving a file from your editor, be sure to select "All Files" from "Save as Type". Otherwise you may end up with a filename like index.html.txt.
You are highly encouraged to use Chrome. Its debugging tools are generally the best.
There are two ways to view your files:
- (recommended) Point your browser to http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab01/index.html
- (sometimes useful for client-side debugging) Chrome or Firefox: Ctl-O, then browse to your desired file
The second method fetches your pages directly from your W drive. The validator button only works when using the first method.
If you change your page, but it doesn't seem to change what is in the web browser, use the View -> Source (or Page Source) command from your browser. This will show you the raw HTML that your browser is displaying.
You will print your code for most labs. Don't waste paper, though. Use Notepad++. Click Print... and then Preferences. Select the Finishing tab. Choose "4 pages per sheet" in the drop-down menu on the bottom. Then choose "Down, then Right" in the next drop-down menu. Create a name for this printing setup at the top of the tab and hit save. Then you can easily print this way every time.
- Your main web page should be called "default.htm". Does your default page show up at this exact (with XXXXX replaced) address? http://intranet.cs.usna.edu/~mXXXXXX/it452/default.htm
- Does your lab show up at this exact (with XXXXX replaced) address? http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab01/index.html
- Check that this above URL is viewable and that everything works correctly from a computer where somebody else is logged in. Try that link now, and it better work. If you've goofed and linked to a file on your X drive, this will help you catch it!
- All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment. For next week you will modify default.htm and create Lab02/, but nothing in Lab01/ should change.
- Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
- Completed assignment cover and grading sheets. Two pages: a cover sheet and a grading sheet.
- The first page of the output of the Validator, as run on the final version of your Lab01/index.html. This should show that your document correctly validated, but turn it in anyway if you can't get your page to validate.
- A printout of the source to your Lab01/index.html file (not the rendered page that you normally see with Chrome). Truncated lines are not acceptable. Use Notepad++ to print 4 pages per sheet, "Down then Right" order. See above for "Printing Help" guidance.