CSCI 2170 Assignment 1

CSCI 2170 Assignment 1

$30.00

Download Details:

  • Name: A1-v0lcfb.zip
  • Type: zip
  • Size: 1.37 MB
Category:

Description

5/5 - (1 vote)

Purpose

  • The purpose of this assignment is for you to recap your knowledge of front-end web development, and use it in the context of a server-side environment.
  • i.e. you will be taking what you have learned about front-end development and using that to “send” content to client machines.
  • Can we work on this assignment individually or in groups?
  • You are expected to work individually.
  • Dalhousie’s academic integrity rules apply.

Expectations, in detail

  1. STEP 1: Download the layout blueprint (PDF) posted along with this description.

  2. STEP 2: Set up a local server (i.e. localhost) environment.

    • A local server or localhost environment is a software stack that contains a server software (e.g. Apache), interpreters for scripting languages (e.g. PHP) and an instance of a database management system (e.g. MySQL), among other services.
    • Examples of local server stacks include MAMP, XAMPP, WAMP, etc. The “AMP” in these names used to be in the form of an acronym for “Apache”, “MySQL” or a variant of the DBMS, and “PHP”. Now they are just referred to as software names.
    • These server stacks help configure your computer as a server for development purposes.

  3. STEP 3: Your tasks:

    • Preliminaries:
      • Create a folder named A1 inside the web root folder in your localhost set up. These web root folders are typically named htdocs, or wwwroot, or public_html, etc. and this depends on your localhost software (e.g. MAMP has a folder named htdocs in which this A1 folder would need to be created.
      • Inside this folder, create five other folders named — includes, css, js, img and files.
      • Create the following files inside A1 — index.php (homepage) and info.php (information page). You will see details about these below.
      • Remember, any other PHP files that you may need to create must end with a .php file extension.
      • Create the following files inside files — integrity.txt, pledge.txt and citations.txt
      • Download an appropriate and free-to-use image on the topic “academic integrity” from Creative Commons (https://search.creativecommons.org). Remember to cite the image in citations.txt.Save this image into the img folder.
      • Download an appropriate and free-to-use image on the topic “pledge” from Creative Commons (https://search.creativecommons.org). Remember to cite the image in citations.txt.Save this image into the img folder.
    • Layout Task:
      • Use Bootstrap (https://getbootstrap.com) to create the web page layout as identified in the layout blueprint document (that you downloaded in Step 1).
      • Become familiar with Bootstrap and use it to implement the layout, with the following requirements.
      • The two pages are expected to be responsive.
      • Styles — fonts, colours, etc. are to be chosen by you; other than the ones indicated in the layout blueprint.
      • Content layout — you must present the content as described in the layout blueprint.
      • Content — see below for what content you need to include in your pages.
      • Re-use — you must code your web pages so that aspects of the page that appear on both the homepage and the info page (i.e. common aspects) must be re-used. The scrupts to re-use content must be written in PHP and saved in separate PHP files in the includes folder.
    • Content Task 1:
      • This task deals with the main content, as it applies to the homepage and the information page.
      • The pages are expected to follow layout guidelines specified in the blueprint. The instructions on the blueprint are pretty self-explanatory regarding many aspects of the content. Follow them; and if you need to, make assumptions about any additional content and include PHP comments to describe your assumptions.
      • You are also welcome to include dummy text (Lorem ipsum dolor…) that you can download from https://www.lipsum.com for some of the content. Essentially this content helps “fill the page” so that you can verify your layout on different screens.
      • There are two places on the homepage (and one on the info page) in which you are expected to include some external content, identified as “content from File Read Task 1” and “content from File Read Task 1” (and “citations” in the info page). Follow instructions below to include this content.
    • File Read Task 1:
      • Go to https://www.dal.ca/dept/university_secretariat/academic-integrity.html
      • Understand Dalhousie’s guidelines on academic integrity.
      • Copy the text for Dalhousie’s definition for what is considered plagiarism. Paste this text within double quotes in the file named integrity.txt
      • Remember to use the guidelines governing copying/pasting direct quotations from sources when you do so.
      • Read this file using PHP File I/O techniques and display it in the content box shown in the layout blueprint.
      • To the right of this content, include the image on “academic integrity” that you downloaded.
    • File Read Task 2:
      • Type the following text in the file named pledge.txt —

        CSCI 2170 Academic Integrity Pledge

      • Replace <YOUR FULL NAME> with your full name in the above pledge.
      • Read this file using PHP File I/O techniques and display the content in pledge.txt in the content box shown in the layout blueprint. To its right, include the image on “pledge” that you downloaded.
    • File Read Task 3:
      • Use ACM citations format (details below) to cite all sources that you may have used. This should include a citation to Bootstrap website, too.
      • Use PHP File I/O techniques to read and display all citations on the information page (as indicated in the layout blueprint).
    • Content Task 2:
      • Include a login form in the homepage as specified in the layout blueprint.
      • In the form, make sure to set method to post and action to index.php
    • Citations:

  4. STEP 4: What do I submit?

    • You are required to submit this assignment in two places — (a) Brightspace, and (b) Gitlab / Bluenose.
    • Submission on Gitlab / Bluenose —
      • Instructions for submission on Gitlab / Bluenose will follow shortly. I’m working with our CS Tech Support team on this matter currently.
      • We have a plan to allow you to submit code on Gitlab (https://git.cs.dal.ca/). I will be posting more information by the end of this week or early next week. Work on creating the deliverable for Brightspace, because the same files will have to be updated on Gitlab as well.
      • Instructions to submit assignments on Gitlab (https://git.cs.dal.ca/) have been posted in a section under “Content >> Assignments” — if you have any questions, please reach out to the CS Help Desk.
    • Submission on Brightspace — A single zip file named <LASTNAME>_<FIRSTNAME>_B00XXXXXX_A1.zip
      • Replace <LASTNAME> with your last name, and <FIRSTNAME> with your first name.
      • Replace “B00XXXXXX” with your B00 number.
    • The above ZIP file should contain files as shown in the directory structure below. Failure to follow specified formats will lead to a 10% penalty on the assignment.CSCI 2170 (W2020) Assignment 1 Folder Structure

  5. STEP 5: Marking and rubric

    • This assignment will be evaluated for 100 marks, with the following breakdown:
      • 10 marks — Appearance of the homepage as per the layout blueprint.
      • 10 marks — Appearance of the information page as per the layout blueprint.
      • 5 marks — Use of C.R.A.P. principles (Contrast, Repetition, Alignment, Proximity) and best practice guidelines to develop websites.
      • 5 marks — Web pages are responsive (2.5 marks for each page).
      • 20 marks = 2 pages x 10 marks — Audit of both pages using Lighthouse (web page quality checked developed by Google). This audit will evaluate 3 parameters (accessibility, best practices and SEO).
        The maximum score for best practices and SEO is 3 marks each, and the maximum score for accessibility is 4 marks, evaluated as follows:

        • Audit score between 0 – 49: 1 mark
        • Audit score between 50 – 84: 2 mark
        • Audit score between 85 – 100: 3 mark (or, 4 marks for accessibility)
      • 10 marks — Page loads content that is read through other files correctly (File Read Tasks 1, 2 and 3).
      • 10 marks — Uses “include” or “require” statements appropriately on the page to implement re-use (as identified in the instructions above).
      • 20 marks — Citations:
        • Citations for any external content referred or used are provided in a text file: 5 marks
        • The text file’s contents are displayed on the information page: 5 marks
        • Report to AIO for no citations.
      • 10 marks — Code quality:
        • Code is commented to explain main sections and/or functions: 4 marks
        • Code uses variable and function names that are self-explanatory: 6 marks

 

 

 

 

Related products