DEPARTMENT OF COMPUTER SCIENCE

JAMIA MILLIA ISLAMIA

Project Report On

Website for TEKNOTHON 2019

FOR THE COURSE OF

SOFTWARE PROJECT MANAGEMENT
 PROJECT SUBMITTED BY:

NAME ROLL NO

QASIR HASSAN 17MCA040

MAHMOUD AL HOUSEINI 17MCA023

MOHAMMAD BILAL ANSARI 17MCA027

Under the guidance of

Dr. S. M. K. Quadri
HOD, DCS JMI
 Contents

Chapter 1

1. Introduction

1.1 Project Background

1.2 Overview

1.3 Objective

1.4 Development Requirements

2. Preparation

2.1 Introduction

2.2 Introduction to Web Development

2.3 Features of Web Platform

2.4 Web Architecture

3. Project Implementations

3.1 Using the IDE

 3.2 Project Screenshots

4. Conclusion

4.1 Scope for Further Improvements

 1 Introduction
1.1 Project Background

The purpose of the project is to design the requirement of a

Website to be used as a companion website for the people
interested in Teknothon-The annual Techno-Cultural Fest of
Department of Computer Science. It does almost every work which
is needed by people online, the same work people are doing
offline. This website is made as per seeing the requirements of
providing an online platform for people who want to know about
the event and who want to know or participate in the different
competitions that are hosted by Teknothon.

1.2 Overview

The “Teknothon-Website” is developed by using J2ee and the

NetBeans IDE. The frontend is designed using HTML, CSS, JavaScript
and we have used the Bootstrap framework for the responsiveness.
Since websites are supported by all smart-phones, computers,
tablets etc., it’s a great platform to be used as an Educational tool.
Our field being Computer Science has to be one of the first to make
use of these modern tools. After our first Teknothon last year, we
came to the conclusion that we should make use of the online
platform to put all our services related to Teknothon online.

1.3 Objectives

The following main objectives were kept in mind when

designing the website:

1. The major objective of this project is to get the current

offline system ONLINE.

2. The main portion of the website provides information

about our Department, Our University and about the
different Contests and competitions that Teknothon is
hosting like ChessMania etc.

3. The next portion provides the visitors opportunity to

register for the competitions online choosing one or
more contests they want to participate in.

4. The rules and regulations of each event is mentioned

properly under the respective contests under EVENTS
tab on website.
 5. The User interface is very much user-friendly and easy to
navigate.

6. The icons and colors used in the website are to ensure

full readability and easy understanding.

7. The data from forms is collected by servlets and stored in

databases.

8. The website can be modified anytime so there wont be

any delay if any problem is found somewhere on the
website.

To conclude, this website is designed to be the replacement for the

paper system and the offline system that is currently employed by
the Teknothon hosts.

1.4 Development Requirements

This website was developed on NetBeans 8.2. It was tested on

Chrome version 74 and Microsoft Edge. The frontend has been
designed using HTML, CSS, JavaScript, Bootstrap, and some
readymade libraries like SmoothScroll, slick etc. We decided to
use J2ee because it is in our syllabus and is very scalable and
dependable platform and as such has the greatest level of
community support. The website was also tested on various
devices including Lenovo K3 Note (Android 5.0), Samsung core
Prime(Android 4.4), Micromax A47(Android 4.0.2), Redmi Note
4(Android 6.0) etc. The following are the developmental
requirements:

 Operating System: windows 7 and later windows versions.

 programming Languages: Java, XML, HTML, CSS, JavaScript

 Other Technology: Browser, Server (Tomcat),

Database(Oracle) etc

 Software: NetBeans
 2. Preparation

2.1 Introduction

System analysis is the performance management and

documentation of activities related to the four life cycle phases
of any software namely:

 The Study Phase

 The Design Phase

 The Development Phase

 The Operators Phase

System analysis is a vast field of study through which system

analyst puts his thoughts and searches for the solution of
problem. He has to get a clear idea of what he has in hand and
what he has to produce. He has to extract the essence of
expectations. He has to satisfy the user in the very possible way.
System analysis needs and should include the following steps of
study:
  Study of current methods, the basic inputs
available and output desired.

 The splitting of a variable inputs into (.dbf)

files so as to reduce redundancy and increase
consistency.

 Give the idea of key – field (if any) Ideas

regarding code generation.

Software Analysis starts with a preliminary analysis and later on

switches to a detailed one. During the preliminary analysis the
Analyst takes a quick look at what is needed and whether the
cost benefits. Detailed analysis studies in depth all the cornered
factors, which builds and strengthens the software.

A system study is a step-by-step process used to identify and

then developed the software needed to control the processing
of specific application. System study is also known as SDLC
(Software Development Life Cycle).

Steps of SDLC are:

1. Problem Definition

2. Feasibility Study
 3. System Analysis

4. System Design

5. Implementation

6. Post Implementation

7. Maintenance

2.2 Introduction to Web.

Web consists of billions of clients and server connected through

wires and wireless networks. The web clients make requests to
web server. The web server receives the request, finds the
resources and return the response to the client. When a server
answers a request, it usually sends some type of content to the
client. The client uses web browser to send request to the
server. The server often sends response to the browser with a
set of instructions written in HTML(Hypertext Markup
Language). All browsers know how to display HTML page to the
client.

2.2.1 The introduction to web development

Web programming, also known as web development, is the creation of
dynamic web applications. Examples of web applications are social
networking sites like Facebook or e-commerce sites like Amazon.

There are two broad divisions of web development – front-end

development (also called client-side development) and back-end
development (also called server-side development).

Front-end development refers to constructing what a user sees when

they load a web application – the content, design and how you interact
with it. This is done with three codes – HTML, CSS and JavaScript.

HTML, short for Hyper Text Markup Language, is a special code for
‘marking up’ text in order to turn it into a web page. Every web page on
the net is written in HTML, and it will form the backbone of any web
application. CSS, short for Cascading Style Sheets, is a code for setting
style rules for the appearance of web pages. CSS handles the cosmetic
side of the web. Finally, JavaScript is a scripting language that’s widely
used to add functionality and interactivity to web pages.

Back-end development controls what goes on behind the scenes of a

web application. A back-end often uses a database to generate the
front-end. Without going into more detail, that’s really all there is to
web development.
 2.3 Features of WEB

Today, many people are using the Web to get the news, weather
forecasts, cooking recipes, medical diagnoses, book reviews and the
like. They are also using the Web to book flights, plan vacations, buy
and sell goods, express opinions, etc.

People had and fulfilled most of these needs of information

before the Web, and there are many other ways of sending and
receiving information. For decades, the major sources of information
were newspaper, radio and TV. How is the Web compared to these
media?

The major advantages that the Web holds relative to the other
media include:

Time: With radio and TV, those rare events that are important to
a broad group of viewers could be reported live or in minutes. More
typically, the delay is hours to a day. With newspapers, it takes closer to
a day, sometimes more, before the news is received by the readers.
With the Web and mobile phones, people are reporting on (e.g,
through Twitter, crowd-sourcing, etc.) and reading about events about
as the events occur. You get pictures, and information almost
instantaneously.
 Localization: Media such as newspapers, radio and TV report
information relevant to a relatively large geographical region: a district,
a country, etc. It is more difficult to find localized information, at the
community level. With the Web, a village, independent of its size, and
any community (even one that is separated geographically) can share
information relevant to their members and citizens wherever Web
access is possible.

Universality: Radio, TV, and newspapers usually cover a relatively

large geographic area, and they are typically available only to people
living in that area. It is difficult for people outside of the area to access
those media. The Web is universal, and available anywhere in the
World where people have access to it. This allows people today to, for
example, book a hotel and prepare vacations on the other side of the
planet.

Focus: Localization and scope of media mentioned above

concerned geographical aspects. This is also true for thematic aspects.
There are today millions of communities specialized on specific themes
(languages, hobby, nature,…). While there are thematic radio,
newspaper, TV, and magazines, their diffusion is geographically limited,
while these communities are spread over the Web. The Web, by
connecting people, enables those with shared interests to exchange
their resources independently of their respective locations.

Search. Mechanisms such as libraries, guides, reviews and word-

of-mouth, can help people to find information they seek in traditional
media. On the Web, search engines, as well as easier access to guides
and reviews, facilitate the quest for information. The volume of
information on the Web and the ability to assess the quality of
information are issues requiring further work.

Linking: A person can change channels on the radio or TV, or

pickup one newspaper and then move to another. On the Web, links
allow people to move easily from one Web page to related information
elsewhere on the same page, on the same site or one a different site
half-way around the world. The emergence of the Semantic Web
promises to extend this capability to linking data and ascribing greater
meaning to data and relationships across the Web.

2.4: WEB Architecture

The world wide web is a concept that was realized in the 1990s so
that people and machines could communicate with each other within a
certain space. It is used to exchange, distribute, and share information
in a network. At that time, the web consisted predominantly of static
websites based on HTML, in other words, hypertexts that can be
retrieved by a browser. Dynamic websites and distributed web services
were added later.

Types of web architectures

The internet is a medium that is constantly changing and

expanded by numerous developers, programmers and various
consortia such as the W3C. However, the architectures used can be
schematically distinguished.

a. Client-Server architecture

b. Three-tier architecture

c. Service-oriented architectures
3. Project Implementation
 4. Conclusion
At the end of the project, we get to learn web designing using basic

tools like HTML, CSS, JavaScript etc. We also learned about the new

web development platforms and frameworks like NodeJS, React,

Angular, Django, JavaLin etc.

We saw the growing need for web applications and websites, and we

are planning of making our careers in web designing/development.

This project has been an Eye-Opener for us, Thank you for all the

support and help.

Yours Sincerely

QASIR HASSAN
MAHMOUD ALHOUSEINI
MOHAMMAD BILAL ANSARI