1

Andromeda Galaxy MU
Group 11
David Alvarado
Eli Cummings
Trevor Davis
Arbind Giri
Bao Le
Adam Metaferia
Haris Mianoor
The Tran
Submitted By: Christopher A. Graves (Team Leader)

Table of Contents
Introduction ......
Deliverables (Phase I, II, III)
Report of testing and deployment of the mobile web application.
Database Design ...
Application Code .
User Guide
Team Leads Assessment of the tea work ..
Team Member Evaluation .

Introduction

Leveraging technology and availability of open-source code, our group set out to build a
mobile web app for the students of Monsters University (MU). Given the fact that each student
has a smartphone and that the Andromeda website is not easily available for mobile devices our
group took on the task to build MU a mobile variant of their Andromeda website.
With this premise in mind, our team unanimously voted for such a project. During the
formation of the team, everyone realized that there was a varying amount of skill, some
rudimentary and others significantly more proficient. In addition to varying skills with webdevelopment, each group member offered different skillsets around PHP, databases and SQL.
These variances afforded the team with the opportunity to enhance each of our skills.
Building a function mobile web application in terms of MU would build on each of our
varying skillsets, offer the opportunity for exposure, and experience a team effort toward
developing a website. For much of the same reason why students would want to learn about
building websites, the mobile version of MU entails HTML, CSS, jQuery, SQL, and PHP and tie
all of them together to produce the mobile website. Beyond the simple exposure and
understanding the theoretical foundation beyond each, each of us got to dive into more complex
or advanced markup within each coding language.
The final product of our website has utilized each of these coding languages to offer
feature rich website. Notably, our source files primarily consist of PHP code, with small
amounts of echoed html. An interesting use of the database was to use a field to hold the HTML
code, and echo that out via PHP dynamically; this would allow for a future enhancement to allow
an authenticated user with the right permission to simply and easily update the content on the
page just by typing out the content and hitting submit or save on the form. I think the most

challenging part of the project was in developing our contact directory. This consists of one php
file directory.php, however the idea is that this page is fetching the contacts from the database,
and when an end-user selects a contact, within the same directory.php file we segment out the
rest of the php/html code, to show the specific contact all in one file. The URL changes from
directory.php to directory.php?id=x.
In addition, we included the ability to segment out users by user groups (student, faculty,
admin). Each of these user groups have separate capabilities, for example students can only
view content. However, Faculty and Administrators have additional capabilities to easily submit
new content to the database. We have three functions established to in our functions.php file,
and that function is used to determine what the role of the current user is, and depending on
what role they are, the user may or may not see additional functions.
Deliverables of Phase I, II, III
The deliverables for Phase I, II, III are included as additional files.
Report of Testing and Deployment
While most of the test were performed on the localhost, we did deploy the app to a
production server (we can call this a staging server) and tested the site. No issues were found,
and the project ran the same both on the local host as well on the staging server. All functionality
was tested ; user login, checking grades, and for the admin to add users that also show up on the
directory. In addition, we based the site off of the jQuery mobile framework and used a CDN to
provide the CSS, however the jQuery and custom JavaScript code were local files for the site.
Throughout the development of the MU mobile website, we consistently kept in mind

coding to thwart potential security vulnerabilities in terms of HTML, JS, and SQL injections.
Specifically, while we were coding the login process for users, we determined the best approach
for the database was to use the right kind of encryption, and after some research we went with
SHA256 and included a Salt. During the PDO coding practice we attempted to use the PDO for
the database connection, however a standard PDO is still just as week as the normal
mysql_connect function of PHP and would be less work to continue using this function. We
implemented a specialized sanitation function for HTML form elements and continuously test for
injection threats.
Mobility evaluation was done on the localhost by shrinking the browser and tested on
Android Smartphone, iPhone, iPad, and iPad mini. Backing the support for the jQuery mobile
framework, the website appeared and operated as intended; these devices are commonly used
and our project was geared toward providing these types of devices the website.
We did use some additional software in order to evaluate the website. We utilized the
open source Font Awesome framework to provide some additional icons (user, Log In / Log Out
lock based on login status). As for the HTML and CSS, we leveraged the jQuery mobile
framework for the entire site. Our staging server was an Apache webserver with MySQL on a
public registered domain. In order to evaluate website penetration, we used the Web Pen testing
tools (20+ Tools)located in BackTrack (a variation of the Ubuntu Distribution) which is geared
specifically toward penetration tester. All tests came back good, however the only vulnerability
that we have currently, is that the site on the Production Server as well as Red Hat are connected
without an SSL certificate. If this was an actual project, it would be highly recommended that an
SSL certificate be utilized to prevent any sniffing of information as it would be sent in clear text.

Database Design
Our database design was primarily designed to be simple and in planning for the project,
we anticipated only a few tables. Shown below table(A) below visually shows our five tables,
fields, and field attributes to drive our mobile website. We created a database called MWA11,
and within that the following five tables were created (a. Classes, b. Grades, c. News, d. Pages, e.
Users).
The classes table is used to identify the class and its details. This is joined with the
grades table which is used to display the current users grades and class when the user selects the
appropriate page. News is used to hold all the news / events posts. This is shown on our mobile
website on the home page, toward the bottom, and on the news page itself. The variation on the
home page is shrunk down and displays minimal information; the SQL code behind this will
pull in descending order by date, and will only show an excerpt of the post of around 75
characters. This is done to be sure that a potential long post would not display incorrectly, as
well as the shrunk down version remains clear and concise. However the news page shows the
posts in full, with the date created. The SQL code behind this sorts the records in descending
order by the date field, so that the newest record is always displayed first.
The pages table is utilized in the creation of separate pages. Aside from a common
header and common footer, the body content of each page is different. We were planning on
using this to allow admin users the ability to create a page and submit it (the body code) to the
database. This would allow anyone with a web enabled device to create content without using a
text-editor, IDE, Git and any other development deployment tools, as the site itself would
support this, much like the concept behind a Content Management System.

The last table, the users table, was included to drive the end-user login ability. In
addition, this table holds some additional information to identify the user, like email, and user
role to determine whether they are a student, faculty or administrator.
Table(A) Entity Diagram with Field Structures

Application Code
The application code is included as additional files.
User Guide
The user guide of the mobile web application is included as an additional file.