代做Web|Css代写|Html代做|Assignment|代做Javascript|代做Php – 这是一个典型的涉及前端和php后端的web任务
2170 assignment 1
Purpose. This is the first in a set of assignments that will lead you to develop a lightweight Content Management System (CMS) that will be similar to Twitter in this case called Chatter. While we aren’t going to implement all the features of Twitter, you may want to take a look at Twitter to familiarize yourself with the main features (namely, being able to add posts/tweets, being able to see all the posts from people you follow on your Twitter account, being able to search Twitter to see related tweets to your search, seeing all of your own tweets, and seeing the posts/user information of people you follow and people who follow you).
The purpose of this assignment is to get you to start working on the design aspects of Chatter. Chatter has a simple layout with four types of templates: (1) a homepage template, (2) a MyChats/user template, (3) follow template, and (4) a search template. I have included a simple wireframe/prototype of the templates at the end of this assignment so that everyone designs a similar look and feel (although you can select your colour scheme and each student’s layout will likely have some differences depending on implementation which is fine). See the end of the assignment for the figures.
The default homepage includes a list of posts (or ‘chat’) for your (the account owner) Chatter page, where chats are from those you follow. You can also create static pages, such as About Us or Contact Us, which would use a simple variation of the homepage template (note, you do not need these extra pages for this assignment). Note, I mean the account owner when I am describing the different pages referencing you, your (e.g., your profile information, your chats) etc.
In this assignment, you must do the following:
- Design and develop layouts for:
- the homepage,
- the MyChats template/User template
- the follow template
- and the search template
- Display static text and/or image content, as specified.
This will let you design a simple system for which you can iteratively add functionality, in the next assignments.
Assignment Information: Grades. This assignment will be graded out of 60 marks and then scaled to 10 points.
Software / Code Editors. You are encouraged to use code editors such as Sublime Text, Brackets, etc. You may also use IDEs such as PHPStorm for development.
Submission. All deliverables must be submitted on Brightspace: https://dal.brightspace.com
Late submission policy. There is a two-day late policy (one day late: 15% deduction, two day late: 30% deduction). No assignments will be accepted after the late deadline.
Academic Integrity. Dalhousie academic integrity policy applies to all submissions in this course. You are expected to submit your own work. Please refer to and understand the academic integrity policy, available at: https://www.dal.ca/academicintegrity
Content for the website. Do not copy and paste any content from other websites that are available on the WWW. If you want to include content (as and when required), you have to either create your own
content, or use dummy text (Lorem Ipsum…). You can use the Lorem Ipsum generator to generate paragraphs of dummy text: http://www.lipsum.com
Deliverables. Follow instructions starting on page 6 of this document to submit all deliverables of this assignment. Please read the instructions carefully and pay attention to what needs to be done and what functionality will be added in later assignments. Also, note that all the templates share similar functionality and look and feel (with some small exceptions) so once one template is done, the others will be much quicker to code.
General Instructions G.1. Create a folder named A 1. And name the page HomePage
G.2. Inside A 1 , create six folders, namely: css, fonts, js, images, mychats, userschats, users and images
G.3. Choose a responsive web design framework for developing the templates. Examples include Bootstrap, Material, Foundation, Skeleton, etc.
The framework you choose is an external resource, which was not developed by you. Include an
appropriate citation for the framework in a file named framework.txt or framework.doc. You may
use any of these citation formats: APA, IEEE and ACM. Please note that only these formats are
accepted in courses offered by the Faculty of Computer Science.
G.4. Note. While you may use any responsive framework, TAs will be able to help most with Bootstrap. W3School offers an online tutorial on using Bootstrap and the components (https://www.w3schools.com/bootstrap/default.asp)
G.5. Include the CSS, Fonts, any required javascript files, and any images used in the respective folders that you created in G.
G.6. Follow the guidelines described next to develop the layouts for the templates.
Homepage Template
Use the attached wireframe/prototype (Figure 1 ) to help you design your Homepage template. This page holds the account holder’s information (ie. you)Note the different sections:
- A top navigation bar (Home to bring you (the account owner) back to the HomePage and MyChats which takes you (account owner) to all the chats you have written). In addition, there is search bar (you don’t have to add the functionality of search for this assignment), and a Chat button for you to add a Chat (again, you don’t have to add chat functionality for this assignment), just add the components.
- A Page Header that has an image of your "Chatter" icon and the name of the app
- A right panel that includes user profile information (that is account owner or you). It should include an image, your name (or username), and 3 links (one to go to all your chats, one that will list all your followers, one that lists all the people who you follow).
- A center (main) panel that includes all the ‘chats’ from people you follow
- At the very top is a textbox area that will allow users (i.e. you) to add chats (for this assignment it doesn’t have to be functional).
- Then it will display all the Chats from people you follow ("following" link)
- Your (account owner) chats will show up on the homepage of those users who are following you ("followers" link)
- Note, for this assignment you do not need to include the counts after the links. We’ll add that later.
Specifically:
H.1. Create a file named index. php inside the folder named A1. a. You must use this file to create the homepage template. b. Name the page HomePage
H.2. Use appropriate html elements to create the centre panel which will display all chats from those you follow ("following") one below the other (like a list). The chats must be displayed in the format described below: a. At the very top is a textbox area that will allow users to add chats (for this assignment it doesn’t have to be functional). b. After the textbox is the title "New Chats" in H2 (Heading 2). The chats from are then listed below this title c. Each chat contains the information on who wrote the chat: an image (thumbnail) followed by their name. The name must use heading level H3 and there must be a link to the user’s page (which will use the MyChats/User template). d. The name must be followed by the date and time of the chat. e. The content of the chat starts on a new line under the user and date information: i. Chat content may be text alone, text and image, or just an image. For this assignment you only have to add functionality for static text chats.
H.3. The homepage must include a panel on right side to include profile information (your information). It must have an image, and 3 links (one to go to all your chats, one that will list all your followers, one that lists all the people you follow). Again, you don’t need to add the counts of each of these for this assignment, just add the links. H.4. I have included a folder on Brightspace called images. This file contains three images: the chatter logo, the owl image (that I have used to represent ‘you’ on the homepage), and the head image (that I have used to represent other users). You can use these in your design or you can add your own to the folder to use to test your code. This folder (images) must be saved inside the folder named A1.
Follow Template
Use the attached wireframe/prototype (Figure 5 and Figure 6) to help you design your Follow template. This will display, in a list format, either all the people who follow you/account owner (followers) or all the people you/account owner follow (following). These pages will be activated when you click the Followers or Following links in user profile panel.
S.1. Create a file named follow.php inside the folder named A1. a. You must use this file to create the Follow Template. b. The title of this page is Follows Page S.2. This template has the same appearance as the homepage template (e.g., the right panel with your profile information and the centre panel that displays a list of your followers/following users). The centre panel should include: a. At the very top is a textbox area that will allow users (i.e. you) to add chats (for this assignment it doesn’t have to be functional).
b. The title of the center panel is either Followers OR Following (H2) see Figure 5 and Figure 6 c. Under the title, list all your followers/following users. You only include the user’s profile image and their name on one line (you can use H3 format). Their name should to link to their Chat page (use the MyChat/User Template). Again, no chats are included in this template. S.3. This template, like the homepage, must include a panel on right side to include your profile Information (your information). It must have an image, and 3 links (one to go to all your chats, one that will list all your followers, one that lists all the people you follow). Again, you don’t need to add the counts of each of these for this assignment, just add the links.
MyChats/User Template Use the attached wireframe/prototype (Figure 3 and Figure 4) to help you design your template. This template will be used to 1) display your own chats OR 2) display the chats of your individual followers and/or the people you follow. Note the different sections:
- A top navigation bar that is the same as in the HomePage (Home to bring you back to the HomePage and MyChats which takes you to all the chats you have written). In addition, there is search bar (which won’t have functionality at this time), and a Chat button for you to add a Chat (again, don’t worry about the functionality of this at this point).
- A Page Header that contains your image and your name (Figure 3) OR a follower/following user’s image and their name (Figure 4)
- A right panel that includes the user profile information (this with either be you OR the follower/following person). It should include a short description of you OR the follower/following person. It also needs the 3 links (one to go to the user (or your) chats, one that will list all the users’ (or your) followers, one that lists all the people the user (or you) follow).
- A center (main) panel that includes the ability to add chats (although you don’t need to implement the functionality for this assignment), all the ‘chats’ that you OR a follower/following person has written
MC.1. The MyChats/User template will be used to display all the posts that you add to Chatter (Figure 3) OR all the chats that a user who is your follower or a user who follows you makes (Figure 4). a. A set of chats (static text files) are available on Brightspace. There are two folders: myChats (these are text files that represent chats you made) and userChats (these are static text files that represent chats that other users have made e.g., people you follow). b. There is also a set of user data (static text files) that you can use on Brightspace. The folder is called users and they match names used for chats. You can use these to test your design. c. All of these folders (myChats, userChats, users) must be saved inside the folder named A 1. d. Each post has a date/time and followed by content starting on a new line. e. Post content may be text alone, text and image, or just an image. For this assignment you only have to add functionality for text chats. f. Again, you can use the text files to test your code.
MC.2. Create a file named chats.php inside the folder named A1. a. You must use this file to create the MyChats/user template. b. The name of the page is Chats Page
MC.3. For the purposes of this assignment, you can use any ONE of the files in the folders (myChats, userChats, users) available on Brightspace, to display the contents using the
MyPost template. You may simply copy/paste the content in an HTML article or call the file
(up to you).
MC.4. The MyChats/User template must have a centre pane and use appropriate HTML elements to display the following: a. A textbox area that will allow users to add chats (again, this doesn’t have to be functional for this assignment). b. A title at the top of the list of chats (H2): e.g. My Chats (Figure 3) or [user] Chats (Figure 4 ) c. Then a under the title list of all your chats. Each chat will include: i. Post date and time [H3] ii. Post content
- Must be positioned below the date/time.
- Since this is like Twitter text chats won’t be very long (e.g., a few sentences). For this assignment you only have to worry about text content.
- Links, if any, must be appropriately styled.
Note: if you click MyChats on the top navigation bar or click the link "Chats" in your profile, then the template would load your own chats using this template. If you click a user’s name in any chat or from your list of followers/following it would then load up that user’s chat page.
Search Chats Page Use the attached wireframe/prototype (Figure 2) to help you design your template. This template will be used to search and display the relevant content of chats. Based on the result of the search, it will display both your own chats and the chats of your followers and/or the people you follow that contain the search term. Note, for this assignment, you are only responsible for creating the template for the search. You don’t need to implement an actual search.
S.1. Create a file named search.php inside the folder named A1. a. You must use this file to create the Search Template. b. This template has the same appearance as the homepage template except that the title of the center panel is the search term not "New Chats"
S.2. You will be implementing the functionality of the Search page in future assignments. For the time being, it is only a placeholder. For this assignment, implement the following: c. This page must have the same layout design and functionality as the homepage. d. The title of the page must read Search Posts.
Other notes: Navigation (in general for the whole site) a) Navigation menus must be styled according to guidelines of the responsive framework that you have chosen. b) The navigation menu must include three links to the following web pages: a. Homepage (index.php) the link text in the menu should be HomePage. b. MyChats (chats.php) the link text in the menu should be MyPosts c. Searchbar we will add functionality later d. Chat (a Button) we will add functionality later. c) When the user is on one of the web pages (home or MyChats) the navigation menu should highlight the link, i.e. set the appropriate menu item to be active using styles specified in the framework that you have chosen.
Submissions (DELIVERABLES) (will be graded for a total of 60 marks)
- Folder structure (5 marks)
- Folder structure must be:
A
|—- index.php |—- chats.php |—- follow.php |—- search.php |—- css | |—- css files as per framework^1 | |—- CSS files that you might have created |—- fonts | |—- Font files as per framework | |—- Other font files that you might have used |—- js | |—- JavaScript files as per framework^1 | |—- Other JavaScript files that you might have created/used |—- misc | |—- <placeholder for future functionality empty folder> |—- myChats | |—- Posts that you would have downloaded from Brightspace |—- userChats | |—- Posts that you would have downloaded from Brightspace |—- users | |—- Posts that you would have downloaded from Brightspace |—- images | |—- Images that would have downloaded from Brightspace or added
- Navigation ( 5 marks)
- Follows requirements as listed in assignment
- Homepage template (10 marks)
- Look and feel of template (design aspects)
- Functionality (e.g., do needed links work)
- Good programming style and commenting
- MyChat/User template (10 marks)
- Look and feel of template (design aspects)
- Functionality (e.g., do needed links work)
- Good programming style and commenting
- Following template ( 10 marks)
- Look and feel of template (design aspects)
- Functionality (e.g., do needed links work)
- Good programming style and commenting
- Search posts template (1 0 marks)
- Look and feel of template (design aspects)
- Functionality (e.g., do needed links work)
- Good programming style and commenting
- Overall look/functionality of site (5 marks)
- Look and feel is consistent between all templates
- Demonstrates that can load simple files into pages
(^1) Note. If you are using online links to the CSS/JavaScript files that are used in the framework of your choice, you may not need to include any additional CSS files here.
- Documents (framework.txt) (5 marks)
- Describe purpose of site
- Explain what you used to design the site (e.g., Bootstrap)
- A description of each template (it’s purpose)
- Any references
- This should only be 1-2 pages long (max).
Wireframe/Prototype Figures
Figure 1. Homepage Template Figure 2. Search Template
Figure 3. MyChats template (your own chats) Figure 4. MyChats template (for followers and following users)
Figure 5. Follow template (following) Figure 6. Follow Template (followers)