COMP 431/531讲解、讲解web程序设计、辅导html/web/cs、辅导Web Development

日期：2018-10-17 10:21

Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 1/8

General Info

1. Simple Page

(due Thu 08/30)

2. Dynamic Page

(due Thu 09/06)

3. JavaScript Game

(due Thu 09/20)

4. Draft Front-End

(due Thu 10/04)

5. Front-End App

(due Thu 10/18)

6. Draft Back-End

(due Thu 11/08)

COMP531 Paper

and Presentation

(due Tue 11/27)

7. Final Full Web

App

(due Thu 11/29)

Draft Front-End

due Thu 10/04 by 11:59 PM

Remember to review the Rubric before you submit!

Angular

In this assignment you will develop the frontend design of your web application.

(In a following assignment you will implement the full functionality of the

frontend.)

Our social networking web application will consist of three main views. When an

un-logged-in user navigates to our site they will be greeted with the "landing"

page, where they can log in or register a new account. This page we partially

developed in the rst

assignment. After a user has logged in, they will be taken to

the "main" page which contains the user's feed (consisting of the most recent

articles by the user and the users the current user is following), a list of the users

the current user is following, and a link to the "prole"

page which allows a user

to change their prole

picture and other pertinent information. These last two

pages we began developing in the second assignment.

Using raw CSS or a CSS Framework such as Bootstrap, Foundation, SemanticUI,

or others, beautify your web app. Your three pages should have a unied

look

and feel. You most certainly will want a navigation area common to your pages

which will contain, for example, the currently logged in user's displayName and

allow for the user to access their prole

page from the main page, as well as a log

out button.

We also add more features to our main page. We started with the user's feed,

which is a collection of posts, each of text or both text and an image. For this

assignment we no longer require the images to change and therefore do not

want the pause/resume buttons. We need a button to log the user out of our

application. We should be displaying the user's prole

picture somewhere on the

page, and in addition to this, each user will have a "status" headline. The status

headline for the current user should be prominently displayed. The headline is a

short one line message, such as "I'm learning JavaScript!" as opposed to an

"article" which can be longer in length and include posted images. As mentioned

above we will have a list of users being followed. This list will have user prole

pictures, the display names (or account names) of the followed users, and the

status headlines of the followed users. For now these should all be hard coded,

and we only need a few examples of each (i.e., 3 or more). The goal is to get an

idea of what the nal

working page will look like.

The le

structure of your web app should have separate directories for each

"section" of your application, see below for an example le

structure.

COMP

431/531

Web

Development

Syllabus Schedule  Assignments  Resources

Fall

2018

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 2/8

Then in our main.component.ts le

we would load that data:

Landing View Requirements

Registration elds

to make a new account as described in the previous

assignment. After validation (ala the previous assignment), the submit

button navigates to the main view

text elds

for a previously registered user to enter their account name

and password

A log in button. The button validates that there is text in the account

name and password elds

and then navigates to the main view. The

validation is for presense of text nothing more.

Main View Requirements

Button or link to navigate to the prole

page

Button or link to log out, which navigates to the landing page (index.html)

Each post has text, or text and an image (images do not change

periodically, no pause/resume buttons)

There should be at least 8 posts, at least four have images.

Each post has a button to leave a comment. But the button currently does

nothing.

{

"followers": [

{"name": "John Doe, "avatar": "https://photos/

{"name": "Jane Doe, "avatar": "https://photos/

{"name": "Joey Doe, "avatar": "https://photos/

]

}

const initialFollowers = http.get('../../assets/followers.

As you being transforming your three pages into a Angular site, focus on the

navigation of your site from page to page before implementing the details of

each page. To help with the transition to pulling data from the future backend

server, put your dummy data in json les

that are loaded into your application.

For example, suppose we create a le

followers.json for the initial followers

in the todo app:

In this way we separate our concerns between logic and data.

The "landing" view is the rst

view users will see when they navigate to your site.

It should have the following

The "main" view contains a collection of posts. These posts will be referred to as

"articles.

" For now we continue to use hard coded text and images for each

article as we did in the previous assignment. Each post should have text or both

an image and text.

In addition to a collection of posts displayed on the main view as the feed (which

can be single or multi-column), there are the following requirements

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 3/8

Each post has a button to edit the article. But the button currently does

nothing.

A search box, that lters

the displayed articles by text or author, but not

date or article id

There is an area for a user to add a new article, this can be an editable div,

a textarea, or some other tag. But the area currently does nothing on user

input.

There is a button to "post"the article which adds the article to the top of

the displayed feed and clears the text area. The new article is not

persistent.

There is a button to "cancel" writing the new article. This button should

clear the new article text.

There is a button to upload an image (Hint: input type='le').

But the

button currently does nothing after a le

is chosen.

The user's display name and prole

picture are shown. These can be hard

coded.

The user's status headline is shown. The status headline can be hard

coded.

There is a button to update the user's status headline. The button should

update the status headline, but on refresh there is no persistence

required, i.e., it can return to the original value.

Sidebar listing at least 3 followed users. The list should include a picture,

name, and status headline for each user. These can all be hard coded.

Text eld

and button to add a user to the following list. For non-empty

text, the follower is added to the sidebar with an arbitrary (i.e., hard

coded) image and headline message

Each followed user has a button to unfollow which removes that user

from the list

Prole

View Requirements

The current display name, email address, phone number, date of birth, and

zipcode are displayed

There are elds

to update each user piece of user information along with

a eld

to update the user's password. Birth date can not be changed.

Show the user's current prole

picture

There is a button to upload a new prole

picture. But the button currently

does nothing after a le

is chosen.

There is a button to update the user's values based on user input. The

button validates each of the elds

that are changed and then updates the

displayed value as in the previous assignment.

There is a button or link to navigate back to the main page

Example

The "prole"

view is where a user can update their prole

picture and account

information.

All of the views should be styled and "look good"-- your site will be visited and

commented on by members of the class.

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 4/8

Publication

# deploy to surge

npm run deploy

Whatto submit

{

"netid": "mjoyner",

"frontend": "https://mysite.surge.sh"

}

hw4-[github id]

|-- package.json

|-- README.json

|-- src

| |-- app

| | |-- app.component.css

| | |-- app.component.html

| | |-- app.component.ts

| | |-- app.component.spec.ts

| | |-- app.module.ts

| | |-- auth

| | | |-- auth.component.css Here's a wireframe for a site that satises

the above requirements. Remember

this is just an example, your solution does not need to look like this one.

In adition to submitting your repo for grading, for your site to be reviewed by

other members of the class you will need to publish it. We will be using Surge for

hosting our web applications (it's free).

If surge is not already in your package you will need to install it npm install

-S surge To deploy to surge:

Verify the look and feel and functionality of your site as hosted on Surge. Be sure

to update your site on Surge as the nal

step of your submission. You should not

further update your Surge deployment after you have submitted your

assignment. Note that if your site is not available when students go to review it

then you will not receive any feedback.

Again, the purpose of this assignment is to consolidate the layout, look, and feel

of the three pages of our web application. Other than simple navigation and

some validation which was mostly completed previously, there is no actual

functionality to much of the site.

Include in your hw4-[github id] submission a le

named README.json that has

the following contents (replaced with *your* values of course)

Be sure that you submit a correct json le

with these keys.

Your submission directory should look something like this (note that there is no

.git directory and no node_modules directory)

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 5/8

| | | |-- auth.component.html

| | | |-- auth.component.ts

| | | |-- auth.component.spec.ts

| | | |-- login

| | | | |-- login.component.css

| | | | |-- login.component.html

| | | | |-- login.component.spec.ts

| | | | `-- login.component.ts

| | | `-- registeration

| | | | |-- registeration.component.css

| | | | |-- registeration.component.html

| | | | |-- registeration.component.ts

| | | | |-- registeration.component.spec.ts

| | | | |-- registeration.service.ts

| | | | `-- registeration.service.spec.ts

| | |-- main

| | | |-- following

| | | | |-- following.component.css

| | | | |-- following.component.html

| | | | |-- following.component.spec.ts

| | | | |-- following.component.ts

| | | | |-- following.service.ts

| | | | `-- following.service.spec.ts

| | | |-- headline

| | | | |-- headline.component.css

| | | | |-- headline.component.html

| | | | |-- headline.component.spec.ts

| | | | |-- headline.component.ts

| | | | |-- headline.service.ts

| | | | `-- headline.service.spec.ts

| | | |-- main.component.css

| | | |-- main.component.html

| | | |-- main.component.spec.ts

| | | |-- main.component.ts

| | | `-- posts

| | | | |-- posts.component.css

| | | | |-- posts.component.html

| | | | |-- posts.component.spec.ts

| | | | |-- posts.component.ts

| | | | |-- posts.service.ts

| | | | `-- posts.service.spec.ts

| | |-- profile

| | | |-- profile.component.css

| | | |-- profile.component.html

| | | |-- profile.component.spec.ts

| | | |-- profile.component.ts

| | | |-- profile.service.ts

| | | `-- profile.service.spec.ts

| `-- assets

| |-- articles.json

| |-- followers.json

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 6/8

item pts

Merits [100]

README.json le

contains netid and URL to deployed frontend site 5

Frontend web app is deployed and functional 5

Single Page Application 2

At least three views: landing, main, and prole

2

Site has a consistent look and feel 2

Layout is responsive, for every view 2

Landing: Users log in using any username and password 2

Landing: Users are appropriately notied

of bad (i.e., missing) username

or password when logging in

2

Landing: Logging in takes user to the main view 2

Landing: Registration elds

with validation ala hw1 2

Main: User status headline and avatar image are shown on main page 2

Main: ability to update the status headline, e.g., text eld

and button,

headline is not persistant to reload

5

Main: layout of at least 8 posts (cards) 5

Main: layout is responsive to changing width of browser 5

Main: User's feed is displayed with newest articles rst

5

| `-- profile.json

`-- styles.css

The important thing about the above structure is that each portion of the web

app has it's own directory. We try to be modular in our design patterns. You are

not required to follow this directory structure exactly, but you are required to

have a modular layout. What is important is that there is structure and that the

structure makes good extensible and maintainable sense.

Note that if you begin to have a lot of styles then you are welcome to put your

CSS into the separate component ccs les:

main.component.css, etc.

Remember that all three of your pages should have the same "look and feel"

which is why placing the CSS in one stylesheet (i.e. styles.css) makes sense.

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 7/8

item pts

Main: each card contains author, timestamp, text, and at least four have

images

2

Main: each card has button to edit and another to comment, buttons

perform no action

2

Main: there exists an area to type a new article 2

Main: button to publish new article which adds new article to feed, but

is not persistent

5

Main: button to clear new article text area 2

Main: button to upload an image, opens le

picker, but otherwise does

not upload image

2

Main: Search bar lters

displayed articles by author and text, but not

article id or article date

5

Main: button or link to prole

page 2

Main: button or link to logout, navigates to landing page 2

Main: sidebar with at least 3 followed users, each has name, picture,

and headline

2

Main: text eld

and button to add new follower, adds name to list with

arbitrary headline and avatar

5

Main: each followed user has a button to unfollow, removes follower

from list, but is not persistent

5

Prole:

shows the user's current prole

values (email, zipcode, dob,

display the avatar picture)

5

Prole:

button to upload a new prole

picture, opens le

picker, but

does not perform upload

2

Prole:

update button validates each non-empty input eld,

date-ofbirth

is not updatable

2

Prole:

update changes the current values that are displayed 5

Prole:

link back to the main page 2

Demerits [67]

10/12/2018 Rice COMP 431/531 Web Development

https://www.clear.rice.edu/comp431/#/assignments 8/8

item pts

did not use Angular 25

unapproved module or JavaScript library 20

app crashes 10

all logic in component and none in service 7

refreshing the page when logged in should keep the user logged in 5

Total [100]