Book management application

 modern world full of modern technologies, where all the information sharing and transaction

are done with the help of various applications and web services, it is necessary for the upcoming
younger generations to have the knowledge of computer and its applications which are provided along
with it. Over the years, the rapid improvement of hardware and software technologies made computer
devices, mobiles, laptops, and other digital technologies more user friendly and affordable. Since data,
information and connectivity are rapidly increasing day by day, websites are challenged with durability, performance, security, and maintenance. Therefore, many technologies, new web applications 
architectures, and tools have been created to support these objectives specifically.
According to Herbert (2022), React provides state-of-the-art user interfaces and improves the efficiency of JavaScript-driven pages. React.js is a tool that helps developers build websites and applications that users can interact with. It was created by Facebook and is like a set of building blocks that
make it easier to create these websites and applications. Instead of writing a lot of complicated code
from scratch, React Js lets developers reuse small pieces of code called "components." These compo nents are like separate parts of a puzzle that can be put together to make the whole website or 
 application. By using React, developers can build things faster and with less code than if they were just using
basic JavaScript. ReactJS library helps to create a quick response and high-performance website, build
productivity rather than other frameworks in the same area and reduces the cost for maintenance in the
system.
The main objective of this thesis was to learn and represent how ReactJS is used to design Library
Management System. React JS is one of the popular open-source JavaScript front-end library which is
used for building user interface. Nowadays, it is used by wide range of developers. The aim of this
project is the use of the application for library purpose which helps with better library management
system. Library Management System is a library management software used for various aspects like
monitoring and controlling the transaction of a library system. The project focuses on operations in li braries like adding books, searches, adding members, searching for availability. MS is a web-based ap plication suitable for every browser.
The main aim of the thesis “Library Management System” is to learn and represent React Js and the
implementation tools used to design website
History of ReactJS
ReactJS is an open-source JavaScript library which can be called React or React.js. It is popular for
SPA (Single Page Application) the manages the view or the cover of web and mobile applications
from which non-functional user interface “UI” are created. Jordan Walke, a software engineer at Face book developed React and it was featured in Facebook news feed and Instagram.com in 2012. ReactJS
came into use when the developers implemented it on Facebook’s news feed and later Instagram
picked it to use it in their system. The data’s in React can be changed staying on the same page without
a page reload. The accuracy, speed, and advantage of React framework has made it popular among
other popular framework. (Pandit, 2021)
React Virtual DOM
DOM stands for ’Document Object Model’. DOM is a programming interface for HTML and XML 
documents. The most important part of web application development is DOM manipulation. DOM 
helps manipulate data in an object-oriented model because the element of the DOM defines structure 
into objects, process, or properties to be easily accessible. Therefore, they are taken as nodes and rep resented as DOM Tree which is also represented as UI of a specific website. The DOM Tree changes 
4
itself according to the change appeared in a website. There is a challenge in updating the DOM tree 
when changes occur, which majorly affects the speed or performance of a website. (Anthony, A., Na thaniel, M., & Lerner, A. 2017, 134-140.)
The DOM tree in Figure 1 represents as a tree of data structure, making it easy to detect the change in side the DOM tree by searching for each level of the tree. The complexity appears when any changes 
occur with any elements on the upper levels of the DOM tree, which is nested by many descendent element’s complex children. However, activating a DOM element properly without affecting the performance of the website was on a very high demand. To solve this problem and to improve its performance more React library introduced Virtual DOM as an alternative update strategy which is located 
inside the React DOM package. (Document Object Mode)

React Component

A component is one of the core building blocks of ReactJS. In other words, every application devel oped in ReactJS are made up of small pieces called component. Component makes the process of
building UI efficient. Components are independent and reusable bits of code. Components are of two
types, and they are Functional component and Class components. These two components are catego rized based on the way they are created. Function components uses plain JavaScript functions whereas
Class components uses ES6 class. The core difference between function and class components is that
Function components are very basic in nature. The only requirement of Function component is to re turn a React element. (Agarwal, 2022.)
FIGURE 3 & 4 below are comparable and provide the basic difference between a Functional compo nent and Class component. Functional components are only used when the component does not require
interacting and when the component processes independently. These components do not require data
from another component; however, multiple functional components can be built under a single func tional component. Class-based components can also be used for this purpose but using class-based
components without the need can make the application.

JSX – JavaScript XML
JSX stands for JavaScript XML. JSX allows the user to write HTML in react and it is a syntax exten sion to JavaScript. It helps to make it easier to write and add HTML in React. JSX produces React”
element”. JSX provides a systematic way to replace the statement React.createElement() in React. The
codes written in JSX convert into JavaScript so that the browser understands the implemented code.
JSX has a syntax that looks both like HTML and JavaScript. The difference with normal JavaScript is
that it is fast and performs optimization while translating to regular JavaScript. React does not require
using JSX, but most users find it helpful as a visual aid when working with UI inside JavaScript code.
It allows reactJs to show errors and threat messages. It is an extension of JavaScript language based on
ES6. As you can see in the example FIGURE 5, JSX allows to write HTML code directly within the
JavaScript code.

Requirement Analysis


To analyse the requirement for Library Management System there are functional requirement and non functional requirement. Functional requirements entail specific actions and features that the system
must possess. These requirements play a crucial role in determining the system's functionality and user
experience. In the context of the Library Management System, the functional requirements are ex plained, and the Nonfunctional requirements are explained

Functional Requirement

In the context of the Library Management System, the functional requirements of the system are Login
credentials, Add and Edit Resources, Add and edit resource publication, Add and edit resource author,
Add and edit resource subscriber, Resource issue, Resource Return, Add/Remove users, Issue Notice,
View Profile. Firstly, the system should provide a secure login mechanism, allowing users to access
the system using unique credentials such as usernames and passwords. This ensures that only author ized individuals can interact with the system. Administrators should have the capability to add new re sources to the library database, including books, journals, and other materials. They should also be
able to edit existing resource information, such as titles, descriptions, and availability status. In addi tion, the system should enable administrators to manage resource 

Database Schema

The essential part of a database is to store and show overhauled data to an application. Database appli cations are utilised to look, sort, channel and show data based upon web demands and can moreover
contain code to perform scientific and factual calculations. Databases allow and constrain information
based upon criteria and implement information keenness by guaranteeing that information is collected
and displayed employing a steady format. The 9 different names of the table 5 are for different pur poses in order to smoothly run the application created on SQL (Structure Query Language) and to con nect/communicate the application to the database NodeJs has been implemented. Some created tables
for working our application are mentioned below in TABLE 5 while example of all the tables created
are displayed the website section.


HOME PAGE



LOGIN FORM









SIGNUP FORM









CONCLUSION
The project's primary motivation was driven by a desire to enhance skills and gain valuable experience
by venturing outside the comfort zone. Although my initial knowledge of React.js was limited, I took
on the challenge and embarked on a journey of expanding my skill set and exploring unfamiliar tech nologies. This project served as a platform for me to learn and acquire new skills, which I believe will
significantly benefit me in future endeavors. By pushing myself beyond what I was familiar with, I
have gained valuable insights and experiences that have broadened my horizons and allowed me to
grow both personally and professionally. I am confident that the skills and knowledge acquired
through this project will serve as a solid foundation for my future endeavors in the field.
The project is primarily divided into two parts. Acquiring the knowledge and concept of React Js
framework was the first goal of the project. Another part was to put the theory into practice and build a
simple website design Library Management System with React Js. With these sets of goals, the thesis
began with the theoretical subjects about React Js and its concepts. To understand the knowledge and
concept of React Js various research was done with the help of the technologies available on the Inter net. In the final part of the project, the goal was to build a website design. After some study of several
web services technologies, the development framework was executed. This system offers an organized
platform to the users. It overcomes the limitations of old library management and provides a platform
for teachers, students, and administrators with effective library management resonating with the mod ern generations. Even though the project Library Management System (LMS) still is an ongoing pro ject website design, it has met the requirements to complete the thesis and to provide all the require ments to accomplish the objectives of the thesis. In summary, the objectives of the thesis were ac quired when comparing the two parts of the thesis with the result. Additionally, opportunity to learn
the variety of web development matters, and experience was also gained while completing  the thesis. 

REFERENCES
Agarwal, H. 2022. ReactJS Components. GeeksforGeeks. Available at: https://www.geeksfor geeks.org/reactjs-components/. Accessed 17 December 2022.
Anthony, A., Nathaniel, M., & Lerner, A. 2017. Fullstack React: The Complete Guide to ReactJS and
Friends. Fullstack.IO.
Borusiuk, Y. 2022. Top 10 Benefits of React.js for Application Development. Online. NCube. Availa ble at: https://ncube.com/blog/top-10-benefits-of-react-js-for-application-development. Accessed 03
March 2022.
Chi, C. 2021. “A Beginner’s Guide to Data Flow Diagrams”. Blog. Hubspot. Available at:
Didacus O. 2018. System Design in Software Development. Online. Medium. Available at: https://me dium.com/the-andela-way/system-design-in-software-development-f360ce6fcbb9. Accessed 21 March
2023.
Document Object Model (ODM), 2023. Tips and Tricks. Meklit. Available at:
Eygi, C. 2020. React.js for Beginners — Props and State Explained. Online. freeCodeCamp.org.
Hammad, M. 2020. “Use Case Diagram for Library Management System”. Preprint. GeeksforGeeks.
Herbert, D. 2022. React provides state-of-the-art user interfaces. Blog post. HubSpot. Available at:
https://blog.hubspot.com/website/react-js#:~:text=React%20pro vides%20state%2Dof%2Dthe,time%20with%20JavaScript%2Ddriven%20pages. Accessed 22 No vember 2022.
Javapoint. 2021. ReactJS State Vs Props. Online. Javatpoint. Available at: https://www.ja vatpoint.com/react-state-vs-props. Accessed 10 February 2023.
Javatpoint. 2021. ReactJS State - Javatpoint. Online. www.javatpoint.com. Available at:
https://www.javatpoint.com/react-state. Accessed 03 February 2023.
Levai, D. 2022. Front-end-vs-back-end-development-the-ultimate-2022-guide. Online. Screamingbox.
Accessed June 13, 2023


Comments

Post a Comment

Popular posts from this blog

Malware Detection using Machine Learning

Image
  Malware detection using machine learning involves leveraging algorithms to identify malicious software by analyzing patterns in data. Unlike traditional methods that rely on known malware signatures, machine learning models can detect new and evolving threats by learning from data features such as file characteristics, behaviors, and network traffic. This approach improves accuracy and adaptability in identifying malware. Malware detection using machine learning leverages algorithms to identify harmful software by analyzing data patterns and behaviors. Unlike traditional signature-based methods, machine learning can detect new and unknown malware by training models on features from both malicious and benign files. This enhances the detection's accuracy and adaptability to evolving threats. In malware detection using machine learning, various types of malware can be identified. These include: Viruses : Programs that attach themselves to other software, spreading when the infected ...
Read more

Algorithm visualizer

Image
  An algorithm visualizer is a tool or software that graphically represents the operation and behavior of algorithms. These visualizations help users understand how algorithms work by providing visual insights into the processes, steps, and data manipulations involved. They are particularly useful for educational purposes, allowing learners to observe the flow of algorithms such as sorting, searching, or graph traversal in an interactive and intuitive manner. By making abstract concepts more concrete, algorithm visualizers can enhance comprehension and aid in debugging or optimizing algorithms. An algorithm visualizer is a tool designed to visually demonstrate the inner workings of algorithms. By graphically representing the steps and data transformations involved, these tools help users understand complex processes such as sorting, searching, and path finding. Algorithm visualizers are particularly valuable in educational settings, as they make abstract concepts more concrete, aid...
Read more