LOST AND FOUND WEB APPLICATION FOR

CAL POLY POMONA STUDENTS

A Project

Presented to the

Faculty of

California State Polytechnic University, Pomona

In Partial Fulfillment

Of the Requirements for the Degree

Master of Science

In

Computer Science

By

Harkamal Kaur

2017
 SIGNATURE PAGE

PROJECT: LOST AND FOUND WEB APPLICATION FOR CAL

POLY POMONA STUDENTS

AUTHOR: Harkamal Kaur

DATE SUBMITTED: Spring 2017

Computer Science Department

Dr. Lan Yang

Project Committee Chair
Professor of Computer Science

Dr. Tingting Chen

Assistant Professor of Computer
Science

ii
 ABSTRACT

In computing, a web application or web app is a client–server software application which

the client or user runs in a web browser. Web applications are getting popular these days

as they can be accessed from anywhere using a web browser and the convenience of using

a web browser as a client to update and maintain web applications without distributing and

installing software. Common web applications include webmail, online retail sales, online

auctions, wikis, instant messaging services and many other functions. In this project, a

web-based distributed lost-and-found service for California State Polytechnic University,

Pomona is designed and implemented. The major goal of this project is to help the students

around the campus with a web service to find their lost stuff more quickly. The application

is an online lost and found web portal with an interactive user interface. It is a user-friendly

web application which is created using web programming languages connected to the

database. The project is designed using a client-server model. The main features of the web

application include an authentication, registration and login system, a lost and found

listings page where the user can enter the information about the lost and found items.

Keeping in mind some security issues, the users cannot delete any items. The reason was

some users may delete the items just to mess around. This privilege is given to the admin

only. The application also allows the users to update the listed items if needed. The users

can update the contact information and change the password.

iii
 TABLE OF CONTENTS

SIGNATURE PAGE........................................................................................................... ii

ABSTRACT ....................................................................................................................... iii

LIST OF FIGURES ........................................................................................................... vi

CHAPTER 1: INTRODUCTION ....................................................................................... 1

CHAPTER 2: LITERATURE SURVEY............................................................................ 2

2.1 Distributed Databases ............................................................................................... 2

2.2 HTML ....................................................................................................................... 2

2.3 Cascading Style Sheets (CSS) .................................................................................. 3

2.4 JavaScript .................................................................................................................. 4

2.5 PHP ........................................................................................................................... 5

2.6 MySQL ..................................................................................................................... 6

CHAPTER 3: METHODOLOGY ...................................................................................... 7

CHAPTER 4: RESEARCH GOAL AND PHASES ........................................................... 8

4.1 Phase 1 ...................................................................................................................... 9

4.2 Phase 2 ...................................................................................................................... 9

4.3 Phase 3 ...................................................................................................................... 9

4.4 Phase 4 ...................................................................................................................... 9

CHAPTER 5: DESIGN AND IMPLEMENTATION ...................................................... 10

5.1 Client-Server model ................................................................................................ 10

iv
 5.2 Database Design ..................................................................................................... 10

5.3 Screenshots and files ............................................................................................... 12

CHAPTER 6: EVALUATION OF RESULTS ................................................................. 16

6.1 Functionality Testing .............................................................................................. 16

6.2 Usability Testing ..................................................................................................... 18

6.3 Compatibility Testing .............................................................................................. 3

CHAPTER 7: CONCLUSION AND FUTURE WORK .................................................. 21

REFERENCES ................................................................................................................ 22

v
 LIST OF FIGURES

Figure 1. Homepage .......................................................................................................... 12

Figure 2. Lost and found listing page .............................................................................. 13

Figure 3. Login page ......................................................................................................... 14

Figure 4. User account page.............................................................................................. 15

Figure 5. User homepage in google chrome ..................................................................... 17

Figure 6. User homepage in internt explorer .................................................................... 17

Figure 7. User homepage .................................................................................................. 18

Figure 8.Homepage in iOS browser.................................................................................. 19

Figure 9. Homepage in android browser........................................................................... 20

vi
 CHAPTER 1

INTRODUCTION

A web-based database system resides on an Internet server. The database can be accessed

through a web browser. A distributed system is a system consisting of a collection of

autonomous machines connected by communication networks and equipped with software

systems designed to produce an integrated and consistent computing environment [2].

Distributed systems are helpful in letting the users to co-operate all the activities in a more

effective and efficient manner. The key purpose of the distributed systems is represented

by resource sharing, openness, concurrency, scalability, fault tolerance and transparency

[5].

Web-services provide a standard means of interoperating between different software

applications running on a variety of platforms and/or frameworks. Web applications

use web documents written in a standard format such as HTML and JavaScript, which are

supported by a variety of web browsers. Advantages of web-based distributed databases

are easy maintenance and updating, reusability and modularity, distribution of data update

and security.

The architecture used for the web-based distributed database is the Client/Server model. In

this model, client sends request to the web server. The request is then transferred to the

database server [8]. The results are sent back to the web browser in the client side after the

database server processes the requests by the clients.

In this project, we designed and build a lost and found web application with basic functions

like the lost and found portals available online: user registration, login/logout, changing

user password, posting lost stuff, posting found stuff, admin login.

1
 CHAPTER 2

LITERATURE SURVEY

2.1 Distributed Databases

A distributed database system allows applications to access data from local and remote

databases. Distributed databases use a client/server architecture to process information

requests.

Advantages of using distributed databases:

• Management of distributed data with different levels of transparency like network

transparency, fragmentation transparency, replication transparency, etc.

• Increase reliability and availability/

• Easier expansion

• Protection of valuable data and information.

• Improved performance.

• Less cost.

• Systems can be modified, added and removed from the distributed database without

affecting other modules.

• Reliable transactions.

• Distributed query processing can improve performance.

2.2 HTML

Hyper Text Markup Language, commonly abbreviated as HTML, is the standard markup

language used to create web pages. Along with CSS, and JavaScript, HTML is a

cornerstone technology used to create web pages as well as to create user interfaces for

2
mobile and web applications. Web browsers can read HTML files and render them into

visible or audible web pages. HTML describes the structure of a website semantically. It

helps in the presentation or appearance of the document (web page), making it a markup

language, rather than a programming language.

HTML elements form the building blocks of HTML pages. HTML allows images and

other objects to be embedded and it can be used to create interactive forms. It provides a

means to create structured documents by denoting structural semantics for text such as

headings, paragraphs, lists, links, quotes and other items. HTML can embed scripts written

in languages such as JavaScript which affect the behavior of HTML web pages. HTML

markup can also refer the browser to Cascading Style Sheets (CSS) to define the look and

layout of text and other material.

Advantages:
• Its plain text so is easy to edit.

• It is fast to download.

• Is very easy to learn.

• It is now a standard.

• It is supported by most browsers across most if not all platforms.

• Simple to edit only requires a text editor.

• Can be used to present just about any kind of data.

2.3 Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used for describing

the presentation of a document written in a markup language. Along with HTML

and JavaScript, CSS is a cornerstone technology used by most websites to create visually

3
engaging webpages, user interfaces for web applications, and user interfaces for many

mobile applications

CSS is designed primarily to enable the separation of document content from document

presentation, including aspects such as the layout, colors, and fonts. This separation can

improve content accessibility, provide more flexibility and control in the specification of

presentation characteristics, enable multiple HTML pages to share formatting by

specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in

the structural content.

It can also be used to display the web page differently depending on the screen size or

device on which it is being viewed. Readers can also specify a different style sheet, such

as a CSS file stored on their own computer, to override the one the author has specified.

Features:
• Separation of content from presentation.

• Site-wide consistency.

• Bandwidth.

• Page reformatting.

• Accessibility.

2.4 JavaScript

JavaScript is a high level, dynamic and interpreted programming language. Alongside

HTML and CSS, it is one of the three core technologies of Web content production; the

majority of websites employ it and it is supported by all modern Web

browsers without plug-ins. JavaScript is prototype-based with first-class functions,

making it a multi-paradigm language, supporting object-oriented, imperative, and

4
functional programming styles. It has an API for working with text, arrays, dates

and regular expressions, but does not include any I/O, such as networking, storage, or

graphics facilities, relying for these upon the host environment in which it is embedded

The syntax of JavaScript is actually derived from C, while the semantics and design are

influenced by the self and Scheme programming languages. It is also used in game

development, the creation of desktop and mobile applications, and server-side network

programming with runtime environments such as Node.js.

2.5 PHP

PHP is a server-side scripting language designed for web development but also used as

a general-purpose programming language. It stands for Hypertext Preprocessor.

PHP code may be embedded into HTML code, or it can be used in combination with

various web template systems, web content management system and web frameworks.

PHP code is usually processed by a PHP interpreter implemented as a module in the web

server or as a Common Gateway Interface (CGI) executable. The web server combines the

results of the interpreted and executed PHP code, which may be any type of data, including

images, with the generated web page. PHP code may also be executed with a command-

line interface (CLI) and can be used to implement standalone graphical applications.

PHP is a general-purpose scripting language that is especially suited to server-side web

development, in which case PHP generally runs on a web server. Any PHP code in a

requested file is executed by the PHP runtime, usually to create dynamic web page content

or dynamic images used on websites or elsewhere. PHP can be deployed on most web

servers, many operating systems and platforms, and can be used with many relational

5
database management systems (RDBMS). Most web hosting providers support PHP for

use by their clients. It is available free of charge, and the PHP Group provides the complete

source code for users to build, customize and extend for their own use.

2.6 MySQL

MySQL is an open-source relational database management system (RDBMS). In July

2013, it was the world's second most widely used RDBMS, and the most widely used open-

source client–server model RDBMS. “SQL" stands as the abbreviation for Structured

Query Language.

MySQL is a popular choice of database for use in web applications, and is a central

component of the widely used LAMP open-source web application software stack. LAMP

is an acronym for "Linux, Apache, MySQL, Perl/PHP/Python". Free-software open-source

projects that require a full-featured database management system often use MySQL.

MySQL is also used in many high-profile, large-scale websites, including Google,

Facebook, Twitter, Flickr, and YouTube.

Advantages of using MySQL

• It is easy to use.

• Support is readily available whenever necessary.

• It’s Open-Source.

• It’s Incredibly Inexpensive.

6
 CHAPTER 3

METHODOLOGY

The Lost and Found Web Application uses the following hardware and software systems:

1. Windows 8.1 OS 8GB RAM Intel i5 Core Processor 2.60 GHz 64-bit Operating

System.

2. Notepad ++ for PHP development.

3. Notepad ++ and Google Chrome for HTML and CSS web development.

4. Notepad ++ and Google Chrome to write webpages and test them in the Internet

Explorer.

5. MySQL Server as database to maintain and store data and information.

6. HTML, CSS, JavaScript are used for client side interface.

7. PHP is used to connect the front-end web pages to the MySQL database server.

8. Package used: WAMPSERVER 2.0 WAMP stands for Windows, Apache 2.2.11,

MySQL 5.1.33 PHP 5.2.9.

7
 CHAPTER 4

RESEARCH GOAL AND PHASES

The final product is a web interface that helps students at Cal Poly, Pomona with the lost

items around the campus. The students can use the web interface to post details of the lost

items and found items. The main features of the web interface include separate UI for the

lost and found items. A database is connected to the client side server. The major goal is to

help students with locating the lost items on the campus.

The product of this project is a Lost and Found Web Application for California State

Polytechnic University, Pomona. California State Polytechnic University is the second

largest campus in the CSU with the enrollment of about 22,156 students in the fall quarter

2015. It is in fact the second largest polytechnic university in the US. A lot of students are

accepted each quarter for different majors in many different colleges. The campus itself is

huge with many buildings for all different majors such as Agriculture, Business

Administration, Education, Engineering, Science and many more. There are several other

buildings CLA building, Kellogg Library, Market Place, Bronco Student Center, Bookstore

and many other countable buildings. Students usually stop by in Library or in the food

court to study and eat and can often forget their valuable items around these areas and all

around the campus. I found an adaptable charger that a student left in the charging station

in the library. Losing the valuable stuff leads to a lot of stress. Although there is a lost and

found office located in the BSC at Cal Poly Pomona but some of the students don’t bother

to take the lost stuff to the office. A web application can help the students in a better way

to get their lost stuff back.

8
4.1 Phase 1

In the first phase, the goal was to build a client-side interface for the web application with

all the interactive features for a better user interface. It is done using HTML/CSS for the

difference pages and using JavaScript for the home page to make it more interactive for the

users.

4.2 Phase 2

In the second phase, the goal was to design and create database tables with different

attributes for storing and maintaining the information entered by the users. The language

used for managing the databases is MySQL server for storing the user information.

4.3 Phase 3

In this phase, a connection is established between the client side UI and the server side

database server. A scripting language should be used to connect the client side and the

server side database. I am using PHP for this purpose.

4.4 Phase 4

JavaScript cannot directly connect to MySQL. To connect JavaScript to MySQL,

JavaScript should be mixed with PHP. JavaScript is a client-side language and MySQL is

a server-side technology that runs on the server machine.

Basically, the language distribution per the physical machine is:

Server Side – PHP and MySQL.

Client Side – HTML/CSS and JavaScript.

9
 CHAPTER 5
DESIGN AND IMPLEMENTATION

5.1 Client-Server Model

The client–server model is a distributed application structure that partitions tasks or

workloads between the providers of a resource or service, called servers, and service

requesters, called clients[11]. The client and server may be residing on the same system or

can communicate with each other over a computer network if residing on a different

hardware system. A server runs server programs and shares resources with the clients. The

client requests the server for the content or a specific function.

Client and server exchange messages in a request response message cycle. The client

communicates with the server by sending a request and the server responds back with a

response to the client. The exchange of the messages is called inter-process

communication.

5.2 Database Design

The schema mentioned below is used for the database design for different functionalities.

Table structure for table found listing

CREATE TABLE IF NOT EXISTS `found_listing` (

`id` int(11) NOT NULL AUTO_INCREMENT,
`date_found` date DEFAULT NULL,
`item_name` varchar(45) NOT NULL,
`found_location` varchar(45) NOT NULL,
`returned_to` varchar(45) NOT NULL,
`users_id` int(10) unsigned NOT NULL,
`date_added` date DEFAULT NULL,
PRIMARY KEY (`id`,`users_id`),
KEY `fk_found_listing_users1_idx` (`users_id`)

10
Dumping data for table found_listing

INSERT INTO `found_listing` (`id`, `date_found`, `item_name`, `found_location`,

`returned_to`, `users_id`, `date_added`)

Table structure for table lost_listing

CREATE TABLE IF NOT EXISTS `lost_listing` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`date_added` date DEFAULT NULL,
`date_lost` date DEFAULT NULL,
`item_name` varchar(45) NOT NULL,
`user_name` varchar(45) NOT NULL,
`user_email` varchar(80) NOT NULL,
`user_phone` varchar(15) NOT NULL,
`lost_location` varchar(45) NOT NULL,
`description` varchar(10000) DEFAULT NULL,
`users_id` int(10) unsigned NOT NULL,
PRIMARY KEY (`id`,`users_id`),
KEY `fk_lost_listing_users_idx` (`users_id`)
)

Dumping data for table lost_listing

INSERT INTO `lost_listing` (`id`, `date_added`, `date_lost`, `item_name`, `user_name`,

`user_email`, `user_phone`, `lost_location`, `description`, `users_id`)

Table structure for table users

CREATE TABLE IF NOT EXISTS `users` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`username` varchar(15) DEFAULT NULL,
`password` varchar(20) NOT NULL,
`email` varchar(100) NOT NULL,
`name` varchar(50) NOT NULL,
`admin` tinyint(4) DEFAULT '0',
`phone` varchar(15) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `unique_email` (`email`),
UNIQUE KEY `username_UNIQUE` (`username`)
)

Dumping data for table users

INSERT INTO `users` (`id`, `username`, `password`, `email`, `name`, `admin`, `phone`)

11
5.3 Screenshots and files

Homepage

Index.php is the home page, any new user is directed to this page. The page displays the

sign me up/in tab and the lost and found listings tab. It also displays simple instructions of

how to create a login account for the users. Below is the home page screenshot.

Figure 1. Homepage
`

12
Lost and Found Listings page

Listings page.php displays the lost and found items added by the users of the web

application. This webpage can also sort the added items per the date added and lost date.

Below is the lost and found listings page screenshot.

Figure 2. Lost and found listings Page

Login Page

The login page lets the user log in to the website with their username and password. It also

lets the users register their account with the website. After successful login, it navigates to

the account of the user and displays the homepage. In addition, a new tab “Your Listings”

13
is displayed on the top of the page which lists the items posted by the user who is logged

in. Below is the login page screenshot and the user login page.

Figure 3. Login page

14
 Figure 4. User account page
The registration page uses register_user.php, update_user.php, change_password.php,

recover_password.php files.

The login page uses login.php, logout.php and config.php files.

The user login page and the admin page uses the delete_found_listing.php,

delete_lost_listing.php, update_found_listing.php, update_lost_listing.php,

insert_found_listing.php, insert_lost_listing.php files.

15
 CHAPTER 6

EVALUATION OF RESULTS

Procedures and criteria play a very important role in the outcome of any project or

application. Many different phases are involved in the overall design of the any application.

Three major requirements involve functional testing, usability testing and compatibility

testing [6].

6.1 Functionality Testing

The web application supports all different web browsers. The HTML/CSS code should be

compatible to run in all different web browsers. Similarly, all the database queries should

be executed correctly. Data retrieval and updating testing is performed to make sure all the

data is correct and accurate. The web application was tested on different web browsers

such as Chrome, Safari, Firefox and IE. It works efficiently and is compatible with all the

browsers. Login and authentication system was tested two times by registering two users

and logging in. The update contact information function works well as required. Password

change function was tested multiple times to find any errors, works efficiently. There were

some errors showing up on the listings page, which were fixed. All the features of the

application were tested multiple times and they work completely fine. Below are the

screenshots from google chrome and internet explorer browsers.

16
Figure 5: User homepage in google chrome

Figure 6: User homepage in internet explorer

17
6.2 Usability Testing

The web application is easy to use for all different users. Navigation to different controls

are properly tested. All the links are working in a desired way. The application has features

that can be easily understood to users. It offers a pretty interactive homepage. When a user

logs in, the user can see the interactive user homepage with all the navigating tabs placed

on the top of the page, the listings page is in middle of the homepage and again all the tabs

are displayed on the bottom of the homepage as well. The bottom of the homepage below

the listings page displays simple steps for the user about how to register and login to the

website. The features were tested by my multiple users, they found the design and functions

of the application interactive and easy to use. All the tabs and links are working as required.

Below is the screenshot of the user homepage which appears interactive to the end users.

Figure 7: User homepage

18
6.3 Compatibility Testing

Testing is done to ensure that the web service is compatible with all different kinds of

browsers, operating systems and mobile browsers. The compatibility testing is performed

using windows 8.1 operating system on a HP laptop, a MacBook machine, an IPhone 5s

browser, an android mobile browser. The web application was efficiently working on all

of them. Testing was done by sending a lot of traffic to the server and the server responded

in a timely manner without any delays. We also tested the web application on different

browsers such as IE, google chrome and safari. As PHP is an open source software, the

application responded good on all the browsers. Below are the screenshots from an IPhone

5s and an android mobile browser.

Figure 8: Homepage in iOS browser

19
Figure 9: Homepage in android browser

20
 CHAPTER 7

CONCLUSION AND FUTURE WORK

It can be concluded that the web application provides basic features and functions such as

user registration, login and authentication, a lost and found listings page, an update contact

information page, an admin login account with full privileges. The implementation of

different phases is functioning as expected. Test cases were performed on different

operating systems, browsers and platforms to ensure that the application was functioning

correctly on all the above. Thus, it can be concluded that the application is a web interface

that can help students at Cal Poly Pomona post the lost and found stuff and displays the

lost and found stuff to the users accessing the web application.

A few more features that can be introduced to the web application include text alerts

and email forwarding to the students when their lost stuff is found and returned to the ASI

lost and found office, a slightly better user interface for the listings page specifically a

separate lost and found page and a good encryption algorithm for the authentication

purpose. The web application should be able to automatically shoot an email or a text

message to the cell phone on just one click on the application by the admins. For future

work, I would like to introduce this feature to the web interface and make changes to the

existing application so that it is more user friendly.

21
 REFERENCES

[1] Avraham Leff, James T. Rayfield, “Web-Application Development using the

Model/View/Controller Design Pattern”, IBM T.J. Watson Research Center.

[2] G. Coulouirs, J. Dollimore, T. Kindberg, “Distributed Systems Concepts and Design”,

Addison-Wesley, 2001.

[3] Elena Ivanova, “Web-Service Architecture for Distributed Search in Databases”,

Second IEEE International Conference on Intelligent Systems, June 2004.

[4] D. Xue, Y. Xu, “Web-Based Concurrent Design using a Distributed System and Data

Modelling Approach”, University of Calgary, Alberta, Canada, T2N1N4.

[5] Alexandru Dan Caprita, Vasile Mazilescu, “Web-Based Distributed Database

Systems”, Economy Information I-4, 2005.

[6] T. Converse, J. Park, C. Morgan, “PHP5 and MySQL Bible, Wiley Publishing, 2004.

[7] A.S Tanenbaum, M. Van Steen, “Distributed Systems Principles and Paradigms”

Prentice Hall, 2002.

[8] University Enrollment Information, “https://www.cpp.edu/~irar/just-the-

facts/university-enrollment.shtml”.

[9] California State University, “https://en.wikipedia.org/wiki/California State

Polytechnic University, Pomona”.

[10] PHP Documentation, “http://php.net/manual/en/intro-whatis.php”.

22
[11] Client-Server Model, “Distributed Application Architecture” Sun Microsystem,

Retrieved 2009-06-16.”

23