NUS Orbital 2016: NUSDing

NUSDing is my Orbital 2017 project with Song Kai with Apollo 11 achievement. It’s a PHP + MYSQL project based on Laravel PHP framework.

Final Demo:

Project presentation at that day :P

You can view more code on Github. Bear with me that the project is not longer maintained (as there are many hacking solutions there and even I think it is a bit messy).

To me, this is really a lesson before I learn CS2103T Software Engineering. I would say CS2103T tells how to do things right but this project tells me why you need to do the right things.

BTW, we try to imitate zhiju(Quora in China). I would say it was a “success” as we had all features zhihu had at that time :P

Description

Project Ding is a forum-based web application that allows discussion of tutorial questions and past year papers under specific modules.

Full Features

• For general users whose main purpose of viewing this website is gain more valid and useful information:

  • Viewing of topics, questions, answers and comments on the forum is implemented
    • A database model is built where:
      • a topic may have many questions
      • a topic may belong to a parent topic and may have many subtopics
      • a question may have many answers and comments
      • an answer may have many comments
  • Searching of topics and questions by keywords is implemented
    • Typeahead is implemented with AJAX so that relevant results will show up while user is still typing keywords.
    • Typeahead reduces time for processing user requests and gives users better experiences

• For registered users who would like to have more discussions and interaction our site:

  • User authentication is implemented.
    • Proper information validation is implemented upon registration:
      • Correct format and uniqueness of email address
      • Minimum length requirement for passwords
      • Correct matching of input password and confirmation password
      • (the validation is done using AJAX to avoid unnecessary refreshes to pages)
    • Password are encrypted using bcrypt hashing function before being stored in database.
    • reCAPTCHA is used to ensure that registration is easy for human and difficult for robots
    • Login function is properly tested.
    • Authentication of user is performed on every private page.
    • Logging in with IVLE is implemented to bring NUS students more convenience
  • Postings of questions, answers and comments are implemented
    • Before asking a question, a search is automatically done based on keywords input to ensure that no similar questions have been asked in the past. User will be prompt to enter their own question if their question is not present in Ding.
    • Designated edit area is implemented to allow users to input content of different type
      • Plain text
      • Equations using Tex formulae
      • Images
      • Short videos
    • Users can modify questions posted when necessary
    • Users are able to view question edit history to know more about the context of the question from past information.
    • Users can post their answers under each question using the same edit area mentioned above.
    • Users can modify answers when necessary.
    • Edit history of each answer can be seen under answer status so that people can have better idea regarding how the answer is come out
    • Users are able to reply to each other’s answers and comments, and form a meaningful conversation regarding the question.
  • Votings for answers and comments are implemented
    • In consideration to the fact that people might have similar opinion towards a question, votings are implemented to show agreement / disagreement towards an answer or a comment. This would help other users to see the opinion of the mass.
    • Each user can only cast one vote for each answer / comment.
  • Private messaging between users is implemented
    • private conversation is enabled in the view of encouraging more focused discussion as well as creating bonds between users.

• For registered users who would like to have more personalized information from our site:

  • A personalized user panel is implemented
    • Basic information of the user e.g. education experience and specializations are displayed so that users can each other’s profile to find people of similar interests.
    • A summary of user activity e.g. number of question answered and number of votes received are displayed as a reference to a user’s ability and activity.
    • A recent history of user activity is displayed as well for the ease of re-accessing recently viewed information.
  • Suggesting of relevant questions based on what user is viewing and hot questions under the same topic is implemented
    • These information is displayed in the sidebar to ensure that they are in the view but not protrusive.
  • Subscription of topics, questions, answers and users is implemented.
    • The subscription system provides great flexibility of the information user wants to obtain.
    • A notification system is implemented so that user can receive notification when there is update to information subscribed
    • An emailing system is implemented as well to allow users to receive various updates even when they are not on Ding.
    • In the settings page, user may choose the categories of notification/emails he/she wants to receive among all.

• For registered users who would like to find out more interesting topics and discussions:

  • A topics page is implemented to show all existing topics
    • Under each topic tab, a summary of the topic and some popular questions will be displayed.
  • Highlights of popular topics and questions are implemented.
    • Topics and questions are ranked based on user activity.
      Rankings in two time span are enabled: by week and by month.

• For site owner who would like more users to join our site and be active:

  • Sharing of question on social media
    Sharing of question is enabled on Facebook, Twitter, Instagram, Pinterest and via email.
  • Inviting of users to answer certain questions
    • An autocomplete search function is done for users to select other users with ease.
    • Users who are invited to answer certain question will receive a notification.
  • A point system based on user contribution
    • A user group table is set up. Users under each user group has different privileges.
    • A set of user actions such as posting answers and voting are credited different points.

• For site owner who would like the site to be safe and the information is useful:

  • Editing and deletion of invalid / indecent answers and comments and reduction of contribution points by administrators

    • A set of user actions such as answer deleted and question deleted are assigned different point deduction.

  • Patching up of any potential security loopholes

    • Php data object (PDO) parameter binding is used to prevent SQL injection. With PDO parameter binding, user input is binded into one value instead of a few fields of selection criteria.

      Consider for instance a form field used to supply an email address which might be used for searching a user table.

      SELECT * FROM users WHERE email = ___________

      But instead of supplying an email address the user searches for ‘ding@example.com’ or 1=1. The corresponding SQL query is thus

      SELECT * FROM users WHERE email = ‘ding@example.com' or 1=1

      As 1=1 is always true, the query will return the whole user table, which would lead to data leakage.
      With PDO parameter binding, ‘ding@example.com’ or 1=1 will be binded into ‘ding@example.com or 1=1’.

      SELECT * FROM users WHERE email = ‘ding@example.com or 1=1’

      As there is no email address ‘ding@example.com or 1=1’, the query will safely return no results.

    • To prevent any third-party from initiating malicious requests that affect users e.g. changing the personal information of a user, a Cross-Site Request Forgery (CSRF) token is passed along whenever a form is submitted.
      This token is compared with a value additionally saved to the user session. If it matches, the request is deemed valid, otherwise it is deemed invalid.

    • To avoid malicious users from entering scripts in form field (Cross-Site Scripting), a refined list of HTML entities are chosen and only these selected HTML entities are parsed.

      'HTML.Allowed' => 'iframe[width|height|src],img[src|alt|width|height],pre[class],code,p,strong,em,span,blockquote,li,ul[style],ol[style],a[href]'

      Consider the following script

      <script>alert(“malicious script”)</script>

      If such field is entered and parsed as an HTML entity, the pop-up window with information “malicious script” will be shown.
      With the <script> entity escaped, the code will be removed.
      Which will not be parsed as a script any more.

• In order to guide users on how to use Ding, a blog that includes the documentation of Ding is set up Blog.

• User testing is deployed to improve quality of Ding.

  • Alpha testing is used to detect and clear bugs
    • Correct crediting of contribution points
    • Correct sending of notification / emails according to user settings
    • Correct sequence of topics / question based on sorting criteria
  • Beta testing is used to improve user experience
    • As some questions / answers are too long when unfolded, users need to scroll down the page in order to collapse the entry. Hence, a button that is positioned absolutely on the page is added so that users can collapse any long entry without scrolling.
    • As the vote button is small and can be hard to click, vote up button is enlarged by including the vote number into the button as well.