Mobile Website Seo Manchester, Mobile Website Seo Company Manchester, Mobile Website Seo Manchester
University of Manchester School of Computer...
52
University of Manchester School of Computer Science Content Management System for Module Webpages Computer Science BSc (Hons) Author: Yichen Lu Supervisor: Dr. Gavin Brown April 2016
Transcript of University of Manchester School of Computer...
University of Manchester
School of Computer Science
Content Management System for Module Webpages
Computer Science BSc (Hons)
Author: Yichen Lu
Supervisor: Dr. Gavin Brown
April 2016
1
Abstract
Content Management System for Module Webpages
Author: Yichen Lu
Supervisor: Dr. Gavin Brown
This report outlines the development of a Content Management System (CMS) project. This CMS is highly customized for the task of managing contents of course module webpages. It was initially designed for the module COMP61011: Foundations of Machine Learning, but with the extensibility in mind, this CMS was developed to adapt to other module website.
The key feature of this CMS is What You See Is What You Get (WYSIWYG), and this makes the CMS easy to use as well as provide an intuitive user experience. This CMS provides the ability of managing site resources such as files and pictures. Another key feature of this CMS is that it enables users to manage site structure and resources such as files and pictures. Furthermore, it allows creation and deletion of web pages for a site; creation of new sites can also be easily achieved.
Methodologies from software engineering has been used in the development process of this project. Justification has been made about the choice of technology and the particular design in architecture and user interface.
2
Acknowledgement I would like to thank Dr. Gavin Brown for his continued guidance and mentoring throughout the duration of this project. His detailed and enlightening feedback during both the development and the writing of this report has been valued. His advice is helpful not only for the development of this project but also in my future career. I would also like to thank Dr. Richard Neville for his feedback on project deliverables, which has been helpful for me to improve the development process and refine the product.
Finally, I also would like thank my parents and friends for their support and encouragement which has been helpful to preserve my sanity and keep me motivated during this year.
3
Table of Contents
List of Figures ........................................................................................................................... 5
List of Tables ............................................................................................................................. 6
Chapter 1 ................................................................................................................................... 7
Introduction ............................................................................................................................... 7
1.1 Motivation ....................................................................................................................... 7
1.2 Aims and Objectives........................................................................................................ 7
1.3 Report Overview ............................................................................................................. 8
Chapter 2 ................................................................................................................................... 9
Background ............................................................................................................................... 9
2.1 Current Module Webpages .............................................................................................. 9
2.1 Existing CMS in the market .......................................................................................... 10
Chapter 3 ................................................................................................................................. 11
Design ...................................................................................................................................... 11
3.1 Requirements ................................................................................................................. 11
3.2 System Design ............................................................................................................... 13
3.2.1 Use case analysis .................................................................................................... 13
3.2.2 Architecture Design ................................................................................................ 14
3.2.3 Database Design ..................................................................................................... 15
3.3 User Interface Design .................................................................................................... 16
3.4 Technology selection ..................................................................................................... 17
3.5 Project Planning ............................................................................................................ 17
Chapter 4 ................................................................................................................................. 18
Development ........................................................................................................................... 18
4.1 Ground Work ................................................................................................................. 18
4.1.1 Virtual Private Server (VPS) .................................................................................. 18
4.1.2 Virtualenv ............................................................................................................... 18
4.1.3 Git Repository ........................................................................................................ 18
4.1.4 Flask project ........................................................................................................... 18
4.2 Content management ..................................................................................................... 21
4.2.1 User stories ............................................................................................................. 21
4.2.2 User Interface ......................................................................................................... 21
4.2.3 Issue to Overcome .................................................................................................. 22
4.2.4 Code Implementation ............................................................................................. 22
4.2.5 Result ...................................................................................................................... 22
4.3 Right Side Panel ............................................................................................................ 24
4
4.3.1 User Stories ............................................................................................................ 24
4.3.2 User Interface ......................................................................................................... 24
4.3.3 Issue to Overcome .................................................................................................. 25
4.3.4 Code Implementation ............................................................................................. 26
4.3.5 Result ...................................................................................................................... 26
4.4 Central Authentication Service (CAS) Login ................................................................ 31
4.4.1 User Stories ............................................................................................................ 31
4.4.2 Issue to Overcome .................................................................................................. 31
4.4.3 Result ...................................................................................................................... 31
4.5 File uploading ................................................................................................................ 32
4.5.1 User Stories ............................................................................................................ 32
4.5.2 Issue to Overcome .................................................................................................. 32
4.5.3 Code Implementation ............................................................................................. 32
4.5.4 Result ...................................................................................................................... 33
4.6 Site Management ........................................................................................................... 35
4.6.1 User Stories ............................................................................................................ 35
4.6.2 User Interface ......................................................................................................... 35
4.6.3 Issue to Overcome .................................................................................................. 36
4.6.4 Code Implementation ............................................................................................. 36
4.6.5 Result ...................................................................................................................... 36
4.7 Mobile Optimization ..................................................................................................... 40
4.7.1 Code Implementation ............................................................................................. 40
4.7.2 Result ...................................................................................................................... 41
Chapter 5 ................................................................................................................................. 44
Testing and Evaluation ............................................................................................................ 44
5.1 Unit Testing ................................................................................................................... 44
5.2 Performance Analysis .................................................................................................... 45
Chapter 6 ................................................................................................................................. 46
Conclusion ............................................................................................................................... 46
6.1 Objectives Achieved in this Project .............................................................................. 46
6.2 Future work ................................................................................................................... 46
6.3 Summary of the Report ................................................................................................. 47
References ............................................................................................................................... 48
Appendix A Project Plan ..................................................................................................... 51
5
List of Figures
Figure 2.1: Current appearance of COMP61011 module webpage ........................................... 9 Figure 2.2: Source code of current COMP61011 module webpage, <table> tags are used for design purposes. ...................................................................................................................... 10 Figure 3.2.1: Use case diagram ............................................................................................... 13 Figure 3.2: 3-tier architecture of web application ................................................................... 14 Figure 3.2.3: Entity Relationship Diagram for the application database ................................. 15 Figure 3.3: Basic UI layout design sketch ............................................................................... 16 Figure 4.1.4(a): the Flask project root file structure. ............................................................... 19 Figure 4.1.4(b): File structure inside static folder ................................................................... 19 Figure 4.1.4(c): plugins in bower_components folder ............................................................. 19 Figure 4.2.2 UI sketch for content management ..................................................................... 21 Figure 4.2.5(a): Content editing mode is triggered by double clicking on content text .......... 23 Figure 4.2.5(b): Cancel editing without saving ....................................................................... 23 Figure 4.3.2 User interface design sketch for right side panel ................................................ 25 Figure 4.3.5(a): Right side panel is switched on ..................................................................... 27 Figure 4.3.5(b): Right side panel is switched off .................................................................... 27 Figure 4.3.5(c): Editing mode of the right side panel .............................................................. 28 Figure 4.3.5(d): Bootstrap modal for creating new item ......................................................... 29 Figure 4.3.5(e): Bootstrap modal for editing or deleting an existing item .............................. 29 Figure 4.3.5(f): Editing the title of right side panel ................................................................. 30 Figure 4.4.3(a): CAS login interface ....................................................................................... 31 Figure 4.4.3(b): Name is returned by CAS after successful login ........................................... 32 Figure 4.5.2(a): Dropdown menu at the right most of navigation menu. ................................ 33 Figure 4.5.2(b): Bootstrap modal dialog for uploading files ................................................... 33 Figure 4.5.2(c): Select file to upload ....................................................................................... 33 Figure 4.5.2(d): Upload successfully status ............................................................................ 34 Figure 4.5.2(e): Upload fail status ........................................................................................... 34 Figure 4.6.2: Sketch for site management page....................................................................... 35 Figure 4.6.5(a): Site management page ................................................................................... 37 Figure 4.6.5(b): Add new site .................................................................................................. 37 Figure 4.6.5(c): Delete site confirmation................................................................................. 38 Figure 4.6.5(d): Edit site title and start menu editing mode .................................................... 38 Figure 4.6.5(e): “Edit All” mode is started .............................................................................. 39 Figure 4.6.5(f): Add new item to menu (add new page to a site) ............................................ 39 Figure 4.6.5(g): Delete existing item in menu (delete pages from a site) ............................... 39 Figure 4.7.3(a): Example of implementation of Bootstrap utility classes. .............................. 40 Figure 4.7.4(a): Web pages on mobile device (before login) .................................................. 41 Figure 4.7.4(b): Web pages on the mobile device (after login) ............................................... 42 Figure 5.1: Example of using Postman to test API [30] .......................................................... 44 Figure 5.2: Example of using Chrome DevTools for performance analysis. .......................... 45
6
List of Tables
Table 3.1: Functional requirements ......................................................................................... 12
7
Chapter 1
Introduction
The content management system (CMS) is a system that is used to manage the content of a website [1]. Website contents can be web page text, images, audio file, video file and uploaded documents. With the help of CMS, users can create, edit and manage the content of a website without any HTML programming skills. This will allow users to be more focused on producing high-quality contents rather than technical issues.
1.1 Motivation
A CMS for school module webpages needs to be customized in its functionality and design. We cannot take an existing CMS and use it without any modification. Furthermore, different lecturers write their module webpages in different ways, due to the style or literacy in different web language. It would be better if we can have a system that provide a unified environment which allows lecturers write their web pages using plain English. Therefore, a CMS that customized to be used to edit module webpages is needed.
In my previous study on Software Engineering course in the University of Manchester, I learned the Agile development methodology. Doing this project is a good opportunity to test my theoretical knowledge on Agile methodology. Furthermore, the interests on web development is another reason that drives me to choose this project. I could leverage this project as an opportunity to practice both my project management and development skills.
1.2 Aims and Objectives
The aim of this project is to produce a CMS specifically designed for management of contents on school module webpages.
There are four objectives for this project:
1. The project should reproduce the visual style of the module website COMP61011 (http://studentnet.cs.manchester.ac.uk/pgt/COMP61011/). The design of this content management system should be based on this visual style.
2. The project should implement “What You See Is What You Get” (WYSIWYG) concept in content editing feature.
3. The system should provide basic and some advanced features that fulfilled the requirements of managing module webpages.
4. The product of this project should be extensible and used by module webpages other than COMP61011
8
1.3 Report Overview
Chapter 1 has outlined the reason of doing this project, and the aims and objectives for the project.
Chapter 2 introduces the current situation of the module webpages and briefly introduces existing CMSs in the market.
Chapter 3 details the requirements gathered and the design of the application.
Chapter 4 is the main body of this report, it details the efforts made in the development of this project
Chapter 5 describes the testing techniques used to evaluate the system.
Chapter 6 gives a summary of the objectives achieved in this project and possible future works.
9
Chapter 2
Background
This chapter explains the current situation of the module webpages and the reason of doing this project.
2.1 Current Module Webpages
The current module webpages for COMP61011 are not managed by any content management system. It is maintained by Dr. Gavin Brown. Every time there is anything need to be updated for the content, Dr. Gavin Brown has to log into the server and modify the code for the webpages.
When the course goes on, there will be some news or files he would like to post on the module webpages to make them accessible to the students, however, modifying the code directly is not a convenient and efficient way of managing the content of the website. Thus, a proper CMS is highly demanded.
The current webpage for COMP61011 has been used for a few years, Dr. Gavin Brown has noticed that the current style of module website is a bit outdated and not fashionable enough to catch up the trend of web technologies.
Figure 2.1: Current appearance of COMP61011 module webpage
Moreover, since the website is developed a few years ago, table-based website structure is used to manage the layout of the webpages. This webpage writing style has already gone out of date and been recognised by the society as not practical enough in terms of maintainability, accessibility and performance; it is also an anti-pattern to HTML5 standard of semantic web [2] [3]. Therefore, a reproduction of the current website is needed.
10
Figure 2.2: Source code of current COMP61011 module webpage, <table> tags are used for
design purposes.
2.1 Existing CMS in the market
There exist many CMS products in the market, such as WordPress [4] and Drupal [5]. They are well built to suit different business purposes. Therefore, some CMS products provide a whole package includes many modules for different purposes. When selecting a CMS, without a clearly defined set of requirements, people will be seduced by fancy functionality that they will never use. Moreover, adopting a CMS product also brings some hidden costs, such as cost of training and redundancy [6]. For example, customers may need to be trained in order to use the product properly; also, the product may contain useless functionality to certain customers. That is because off the shelf solutions are designed to appeal to a wide audience.
As a school module website, we do not have many complex requirements like business websites. We only need a place to display all the information and resources needed for this module. Besides, the school network environment also need some specific configurations for the CMS, such as Central Authentication Service [7]. Therefore, a customized CMS is demanded.
The CMS produced in this project was named as Litash CMS.
11
Chapter 3
Design
This chapter introduces the requirements gathered for the application. It will describe the analysis of the requirements and the basic design of the system. Based on the design, it will also describe technologies selected and the project planning.
3.1 Requirements
As a content management system, the main task is managing the content. This involves in creating, retrieving, updating and deleting actions to the content of the webpages. Moreover, in order to build an easy-to-use system, I need to take user experience into consideration. As a system that will be used by the university, it is also very important for the system to be able to integrate with the existing university software and network infrastructure. The detailed requirements are shown in the following table.
Priority Requirements
Must Have 1. The system must have a What You See Is What You Get (WYSIWYG) text editor for user to edit the main text content on webpages.
2. The text editor must have the ability to use different text styles.
3. The text editor must have the ability to redo and undo the editing.
4. The text editor must have the ability to copy and paste text with the origin style, and also be able to edit the origin style
5. The system must be connected to the university’s Central Authentication Service (CAS) and use CAS for user authentication.
Should Have 1. The system should produce a tidy and understandable URL for each page.
2. The system should be able to dynamically add a new module website.
3. The system should have the ability to manage the structure of webpages in a website.
4. The system should have an interface for uploading and managing file resources.
Could Have 1. In order to improve user experience when editing page content, the system could use AJAX technique to submit data.
2. The system user interface could have indicators for alerting critical actions and operational errors.
3. The system should be optimized for mobile devices.
12
Won’t Have 1. The system will not provide a user management interface at this stage. Using CAS for authentication.
2. The system will not use its own rules to define user roles.
3. In order to follow the WYSIWYG concept as close as possible, the system will not provide a user interface as a backend to manage contents.
Table 3.1: Functional requirements
The requirements are categorized using MoSCoW technique [8]. Since the time of developing this project is fixed, it is vital to understand the relative importance of the tasks in order to make progress and keep everything on the plan. The MoSCoW technique provides a clear indication of relative priority of tasks and the expectations for their completion. The main aim of using this technique was to implement all requirements under the priority “Must Have”, as many requirements as possible under the priority “Should Have” and some requirements under “Could Have”. In order to keep my focus on the most important requirements, I have avoided the requirements under “Won’t Have” priority.
There are set of non-functional requirements need to be taken into consideration when creating the system, they are:
1. Configuration – the system should be configured to be ready to deploy. As I cannot test the system under school server environment, I should setup a test environment which is as close as the school environment.
2. Expendability – The developer should make sure the system is designed to be able to add more functionalities.
3. Usability – the system should has an intuitive and easy to use user interface. 4. Performance – The developer should optimize the coding style and follow best
practices in order to achieve a better performance and improve the efficiency of the system.
5. Cost – The developer should use open source tools and libraries to minimize the cost.
Attempting to implement above non-functional requirements into the system will give us a good foundation of producing a better application.
13
3.2 System Design
3.2.1 Use case analysis Based on the requirements, the system could have use cases as Figure 3.2.1 shows.
Figure 3.2.1: Use case diagram
The system has two actors: the admin and the web page audience. In the context of module website, the admin could be a staff that has the administration right of managing the content of the webpages. The audience could be a student who only has the right to view the content of webpages and download files from the website which are uploaded by admin.
14
3.2.2 Architecture Design As the nature of this system is a web application, many popular web applications are implementing the tree tier architecture design pattern. This design pattern is widely used in web applications and it works well for applications with a size like this project. I decided to take this concept into this project. Figure 3.2 shows the 3-tier architecture of the web application.
Figure 3.2: 3-tier architecture of web application
The presentation tier provides the application's user interface (UI). Typically, this involves the use of browsers for viewing the webpages and interaction with the system. At the application tier reside the application server and the programs that access the database, business functionality of the application is implemented in this tier. The data layer provides access to database, the relations that define the data and their constraints are defined at this tier [9].
15
3.2.3 Database Design Since the project is using Agile method, the design of database schema experienced several times of changes in different iterations along the development life cycle. Figure 3.2.3 shows the final entity relationship diagram of the database design.
Figure 3.2.3: Entity Relationship Diagram for the application database
The basic job of this database is to store the content data of webpages. In this CMS, users are able to create a site. Each site consists of at least one navigation menu item, by default, the home page. Each menu item has a content and a right side panel. Under the right side panel, there could be some panel items and the number of panel items could be zero. Therefore, the relationship of Menu table and SidePanelItem is one to zero or many.
16
3.3 User Interface Design
Since this project required a reproduction of current COMP61011 module website, the user interface should give user a fresh and different feeling comparing with the old design.
After some experiments, I decided to use a two-column layout as the new design. The header including school logo and course title is placed at the top most of the page. Below the header, the navigation menu was moved to the top of the page. After the navigation menu, in the left side of the page is the main content of the page. At the right side of the main content, there is a panel for user to post some news or some notifications. Users can choose whether to display the right side panel. By using a switch button, the information in the right side panel will be displayed in a list format.
Figure 3.3: Basic UI layout design sketch
Since this project followed. agile method, the design kept evolving in each iteration as the development went on. The UI evolution will be reflected in Chapter 4.
17
3.4 Technology selection
Since this project was to develop a web application, a number of technologies were involved. The main technologies used in this project were Flask Framework for Python [10], JQuery Library for JavaScript [11] and Bootstrap front-end framework [12]. The database was SQLite3 [13].
3.5 Project Planning
This project followed the Agile development method. Based on the Agile manifesto, the development process of the development was scheduled into multiple iterations [14]. Each iteration had a length of two weeks, and a working software should be delivered at the end of each iteration. The sequence of which module to be completed first was prioritized based on the importance of requirements. In chapter 4, we will discuss the development of each system module. The sequence of completion for each module will also be mentioned.
18
Chapter 4
Development
In this chapter, we are going to have a close look about how this project became to a live application.
During the development of this project, based on the principles of Agile method, 6 iterations were scheduled across the limited time period [15], 5 major modules are completed, they are content management, right side panel, site management, file uploading and CAS login. The result of the implementation is shown at end of the session for each module.
Other than the five major modules, this chapter will also discuss the ground work for the development of this project. This chapter will also highlight the issues that need to be overcome.
4.1 Ground Work
In order to make the development of this project successful, a series of ground work had to be done. This includes setting up development server, installing necessary library and frameworks.
4.1.1 Virtual Private Server (VPS) In order to host and test the application, a VPS [16] was purchased from Digital Ocean [17]. The VPS used in this project was running Linux (Ubuntu) operating system.
4.1.2 Virtualenv In order to keep the server’s global site-packages directory clean and manageable, a Virtualenv [18] was created for this project. The flask framework and all required plugins were installed inside this Virtualenv instance.
4.1.3 Git Repository In order to control the versions created in each iteration of the development, Git was used in this project. Along the development process of this application, four branches were created, including the master branch. Those branches were created before the implementation of some great changes. After the new feature was successfully implemented and tested, the newly created branch was merged with the master branch.
The URLs for the repository are listed below:
GitHub: https://github.com/Litash/wysiwygcms.git
GitLab: https://gitlab.cs.man.ac.uk/yi.lu-8/flaskCMS.git
4.1.4 Flask project Flask framework provides a very tidy file structure. Figure 4.1.4(a) shows the file structure at the root directory of the project.
19
Figure 4.1.4(a): the Flask project root file structure.
The files inside the static folder are available to users of the application via HTTP. This is the place where CSS, JavaScript and images files go.
Figure 4.1.4(b): File structure inside static folder
Figure 4.1.4(c): plugins in bower_components folder
This application needs to take advantage from some frameworks, libraries, and utilities to achieve a better user experience. In order to keep them updated and manage the decencies of different plugins, Bower package manager was used. Bower will create a folder called bower_components. Whenever a framework or plugin is installed through Bower, Bower will automatically install all the dependencies needed for that plugin or framework, and place all files under bower_components directory [19].
20
Inside the templates folder Flask will look for Jinja2 templates. A template in Flask contains the HTML skeleton code and is integrated with Jinja2 syntax. This makes it possible to do template inheritance and reuse layout of the website in all pages [20].
When users visit a webpage, flask will render the master page template, and fill the master template with the child template and data according to the request URL. Different child template and data will be rendered according to different URL, but they are all using the same master template.
Figure 4.1.4(c): File structure inside templates folder
As it is shown in Figure 4.1.4(a), the file flaskr.py is the main program of the application server. The database design was implemented into SQL schema. The schema.sql file contains all the SQL create table command. SQLite3 will generate the database file flaskr.db by executing schema.sql. This database file will store all content and operation information used by the application. The file wsgi.py and flaskapp.wsgi are used for deploying the application in Apache server.
21
4.2 Content management
As a content management system, managing content is obviously the primary feature of the system.
This was the first implemented module during the development of this project.
4.2.1 User stories The following is user stories that had been satisfied in this content management module.
• As an admin, I want to start editing the content by double click the content or click a start button.
• As an admin, I want to use different font style for my content. • As an admin, I want to be able to add some text with hyperlink into my content. • As an admin, I want to add some images into my content. • As an admin, I want to be able to use bullet list or numbered list in my content. • As an admin, I want to be able to insert table into my content. • As an admin, I should be able to redo or undo changes and save the content. • As an admin, if I quite the editing mode without saving, I should be alerted.
4.2.2 User Interface To address the user stories, some elements in UI should be updated upon the basic UI shown in Figure 3.3. A button was added into the navigation menu. After clicking this button or double clicking the content area, the content area of the page will be replaced by the rich text editor. Figure 4.2.2 shows the updated UI sketch for this module.
Figure 4.2.2 UI sketch for content management
22
Considering the situation that the content might be written very long. I placed the save and cancel buttons at the bottom of the text editor, so that users can choose to save the editing right after they finish writing their content. The save button was coloured darker than the cancel button. This created a contract between the two buttons. This will give users a psychological hint to click the save button other than cancel button to prevent sudden quit without saving [21].
4.2.3 Issue to Overcome When developing this module, a complex part was the rich text editor. As it was stated in the user stories, there are many features needed to be supported. It is not possible to develop a delicate rich text editor in the time scale of this project. Fortunately, there exist many well-built fully featured rich text editor plugins in the market. In this project, the TinyMCE editor was used [22].
By default, the Flask framework will reload the page after the edited content has been submitted to the server. This is not a comfortable user experience. In order to create a better user experience, I modified the default Flask function so that the content could be submitted asynchronously through AJAX (Asynchronous JavaScript and XML) technique [23].
4.2.4 Code Implementation In the front-end, the code for controlling UI behaviors is written in JavaScript functions. Those functions covered the following tasks:
• The configuration for TinyMCE plugin • Trigger the content editing mode, and change the status of UI elements. • Save the content text, which is using JQuery AJAX form submit method to submit the
data to the flask server.
In the back-end server side, Flask functions were written to cover the following tasks:
• Page routing for landing page. • Update the content text as HTML code, accepting AJAX request.
4.2.5 Result The Figure 4.2.5 shows the result of this content management module. The TinyMCE editor is delicately implemented. The figure 4.2.5(a) shows the state that the content editing mode has been triggered by double clicking the content text. The origin text is filled into the editor.
23
Figure 4.2.5(a): Content editing mode is triggered by double clicking on content text
The rich text editor was configured to support all functionalities required by the user stories. In addition, some extra features were also included (e.g. view the HTML source code of the content, insert video embedding code, insert special characters and view the editor in full screen). The text editor was end up being able to provide nearly every feature that could be used in daily content editing tasks.
Figure 4.2.5(b): Cancel editing without saving
24
The saving function was implemented using AJAX technique, it avoided the page reloading after saving, so that the application could have a better user experience. For example, since the text editor uses JavaScript variable to store the editing history, users are allowed to trigger the text editor and use the undo button to recover previous editing after the previous editing was saved. If the user want to undo the previous editing, he/she can trigger the text editor again, and use the undo button to recover previous editing. This cannot be done if the page is reloaded because the editor will be reset and the editing history will be lost. Preventing page loading also reduced the network usage and improved the performance of the application, which means the waiting time was reduced for users. With AJAX technique, the saving function could be running smoothly without being noticed by the user.
As is shown in Figure 4.2.5(b), alert window will be displayed if the user cancels the editing without saving previous changes to the content.
4.3 Right Side Panel
The right side panel is the place for users to post some news or notifications.
This module is the second implemented module in the entire development process.
4.3.1 User Stories The following is user stories had been satisfied in this right side panel module.
• As an admin, I want to post some news or notification in the right side panel • As an admin, I want to edit or delete my post in the right side panel. • As an admin, I want to edit the title of right side panel. • As an admin, I want to be able to choose whether to display the right side panel in
each of my webpages
4.3.2 User Interface In order to address user stories, the right side panel was designed as shown in Figure 4.3.2
25
Figure 4.3.2 User interface design sketch for right side panel
At the top of the right side panel, there is the panel title. The title will become editable if the user double click the title.
Beside the panel title, there is a button with a pencil icon. It is used for starting the editing mode for the panel items. If this button is clicked, a button item with a plus sign will be added at the top of the item list.
When the button with plus sign is clicked, a pop-up window will be opened. Item text can be edited in the window.
4.3.3 Issue to Overcome There were multiple changes on the position of the editing mode trigger button, which is the one with a pencil icon on it. If it is placed beside title and inside the panel, as shown in Figure 4.3.2, it would be a bit misleading to the user and make them think that this button is used to edit the title text. After some experiments, I finally decided to place the button floating beside the panel.
When creating or editing the panel items, Bootstrap modals were used (an implementation of pop up window by Bootstrap). In order to reduce the network usage when loading page and increase the performance of the application, I intended to use one modal element for both creating and editing item. However, the editing and creating modal has different element inside. I had to find a way to identify the purpose of triggering the modal, and add the corresponding element inside the modal.
26
4.3.4 Code Implementation Most of the codes needed for this module is in the front-end using JavaScript which was used to control the user interface. Another TinyMCE editor was configured for editing the text of the panel items. Both creating new item and editing existing item were sharing the same editor. If it is used for creating new item, the editor will be empty. If it is used for editing existing item, the text of existing item will be filled into the editor.
The JavaScript function covered the following tasks:
• Show and hide the right side panel. • Open Bootstrap modal for creating new item. • Open Bootstrap modal for editing or deleting existing item. • Enable or disable the editing mode for the right side panel. • Save item text • Update item text • Start title editing and add text box with confirm and cancel buttons.
In the back-end server side, Flask functions were written to cover the following tasks:
• Update title text • Create panel items • Updating panel items • Delete panel items
Refer to the ERD diagram in Figure 3.2.3, SidePanelState and SidePanelItem were created for this module. The SidePanelState table stored the state information of whether the panel is shown or hidden. The SidePanelItem stored the item text. Both these two tables were associated with the Menu table by the url attribute.
4.3.5 Result The switch button design was not a standard HTML element appearance, such as checkbox. It cannot be achieved by simply using <input> tag and setting the type value. Fortunately, there is a plugin called Bootstrap-switch, which could provide the elements, which is usually seen on mobile devices, for web applications. By using this plugin with some configuration, it perfectly satisfied the original design we mentioned before.
Refer to Figure 4.3.5(a) and Figure 4.3.5(b), the switch button controlled the entire right side panel area to be shown or to be hidden. To gain a better user experience, the state information was submitted using AJAX technique so that there was no page reloading action when the switch button was clicked.
27
Figure 4.3.5(a): Right side panel is switched on
Figure 4.3.5(b): Right side panel is switched off
28
Figure 4.3.5(c): Editing mode of the right side panel
When the editing mode is started, as shown in Figure 4.3.5(c), the pencil icon of the trigger button will be replaced with an eye icon, which indicated that the user will quite the editing mode and go back into viewing mode (normal mode) by clicking it again. A new element with a plus sign inside was added at the top of the item list. The Bootstrap modal for creating new item (Figure 4.3.5(d)) will be opened if this item is clicked. If an existing item is clicked the Bootstrap modal for editing or deleting the item (Figure 4.3.5(e)) will open.
29
Figure 4.3.5(d): Bootstrap modal for creating new item
Figure 4.3.5(e): Bootstrap modal for editing or deleting an existing item
30
Figure 4.3.5(f): Editing the title of right side panel
When the title text is double clicked, the text will be replaced by a text box with a confirm button and cancel button attached (Figure 4.3.5(f)). It allowed user to change the title text. The changed text was submitted using AJAX as well.
31
4.4 Central Authentication Service (CAS) Login
Since our school is using CAS to authenticate students or staffs who want to access the school information systems. It is necessary for this CMS to connect with the CAS.
This module was developed in the third iteration of the entire development process.
4.4.1 User Stories The following is user stories had been satisfied in this CAS login module.
• The admin must log in through the CAS before they start to manage the webpages. • The audience can visit webpages without log into CAS.
4.4.2 Issue to Overcome There is a simple demonstration of authentication technique using CAS provided by our school, which gives the developer a good start to connect CAS with their own applications [24]. However, the demonstration is written in PHP, I had to write a Python version of CAS login module for this CMS. The implementation of this module was mainly about writing Python code based on the given PHP code. The mechanism of CAS had to be followed.
4.4.3 Result If the user want to login and start to manage the content, the system will first redirect the user to the CAS login interface, which is shown in Figure 4.4.3(a). After successful login, the user’s name registered in our school will be returned, and the user will be redirected back to the home page of his or her site, referring to the Figure 4.4.3(b).
Figure 4.4.3(a): CAS login interface
32
Figure 4.4.3(b): Name is returned by CAS after successful login
For developing purpose, the system was not restricted the login right to the staff only. This can be done when it is deployed.
4.5 File uploading
As a module web site, sharing files to students is a common task in daily teaching operation. This module is a must-have module for this system.
This module was developed in the fourth iteration of the entire development process.
4.5.1 User Stories The following is user stories had been satisfied in this file upload module.
• As an admin, I want to upload a file and share it to my audience. • As an audience, I want to download files shared by admin. • As an admin, I want to be able to upload all types of document that will be used in
daily teaching operations.
4.5.2 Issue to Overcome To make the system robust, we should never trust input from users [25].Since this module allows user to submit files to the server. Malicious file might be delivered to the server which could break down the service. The security issue should be considered. Therefore, based on the recommendation from the Open Web Application Security Project [26], a white list file extension was used in this module [27]. The file type that are allowed to be submitted should be restricted to those are frequently used in daily teaching operations only.
In order to allow audience to download the file, the uploaded file directory in the server should be able to be visited by audiences, but the audience should be authenticated first.
4.5.3 Code Implementation In the front-end, JavaScript functions were written to cover the following tasks:
• Open Bootstrap modal dialog for uploading files. • Submit selected file using AJAX • Display upload status.
In the back-end, in order to address user stories and the security issue. The file extension white list was written as a collection in Python global variable (Figure 4.5.3(a)). A Flask
33
Extension was used to generate an index page for the admin and audience to view uploaded files. Flask functions were written to cover the following tasks:
• Recognize file extensions • Accepting file submission in AJAX fashion • Render page to display uploaded files directory
4.5.4 Result The login button in right most side of the navigation menu was transferred into a dropdown menu. Referring to Figure 4.5.2(a), two buttons were added into the dropdown menu. The “Upload Files” button will bring out a Bootstrap modal dialog which allows the user to select file from his local file directories and upload the file. The “Browse Files” button will open the directory of uploaded files in the server.
Figure 4.5.2(a): Dropdown menu at the right most of navigation menu.
Figure 4.5.2(b): Bootstrap modal dialog for uploading files
Figure 4.5.2(c): Select file to upload
34
In the Bootstrap modal, a file input will bring out the file selector to select local file to be uploaded. When “Upload” button was clicked, the file will be submitted to the server using AJAX technique. The file will be checked by the server and return a status. The upload status message will then be displayed at the bottom of the Bootstrap modal dialog, refer to Figure 4.5.2(d) and Figure 4.5.2(e).
Figure 4.5.2(d): Upload successfully status
Figure 4.5.2(e): Upload fail status
35
4.6 Site Management
Many teachers may not only teach one module, they may want to create another module website which is under the control of the same CMS. This module is another key feature of this CMS, it enables the site management ability for this system.
Although this is a key feature of the system, because of the complexity of this module, it was developed in the last two iterations. The reason to do this arrangement was that this module has a lower priority than previous modules. If the system did not have this module, it still can satisfy the very basic requirements of this project. With this module, the system became more powerful yet developing this module increased the risk of failure of this project.
4.6.1 User Stories The following is user stories had been satisfied in this site management module.
• As an admin, I want to add a new site into this CMS. • As an admin, I want to delete an existing site and all pages associated to the site. • As an admin, I want to add new pages for my sites. • As an admin, I want to delete a page and all data associated to the page. • As an admin, I want to change the title of my sites.
4.6.2 User Interface To address the user stories, a new site management page was designed. Figure 4.6.2 shows the sketch of the UI design. In order to allow user to add a new site, a button with text “Add New” was added. It will trigger a Bootstrap modal for users to enter the site title and site name.
Figure 4.6.2: Sketch for site management page
36
Below the “Add New” button, a list of existing site name is displayed. Beside each site name, there is a button with a cross sign. This button is used to delete that existing site.
The page management and title management were based on previous page layout design. A button which will redirect users to the site management page was added into the dropdown menu at the right most of the navigation menu.
4.6.3 Issue to Overcome As designed in the database, web pages of a site are mapped with URLs. When a site is created, in order to make the site available to be visited, an empty home page is required. The URL of the home page has to be generated at the same time and be stored into the database. This should be the final step of creating the new site.
When delete a site, all web pages and data which are associated with that site have to be deleted as well. This requires to go through every database table to perform the deletion.
4.6.4 Code Implementation In the front-end, since a new site management page was designed, a new HTML template was created. Together with the HTML template, a new JavaScript file was created, in which contains all JavaScript functions for controlling user interface interaction behaviors. JavaScript functions for managing pages were added into home_view_ctrl.js as well. All JavaScript functions for this module covered following tasks:
• Open Bootstrap modal for adding new site when button is clicked. • Submit site information • Add new item into navigation menu • Delete existing item in navigation menu • Edit site title
In the back-end server side, Python Flask functions were created. They are handling following tasks:
• Add and delete site. • Add and delete menu item. A menu item is a page of a site. • Update site title.
4.6.5 Result At the home page of a site, refer to Figure 4.5.2(a) if the “My Site” button in the dropdown menu was clicked, the system will redirect the user to the site management page.
Figure 4.6.5(a) shows the site management page. As it was designed, user can add a new site by clicking the “Add New” button. Below the “Add New” button, a list of existing sites is displayed. If a site name is clicked, the home page of that site will be shown. Beside each site name, a red button was attached. The site can be deleted by clicking this button.
37
Figure 4.6.5(a): Site management page
When the “Add New” button is clicked, a Bootstrap modal dialog for creating new site will come up. Site title and site name should be entered to create a new site.
If the red deleting button is clicked, a pop up window will alert the user that this is a danger action. Only after the user confirm to proceed, the site and its associated pages will be deleted.
Figure 4.6.5(b): Add new site
38
Figure 4.6.5(c): Delete site confirmation
Figure 4.6.5(d): Edit site title and start menu editing mode
39
Figure 4.6.5(e): “Edit All” mode is started
Figure 4.6.5(f): Add new item to menu (add new page to a site)
Figure 4.6.5(g): Delete existing item in menu (delete pages from a site)
The site title can be added in any page of that site. A double-click on the title text will bring up a text box attached with a confirm button and a cancel button. This allows the user to change the site title.
When I did the development module, I realized that it will be good to have a mode which allows me to edit every editable area at the same time. Therefore, I created the “Edit All” mode and placed a button just beside the right side panel switch button. When the “Edit All” mode is started, the trigger button will have the text “View” instead of “Edit All” as it shows in Figure 4.6.5(e).
Adding and deleting pages of a site can be achieved in the navigation menu area. As it is shown in Figure 4.6.5(e), when “Edit All” mode is started, a “plus” button and a “minus”
40
button was added into the navigation menu. The “plus” button was used to add new menu into the menu, which means adding a new page to the site. Same UI principle was applied here for entering item text. When the “minus” button was clicked, each existing menu item was attached a red button with a cross on it. The menu items can be deleted by clicking this red button, which means a page of the site was deleted.
4.7 Mobile Optimization
In order to make the system to be more mobile-friendly, some optimization had been implemented for the web pages. These optimizations were taken place across the entire development process. When a module was developed, it was tested on mobile devices before it was released to make sure it has a good user experience as it was in desktop browsers.
4.7.1 Code Implementation As Bootstrap is a framework that is designed to provide support to responsive and mobile first project, the optimization work used API provided by Bootstrap together with HTML5, CSS3 and JavaScript.
For faster mobile-friendly development, a set of utility classes are provided by Bootstrap, they are used for showing and hiding content by device via media query [28]. Those utility classes were implemented in many different places in the template files, following Figure 4.7.3 is an example of using utility class for the site title.
Figure 4.7.3(a): Example of implementation of Bootstrap utility classes.
41
4.7.2 Result The result of the mobile optimization has given this web application an appearance of a native mobile application. As it is shown in Figure 4.7.4(a), the site title was integrated into the menu bar. Menu items were collected into an expandable menu, which can be shown by clicking the button at the top right corner of the screen.
Figure 4.7.4(a): Web pages on mobile device (before login)
If the user has logged in the system, all the editing features that work on desktop are still available and work perfectly in the mobile device. Refer to Figure 4.7.4(b) and Figure 4.7.4(c), all the elements are fitted into the small screen, the fonts are also adjusted for the mobile screens.
42
Figure 4.7.4(b): Web pages on the mobile device (after login)
43
Figure 4.7.4(c): Web pages on the mobile device (“Edit All” mode is started)
44
Chapter 5
Testing and Evaluation
This chapter will introduce the testing processes applied in this project. The first session will describe the unit testing method used in the development of this project. The last session will explain the performance evaluation for the application.
5.1 Unit Testing
Since this application was developed by using Agile method, a module that was developed and integrated with the whole system in each iteration, it was natural to use unit testing method for each module and functions in those modules. In Agile, developers are encouraged to have the mindset of testers [29]. Therefore, when developing this application, I was trying to think as more alternative cases as possible to make the code to be robust to handle more cases.
When a module or a function was developed, a number of manual tests were conducted. For the front-end, as the code for front-end was controlling either the appearance or the interaction behavior of the web pages. The result of the code was very intuitive. After functions were written, the test was performed immediately. If the expected result or behavior was achieved, then some alternative cases were tested to try to break the code. If the code was robust and passed the test, it would then integrate with the system and be pushed into the Git repository.
For the back-end server code, manual tests were performed with the help of Postman API testing tool [30]. Since some functions in the server were used to handle the data transactions over AJAX technique. They work like a RESTful APIs [31]. With the help of Postman, the correctness of those functions could be tested before they were integrated with the front-end code.
Figure 5.1: Example of using Postman to test API [30]
45
Sometimes, the developers might have attachment with their code, which would prevent them from making up cases that would break their code eventually. Therefore, in order to have more various test cases, I also invited my friends to test the application. Modules in this application were tested by at least 5 different people.
5.2 Performance Analysis
A web application contains many resources, and it sends many requests to retrieve those resources needed when it is loaded. Loading those resources takes time and the speed of loading them significantly affects the performance of the web application.
At the final stage of the development, a performance analysis was conducted for this application. This analysis was performed with the help of Chrome DevTool [32]. The Figure 5.2 shows the example of Chrome DevTool for performance analysis.
Figure 5.2: Example of using Chrome DevTools for performance analysis.
In the Network tab of Chrome DevTool, the loading time of each resource and the number of requests were listed. Based on this statistic, the loading time of each resources can be easily assessed and ranked. Unnecessary requests can also be detected based on the request number.
According to the recommended best practice from IBM, several actions were taken, such as putting scripts at the bottom, Post-loading the components and making JavaScript and CSS external [33]. Some image resources were also compressed or replaced by SVG image to reduce their size so that they could take less time to load [34].
46
Chapter 6
Conclusion
This chapter will analyze the objectives achieved in this project as well as the limitations. The possible future work is outlined. Finally, a summary of the report will be provided.
6.1 Objectives Achieved in this Project
The four objectives which listed at the start of this report were:
1. The project should reproduce the visual style of the module website COMP61011 (http://studentnet.cs.manchester.ac.uk/pgt/COMP61011/). The design of this content management system should be based on this visual style.
2. The project should implement “What You See Is What You Get” (WYSIWYG) concept in content editing feature.
3. The system should provide basic and some advanced features that fulfilled the requirements of managing module webpages.
4. The product of this project should be extensible and used by module webpages other than COMP61011
The first two objectives has definitely been achieved. This can be seen in the result of each module in the chapter 4. The newly designed visual style was produced at the start of this project. The WYSIWYG concept was reflected in the content management and site management.
The third objective has been partially achieved. The application has provided features that allow users to edit content, manage basic site structure and resources. At the same time, although the addition of more features (e.g. creation of more complex site and addition of more admin users) is also achievable, this was greatly limited by the time given for this project. More advanced feature could be added in the future work if necessary.
The fourth objective has been partially achieved as well. Currently this application allows the user to create a new site and give the new site a different name. But the appearance and layout of the site must be the same. In the future work, features to support customizable layout and themes could be added.
For the requirements listed in chapter 3, all functional requirements in category “Must”, “Should” and “Could” has been achieved. Requirements in the “Won’t” category were not implemented.
The non-functional requirements have also been taken into consideration along with the development process of this project.
6.2 Future work
Despite the great improvement that has already made, further work are yet to be conducted in order to break the limitation and unleash more powerful features.
As a content management system, customizable layout and theme are not the very core features, but are good-to-have features. In the future work, these features could be added. It
47
could help users to build their site with more personality and make difference with other sites. Based on the current application architecture, these features are doable, and should not be very difficult to implement. I believe that if I could have more time, these features are definitely be able to be added into this application. It is challenging but of great interest at the same time.
Since the aim of this project is to develop an application that could eventually be used in the real world, the deployment work is definitely necessary. To enable the application of this system in school severs, more testing of deployment on the apache server needs to be conducted at the end of the development process of the project. If there is requirement of deployment, a shell script can be produced, which will help to install necessary environment and packages for this application.
Above are some ideas for the future work, I believe many more feature could be added as well.
6.3 Summary of the Report
The aim of this report is to demonstrate the success of the Content Management System created in my third year project. Many new technologies were used and many best practices were followed. This has made sure that the project could produce a web application that can last for a number of years. Agile development method was applied and the system was tested to be robust.
48
References
[1] M. Rouse, “content management system (CMS),” January 2011. [Online]. Available: http://searchsoa.techtarget.com/definition/content-management-system. [Accessed April 2016].
[2] G. Wavik, “Table Layouts vs. Div Layouts: From Hell to… Hell?,” Smashing Magazine, 8 April 2009. [Online]. Available: https://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/. [Accessed April 2016].
[3] “StackOverflow,” [Online]. Available: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. [Accessed April 2016].
[4] “WordPress,” WordPress, [Online]. Available: https://wordpress.org/. [Accessed April 2016].
[5] “Drupal-Open Source CMS,” [Online]. Available: https://www.drupal.org/. [Accessed April 2016].
[6] P. Boag, “The 5 hidden costs of running a CMS,” 6 August 2008. [Online]. Available: http://blog.teamtreehouse.com/the-5-hidden-costs-of-running-a-cms. [Accessed April 2016].
[7] “Central Authentication Service,” [Online]. Available: https://wiki.jasig.org/display/CAS/Home. [Accessed April 2016].
[8] “MoSCoW Prioritisation,” DSDM Consortium, [Online]. Available: https://www.dsdm.org/content/moscow-prioritisation. [Accessed April 2016].
[9] “Three-Layered Services Application,” Microsoft, [Online]. Available: https://msdn.microsoft.com/en-us/library/ff648105.aspx. [Accessed April 2016].
[10] A. Ronacher, “Welcome Flask,” [Online]. Available: http://flask.pocoo.org/. [Accessed September 2015].
[11] “jQuery,” [Online]. Available: https://jquery.com/. [Accessed September 2015].
[12] “Bootstrap · The world's most popular mobile-first and responsive front-end framework.,” Twitter, [Online]. Available: http://getbootstrap.com/. [Accessed September 2015].
[13] “SQLite Homepage,” [Online]. Available: https://www.sqlite.org/. [Accessed April 2016].
[14] “Manifesto for Agile Software Development,” Agile Alliance, [Online]. Available: https://www.agilealliance.org/agile101/the-agile-manifesto/.
49
[15] “12 Principles Behind the Agile Manifesto,” Agile Alliance, [Online]. Available: https://www.agilealliance.org/agile101/12-principles-behind-the-agile-manifesto/. [Accessed April 2016].
[16] “What is a Virtual Directory Server?,” Optimal IdM, [Online]. Available: https://optimalidm.com/resources/blog/virtual-directory-servers/. [Accessed April 2016].
[17] “DigitalOcean-Simple Cloud Computing, Built for Developers,” [Online]. Available: https://www.digitalocean.com/. [Accessed April 2016].
[18] “Virtualenv,” [Online]. Available: https://virtualenv.pypa.io/en/latest/. [Accessed April 2016].
[19] “Bower,” [Online]. Available: http://bower.io/. [Accessed April 2016].
[20] “Flask Tutorial,” [Online]. Available: http://flask.pocoo.org/docs/0.10/tutorial/templates/#tutorial-templates. [Accessed April 2016].
[21] C. Jarrett, “7 Basic Best Practices for Buttons,” UX Matters, 7 May 2015. [Online]. Available: http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php. [Accessed April 2016].
[22] “TinyMCE | The Most Advanced WYSIWYG HTML Editor,” Ephox, [Online]. Available: https://www.tinymce.com/. [Accessed April 2016].
[23] “Ajax,” MDN, [Online]. Available: https://developer.mozilla.org/en/docs/AJAX. [Accessed April 2016].
[24] “Demonstration of authentication with University of Manchester,” University of Manchester, [Online]. Available: http://studentnet.cs.manchester.ac.uk/authenticate/demonstration.php?csticket=5724d80c4e162&fullname=Yichen%20Lu&username=mbax3yl2&usercategory=student&dept=School%20of%20Computer%20Science. [Accessed November 2015].
[25] “Don't trust user input,” Open Web Application Security Project, [Online]. Available: https://www.owasp.org/index.php/Don't_trust_user_input. [Accessed April 2016].
[26] “About The Open Web Application Security Project,” The Open Web Application Security Project, [Online]. Available: https://www.owasp.org/index.php/About_OWASP. [Accessed April 2016].
[27] “Unrestricted File Upload,” The Open Web Application Security Project (OWASP), [Online]. Available: https://www.owasp.org/index.php/Unrestricted_File_Upload. [Accessed April 2016].
[28] “CSS,” Bootstrap, [Online]. Available: http://getbootstrap.com/css/#responsive-utilities. [Accessed September 2015].
[29] T. Huston, “What is Agile Testing?,” Smart Bear, [Online]. Available: https://smartbear.com/learn/software-testing/what-is-agile-testing/. [Accessed April 2016].
50
[30] “Postman,” Postman, [Online]. Available: https://www.getpostman.com/. [Accessed April 2016].
[31] A. Rodriguez, “RESTful Web services: The basics,” 09 February 2015. [Online]. Available: http://www.ibm.com/developerworks/library/ws-restful/. [Accessed April 2016].
[32] “Chrome DevTools,” Google, [Online]. Available: https://developers.google.com/web/tools/chrome-devtools/?hl=en. [Accessed April 2016].
[33] Luo Ling,Zhong Chen,Mu Qiao Pan,Huang Yao,Ling Xiao Sun, “Improve the performance of your web applications,” IBM, 21 September 2010. [Online]. Available: http://www.ibm.com/developerworks/library/wa-webappperformance/. [Accessed April 2016].
[34] “Scalable Vector Graphics (SVG) 1.1 (Second Edition),” W3C, 16 August 2011. [Online]. Available: https://www.w3.org/TR/SVG/. [Accessed April 2016].
[35] “Flask Foreword,” Flask Framework, [Online]. Available: http://flask.pocoo.org/docs/0.10/foreword/#what-does-micro-mean. [Accessed April 2016].
51
Appendix A Project Plan
