ST.

XAVIER’S COLLEGE
Maitighar, Kathmandu

A Mini Project

“WEATHER APP”

Under the supervision of

“Ms. Jamuna Maharjan”

Lecturer

Department of Computer Science

Submitted By:
“Sangita Parki” (“022NEB469”)

Submitted To:
ST. XAVIER’S COLLEGE

Department of Computer Science

Maitighar, Kathmandu, Nepal

“2023 March 3”
 ACKNOWLEDGEMENT
I extend my immense pleasure in acknowledging my genuine sense of gratefulness to all
who assisted me to accomplish this project successfully.

Foremost, I would like to express profound gratitude to St. Xavier’s College, Department
of Computer Science for providing me the golden opportunity to carry out this annual
project work. Similarly, I am indebted to Rev. Father Principal Dr. Augustine Thomas,
S.J., Plus Two Coordinator respected Gehendra Bahadur Chand, Head of the Department
respected Ganesh Yogi, the respected Subject Coordinator, supervisor respected Jamuna
Maharjan, Mrigendra Pradhan and Jaya Sundar Shilpakar other subject teachers, the
entire department and all other for their persistent and sustained inspiration, supervision,
valued suggestion, and enormous support during the period.

I would like to thank and express my sincere appreciation to my friends, family, and well
wishers who willingly helped me with their abilities.

Thank you all,

Sangita Parki

Feb 2, 2024

ii | P a g e
 ABSTRACT
Web development has been an emerging industry since the 1990s but has been more
popular in recent decades. The expanding global economy and advancement of science and
technology have made this field more appealing and interesting. Web development also has
been a tempting career option for tech- enthusiasts and the new generation close to
technology and globalization. The web development industry has been serving the business
sector, governance, advertisement industry, and other various sectors. The development of
websites has been an essential part of businesses, establishments, and industries. This
project also presents weather information of different places with ease and easy interface to
anyone who needs it. The project includes the simple skills and use of HTML, CSS,
JavaScript, and PHP for the design and operation of the project.

iii | P a g e
 TABLE OF CONTENTS
1 INTRODUCTION .......................................................................................................... 1

2 PROBLEM STATEMENT. ........................................................................................... 2

3 OBJECTIVES ................................................................................................................ 3

4 METHODOLOGY ........................................................................................................4

4.1 User Interface ......................................................................................................... 4

4.1.1 HTML .............................................................................................................. 4

4.1.2 CSS .................................................................................................................. 4

4.2 Client-side Script ............................................................................................... 4

4.2.1 JavaScript. ...................................................................................................... 4

4.3 Server-side Scripting ............................................................................................... 5

4.3.1 PHP. ................................................................................................................ 5

4.4 Database ................................................................................................................. 5

4.4.1 MySQL ............................................................................................................ 5

4.5 Server Environment. ............................................................................................... 6

4.5.1 XAMPP ........................................................................................................... 6

5 SYSTEM DESIGN ..................................................................................................... 7

6 IMPLEMENTATION ................................................................................................. 9

6.1 Source Code ......................................................................................................... 9

6.1.1 SQL source codes.......................................................................................... 9

6.1.2 4 HTML AND PHP page for login page ............................................................. 10

6.1.4 HTML AND PHP page for main page..................................................12

6.1.5 CSS Code ....................................................................................................... 14

6.2 Screenshots. .........................................................................................................17

6.2.1 SQL ................................................................................................................ 17

iv | P a g e
6.2.2 Portals. ........................................................................................................... 18

7 CONCLUSION. ........................................................................................................... 19

8 LIMITATIONS AND FUTURE RECOMMENDATIONS ........................................ 20

9 References. ................................................................................................................... 21

TABLE OF FIGURES
Figure 1 CREATE TABLE for login credentials 17

Figure 2 CREATE TABLE for main information storage 17

Figure 3 Login page 18

Figure 4 main page 18

v|P age
LIST OF ABBREVIATIONS
HTML: Hypertext Markup Language

CSS: Cascading Stylesheet

PHP: Hypertext Preprocessor

JS: JavaScript

SQL: Structured Query Language

XAMPP: Cross-platform, Apache, MySQL, PHP, and Perl

vi | P a g e
1. INTRODUCTION

In today's fast-paced world, weather plays a pivotal role in our daily lives, influencing
everything from travel plans to outdoor activities and agricultural decisions. Access to
accurate and up-to-date weather information is essential for making informed choices and
mitigating potential risks associated with adverse weather conditions. However, traditional
methods of obtaining weather forecasts often involve navigating multiple sources, leading to
inefficiency and uncertainty.

The Weather App project seeks to address this challenge by providing users with a
centralized platform for accessing comprehensive weather data effortlessly. Designed as a
web-based application, the Weather App offers users the convenience of accessing real-time
weather information from any device with internet connectivity, eliminating the need for
installation and ensuring cross-platform compatibility.

By leveraging modern web technologies and integrating with reliable weather APIs, the
Weather App delivers personalized weather forecasts tailored to users' specified locations.
Whether planning a weekend getaway, scheduling outdoor events, or monitoring weather
patterns for agricultural purposes, users can rely on the Weather App to provide accurate and
detailed weather updates at their fingertips.

In the following sections, we will delve deeper into the objectives of the Weather App
project, outlining its key features and system design components. Through a combination of
intuitive user interface design, backend infrastructure, and external data integration, the
Weather App aims to revolutionize the way users access and interact with weather
information, empowering them to make informed decisions in their daily lives.

1|Page
2. PROBLEM STATEMENT

The primary issue addressed by the Weather App project is the inconvenience faced by users
in accessing reliable weather forecasts. Traditional methods of obtaining weather updates
often involve visiting multiple websites or relying on generic forecasts that may not be
tailored to specific locations. Additionally, mobile applications may require installation and
consume device storage.

2|Page
3. OBJECTIVES

 Develop a web-based weather application accessible across different devices without

requiring installation.
 Provide users with accurate and up-to-date weather information for any location
worldwide.
 Create an intuitive user interface for ease of navigation and interaction.
 Implement features such as search functionality, real-time updates, and data
visualization to enhance user experience.
 Ensure scalability and reliability of the application to accommodate increasing user
demand and maintain consistent performance.

3|Page
4. METHODOLOGY
The description of various major tools and components employed for the development of

4.1 User Interface

The user interface of the ticket management system would be designed using HTML and
CSS. The interface would include forms for creating and updating tickets, displaying the
status of tickets, and allowing users to search for tickets. The design of the interface would
focus on usability and accessibility, ensuring that users can easily navigate and interact with
the system.

4.1.1 HTML

The Hyper Text Markup Language is the standard markup language for documents designed
to be displayed in a web browser. HTML (Hyper Text Markup Language) is a standard
markup language used for creating and structuring content on the web. It is the foundation
upon which most websites are built. HTML allows developers to create web pages with text,
images, videos, and other multimedia elements, and to structure that content using a variety
of tags and attributes. HTML is a language that is both simple and powerful. It is a markup
language, meaning that it uses a series of tags and attributes to define the structure of content
on a webpage. These tags and attributes are used to describe the content of a web page, such
as headings, paragraphs, images, and links.

4.1.2 CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation
of markup languages such as HTML and XML. CSS defines how HTML elements should be
displayed on a web page, including aspects such as layout, colors, fonts, and animations. By
separating the presentation of a web page from its content, CSS allows developers to create
more flexible and responsive designs that can be easily updated and maintained. With CSS,
developers can apply a single style sheet to multiple web pages, making it faster and more
efficient to update the visual appearance of a website.

4.2 Client-side Scripting

JavaScript would be used for client-side scripting to enhance the user experience and add
interactivity to the ticket management system. JavaScript could be used to validate user
input, perform form validation, and dynamically update the user interface in response to user
actions.

4|Page
4.2.1 JavaScript

JavaScript is a high-level programming language used for creating interactive and dynamic
web content. It is often referred to as the "language of the web" because it is the most widely
used programming language for web development. JavaScript can be used for a wide range
of applications, from creating simple scripts that manipulate HTML elements to building
complex web applications with dynamic user interfaces and sophisticated data processing. It
is a versatile language that can be used both on the client side (in a web browser) and on the
server side (with tools like Node.js). JavaScript is used to add interactivity and dynamic
behavior to web pages. With JavaScript, developers can add features such as pop-up
windows, drop-down menus, image sliders, and much more. JavaScript can also be used to
validate user input, perform calculations, and interact with server-side APIs to retrieve and
display data.

4.3 Server-side Scripting

PHP would be used for server-side scripting to process user requests and interact with the
database. PHP scripts would be responsible for handling user input, updating ticket status,
and retrieving ticket information from the database.

4.3.1 PHP

The full form of PHP is "Hypertext Preprocessor". In the past, PHP stood for "Personal
Home Page", but the name was changed in 1997 when it evolved into a more robust
programming language for web development. PHP is primarily used for server-side scripting,
meaning that it runs on a web server rather than on a user's computer. When a user requests a
PHP page, the PHP code is executed on the server and the resulting HTML code is sent to the
user's browser. This allows PHP to dynamically generate web content based on user input or
other factors.

PHP can be used for a wide range of applications, from simple scripts that perform basic
tasks like form processing and email handling, to more complex applications like e-
commerce websites and content management systems. PHP is also often used in integration
with databases like MySQL to store and retrieve data. PHP is an open-source language,
meaning that it is free to use and distribute, and there are a large number of pre-built libraries
and frameworks available for PHP development.

4.4 Database

A MySQL database would be used to store all ticket data, including ticket details, user
information, and ticket status. The database would be designed to ensure data integrity,
optimize performance, and minimize data redundancy.

5|Page
4.4.1 MySQL

MySQL is a free, open-source relational database management system used for storing and
retrieving data. It is one of the most widely used databases in the world, powering many
websites and web applications. MySQL is a client-server database, meaning that it is
installed on a server and accessed by client applications. It supports a wide range of data
types, including numbers, strings, dates, and binary data. It also supports a variety of SQL
(Structured Query Language) statements for creating, updating, and querying data. MySQL is
often used in conjunction with other web development technologies such as PHP, HTML,
and CSS. When combined with PHP, for example, MySQL can be used to store user data and
other information collected from web forms. One of the strengths of MySQL is its scalability.
It can handle a large number of users and databases, making it suitable for high-traffic
websites and applications. It is also highly customizable, with a wide range of configuration
options available to optimize its performance for specific use cases.

4.5 Server Environment

The ticket management system would be deployed on a web server running Apache, PHP,
and MySQL. The server environment would be configured to ensure security, scalability, and
high availability.

4.5.1 XAMPP

XAMPP is a free and open-source software package that provides a complete web
development environment. It is widely used by developers to create and test web applications
on their local machines before deploying them to a live server. XAMPP stands for Cross-
Platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P). It includes all the components
needed to set up a local web server, including the Apache web server, the MySQL database
server, and the PHP and Perl scripting languages. XAMPP is available for Windows, Mac
OS, and Linux, making it a cross-platform solution for web development. It is easy to install
and configure, with a simple user interface that allows developers to start and stop the web
server and manage their databases. With XAMPP, developers can create and test their web
applications in a local environment, without the need for an internet connection or a live
server. This allows for faster development and testing, as well as greater control over the
development process.

6|Page
5. SYSTEM DESIGN

The Weather App project comprises several key components designed to facilitate the
retrieval and display of weather data:

 Frontend Interface: The user interacts with the application through a web browser.
The frontend interface is responsible for presenting weather information in a visually
appealing and intuitive manner. It includes features such as search input for
specifying location, display of current weather conditions, and additional details such
as temperature, wind speed, humidity, etc.

 Backend Server: The backend server handles the processing of user requests and
interacts with external APIs to fetch weather data. It manages user authentication,
session management, and database operations. Additionally, the server is responsible
for caching weather data to optimize performance and reduce external API calls.

 External APIs: The application integrates with external weather APIs to retrieve real-
time weather data for specified locations. APIs such as OpenWeatherMap provide
comprehensive weather information, including temperature, humidity, wind speed,
and forecasts. The Weather App interacts with these APIs through HTTP requests,
utilizing API keys for authentication.

 Database: A database system stores user credentials, session data, and cached weather
information. It ensures data persistence and enables efficient retrieval of previously
accessed weather data. SQL databases such as MySQL or PostgreSQL are commonly
used for this purpose, offering reliability, scalability, and data integrity features.

 Frontend Technologies: The frontend interface is built using HTML, CSS, and
JavaScript, with frameworks such as Bootstrap for responsive design and enhanced
user experience. JavaScript libraries like jQuery may be utilized for DOM
manipulation and asynchronous data retrieval.

 Backend Technologies: The backend server is implemented using server-side

scripting languages such as PHP, Python (Django/Flask), or Node.js. These languages
provide the necessary infrastructure for handling HTTP requests, processing form
submissions, and interacting with databases. Frameworks like Laravel (PHP) or
Express.js (Node.js) offer additional functionalities and streamline development.

7|Page
 Login.php

Main page.php

Weather Information

Figure System Design flow chart

8|Page
6. IMPLEMENTATION
6.1 Source Code:

6.1.1 SQL source codes:

The weather app requires a database to store and retrieve information about logged in users,
different location’s data.SQL databases are designed to store data in tables with predefined
fields and relationships between tables. This structure makes it easy to organize and manage
data and ensures that data is consistent and accurate. SQL also facilitates for update and
deletion of the data stored for effective database management.

6.1.1.1 CREATE database

In the SQL, a database named “weatherapp” is created:

Code:

CRETAE DATABASE weatherapp;

6.1.1.2 CREATE TABLE login

In the database named “weatherapp”, a table named “login” is created to insert, store and
operate data of login credentials.

Code:

CREATE TABLE login( username varchar(30), password varchar(30) );

6.1.1.3 CREATE TABLE entries

In the same database, next table named “weather_data” is created to insert data of weather
details.

Code:

CREATE TABLE weather_data

city_name varchar(255),

temperature float,

cloud_description varchar(255),

9|Page
 wind_speed float,

pressure float,

humidity float,

created_at timestamp);

6.1.2 HTML and PHP page for login page

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>LOGIN PAGE</h1>

<form id="form" action="" method="POST">

<label for="username">USERNAME </label>

<input type="text" name="username" id="username" required>

<br>

<label for="password">PASSWORD</label>

<input type="password" name="password" id="password" required>

<br><br>

<input type="submit" value="LOGIN" id="button">

<button name="changepassword" id="button"> CHANGE PASSWORD </button> </form>

</body>

</html>

10 | P a g e
<?php

session_start();

$host="localhost";

$user="root";

$password="";

$dbname="nebproject";

$conn = mysqli_connect($host, $user, $password, $dbname);

if (!$conn) {

die('Connection failed: ' . mysqli_connect_error());

if(isset($_POST['changepassword'])) {

header("Location: changepassword.php");

exit();

if(isset($_POST['username']) && isset($_POST['password'])) {

$username = $_POST['username'];

$password = $_POST['password'];

$sql= "SELECT * FROM login WHERE username = '$username'"; $result =

mysqli_query($conn, $sql);

$row = mysqli_fetch_assoc($result);

if(!$row){

$_SESSION['error'] = "Invalid username or password";

header("Location: login.php");

exit();

if($row && $password == $row['password']) {

header("Location: TICKET.php");

11 | P a g e
exit();

} else {

$_SESSION['error'] = "Invalid username or password";

echo "<center><i>"."INVALID USERNAME OR PASSWORD" ."</center></i>"; exit();

?>

6.1.3 HTML and PHP page for weather information

<?php

session_start();

// Check if user is logged in, if not redirect to login page

if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {

header("Location: login.html");

exit;

?>

<!DOCTYPE html>

<html>

<head>

<title>Weather App</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

12 | P a g e
 <div class="container">

<div class="weather">

<form action="#" method="get">

<input type="text" id="city-name" placeholder="Enter city name" name="place"/>

<input type="submit" value="Submit">

</form>

<?php

if(isset($_GET['place'])){

$servername = "localhost";

$username = "root";

$password = "mysql";

$dbname = "weatherapp";

// Create connection

$conn = new mysqli($servername, $username, $password);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Escape user input to avoid SQL injection

$cityName = mysqli_real_escape_string($conn, $_GET['place']);

// Fetch weather data from API

13 | P a g e
 $apiKey = 'f640f63f1035aa1fcf46be12edd2c122';

$url = "https://api.openweathermap.org/data/2.5/weather?q=$cityName&appid=$apiKey";

$response = file_get_contents($url);

$data = json_decode($response, true);

// Insert weather data into database

$sql = "INSERT INTO weather_data (city_name, temperature, cloud_description,

wind_speed, pressure, humidity) VALUES ('$cityName', '{$data['main']['temp']}',
'{$data['weather'][0]['description']}', '{$data['wind']['speed']}', '{$data['main']['pressure']}',
'{$data['main']['humidity']}')";

if ($conn->query($sql) === TRUE) {

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

// Display weather data

$weatherData = "

<p>City: $cityName</p>

<p>Temperature: {$data['main']['temp']} K</p>

<p>Cloud description: {$data['weather'][0]['description']}</p>

<p>Wind speed: {$data['wind']['speed']} mph</p>

<p>Pressure: {$data['main']['pressure']} hPa</p>

<p>Humidity: {$data['main']['humidity']} %</p>

";

14 | P a g e
 echo "<div id='weather-data'>$weatherData</div>";

$conn->close();

?>

</div>

</div>

</body>

</html>

6.1.4 CSS Code

The CSS code is designed to provide extra styles and decorations for given pages.

body {

display: flex;

justify-content: center;

align-items: center;

background-color: #f3f3f3;

font-family: Arial, sans-serif;

.container {

background-color: #fff;

15 | P a g e
 border-radius: 10px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

width: 400px;

padding: 2em;

text-align: center;

.weather {

margin-bottom: 1em;

input[type="text"] {

width: 100%;

padding: 0.5em;

border: 1px solid #ccc;

border-radius: 4px;

outline: none;

font-size: 14px;

input[type="submit"] {

background-color: #3498db;

border: none;

color: #fff;

padding: 0.5em 1em;

16 | P a g e
 border-radius: 4px;

cursor: pointer;

font-size: 14px;

input[type="submit"]:hover {

background-color: #2980b9;

#weather-data {

text-align: left;

p{

margin-bottom: 0.5em;

font-size: 14px;

.error-message {

color: #ff0000;

font-size: 14px;

margin-bottom: 1em;

17 | P a g e
6.2 Screenshots:

6.2.1 SQL:

Figure 1 CREATE TABLE for login credentials

Figure 2 CREATE TABLE for main information storage

6.2.1 Portals

6.2.1.1 Login page

Figure 3 Login page

18 | P a g e
6.2.1.2 Main page

Figure 4 main page

19 | P a g e
7. CONCLUSION

The Weather App project aims to address the need for accessible and reliable weather
information through a user-friendly web application. By leveraging modern web technologies
and integrating with external APIs, the application provides users with real-time weather
updates for any location worldwide. With its intuitive interface and comprehensive features,
the Weather App enhances user experience and facilitates informed decision-making based
on accurate weather forecasts.

20 | P a g e
8. LIMITATIONS AND FUTURE RECOMMENDATIONS

The limitations of the project are:

i. The Weather App is dependent on external weather APIs for fetching real-time
weather data. Any downtime or changes in the API structure may affect the
functionality of the application.
ii. While most weather APIs offer global coverage, there may be regions or remote
areas where weather data is not as accurate or comprehensive. Users in such areas
may experience limitations in accessing reliable weather forecasts.
iii. Although the Weather App strives to provide accurate weather information,
occasional discrepancies or inaccuracies in data obtained from external sources
may occur, impacting the reliability of forecasts.
iv. The current implementation of user authentication in the Weather App is
simplistic and may not offer robust security features.
v. As the user base of the Weather App grows, scalability issues may arise,
particularly in handling a large volume of concurrent user requests.

The future recommendations for the project are:

i. Continuously improving the user interface and incorporating user feedback can
enhance the overall user experience of the Weather App.
ii. Introducing support for multiple languages and region-specific weather data can
make the Weather App more accessible to users worldwide.
iii. Integrating advanced forecasting techniques such as machine learning algorithms
and predictive analytics can enhance the accuracy and reliability of weather
forecasts.
iv. While the Weather App is currently web-based, developing native mobile
applications for iOS and Android platforms can extend its reach and accessibility.
v. Establishing a community forum or feedback mechanism where users can
contribute weather observations, report inaccuracies, and share insights can foster
community engagement and improve the quality of weather data.

21 | P a g e
9 References
[1] A BIT OF COMPUTER SCIENCE (Grade:XI),Karudhara Publication Pvt. Ltd,2078/79

[2] ESSENTIALS OF COMPUTER SCIENCE Grade XII, Asmita Books Publisher &
Distributor, 2080

22 | P a g e