使用EJS, SQLite, ExpressJS等，实现一个Blogging tool.

Introduction

Your task is to create a deployable blogging tool which a single user could deploy on their own server and use to maintain a blog. The tool should provide discrete author and reader pages. The author must be able to write articles, save them as drafts and publish them. Readers must be able to browse and read published articles as well as comment on and like them. Please read the base requirements carefully for the full detail.

Technical specification

All submissions MUST use the template project provided with the assignment. Express.js must be used as the basis for the server side functionality. SQLite must be the basis for the data tier. Client side pages must be delivered through server-side rendering using Embedded Javascript Templates. As such the following tools are pre-requisite:

You may make use of NPM addons and front end libraries provided that they are justified and don’t fundamentally alter the above specification. Some example packages are listed below:

• All source code must be human readable
• Do not use bundlers such as Webpack
• You can use CSS precompilers such as Tailwind provided the built CSS is provided with the submission
• We will run ‘npm install’ followed by ‘npm run build-db’ and ‘npm run start’ to run your project. Please ensure that your project runs from these commands alone without need for further compilation or installation of dependencies.
• Ensure your node version is at least 16.x and your npm version is at least 8.x

Data requirements

• Pages must populate with user data dynamically retrieved from the database on the server. This can be done through templating (as taught in this course), or through other means (eg. javascript requests and DOM manipulation).
• Features relying on hard-coded client-side user data will be disregarded
• All user data must be persistently stored in the SQLite database

Code Style Requirements

• Frontend code comprises template files (.ejs) in the views folder and optionally assets and .js files in the public folder
• Backend code comprises an index.js file with routes implemented as middleware in the routes folder.
• Each route should be preceded by a comment describing its purpose, inputs, and outputs
• Routes should be rationally organised making appropriate use of GET, POST methods.
• Each database interaction should be commented describing the purpose, inputs, and outputs.
• Code should be laid out clearly with consistent indenting.
• Functions and variables should have meaningful names, with a consistent naming style
• All variables should be declared with careful attention to scoping

Template Code

All submissions MUST use the template project provided.
Please see the README.md file in the template code for details of how to use it.

Base Requirements

Implement these basic features fully to achieve a passing grade.

Author - Home Page

This is where the Author can create, review and edit articles. The minimum requirements for the page are as follows:

• A heading which indicates that this is the author home page
• It should be accessed through a URL which is distinct from the Reader Home Page
• It should display the blog title and author name
• It should have a link which points to the settings page

• It should have a “Create new draft” button

  • When pressed this should create a new draft article and redirect to it’s edit page

• It should display a dynamically populated list of published articles

  • The list should display useful information about the articles including when they were created, published, last modified, number of reads and number of likes
  • For each article the list should display a sharing link which points to the relevant Reader - Article Page

  • For each article there should be a delete button for the article. When pressed this should:

    • Remove the article from the database
    • Reload the page to display the updated information

• It should display a dynamically populated list of draft articles

  • The list should display useful information about the articles such as when they were created, published, and last modified
  • Each article in the list should be accompanied by a link which points to its edit page

  • For each article there should be a publish button. When pressed this should:

    • Update the article’s state from draft to published
    • Timestamp the publication date
    • Reload the page to display the updated information
  • For each article there should be a delete button.

Author - Settings Page

This is where the Author can change the blog title and author name. The minimum requirements for the page are as follows:

• A heading which indicates that this is the settings page

• A form with text inputs for Blog title, and author name.

  • The form should be dynamically populated with the current settings for the page
  • The form should have a submit button which updates the settings with the new values and redirects to the Author - Home Page.
  • Form validation should be used to ensure that all fields have been completed ahead of submission.
• A back button which points to Author - Home Page.

Author - Edit Article Page

This is where the author writes, amends and publishes individual articles. The minimum requirements for the page are as follows:

• A heading which indicates that this is the edit article page
• Data about the article (Eg. created, last modified)

• A form containing the following input fields and controls:

  • Article title
  • Article text
  • A submit changes button
• The form should be populated with the current article data
• When changes are submitted the article’s last modified date should be changed
• A back button which points to Author - Home Page.

Reader - Home Page

This is the front page which readers use to access the blog site. The minimum requirements for the page are as follows:

• A heading which indicates that this is the reader home page
• It should be accessed through a URL which is distinct from the Author - Home Page
• It should display the blog title, and author name

• A list of published articles

  • The article title and publication date should be visible for each item
  • Articles should be ordered by publication date with the latest publication appearing at the top
  • Clicking on an item in the list should take the user to the Reader - article page for that particular article

Reader - Article Page

This is where the reader can read and interact with individual articles. The minimum requirements for the page are as follows:

• A heading which indicates that this is the read article page
• It should display a single article determined by the url
• It should display information about the article including, article title, publication date, number of views, number of likes
• It should display the text of the article
• There should be a like button to react to the article

• There should be form for adding a comment to the article containing

  • a text input for the commenter’s name
  • a text input for the comment.
  • a submit comment button
• When the user submits a comment the page should be reloaded so that their comment appears in the list.
• There should be a list of previous reader comments which should be ordered by the date when they were written
• There should be a back button which redirects the user to the Reader - Home Page.

Main Home Page

This should be the default home page of the application, accessible from http://localhost:3000/. It should simply contain the following:

• A link to the Author Home Page
• A link to the Reader Home Page

Extension

You should also enhance your project by completing an extension from the following options. You are free to complete as many extensions as you want but we will ONLY consider the first extension which is specified in your commentary.

Add extra functionality

• Add a range of extra functionality to the app on both author and reader sides. For example:

  • Add a moderation feature for comments.
  • Add further reactions for articles
  • Allow authors to add tags to articles and implement a filter by tag for readers

Password access for author pages and routes

• Secure the author pages with password authentication and write middleware to prevent any unauthorised access to author endpoints
• You’ll need to create an author login page which authenticates the author against a naively stored server-side password (eg. in an environment variable)
• You’ll also need to use a package such as express-session to create secure sessions

Best practices

Move your code base towards production level by following some recommended best practices below:

• Implement applicable security best practices from here https://expressjs.com/en/advanced/best-practice-security.html
• Implement code-based performance best practices from here https://expressjs.com/en/advanced/best-practice-performance.html
• Implement data sanitisation using a library such as https://joi.dev/ or https://express-validator.github.io
• Be sure to list everything you’ve done in your write up.

Deliverables

1. Source Code
   Please upload the complete source code for your web application here in zip format.

   • Make sure node\_modules is removed from your project

   • Make sure package.json is included and that all additional packages are listed in your package.json file

     • HINT: make sure you used npm install -save package_name when you installed them
   • Do not include your SQLite database.db file. We will build this by running npm build-database

   • A README.md

     • remove the existing contents that we have provided and replace with just the simple instructions on how to set up the application
     • include a list of any additional libraries you are using

2. Report in PDF Format
   Please upload your report in PDF format (max 1000 words).

   • A high level schematic diagram for your website demonstrating all three tiers of your architecture, the end points that connect client to server.

     • Use a free tool such as Figma (https://figma.com) or Lucid Chart (https://lucid.app/) to produce this

   • A high level diagram showing your data model. Draw an ER diagram showing the tables and how they are related to each other. Use “crows feet” notation, as shown in the course.

     • Use a free tool such as Figma (https://figma.com) or Lucid Chart (https://lucid.app/) to produce this

   • Extension description

     • Specify which extension you implemented.
     • Discuss what you did to implement it.
     • Highlight aspects which you particularly want us to pay attention
     • Paste relevant parts of your code into the document to explain how you implemented the extension. Refer to the filenames and line numbers where the code can be found (you may lose marks if you fail to provide these)

3. Video Screencast
   Please upload a video screencast of your project working.

   • This should not be longer than 2.5 minutes (we will not watch beyond 2.5 minutes).
   • It should demonstrate all of the functionality
   • We recommend that you capture the video in mp4 format using software such as OBS
   • This is not a graded requirement rather it is a backup in case we are unable to install and run your code. You must submit a video to guarantee that we can grade your code.

4. Code in PDF Format

   • Please upload your code in text format (not screenshots) in a PDF file here.
   • Please clearly label with start and end comments exactly which sections of code you personally wrote without assistance. This will allow us to carry out the necessary plagiarism checks.
   • You will receive a zero mark for the entire project if you don’t submit your code in this way.

Tips for Success

• Read the requirements above carefully and ensure you implement them exactly as specified.
• Add good comments to your code. Comment each route end-point and each function.
• Include its purpose and list the inputs and outputs.
• Before submitting your work, test all your application functionality.
• Before submitting your work, test your deployment process. Delete the node\_modules directory and then run: ‘npm install’, ‘npm run build-db’ (or ‘npm run build-db-win’) and ‘npm run start’.
• Pay particular attention to ensuring that the database script db\_schema.sql creates your database without any errors or issues