SY306 Lab One

Your First Online Business ? and some redirection

 

 

Introduction

 

Upon receiving your 2/C class loan, you decide you want to invest your money and start your own business. You want to create an online store. Now it is time to show your talent and flair. You get to pick your store (or selling platform - see online ?Lab Guidance?).

 

General Web Page Guidance:

 

All labs (that are web pages) should conform to basic standards and propriety. See the Lab Guidance document for specific guidance and for reminders that you may not use editors such as FrontPage, DreamWeaver, etc. for any assignment in this course.

 

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 website?s programming accuracy, functionality, artistic quality, and creativity (again, see the guidance).

 

You are encouraged to do some research. Browse the web for similar websites, pictures, and links. Discover webpage designs and functionality you would like to include in your site.

 

Tips:

 

  1. Read this whole lab through before you start ? will save you time in the end.
  2. Remember that your pages must be valid HTML5.
  3. If you want to use more advanced formatting/centering/styling, look online (we?ll cover this next week).
  4. For images, you may want to use ?Google Images.? Always include the original URL as a comment in the source if you use an image from the web.

 

Instructions:

 

  1. Follow naming conventions very carefully in this course. Lab1 is not the same as Lab01. Lab01.htm is not the same as Lab01.html. Failure to do this may cause the web server and/or your instructor to not find your files.
  2. Setting up the web server
    1. Open a terminal on your Unix lab machine or ssh into a lab machine.
    2. Create a new directory public_html (mkdir public_html)
    3. Change the permissions to allow web access as below:
      1. setfacl -dm u:www-data:rx public_html
      2. setfacl ?m u:www-data:rx public_html
    4. Make a mental note of what you just did. For later labs you may need to make modifications to file permissions or how things are encoded.
  3. Everything that you create for this course should be inside the public_html folder ? we?ll try to mention that, but it is always implicit in lab directions if not specified.
  4. Go to this starter page: http://www.usna.edu/Users/cs/adina/teaching/sy306/spring2017/labs/starter.html . Choose File-> SavePageAs (or Ctrl+S), Select ?Save as type? Web Page, HTML only and save it in your public_html folder as default.html
    1. This must be default.html, not default.html or some other name
    2. Make sure you save all your work under your public_html folder. Files saved on other locations are not visible to the web server.
  5. Try to view your page at http://mope.academy.usna.edu/~mXXXXXX/default.html (substitute your alpha number for XXXXXX). Observe that your file is stored inside ?public_html?, but this is not part of the URL. For viewing, you can use Firefox, or Chrome.
  6. Now modify default.html using your favorite plain text editor. This page is your main page for the course ? each week you will modify it slightly to add a link to the new lab that you have created. Modify this page to have:
    1. your name and alpha
    2. a link to Lab01/index.html (which you will create below). Since this is to another page on your same site, it should be a relative link, not an absolute link.
    3. a legal disclaimer (see below). The disclaimer should be only on default.html. Other pages you will create for this course do not have to have the disclaimer.
    4. You may add other creative enhancements if you like.

7.      Validate your default.html page (you can click on the provided button) and correct any errors. Practice validating as you go ? do not leave it to the last minute! You are very likely to encounter validation errors, and at first they may be somewhat confusing. Allow enough time to work through these and get help as needed.

  1. Create a folder called ?Lab01? (not lab01, or lab1, or any other variant) under your public_html. The overall structure should look like this:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9.      In Lab01, create a file ?index.html? (not index.htm). Use the starter.html page to begin. This page should look reasonably like the home page for your online store. In other words, the general message might be ?Welcome to the Mids Store Online!? not ?Welcome to Lab #1?. Your ?index.html? has to contain the following: (you can also create other HTML pages if desired, but the elements below should be in index.html)

a.       Proper head element with title and meta element with character set defined (this must be in every html file and after this lab it will not be mentioned again, just expected)

b.      An appropriate title of the page (heading). This is not the <title> in the head element, but the title or heading one sees upon opening your web site.

c.       1+ hyperlinks to another site. Avoid links that say ?click here? ? use a descriptive term instead.

d.      1 hyperlink to a page ?products.html? on the same folder, that you will be creating later in this lab

e.       1+ image(s), using appropriate attributes. For any image you get from the web, please include the original URL as a comment in your file.

f.       1+ ordered or unordered list(s)

g.      A hyperlink to your own email address

h.      A few reasonable comments in the source of your HTML files, explaining major sections or what is being accomplished. This may seem artificial for a simple page now, but is good practice. See examples in the main SY306 web page.

 

  1. Table: In Lab01, create a new page ?products.html?, which contains an HTML5 table that meets the following criteria:

         The table has a caption, header and/or footer, and body, using the appropriate tags.

         The table provides some useful information regarding the products available on your website

         The body of your table should have at least 3 rows and 3 columns. You can include product descriptions, prices, etc. Be creative!

         The table must use spanning techniques to have one data element span two or more rows or two or more columns. The effects of the spanning should be visible (i.e. if you have a border for your table, the table looks different if you remove the spanning attributes)

Later we will generate this table dynamically, based on the products existing in your database, and we will provide a way to buy the products, but for now you just have to list the products.

  1. Form: you must create a form for users to sign up for your website. This form may be on any page ? index.html, products.html, or a new page signup.html. Pick what works best for your site. Specifics:

         If your form is in a new signup.html page, include a link to signup.html in the index.html.

         Your form collects necessary information from the user such as username, password, name, rank, e-mail address, address, etc as appropriate for your topic.

         Your form should contain all of the following input types:

         text

         password

         hidden

         checkbox, radio button, or select

         textarea

         submit

         reset

 

         Use http://mope.academy.usna.edu/~adina/sy306/tools/FormChecker/submit.cgi as the action for your form. (Later in the course you will learn how to write this) Test that each of the inputs correctly transmits its information by viewing the output of submitting your form.

         Should you use GET or POST? ? pick the one that is appropriate for your form.

         At least one of the input fields in your form must use the ?required? attribute ? test that indeed your browser does not allow you to submit the form unless that field has a value. Did the browser block the submission? What browser did you use?

10.  Attacks:

    1. In your index.html page, add 1 "misleading" hyperlink that proclaims it is for Google, but instead links to some other website.
    2. In Lab01 create a new file called ?newindex.html?. Use the starter page to begin, but remove the instructions from it. Research the use of ?meta? tag to implement redirects. Then modify the page by adding a meta refresh tag, such that when the page is loaded in the browser, the user is redirected to ?index.html?.

11.  Ensure your pages work with Firefox and Chrome.

12.  Ensure all your pages validate and that you have met all requirements. All your pages must have the validation button and the last modified data on them (same code as the starter page).

NOTE: all HTML files for this lab must validate as HTML5 without errors for full credit. The penalty for a file that does not validate is 10%. See the course home page for the validator links or just click the ?HTML5? button at the bottom of each page to invoke the local validator.

 

NOTE: Some of the requirements above you may not normally wish to be present in your particular web site. However, part of the lab process is to learn to use differing tags and attributes. Therefore incorporate them into this web site using your creativity and skills.

 

 

Browser Help:

 

There are two ways to view your files:

  1. (recommended - this is what I'll test and what you need to do in order to use the validator button on the pages) Open up your browser, and enter a URL like http://mope.academy.usna.edu/~mXXXXXX/Lab01/index.html
  2. (sometimes useful).
    Use the File menus in the browsers. If you can?t see them, right click the top bar, and Check the Menu Bar option, or just use Ctrl+O to open a page.

Firefox: File -> Open File (go to public_html, then appropriate file).

 

The second method fetches your pages directly from your drive. The first method fetches your pages from the web server and displays them, so using this method provides more assurance that your files are configured as they need to be. The validator button also 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 can also right click on a web page, and select View Source.

Extra Credit

Throughout this course, expect extra credit to be worth a nominal number of points ? the main purpose is for your additional practice and challenge. Multiple parts may be given; you can attempt all, some, or none of these.

 

  1. For this assignment, add another image to your page, and make this image a hyperlink to some logical target, given the image. Can you find an image and a layout that makes clicking on the image natural, without needing explanation?
  2. Explore the web to discover how to add an internal hyperlink - a link to a section on the same page. Modify your page to make some logical use of this feature.
  3. Add real email submission to your form! First, make a copy of the page with your form in it. (I need to see the original version of your form, that doesn?t send email, for grading). Then, read about yForm. Make some small changes to make your form send e-mail to yourself. Add a link to your new form ? make it clear which form sends email
  4. Attack:

a)      On your default.html page, under the name ?good sign-up? make a link to the file specified in the action of your form, with all of form variables specified in the URL, such that all variables are filled out. Clicking this link should have the same effect as if I filled out the form and submitted it. Hint: if your form uses the GET method (change this temporarily if necessary), then you can create the needed URL for this by filling out your form correctly and hitting submit ? look at the resulting URL!

b)      On your default.html page, under the name ?bad sign-up?, make a link to the file specified in the action of your form, will all the form variables specified in the URL, but the required variable (see the last bullet from part 3 ? Form requirements) has no value, and the ?hidden? variable has a value different than the value specified in the form. Hint: You can manually modify the ?good sign-up? URL.

 

Deliverables

1)      Your main web page should be called "default.html" (without the quotes) and it should contain your name, alpha, a link to Lab01/index.html, and the disclaimer.

2)      All of your files for Lab01 should be in a folder called "Lab01" (without the quotes) under your public_html.

3)      Your web pages for Lab01 should be called "index.html", ?products.html?, and optionally ?signup.html? (without the quotes) and placed inside the folder Lab01.

4)      Your instructor will assume that your web pages are viewable at http://mope.academy.usna.edu/~mXXXXXX/default.html , http://mope.academy.usna.edu/~mXXXXXX/Lab01/index.html and

http://mope.academy.usna.edu/~mXXXXXX/Lab01/products.html where XXXXXX is your alpha number.

5)      All files must be complete and saved to your public_html folder 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.html and create Lab02/, but nothing in Lab01/ should change.

6)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet. Your comments will help us improve the course.

b)      The first page of the output of the HTML5 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.

Postscript

Your default.html should contain the following disclaimer (other pages don?t have to). Feel free to cut and paste from the assignment page.

Legal Disclaimer

None of the content within this web site or the web sites of the members of this course are intended for distribution in any way, shape, or form. Nor is any attempt being made to disrupt the profiting capability of the copyright holders. The contents of this web site and the web sites of the members of this course are solely intended for educational use of the students and the instructor. All content herein is included strictly for the demonstration of implemented course objectives.