Summer Training Report

On
College library website
For
Practical training -1
Submitted in partial fullfillment of the requirement for the
award of degree of BCA

Name- Prashant Kumar Majumdar

Roll No.-1901060004
YEAR-2021-22

K.R. Mangalam University

School of Engineering & Technology
Gurugram
 CERTIFICATE
This is to certify that this proposal of minor project entitled “College library website”

Is a record of bonafide work, carried out by Prashant Kumar Majumdar under supervision

. This work has not been submitted elsewhere for a degree.

Prashant Kumar Majumdar

Roll no. - 1901060004

i
 CANDIDATE’S DECLARATION
I, Prashant Kumar Majumdar, bearing roll no 1901060004, a student of BCA hereby declare
that I own the full responsibility for the information, results etc. provided in this report titled
“College Library Website” submitted to K R Mangalam University, for the award of BCA
degree. I have taken care in all respect to honor the intellectual property right and have
acknowledged the contribution of others for using them in academic purpose and further declare
that in case of any violation of intellectual property right or copyright I, as a candidate,
will be fully responsible for the same. My supervisor should not be held responsible for full or
partial violation of copyright or intellectual property right.

This is to certify that the above statement made by the candidate is correct to the best of my
knowledge.

Dated:

(Candidate Signature)

ii
 ACKNOWLEDGEMENT
It’s a great pleasure to present this report of summer training in partial fulfillment of BCA under
KR Mangalam University. At the outset, I would like to express my immense gratitude to my
training guide(Name) guiding me right from the inception till the successful completion of the
training would also like to thank my friends and all my group members for their help and
cooperation throughout the training also thank my friends, who have helped me during this
study. In addition I thank one and all who have been instrumental in helping me complete this
project. I am extremely grateful and indebted to my parents and my siblings for being
pillars of strength, for their unfailing moral support, and encouragement. I treasure their blessings
and good wishes and dedicate this study to them.

Name

Roll No

iii
 ABSTRACT

Web development refers to the building, creating, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It is
the creation of an application that works over the internet i.e. websites.

Web Development can be classified into two ways:

Frontend Development
Backend Development
Frontend Development: The part of a website that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application.

HTML: HTML stands for HyperText Markup Language. It is used to design the front end
portion of web pages using markup language. It acts as a skeleton for a website since it is used to
make the structure of a website.
CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style our website.
JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.
Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications. It is the most popular CSS framework for developing responsive, mobile-
first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome)
and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).

iv
 TABLE OF CONTENTS
PAGE

1. CERTIFICATE .…………………………………………………………………….i

2. CANDIDATE’S DECLARATION………………………………………………...ii

3. ACKNOWLEDGMENT…………………………………………………………iii

4. ABSTRACT………………………………………………………………………....iv

5. INTRODUCTION…………………………………………………………………...1

6. ABOUT THE COMPANY………………………………………………………….2

7. PRACTICAL TRAINING………………………………………………………….3

8. CONCLUSION………………………………………………………………………4

9. REFERENCES………………………………………………………………………5

v
 INTRODUCTION
This is static front-end website which gives all the information about College library, helps the
user to see thorough all the books in library , issue them ,pay fine for late payments and register .
The website has been created as a mark-up language that is in reality a backbone of any site,
without the knowledge of HTML, each site cannot structure. If we just make our web page
withthe aid of html, then we can't add many of the effective web page features, we use
different platforms such as JavaScript to make a web page more functional. So here we are
using these entire features to make our web pages more effective as well as efficient.
The internet is becoming ever more popular as technology progresses. The website has
become avital feature. An institution's website is also used to rank it as major requirements. It
is therefore important for every major organization to have a website especially library
website. As the top public university departments, the Accounting & Information Management
Department needs to have a helpful and amazing website to highlight the department and use it
as a way of communicating with students, teachers and others. Notice, research works, club
activities, digital local library etc. can be the major advantages of a website. We will build a
website for a shop for this project. Details of almost every that is important have been
discussed in this article. Even though full effort has been made to change the quantity and
costs. Some optional characteristics that can be included oromitted are eligible.

Web servers and web browsers interact over the internet with client-server computer programs
totransmit documents and information, typically called web data. Online data is marked up for
display and interaction with people in web browsers in the HTML language. Each web server
uses an IP address to identify its domain name as well as its port number. Web browsers are
usedto send data requests to an HTTP protocol web server, and web servers operating on
server computers either download the requested data from local disks or create on-the-fly data,
mark thedata in JavaScript, and return the resulting HTML files to the web browsers for
rendering.

vi
 Web design:

Web designing is the process of creating websites. It includes many different areas, including the
layout of the web page, creation of content, and graphic design. This relates to the nature of
websites that are seen on the internet. Instead of software development, it typically refers to the
user interface aspects of website development. A mixture of HTML and CSS that determines how
each page will appear in a browser is used on most websites. The process of designing,

Website :

A site or website is a central location for web pages that are linked and accessed using a
browserby accessing the website's home page. A website is hosted on one or more web
servers that are accessible as a local area network via a network such as the internet or private
network through an internet address known as Standardized Resource Locator (URL). The
first website was built at CERN by Tim Berners-Lee and launched on August 6, 1991.

7
 PRACTICAL TRAINING

Frontend Web Development

Web design refers to the design of websites that are displayed on the internet. It usually refers
to the user experience aspects of website development rather than software development. Web
designused to be focused on designing websites for desktop browsers; however, since the mid-
2010s, design for mobile and tablet browsers has become ever-increasingly important.A web
designer works on the appearance, layout, and, in some cases, content of a website. Appearance,
for instance, relates to the colors, font, and images used. Layout refers to how information is
structuredand categorized. A good web design is easy to use, aesthetically pleasing, and suits the
user groupand brand of the website. Many webpages are designed with a focus on simplicity, so
that no extraneous information and functionality that might distract or confuse users appears. As
the keystone of a web designer’s output is a site that wins and fosters the trust of the target
audience, removing as many potential points of user frustration as possible is a critical
consideration.

What is the difference between a website and a web page?

A website refers to a central location that contains more than one web page or a series of web
pages. For example, Computer Hope is considered a website, which contains thousands of
differentweb pages, including the page you're reading now.

On most websites, you read the information contained on each web page. If there are any
interesting hyperlinks, you follow those links by clicking or tapping on them to find more
information or perform a task. You can also listen to music, watch videos, shop, communicate,
and much more on many websites.

There are billions of websites on the Internet today that can be broken into one of the following
types of website categories. Keep in mind that it is possible for a website to fall into more than
oneof the following categories. For example, a website may also be a forum, webmail, blog, or
searchengine.

viii
Frontend vs Backend
Front-end developers work on what the user can see while back-end developers build the
infrastructure that supports it.
Both are necessary components for a high-functioning application or website.
It’s not uncommon for companies to get tripped up by the “front-end versus back-end” divide
when trying to navigate the development of new software.
After all, there are a growing number of tools on the market aimed at helping developers become
more “full stack” oriented, so it’s easy for non-technicians to assume there isn’t a big difference
between front-end and back-end specialists.
Front-end and back-end developers do work in tandem to create the systems necessary for an
application or website to function properly. However, they have opposite concerns.
The term “front-end” refers to the user interface, while “back-end” means the server, application
and database that work behind the scenes to deliver information to the user.
The user enters a request through the interface.
It’s then verified and communicated to the server, which pulls the necessary data from the
database and sends it back to the user.
Here’s a closer look at the difference between front-end and back-end development.

What is Front-End Development?

The front-end is built using a combination of technologies such as Hypertext Markup Language
(HTML), JavaScript and Cascading Style Sheets (CSS).
Front-end developers design and construct the user experience elements on the web page or
app including buttons, menus, pages, links, graphics and more.
HTML
Hypertext Markup Language is the core of a website, providing the overall design and
functionality.
The most recent version was released in late 2017 and is known as HTML5.2.
The updated version includes more tools aimed at web application developers as well as
adjustments made to improve interoperability.
CSS
Cascading style sheets give developers a flexible, precise way to create attractive, interactive
website designs.

ix
 JavaScript
This event-based language is useful for creating dynamic elements on static HTML web pages.
It allows developers to access elements separate from the main HTML page, as well as respond
to server-side events.
Frontend frameworkssuch as Angular, Ember, Backbone, and React are also popular.
These frameworks let developers keep up with the growing demand for enterprise software
without sacrificing quality, so they’re earning their place as standard development tools.
One of the main challenges of front-end development - which also goes by the name “client-side
development” - is the rapid pace of change in the tools, techniques and technologies used to
create the user experience for applications and websites.
The seemingly simple goal of creating a clear, easy-to-follow user interface is difficult due to
sometimes widely different mobile device and computer screen resolutions and sizes.
Things get even more complicated when the Internet of Things (IoT) is considered.
Screen size and network connection now have a wider variety, so developers have to balance
those concerns when working on their user interfaces.

What is Back-End Development?

The back-end, also called the server side, consists of the server which provides data on request,
the application which channels it, and the database which organizes the information.
For example, when a customer browses shoes on a website, they are interacting with the front
end.
After they select the item they want, put it in the shopping cart, and authorize the purchase, the
information is kept inside the database which resides on the server.
A few days later when the client checks on the status of their delivery, the server pulls the
relevant information, updates it with tracking data, and presents it through the front-end.
Back-end Tools
The core concern of back-end developers is creating applications that can find and deliver data to
the front end.
Many of them use reliable enterprise level like Oracle, Teradata, Microsoft SQL Server, IBM
DB2, EnterpriseDB and SAP Sybase ASE.
There’s also a number of other popular databases including MySQL, NoSQL and PostgreSQL.
There are a wide variety of frameworks and languages used to code the application, such as
Ruby on Rails, Java, C++/C/C#, Python and PHP.

x
Over the last several years Backend-as-a-Service (BaaS) providers have been maturing into a
viable alternative.
They’re especially useful when developing mobile apps and working within a tight schedule.

What is Full-Stack Development?

The development of both the back- and front-end systems has become so specialized, it’s most
common for a developer to specialize in only one.
As a general rule, full stack web development by a single programmer isn’t a practical solution.
However, at times a custom software development company will have developers who are
proficient with both sides, known as a full stack developer.

xi
 Markup languages and style sheets

Introduction:

A markup language is a computer language that uses tags to define elements within a document.It is
human-readable, meaning markup files contain standard words, rather than typical programming
syntax. While several markup languages exist, the two most popular are HTML and XML.

HTML is a markup language used for creating webpages. The contents of each webpage are defined by
HTML tags. Basic page tags, such as <head>, <body>, and <div> define sections ofthe page, while tags
such as <table>, <form>, <image>, and <a> define elements within the page. Most elements require a
beginning and end tag, with the content placed between the tags.For example, a link to the
TechTerms.com home page may use the following HTML code.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how
elements should be rendered on screen, on paper, in speech, or onother media. CSS is used to define
styles for your web pages, including the design, layout and variations in display for different devices
and screen sizes.

12
Overview:
The website had been planned to consist of two parts front-end and back-end development. The front-
end is the part of the web that we can see and interact with (e.g. Client-side programming).While front-
end code interacts with the user in real time, the back-end interacts with a server to return user ready
results. The front-end is a combination of HTML,CSS and JavaScript coding. By using JavaScript,
modifications of the design of a web page can be made immediately, however only temporary and
visible only by the user. Normally the user would not have rights tomodify web content dynamically on
the server side.
Logically, administrators are the ones who deal with back-end modification of databases for example,
as they often contain sensitive data which should not be available to see or modify by the general
public. Back-end programming languages include PHP, Python, Ruby and others. As I have minimal
experience with back-end programming, I have initially focused on the front-end development of the
website. However, if a developer were to extend its functionality, they would be able to reuse code
that manages user edits for their benefit.

For the completion of the tasks the following web languages and scripts have been used: HTMLfor the
construction of the layout, CSS for the design of the layout, JavaScript for dynamic functioning and
JSON for data storage .

13
HTML(Hyper Text Markup Language):
HTML stands for Hypertext Markup Language, and it is the language in which, until recently, virtually all
Web pages were written. Now, don’t break out in hives when you hear the word “language.” You don’t
need complex logical or mathematical formulas to work with HTML, andyou don’t need to think like a
programmer to use it. Computer programmers must think through the tasks that they want their
programs to perform, and then develop an elaborate (and usually complicated) series of instructions to
tell the computer what to do. Although you do need to do some thinking and planning when you use
HTML, it is not nearly that difficult. So, how does Hypertext Markup Language work?
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Whenyou
click a link in a Web page, you are using hypertext. It is this system of linking documents that has made
the World Wide Web the global phenomenon it has become.
Markup Language describes how HTML works. With a markup language, you simply “mark up”a text
document with tags that tell a Web browser how to structure it. HTML originally was developed with
the intent of defining the structure of documents (headings, paragraphs, lists, andso forth) to facilitate
the sharing of scientific information between researchers. All you need to do to use HTML is to learn
what type of markup to use to get the results you want.
FOUR KEY CONCEPTS:
The first step toward understanding and working with HTML is learning the basic terms that describe
most of the functions of this language. You will come across these terms repeatedly asyou use HTML
and if you understand them, you will have progressed a long way toward comprehending HTML, not
to mention XHTML.
• ELEMENTS:
All HTML pages are made up of elements. Think of an element as a container in which aportion
of a page is placed. Whatever is contained inside the element will take on the characteristics of
that element.
• TAGS:
The tag begins with a “less than” sign (<), then the element name, followed by a “greaterthan”
sign (>).

14
 • ATTRIBUTES AND VALUES:
Attributes are another important part of HTML markup. An attribute is used to define the
characteristics of an element and is placed inside the element’s opening tag.
• NESTING:
Nesting simply means that elements must never overlap.

What I had to take in mind prior to starting the project was accessibility issues and web
standards.I had written a strict XHTML file that contains two sections - one list (<ul>) section
for the flag buttons and another (<div>) for the modification buttons.

One major concern of web accessibility is the use of images.It is considered best
practice to add “alt” and “title” attributes for users who cannot distinct images.
For example the image of the shop has a title “cake spot” and alt attribute

set to “store-loo”. The lang attribute is also set as english (lang=”en”) in order to inform the
browser of the default human language of the script, which is essential for the
proper reading of the web page by certain technologies for the disabled.

15
Style/ CSS:
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how
elements should be rendered on screen, on paper, in speech, or onother media.
CSS is among the core languages of the open web and is standardized across Web browsers according
to W3C specifications. Previously, development of various parts of CSS specificationwas done
synchronously, which allowed versioning of the latest recommendations. You might have heard about
CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version. From CSS3, the scope of the
specification increased significantly and the progress on different CSS modules started to differ so
much, that it became more effective to develop and release recommendations separately per module.
Instead of versioning the CSS specification, W3C nowperiodically takes a snapshot of the latest stable
state of the CSS specification.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended tosimplify
the process of making web pages presentable.
CSS is a MUST for students and working professionals to become a great Software Engineer specially
when they are working in Web Development Domain. I will list down some of the keyadvantages of
learning CSS :-

• Create Stunning Web site -CSS handles the look and feel part of a web page. Using CSS,
you can control the colour of the text, the style of fonts, the spacing between paragraphs,
how columns are sized and laid out, what background images or colours are used, layout
designs, variations in display for different devices and screen sizes as well as a variety of
other effects.
• Become a web designer -If you want to start a career as a professional web
designer,HTML and CSS designing is a must skill.
• Control web -CSS is easy to learn and understand but it provides powerful control
overthe presentation of an HTML document. Most commonly, CSS is combined with
the mark up languages HTML or XHTML.
• Learn other languages -Once you understands the basic of HTML and CSS then other
related technologies like JavaScript, php, or angular are become easier to
understand.

16
Applications of CSS:
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to HTML
• Multiple Device Compatibility
• Global web standards

The main styling is stored in an external spreadsheet, although the HTML DOM style object hasalso
been used to change some settings while the JavaScript is being loaded. For example, the Cart button
for the edit module has set visibility to “hidden” in the external stylesheet, but the property changes to
“visible” when the edit button is clicked to avoid potential confusion.
Another method I have used to change properties inside JS is the jQuery .CSS () method. I havefound it
to be effective in changing background and border properties of objects.

17
JavaScript:
JavaScript is a lightweight, interpreted programming language. It is designed for creating network-
centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to
implement because it is integrated with HTML. It is open and cross-platform. JavaScript is a MUST for
students and working professionals to become a great Software Engineer speciallywhen they are
working in Web Development Domain. I will list down some of the key advantages of learning JavaScript:
• It helps you developing great front-end as well as back-end software using different
JavaScript based frameworks like jQuery, Node.JS etc.
• JavaScript is everywhere, it comes installed on every modern web browser and so
tolearn JavaScript you really do not need any special environment setup.
• JavaScript helps you create really beautiful and crazy fast websites. You can develop
your website with a console like look and feel and give your users the best Graphical
User Experience.
• Great thing about JavaScript is that you will find tons of frameworks and Libraries
already developed which can be used directly in your software development to
reduceyour time to market.
All functionality of the modules has been programmed in JavaScript, including jQuery and AJAX.
jQuery is a fast and small JavaScript library that offers many useful features that make event handling
among other things much simpler with an easy-to-use API that works across a multitude of browsers.
AJAX, though not another programming language or library is a way ofusing existing standards. It is
the art of exchanging data with a server and updating
parts of a web page, without the need to reload the entire web page. As AJAX was already used to
dynamically load data for the Trace-Me Assistant,

The idea of the edit module is that once the user decides they want to change the screen text of aweb
page, all of the text values would become editable by a single button click. For this purpose,the following
actions need to occur:Collect all HTML tags on the web page and store them in variables.

• Perform a check if each tag contains text.

• Highlight the tags with found text values upon mouse hover.
• Wrap the text inside a text box and allow modification.
• Distinct the modified text from the unmodified (e.g., Outline the text box).
The next step of the edit process would be to save the changes by clicking onthe ‘add
to cart’ button. What happens is the following:
18
 • Input values are collected and stored in arrays.
• A new JSON object is created.
• Whenever the user changes the value, it is stored locally inside a JSON object.
• Display new values on reload.
Optionally, the user should be able to reset all nodes in their original state. That is made possibleby
adding another button called ‘clear cart’, which deletes
the object in local storage. Some of the main JavaScript code can be find attached as Appendix B
on page *. Explanations of what each bit of code does are provided. The functionality of the
back-end office modifications would be exactly the same with the only difference that the
changes will be made permanent. It would be possible to reset default(old) values, however that
would mean not only changing data but adding more to the database. This could bring up some
complications, the most obvious one being processing time.

List of figures:

19
20
21
22
23
24
 CONCLUSION

It has been an excellent and rewarding experience. I can conclude thatthere have been a lot I’ve learnt
from my work. Needless to say, the technical aspects of the work I’ve done are not flawless and could be
improved provided enoughtime. As someone with no prior experience in JavaScript whatsoever I believe
my time spent in research and discovering new languages was well worth it and contributed to finding an
acceptable solution to an important aspect of web design and development. I have yet to complete
another one semester of studies, in order to achieve a bachelor degree in (BCA). Working with web
development languages has increased my interest in them, hence prompting me to transfer to the Web
Design and Development course at my university.
Project Summary: I have created website for college library called KRMU Library. Here, we can add
books, remove them, get the registration done,can also access the real social media accounts of the
university from social media links etc.
Problems and Suggestions:

There is plenty of room left for improvement. For instance, while creating this website I encountered
several gliches that I got noticed about however they were not major problems but I fixed it but the gliches
can re occur when someone does further development into this like the code of css can broke and the
website looks puzzled but the solution is whenever someone encounters this then just close the site and
open it again simple.

25
 REFERENCES

1. www.w3schools.com

2. www.javatpoint.com

3. www.geeksforgeeks.com

4. www.tutorialspoint.com

5. www.youtube.com

26