A WEB BASED PROJECT PORTAL DESIGN AND IMPLEMENTATION FOR THE

DEPARTMENT OF PHYSICS UNIVERSITY OF CAPE COAST, CAPE COAST,

GHANA

*Michael Kwame Vowotor (Corresponding Author)

Department of Physics, University of Cape Coast, Cape Coast, Ghana

mvowotor@ucc.edu.gh

Antwi Abraham

Department of Physics, University of Cape Coast, Cape Coast, Ghana

naphlyn@gmail.com

ABSTRACT

Effective communication and proper data storage facility is one of the most

significant tools in almost every well-developed institution. Carrying out a research on the

University of Cape Campus can sometimes be challenging and time delaying as a result of

ineffective communication between researchers and their respective supervisors. A web

portal that provides secured student project work and files storage and also facilitates the

exchange of information between students and their supervisors was created in this project.

The application uses an architectural pattern known as the Model-View-Controller, which is a

modern technique for building dynamic websites. HTML together with JavaScript was used

1
to build an interactive web interface for users. The website works across the Google Chrome

and the Mozilla Firefox browsers without any problems. Unlike most other web portals, this

site has an operational messaging section with a phone notification system which notifies a

user on a phone each time a message is received, which ensures effective and faster

communication between students and supervisors

Keywords

Web Portal, Internet, Communication, Laravel Projects, MVC, Project Portal

INTRODUCTION

Humans are all about communication. We communicate with our families. We

communicate with our co-workers. We communicate with strangers. The communities we

develop could not have been sustained without good communication. And today, where the

entire world is connected, communication continues to be vital. (Wood, 2017).

“Communication is the transfer of information from one person to another. It is a way of

reaching others by transmitting ideas, feelings, thoughts, facts and values” (Newstrom &

Keith Davis, 1967). The rapid transmission of information over long distances and easy

access to information have also become vital features of the modern world. (Emery, 2017)

But in order to communicate over huge distances at different times of the day and night, we

need some tricks up our sleeves. (Wood, 2017). Physics has over the past few years help to

enhance communication through satellites, optical fibers, computers, and the Internet. One of

the modern communication tools is the Internet. The Internet which was initiated in CERN

led by Tim Berners-Lee in 1989 and Robert Cailliau in 1990 has now become the most used

medium for communication over the past few years. The Internet is the global system of

interconnected computer networks that use the Internet protocol suite (TCP/IP) to link

2
devices worldwide. It is a network of networks that consists of private, public, academic,

business, and government networks of local to global scope, linked by a broad array of

electronic, wireless, and optical networking technologies (Wikipedia, 2017). Communication

over the Internet has in recent years become the easiest and effective means of

communication for most individuals and corporate institution. So far, various communities

have taken advantage of current Web functionality to strengthen communication and

information exchange not only within the community but also with external communities or

individual users. Various Web portals have appeared with the purpose of providing an open

and effective communication forum for their members (Lara, 2004). The Internet has also

become the preferred choice of data storage for many individuals due to the easy and flexible

way of retrieving and uploading data to it. Data stored on the web can be retrieved anytime

from any point so far as there is an active internet connection. “Portal is one of the least

helpful words we have developed in recent years as we come to terms with the changing

information environment in which we research, learn and work” (Lorcan Dempsey, 2003). A

web portal is a Web-based application that brings audience, application, systems and

processes together to form a centralized collaboration experience. Portal software integrates

technologies to build personalized work areas and communities to increase productivity for

users (Chozam, 2006). Web portal consist of several types which includes

Vertical (VEPs or Vertical Enterprise Portals or Vortals).These portals are developed

for specific interest groups, for example CNET.com pets.com (pets), and women.com.

Horizontal or MegaPortals for general use. Examples are Excite, Yahoo, AltaVista,

AOL.com, and Infoseek.

Intranet or Enterprise portals. Features that most of the vendors offer are the ability

for the organizational user to customize the information they receive and the way in which it

is displayed on the screen, the categorization of this information, and the integration of

3
information from multiple databases and file formats. Internet gateways or libraries – not

focused on internal enterprise functions according to Strauss (as cited in Pienaar, 2003)

One obvious reason to deploy portals is to improve productivity by increasing the

speed and customizing the content of information provided to internal and external

constituencies, similar to groupware applications. Portals also serve a knowledge

management function by dealing with information glut in an organized fashion (Katz &

Associates, 2006). University portals can be a means for establishing a long-term relationship

with the institution. They not only make it easy to do business with the institution, but they

allow for interaction and collaboration among students, faculty, staff, and graduates with

similar needs and interests. Properly implemented, portals can be a strategic asset for the

institution. In that sense, they do far more than a traditional Web site of static information

ever could (Katz & Associates, 2006). Today many campuses have been quick to recognize

the powerful and transformational potential of portals and have developed and implemented

their own

This study is aimed at streamlining information exchanging between researchers and

supervisors on the university campus. Most of the university portals in Ghana allows students

to access results, examination time table, General information by the university, Registration

of courses and access to fees details. These portals does not help much when it comes to

student- lecturer interactions. It does not provide the means of exchanging information

between the university staff and the students, resulting into poor communication on the

various campuses. Poor communication on our campuses has enormously affected student’s

research works resulting into late completion of most project works in our various campuses.

The rationale behind this project is to use Internet Protocols specifically Html and PhP

together with MySQL Database to develop a web portal which allows supervisors to track the

4
progress of student’s project works and communicate with them as well and also allow

Students to save their files and data online.

BACKGROUNG

Internet Communications

Internet communication refers to the number of different ways people can

communicate over the World Wide Web. It includes chat rooms, email, instant messaging,

forums, social networking sites and voice over IP programs Social media sites like Facebook

are another example of Internet communication. These sites allow people to post messages

and then respond to the messages over others in a long network from one computer to

another. Internet forums also facilitate communication by letting someone create a thread,

which others then respond to in a long chain. Many websites such as blogs also allow people

to post comments to communicate that way. Even before graphic user interfaces, such as

AOL, it was possible to communicate over the Internet in text form only when the Internet

was mostly a collection of connected college and government computers. (Reference.com,

2017). The internet has made a very good impact to research since its invention.

Web Development

Web development broadly refers to the tasks associated with developing websites for

hosting via intranet or internet. The web development process includes web design, web

content development, client-side/server-side scripting and network security configuration,

among other tasks. (Technopedia, 2017)

Web development is the coding or programming that enables website functionality,

per the owner's requirements. It mainly deals with the non-design aspect of building websites,

5
which includes coding and writing mark-up. Web development ranges from creating plain

text pages to complex web-based applications, social network applications and electronic

business applications. The web development hierarchy is as follows:

Client-side coding Server-side coding Database technology. (Technopedia, 2017)

PHP Frameworks

PHP frameworks streamline the development of web applications written in PHP by

providing a basic structure for which to build the web applications. The general idea behind

the workings of a PHP framework is referred to as Model View Controller (MVC). MVC is

an architectural pattern in programming that isolates business logic from the UI, allowing one

to be modified separately from the other (also known as separation of concerns). With MVC,

Model refers to data, View refers to the presentation layer, and Controller to the application

or business logic. (Noupe Editorial Team, 2009). Examples include LARAVEL,

CODEIGNITOR CAKE PHP, ZEND, YII and so on

PROCEDURE AND RESEARCH AREA

The application programing comprises of three aspects: a database component, the use

of a programming/scripting language, the design and implementation of the graphical user

interface (GUI). These components tie together to form the complete web applications.

MVC Architectural Pattern

This applications uses PhP framework known as Laravel. The Laravel frame work

uses an architectural pattern known as the Model-View-Controller (MVC). The Model-View-

Controller (MVC) pattern separates the modelling of the domain, the presentation, and the

actions based on user input into three separate classes: Model, View and Controller
6
 Figure 1: MVC Architectural Pattern (projectmanagementdud.blogspot.com, 2018)

The User Interface

The user Interface manages the display of information and also facilitates interaction

with user. However, it does not act on user interaction (i.e., events) - that is the job of the

controller

The website template was created using the Cascading Style Sheet (CSS) and HTML then

incorporated into Laravel. All the images were edited using the Adobe Photoshop image

editor and the adobe illustrator. All gradient colours on the site were generated with the adobe

illustrator software. The general structure of the user interface is as follows

<!-- View stored in resources/views/greeting.blade.php -->

<html>

<head>

</head

7
 <body>

<h1>Hello, {{ $name }}</h1>

</body>

</html>

Server Side Programming

The backend was primary written in PhP. It also includes some built in function by Laravel.

The application uses the laravel authentication system to authenticate all users who visits the

site. A Middleware was created in the laravel framework to handle Page redirections and also

to check user role. The Laravel eloquent model was used to communicate with the Database

system. The server side comprises of the Model and the Controller

Model

The model manages the behaviour and data of the application domain, responds to

requests for information about its state (usually from the view), and responds to instructions

to change state (usually from the controller). It maintains the state and notified

observers/subscribers of change in information. Models allow you to query for data in your

tables, as well as insert new records into the table.

Controller

The controller interprets the mouse and keyboard inputs from the user, informing the

model and/or the view to change as appropriate.

This research was carried out at the University of Cape Coast Campus. The University

of Cape Coast began as a College in October, 1962, as a result of a recommendation of an

8
international commission appointed by the Ghana Government in December, 1960.

Approximately 40% of students are admitted into the Faculty of Education to pursue

Bachelor of Education programmes qualifying as professional teachers, and the rest into non-

education programmes in the other Faculties. It is located in cape coast Ghana. (ucc.edu.gh,

2018)

Database Design

Figure 2: Database Design

The database were created using MySQL incorporated in the phpMyadmin and consists of

Nine tables. Figure 4 shows all tables except the password reset table.

All database migrations were done using the PhP artisan tinker

9
 RESULTS AND DISCUSSION

A web portal for tracking and monitoring student project was built in this project.

This will ensure an effective communication between researchers and supervisors on the

university campus. Effective communication implies more research can be carried out within

the shortest possible time ensuring faster growth and advancement in science and technology.

This application works across latest browsers without any challenges. The application

basically has a Login page where all users are being directed upon visiting the site. The Login

page contain three main links leading to the student registration page, Student Login page and

the Lecturers login page respectively. Upon successful login students directed to the Student

Home Page

Figure 4 shows the overview of the application. The Student Home Page has seven

main menus: the Home, Profile, My Project, Notes, Files, Library and Messages. This allows

students to create project, create personal notes, upload and manage files, access library files,

read and send messages and edit profile as well. The Files page is where files are managed,

this page was built using the Laravel file manager plugin which allows easy and flexible

upload and download of files. The Lecturers Home Page also has seven menus which

includes the Home, Profile, My Students, Articles, Profile Archive, Library and Messages

The application also has an admin panel where the admin access the backend portion.

The admin can view the portals statistics such as page views, members, sign-ins, assign

lecturer roles, add and remove users, post general information and others. The messaging

section uses the Nexmo API extension which is responsible for sending phone message

Figure 3 shows the design of the Login page. The Login page serves as the portal

entry point to this application to direct visitors to other contents. All users who tries to access

any content of this application without being authenticated is redirected to this page

10
 Figure 3: Login Page Design

‘Student Home’ Page content: Upon successful login all students are being directed

to this page. This page contains the general information that has been posted by the Admin of

the page. It also has an image slider which displays some images of the university. It also has

the links to all other pages on the site. Figure 5 shows the design of the student Home Page.

This is similar to that of the Lecturer Home Page except for changes in the menu items

‘My Project’ Page content is where students create, save and access their project. It

basically has a text editor which allows the insertion of equations, customizing text, inserting

images and others. It allows you to edit and update existing project and also delete a project.

Upon completion of project students can submit the project to be saved to their supervisor’s

archive. Students can access their project content from any computer and from anyway incase

the need arises

11
 Figure 4: App Overview

‘Files’ Page Content shows the files uploaded by Students to their portal, this page

allows you to manage folders and files. Students can preview their files from this page. Files

on this page can also be downloaded to student’s computer. This saves students from losing

their files when they lose their storage devices.

Notes Page Content shows the all notes that has been created by student. It allows

students to quickly create and save important ideas to their portal. Notes created can later on

be edited or can be deleted in case it is no longer relevant.

12
 Figure 5: Student Home Page

My Students Page Content: this page is accessible to lecturers only. It displays the

list of students a lecturer is supervising. In this page lecturers can access the content of their

students’ project, preview the project content and send recommendations to students in a

form of message on the site. A Notification is sent to the student’s phone each time a

recommendation is received from the supervisor. Figure 6 shows the My Students Page

Design

Message Panel shows all messages received by students. It allow creation and

sending of messages. It also allows users to respond to messages and delete them when not

needed. The messaging section also sends a notification to the student’s phone each time a

recommendation is received from the supervisor. This will ensure and enhance effective

communication on the site.

Library Page content contains all books and materials that have been uploaded to

the site by the Admin. Books on this page can be previewed and downloaded by the users of

the site. Using an online portal instead of printing information in booklets saves the school

and its students printing and paper costs, and benefits the environment by using fewer

resources.

13
 Figure 6: My Students Page Design

Project Archive Page Content contains all completed projects by students that has

been finally submitted and accepted by the supervisor. It keeps the track record of all projects

that the supervisor have ever supervised.

CONCLUSION AND RECOMMENDATION

HTML, PHP and MySQL has been used to design a web portal for the Department of

Physics, University of Cape Coast which allows supervisor’s to track and monitor the

progress of students’ project work, communicate with them and also allowing students to

save their data and files online. With the aid of Google Chrome developers tools the

performance of the various web pages were tested. The web pages appeared the same when

tested with the Google Chrome and the Mozilla Firefox browsers signifying the standard

nature of the source code.

14
 For future continuation of this work I would recommend that since the site was

designed for physicist, the editor should be upgraded to allow graphical representations of

data and also insertion of complex equations. Universities can also redesign this portal to

incorporate features such as resulting checking, student registration, student chat rooms,

timetable checker, fees Details checking and others. E-learning is also possible for

universities portals and can be included for effective learning on the university campus

REFERENCES

Wood D., (2017): Applying Physics to Communications Technology. https://study.com/

academy/lesson/applying-physics-to-communications-technology.html. (Assessed 10-

01-2018)

Newstrom & Keith D., (1967). What is Communication? | Meaning of Communication.

http://bizcommunicationcoach.com/what-is-communication-meaning-of-communication/,

(Assessed 30-11-2017)

Emery, B., (2017). The World Communicates. http://webs.mn.catholic.edu.au/

physics/emery/prelim_communication.htm (Assessed 3-01-2018)

Lara R., Han S., Lausen H., (2004). An Evaluation of Schematic Web Portals.

Technikerstrasse, 13, 6020, Innsbruck, Austria.

Dempsey, L (2003). The Recombinant Library: Portals and People.

Co- published simultaneously in Journal of Library Administration, 39, 4:103-136;

and in Improved Access to Information: Portals, Content Selection, and Digital

Information, ed. Sul H. Lee, 103-136. Binghamton, NY: Haworth.

Pienaar, H. (2003). Design and Development of an Academic Portal. University of Pretoria,

South Africa

Katz R.N. and Associates, (2006). Web Portals and Higher Education: Technologies to Make

15
 IT Personal, A publication of EDUCAUSE and NACUBO

Englert, B., (2003). Portals trends in Higher Education, Education Southwest Regional

Conference, http://www.educause.edu/asp/doclib/abstract.asp?ID=SWR0304

Reference.com (2017). What is Internet Communication? https://www.reference.com/

technology/internet-communication-a0b802f85dc624db#. (Assessed 16-11-2017)

Technopedia, (2017). Web Development. https://www.techopedia.com/ definition/23889 /

web-development, (Assessed 09-01-2018)

Projectmanagementdud.blogspot.com, (2018).Model-view-Controller: simply explained.

http://projectmanagementdud.blogspot.com/2013/03/model-view-controller-mvc-

simply.html, (Assessed 30-01-2018)

Noupe Editorial Team, (2009). Discussing PHP Frameworks: What, When, Why and

Which?https://www.noupe.com/development/discussing-php-frameworks.html,

(Assessed 15-11-2017)

Wikipedia (2017). Internet. https://en.wikipedia.org/wiki/Internet. (Assessed 15-12-2017)

16