Kuldeep Singh Minor Project Sample Report

AKS University Department of Computer Science
WEB DESIGNING
PROJECT REPORT
Submitted To:
AKS University,Satna
IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE
BACHELORS OF THE COMPUTER APPLICATION OF
COMPUTER SCIENCE AND ENGINEERING by

Kuldeep Singh
B2192R10400030
Under the Supervision of

Dr. Akhilesh A. Waoo
Department of Computer Science and Engineering

Faculty of Engineering and Technology
AKS UNIVERSITY
SATNA-485001 (INDIA)2023-2024
Kuldeep Singh(B2192R10400030) Chat-i

CERTIFICATE-I
This certify that the project report entitled “Chat-i” submitted by partial fulfilment of
the requirement for the Bachelors of Computer Application in Aug-Feb 2022-2023
AKS University, Satna is a bonafide project work carried out by Kuldeep
Singh(B2192R10400030), under my supervision. The subject of the project report has
been approved by supervisor. This is also to certify that it is his/her original work and
no part of this project is report has been submitted for any other degree.
All the assistance the and help received during the course of the investigation has been
duly acknowledged.
1. I am satisfied that the report presented by Kuldeep Singh is worthy of

consideration for award of the degree.
2. I certify:-
i) That he/she pursued the prescribed course of research.
ii) That he/she bears good moral character.
Place: AKSU, Satna Supervision
Date:17/08/2023 (Head of Department
(Computer Science & Engineering)

CERTIFICATE BY THE CANDIDATE
I certify that the project report entitled “Chat-i” is my own work conducted under the
supervision of Dr. Akhilesh A. Waoo, (Supervisor), Department of Computer Science
& Engineering, AKS University, Satna for partial fulfilment of the requirement for the
Bachelors of Computer Application (Aug-Feb 2022-23).
I further certify that to the best of my knowledge and belief the project report does
not contain any part of this work which has been submitted for the award of any
degree either in this university or in any other University/ Deemed University/
Institutes.
Place: AKSU, Satna …………………………..
Date: Signature of Candidate
Kuldeep Singh
……………………………. ………………………………
Supervisor : Forwarded By:
Dr. Akhilesh A. Waoo HOD: Dr. Akhilesh A. Waoo

SELF DECLARATION
I hereby declare that the work presented in this project entitled "Chat-i" towards the
partial fulfilment of the requirement for the award of Bachelors of Computer
Application in Department of Computer Science, AKS University, SATNA (M.P.) is
an authentic record of my own work.
I have not submitted the matter embodied in the project for the award of any other
degree or diploma to any other institute or university.
Kuldeep Singh (B2192R10400030)

B.C.A.(Hons.)

ACKNOWLEDGEMENT
It is a great for me in taking this opportunity to express my sincere thanks and
ineptness to Dr. Akhilesh A.Waoo, Head of the Department of Computer Science,
AKS University, SATNA (M.P.)
I consider myself lucky enough to have such a great project. This project would add
as an asset to my profile.
At this moment of accomplishment, first of all I pay homage to my guide, Dr.
Akhilesh A. Waoo from AKS University SATNA. This work would not have been
possible without his guidance, support and encouragement. Under his guidance I
successfully overcame many difficulties and learned a lot.
I am deeply and forever indebted to my parents for their love, support and
encouragement throughout my entire life.

ABSTRACT
A chat-i website is an online platform that allows users to communicate with

each other in real-time through text, voice, and video messages. The website
provides a user-friendly interface that enables users to connect with each
other, either through one-on-one conversations or group chats. It offers
various features such as emoticons, file sharing, voice and video calls, and
encryption for security purposes. The chatting website serves as a social
networking tool, facilitating connections and interactions between
individuals from different parts of the world. It has become an integral
communication tool for people of all ages, from teenagers to adults, and has
revolutionized the way people interact with each other online. The website's
success is largely dependent on its ability to provide an intuitive and
engaging user experience that fosters communication and socialization.

TABLE OF CONTENT
• Introduction……...……………………………………………………………8
• Purpose…………………………………………………………………….......9
• Benefits…..………………………………………………………………………10
• Technical Overview……………………………………………………….….1
• Html……………………………………………………………………….…………24
• Css………………………………………………………………………...….........25
• JavaScript…………………………………………………………..……..………25
• System Configuration…..………………………………………………….…26
• Block Diagram…………………………………………………….……….……..27
• Flow Chart…………………………………………………………………………..28
• DFD Diagram……………………………………………………………….........29
• Coding…………………………………………………………………………………30
• Output Screen……………..………………………………………………........65
• Future Enhancement……………………………………………………….....67
• Conclusion……………………………………………………………………………68

INTRODUCTION
Welcome to (chat-i)our chatting website! Our platform is designed to

provide a safe and user-friendly environment for individuals to connect and
communicate with each other in real-time. We understand the importance
of staying connected with friends, family, and colleagues, regardless of
where they are in the world. That's why we've created a platform that makes
it easy for you to stay in touch with the people who matter most to you.
(chat-i)our chatting website offers a range of features that enable you to

communicate through text, voice, and video messages. You can create one-
on-one conversations or group chats with people you know, and stay
connected with them at all times. Our website also offers a variety of
customization options, including emoticons, themes, and backgrounds, so
you can personalize your experience and make it unique to you.
At (chat-i)our chatting website, we take the privacy and security of our users
very seriously. We use advanced encryption technology to protect your
conversations and ensure that your data is safe from prying eyes.
Additionally, we have a dedicated team of moderators who work tirelessly to
keep our platform free from spam, scams, and inappropriate content.
We believe that communication is the key to building strong relationships,

and (chat-i)our chatting website is designed to help you do just that.
Whether you're looking to catch up with old friends, collaborate with
colleagues on a project, or simply chat with like-minded people, our
platform has something for everyone. So why not sign up today and start
chatting?

PURPOSE
The purpose of our (chat-i) chatting website is to provide a convenient and

secure platform for individuals to connect and communicate with each
other in real-time. We aim to foster relationships and facilitate social
interactions between people from all walks of life, regardless of their
geographic location or background.
Our platform is designed to be intuitive and user-friendly, with a range of

features that enable you to customize your experience and make it unique to
you. We believe that communication is the foundation of strong
relationships, and our website is designed to help you build and maintain
those relationships with ease.
We are committed to ensuring the privacy and security of our users, and
have implemented advanced encryption technology and moderation tools to
keep our platform safe from scams, spam, and inappropriate content. We
want our users to feel safe and comfortable using our platform, and to be
able to connect with others without fear of being targeted by malicious
actors.
Ultimately, our purpose is to create a welcoming and inclusive community

where people can come together to share their thoughts, ideas, and
experiences, and build meaningful connections with others. Whether you're
looking to make new friends, catch up with old ones, or collaborate with
colleagues, our chatting website is here to help you achieve your goals.

BENEFITS
1. Convenient communication: Our website provides a user-friendly

platform for individuals to communicate with others from anywhere and
at any time. This can be particularly useful for individuals with busy
schedules or who are geographically distant from each other.
2. Real-time interaction: Our platform enables users to communicate with

each other in real-time, providing a more natural and engaging way of
communicating compared to email or social media. This can help build
and maintain relationships and foster a sense of community.
3. Customizable experience: Our platform offers a range of customization

options, including emoticons, themes, and backgrounds, allowing users to
personalize their experience and make it more enjoyable and unique to
them.
4. Privacy and security: We take the privacy and security of our users very
seriously and have implemented advanced encryption technology and
moderation tools to keep our platform safe from scams, spam, and
inappropriate content. This can help users feel confident using our
platform and ensure that their conversations remain private.
5. Global reach: Our chatting website provides a platform for individuals

from all over the world to connect and communicate with each other. This
can be particularly useful for individuals who are looking to make new
friends or connect with others from different cultures and backgrounds.
10

AKS University Department Of Compute Science
TECHNICAL OVERVIEW
a. HTML:-
HTML is a markup language that defines the structure of your content.
HTML consists of a series of elements, which you use to enclose, or wrap,
different parts of the content to make it appear a certain way, or act a certain
way. The enclosing tags can make a word or image hyperlink to somewhere
else, can italicize words, can make the font bigger or smaller, and so on.
A web browser can read HTML files and compose them into visible or
audible web pages. The browser does not display the HTML tags, but uses
them to interpret the content of the page. HTML describes it a mark-up
language rather than a programming language.
What is HTML used for? Structuring web

pages:
With tags and elements, we can define the headings, paragraphs, and other
contents of a web page. Browsers come with a built-in stylesheet that visually
differentiates these elements. Content surrounded with tags <h1> will have a
large, bolded font and its own line. Surrounding text with <h2> tags will
make it bold and slightly smaller than the <h1> elements, and so on.
Without these tags, the text on the web page would all look the same.
Navigating the internet:

Navigating the internet would be much harder without HTML. Imagine
having to manually enter the URL of every web page you wanted to visit.
This would be our reality without anchor tags. HTML's anchor tags allow us
to link pages to and from each other using the href attribute.
Embedding images and videos:
11

HTML also allows you to not only embed images into a webpage but also
adjust their width, height, position, and even the way they're rendered.
Along with embedding videos, you can use other HTML attributes to adjust
video controls, timestamps, thumbnails, autoplay, and more.
Improving client-side data storage and offline capabilities:

HTML also improved the language's offline capabilities. Websites use
cookies to store data about users that can be retrieved later when they revisit
the site. Cookies work well for small data like authentication tokens and
usernames, but HTML5's addition of local Storage and Index DB enabled
browsers to store more complex data.
Plus, the application cache and cache manifest files you can reference from
HTML allow users to browse a website while offline by retaining data on the
user's machine.
This allows your web app to continue functioning even if a user's connection
drops.
Game development:
While you can't create video games purely with HTML, the <canvas>
element makes it possible to build video games in your browser using CSS
and JavaScript. In the past, you could only do this with Flash or Silverlight.
But with modern HTML, you can create both 2D and 3D games that run in
your browser.
Interacting with native APIs:

Another feature of HTML is that it can interact with your operating system,
not just with your web browser. These features make it possible to drag files
onto a web page to upload them, full-screen a video, and more.
12
Advantages:
• HTML is one of the most commonly used languages in the world.

It’s used by nearly 93.4% of all websites worldwide. Most websites
you use every day were likely written in HTML.
• Many (if not all) browsers support the use of HTML. This is the
industry standard, so you can rest assured that most people will be
able to view your website on their browsers.
• HTML is one of the easiest languages to learn. It’s accessible for
absolute beginners because of how straightforward it is compared
to other languages.
• HTML is lightweight and loads very fast on most browsers. This
allows you to make sure even the most impatient of people will get
to see your website.
• HTML is the free and default choice. You don’t need to download
or purchase extra software to make it run.
• HTML is reasonably flexible and has a simple syntax.
• HTML allows you to use plenty of ready-made templates. That will
enable you to create a professional-looking website very fast and
with very little knowledge.
• HTML has a lot of tags and attributes. These seriously cut down on
the amount of code you need to use.
• HTML lets you store session data with the user using the local
storage option, which helps to reduce cookie size.
b. CSS:-
1. CSS stands for Cascading Style Sheets.
2. CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.
3. CSS saves a lot of work.
13

4. It can control the layout of multiple web pages all at once.
5. External style sheets are stored in CSS files.
6. CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
There are three types of CSS which are given below:
• Inline CSS: Inline CSS contains the CSS property in the body
section attached with element is known as inline CSS. This kind of
style is specified within an HTML tag using the style attribute.
• Internal or Embedded CSS:This can be used when a single HTML
document must be styled uniquely. The CSS rule set should be
within the HTML file in the head section i.e. the CSS is embedded
within the HTML file.
• External CSS: External CSS contains separate CSS file which
contains only style property with the help of tag attributes (For
example class, id, heading,
… etc). CSS property written in a separate file with .css extension
and should be linked to the HTML document using link tag. This
means that for each element, style can be set only once and that will
be applied across web pages.
What is CSS used for?

It is used to add style to a web page by dictating how a site is displayed on a
browser.
CSS is unique in that it doesn’t create any new elements, like HTML or
JavaScript. Instead, it’s a language used to style HTML elements. CSS is
responsible for the text style, size, positioning, colour, and more on a website.
It’s also what controls how a website’s style shifts between desktop and mobile
versions. Without CSS, websites would look pretty boring. It is used to alter the
14
font, colour, size, and spacing of your content, split it into multiple columns, or
add animations and other decorative features.
Advantages:
There are many reasons why you’ll want to use CSS in web design. First, CSS
can save you time. Once you have a style sheet created, you can use it multiple
times. The best practice for CSS is to save it as a .css file, separate from
your .html file. The style sheet can then be linked to your HTML file. When
you find a style that you like, you can apply it to as many pages as you’d like.
Second, CSS is efficient. Only a few lines of code are required to dictate the
style on a webpage, which speeds up loading time and keeps files relatively
lightweight. Lastly, it’s easy for users to learn and update, which makes global
changes to style simple and quick.
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, etc. CSS saves time − You can write CSS once
and then reuse the same sheet in multiple HTML pages.
15

JAVASCRIPT:-
JavaScript is a dynamic computer programming language. It is lightweight

and most commonly used as a part of web pages, whose implementations
allow client-side script to interact with the user and make dynamic pages. It
is an interpreted programming language with object-oriented capabilities.
1. JavaScript is a lightweight, interpreted programming language.
2. Designed for creating network-centric applications.
3. Complementary to and integrated with Java.
4. Complementary to and integrated with HTML.
5. Open and cross-platform.
JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be
interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs
that interact with the user, control the browser, and dynamically create HTML
content.
What is JavaScript used for?
1.Adding interactive behaviour to web page

JavaScript allows users to interact with web pages.
There are almost no limits to the things you can do with JavaScript on a web
page –
a. Show or hide more information with the click of a button.
b. Change the colour of a button when the mouse hovers over it.
c. Slide through a carousel of images on the homepage.
d. Zooming in or zooming out on an image.
e. Displaying a timer or count-down on a website.
16
f. Playing audio and video in a web page.

g. Displaying animations.
2.Creating web and mobile apps
Developers can use various JavaScript frameworks for developing and

building web and mobile apps. JavaScript frameworks are collections of
JavaScript code libraries that provide developers with pre-written code to use
for routine programming features and tasks—literally a framework to build
websites or web applications around.
Popular JavaScript front-end frameworks include React, React Native,

Angular, and Vue. Many companies use Node.js, a JavaScript runtime
environment built on Google Chrome’s JavaScript V8 engine. A few famous
examples include LinkedIn, Netflix, and Uber.
3.Building web servers and developing server applications
Beyond websites and apps, developers can also use JavaScript to build simple
web servers and develop the back-end infrastructure using Node.js.
4.Game development
We can also use JavaScript to create browser games. These are a great way for
beginning developers to practice their JavaScript skills.
Advantages:
• Less server interaction − You can validate user input before sending the
page off to the server. This saves server traffic, which means less load
on your server.
• Immediate feedback to the visitors − They don't have to wait for a page
reload to see if they have forgotten to enter something.
17

• Increased interactivity − You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard.
• Richer interfaces − You can use JavaScript to include such items as

draganddrop components and sliders to give a Rich Interface to your
site visitors.
• Speed − Client-side JavaScript is very fast because it can be run
immediately within the client-side browser. Unless outside resources are
required, JavaScript is unhindered by network calls to a backend
server.
• Simplicity − JavaScript is relatively simple to learn and implement.
• Popularity − JavaScript is used everywhere on the web.
• Interoperability − JavaScript plays nicely with other languages and can

be used in a huge variety of applications.
• Server Load − Being client-side reduces the demand on the website

server.
18
SYSTEM CONFIGURATION
Hardware Requirement
Processor: Intel Core Due 2.0 GHz or more

RAM: 4 GB or more
Hard Disk: 512 GB or more
Monitor: 15” CRT, or LCD Monitor

Keyboard: Normal or Multimedia
Mouse: Compatible Mouse
Software Requirement
Front end and back end: HTML, CSS, JAVASCRIPT

Window: Window7, Window Xp, Window8, Window 10, Window 11
Data base: My SQL
Web Server: XAMPP Server
Web Browser: Mozilla Firefox, Google Chrome
Addition: S/W Notepad++, phpMyAdmin
19

BLOCK–DIAGRAM
20
FLOW -CHART
21

DFD-DIAGRAM
22
23

24
CODING
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Antique Bakery Cafe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?
family=Raleway:wght@300;400;500;
600&family=Oswald:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/tooplate-antique-cafe.css">
</head>
<body>
<div id="intro" class="parallax-window" data-parallax="scroll"

dataimagesrc="img/antique-cafe-bg-01.jpg">
<nav id="tm-nav" class="fixed w-full">
25

<div class="tm-container mx-auto px-2 md:py-6 text-right">

<button class="md:hidden py-2 px-2" id="menu-toggle"><i class="fas fa-2x fa-
bars tm-text-gold"></i></button>
<ul class="mb-3 md:mb-0 text-2xl font-normal flex justify-end flex-col md:flex-
row">
<li class="inline-block mb-4 mx-4"><a href="#intro" class="tmtextgold py-1
md:py-3 px-4">Intro</a></li>
<li class="inline-block mb-4 mx-4"><a href="#menu" class="tmtextgold py-1
md:py-3 px-4">Menu</a></li>
<li class="inline-block mb-4 mx-4"><a href="#about" class="tmtextgold py-1
md:py-3 px-4">About</a></li>
<li class="inline-block mb-4 mx-4"><a href="#contact" class="tmtext-gold py-1
md:py-3 px-4">Contact</a></li>
</ul>
</div>
</nav>
<div class="container mx-auto px-2 tm-intro-width">
<div class="sm:pb-60 sm:pt-48 py-20">
<div class="bg-black bg-opacity-70 p-12 mb-5 text-center">
<h1 class="text-white text-5xl tm-logo-font mb-5">Antique Cafe</h1>
<p class="tm-text-gold tm-text-2xl">your daily energy booster</p>
</div>
<div class="bg-black bg-opacity-70 p-10 mb-5">
<p class="text-white leading-8 text-sm font-light">
This is a coffee shop template named Antique Cafe which is a
parallax HTML5 template with a good responsiveness.
Feel free to use this layout for your cafe.
26
If you have any question, please <a rel="nofollow"

href="https://www.tooplate.com/contact" target="_parent">send us a
message</a>. </p>
</div>
<div class="text-center">
<div class="inline-block">
<a href="#menu" class="flex justify-center items-center bg-black bg-opacity-70
py-6 px-8 rounded-lg font-semibold tm-text-2xl tm-text-gold hover:text-gray-
200 transition">
<i class="fas fa-coffee mr-3"></i>
<span>Let's explore...</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="menu" class="parallax-window" data-parallax="scroll"

<div class="container mx-auto tm-container py-24 sm:py-48">
<div class="text-center mb-16">
<h2 class="bg-white tm-text-brown py-6 px-12 text-4xl font-medium inline-
block rounded-md">Our Cafe Menu</h2>
</div>
<div class="flex flex-col lg:flex-row justify-around items-center">
<div class="flex-1 m-5 rounded-xl px-4 py-6 sm:px-8 sm:py-10 tmbgbrown tm-
item-container">
27

-
<div class="flex items-start mb 6 tm-menu-item">
<img src="img/menu-item-1.jpg" alt="Image" class="roundedmd">
<div class="ml-3 sm:ml-6">
<h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tm-textyellow">Hot
Cappuccino</h3>
<div class="text-white text-md sm:text-lg font-light mb-1">S $8.50</div>
<div class="text-white text-md sm:text-lg font-light">L $10.50</div>
</div>
</div>
<div class="flex items-start mb-6 tm-menu-item">
Americano</h3>
<div class="text-white text-md sm:text-lg font-light mb-1">S $9.50 . BG
#544639</div>
</div>
</div>
<h3 class="text-lg sm:text xl mb-2 sm:mb-3 tm-textyellow">Hot Latte
#FC6</h3>
<div class="text-white text-md sm:text-lg font-light mb-1">M $11.75</div>
28
Kuldeep Singh(B2192R10400030)Chat-i
-
</div>
</div>
<h3 class="text-lg sm:text-xl tm-text-yellow mb-1">Hot Espresso</h3>
Chocolate</h3>
<div class="text-white text-md sm:text-lg font-light">Size M $11.75 . L
$14.75</div>
</div>
</div>
</div>
<div class="flex-1 m-5 rounded-xl px-4 py-6 sm:px-8 sm:py-10 tmbgbrown
tm-item-container">
<div class="flex items-start justify-end mb-6 tm-menu-item-2">
<div class="text-right mr-6">
<h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tmtextyellow">Iced
Cappuccino</h3>
<div class="text-white text-md sm:text-lg font-light mb1">Small $10</div>
<div class="text-white text md sm:text-lg font-light">Large $15</div>
</div>
</div>
29
-
<h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tmtextyellow">Iced
Americano</h3>
<div class="text-white text-md sm:text-lg font-light mb1">Small
$12.50</div>
<div class="text-white text-md sm:text-lg font-light">Large $16.50</div>
</div>
</div>
<h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tmtextyellow">Iced Milky
Latte</h3>
<div class="text-white text-md sm:text-lg font-light mb1">Small $14</div>
<div class="text-white text-md sm:text-lg font-light">Large $18</div>
</div>
30
</div>
<h3 class="text-lg sm:text-xl tm-text-yellow mb-1">Iced Espresso</h3>
<h3 class="text-lg sm:text-xl mb-2 sm:mb-3 tmtextyellow">Iced Mocha</h3>
<div class="text-white text-md sm:text-lg font-light">Small $10 . Large
$15</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about" class="parallax-window" data-parallax="scroll"
<div class="container mx-auto tm-container py-24 sm:py-48">
<div class="tm-item-container sm:ml-auto sm:mr-12 mx-auto sm:px-0 px-4">
<div class="bg-white bg-opacity-80 p-12 pb-14 rounded-xl mb-5">
<h2 class="mb-6 tm-text-green text-4xl font-medium">About our cafe</h2>
<p class="mb-6 text-base leading-8">
Images are taken from Pexels, a great stock photo website. This
template used Tailwind CSS. You may modify Antique Cafe template in any
way you prefer and use it for your website.
</p>
<p class="text-base leading-8">
If you wish to <a rel="nofollow"
31
href="https://www.tooplate.com/contact" target="_parent">support
us</a>,
please make a little donation via PayPal. That would be
very helpful. Another way is to tell your friends about Tooplate
website. Thank you. </p>
</div>
<a href="#contact" class="inline-block tm-bg-green transition textwhite text-
xl pt-3 pb-4 px-8 rounded-md">
<i class="far fa-comments mr-4"></i>
Contact
</a>
</div>
</div>
</div>
<div id="contact" class="parallax-window relative" data-parallax="scroll"
data-image-src="img/antique-cafe-bg-04.jpg">
<div class="container mx-auto tm-container pt-24 pb-48 sm:py-48">
<div class="flex flex-col lg:flex-row justify-around items-center
lg:itemsstretch">
<div class="flex-1 rounded-xl px-10 py-12 m-5 bg-white bg-opacity-80 tm-
item-container">
<h2 class="text-3xl mb-6 tm-text-green">Contact Us</h2>
<p class="mb-6 text-lg leading-8">
Praesent tellus magna, consectetur sit amet volutpat eu,
pulvinar vitae sem.
Sed ultrices. bg white 80% alpha. btn #066
</p>
<p class="mb-10 text-lg">
32
<span class="block mb-2">Tel: <a href="tel:0100200340" class="hover:text-

yellow-600 transition">010-020-0340</a></span>
<span class="block">Email: <a href="mailto:info@company.com"
class="hover:text-yellow-600 transition">info@company.com</a></span>
</p>
<div class="text-center">
<a href="https://www.google.com/maps" class="inline-block textwhite text-
2xl pl-10 pr-12 py-6 rounded-lg transition tm-bg-green">
<i class="fas fa-map-marked-alt mr-8"></i>
Open Maps
</a>
</div>
</div>
<div class="flex-1 rounded-xl p-12 pb-14 m-5 bg-black bg-opacity-50 tm-item-
container">
<form action="insert.php" method="POST" class="text-lg">
<input type="text" name="name" class="input w-full bg-black
border-b bg-opacity-0 text-white px-0 py-4 mb-4 tm-border-gold"
placeholder="Name" required="" />
<input type="email" name="email" class="input w-full bg-black
placeholder="Email" required="" />
<input type="text" name="message" rows="6" class="input wfull bg-black
placeholder="Message..." required=""></input>
<div class="text-right">
<input type="submit" name="submit" class="text-white hover:text-yellow-
500 transition">
</div>
33
</form>
</div>
</div>
<footer class="absolute bottom-0 left-0 w-full">
<div class="text-white container mx-auto tm-container p-8 text-lg flex flex-
col md:flex-row justify-between">
<span>Isha kumari
</span>
<span class="mt-5 md:mt-0">Design: <a
href="https://www.tooplate.com" target="_parent">Tooplate</a></span>
</div>
</footer>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script><script>
function checkAndShowHideMenu()
{ if(window.innerWidth < 768) {
$('#tm-nav ul').addClass('hidden');
} else {
$('#tm-nav ul').removeClass('hidden');
}
}
34
$(function(){
var tmNav = $('#tm-nav');
tmNav.singlePageNav();
checkAndShowHideMenu();
window.addEventListener('resize', checkAndShowHideMenu);
$('#menu-toggle').click(function(){
$('#tm-nav ul').toggleClass('hidden');
});
$('#tm-nav ul li').click(function()
{ if(window.innerWidth < 768) {
$('#tm-nav ul').addClass('hidden');
}
});
$(document).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if(distanceFromTop > 100) {

tmNav.addClass('scroll');
} else {
tmNav.removeClass('scroll');
}
});
35
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
</body>
</html>
External CSS Code:-
body {
font-family: 'Raleway', sans-serif;
backgroundcolor: #666;
}
pa{
color: #FF6;
36
p a:hover {
color: #9FF;
}
#about p a { color: #066; }

#about p a:hover { color: #F36; }
#contact p a { color: #066; }
footer span a { color: #FFF; }
.tm-logo-font {
font-family: 'Oswald', sans-serif;
}
.tm-container
{ maxwidth: 1200px;
}
.parallax-window
{ minheight: 1064px;
background: transparent;
}
37
.tm-text-yellow
{ color: #FC6;
}
.tm-text-gold
{ color: #CC9966;
}
.tm-text-brown
{ color: #544639;
}
.tm-text-green
{ color: #006666; }
a.tm-bg-green:hover
{ backgroundcolor: #0a8585;
}
.tm-bg-brown
{ backgroundcolor: #544639;
}
.tm-bg-green
{ backgroundcolor: #006666;
}
38
.tm-border-gold { bordercolor:
#CC9966;
}
.tm-intro-width
{ maxwidth: 436px;
}
.tm-item-container
{ maxwidth: 520px;
}
.input:focus { outline: none

!important; border:1px solid #CC9966; box-shadow: 0 0
10px #b67533;
}
input::placeholder,
textarea::placeholder
{ color: rgb(214, 212, 212);
opacity: 1;
}
input:-ms-input-placeholder, textarea:ms-input-
placeholder { color:
rgb(214, 212, 212);
}
39
input::-ms-input-placeholder, textarea::-
ms-input-placeholder { color: rgb(214,
212, 212);
}
#tm-nav { zindex:
1000; transition:
all 0.3s ease;
#tm-nav.scroll
{ backgroundcolor:
rgba(0,0,0,0.7);
}
#tm-nav li a { border-bottomcolor:
transparent; transition: all
0.3s ease;
}
#tm-nav li a.current, #tm-nav li

a:hover { border-bottom: 4px solid
#CC9966;
}
40
.tm-text-2xl { fontsize:
1.2rem; lineheight:
2rem;
}
@media (min-width: 768px)

{ #tmnav.scroll .tm-container
{ padding-top:
10px; padding-bottom: 10px;
}
}
@media (max-width: 767px) {

#tm-nav { width:
auto; right: 0;
border-radius: 5px;
}
}
@media (max-width: 639px)

{ .parallax-window
{ minheight: 600px;
}
}
41
@media (max-width: 370px) { .tm-

menu-item { flexdirection:
column;
}
.tm-menu-item-2 { flexdirection:
column-reverse; }
.tm-menu-item img
{ marginbottom: 10px;
}
.tm-menu-item-2 img
{ marginbottom: 10px;
}
}
}
abbr[title] {
-webkit-text-decoration: underline dotted;
textdecoration: underline dotted;
} b, strong
{ fontweight: bolder;
}
42
code,
kbd,
samp,
pre
{ fontfamily:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace;
}
small { fontsize:
80%;
}
sub, sup { font-size:
75%; line-height: 0;
position: relative;
vertical-align: baseline;
}
sub { bottom: -
0.25em;
}
43
sup { ::before, ::after

{ boxsizing: border-box;
borderwidth: 0; border-
style: solid; border-color:
currentColor;
}
hr {
border-top-width: 1px;
}
img { border-style:
solid;
}
textarea {
resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; color: #9ca3af;
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1; color: #9ca3af;
44
input::placeholder,
textarea::placeholder
{ opacity: 1; color:
#9ca3af;
}
button
{ cursor:
pointer;
}
table { border-collapse:
collapse;
}
h1, h2,
h3, h4,
h5, h6
{
font-size: inherit;
fontweight: inherit;
}
45
button, input,
optgroup, select,
textarea { padding:
0; line-height:
inherit; color:
inherit;
}
pre, code,
kbd,
samp
{ font-
family:
ui-
monospa
ce,
SFMono-
Regular,
Menlo,
Monaco,
Consolas,
"Liberati
on
Mono",
"Courier
New",
46
monospa
ce;
@media (min-width: 1024px) {

.container
{ maxwidth: 1024px;
}
}

.container
{ maxwidth: 1280px;
}
}

.container
{ maxwidth: 1536px;
}
}
.fixed
{ position:
fixed;
}
47
.absolute
{ position:
absolute;
}
.relative
{ position:
relative;
}
.bottom-0
{ bottom: 0px;
}
.left-0
{ left: 0px;
}
.m-5 { margin:
1.25rem;
}
.mx-4 { margin-left:
1rem; margin-right:
1rem;
}
48
.mx-auto
{ marginleft:
auto;
marginright: auto;
}
.mt-5 { margin-top:
1.25rem;
}
.mr-3 { margin-right:
0.75rem;
}
.mr-4
{ marginright:
1rem;
}
.mr-6 { margin-right:
1.5rem;
}
.mr-8
{ marginright:
2rem;
49
.mb-1 { margin-bottom:
0.25rem;
}
0.5rem;
}
0.75rem;
}
.mb-4 { marginbottom:
1rem;
}
1.25rem;
}
1.5rem;
}
.mb-10 { marginbottom:
2.5rem;
50
.mb-16 { margin-
bottom: 4rem;
}
.ml-3 { margin-left:
0.75rem;
}
.block
{ display:
block;
}
.inline-block
{ display: inline-
block;
}
.flex
{ display:
flex;
}
51
.table
{ display:
table;
}
.hidden { display:
none;
52
AKS University Department Of Compute
Science
.w-full {
width: 100%;
}
.flex-1
{ flex: 1 1
0%;
}
@-webkit-keyframes spin {
to
{ transform:
rotate(360deg)
;
}
}
@keyframes spin
{ to
{ transform:
rotate(360deg);
}
}
--tw-bg-opacity: 0.8;
Chat-i
}
58
Kuldeep Singh(B2192R10400030)
AKS University
.p-8 { padding:
2rem;
}
.p-10 { padding:
2.5rem;
}
.p-12
{ padding:
3rem;
}
.px-0
{ paddingleft:
0px;
paddingright: 0px;
}
.px-2 { padding-left:
0.5rem; padding-right:
0.5rem;
Department Of Compute Science
}
padding-
Science
1rem; right: 1rem;
2rem; padding-right:
2rem;
}
2.5rem; padding-right:
2.5rem;
}
.px-12
{ paddingleft:
3rem;
paddingright: 3rem;
}
.py-1 { padding-top:
0.25rem; padding-bottom:
55
0.25rem;
}
0.5rem; bottom: 0.5rem;
padding-
60
Kuldeep Singh(B2192R10400030)Chat-i AKS University
1rem; padding-bottom:
1rem;
}
.py-6 { padding-
top: 1.5rem;
paddingbottom:
1.5rem;
}
3rem;
}
5rem;
}
6rem; bottom: 6rem;
padding-
57
Science
.pt-3 { padding-top:
0.75rem;
}
.pt-24
{ paddingtop:
6rem;
}
.pr-12
{ paddingright:
3rem;
}
.pb-4 { paddingbottom:
1rem;
}
3.5rem;
}
12rem;
}
58
AKS University
.pl-10 { padding-left:
2.5rem;
}
.text-center
{ textalign: center;
}
.text-right
{ textalign: right;
}
.text-lg { font-
size: 1.125rem;
lineheight:
1.75rem;
}
.text-xl { font-size:
1.25rem; line-height:
1.75rem;
}
59
.text-2xl { font-size:
1.5rem;
line-height: 2rem;
}
.text-3xl { font-
size: 1.875rem;
lineheight:
2.25rem;
}
.text-4xl { font-
size: 2.25rem;
lineheight: 2.5rem;
}
.text-5xl
{ fontsize:
3rem;
lineheight: 1;
}
.font-light
{ fontweight: 300;
}
60
61
OUTPUT SCREEN
62
65
64
FUTURE -ENHANCEMENT
The traditional coffee shop often shares similarities with many other retail experiences: it all
starts with one or more fixed cashier stations, some still with mechanical cash drawers.
Although there’s a certain performance art in the craft behind coffee shops (i.e. the barista
preparing the coffee), the experience still revolves around the standard retail point-of-sale.
To update the point-of-sale with new product items can be quite cumbersome and — due to the
nature of retail — such point-of-sale (PoS) systems tend to result in queues which slow, and
sometimes stop, the customer experience entirely. Some coffee shops have even abandoned
the point-of-sale for a simple card reader with manual input per transaction. For coffee shops
the point-of-sales are also often positioned near where coffee and food is prepared and
distributed, making the structure altogether chaotic and haphazard at peak times.
The orders placed at the traditional point-of-sale in a coffee shop is typically shared verbally,
physically (with a receipt), or occasionally electronically with the kitchen staff and baristas, if
these roles are separate. The queue is processed one-by-one, sub-optimally, regardless of how
busy or sedate the café is.
At the end of the day, the till receipts are calculated, physical cash is tallied, and a balance
sheet, in one way or another, is updated so that the café management can see where the sales
trends are, and what stock is needed. This often ignores waste and training stock, which are
typically forgotten about.
With the most modern PoS solutions, such as Square, you can see how the trends move
throughout the day. None of this data however enhances the customer experience, nor does it
significantly improve the running of a modern coffee shop. At this point we’re gathering
swathes of data and none of it impacts the customer experience (CX) at all. The focus is on the
bottom line of the balance sheet only, and opaque data like this rarely provides us with valuable
insights we can use to grow a business.
67
CONCLUSION
The result indicated that it is ideal for the society and coffee shops to adopt and
implement drive-thru services. This is to enhance the effectiveness and
efficiency within the production and distribution systems. This will enhance
quality services thus saving time and energy of consumers as they seek to
address demands and preferences in relation to consumption of coffee. Coffee is
also vital for many reasons. This explains the response majority on the need to
adopt and implement coffee shops away from the buildings within Western
Illinois University. Erection of coffee shops away from the buildings within the
Western Illinois University will enhance the opportunity for students to enjoy
services form the shops on a 24/7 basis. This relates to the essence of quality
area, plenty of space and other products, and quiet environment to facilitate
social needs such as meetings and bonding activities.
In the execution of the research, the sample size was minimal to provide
effective generalization in relation to the conclusion. This was a limitation to the
execution of the study. Lack of financial resources also limited the essence of
executing quality research process this limiting the sample size to 60
participants. In the event of conducting future research method, it is ideal to
increase the size of the population sample thus ability to minimize elements of
biasness. Another limitation to the execution of the research study was the
unwillingness of the respondents to participate in the research process. This is
because of lack of financial motivation to enhance participation of the
population sample towards achieving the goals of the study. From this
experiment, it is ideal to conclude that coffee shops should act towards serving
variation in demands and preference of the students and other stakeholders.
This is though operating on a 24/7 basis thus providing the opportunity to
enable students to address their needs at will (Lewis, 2011).
66

Kuldeep Singh Minor Project Sample Report

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

Kuldeep Singh Minor Project Sample Report

Uploaded by

Copyright:

Available Formats

AKS University Department of Computer Science

COMPUTER SCIENCE AND ENGINEERING by

Under the Supervision of

Department of Computer Science and Engineering

Kuldeep Singh(B2192R10400030) Chat-i

1. I am satisfied that the report presented by Kuldeep Singh is worthy of

ii) That he/she bears good moral character.

Place: AKSU, Satna Supervision

Date:17/08/2023 (Head of Department

(Computer Science & Engineering)

Kuldeep Singh(B2192R10400030) Chat-i

CERTIFICATE BY THE CANDIDATE

supervision of Dr. Akhilesh A. Waoo, (Supervisor), Department of Computer Science

Bachelors of Computer Application (Aug-Feb 2022-23).

degree either in this university or in any other University/ Deemed University/

Place: AKSU, Satna …………………………..

Date: Signature of Candidate

Supervisor : Forwarded By:

Dr. Akhilesh A. Waoo HOD: Dr. Akhilesh A. Waoo

Kuldeep Singh(B2192R10400030) Chat-i

Kuldeep Singh (B2192R10400030)

Kuldeep Singh(B2192R10400030) Chat-i

Kuldeep Singh(B2192R10400030) Chat-i

A chat-i website is an online platform that allows users to communicate with

Kuldeep Singh(B2192R10400030) Chat-i

Kuldeep Singh(B2192R10400030) Chat-i

Welcome to (chat-i)our chatting website! Our platform is designed to

(chat-i)our chatting website offers a range of features that enable you to

We believe that communication is the key to building strong relationships,

Kuldeep Singh(B2192R10400030) Chat-i

The purpose of our (chat-i) chatting website is to provide a convenient and

Our platform is designed to be intuitive and user-friendly, with a range of

Ultimately, our purpose is to create a welcoming and inclusive community

Kuldeep Singh(B2192R10400030) Chat-i

1. Convenient communication: Our website provides a user-friendly

2. Real-time interaction: Our platform enables users to communicate with

3. Customizable experience: Our platform offers a range of customization

5. Global reach: Our chatting website provides a platform for individuals

Kuldeep Singh(B2192R10400030) Chat-i

What is HTML used for? Structuring web

Navigating the internet:

Embedding images and videos:

Kuldeep Singh(B2192R10400030) Chat-i

Improving client-side data storage and offline capabilities:

Interacting with native APIs:

• HTML is one of the most commonly used languages in the world.

Kuldeep Singh(B2192R10400030) Chat-i

4. It can control the layout of multiple web pages all at once.

5. External style sheets are stored in CSS files.

There are three types of CSS which are given below:

What is CSS used for?

Kuldeep Singh(B2192R10400030) Chat-i

JavaScript is a dynamic computer programming language. It is lightweight

What is JavaScript used for?

1.Adding interactive behaviour to web page

f. Playing audio and video in a web page.

Developers can use various JavaScript frameworks for developing and

Popular JavaScript front-end frameworks include React, React Native,

3.Building web servers and developing server applications

Kuldeep Singh(B2192R10400030) Chat-i

• Richer interfaces − You can use JavaScript to include such items as

• Simplicity − JavaScript is relatively simple to learn and implement.

• Popularity − JavaScript is used everywhere on the web.