Welcome to COMP 466:
Advanced Technologies for Web-Based Systems (Revision 6)

Assignment 2: Part 2: GETSMART

Student name: Christopher Cagna

Student number: 3292839

Start date: 03/17/23

End date: 03/28/31

Hours Spent: 160+

Description:

The following web application uses MySQL and PHP to facilitate an Learning Management System. The application allows for students and teachers to create accounts. The Students can read course content, and perform quizzes to test their knowledge. The scores are saved for review.
Teachers are able to create courses and add content to those courses. The course content is uploaded in a custom Educational Markup Language (EML) using a json file. Documentation for the EML is provided at the add content pages. The system then uses a EMLParser to present the content to the users.

Analysis:

Introduction:

1.1 Purpose:

• This Requirements Specification Document aims to define the functional and non-functional requirements of the Online Learning Management System (LMS). The document serves as a foundation for the design, and development of the LMS, ensuring that it meets the needs of its users.

1.2 Scope:

• The LMS will provide an online platform for delivering courses to learners, enabling subject matter experts (SMEs) to create and manage course content using a custom-designed Educational Markup Language (EML). The system will support user registration, authentication, content delivery, and progress tracking.

Functional Requirements:

2.1 User Management:

• The LMS must support user registration, including collecting required user information and validation. Users must be able to log in securely using their credentials (e.g., email and password). The system must provide password recovery options for users who have forgotten their login credentials.

2.2 Course Creation and Management

• SMEs should be able to create, edit, and manage courses using the EML. Courses should be organized into units, lessons, quizzes, and assignments. The LMS should support various content types, such as text, images, videos, and interactive elements.

2.3 Content Storage and Retrieval

• The system must store course content in a database for efficient retrieval and management. The LMS should provide search and filtering options for SMEs to locate and manage specific courses or lessons.

2.4 Content Delivery

• The LMS must parse EML content into HTML for display in the learner's browser. The system should support responsive design to accommodate different devices and screen sizes.

2.5 Progress Tracking

• Learners must be able to track their progress within courses. The LMS should provide an overview of the learner's progress and performance in each course.

2.5 Progress Tracking

• The system must support quizzes and assignments, allowing learners to submit responses and receive feedback. The LMS should provide grading and analytics for SMEs to monitor learner performance.

Non-Functional Requirements:

3.1 Usability

• The LMS must be easy to use for both SMEs and learners, with an intuitive interface and navigation.The system should provide clear instructions and guidance for users, including help documentation.

3.2 Performance

• The LMS must efficiently load and display course content, minimizing delays and providing a seamless user experience. The system should handle a large number of concurrent users without performance degradation.

3.3 Security

• The LMS must ensure the confidentiality, integrity, and availability of user data and course content. The system should implement secure communication protocols and follow best practices for user authentication and authorization.

3.4 Scalability

• The LMS should be designed to accommodate growth in users and course content without significant changes to the architecture or infrastructure.

3.5 Maintainability

• The system must be designed using modular, layered architecture and best practices to facilitate maintenance and updates. The LMS should be well-documented, with clear comments in the source code and comprehensive documentation of the system's design and functionality. Constraints

Constraints:

4.1 Technology

• The LMS should be developed using PHP for server-side processing, with HTML, CSS, and JavaScript for frontend development. The system must utilize a relational database such as MySQL or PostgreSQL for data storage.

Glossary:

4.1 Technology

• EML: Educational Markup Language
• LMS: Learning Management System

TA Guide

Hello, and welcome to GETSMART! The website should require no extra guidance and function as expected. You may click the GETSMART tile below, or click home in the nav window to begin the experience. note:

Documentation

The following documentation includes all the XML diagrams and design of the system.

getSmart Software Architecture Package Diagram

The software architecture follows that of a basic web application, and that as shown in the textbook.

The Client Layer

The user interacts directly and only with the Client layer where all out from CSS and HTML are displayed. The user uses HTML forms generated on the client side to send information to the server layer. The user also requests specific webpages from $_GET commands that are produced using hrefs. Occasionally JS is used on client side to create better responsive menus.

The Server Layer

The server layer is where most tasks and scripts perform all the work.
The authorization module handles the gathering and creating of user credentials. It also first encrypts or hashes sensitive information before it is send to the DB layer for storage.
The web server module handles the sending of information, as well as receiving information from scripts, and sending it client layer.
Content Delivery Module (courseBuilder.php) builds the actual course pages. The module will fetch all required course information from the DB, and display it. However, the actual content is stored in the DB as JSON datatype, and therefore must use the EML parser to decode the BD information first.
EML Parser Module gathers the course content JSON data, and parses it into html. That HTML is then sent back to the Content Delivery to be displayed.
User Progress module is a simple script which takes the users test scores and stores them in the database. The scores are then retrieved from the DB when required by the Content Delivery Module

The Database Layer

The database which stores all the user and course information. Further details of the DB are below within the DB ERD

Component Diagram

The Component diagram shows how each of the modules interact with one another. The user interface only directly connects with the authentication and authorization (login / signup), the web server to request and receive url requests, content management to see the content, and uploading of test scores. The Content management modules handles the actual storing and retrieving of the course content, and the EML Parser connects directly to it to parse the stored JSON EML data.

Dataflow Diagram

The Data Flow Diagram shows how actual data such as user information, course content, test scores, etc. are passed from one module to the next. It is worth noting that there is a significantly different data flow for students than teachers.

Content Management Sequence Diagram

The content management sequence diagram zooms in directly on the content management module, and this is where there the course data can be stored by an instructor. The course data stored, and courses created must be unique. Therefore the course management module checks for certain things such as instructor id, course id and lesson/quiz id uniqueness. The sequence diagram shows a few alternatives.

Database ERD

All user and course data are stored in mySQL relational database. Above are the schemas for the database tables, and how they are related. The ERD Diagram is self explanatory and therefore I will simply point out a few things. All tables also include a creation date field for better record keeping. The Courses have a ON DELETE CASCADE effect on their child elements. Then database is fully implemented on my webserver's mySQL.
All of my SQL Table commands can be found in "getSmart.session.sql".

Site Map

The site map above gives a simplistic road map of how the web navigation is layout. Most of all intended pages are accessible through the nav buttons located at the top of all pages, or the left nav buttons within the course. The above site map does not show the more internal directories and urls from scripts or $_GET methods. It is intended to be a map of the user's experience.

Webpage drawings of original design concepts can be found below. As with most web projects, some of the implementation and styling details changed during the build.

The images are rough but I feel I stayed true to their style throughout the entire Page

The Education Markup Language

This information is also provided at the create content page of courseManagement, but has been attached here for documentation completeness.

{
"$schema": "http://cagnacan.com/lessonSchema",
"type": "object",
"properties": {
    "course": {
    "type": "object",
    "properties": {
        "lessonTitle": {"type": "string"},
        "lessonSubTitle": {"type": "string"},
        "paragraphs": {
        "type": "array",
        "items": {
            "type": "object",
            "properties": {
            "paragraphTitle": {"type": "string"},
            "paragraphContent": {"type": "string"}
            },
            "required": ["paragraphTitle", "paragraphContent"]
        }
        }
    },
    "required": ["lessonTitle", "lessonSubTitle", "paragraphs"]
    }
},
"required": ["course"]
}
                    

{
  "course": {
    "lessonTitle": "This Lesson's Title",
    "lessonSubTitle": "The lessons subtitle",
    "paragraphs": [
      {
      "paragraphTitle": "First Paragraph",
      "paragraphContent": "Content Content Content Content "
      },
      {
        "paragraphTitle": "Second Paragraph",
        "paragraphContent": "Content Content Content Content "
      },
      {
        "paragraphTitle": "Third Paragraph",
        "paragraphContent": "Content Content Content Content "
      }
    ]
  }
}
                    

{
  "type": "object",
  "properties": {
    "quiz": {
      "type": "object",
      "properties": {
        "quizTitle": {
          "type": "string",
          "description": "The title of the quiz."
        },
        "questions": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "questionText": {
                "type": "string",
                "description": "The text of the question."
              },
              "options": {
                "type": "array",
                "items": {
                  "type": "string"
                },
                "minItems": 4,
                "maxItems": 4,
                "uniqueItems": true,
                "description": "An array containing the 4 answer choices."
              },
              "correctAnswer": {
                "type": "integer",
                "minimum": 1,
                "maximum": 4,
                "description": "The index of the correct answer in the options array (1-based index)."
              }
            },
            "required": ["questionText", "options", "correctAnswer"]
          },
          "minItems": 5,
          "description": "An array containing 5 multiple choice questions."
        }
      },
      "required": ["quizTitle", "questions"]
    }
  },
  "required": ["quiz"]
}

                    

{
"quiz": {
    "quizTitle": "This Quiz's Title",
    "questions": [
    {
        "questionText": "Question 1 text",
        "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4"
        ],
        "correctAnswer": 2
    },
    {
        "questionText": "Question 2 text",
        "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4"
        ],
        "correctAnswer": 1
    }
    ]
}
}
                    

The EML Parser

The EMLParser essentially runs inside the php script EMLParser.php. However, it works in conjunction with courseBuilder.php and the database. The following will be a walkthrough of how it functions.
Once the content has been uploaded and stored in the JSON format inside of the DB, the information can then be retrieved and parsed for viewing. The process begins with the courseBuilder.php file which first programmatically builds the left nav using non JSON values from the course's quizzes and lessons. It then approaches EMLParser.php. This executes a script that first checks if a quiz, or lesson has been selected. Then Fetches the appropriate JSON information from the database. Once it has been fetched, the $content is decoded row by row using json_decode. The decoded content is then parsed into the required HTML rows in a loop, as to print all content found within the DB contents. The EML Parser handles both quizzes and lesson content. The answers to the quiz are re-encoded into JSON for later processing by the marking script. This implementation of the EML Parser allows the instructors to submit their content in a predictable JSON format, to be displayed consistently by the EML Parser.
Further information can best be seen in the code itself, or via execution on the live server.

Aesthetics and basic functionality of modules

Aside from the implementations and designs above, GETSMART is essentially a much larger scaled up version of the bookmarker app. However, for the sake of complete documentation, I will include bookmarker's documentation here, But will post it under the links to the home page and cover page so that they are not missed.

Bookmarker Shared Documentation

The following documentation will serve as a walkthrough of the web application and its functionality. I will start with surface level elements and move in deeper.

Basic Aesthetic Functions

• Background images were created from various AI art websites and inserted using CSS
• Logos were designed from AI Logo design websites
• Styles with CSS
  • Nav Menus: I used an image as well as the newer ::before pseudo class in CCS to create a before state that becomes visible when hovering the element. I used transitions to blend the effect.
  • Clickable Images: I used a transition effect combined with blue and shadow, which increased when hovered
  • Must text sits upon a what I call a bubble, which is basically a translucent white background combined with some blur.
  • There are many more styles, but the above were the more complex implementations
• PHP vs HTML: The web app mostly used .php files, this is due large in part to the header and footer
• The Header and Footer: The header and footer reside in their own files and are brought into each page using the include 'header.php' php command. My researched that this is the most common practice for keeping a consistent header and footer across all pages. This did however force me to convert all my HTML files to PHP.

• Javascript is only used twice, as php scripts are used for most everything else.
• I used it to handle the two client side functionalities
• In both instances, it is used to hide or show a block, when clicking sign up it changes the menu to the sign up menu, and when looking at your bookmarks, if the user is signed in, the "add bookmark" button is replaced with an identically appear button that instead forwards the user to the login page.

• If the user is not logged in, clicking the login nav button, or clicking the get started button from home, will direct the user to account .php, a HTML form for login. If the user clicks SignUp, JS changes the block to the signup form. the HTML form will insure proper syntax is achieved and the form can then be submitted with the "create account" button.
• The Create Account button activates the form action "welcome.php".
• welcome.php gathers the user information using safe isset commands, and store the form information.
• The password is hashed and the email is set to all lowercase
• welcome.php then checks for errors such as invalid syntax, failed to repeat password, and email uniqueness
• User account information is then stored in the bookmarkerdb database
• database and sql information below

• The user uses the account.php to login, by pressing the login button in the nav
• Once the user has entered their information, the login button on the form redirects the user to welcomeBack.php. Functions almost identically to the create account but instead confirms a uniqueness of the email, and correctness of password.
• The user is then greeted with the appropriate hello or error message.
• The variables $_SESSION['id'] and $_SESSION['name'] are then set appropriately to be used on all pages

• The header, that is on every page, contains the PHP command 'session_start()'
• This starts the session to store the UserID and Name across all the php pages
• At the start of each page, the session variable is checked to see if the user is logged in, and what ID it is
• Guest id=1 is displayed if the user is not logged in
• If the user is logged in, the ID is used to fetch user data from the database
• If the user clicks their name in the nav, they will be directed to loggedIn.php
• This provides a logout button, if clicked logout.php executes that simply unassigned $_session variables

• The bookmarks page loads the bookmarks programmatically through a php loop.
• All the bookmarks URLs and Titles are stored in the database, and the HTML commands are echoed to display each entry
• If the user is not logged in, the ID is set to one, and the Guest ID 10 bookmarks are displayed
• Upon clicking the add bookmark button, a guest user will be redirected to account.php
• A logged in user will fire a JS script that reveals the add bookmark HTML form block in its place.
• Valid email submissions will activate the addBookmark.php action
• The php script uses previously mentioned techniques to add the website and Name to that users bookmarks table, and is then redirected to bookmarks.php if successful, where the bookmark is now displayed.
• Each bookmark comes with a 'delete' button that works by creating a href with the 'bookmarkID= the bookmarks row ID' appended to the deleteBookmark.php url.
• The deleteBookmark.php script then deletes that row from the database, and bookmarks.php is reloaded

• A new database was created named bookmarkerDB, from there create table commands from bookmarker.session.sql were ran to create two tables, users and bookmarks.
• The users table has id as its primary key, but demands a unique email. it also stores first name and hashed password
• The bookmarks tables also uses id as primary key, and references users using userID as a foreign key to link back to the users table.
• All database operations from the website are first started by a include_once dbConfig.php, which is the script that connects to the DB.
• Once connected, a query is formed, and stored in $stmt for security. The statement is then executed before closing
• All database function from here is a result of creating a query, storing it in a statement, and executing.
• Account Creation: Query database to search for email, if no rows return, email is unique, and use insert to store account
• Account Login: Query database to find email, if email exists, verify the hashed password against submission.
• Bookmarks: Use userID to query database to return all bookmarks stored, and then iterate through them to display
• Bookmarks Add: When adding a bookmark the database stores the acceptable website information under the UsersID, and auto increments its personal id number. The id number is used to delete the site later.
• Finally, if the user account is deleted, so will all the bookmarks thanks to the DELETE CASCADE on the foreign key