Monu Synosis

BN COLLEGE OF ENGINEERING&TECHNOLOGY
(AffIliated to AKTU University)

BKT SITAPUR ROAD LUCKNOW- 226201
Department of Computer Science and Engineering
(SESSION-2023-2024)
PROJECT REPORT
ON
Survey Form
Submitted By:
Submitted To:
Yadav Monu Haridwar Ms. Neha Goyal

1
INTERNSHIP REPORT
A report submitted in partial fulfillment of the requirements for the Award of Degree of
BACHELOR OF TECHNOLOGY
In
Computer Science & Engineering
By
Ashmit Kushwaha
Under Supervision of
Code Alpha
Duration01/08/2023 to 30/08/2023
& BN COLLEGE OF ENGINEERING TECHNOLOGY

Approved by AICTE ,
Lucknow, Uttar
Pradesh
2
Department of Computer Science &
Engineering
BN COLLEGE OF
ENGINEERING&TECHNOLOGY
BKT SITAPUR ROAD LUCKNOW- 226201
Certificate
This is to certify that the “Internship report”submitted by Yadav Monu Haridwar
is work done by him and submitted during 2023
– 2024 academic year, in partial fulfillment of the requirements for the award of the
degree of BACHELOR OF TECHNOLOGY in COMPUTER SCIENCE AND
ENGINEERING, at Code Alpha .
Colleger Internship Coordinator Department Internship Coordinator

Ms. Neha Goyal Mr. Sanjay Kumar Singh
(Assistant Prof. CSE)
3
PREFACE
 The manual handling of the record is time consuming and highly prone to error.
 This project includes listing schedules of trains, flieghts ,total seats reserved for a particular package,
registration of tourists, hotels, guides, Arrival & departure transfers, Hotel bookings, Transport by road, train &
domestic airlines ,Sightseeing with guide, Monument entrances, Meals if requested.
 Updating and Modification system helps to add or delete record and modify the existing record set. Based on
the nature of updating it provides appropriate access to the user.
 Performing these essential activities manually can be troublesome and time consuming at some instance. In the
Proposed system, all these system activities can be performed quickly and efficiently.
4
Certificate
ACKNOWLEDGEMENT
Apart from my effort, the success of the project depends largely on the encouragement and guidelines
of many others. We take this opportunity to express our gratitude to the people who express have been
instrumental in the successful completion of this project.
I would like to express my deep and sincere gratitude to my supervisor Prof. Vinay Kumar Sir (HODof
Computer Science Department), who gave me his full support and encouraged me to work in an
innovative and challenging project for Educational field. His wide knowledge and logical thinking
gave me right direction all the time.
I am deeply grateful my project coordinator for his help and support provided at every step of the
project. Last but not the Least.
Yadav Monu Haridwar
6
DECLARATION
This is to certify that the project report entitled “ Survey Form” is done by me is an authentic work
carried out for the partial fulfillment of the requirements for the award of the B.tech in “(Computer
Science and Engineering )” under the guidance of Prof Vinay Kumar (HOD).
7
DATE DAY NAME OF THE TOPIC/MODULE COMPLETED
1/08/23 Tuesday Introduction of installation and setup
2/08/23 Wednesda Features of HTML
1st WEEK
y
03/08/23 Thursday Introduction of HTML
04/08/23 Friday Introduction of console
05/08/23 Saturday Continuing console
06/08/23 Sunday Understanding different types of Tags and MetaTags

08/08/23 Tuesday Introduction CSS
09/08/23 Wednesda Understanding Class and Id’s
y
2nd WEEK
10/08/23 Thursday Continuing Class and Id’s

11/08/23 Friday Introduction to Variable
12/08/23 Saturday Continuing Variable & Fonts
13/08/23 Sunday Introduction to font libraries

15/08/23 Tuesday Features of Java Script
16/08/23 Wednesday Introduction of Java Script
17/08/23 Thursday Understanding what is Variables, DataType and classes
and object functions
3rd WEEK
18/08/23 Friday Understanding DOM and DDOM
19/08/23 Saturday Introduction to Objects and Array

20/08/23 Sunay Function call

22/08/23 Tuesday Design Survey Form
23/08/23 Wednesday Design Home page
4th WEEK
24/08/23 Thursday Design Contact Page

25/08/23 Friday Design Adventures
26/08/23 Saturday Design Packages
27/08/23 Sundaay Connect all pages in single unit and Task
Completed
09/09/23 Saturday Certificate Issued
8
INDEX
Page
1. Introduction.................................................................................................07-09
Overview of Application .......................................................................................................07-07
Project Introduction .................................................................................................................07-07
Objectives...............................................................................................................................08-08
Security..................................................................................................................................09-09
2. System Analysis ..............................................................................................09-18

Objective................................................................................................................................09-10
Preliminary Investigation.......................................................................................................10-12
System Analysis ...................................................................................................................12-12
System Design .......................................................................................................................12-12
Coding ...................................................................................................................................12-12
Testing ..................................................................................................................................12-12
Implementation......................................................................................................................12-13
Maintenance...........................................................................................................................13-13
Process Description ..............................................................................................................13-14
Project Model Used ...............................................................................................................14-15
ER-Diagram...........................................................................................................................15-16
Data Flow Diagram................................................................................................................16-18
3. Software Hardware Requirement Specification........................................19-20

Hardware Requirement..........................................................................................................19-19
Server side Software Requirement ......................................................................................19-19
Client side Software Requirement.........................................................................................19-20
Support Maintenance.............................................................................................................20-20
4. System Design Approach .............................................................................21-21
Top-Down Designing ..........................................................................................................20-20
9
Bottom –Up Designing..........................................................................................................21-21
Following Approach .............................................................................................................21-21
5. Configuration Design (manifest.xml)…........................................................21-36

6. Data Modeling...............................................................................................36-37
6.1. List of Tables.......................................................................................................................36-36

6.2. Structure of Tables…..........................................................................................................36-37
7. Testing............................................................................................................38-42
8. Input-Output Forms.....................................................................................43-61
8.1. Project Screenshot.................................................................................................................43-43
8.2. Project Coding (XML & Java)….........................................................................................44-61
9. Future Scope..................................................................................................61-62
10. Conclusion.....................................................................................................62-62
LIST OF TABLES
Page
1.............................................................................................. Item
Table.........................................................................................................................36
2.............................................................................................Content
Table........................................................................................................................37
3.............................................................................................. Screenshot
of SQLite Database.................................................................................................37
Technology Used:
 HTML - 5
 CSS
 Java Script
10
1. INTROUCTION
Overview of Application
TSurvery Form helps businesses and manufacturers define what is needed, how much is needed, and when
materials are
needed and works backward from a production plan for finished goods.
Also, you can add some categories as you wish. With writing notes you can simply attach files and other pictures
andstuff.
PROJECT INTRODUCTION:--
TSurery Form helps businesses and manufacturers define what is needed, how much is needed, and when
materials are needed and works backward from a production plan for finished goods.
11
Objective
 It is time saving and energy saving.

 Person can easily login to site while sitting on home.
 Person can buy more than one product without going anywhere.
 The transactions are executed in off-line mode, hence on-line data for Shopping, Internet
capture and modification is not possible.
 Manage the information of Internet
 Shows the information and description of the Shopping.
 To increase efficiency of managing the Shopping
 It deals with monitoring the information and transactions of Bills.
PROBLEM DEFINITION
In this section we shall discuss the limitation and drawback of the existing system that forced us to
take up this project. Really that work was very typical to manage the daily errors free records and
adding or removing any node from server. This problem produces a need to change the existing
system. Some of these shortcomings are being discussed below: -
 Low Functionality
With the existing system, the biggest problem was the low functionality. The problem faced
hampered the work. For small task like adding any new node to server or deleting a node or keeping
daily record we have to appoint minimum two or three employee.
 Erroneous Input and Output

In the existing system, humans performed all the tasks. As in the human tendency, error is also a
possibility. Therefore, the inputs entered by the person who is working in the Company, in the
registers may not be absolutely foolproof and may be erroneous. As a result of wrong input, the
output reports etc. Will also be wrong which would in turn affect the performance.
12
 Security-
Security concerns were also one of the motives of the Company for the need of software. In the
registers, the data is not secure as anybody can tamper with the data written in the registers. While in
this software, just a password makes it absolutely secure from the reach of unauthorized persons.
 Data Redundancy
In the case of manual system, the registers are maintained in which, a lot of data is written.
 Processing Speed
In manual system maintaining a register and performing the necessary calculation has proved to be a
troublesome job, which takes a lot of time and may affect the performance of the Company. But
with this software we can have all the tasks performed in a fraction of second by a single click thus
making the troublesome job much easier.
 Manual Errors
When a number of tough tasks are prepared by the humans like preparation of reports, performing
long calculation then some human error are obvious due to a number of factors like mental strain,
tiredness etc. But as we all know that computer never get tired irrespective of the amount of work it
has to do. So this software can nullify the probability of manual error that improve the performance.
 Complexity in Work
In manual system whenever a record is to be updated or to be deleted a lot of cutting and overwriting
needs to be done on the registers that are concerned that are deleted or updated record, which makes
the work very complex.
2. SYSTEM ANALYSIS
Objective:
13
It is a process of collecting and interpreting facts, identifying the problems, and decomposition of a
system into its components.
System analysis is conducted for the purpose of studying a system or its parts in order to identify its
objectives. It is a problem solving technique that improves the system and ensures that all the
components of the system work efficiently to accomplish their purpose.
Analysis specifies what the system should do.
Preliminary Investigation: -
This is the first phase of the system development life cycle. In this phase we tend to find out the needs
of the client –what exactly does the client want? Before the development of any system the important
point is to know the needs, objectives and scope of the system.
 Feasibility Study: -
Feasibility study is the step of preliminary study of the system development life cycle. Things are
always easy at the beginning in any software process. In fact nothing is in feasible with unlimited
time and resources. But it is not the fact. So, practically we have to do in limited resources in a
restricted time margin. So for the system to be feasible, following points we have to consider.
The feasibility study is conducted to check whether the candidate system is feasible. The system
which is selected to be the best against the criteria is there after designed and developed. The
feasibility study takes in to consideration, the risks involved in the project development beforehand.
Therefore in this phase we have to do feasibility study which is the test of the website according to
itswork ability, impact on the organization, ability to meet user need and effective use of resources.
We do the feasibility study for website to analyze the risks, costs and benefits relating to economics,
technology and user organization. There are several types of feasibility depending on the aspect they
cover. Import of these includes:
14
Technical Feasibility:
This is an important outcome of preliminary investigation. It comprise of following questions:-
 Can the work of project bed one with the current equipment, existing software and available
man power resource?
 If Technology is required what are the possibilities that it can be developed?
Economic Feasibility:
It deals with question related to the economy. It comprise of the following questions:-
 Are there sufficient benefits in creating the system to make the cost acceptable?
 Are the costs of not creating the system so great that the project must be undertaken?
Legal Feasibility:
It deals with the question related to the legal issues. It comprise of the following questions: -
 Contract Signing
 Software License agreement
 Issues related to cyber laws.
 Legal issues relating to the man power contract.
Operational Feasibility:
The operational feasibility consists of the following activity:
 Will the system be useful if it is developed &implemented?
 Will there be resistance from employee?
Social & Behavioral Feasibility:

It deals with the various issues related to the human behavior like: -
 Whether the user be able to adapt a new change or not?
 Whether the ambiance we are providing suits the user or not?
 Request Approval: -
15
Request approval is the preliminary investigation phase of system development lifecycle.Request
approval is the phase in which all the requirements which would be provide in the system are stated.
The request approval is a sort of agreement between the client and the company which is building
this software.
Both the parties should be mutually agreed on the statedrequirements.
System Analysis:-
System analysis is the phase following the phase of the request approval. In this phase we tend to
analyze the overall system which we have to build. System analysis is the crucial part in SDLC.
System Design:-
System design means the designing of the system. The System can be done in either of the following
two ways:-
 Logical SystemDesign
 Physical SystemDesign
Coding:-
Coding is the phase in which a developer codes using any programming languages. Coding
constitutes only 20% of the whole project and which is easier to write. The coding work is also done
in the teams; development of the system is usually done under the modular programming style,
whichcan be either top-down approach or bottom-up approach.
Testing:-
Testing is the phase in which the system that has been developed is tested. Testing comprises of the
60% of the overall development of the system. Testing of the system is important because testing
aims to uncover the different errors in the system. There are various different testing techniques that
can be used for the testing of the system.
Implementation:-
Implementation process involved the installation of software on user’s side. Implementation process
actually depends on type of a system & various. Opting for suitable conversion approach is a step
implementation. The conversion processes are as follows:-
 ParallelConversion
16
 Direct ConversionApproach
 Pilot ConversionApproach
 Phase In ConversionApproach
Maintenance: -
Merely developing the system is not important but also maintenance is important. The company that
has built the system provides for some time free of cost maintenance to the client and after that period
it is usually a paid service.
Process Description
Gantt charts mainly used to allocate resources to activities. The resources allocated to activities
include staff, hardware, and software. Gantt charts (named after its developer Henry Gantt) are useful
for resource planning. A Gantt chart is special type of bar chart where each bar represents an activity.
The bars are drawn along a timeline. The length of each bar is proportional to the duration of the time
planned for the corresponding activity.
Gantt chart is a project scheduling technique. Progress can be represented easily in a Gantt chart, by
coloring each milestone when completed. The project will start in the month of January and end
after
17
4 months at the beginning of April.
PROJECT MODEL USED
Iterative Enhancement Model
 This model has the same phases as the waterfall model, but with fewer restrictions. Generally the
phases occur in the same order as in the waterfall model, but they may be conducted in several
cycles.
 Useable product is released at the end of the each cycle, with each release providing additional
functionality. Customers and developers specify as many requirements as possible and prepare a SRS
document. Developers and customers then prioritize these requirements. Developers implement the
specified requirements in one or more cycles of design, implementation and test based on the
definedpriorities.
The procedure itself consists of the initialization step, the iteration step, and the Project Control List.
The initialization step creates a base version of the system. The goal for this initial implementation is
to create a product to which the user can react. It should offer a sampling of the key aspects of the
problem and provide a solution that is simple enough to understand and implement easily. To guide
the iteration process, a project control list is created that contains a record of all tasks that need to be
performed. It includes such items as new features to be implemented and areas of redesign of the
existing solution. The control list is constantly being revised as a result of the analysisphase.
The iteration involves the redesign and implementation of iteration is to be simple, straightforward,
and modular, supporting redesign at that stage or as a task added to the project control list. The
level of design detail is not dictated by the iterative approach. In a light-weight iterative project the
code may represent the major source of documentationof the system; however, in a critical
iterative project a formal Software Design Documentmay be used. The analysis of iteration is
based upon user feedback, and the program analysis facilities available. It involves analysis of the
structure, modularity, usability, reliability, efficiency, & achievement of goals. The project control
list is modified in light of the analysis results.
PHASES:
Incremental development slices the system functionality into increments (portions). In each
increment, a slice of functionality is delivered through cross- discipline work, from the requirements
18
to the deployment. The unified process groups increments/iterations into phases: inception,
elaboration, construction, and transition.
 Inception identifies project scope, requirements (functional and non-functional) and risks at a high
level but in enough detail that work can be estimated.
 Elaboration delivers a working architecture that mitigates the top risks and fulfills the non-
functional requirements.
 Construction incrementally fills-in the architecture with production-ready code produced from
analysis, design, implementation, and testing of the functional requirements.
Transition delivers the system into the production operating environment.
ER-Diagram
Introduction: -
In software engineering, an entity-relationship model (ERM) is an abstract and conceptual
representation of data. Entity-relationship modeling is a database modelingmethod, used to produce a
type of conceptual schema or semantic data model of a system, often a relational database, and its
requirements in a top-down fashion. Diagrams created by this process are called entity-relationship
diagrams, ER diagrams, or ERDs. ER Diagrams depicts relationship between data objects. The
19
attribute of each data objects noted in the entity-relationship diagram can be described using a data
object description. Entity relationship diagram is very basic, conceptual model of data and it is
fundamental to the physical database design. This analysis is then used to organize data as relations,
normalizing relations, and obtaining a Relationaldatabase.
The entity-relationship model for data uses three features to describe data. Theseare:
1. Entities which specify distinct real-world items in anapplication.
2. Relationship, which connect entities and represent meaningful dependencies betweenthem.
3. Attributes which specify properties of entities &relationships.
20
Introduction:-
DFD is an acronym for the word Data Flow Diagram. DFD is a pictorial representation of the system.
DFD is a graphical representation of the flow of data through the information system. DFD are also
used for the visualization of data processing (structured design). ADFD provides no information about
the timings of the process, or about whether process will operate in parallel or sequence. DFD is an
important technique for modeling system’s high-level detail by showing how input data is transformed
to output results through a sequence of functional transformations. DFD reveal relationships among
between the various components in a program or system. The strength of DFD lies in the fact that
using few symbols we are able to express program design in an easier manner. ADFD can be used to
represent the following:-
External Entity sending and receiving data. Process that change the data.
Flow of data within the system. Data Storage locations.
Uses of DFD:-
The main uses of data flow diagrams are as follows: -
DFD is a method of choice for representation of showing of information through a system because of
the following reasons:-
DFDs are easier to understand by technical and non-technical audiences.

DFDs can provide a high level system overview, complete with boundaries and connections to other
system.
DFDs can provide a detailed representation of system components.
0. Level DFD
21
title
reminder
item
Data item
1. Level DFD:
Notes
22
3. SOFTWARE HARWARE REQUIREMENT SPECIFICATION
A requirements specification for a software system is a complete description of the behavior of a
system to be developed and it includes a set of use cases that describe all the interactions the users will
have with the software. In addition to use cases, the SRS also contains non-functional requirements.
Non-functional requirements are requirements which impose constraints on the design or

implementation (such as performance engineering requirements, quality standards, or design
constraints).Requirements are a sub-field of software engineering that deals with the elicitation,
analysis, specification, and validation of requirements for software.
The software requirement specification document enlists all necessary requirements for project
development. To derive the requirements we need to have clear and thorough understanding of the
products to be developed. This is prepared after detailed communications with project team and the
customer.
Hardware Requirement:
 Microsoft Windows 7/8/10 (32 or 64 bit)
 2 GB RAM minimum, 8 GB recommended and 32 Gb available
2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE + 1.5
for Android SDK and emulator system image)
 1280 x 800 minimum screen resolution
 Graphics - none (Integrated graphics 64MB)
 256GB SSD (the main reason for a laptop to run as fast as light)
Server side Software Requirement:

 Java Development Kit (JDK) 8
 Android Studio | 2020.3.1
Client side Hardware requirements:

 A fast speed USB cable
 Android Phone for Testing (Version 11 / 10 / 9)
23
To develop this project the various Software resources are used:
o Front End : HTML
o Back End : Local Storage
o Code-Behind Language : Java Script
o IDE : Visual Studio Code
SUPPORT AND MAINTENANCE:-

One year free support for rectifying system bugs including front end and beck end will be provided.
During warranty period Software Engineers will be responsible for removing bugs and improving it.
After one year support can be extended @ 20% of the total product deployment cost.
4. SYSTEM DESIGN APPROACH
Top – Down designing:

The top - down designing approach started with major components of the system. It is a stepwise
refinement which starts from an abstract design, in each steps the design is refined two or more
concrete levels until we reach a level where no – more refinement is possible or not needed.
24
Bottom – Up designing:
In bottom – up designing the most basic and primitive components are designed first, and we proceed
to higher level components. We work with layers of abstractions and abstraction are implemented
untilthe stage is reached where the operations supported by the layer is complete.
Following Approach:
In this project we are following Mixed Approach i.e. A combination of top – down and bottom – up.
We are developing some of the components using top – down designing approach (e.g. the WebPages)
and the some components in bottom – up designing approach (e.g. the middle tier classes).
5. CONFIGURATION DESIGN
Paste screenshot of Model
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tour & Travel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
</head>
<body>
<header class="header">
<a href="#" class="logo"><i class="fas fa-hiking"></i> travel.com</a>
<nav class="navbar">
<div id="nav-close" class="fas fa-times"></div>
<a href="#home">home</a>
<a href="#category">Adventures</a>
<a href="#packages">packages</a>
<a href="#contact">contact</a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-bars"></div>
<div id="search-btn" class="fas fa-search"></div>
</div>
</header>
<div class="search-form">
<div id="close-search" class="fas fa-times"></div>
<form action="">
<input type="search" name="" placeholder="search here..." id="search-box">
<label for="search-box" class="fas fa-search"></label>
</form>
</div>
<section class="home" id="home">
<div class="wrapper">
<div class="box" style="background: url(images/home1.jpg) no-repeat;">

<div class="content">
<span>never stop</span>
<h3>exploring</h3>
<p>Travel.com offers best deals on India tour packages.</p>
<a href="#category" class="btn">get started</a>
</div>
</div>
</div>
</section>

26
<section class="category" id="category">
<h1 class="heading">Adventure Idea!</h1>
<div class="box-container">
<div class="box">
<img src="images/category-1.jpg" alt="BungeeJumpingImg">
<h3>bungee jump</h3>
<p>Bungee jumping is an activity that involves a person jumping from a great height while
connected to a large elastic cord.</p>
<a href="https://en.wikipedia.org/wiki/Bungee_jumping" class="btn">read more</a>
</div>
<div class="box">
<img src="images/category-2.jpg" alt="ZipLinesImg">
<h3>zip lines</h3>
<p>A zip-line, zip line, zip-wire, or flying fox is a pulley suspended on a cable, usually made
of stainless steel, mounted on a slope.</p>
<a href="https://en.wikipedia.org/wiki/Zip_line" class="btn">read more</a>
</div>
<div class="box">
<img src="images/category-3.jpg" alt="canoeingImg">
<h3>Canoeing</h3>
<p>Canoeing is an activity which involves paddling a canoe with a single-bladed paddle.</p>
<a href="https://en.wikipedia.org/wiki/Canoeing" class="btn">read more</a>
</div>
</div>
</section>
<section class="packages" id="packages">
<h1 class="heading">popular packages</h1>
<div class="box">
<div class="image">
<img src="images/img-1.jpg" alt="">
</div>
<h3>Manali Package</h3>
<p>Kullu Manali Shimla has always been a very popular destination for the old, young travelers as
well as newly married couples who look for cheapest Manali tour packages & Manali Honeymoon
Packages to experience the perfect solitude and calmness at its best.</p>
<div class="price">Rs 5,999 - Rs 8,999</div>
<a href="#contact" class="btn">explore now</a>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>Goa Package</h3>
27
<p>The most popular beach of Goa, Baga is located close to Calangute beach, around 30
Km North of Panaji. Baga is popular for its nightlife with some very famous clubs
such
as Brittos, Titos and Mambos.There is also a range of water sports that you can try
your hands at.</p>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>Delhi Package</h3>
<p>Boasting cultural diversity and rich heritage, Delhi is home to several temples, t
ombs, gardens, forts, museums, markets and more. We take you to some of the best
spots in the city. Pick the best packages from here and enjoy the tour of Delhi with
guide.</p>
</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>Jaipur Package</h3>
<p>We organise Jaipur & Rajasthan tours that offer incredible attractions li
ke Forts and Palaces, Deserts, Traditional Villages, colorful cattle fairs,
sacred places, camel safaris, beautiful lakes, hill stations and the people. </p>
<div class="price">Rs 11,999 - Rs15,999</div>
<p>We organise Jaipur & Rajasthan tours that offer incredible attractions like Forts
and Palaces, Deserts, Traditional Villages, colorful cattle fairs, sacred places, ca
mel safaris, beautiful lakes, hill stations and the people. </p>

</div>
</div>
<div class="box">
<div class="image">
</div>
<h3>Kerala Package</h3>
<p>A trip to Kerala is always an experience through greenery to the hills and its
climate. Browse through our hand-picked Kerala tour packages prepared for you. O
ur experts are also available to prepare customised tourism packages</p>
</div>
28
</div>
<div class="box">
<div class="image">
</div>
<h3>Darjeeling Package</h3>
<p>A trip to Darjeeling will include a ride on the famous Himalayan Railway, a vis
it to Tiger Hill, or a tour of the stunning landscaped gardens here. Activities like
hiking and boating. Do not miss out on a trip to Darjeeling Is famous Mall Road</p>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="wrapper1">
<div class="title1">
<h1>Contact us</h1>
</div>
<div class="contact-form">
<form method = "post" action = "contact_us.php">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" name="name">
<input type="email" class="input" placeholder="Email Address"

name="email" pattern=".+@gmail\.com">
<input type="phone" class="input" placeholder="Phone" name="phone">
<input type="text" class="input" placeholder="Subject" name="subject">
</div>
<div class="msg">
<textarea placeholder="Message" name="message"></textarea> <br>
<div class="btn1"><button type="submit">send <i class="uil uil-message"></i></div>
</div>
</form>
</div>
</div>
</section>
<section class="footer">
<div class="box">
<h3>Quick links</h3>
<a href="#home">home</a>
<a href="#packages">packages</a>
<a href="#query">query</a>
</div>
<div class="box">
29
<h3>extra links</h3>
<a href="#contact">ask questions</a>
<a href="#">terms of use</a>
<a href="#">privacy policy</a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="tel:+918115585868"> <i class="fas fa-phone"></i> +91 8115585868 </a>
<a href="mailto: yashsrivastav8115@gmail.com"> <i class="fas fa-env
elope"></i> yashsrivastav8115@gmail.com </a>
<a href="#"> <i class="fas fa-map"></i> Lucknow, india - 226010 </a>

</div>
<div class="box">
<h3>follow us</h3>
<a href="https://www.facebook.com/yash.srivastav0"> <i class="fab fa-facebook-f"></i
> facebook </a>
<a href="https://www.instagram.com/yash_srivastav_"> <i class="fab fa-instagram"></i>
instagram </a>
<a href="https://www.linkedin.com/in/yash-srivastav/"> <i class="fab fa-linkedin"></i>
linkedin </a>
<a href="https://github.com/Yash-srivastav16"> <i class="fab fa-github"></i> github </a>
</div>
</div>
<div class="credit">created by <span>yash srivastav</span> | all rights reserved!</div>
</section>

<script src="js/script.js"></script>
</body>
</html> </div>
<div className=" bg-white py-3 rounded-xl">
<ReactApexChart
options={stacked_barchart.options}
series={stacked_barchart.series}
type="bar"
height={490}
/>
</div>
<ReactApexChart
options={scatter_chart.options}
series={scatter_chart.series}
type="scatter"
height={500}
/>
</div>

<ReactApexChart
options={heatmap_chart.options}
series={heatmap_chart.series}
type="heatmap"
height={450}
/>
</div>
30
<ReactApexChart
options={limit_min_max_chart.options}
series={limit_min_max_chart.series}
type="boxPlot"
height={500}
/>
</div>
<div className="flex bg-white py-3 rounded-xl">

<ReactApexChart
options={donut_chart.options}
series={donut_chart.series}
type="donut"
width={500}
/>
<div className="h-full flex flex-col justify-center items-center ">
{donut_chart_production?.categories &&
donut_chart_production?.categories?.map((i) => {
return (
<p>
<span className="flex items-center gap-1">
<AiOutlineRightCircle color="blue" />
<span>{i}</span>
</span>
</p>
);
})}
</div>
</div>
<div className="bg-white py-3 rounded-xl flex">
<ReactApexChart
options={donut_chart_resources.options}
series={donut_chart_resources.series}
type="donut"
width={500}
/>
<div className="h-full flex flex-col justify-center items-center ">

{dont_chart_resources?.Resources &&
dont_chart_resources?.Resources?.map((i) =>
{ return (
<p>
<span className="flex items-center gap-1">
<AiOutlineRightCircle color="blue" />
<span>{i}</span>
</span>
</p>
);
})}
</div>
</div>
<div className=" bg-white py-3 rounded-xl ">
<p className="px-5">Area Chart with Profit Over Time:</p>
<ReactApexChart
options={area_chart.options}
series={area_chart.series}
type="area"
31
height={350}
/>
</div>
<div className=" bg-white py-3 rounded-xl col-span-2">
<ReactApexChart
options={additional_chart.options}
series={additional_chart.series}
type="area"
height={500}
/>
</div>
</div>
</div
UserList.Adapter.java
import React, {useState } from "react";
import { toast } from "react-toastify";
import CustomDialogBox from "../../../Shared/CustomDialogBox";
import { useFormik } from "formik";
import { addEstimateFn } from "../../../Services/Estimate/AddEstimate";
import { useMutation } from "react-query";
import Stregic from "./Strategic";
import Tactical from "./Tactical";
import Operational from
"./Operational";
import { useNavigate } from "react-router-dom";
import BasicData from "./BasicData";
import AllCalculation from "./AllCalculation";
const AddEstimate = () =>

{ const navigate =
useNavigate();
const [openCustomDialogBox, setopenCustomDialogBox] = useState(false);
const initialValues = {
type_tax:"",
customer: "",
estimate_no: "",
estimate_date: "",
expiry_date: "",
project_name: "",
project_type: "",
subproject_of: "",
no_of_phase: "",
description: "",
tax: "",
phase_data: [],
material_data: [],
operation_data: [],
milestone_data: [],
workOrder_data: [],
};
const formik = useFormik({

initialValues: initialValues,
32
// enableReinitialize: true,
onSubmit: (values) => {
33
const phaseData = formik.values.phase_data?.map((i) =>
{ return {
phase_name: i?.phase_name,
description: i?.description,
spent_time: i?.time,
spent_cost: i?.cost,
};
});
const mileStone = formik.values.milestone_data?.map((i) =>

{ return {
phase_name: i?.phase,
milestone_name: i?.name,
};
});
const workOrders = formik.values.workOrder_data?.map((i) => {

return {
work_order_or_task_name: i?.phase_name,
};
});
const materialData = formik.values.material_data?.map((i) =>

{ return {
work_order_or_task_name:
formik.values.project_type === "Operational" ? i?.phase : "",
milestone_name:
formik.values.project_type === "Strategic" ? i?.phase : "",
materials_id: i?.material,
cost: i?.cost,
phase_name: formik.values.project_type === "Tactical" ? i?.phase : "",
};
});
const operationData = formik.values.operation_data?.map((i) =>

{ return {
work_order_or_task_name:
formik.values.project_type === "Operational" ? i?.phase : "",
milestone_name:
formik.values.project_type === "Strategic" ? i?.phase : "",
time: i?.time,
cost: i?.cost,
phase_name: formik.values.project_type === "Tactical" ? i?.phase : "",
operations_id: i?.operation,
};
});
const reqBody = {
type_tax:formik.values.type_tax,
customer_id: formik?.values?.customer,
estimate_no: formik?.values?.estimate_no,
estimate_date: formik?.values.estimate_date,
34
expiry_date: formik?.values?.expiry_date,
project_name: formik?.values?.project_name,
type_of_project: formik?.values?.project_type,
description: formik?.values?.description,
no_of_phases:
formik.values.phase_data.length ||
formik.values.workOrder_data?.length,
total_amount:
Number( formik.values.operation
_data
?.reduce((a, b) => a + Number(b?.cost), 0)
.toFixed(2)
) +
Number( formik.values.material_
data
.toFixed(2)
) +
((Number( formik.values.operati
on_data
.toFixed(2)
) +
data
.toFixed(2)
)) *
Number(formik.values.tax)) /
100,
total_price:
Number( formik.values.operation
_data
.toFixed(2)
) +
data
.toFixed(2)
),
igst: formik.values.tax,
milestone_on_phases_on_estimate_project: mileStone,
work_order_or_task_on_estimate_project: workOrders,
phases_on_estimate_project: phaseData,
materials_on_estimate_project: materialData,
operations_on_estimate_project: operationData,
};
estimate(reqBody);
},
});
const { mutate: estimate } = useMutation(addEstimateFn,

{ onSuccess: (response) => {
console.log("add");
if (response.data.response_code === 200) {
navigate("/estimate");
35
}
toast.success(response.data.message);
},
});
return (
<>
<div className="w-full h-full overflow-auto flex gap-2">
<div className="w-full bg-white p-2 rounded-lg shadow-lg h-full flex flex-co
l justify-between border-2 border-gray-200">
<div className="h-full flex flex-col justify-between overflow-auto ">
<form className="flex flex-col justify-evenly overflow-auto">
<div className="overflow-scroll px-2">
<BasicData formik={formik}/>
{formik.values.project_type === "Strategic" && (
<Stregic formik={formik} />
)}
{formik.values.project_type === "Tactical" && (
<Tactical formik={formik} />
)}
{formik.values.project_type === "Operational" && (
<Operational formik={formik} />
)}
<div className=" w-full mt-4 flex flex-col gap-3 px-2">

<AllCalculation formik = {formik}/>
</div>
</div>
</form>
<div className="w-full flex gap-2 mt-8 bg-gradient-to-b from-purple-200 to-purple-500 p-2 ">
<button
// onClick={() =>}
className="text-white p-3 bg-blue-600 rounded-lg"
>
Clear
</button>
<button
onClick={() => {
setopenCustomDialogBox(true);
}}
>
Calculate
</button>
<button
onClick={() => {
formik.handleSubmit();
setopenCustomDialogBox(true);
}}
>
Calculate and Save
</button>
</div>
36
</div>
</div>
</div>
{openCustomDialogBox && (
<CustomDialogBox
openCustomDialogBox={openCustomDialogBox}
setOpenCustomDialogBox={setopenCustomDialogBox}
component={
<div className=" w-full mt-4 flex flex-col gap-3 px-2">
<AllCalculation formik={formik}/>
</div>
}
title="Total Cost:"
/>
)}
</>
);
};
export default AddEstimate;
37
import { MenuItem, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { AiFillDelete } from "react-icons/ai";
import axios from "axios";
import { API_URLS } from
"../../../../Config/apiUrls"; import axiosInstance
from "../../../../Config/axios"; import { baseUrl }
from "../../../../URls";
import { toast } from "react-toastify";
const Tactical = ({ formik }) => {

const [material_list, setmaterial_list] =
React.useState([]); const [operationList, setOperationList]
= useState([]); const [loding, setloding] =
useState(false);
function deletePhase(id, phase_name)

{ formik.setFieldValue(
"phase_data",
formik.values.phase_data?.filter((i) => i?.id !== Number(id))
);
formik.setFieldValue( "operation
_data",
formik.values.operation_data.filter((i) => i?.phase !== phase_name)
);
formik.setFieldValue( "material_
data",
formik.values.material_data.filter((i) => i?.phase !== phase_name)
);
}
// materials
const handleAddRowForMaterial = () => {
const newRow = {
id: formik.values.material_data.length + 1,
material: "",
phase: "",
cost: "",
time: "0",
};
formik.setFieldValue("material_data", [
...formik.values.material_data,
newRow,
]);
};
const handleFieldChangeForMaterial = (rowId, field, value) =>

{ formik.setFieldValue(
"material_data",
formik.values.material_data.map((row) =>
row.id === rowId ? { ...row, [field]: value } : row
)
);
};
// operations
const handleAddRowForOperations = () => {
const newRow = {
id: formik.values.operation_data.length + 1,
38
operation: "",
39
phase: "",
cost: "",
time: "0",
};
formik.setFieldValue("operation_data", [
...formik.values.operation_data,
newRow,
]);
};
const handleFieldChangeForOperation = (rowId, field, value) => {

formik.setFieldValue(
"operation_data",
formik.values.operation_data.map((row) =>
)
);
};
//phase
const handleAddRow = () => {
const newRow = {
id: formik.values.phase_data.length + 1,
phase_name: "",
description: "",
time: "",
cost: "",
};
formik.setFieldValue("phase_data", [...formik.values.phase_data, newRow]);
};
const handleFieldChange = (rowId, field, value) => {

formik.setFieldValue( "phase_dat
a",
formik.values.phase_data.map((row) =>
)
);
};
async function getMaterial() {

setloding(true);
try {
const response = await axios.get(`${baseUrl}${API_URLS?.material}`, {
headers: {
Authorization: localStorage.getItem("erp_token"),
"Content-Type": "application/json",
},
});
setmaterial_list(response?.data?.data);
console.log(response.data.data);
} catch (e) {
console.log(e);
toast.warn("Something went wrong");
}
setloding(false);
}
40
async function getOperationList() {
setloding(true);
try {
const response = await axiosInstance.get(`${API_URLS.operations}`, {
headers: {
Authorization: localStorage.getItem("erp_token"),
"Content-Type": "application/json",
},
});
setOperationList(response?.data?.data);
console.log(response);
} catch (e) {
console.log(e);
toast.warn("Something went wrong");
}
setloding(false);
}
useEffect(() => {
//
getcustomerFn();
getMaterial();
getOperationList();
}, []);
useEffect(() => {
const updatedData = formik.values.phase_data.map((phaseItem) => {
const phaseId = phaseItem.phase_name;
// Calculate the total cost and time for this phase

const totalCost = formik.values.operation_data
.concat(formik.values.material_data)
.filter((item) => item.phase === phaseId)
.reduce((sum, item) => sum + parseFloat(item.cost), 0);
const totalTime = formik.values.operation_data

.concat(formik.values.material_data)
.filter((item) => item.phase === phaseId)
.reduce((sum, item) => sum + parseFloat(item.time), 0);
return {
...phaseItem,
cost: totalCost.toString(), // Convert to string if needed
time: totalTime.toString(), // Convert to string if needed
};
});
formik.setFieldValue("phase_data", updatedData);
// console.log(milestoneData)
}, [formik.values.operation_data, formik.values.material_data]);
return (
<>
<div className="overflow-scroll">
<p className="bg-purple-500 p-2 mt-5 text-white">Phases:</p>
<div className="bg-gray-400 p-2">
<div className="w-full grid grid-cols-7 place-items-center gap-3">
41
<p className="col-span-2">Phase</p>
42
<p className="col-span-2">Description</p>
<p className="col-span-1">Time (Hrs)</p>
<p>Cost</p>
<p></p>
</div>
</div>
<div className="flex flex-col gap-3 mt-3 px-2">
{formik.values.phase_data.map((row) => (
<div className="w-full grid grid-cols-7 gap-3" key={row.id}>
<TextField
required
className="!col-span-2"
id="phase_name"
name="phase_name"
type="text"
placeholder="Enter Phase"
InputLabelProps={{
shrink: true,
}}
value={row?.phase_name}
onChange={(e) =>
handleFieldChange(row.id, "phase_name", e.target.value)
}
/>
<TextField
required
id="description"
name="description"
type="text"
placeholder="development"
InputLabelProps={{
shrink: true,
}}
value={row?.description}
onChange={(e) =>
handleFieldChange(row.id, "description", e.target.value)
}
/>
<TextField
required
id="time"
name="time"
type="number"
placeholder="00"
InputLabelProps={{
shrink: true,
}}
disabled
value={row?.time}
onChange={(e) =>
handleFieldChange(row?.id, "time", e.target.value)
}
/>
<TextField
required
43
id="cost"
name="cost"
type="number"
placeholder="00"
InputLabelProps={{
shrink: true,
}}
disabled
value={row?.cost}
onChange={(e) =>
handleFieldChange(row?.id, "cost", e.target.value)
}
/>
{formik.values.phase_data.length > 1 && (
<div
className="text-2xl text-red-900 ml-[20%] "
onClick={() => deletePhase(row?.id, row?.phase_name)}
>
<AiFillDelete className="!cursor-pointer" />
</div>
)}
</div>
))}
</div>
<div
onClick={handleAddRow}
className="bg-purple-200 p-2 mt-1 cursor-pointer"
>
Add New +
</div>
<div className="grid grid-cols-2 gap-8">

<div>
<p className="bg-purple-500 p-2 mt-5 text-white">
Material Requirement:
</p>
<p className="col-span-2">Material</p>
<p className="col-span-2">Cost</p>
<p></p>
</div>
</div>

{formik.values.material_data.map((row) => (
<div className="w-full grid grid-cols-7 gap-3" key={row.id}>
<TextField className="!
col-span-2" required
select
id="material"
name="material"
placeholder="Enter material"
InputLabelProps={{
44
shrink: true,
}}
value={row?.material}
onChange={(e) =>
handleFieldChangeForMaterial( row.
id,
"material",
e.target.value
)
}
>
{material_list.map((i) => {
return <MenuItem value={i?.bom_id}>{i?.name}</MenuItem>;
})}
{/* <MenuItem value={2}>m2 (KG)</MenuItem> */}

</TextField>
select
id="phase"
name="phase"
placeholder="Enter phase"
InputLabelProps={{
shrink: true,
}}
value={row?.phase}
onChange={(e) =>
id,
"phase",
e.target.value
)
}
>
{formik.values.phase_data?.map((i) => {
return (
<MenuItem value={i?.phase_name}>
{i?.phase_name}
</MenuItem>
);
})}
</TextField>
id="cost"
name="cost"
placeholder="Enter cost"
InputLabelProps={{
shrink: true,
}}
value={row?.cost}
onChange={(e) =>
id,
"cost",
45
e.target.value
)
}
/>
{formik.values.material_data.length > 1 && (
<div
className="text-2xl text-red-900 ml-[20%]
" onClick={() =>
formik.setFieldValue( "material_
data",
formik.values.material_data?.filter(
(i) => i?.id !== row.id
)
)
}
>
</div>
)}
</div>
))}
</div>
<div
onClick={handleAddRowForMaterial}
>
Add New +
</div>
</div>
<div>
<p className="bg-purple-500 p-2 mt-5 text-white">
Operation Requirement:
</p>
<p className="col-span-2">operations</p>
<p className="col-span-2">Cost</p>
<p className="col-span-2">Time (Hrs)</p>
<p></p>
</div>
</div>
{formik.values.operation_data.map((row) => (
<div className="w-full grid grid-cols-9 gap-3 " key={row.id}>
select
id="operation"
name="operation"
placeholder="Enter operation"
InputLabelProps={{
shrink: true,
}}
value={row?.operation}
onChange={(e) =>
46
handleFieldChangeForOperation( row
.id,
"operation",
e.target.value
)
}
>
{operationList?.map((i) => {
return <MenuItem value={i?.id}>{i?.stage}</MenuItem>;
})}
{/* <MenuItem value={2}>m2 (KG)</MenuItem> */}

</TextField>
select
id="phase"
name="phase"
placeholder="Enter phase"
InputLabelProps={{
shrink: true,
}}
value={row?.phase}
onChange={(e) =>
.id,
"phase",
e.target.value
)
}
>
{formik.values.phase_data?.map((i) => {
return (
<MenuItem value={i?.phase_name}>
{i?.phase_name}
</MenuItem>
);
})}
</TextField>
id="cost"
name="cost"
placeholder="Enter cost"
InputLabelProps={{
shrink: true,
}}
value={row?.cost}
onChange={(e) =>
handleFieldChangeForOperation(
row.id,
"cost",
e.target.value
)
}
/>
47
id="time"
name="time"
placeholder="Enter time"
InputLabelProps={{
shrink: true,
}}
type="number"
value={row?.time}
onChange={(e) =>
.id,
"time",
e.target.value
)
}
/>
{formik.values.operation_data.length > 1 && (
<div
className="text-2xl text-red-900 ml-[20%]
" onClick={() =>
formik.setFieldValue(
"operation_data",
formik.values.operation_data?.filter(
(i) => i?.id !== row.id
)
)
}
>
</div>
)}
</div>
))}
</div>
<div
onClick={handleAddRowForOperations}
>
Add New +
</div>
</div>
</div>
</div>
</>
);
};
export default Tactical;</resources>
48
Structure of Table
SCREENSHOT OF Sqlite DATABASE
Item Table
49
Content Table
Screenshot of SQLite DATABASE
50
6. TESTING
Testing is the integral part of any System Development Life Cycle insufficient and interested
application tends to crash and result in loss of economic and manpower investment besides user’s
dissatisfaction and downfall of reputation.
“Software Testing can be looked upon as one among much process, an organization performs, and that
provides the last opportunity to correct any flaws in the developed system. Software Testing includes
selecting test data that have more probability of giving errors.” The first step in System testing is to
develop the plan that all aspect of system .Complements, Correctness, Reliability and Maintainability.
Software is to be tested for the best quality assurance, an assurance that system meets the specification
and requirement for its intended use and performance.
System Testing is the most useful practical process of executing the program with the implicit
intention of finding errors that makes the programfail.
Types of Testing:
Lack Box (Functional) Testing:
Testing against specification of system or component. Study it by examining its inputs and related
outputs. Key is to devise inputs that have a higher likelihood of causing outputs that reveal the
presence of defects. Use experience and knowledge of domain to identify such test cases. Failing this
asystematic approach may be necessary. Equivalence partitioning is where the input to a program falls
into a number of classes,
51
e.g. positive numbers vs. negative numbers. Programs normally behave the same way for each member
of a class. Partitions exist for both input and output. Partitions may be discrete or overlap. Invalid data
(i.e. outside the normal partitions) is one or more partitions that should be tested.
Internal System design is not considered in this type of testing. Tests are based on requirements
andfunctionality.
This type of test case design method focuses on the functional requirements of the software, ignoring
the control structure of the program. Black box testing attempts to find errors in the
followingcategories:
 Incorrect or missing functions.
 Interface errors.
 Errors in data structures or external database access.
 Performance errors.
 Initialization and termination errors.
White Box (Structural) Testing:
Testing based on knowledge of the structure of component (e.g. by looking at source code). The
advantage is that structure of the code can be used to find out how many test cases need to be
performed. Knowledge of the algorithm (examination of the code) can be used to identify the
equivalence partitions. Path testing is where the tester aims to exercise every independent execution
path through the component. All conditional statements were tested for both true and false cases.
52
program units than large ones. Flow graphs are a pictorial representation of the paths of control
through a program (ignoring assignments, procedure calls and I/O statements). Use flow graph to
design test cases that execute each path. Static tools may be used to make this easier in programs that
have a complex branching structure. Tools support. Dynamic program analysers instrument a program
with additional code. Typically this will count how many times each statement is executed. At endprint
out report showing which statements have and have not been executed. Problems with flow
graphderived testing:
 Data complexity could not take intoaccount.
 We cannot test all paths incombination.
 In really only possible at unit and module testing stages because beyond that complexity is
toohigh.
This testing is based on knowledge of the internal logic of an application’s code. Also known as a
Glass Box Testing .Internal software and code working should be known for this type of testing. Tests
are based on coverage of code statements, branches, paths, conditions.
Unit Testing:
Unit testing concentrates on each unit of the software as implemented in the code. This is done to
check syntax and logical errors in programs. At this stage, the test focuses on each module
individually, assuring that it functions properly as a unit. In our case, we used extensive white-box
testing at the unit testing stage.
A developer and his team typically do the unit testing do the unit testing is done in parallel with
coding; it includes testing each function and procedure.
Incremental Integration Testing:
Bottom up approach for testing i.e. continuous testing of an application as new functionality is
added; Application functionality and modules should be independent enough to test separately done
by programmers or by testers.
53
Integration Testing:
Testing of integration modules to verify combined functionality after integration

.Modules are typically code modules, individual applications, client and server and distributed
systems.
FunctionalTesting:
This type of testing ignores the internal parts and focus on the output is as per requirement or not
.Black box type testing geared to functionality requirements of an application.
System Testing:
Entire system is tested as per the requirements. Black box type test that is based on overall requirement
specifications covers all combined parts of a system.
End-to-End Testing:
Similar to system testing ,involves testing of a complete application environment in a situation that
mimics real-world use, such as interacting with a database ,using network communications, or
interacting with hardware, applications, or system if appropriate.
Regression Testing:
Testing the application as a whole for the modification in any module or

functionality.Difficult to cover all the system in regression testing so typically automation tools are
used for these testing types.
54
Acceptance Testing:
Normally this type of testing is done to verify if system meets the customer specified requirements.
User or customers do this testing to determine whether to accept application.
Performance Testing:
Term often used interchangeably with “stress” and “load” testing, To check whether system meets
performance requirements, Used different performance and load tools to do this.
Alpha Testing:
In house virtual user environment can be created for this type of testing. Testing is done at the end of
development .Still minor design changes may be made as a result of such testing.
Beta Testing:
Testing typically done by end-users or others. This is final testing before releasing application for
commercial purpose.
55
BIBLOGRAPHY
 Book: "JavaScript: The Good Parts" by Douglas Crockford
 Online Resource: MDN - JavaScript Documentation
(https://developer.mozilla.org/en- US/docs/Web/JavaScript)
 Online Course: JavaScript Course on Codecademy
(https://www.codecademy.com/learn/introduction-to-javascript)
 Front-End Development:
 Book: "Eloquent JavaScript" by Marijn Haverbeke

 Online Resource: CSS-Tricks (https://css-tricks.com/)
 Website: Smashing Magazine (https://www.smashingmagazine.com/)
56

Monu Synosis

Uploaded by

Copyright:

Available Formats

Monu Synosis

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Monu Synosis

Uploaded by

Copyright:

Available Formats

BN COLLEGE OF ENGINEERING&TECHNOLOGY

(AffIliated to AKTU University)

Yadav Monu Haridwar Ms. Neha Goyal

& BN COLLEGE OF ENGINEERING TECHNOLOGY

(AffIliated to AKTU University)

Colleger Internship Coordinator Department Internship Coordinator

Yadav Monu Haridwar

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

10/08/23 Thursday Continuing Class and Id’s

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

18/08/23 Friday Understanding DOM and DDOM

19/08/23 Saturday Introduction to Objects and Array

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

24/08/23 Thursday Design Contact Page

2. System Analysis ..............................................................................................09-18

3. Software Hardware Requirement Specification........................................19-20

5. Configuration Design (manifest.xml)…........................................................21-36

6.1. List of Tables.......................................................................................................................36-36

8.1. Project Screenshot.................................................................................................................43-43

8.2. Project Coding (XML & Java)….........................................................................................44-61

 It is time saving and energy saving.

 Erroneous Input and Output

Analysis specifies what the system should do.

 Software License agreement

 Issues related to cyber laws.

 Legal issues relating to the man power contract.

Social & Behavioral Feasibility:

PROJECT MODEL USED

Iterative Enhancement Model

2. Relationship, which connect entities and represent meaningful dependencies betweenthem.

3. Attributes which specify properties of entities &relationships.

DFDs are easier to understand by technical and non-technical audiences.

Non-functional requirements are requirements which impose constraints on the design or

Server side Software Requirement:

Client side Hardware requirements:

SUPPORT AND MAINTENANCE:-

4. SYSTEM DESIGN APPROACH

Top – Down designing:

Paste screenshot of Model

<section class="home" id="home">

<div class="box" style="background: url(images/home1.jpg) no-repeat;">

<h1 class="heading">Adventure Idea!</h1>

<h1 class="heading">popular packages</h1>

<a href="#contact" class="btn">explore now</a>

<input type="text" class="input" placeholder="Name" name="name">

<input type="email" class="input" placeholder="Email Address"

<a href="#"> <i class="fas fa-map"></i> Lucknow, india - 226010 </a>

<div className=" bg-white py-3 rounded-xl">

<div className="flex bg-white py-3 rounded-xl">

<div className="h-full flex flex-col justify-center items-center ">

const AddEstimate = () =>

const formik = useFormik({

const mileStone = formik.values.milestone_data?.map((i) =>

const workOrders = formik.values.workOrder_data?.map((i) => {

const materialData = formik.values.material_data?.map((i) =>

const operationData = formik.values.operation_data?.map((i) =>

const { mutate: estimate } = useMutation(addEstimateFn,

<div className=" w-full mt-4 flex flex-col gap-3 px-2">