a1_COMP3322A_f2019.pdf - COMP3322A Modern Technologies on World Wide Web Assignment 1 A Simple Webmail System(20[Learning Outcomes 1 2 Due by 23:59

a1_COMP3322A_f2019.pdf - COMP3322A Modern Technologies on...

This preview shows page 1 - 3 out of 8 pages.

COMP3322A Modern Technologies on World Wide Web Assignment 1: A Simple Webmail System (20%) [Learning Outcomes 1, 2] Due by: 23:59, Wednesday November 6, 2019 Total mark is 100. Overview In this assignment, you are going to develop a simple web-based email system using NodeJS/Express.js, MongoDB, JavaScript, AJAX, HTML and CSS. The webmail system implements a few simplified functionalities, including displaying emails in your mailboxes, moving emails from one mailbox to another and compose new messages. The web-based email system is to be implemented by the following code in an Express app: app.js ./public/webmail.html ./public/javascripts/script.js ./public/stylesheets/style.css and accessed at . Preparations 1. Following steps in setup_nodejs_runtime_and_examples_1.docx , install the Node.js environment and the Express framework, and create an Express project named WebMail . 2. Following steps in Lab 4, install MongoDB, run MongoDB server, and create a database assignment1 ” in the database server. Insert a number of email documents into an emailList collection in the database in the format as follows: Each email document in the emailList collection contains the following key-value pairs: _id : The unique ID of the document, which you do not need to include when inserting a document, and MongoDB server will add automatically into each inserted document. You can find out such a _id using db.emailList.find() . db.emailList.insert({'sender':'[email protected]', 'recipient':'[email protected]', 'title':'Meeting today', 'time':'20:32:01 Fri Oct 11 2019', 'content':'Shall we meet at the library at 5pm?', 'mailbox':'Inbox'})
Image of page 1
sender The email address of the sender. recipient The email address of the recipient. title The title of the email. time The time when the email was sent. content The content of the email. mailbox The mailbox which the email belongs to, among Inbox , Important , Sent and Trash . Please prepare at least 3 pages of emails in each mailbox in the emailList collection. That is to say, if you set the number of emails to display on each page in the email division to be 3, then you should prepare at least 9 email documents for each mailbox in the collection. Task 1 (15 marks) Create basic webmail.html and app.js 1. Client side Create webmail.htm l which renders the layout shown in the following figure, i.e., the page has four main divisions: heading, function buttons, mailbox list and email list. You can design any heading, showing the name of your webmail system. In the function division, there should be four buttons: Compose , Move to …” , < and > . You can implement the buttons using any elements you like, as long as they are clickable and upon clicking, the corresponding functionality can be achieved. In the mailbox division, include four links: Inbox , Important , “Sent” Trash . In the email division, the email entries will be dynamically loaded from the server side, to be implemented in Task 2.
Image of page 2
Image of page 3

You've reached the end of your free preview.

Want to read all 8 pages?

  • Fall '16

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors