Project Report (Famedd)

Jamia Millia Islamia
A Central University
PROJECT REPORT
ON
FAMEDD
Submitted By :
ASHAR AHMAD (20DCS8008)
FARHAN KHALID (20DCS8015)
ADNAN SAMI (20DCS8004)
In the partial Fulfillment of

Diploma in Computer Engineering
Under the supervision of

Dr. Sunil
Supervisor, Computer Engineering
UNIVERSITY POLYTECHNIC
Faculty of Engineering & Technology
December 202
ACKNOWLEDGEMENT
I take this opportunity to express my gratitude to my project guide Dr. Sunil for his
endeavour encouragement and support throughout this endeavour . His insight and
expertise in this field
motivated and supported me during the duration of this project. It is my privilege and
honor to have worked under his supervision, his invaluable guidance and helpful
discussion in every stage if this project really helped me in materializing this project.
Without his constructive direction and invaluable advice, this work would not have been
complete. I would also like to take this opportunity to present us sincere regards to Dr.
Sunil, Coordinator,
Computer Engineering, Jamia Millia Islamia New Delhi, for this. My gratitude is also
extended to all teaching and nonteaching staff for their unwavering encouragement and
support in our pursuit for academics. I wish to express my deepest love for my parents
& family, whose endless love, understanding, and support during all these years has
been the greatest assets in my life.
Place: New Delhi

Date: December 10, 2022
FARHAN KHALID (20DCS8015)

ASHAR AHMAD (20DCS8008)
ADNAN SAMI (20DCS8004)
2
ABSTRACT
The idea of this project came to us when we were working on another project. An
acquaintance of ours asked us to make a website for his business which was basically
a car shop or you can say a dealership of cars for which he was willing to give us a
certain amount of money, since he knew that we were in 3rd year of our diploma and
have a knowledge of web development. we agreed to make that project for him since
we were getting good profit margin and making a project like that would be good with
regards to our studies.
while we were creating the project and had created the UI we showed the UI to some
people and we saw more people being interested in having their own website and were
willing to give us money to make their website for them so, we thought while we are
making websites for other why don't we make a website for ourselves which will help
us in reaching out to more people and have our own business and with that thought
FAMEDD was born.
This project is aimed at developing a website that, if you want a website for yourself
or for your business will help you get in touch with us, choose what kind of website
you want and various features that you might like to have in your website. In today's
world it has become necessary for small businesses to take themselves online have
their and have their websites. After the COVID-19 everyone now prefers to shop
online, from groceries to clothes to food everything is now available for you to order
online since every large brand or even a smaller one have their own websites from
where you can shop but a small businessman or shop owner don't have the kind of
money that these big businesses have to spend on a website. So, for those people we
have created this project called FAMEDD that will help you get a website which
will look as good as the websites of big name brands and would be affordable by
you, we will create your UI for you taking in your inputs will provide you with QR
solutions and if necessary will give you a database also to store information of the
users which are coming to you and help you to compete in this new age of business.
3
Table of Contents
Chapter No. Topics Page No.
CHAPTER 1: INTRODUCTION 06
❖ Project Title 07
❖ 1.2 Introduction 07
❖ 1.3 Objective 08
❖ 1.4 Scope 08
CHAPTER 2: SURVEY 09
❖ 2.1 Manual System 10
❖ 2.2 Proposed System 10
❖ 2.3 System Requirment 10
CHAPTER 3: FUNCTIONALITY 12
❖ 3.1 submit 13
❖ 3.2 Work flow 14
CHAPTER 4: COMPONENTS 15
❖ 4.1 Technologies Used 16
❖ 4.1.1 Front End Technology 16
❖ 4.1.2 Back End Technology 19
❖ 4.2 My SQL 21
❖ 4.3 Sublime Text Editor 22
❖ 4.4 Software Requirement Life Cycle 22
4
CHAPTER 5: IMPLEMENTATION 27
❖ 5.1 Home Page 28
❖ 5.2 Submit Form 48
CHAPTER 6: DATA BASE 58

❖ 6.1 Submit Data Base 59
CHAPTER 7: CONCLUSIONS 60
❖ 7.1 Conclusion 61
❖ 7.2 Future Work 61
5
CHAPTER 1
INTRODUCTION
6
1.1 Project title
"FAMEDD"
1.2 Introduction
This project is aimed at developing a website that, if you want a website for yourself or
for your business will help you get in touch with us, choose what kind of website you
want and various features that you might like to have in your website. In today's world
it has become necessary for small businesses to take themselves online have their and
have their websites.
After the COVID-19 everyone now prefers to shop online, from groceries to clothes to
food everything is now available for you to order online since every large brand or even
a smaller one have their own websites from where you can shop but a small businessman
or shop owner don't have the kind of money that these big businesses have to spend on
a website.
So, for those people we have created this project called FAMEDD that will help you get
a website which will look as good as the websites of big name brands and would be
affordable by you, we will create your UI for you taking in your inputs will provide you
with QR solutions and if necessary will give you a database also to store information of
the users which are coming to you and help you to compete in this new age of business.
7
1.3 Objective
(i) Provide a Interface to user to build here business live with the help of Websites.
(ii) In our Regular life we see that more people are taking there business live with help
of websites and FAMEDD.com can make the websites in the best price and give
the website a premium look.
1.4 Scope
This project is aimed at developing a website that, if you want a website for yourself or
for your business will help you get in touch with us, choose what kind of website you
want and various features that you might like to have in your website. In today's world
it has become necessary for small businesses to take themselves online have their and
have their websites. After the COVID-19 everyone now prefers to shop online, from
groceries to clothes to food everything is now available for you to order online since
every large brand or even a smaller one have their own websites from where you can
shop but a small businessman or shop owner don't have the kind of money that these
big businesses have to spend on a website.
8
CHAPTER – 2
SURVEY
9
2.1 Manual System
The manual system of FAMEDD is not Complex the user will submit their information and
the submitted information will save in the MYSQL Database After the submission of data
about the user the message will be sent to the user number that are given by the user and saved
in the Data base. The message will be sent to user through the whatsapp and through the Email
and then the debate of contract will start with user . FAMEDD is just the interface for the user
to give their information after that we will contact Him.
2.3 Proposed System

The system of FAMEDD is not Complex the user will submit their information and the
submitted information will save in the MYSQL Database After the submission of data about
the user the message will be sent to the user number that are given by the user and saved in
the Data base. The message will be sent to user through the whatsapp and through the Email
and then the debate of contract will start with user . FAMEDD is just the interface for the user
to give their information after that we will contact Him.
System will contain following features:

1. Display Information about missing person
2. Adding new complaint.
3. Removing Complaints
4. Searching person by attribute such as name, location etc
2.4 System Requirement

(i) Hardware Requirement Programmer
➢ A computer with Core i3 2.3GHz or higher processor, 4GB RAM.
➢ Minimum 100 GB Hard Disk Space recommended.

➢ Broadband connection or internet.
10
➢ 1024X768 Pixels Screen Resolution for proper viewing of Screens.
➢ A Smart Phone with full features
➢ A computer with Core i3 2.3GHz or higher processor, 4GB RAM.
➢ Minimum 100 MB storage space and 512 MB RAM
➢ 1024X768 Pixels Screen Resolution for proper viewing of Screens
(ii) Software requirement

➢ Programmer
➢ Operating System: Windows 7 Home Basic
➢ Scripting language : HTML CSS
➢ Photoshop Tool : ADOBE PHOTOSHOP
➢ Platform: SUBLIME TEXT EDITOR
➢ Backend programming language : PHP
➢ Operating System : ANDROID Jelly Bean 4.3 and Above
➢ A computer with Core i3 2.3GHz or higher processor, 4GB RAM
11
CHAPTER – 3
FUNCTIONALITY
12
3.2 Submit
13
3.2 Work Flow
14
CHAPTER 4
COMPONENTS
15
4.1 Technologies used
4.1.1 Front End Technology
HTML:-
HTML stands for Hypertext Markup Language. It allows the user to create and
structure sections, paragraphs, headings. links, and blockquotes for web pages and
applications.
HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in
Switzerland. He came up with the idea of an Internet-based hypertext system.
Hypertext means a text that contains references (links) to other texts that viewers can
access immediately. He published the first version of HTML in 1991, consisting of 18
HTML tags. Since then, each new version of the HTML language came with new tags
and attributes (tag modifiers) to the markup.
According to Mozilla Developer Network's HTML Element Reference, currently, there

are 140 HTML tags, although some of them are already obsolete (not supported by
modern browsers).
Due to a quick rise in popularity, HTML is now considered an official web standard. The
HTML specifications are maintained and developed by the World Wide Web Consortium
(W3C). You can check out the latest state of the language anytime on W3C's website.
The biggest upgrade of the language was the introduction of HTML5 in 2014. It added
several new semantic tags to the markup, that reveal the meaning of their own content,
such as <article>, <header>, and <footer>.
HTML documents are files that end with a .html or .htm extension. You can view then
using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser
reads the HTML file and renders its content so that internet users can view it.
Usually, the average website includes several different HTML pages. For instance: home
pages, about pages, contact pages would all have separate HTML documents.
Each HTML page consists of a set of tags (also called elements), which you can refer to
as the building blocks of web pages. They create a hierarchy that structures the content
into sections, paragraphs, headings, and other content blocks.
Most HTML elements have an opening and a closing that use the <tag></tag> syntax.
Below, you can see a code example of how HTML elements can be structured:
16
<h 1>The Main Heading</h
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="lmage">
<a href="https://example.com">hyperlink</a></p>
</div>
The outmost element is a simple division (<div></div>) you can use to mark up bigger
content sections.
It contains a heading (<h l></hl>), a subheading (<h2></h2>), two paragraphs
(<p></p>), and an image (<img>).
The second paragraph includes a link (<a></a>) with a href attribute that contains the
destination URL.
The image tag also has two attributes: src for the image _path and alt for the image
description.
css:-
CSS stands for Cascading Style Sheets. They are used to describe all the style
that will be applied to the various elements (tags) on the HTML page. In this context,
the term style means all the color, fonts, and placement of pictures and content on the
page. It does not refer to the content itself. You can think of style sheets as an over-
arching style template for your Web pages.
As shown in the static HTML vs. Dynamic HTML lecture, style or presentation is the
look of the Web page, whereas the text or pictures on a page are the content. They are
two separate things already. CSS makes a clear distinction between the two and literally
separates one from the other.
Style sheets come in three types:
inline style attributes are used inline with the HTML tags. For example:
<p style="color: red">When in the course...</p>
This would style the paragraph red, but just this one paragraph on the page. Using this
type of style sheet, you would have to individually style other p tags on the page if you
also want those to be red. This is an inefficient style sheet concept.
17
embedded (internal) — style information is in a <style> tag which is nested in the
<head> tag of a single Web page. For example:
<style type="text/css"> p
{color: red;}
This would style all the paragraphs on this one Web page red. This is more powerful,
but if you want to style all the p tags on your other Web pages using this model, then
you'd have to add this code to them all. If your site contains hundreds of pages, this
could take a while.
linked (external) the style is in one .css file that is linked to multiple Web pages. The link
tag on the page is connected to the external file. For example:
<link rel="stylesheet" type="text/css" href="styles.css" />

In a case like this, all the Web pages in an entire site and there could be dozens, hundreds,
or thousands! -- could be linked to this one external style sheet file. If that file contained
a selector that specified the p tag was red, all the p tags throughout all the pages of the
site would be styled that color.
In Web design, this is as powerful as it gets. Your goal is to make it so all of your pages
can be connected to a style sheet that contains all the style rules for your site (all pages).
In this case, if you want to make a change to all the pages, you just update the style rule
in the one .css file, and -- voila! -- all the pages linked to it are automatically updated.
18
4.1.2 Backend language:-
PHP:-
PHP started out as a small open source project that evolved as more and more people
found out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way
back in 1994.
PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
PHP is a server side scripting language that is embedded in HTML. It is used to manage
dynamic content, databases, session tracking, even build entire e-commerce sites.
It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle,

Sybase, Informix, and Microsoft SQL Server.
PHP is pleasingly zippy in its execution, especially when compiled as an Apache module
on the Unix side. The MySQL server, once started, executes even very complex queries
with huge result sets in record-setting time.
PHP supports a large number of major protocols such as POP3, IMAP, and LDAP.
PHP4 added support for Java and distributed object architectures .COM and CORBA),
making ntier development a possibility for the first time.
PHP is forgiving: PHP language tries to be as forgiving as possible.
PHI) Syntax is C-Like.
Common uses of PHP

P HP performs system functions, i.e. from files on a system it can create, open, read, write,
and close them.
PHP can handle forms, i.e. gather data from files, save data to a file, through email you can
send data, return data to the user.
You add, delete, modify elements within your database through PHP.
Access cookies variables and set cookies.
Using PHP, you can restrict users to access some pages of your website.
It can encrypt data.

Characteristics of PHP
Five important characteristics make PHP's practical nature possible
19
Simplicity
Efficiency Security
Flexibility
Familiarity
"Hello World" Script in PHP
To get a feel for PHP, first start with simple P HP scripts. Since "Hello, World!" is an
essential example, first we will create a friendly little "Hello, World!" script.
As mentioned earlier, PHP is embedded in HTML. That means that in amongst your
normal HTML (or XHTML if you're cutting-edge) you'll have PHP statements like this
—
Demo
<html>
<head>
<title>Hello World</title>
</head>
<body> echo "Hello,
</body>
</html>
It will produce following result —
Hello, World!
If you examine the HTML output of the above example, you'll notice that the PHP code
is not present in the file sent from the server to your Web browser. All of the PHP present
in the Web page is processed and stripped from the page; the only thing returned to the
client from the Web server is pure HTML output.
All PHP code must be included inside one of the three special markup tags ATE are
recognised by the PHP Parser.
<?php PHP code goes here ?>
<? PHP code goes here ?>
<script language = "php"> PHP code goes here </script>

A most common tag is the <?php...?> and we will also use the same tag in our tutorial.
20
From the next chapter we will start with PHP Environment Setup on your machine and
then we will dig out almost all concepts related to PHP to make you comfortable with
the PHP language
4.2MYSQL:-
➢ MY SQL is a database system used on the web
➢ MY SQL is a database system that runs on a server
➢ MY SQL is ideal for both small and large applications
➢ MY SQL is very fast, reliable, and easy to use
➢ MYSQL uses standard SQL
➢ MY SQL compiles on a number of platforms
➢ MY SQL is free to download and use
MY SQL is developed, distributed, and supported by Oracle Corporation

MYSQL is named after co-founder Monty Widenius's daughter
ySQL
21
4.3 Sublime Text Editor:-
Sublime Text is a shareware cross-platform source code editor with a Python application
programming interface. It natively supports many programming languages and markup
languages, and functions can be added by users with
Plugins typically community-built and maintained under free-software licenses.
Sublime Text editor is a sophisticated text editor which is widely used among developers.
It includes wide features such as Syntax Highlight, Auto Indentation, File Type
Recognition, Sidebar, Macros, Plug-in and Packages that make it easy for working with
code base. This tutorial gives you a comprehensive coverage of concepts of Sublime Text
and makes you comfortable to use it in your software development projects .
4.4Software Development Life Cycle

SDLC is a process used by the software industry to design, develop and test high quality
softwares. The SDLC aims to produce a high-quality software that meets or exceeds
customer expectations, reaches completion within times and cost estimates.
The following figure is a graphical representation of the various stages of a typical SDLC
22
Type of SDLC
✓ Waterfall Model
✓ V-Shaped Model
✓ Agile Model
✓ Spiral Model
✓ Big Bang Model
23
SDLC Used
Our project follows the waterfall model. The steps of waterfall model are:- Requirement
Definition
✓ System and Software Design
✓ Implementation
✓ Integration and System Testing

✓ Operation and Maintenance
The software development process can be broken down into the

following steps:
Step I
✓ Required to determine if the project is feasible
✓ Create high level overview of project, including project requirements and scope
✓ Define the problem that needs to be solved
✓ Project planning and scheduling
Step 2
✓ Understand and document user's requirements for the project

✓ Expand on project overview and create detailed project definition
✓ Documents the requirements, scope and business objectives of the project in detail.
Step 3
✓ This step describes the programs objectives and application design

✓ Document functional requirements (what the program is supposed to do) and
nonfunctional requirements (system, performance, usability, security
requirements, etc.)
24
Step 4
✓ Coding phase of the project

✓ Specifications and functional requirements are translated into programming code
✓ Create online help and test plans

✓ Update project plan and schedule
Step 5
✓ Different pieces or modules of code are combined together, to create the program
✓ Several testing methodologies are implemented to find any bugs or imperfections
that may not have been caught in the previous phases
✓ Testing ensures that the program complies with all technical specifications as well
as user and design requirements
✓ Create acceptance plan and define test cases
✓ Design and implementation modifications are made
✓ Modify and update online help
Step 6
✓ Software is presented to the user and comments or questions are addressed
✓ Make necessary changes to project plan and schedule
Step 7
✓ Any changes after the product has been delivered are considered maintenance.
✓ Changes can occur due to unexpected input values or changes in the data
25
Software Development Process
26
CHAPTER 5
IMPLEMENTATION
27
5.1 Home page
❖ Home Page Look
28
29
30
❖ Home page Code (HTML)
<!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>FAMEDD.in</title>
<link rel="shortcut icon" href="Images/fam.png" type="image/x-icon">
<link rel="stylesheet" href="Css/FAMEDD.css">
<link rel="stylesheet" href="Css/responsive.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
31
<body>
<section id="vid-main">
<video autoplay muted loop preload="metadata" id="vid-vid">
<source src="Videos/simple color.mp4" type="video/mp4">
</video>
<div class="content" id="header">
<div class="cont-left" id="navbar">
<a href="FAMEDD.html"><img src="images/icon.jpeg" alt="error 1"
width="50px" height="50px" id="image">
<h1 class="">FAMEDD</h1>
</a>
</div>

</div>
<div class="anim-text">
<span id="span" class="font"></span>
</div>
<div class="cont-anim anim-js-2">
<h1>Time to Make your Buisness Live and Fast Just Click the Button</h1>
</div>
<div class="button anim-js-3">
<a href="html/button.html"><button class="btn" id="on-click"><span
class="hover-effect"></span>Get Started</button></a>
</div>
</section>
<div class="buis-content title">
<h1>Flexible Business Solutions </h1>
</div>
<div class="buis-0">
<div class="buis-1 anim-js-1">
<h1 class="m-top">QR Solutions</h1>
<p class="m-top">Provide a contactless ordering experience, accept payments &
more with your store's QR
code.</p>
<img src="images/qr solutions.jpg" alt="error qr code" width="400px"
class="img-change">
</div>
<h1 class="m-top">Online Stores</h1>
<p class="m-top">Go digital in minutes with your own e-commerce website.</p>
<img src="Images/online_store.jpg" alt="error online store" width="400px"
class="img-change">
</div>
</div>
<h1 class="m-top">Payments</h1>
<p class="m-top">Accept payments quickly, easily & securely. Let shoppers pay
their way with multiple
payment options.</p>
32
<img src="Images/payment.jpg" alt="error qr code" width="400px" class="img-
change">
</div>
<h1 class="m-top">Upgrade Buisness</h1>
<p class="m-top">An online store is a website where buyers purchase goods or
services from.</p>
<img src="images/upgrade buisness.jpg" alt="error online store" width="400px"
class="img-change">
</div>
</div>
<h1 class="m-top">Marketplace Integrations</h1>
<p class="m-top">Create a centralised command for your business with our best-
in class marketplace
integrations.</p>
<img src="images/Marketplace Integrations.jpg" alt="error qr code"
width="400px" class="img-change">
</div>
<h1 class="m-top">Delivery</h1>
<p class="m-top">Smartly manage all your deliveries with our seamless 3rd
party integrations.</p>
<img src="Images/Delivery.jpg" alt="error online store" width="400px"
class="img-change">
</div>
</div>
<div class="hover-img">
<div class="head-change">
<div class="changement">
<h1 id="cont-1" class="square hover-change-1 title">Food & Beverage</h1>
<p class="p-change anim-js-1">Tools that connect the front of house with
the back of house and integrate
everything that you need to run your restaurant into one
dashboard.</p>
</div>
<h1 id="cont-2" class="square hover-change-2 anim-js-2" >Retail</h1>
<p class="p-change anim-js-1">Everything you need to build and run your e-
commerce website with tools like
inventory management, marketing and more.</p>
</div>
<h1 id="cont-3" class="square hover-change-3 title">Services</h1>
<p class="p-change anim-js-1">All the tools you need to deliver the best
customer service with features like ePOS
and CRM.</p>
</div>
33
<h1 id="cont-4" class="square hover-change-4 anim-js-2">Others</h1>
<p class="p-change anim-js-1" >Flexible for any use case.</p>
</div>
</div>
<div class="change-video anim-js-2">
<video autoplay muted loop preload="metadata" width="600px" height="800px"
id="slider" class="slider">
<source src="Videos/blacked.icon.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="built-code">
<video autoplay loop muted preload="metadata" class="built-code-change">
<source
src="https://cdn.sanity.io/files/599r6htc/localized/4caa8274fa1a76f5df188b7969c41e2b008908
01.mp4"
type="video/mp4">
</video>
</div>
<div class="famedd-start">
<center>
<h1 class="title">Build and grow your business with FAMEDD.</h1>
</center>
<center>
<p class="famedd-p anim-js-1">Get all the tools you need to take your business
to the next level & join the millions
of merchants using FAMEDD.</p>
</center>
<a href="html/button.html"><center><button class="btn-2 btn-1"> <span
class="hover-effect"></span> Get Started</button></center></a>
</div>
<footer class="last-start">
<div class="last-second">
<div class="last-cont">
<div class="flex">
<div class="full-cont">
<h1 class="title">Online Store</h1>
<p class="anim-js-1">E-commerce Website</p>
<p class="anim-js-1">Custom Domain</p>
<p class="anim-js-1">Themes</p>
<p class="anim-js-1">Online Catalog</p>
</div>
<h1 class="title">Point of Sale</h1>
<p class="anim-js-2">Restaurant POS</p>
<p class="anim-js-2">Retail POS</p>
</div>
<h1 class="title">QR Solutions</h1>
<p class="anim-js-1">QR based Ordering</p>
34
<p class="anim-js-1">Digital Catalog</p>
<p class="anim-js-1">Digital Receipt</p>
<p class="anim-js-1">Digital Invoice</p>
</div>
<h1 class="title">More Tools</h1>
<p class="anim-js-2">Marketplace Integrations</p>
<p class="anim-js-2">Marketing Suite</p>
<p class="anim-js-2">Integrated Payments</p>
<p class="anim-js-2">Deliveries</p>
</div>
<h1 class="title">Business Types</h1>
<p class="anim-js-1">Pubs, Bars & Breweries</p>
<p class="anim-js-1">Dine-in</p>
<p class="anim-js-1">Quick Service</p>
<p class="anim-js-1">Cloud Kitchens</p>
<p class="anim-js-1">Hotels & In-room Dining</p>
<p class="anim-js-1">Cinemas</p>
<p class="anim-js-1">Food Courts</p>
<p class="anim-js-1">Drive Throughs</p>
<p class="anim-js-1">Bakeries</p>
<p class="anim-js-1">Apparel & Accessories</p>
<p class="anim-js-1">Home Furnishings & Decor</p>
<p class="anim-js-1">Beauty & Cosmetics</p>
<p class="anim-js-1">Workshops</p>
<p class="anim-js-1">Repair and Service</p>
<p class="anim-js-1">Salon</p>
<p class="anim-js-1">Supermarkets</p>
<p class="anim-js-1">Pharmacies</p>
<p class="anim-js-1">Florists</p>
</div>
<h1 class="title">FAMEDD</h1>
<p class="anim-js-2">Home</p>
<p class="anim-js-2">About</p>
<p class="anim-js-2">Press & Media</p>
<p class="anim-js-2">Partner with FAMEDD</p>
<p class="anim-js-2">Blog</p>
<p class="anim-js-2">Careers</p>
<p class="anim-js-2">Contact</p>
<p class="title"><a href="html/terms_and_conditions.html">Terms
and Conditions</p></a>
<p class="title"><a href="html/privacy_policy.html">Privacy
Policy</p></a>
</div>
</div>
</div>
</div>
<div class="f-t-i">
35
<div class="name-logo">
<img src="Images/fam.png" alt="error last" width="40px" height="40px">
<h1>FAMEDD</h1>
</div>
<div class="f-t-i-desc">
<a href="https://www.facebook.com/profile.php?id=100087870978245">
<img src="https://cdn.dotpe.in/cfe/image/social-icon-3-24-nov-
2021.png" alt="error facebook" class=""
width="25px" height="25px">
</a>
<a href="https://twitter.com/FAMEDD1">
2021.png" alt="error twiter" class=""
</a>
<a href="https://www.instagram.com/famedd_fd/">
2021.png" alt="error instagram" class=""
</a>
</div>
</div>
</footer>
<hr>
<div class="reserve">
<span>
©2022 FAMEDD, All rights reserved
</span>
</footer>
</div>
</body>
<script src="java script/FAMEDD.js"></script>
</html>
❖ Animation in Home page Code (JS)
<script>
ScrollReveal({
reset: true,
distance: '60px',
interval: 250,
delay: 1000
});
ScrollReveal().reveal('.anim-js', { delay: 50, origin: 'left' });
ScrollReveal().reveal('.title,.li-change,.anim-js-3', { delay: 100 });
ScrollReveal().reveal('.anim-js-1', { delay: 100, origin: 'left' });
ScrollReveal().reveal('.anim-js-2', { delay: 100, origin: 'right' });
</script>
36
❖ Home Page Style (CSS)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#blur {
height: auto;
}
#vid-main {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
/* background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken; */
}
#vid-vid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
z-index: -1;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px;
}
.cont-left {
display: flex;
justify-content: center;
margin-left: 50px;
margin-top: 10px;
}
.cont-left a {
list-style: none;
37
text-decoration: none;
}
.cont-left a img {
border: 2px solid transparent;
border-radius: 10px;
}
/* #3B9AE1 */
.cont-left a h1 {
margin-top: -45px;
margin-left: 55px;
color: white;
}
#span:before {
animation: anim-text 12s ease-in-out infinite;
content: "";
opacity: 0;
}
.font {
color: white;
}
@keyframes anim-text {
0% {
content: "Lost!!";
opacity: 1;
}
20% {
content: "Get your self Live";
opacity: 1;
}
40% {
content: "QR Solution";
opacity: 1;
}
60% {
content: "Payment";
opacity: 1;
}
80% {
content: "Upgrade Business";
opacity: 1;
}
38
100% {
content: "Get FAMED";
opacity: 1;
}
}
.anim-text {
display: flex;
font-size: 100px;
color: white;
margin-top: 120px;
}
.cont-anim {
display: flex;
color: white;
}
.button {
display: flex;
margin-top: 20px;
}
.btn {
width: 200px;
background-color: transparent;
border: 2px solid white;
color: white;
font-size: 30px;
padding: 15px;
transition: 0.5s;
position: relative;
overflow: hidden;
}
.hover-effect {
width: 0;
height: 100%;
background-color: black;
position: absolute;
39
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s ease-in;
}
.btn:hover .hover-effect {
width: 100%;
}
.btn:hover {
cursor: pointer;
border: none;
color: white;
}
.btn-2 {
width: 200px;
border: 2px solid black;
color: grey;
font-size: 30px;
padding: 15px;
transition: 0.5s;
position: relative;
overflow: hidden;
}
.hover-effect {
width: 0;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s ease-in;
}
.btn-2:hover .hover-effect {
width: 100%;
}
.btn-2:hover {
cursor: pointer;
border: none;
color: white;
40
}
.img-anim {
display: flex;
margin-top: 150px;
}
.img-1 {
border: 2px solid #9ED2C6;
margin-right: 20px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
}
.img-2 {
margin-left: 80px;
margin-right: 80px;
margin-bottom: 100px;
}
.img-3 {
}
#time {
font-size: 25px;
color: black;
margin-right: 40px;
}
.buis-content {
display: flex;
font-size: 30px;
margin-top: 100px;
.buis-0 {
display: flex;
41
height: 100%;
width: 100%;
margin-top: 40px;
}
.buis-1 {
border: 2px solid #EAE3D2;
width: 35%;
height: 50%;
margin-right: 50px;
font-family: gilroy-regular !important;
transition: box-shadow .5s linear
}
.buis-2 {
border: 2px solid #EAE3D2;
width: 35%;
height: 50%;
font-family: gilroy-regular !important;
transition: box-shadow .5s linear
}
.m-top {
margin: 50px;
}
.buis-1:hover {
cursor: pointer;
box-shadow: 5px 5px 5px #020a11, -3px -1px 0.7px #030b11;
}
.buis-2:hover {
box-shadow: 5px 5px 5px #0d0d0e, -3px -1px 0.7px #181819;
cursor: pointer;
}
.img-change {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
width: 100%;
}
.hover-img {
height: 100vh;
42
width: 100%;
display: flex;
color: white;
margin-top: 150px;
}
.square {
width: 45%;
color: #395B64;
}
.p-change {
width: 60%;
}
.square:hover {
color: #3B9AE1;
cursor: pointer;
}
.change-video {
width: 35%;
margin-right: 150px;
}
#slider {
height: 40%;
}
.head-change {
width: 60%;
margin-left: 150px;
}
.built-code-change {
margin-top: 50px;
width: 100%;
overflow: hidden;
}
.famedd-start h1 {
width: 50%;
font-size: 60px;
font-weight: bolder;
43
}
.famedd-p {
width: 50%;
font-weight: lighter;
font-size: 30px;
}
.btn-1 {
}
.sticky {
position: fixed;
top: 0;
left: 0;
background-color: white;
margin-top: 0px;
margin-left: 0px;
width: 100%;
height: 80px;
padding-left: 60px;
padding-right: 60px;
transition: margin 1.5s;
z-index: 10;
}
.sticky a {
margin-top: -5px;
}
.sticky a h1 {
color: #395B64;
}
.sticky .clock {
color: #395B64;
}
.last-start {
padding-top: 60px;
padding-bottom: 30px;
color: white;
}
.last-second {
44
max-width: 110em;
margin-left: auto;
margin-right: auto;
/* background-color: #9C9EFE; */
}
.last-cont {
/* background-color: #9ED2C6; */
max-width: 64rem;
margin-left: auto;
margin-right: auto;
}
.flex {
display: flex;
flex-direction: row;
}
.full-cont h1 {
font-size: 20px;
color: #395B64;
}
.full-cont p {
font-size: 15px;
}
.full-cont p a {
color: white;
}
.f-t-i {
margin-top: 100px;
display: flex;
}
.name-logo {
display: flex;
margin-left: 150px;
}
.name-logo img {
45
margin-right: 10px;
}
.name-logo h1 {
font-size: 20px;
margin-top: 8px;
}
.f-t-i-desc {
margin-right: 150px;
}
.f-t-i-desc a {
list-style: none;
margin-right: 10px;
}
.reserve {
color: #395B64;
padding-left: 150px;
padding-top: 30px;
padding-bottom: 30px;
}
a .btn {
list-style: none;
}
.hover-change-1 {
width: 42%;
}
.hover-change-2 {
width: 15%;
.hover-change-3 {
width: 20%;
}
.hover-change-4 {
width: 17%;
}
46
❖ Home Page JS
let a;
let date;
let time;
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
setInterval(() => {
a = new Date();
date = a.toLocaleDateString(undefined, options);
time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
document.getElementById('time').innerHTML = time;
}, 1000);
function changeImgone() {
document.getElementById('slider').src = "Videos/food and beverage.mp4";
}
let change_1 = document.getElementById('cont-1');
change_1.onmouseenter = function () { changeImgone() };
function changeImgtwo() {
document.getElementById('slider').src = "Videos/retail.mp4";
}
change_2.onmouseenter = function () { changeImgtwo() };
function changeImgthree() {
document.getElementById('slider').src = "Videos/Services.mp4";
}
change_3.onmouseenter = function () { changeImgthree() };
function changeImgfour() {
document.getElementById('slider').src = "Videos/coding.mp4";
}
change_4.onmouseenter = function () { changeImgfour() };
var menu = document.getElementById('header');

window.addEventListener('scroll', function () {
if (window.scrollY >= 600) {
menu.classList.add('sticky');
}
else {
menu.classList.remove('sticky');
}
})
47
5.2 Submit Form
❖Submit Form Code (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../Css/button.css">
<link rel="shortcut icon" href="../Images/button-favicon.webp" type="image/x-icon">
<title>Submit</title>
</head>
<body>
<section class="background">
<video loop autoplay preload="metadata" muted class="background-1">
<source src="../Videos/simple color.mp4" type="video/mp4">
</video>
<div class="logo">
<div class="img-cont">
<a href="../FAMEDD.html"><img class="img" src="../Images/fam.png"
alt="error logo" width="50px" height="50px">
<h1 class="h1">FAMEDD</h1>
</a>
</div>
</div>
48
<div class="box-login">
<div class="input-2">
<div class="one grid-func">
<form onsubmit="return validation()">
<input type="text" name="name" id="name" placeholder="Enter your
Name" required>
<hr>
<span id="message"></span>
</div>
<div class="two grid-func">
<input type="text" name="phone" id="phone" value=""
placeholder="Phone Number" required>
<hr>
<span id="messagesecond"></span>
</div>
</div>
<div class="one grid-func1">
<input type="email" name="email" id="email" placeholder="Enter your
Email" required>
<hr>
<span ></span>
</div>
<div class="two grid-func1">
<input type="text" name="about" id="about" placeholder="Enter the
Buisness Category" required>
<hr>
<span ></span>
</div>
</div>
<div class="about-famedd">
<img src="https://media.istockphoto.com/vectors/check-marks-tick-marks-
accepted-approved-yes-correct-ok-right-choices-vector-
id1408358104?b=1&k=20&m=1408358104&s=170667a&w=0&h=weSH-Y3GOcNsE99FVIBs5JevuwCdtYYTP6Ib3k-
CYtw=" alt="error right" width="35px"
height="35px">
<p>I here by provide my consent to receive emails, phone calls, messages
and other communications from FAMEDD to understand about FAMEDD services, offerings,
promotions and other related information.If you are agree then you can fill details this
is the Condition.</p>
</div>

<center><a href="../Html/famedd2.html">
<input type="submit" value="Request for Demo" class="btn" name="" id="submit">
</a> </center>
</div>
</form>
</section>
</body>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
49
<script src="../Java Script/button.js"></script>
</html>
❖Submit Form Style (CSS)

* {
margin: 0;
padding: 0;
}
input:focus {
outline: 0
}
.background {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
}
.background-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
z-index: -1;
}
.box-login {
background-color: white;
width: 60%;
height: 80%;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
50
.img-cont {
display: flex;
justify-content: left;
margin-top: 20px;
margin-left: 200px;
.h1 {
color: white;
margin-left: 55px;
margin-top: -44px;
}
a {
list-style: none;
}
.img {
}
.input-2 {
display: flex;
margin-top: 70px;
}
.one {
margin-top: 15px;
margin-left: 100px;
}
.two {
margin-top: 15px;
margin-left: 65px;
}
#name {
width: 290px;
font-size: 20px;
padding: 5px;
margin-bottom: 5px;
}
.two input {
51
width: 290px;
font-size: 20px;
padding: 5px;
margin-bottom: 5px;
}
#email {
width: 290px;
font-size: 20px;
padding: 5px;
margin-bottom: 5px;
}
span {
font-size: 18px;
margin-left: 10px;
color: red;
}
.grid-func1 {
margin-top: -40px;
}
.about-famedd {
display: flex;
margin-top: 80px;
margin-left: 20px;
margin-right: 20px;
}
.about-famedd img {
border-radius: 5px;
}
.about-famedd p {
margin-left: 10px;
font-size: 15px;
}
.confirm-check {
font-size: 18px;
margin-left: 20px;
color: green;
}
52
.btn {
background-color: #7cd1f9;
color: #fff;
border: none;
box-shadow: none;
border-radius: 5px;
font-weight: 600;
font-size: 20px;
padding: 20px 20px;
margin-top: 70px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
cursor: pointer;
transition: background-color 0.5s ease-in;
}
.btn:hover {
cursor: pointer;
border: 1px solid black;
color: grey;
.swal-icon--error__line {
margin-left: 0px;
}
.swal-icon--success__line {
margin-left: 0px;
}
a{
list-style: none;
}
❖Submit Form Validation (JS)
function validation() {
// Inpute Name Validation.
var a = document.getElementById('name').value;
var correct_way = /^[A-Za-z]+$/;
// if (a == "") {
// document.getElementById('message').innerHTML = "Please fill out this feild";
53
// return false;
// }
if (a.length > 20) {

document.getElementById('message').innerHTML = "More than 20 words not allowed";
return false;
}
if (a.length < 3) {
document.getElementById('message').innerHTML = "Less than 3 word not allowed";
return false;
}
if (a.match(correct_way))
true;
else {
document.getElementById('message').innerHTML = "Only alphabet No number,symbols and
space";
return false;
}
// Inpute Phone number Validation
var b = document.getElementById('phone').value;
if (b.length > 10) {

document.getElementById('messagesecond').innerHTML = "Number not valid";
return false;
}
if (b.length < 10) {
document.getElementById('messagesecond').innerHTML = "Number is not valid";
return false;
}
if (isNaN(b)) {
document.getElementById('messagesecond').innerHTML = "Enter only Numeric Value";
return false;
}
if ((b.charAt(0)!=9) && (b.charAt(0)!=8) && (b.charAt(0)!=7) && (b.charAt(0)!=6)){
document.getElementById('messagesecond').innerHTML = "Enter the correct number";
return false;
}
window.addEventListener('load', () => {
document.getElementById('name').value = "";
})
document.getElementById('phone').value = "";
})
document.getElementById('email').value = "";
})
54
document.getElementById('about').value = "";
})
let submit = document.getElementById('submit');

submit.addEventListener ('click',function(){
if(a.length == true){
swal ({
title: "Submission Completed!",
text: "We will contact you as soon as possible.",
icon: "success",
button: "OK",
});
}
else{
return false
}
})
❖Submit Form Saving Data (PHP)

<?php
$insert = false;
if(isset($_POST['name'])){
$server = "localhost";
$username = "root";
$paswordd = "";
$icon = mysqli_connect($server,$username,$paswordd);
if(!$icon){
die("ERROR:Connection Failed".mysqli_connect_error());
}
$name = $_POST['name'];
$phone_number = $_POST['phone'];
$email = $_POST['email'];
$Buisness = $_POST['biusness'];
$sql = "INSERT INTO `famedd`.`submit` (`name`,`phone`,`email`,`biusness`,`date`) VALUES

('$name','$phone_number','$email','$Buisness', current_timestamp());";
// echo $sql;
if($icon->query($sql) == true){
$insert = true;
}
else{
echo "ERROR: $sql <br> $icon->error";
55
}
$icon->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="button.css">
<link rel="shortcut icon" href="button-favicon.webp" type="image/x-icon">
<title>Submit Port Folio</title>
</head>
<body>
<section class="background">
<video loop autoplay preload="metadata" muted class="background-1">
<source src="video.mp4" type="video/mp4">
</video>
<div class="logo">
<div class="img-cont">
<a href="FAMEDD.html"><img class="img" src="fam.png" alt="error logo"
<h1 class="h1">FAMEDD</h1>
</a>
</div>
</div>
<div class="box-login">
<div class="one grid-func">
<form action="button.php" method ="post" onsubmit="return validation()">
<input type="text" name="name" id="name" placeholder="Enter your
Name" required>
<hr>
<span id="message"></span>
</div>
<div class="two grid-func">
<input type="phone" name="phone" id="phone" placeholder="Phone
Number" required>
<hr>
<span id="messagesecond"></span>
</div>
</div>
<div class="one grid-func1">
<input type="email" name="email" id="email" placeholder="Enter your
Email" required>
<hr>
<span id="one span"></span>
56
</div>
<div class="two grid-func1">
<input type="text" name="biusness" id="biusness" placeholder="Enter
the Buisness Category" required>
<hr>
<span id="two span"></span>
</div>
</div>
<div class="about-famedd">
<img src="https://media.istockphoto.com/vectors/check-marks-tick-marks-
accepted-approved-yes-correct-ok-right-choices-vector-
id1408358104?b=1&k=20&m=1408358104&s=170667a&w=0&h=weSH-Y3GOcNsE99FVIBs5JevuwCdtYYTP6Ib3k-
CYtw=" alt="error right" width="35px"
height="35px">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, quae
eum. Aliquid laudantium ullam excepturi expedita saepe? Tempore est nobis ex dignissimos
quod alias vero asperiores. Ipsa accusamus assumenda sapiente?</p>
</div>
<span class="confirm-check"><center></center></span>
<center><input type="submit" value="Request for Demo" class="btn"></center>
</div>
</form>
</section>
</body>
<script src="button.js"></script>
</html>
57
CHAPTER 6
DATA BASE
58
6.1 Submit Data Base
59
CHAPTER 7
CONCLUSIONS
60
7.1 Conclusions
Introductions and conclusions can be difficult to write, but they’re worth investing time in.
They can have a significant influence on a reader’s experience of your paper.
Just as your introduction acts as a bridge that transports your readers from their own lives
into the “place” of your analysis, your conclusion can provide a bridge to help your readers
make the transition back to their daily lives. Such a conclusion will help them see why all
your analysis and information should matter to them after they put the paper down.
Your conclusion is your chance to have the last word on the subject. The conclusion allows
you to have the final say on the issues you have raised in your paper, to synthesize your
thoughts, to demonstrate the importance of your ideas, and to propel your reader to a new
view of the subject. It is also your opportunity to make a good final impression and to end on
a positive note.
Your conclusion can go beyond the confines of the assignment. The conclusion pushes
beyond the boundaries of the prompt and allows you to consider broader issues, make new
connections, and elaborate on the significance of your findings.
Your conclusion should make your readers glad they read your paper. Your conclusion gives
your reader something to take away that will help them see things differently or appreciate
your topic in personally relevant ways. It can suggest broader implications that will not only
interest your reader, but also enrich your reader’s life in some way. It is your gift to the
reader.
7.2 Future Work

Over time we will update this further
We will also add other things to it

Like : our Websites Templates , UI etc.
61

Project Report (Famedd)

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

Project Report (Famedd)

Uploaded by

Copyright:

Available Formats

Jamia Millia Islamia

In the partial Fulfillment of

Under the supervision of

Place: New Delhi

FARHAN KHALID (20DCS8015)

Chapter No. Topics Page No.

CHAPTER 6: DATA BASE 58

2.3 Proposed System

System will contain following features:

2.4 System Requirement

➢ A computer with Core i3 2.3GHz or higher processor, 4GB RAM.

➢ Minimum 100 GB Hard Disk Space recommended.

(ii) Software requirement

4.1.1 Front End Technology

According to Mozilla Developer Network's HTML Element Reference, currently, there

Style sheets come in three types:

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

PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle,

PHP is forgiving: PHP language tries to be as forgiving as possible.

PHI) Syntax is C-Like.

Common uses of PHP

Access cookies variables and set cookies.

It can encrypt data.

<body> echo "Hello,

<?php PHP code goes here ?>

<? PHP code goes here ?>

<script language = "php"> PHP code goes here </script>

MY SQL is developed, distributed, and supported by Oracle Corporation

4.4Software Development Life Cycle

✓ Big Bang Model

✓ System and Software Design

✓ Integration and System Testing

The software development process can be broken down into the

✓ Understand and document user's requirements for the project

✓ This step describes the programs objectives and application design

✓ Coding phase of the project

✓ Create online help and test plans

✓ Software is presented to the user and comments or questions are addressed

✓ Make necessary changes to project plan and schedule

❖ Home Page Look

❖ Animation in Home page Code (JS)

var menu = document.getElementById('header');

❖Submit Form Code (HTML)

❖Submit Form Style (CSS)

❖Submit Form Validation (JS)

if (a.length > 20) {

if (b.length > 10) {

let submit = document.getElementById('submit');

❖Submit Form Saving Data (PHP)

$sql = "INSERT INTO `famedd`.`submit` (`name`,`phone`,`email`,`biusness`,`date`) VALUES

7.2 Future Work

We will also add other things to it

You might also like