ABSTRACT

With the advent of Information Technology in the last decade, the major focus has shifted
from manual systems to computerized systems. Various systems viz. railway reservation,
hospital management etc. involving manual work have been automated efficiently.
Student course registration process in colleges involve filling registration forms manually,
getting it signed by respective subject teachers, and then getting the documents
acknowledged from the concerned Advisors, College Deans and Accounts Officers
respectively. Finally the registration forms are submitted in the Administrative Branch. As is
evident, this process is very laborious and time consuming. An Online Student Course
Registration System has been developed to simplify the current manual procedure. This
system has been developed using PHP, jQuery, Apache and MySQL. The front-end is
designed using PHP with excerpts of code written using jQuery and back-end is designed
and managed through MySQL. This system software is more secured, user-friendly and less
time-consuming.

Keywords: PHP, MySQL, jQuery, Apache, HTML, CSS, XAMPP, Adobe XD

 ACKNOWLEDGEMENT
First and foremost we would like to express our gratitude to our guide Mrs.Padma Rajani
madam & other faculty member for giving us wonderful opportunity to work on the project.
We are very thankful to him who was always ready to lend their helping hand to us. This
project has giving us fair exposure to some of the very interesting features of “Online
Course” and “PHP” along beyond doubt it will help us in the short and long run. We are very
grateful to him introducing me to some of very exciting features of “Online Course”.

We are also thankful to all my teachers of “Guru Nanak Institutions Technical campus”.
Who were simply full ideas and whenever there was any need they shared those great ideas
and concept with us. And in the end, we would like to thank all those who helped us during
the testing phase of the project.

THAKING YOU………
 DECLARATION

I hereby declare that the project work entitled “Online Course” submitted to the “Guru
Nanak Institutions Technical Campus”, is a record of an original work done by me
under the guidance of Mrs.Padma Rajani madam, Faculty Member, “Guru Nanak
Institutions Technical Campus”, Hyderabad, and this project work has not performed
the basis for the award of any Degree or diploma/ associate ship/fellowship and similar
project if any.

Rohan Pd Gupta, 16WJ1A05R5

Rahul Sah, 16WJ1A05Q1
R.suman, 16WJ1A05Q6
P.vasavi, 16WJ1A0536
 TABLE OF CONTENTS

Contents Page no

ABSTRACT ………………………………………………………………………... I
ACKNOWLEDGEMENT………………………………………………………… II
DECLARATION……………………………………………………………...........III
1. OBJECTIVE…………….………………………………..………………... 7
1.1 INTRODUCTION .…………………………………..………...……... 7
1.2 PROJECT OVERVIEW…………………………….………………… 7
1.3 DESIGN AND DEVELOPMENT ENVIRONMENT………………... 7
1. BRIEF OVERVIEW OF THE TECHNOLOGY………………………….....8

1.1 TECHNOLOGIES USED IN THE PROJECT……………………………8

2.1.1 HTML………………………………………………………………8
2.1.2 CSS…………….………..…………………………………………..8
2.1.3 JAVA……….……………..............................................................8
2.1.4 PYTHON….…………………..........................................................8

TABLE OF CONTENTS

CHAPTER TITLE PAGE

NO.
NO.

ABSTRACT I
II
ACKNOWLEDGEMENT
III
DECLARATION
 1. OBJECTIVE 4

INTRODUCTION 5

PROJECT OVEROVIEW 6

BRIEF OVERVIEW OF THE TECHNOLOGY 8

REQUIREMENT ANALYSIS 11

2. TECHNOLOGIES USED IN THE PROJECT 12

HTML 12
CSS 22

ADOBEXD 25

PHP 33

MYSQL 40

DATABASE STRUCTURES AND TABLE DETAILS 43

3. DESIGN AND IMPLEMENTATION OF ONLINE ATTENDANCE 52

MANAGEMENT SYSTEM
HOME PAGE 52

STUDENT DASHBOARD 52

FACULTY LOGIN/SIGN UP 53

53
ABOUT PAGE
54
CONTACT PAGE
54
FACULTY DASHBOARD
55
AVERAGE ATTENDANCE STATISTICS
55
FACULTY PROFILE
56
MARKING ATTENDANCE 56
STUDENT’S ATTENDANCE TRACKER
 OBJECTIVE
Starting the project, we should fully know about the meaning of project. There are
seven letters in the word “PROJECT”. Each character has its own technical meaning.

P – Planning : this deals with the idea at thinking and which are required for project.

R – Resource : the money problem will be solved and resources from which collected.

O – Operating : the procedure from which getting job is prepared in a systematic way is
known as operation.

J – Joint effort : this is directly proper to a operation output is a made of several person
working sincerely is known as JOIN EFFORT.

E – Engineering : A well educated engineer can do this work in a better way to find out
better result. Hence the project is as engineer function.

C – Cooperation : To make the project successfully, it is necessary for its success and
completion of project.

T – Technique : It must as it gives a better shape. It is not possible to complete the

project without technique.

The project is a system that gives the systematic way of planning and working.
 INTRODUCTION
System may be defined as a layered structure that depicts how programs involved would
interrelate and communicate. In computers, System may also include actual programs,
programming interfaces and tools for managing the larger system. The term system may be
used differently in different contexts, but more or less the concept remains the same.
Online student course registration system combines multiple systems to construct a
combined framework. This framework consists of multiple modules, which further contain
different systems along with the implementation of their defined constraints.
Basically, systems are implemented for facilitating complex manual processes and that is
exactly what we are trying to achieve. System is implemented as per user requirement such
as a manufacturing concern may install a plant for easing out manual processes. We have
sought help from computer programming for automation of manual registration system.
With the introduction of computers, every aspect of our lives has been revolutionized.
When used judiciously, computers can help us save time, secure our personal information,
access the required information whenever and wherever required. Keeping all these
positive points in mind, we have developed an Online Student Course Registration System
for easily managing the semester registration process for the student in an institution. Ours
is an advisory based system. In state agricultural universities the course allocation is
advisory based and more complicated. The courses are assigned according to the skill set
and industry requirements. Hence, in current scenario, automated system is required for
course registration of students.
 PROJECT DESCRIPTION
 Any member can register and view available Course.

 Only registered member can purchase multiple Course regardless of quantity.

 Contact us page is available to contact Admin for queries

 There are four roles available:

 Visitor

 User

 Operator

 Admin

 Visitor can view, search, and study different course.

 User can view and study courses.

 Operator can excess add option and can view everything of admin panel.

 Operator c an add, edit and remove course.

 Can access users some information.

 Operator can ship order to user based on order placed by sending

confirmation mail.

 AnAdmin has some extra privilege including all privilege of visitor and user.

 Admin can add products, edit course information and add/remove course.

 Admin can add user, edit user information and can remove user.

 Admin can provide access to user based on course demanded by sending

confirmation mail.
 Project Plan

The current research aims at reducing the workload all the entities involved in the
registration procedure for the students. The current manual system faces different
challenges as to maintaining data of each student manually. Hard copy registers are
maintained currently to verify student details. From students’ point of view, they have to fill
the forms manually and then get them verified from concerned officials, which is a very time
consuming process. The objectives of this proposed web application system are:
 To computerize student and faculty database.
 To maintain data consistency and integrity.
 Automate the registration process without any physical human interaction
 Making the registration process accessible anywhere to the student.
 Allowing faculty to acknowledge registration requests from anywhere.
With the requirement of registration process for every semester, it becomes all the more
important to simplify a process which is highly repetitive. The achievement of the above
objectives can help the institution in managing the resources efficiently. The automated
process will lead to time saving and eradication of common errors.
 DESIGN AND DEVELOPMENT ENVIRONMENT
Proposed System
The web application system consists of five modules in total, namely Admin, Masters,
Transactions, Reports and Utilities:
Admin Module
The administrative module is managed by the administrator. It is responsible for creating,
managing, authenticating and authorizing different users and user types. Currently we have
six user types i.e. Student, Head of Department, Registrar, Accounts Officer, Dean and
Faculty. Under the Admin module the administrator can create and delete users and user
types.
Masters Module
Masters Module manages database entries of all the master tables from the front-end. The
Masters database is more or less permanent and is modified only at session start. The
Masters Module currently manages these database tables namely: category, college,
country, course, course-category, credit/non-credit, department, designation, faculty,
gender, qualification, quota, student, stream, UG/PG.
Reports Module
Reports Module comprises of the final view of the entries made into the Admin, Masters
and Transactions Modules. The information depicted inside the Reports Module is not
visible to everyone in order to maintain data security, data integrity and consistency. The
information is available according to the type of user logged into the system. This module
contains reports for all the Admin, Masters and Transaction modules.
Utilities
Utilities menu contains two entries namely: Backup and Documentation. Backup offers
options to Back up the database tables in SQL format and can be saved in the root directory.
As per need, the user can take back up of some or all tables at any time. Documentation
contains the project documentation prepared which contains the detailed project system
requirements, analysis and future scope of the system.
 Brief Overview of the Technology

Front end: HTML, CSS, JavaScript

HTML: HTML is used to create and save web document. E.g. Notepad/Notepad++
CSS: (Cascading Style Sheets) Create attractive Layout
JavaScript: It is a programming language, commonly use with web browsers.
AdobeXD: Write something about AdobeXD here…
Dreamweaver:
Back end: PHP, MySQL
PHP: Hypertext Preprocessor (PHP) is a technology that allows software developers to
create dynamically generated web pages, in HTML, XML, or other document types, as per
client request. PHP is open source software.
MySQL: MySql is a database, widely used for accessing querying, updating, and managing
data in databases.
Hardware Requirement:

 Microsoft Windows 7 32/64 bit

 Microsoft Windows 8 32/64 bit

 Microsoft Windows 10 32/64 bit

 Adobe Acrobat Reader 4.0 or higher

 Minimum resolution 800 x 600 pixel

 1024 x 768 pixel recommended

 2 GB or more

 4 GB or more recommended especially for Microsoft Windows Vista, 7, 8 and 10

 1.5 GHz processor speed or higher

Software Requirement:

 WAMP Server  Microsoft Windows XP

 XAMPP Server  Microsoft Windows 7

 MAMP Server  Microsoft Windows 10

 LAMP Server
 REQUIREMENT ANALYSIS
A Subject People are Interested In: The most successful blogs are written about topics that
have a broad appeal. The more people who are interested in the topic you write about at
your blog, the more people will search for information on that topic and want to read about
it.

Passion for Your Subject: As a blogger, you have to write about your blog's subject a lot.
The writing is nonstop. If you don't love your blog's topic, it will show. Readers can detect
when a blogger is just going through the motions rather than speaking from the heart.

Commitment: Successful blogging requires a massive amount of sweat equity and

dedication. Building a successful blog requires more than just publishing a new post a few
times a week. The most successful blogs are updated frequently (often several times each
day), and the bloggers behind those blogs work relentlessly to promote their blogs and drive
traffic to them.

Time: Building a successful blog requires a massive time investment. Growing a blog doesn't
stop with publishing post. Top bloggers spend a lot of time everyday promoting their blogs,
researching and reading to drive traffic to it.

A Desire to Network: Socializing is a critical component of developing a successful blog.

Blogging by nature is a social medium, and successful blogs become so primarily because of
the strong sense of community surrounding them. Top bloggers take time to respond to
comments and interact with their blogs' readers as well as network on social sites, forums
and more all in an effort to further promote their blogs.

A Desire to Keep Learning: The blogosphere is ever-changing, which means top bloggers are
always looking for new ways to enhance their blogs by persistently researching anything
and everything related to blogging.

A Love of Research and Reading: Successful bloggers read a lot in order to stay updated on
their blogs' topics and the blogosphere as a whole.

Creativity: A successful blog is typically updated very frequently. That means successful
blogs always provide fresh, unique content to their readers. Writing that new content
requires a great deal of creativity to keep readers from feeling bored or from feeling like the
blog does not bring them any value.

Patience: Blogging success does not happen overnight. Be prepared to stay dedicated to
promoting your blog for the long haul. Eventually, your hard work should pay off with
increased traffic and a significant growth in popularity of your blog. The key is to not give
up.
 Technologies We Used In the Project
HTML (Hyper Text Markup Language)
HTML is a language for describing web pages
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
 The HTML page is actually stored on the computer that is hosting the web site and
the page is sent to your browser
 To see what HTML looks like go to your web browser View menu and select View
Source
 HTML code is stored in a simple text file that has either a .htm or a .html filename
extension (e.g., index.html)

HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> ... </title> tag specifies a title for the web page
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Head
The <head> element is a container for metadata (data about data) and is placed between
the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other
meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
HTML Title
 A title is usually displayed on the top bar of a web browser’s window when you visit
a web site
 The title will now be displayed in the main web browser window, just on the top bar
 <title> Your title text goes here </title>
 <title> is the start tag and </title> is the end tag
HTML meta
The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and
other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Online Courses">
<meta name="keywords" content="HTML, CSS, XML, JavaScript, HTML5, CSS3">
<meta name="author" content="JB">
</head>
<body>
<p>All meta information goes before the body</p>
</body>
</html>
Ouput: All meta information goes before the body
Setting the Viewport
HTML5 introduced a method to let web designers take control over the viewport, through
the <meta> tag. The viewport is the user's visible area of a web page. It varies with the
device, and will be smaller on a mobile phone than on a computer screen. You should
include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 A <meta> viewport element gives the browser instructions on how to control the
page's dimensions and scaling.
 The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
  The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.
Example:

HTML Links
 <a href=”http://www.jb/~jb“>Page </a>
This links to a page on the World Wide Web (WWW)

 <a href=”index.html“> Index Page </a>

This links to a page called index.html in the same directory as the html file

 <a href=”../course.html“> Courses Page </a>

This links to a page called courses.html in the directory above the directory of the
html file

 <a href=”course/course1.html“> Course </a>

This links to a page called course1.html in the course sub-directory

HTML Headings
HTML allows you to create sections in a document using headings, there are six levels of
headings the first level creates the most significant heading, e.g.,
<H1> This is a major section </H1>
...
and the sixth level creates the least significant heading, e.g.,
<H6> This is a minor section </H6>
After each heading you insert the text and images that pertain to that section, like you
would do in MS Word
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a First Level Heading</h1>
<h2>This is a Second Level Heading</h2>
<h3>This is a Third Level Heading</h3>
<h4>This is a Four Level Heading</h4>
<h5>This is a Fifth Level Heading</h5>
<h6>This is a Sixth Level Heading</h6>
</body>
</html>

HTML Paragraphs
 The <p> tag is used to start a paragraph
 The </p> tag is used to end a paragraph
 <p> The text in between the two tags is your paragraph ... </p>
 The </p> tag is optional, HTML assumes that you are in the same paragraph until it
encounters the next <p> tag
 You can force a line break using the <br> tag
HTML Images
<img src=”cat.jpg” width=”120” height=”100” align=”left”>

The image source is in file cat.jpg and the width and height attributes specify the
dimensions of the image on the web page in pixels

You can also add a brief description of the image in case the user cannot see the image e.g.,

<img src=”cat.jpg” width=”120” height=”100” alt=”My Cat”>

HTML Lists
Unordered Lists Ordered Lists Definition Lists

<ul> <ol> <dl>

<li> Gold <li> Gold <dt> Gold

<li> Silver <li> Silver <dd> For the best

<li> Bronze <li> Bronze <dt> Silver

</ul> </ol> <dd> ... second best

Output Output </dl>

 Gold 1. Gold Output

 Silver 2. Silver Gold

 Bronze 3. Bronze For the best

Silver

... the second best

HTML Tables
 cellpadding determines the space between the cell borders and the text

 cellspacing determines the width of the border

 bgcolor defines the table’s background color

 The table rows are defined one after the other; some rows can be headers and
others data
Example: Output

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table

cellpadding=”2”

cellspacing=”4”

border=”1”

bordercolor=”black”

bgcolor=#ccc>

<tr>

<th> Column 1 </th>

<th> Column 2 </th>

</tr>

<tr>

<td> (1,1) </td>

<td> (1,2) </td>

</tr>

<tr>

<td> (2,1) </td>

<td> (2,2) </td>

</tr>

</table>

</body>
</html>

HTML Forms
• An HTML form is a section of a document containing normal content plus some
controls

– Checkboxes, radio buttons, menus, text fields, etc

• Every form in a document is contained in a FORM tag

– The FORM tag specifies the action that takes place when the form is submitted

The FORM Tag

 The FORM tag has two important attributes:

– ACTION – A URI specifying where the information is sent

– METHOD – How the data is sent (GET or POST)

<form action=”” method="get">

<p>Enter your name:

<input type="text" name="yname" value="Your Name Here" maxlength="50">

</p>

<input type="submit">

</form>

GET or POST
 Forms should use METHOD="GET" when the form does not modify anything on the
server:

– A search engine query

– A database search

 Forms should use METHOD="POST" when the form changes the state of the server
or sends a large amount of data

– Entering a message on a forum

– Uploading a file

 GET and POST transport the form data in different ways

Controls
There are different types of form controls that you can use to collect data using HTML form:

Text Input Controls

Checkboxes Controls

Radio Box Controls

Select Box Controls

File Select boxes

Hidden Controls

Clickable Buttons

Submit and Reset Button

Text Input Controls

There are three types of text input used on forms:

Single-line text input controls - This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.

Password input controls - This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.

Multi-line text input controls - This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using HTML
<textarea> tag.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Text Input Control</title>

</head>

<body>

<form>
<p>First name: <input type="text" name="first_name" /></p>

<p>Last name: <input type="text" name="last_name" /></p>

<p>User ID : <input type="text" name="user_id" /></p>

<p>Password: <input type="password" name="password" /></p>

<textarea rows="5" cols="50" name="description">Enter description here...</textarea><br>

<input type="checkbox" name="maths" value="on"> Maths

<input type="checkbox" name="physics" value="on"> Physics<br>

<input type="radio" name="subject" value="maths"> Maths

<input type="radio" name="subject" value="physics"> Physics<br>

<select name="dropdown">

<option value="Maths" selected>Maths</option>

<option value="Physics">Physics</option>

</select> <br><br>

<input type="file" name="fileupload" accept="image/*" /><br><br>

<input type="submit" name="submit" value="Submit" />

<input type="reset" name="reset" value="Reset" />

<input type="button" name="ok" value="OK" />

<input type="image" name="imagebutton" src="" />

</form>

</body>

</html>

Output
 Introduction to CSS (Cascade Style Sheet)
HTML was originally designed as a simple way of presenting information, with the
aesthetics of a web page being far less important than the content (and largely being left
up to the web browser). Of course, now that the web has become as popular as it has, the
presentation of your content has become almost critical to a site’s success. CSS is the key
presentational technology that is used to design websites.

In late 1996 CSS (Cascading StyleSheets) became a reality, forged by our good friends the »
World Wide Web Consortium. Your stylesheet acts as a partner to your HTML code; taking
care of all the layout, fonts, colours and overall look of your site.

If you ever decide to change the look of your site, you modify that one CSS file (your style
sheet) and all the HTML pages reading from that file will display differently. This makes
maintenance of your design much easier.

Benefits of CSS
Another of CSS’s boons is that you define things once, making it far more efficient than
defining everything in HTML on every page. This means:

 Pages download faster, sometimes by as much as 50%

 You have to type less code, and your pages are shorter and neater.

 The look of your site is kept consistent throughout all the pages that work off the
same stylesheet.

 Updating your design and general site maintenance are made much easier, and
errors caused by editing multiple HTML pages occur far less often.

Syntax
selector {property: value; property: value; property: value;}
Example:

p{

color: blue;

font-size: 120%;

Implementation
CSS files are termed “cascading” stylesheets because of two reasons: one stylesheet can
cascade, or have influence over, multiple pages. Similarly, many CSS files can define a
single page.
There are 3 ways to implement css commands into your site:

 Use one CSS file for all your pages. This is the best way to do it (External Style
Sheet).

 Integrate CSS commands into the head of each of your documents (Internal Style
Sheet).

 Use the style attribute to put CSS code directly into a HTML element (Inline Style
Sheet).
CSS allows you to use all three of these methods in glorious tandem, inheriting and
overriding values as you go (we’ll get on to all that in the next tutorial).

External Style Sheet

An external CSS file can be created with any text or HTML editor such as “Notepad” or
“Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You simply save it with the .css
file extension. You can link to the file externally by placing one of the following links in the
head section of every (X)HTML file you want to style with the CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
Or you can also use the @import method as shown below
<style type=”text/css”>@import url(Path To stylesheet.css)</style>
Either of these methods are achieved by placing one or the other in the head section as
shown in example below.
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head><body>
or
<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css) </style>
</head><body>
By using an external style sheet, all of your (X)HTML files link to one CSS file in order to
style the pages. This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
Easier Maintenance
Reduced File Size
Reduced Bandwidth
Improved Flexibility

Internal Style Sheet

This way you are simply placing the CSS code within the <head></head> tags of each
(X)HTML file you want to style with the CSS. The format for this is shown in the example
below.
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page.
Meaning that any changes you want to make to one page, will have to be made to all. This
method can be good if you need to style only one page, or if you want different pages to
 have varying styles.

Inline Styles
I have not mentioned them until now because in a way they defeat the purpose of using
CSS in the first place. Inline styles are defined right in the (X)HTML file along side the
element you want to style. See example below.
<p style=”color: #ff0000;”>Some red text</p>
Some red text
Inline styles will NOT allow the user to change styles of elements or text formatted this
way

Introduction to AdobeXD
Adobe XD is the all-in-one UX/UI solution for designing websites, mobile apps, and more.
Design, prototype, share. All in XD.

What is Adobe XD?

XD empowers designers with the speed, precision, and quality to seamlessly iterate and
share interactive prototypes with team members and reviewers across devices and
platforms, including Windows, Mac, iOS, and Android.

Learn about the design and prototyping interface in Adobe XD

In Adobe XD CC, you create and manipulate your designs and prototypes using various
elements, such as toolbars, and Property Inspector. These elements form the workspace of
Adobe XD.

Start Screen
When you launch Adobe XD, you see a Start screen that gives you quick access to your UI
kits, artboards, and tutorials.

The Start screen is also displayed when you close all files in XD.
UI Kits
Adobe XD provides links to UI kits for Apple iOS, Google Material, Microsoft Windows, and
wireframes. These UI kits contain graphic elements that are native to the operating system.
For example, if you are designing an iOS app, you can directly get started with the readily
available screens in the Apple iOS kit.

You can also access the UI kits in the following way:

 On Mac: File > Get UI Kits

 On Windows: Click the Hamburger menu, then click Get UI Kits.

Artboards
Get started with your design by directly clicking one of the preset artboard sizes. You can
also choose to create a custom artboard size. For more information on artboards.

Workspace Overview
Adobe XD Workspace on Mac
A. Main menu

B. Design mode

C. Prototype mode

D. View on mobile device

E. Preview

F. Share online

G. Property Inspector

H. Pasteboard

I. Artboards

J. Toolbar

Main Menu

Includes File, Edit, Object, View, Window, and Help menus and the submenus within them.

Design Mode

In Design mode, you can create and design the artboards that make up your project. You
can choose to import assets created using other tools or from the web, or create graphics in
XD.

Prototype Mode

In Prototype mode, you can link artboards together, create video demos of the design
(currently only on Mac), prototype your design in a browser or a device, and share the
prototype with others and get feedback.

Application Toolbar

Provides access to Design mode, Prototype mode, zoom levels of the canvas, preview, and
sharing options

Toolbar

Provides access to the selection tool, drawing tools, text tool, artboard tool, and to the
Symbols and Layers panel.

Property Inspector

Using the Property Inspector, you can define various properties of objects and manipulate
them using different options. For example, you can specify backgrounds, fills, borders,
shadows, alignments, and dimensions of objects. You can also combine objects together to
make entirely new objects. To lay out repeating elements, use the Repeat Grid option in the
Property Inspector. Use the Fixed Position option to fix the position of multiple elements on
scroll. You can also use the math calculation to create designs with greater precision or
move objects to a new location or modify its width and height.

Work Area

Contains the canvas or artboards with the assets that you create. The pasteboard (the gray
space around the artboards) lets you place the work that is in progress and the work that
you do not want to include within the existing artboards.

Adobe XD Workspace on Windows

The XD interface on Windows 10 is similar to the Mac interface except for some minor
differences:

 On Windows, there are no top-level and Object menus. Simply right-click an object
and use the context menu instead.

 XD on Windows has a Hamburger menu on the upper-left corner that allows you to
create or open files, save, and export assets.
A. Design mode

B. Prototype mode

C. Main toolbar

D. Preview

E. Share online

F. Property Inspector

G. Pasteboard

H. Artboards

I. Toolbar

J. Pop-up menu

Working with Artboards and Grids

Learn how to lay out designs for different designs and screens on artboards. Use the grids in
artboards to position your design elements.

Artboards typically represent each of the screens that you want to design as part of your
mobile app or website.

You can have many artboards in a single Adobe XD file. For example, you can choose to
define artboards for mobile, tablet and desktop-based web experiences within a single file.
Alternatively, you can also choose to design multiple screens of a user flow for a single
platform in a file.

You can choose a preset size for the artboard at the beginning of your project from the Start
screen. If you do not want to use the available presets, you can create an artboard with a
custom size. Once your new file with the chosen artboard size is created, you can add as
many artboards as you like using the Artboard tool.

To view all the artboards in your project, open the Layers panel (click in the toolbar)

Create artboards
While creating a project or a file for the first time, you can select the artboard size from one
of the presets on the Welcome screen. To specify a custom size, select Custom and specify
the size in pixels.

To add more artboards to an existing file, click the Artboard tool. Then, click one of the
presets on the right panel and click the location where you want the artboard to be placed.

To define a custom sized artboard, select the artboard tool and draw the artboard you want
directly on the pasteboard area.

Create scrollable artboards

You can create artboards that are scrollable with a vertical scroll bar.

To make an artboard scrollable:

Artboards created using preset sizes: If your content continues beyond the prescribed
length of the artboard, drag the bottom of the artboard to the desired length and continue
to design. A dotted line on your artboard indicates the start of the scrollable content.

To disable scrolling, select the artboard and then select None in the Scrolling section of the
Property Inspector.

Artboards with custom sizes: To make a custom artboard scrollable, select the artboard and
then select Vertical in the Scrolling section of the Property Inspector.

Also, specify a Viewport Height, which is the size of the window through which the artboard
is viewed. The viewport height must be less than the height of the artboard for the scroll to
appear. You can also specify the viewport height by moving the head of the dotted line on
the canvas to the required position.

To disable scrolling, select None in the Scrolling section of the Property Inspector.

Key Features
Repeat Grid

One of many timesaving tools in XD, Repeat Grid lets you select design elements such as a
contact list or photo gallery and replicate them horizontally or vertically as many times as
you want—all your styles and spacing stay intact.

Fast, versatile artboards

Pan and zoom in and out of your canvas with zero lag time, whether you're working with
dozens or hundreds of artboards. With XD, you can customize artboards for any size screen
or device and copy between them without losing placement of your design elements.

Powerful tools that are easy to use

Draw, reuse, and remix design elements faster with measuring and positioning tools,
typography, and masking tools that work the way designers think. Import Adobe Photoshop
CC and Illustrator CC assets into XD, and bring in colors or character styles from your
Creative Cloud Libraries.

Reimagined layers and symbols

Work faster and stay organized with a modern, contextual Layers panel that displays layers
only for the part of the document you're working on. Turn commonly used elements like
buttons and logos into symbols you can drag and drop onto your artboards and reuse
throughout your doc.

From static to interactive in minutes

Turn your comps into interactive prototypes complete with transitions, and then test your
experiences—all without having to upload, sync, or jump back and forth between apps.
Changes you make in Design mode will appear in your prototype, so you're always working
with the latest version.

Tools to quickly demo different experiences

XD makes it easy to show colleagues and stakeholders how your multiscreen experiences
look, feel, and work. Switch from Design mode to Prototype mode with a single click.

Mobile preview on Android or iOS

Make sure your experience works the way you want by previewing your prototype on the
actual screens you're designing for. Changes you make on your desktop will be reflected on
your Android or iOS device.

Faster feedback for faster iteration

Share prototypes with teammates and stakeholders via the web directly from XD. Reviewers
can pin comments on a specific area of your prototype, and all the feedback is consolidated
in one place so you can quickly revise and republish.

Smooth and speedy on Mac or PC

With XD, you get the same power, precision, and performance to create prototypes no
matter which system you prefer.

Prototypes you can review from anywhere

Your interactive prototypes can be viewed in desktop or mobile browsers, so it's easy to
share with stakeholders and have them provide fast feedback from wherever they are.

Learn more at: www.adobe.com/products/xd.html

XAMPP
What is XAMPP?
XAMPP, WAMP, MAMP, LAMP all are explaining about the platform or environment of the
application for develop or/and execute. Simply we call them as STACKS. here The fist Letter
Explains abut OS Environment and remaining are explain about language or supporting
applications like:

X for Cross platform - Means it will support any OS, W - Windows, M for Mac and L - Linux.

A: Apache Server - Provide service to respond on web requests (Local or LAN, MAN,VAN) on
Eithor HTTP or HTTPS.

M: MySQL - DB service application and server.

P: PHP – PHP Application Programming Language(stable in XAMPP but Different in others

like PHP or Perl or Python depend on settup)

P: Perl – Perl Application Programming Language( Addition in XAMPP)

XAMPP is the most popular PHP development environment

XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP,
and Perl. The XAMPP open source package has been set up to be incredibly easy to install
and to use.

XAMPP stands for Cross Platform ,Apache , MariaDB (MySQL) ,PHP ,Perl.

XAMPP is a free and open source cross-platform web server solution stack package
developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB
database, and interpreters for scripts written in the PHP and Perl programming languages.

Advantages of XAMPP
 It is Easy to Install as compare to other web server's like WAMP.

 It is Multi Cross Platform which means XAMPP is available for Windows and Linux.

 It also comes with a number of other modules including OpenSSL, phpMyAdmin,

MediaWiki, Joomla, WordPress and more.

 XAMPP is offered in both a full and a standard version (Smaller version).

 You can start and stop the whole webserver+database stack with one command.

Disadvantages of XAMPP
 Configuration and Setting is tough to do as compare to WAMP Server.

Anyway, XAMPP consists of the three main things that you need to know when starting web
development. They are:
  Apache Web Server

 PHP

 MySQL

Apache Web Server: It is a web server that allows you to host your websites or any other
content for that matter. Apache is available for UNIX as well as WINDOWS. Some of the
most common server-side languages supported by Apache are - PHP, Python and Perl. It is
free of charge.

PHP: A server-side programming language which is used to produce dynamic web pages.
PHP code can be embedded within HTML. It is also free and platform-independent which
means that it can be installed on any operating system.

MySQL: It is the world's most popular open source database. It is a Relational Database
Management System (RDBMS) - data and it's relationships are stored in the form of tables
that can be accessed by the use of MySQL queries in almost any format that the user wants.

XAMPP Installation Process

Step-1: Copy the below link and paste into your browser, then Download the XAMPP which
supports your operating systems.

https://www.apachefriends.org/index.html

Step-2: Click on .exe file and proceed to installation

Step-3: If a question arrives on the screen, then click YES

Step-4: By clicking YES, it shows a warning, just click OK

Step-5: Click Next

Step-6: Select the components you want to install; clear the components you do not want
ot install. Click next when you are ready to install.

Step-7: Choose a folder to install XAMPP

Step-8: Click Next

Step-9: Ready to Install, Click Next

Step-10:

Step-11: Completing the XAMPP Wizard

Step-11: After Installation, Open the XAMPP Control Panel

Step-12: Start Apache and MySQL

Step-13: http://localhost/phpmyadmin/ or click on MySQL Admin

A WORD ABOUT PHP

Introduction
PHP was invented by Rasmus Lerdorf in 1995. He is known as Father of PHP. He started PHP
as a replacement for various Perl scripts. He used PHP to maintain his personal web page.
PHP takes most of its syntax from C, Java, and Perl. PHP was written in C programming
language.

PHP stands for Hypertext Preprocessor. Earlier it was known as Personal Home Pages. PHP is
a server side scripting language suited for web based technologies and it can be embedded
into HTML. PHP runs on server side, so we can say that PHP is a “Server side HTML
embedded scripting language”. There are two types of scripting languages:

1. Client side 2. Server side

Client side scripting languages run on client’s web browser. E.g. JavaScript or VBScript. We
use client side scripting languages for form validation. Nowadays Javascript is widely used in
jQuery to add additional text, background effects & menus.

Server side scripting languages run on the web server. Server-side scripting is used for
database operations and to generate dynamic web pages. The server side scripts are not
visible on browsers. No one can see the source code of server script language whereas as
you can use, download client side scripts.

PHP is very popular server side scripting language. It is widely used in website development
due to its ease of use. The syntax of PHP is very similar to other programming languages.
You can use OOPS concept in PHP.

PHP (Hypertext Preprocessor) is a widely-used open source general-purpose scripting

language that is especially suited for web development and can be embedded into HTML.

The best things in using PHP are that it is extremely simple for a newcomer, but offers many
advanced features for a professional programmer. Don't be afraid reading the long list of
PHP's features. You can jump in, in a short time, and start writing simple scripts in a few
hours.

PHP is an acronym for "PHP: Hypertext Preprocessor". PHP is a widely-used, open source
scripting language. PHP scripts are executed on the server. PHP is free to download and use.

PHP is an amazing and popular language!

It is powerful enough to be at the core of the biggest blogging system on the web (Word
Press)!

It is deep enough to run the largest social network.

It is also easy enough to be a beginner's first server side language.

What is a PHP File?

PHP files can contain text, HTML, CSS, JavaScript, and PHP code. PHP code is executed on
the server, and the result is returned to the browser as plain HTML. PHP files have extension
".php"

What Can PHP Do?

PHP can generate dynamic page content. PHP can create, open, read, write, delete, and
close files on the server. PHP can collect form data. PHP can send and receive cookies. PHP
can add, delete, and modify data in your database. PHP can be used to control user-access.
PHP can encrypt data.

With PHP you are not limited to output HTML. You can output images, PDF files, and even
flash movies. You can also output any text, such as XHTML and XML.

Why PHP?

PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) PHP is compatible
with almost all servers used today (Apache, IIS, etc.) PHP supports a wide range of
databases. PHP is free. Download it from the official PHP resource: www.php.net. PHP is
easy to learn and runs efficiently on the server side.

How Can We Set Up PHP on Your Own PC:

However, if your server does not support PHP, you must:

Install a web server

Install PHP

Install a database, such as MySQL

Supported Operating System

Windows 7 Service Pack 1, Windows 8, Windows 8.1, Windows Server 2003, Windows
Server 2008 R2 SP1, Windows Server 2008 Service Pack 2, Windows Server 2012, Windows
Vista Service Pack 2, Windows XP.

Hardware Requirements
900 MHz or faster processor

512 MB of RAM

50 MB of available hard disk space

5400 RPM hard drive

DirectX 9-capable video card running at 1024 x 768 or higher display resolution

SDLC(SOFTWARE DEVELOPMENT LIFE CYCLE)

The software development life cycle (SDLC) is a framework defining tasks performed at each
step in the software development process. SDLC is a structure followed by a development
team within the software organization. It consists of a detailed plan describing how to
develop, maintain and replace specific software. The life cycle defines a methodology for
improving the quality of software and the overall development process.

This term is also known as the software development process.

SDLC consists of following activities:

Planning: The most important parts of software development, requirement gathering or

requirement analysis are usually done by the most skilled and experienced software
engineers in the organization. After the requirements are gathered from the client, a scope
document is created in which the scope of the project is determined and documented.

Implementation: The software engineers start writing the code according to the client's
requirements.

Testing: This is the process of finding defects or bugs in the created software.
Documentation: Every step in the project is documented for future reference and for the
improvement of the software in the development process. The design documentation may
include writing the application programming interface (API).

Maintaining: Software maintenance is done for future reference. Software improvement

and new requirements (change requests) can take longer than the time needed to create
the initial development of the software.

There are several software development models followed by various organizations:

Waterfall Model: This model involves finishing the first phase completely before
commencing the next one. When each phase is completed successfully, it is reviewed to see
if the project is on track and whether it is feasible to continue.

V-Shaped Model: This model focuses on execution of processes in a sequential manner,

similar to the waterfall model but with more importance placed on testing. Testing
procedures are written even before the commencement of writing code. A system plan is
generated before starting the development phase.

Incremental Model: This life cycle model involves multiple development cycles. The
cycles are divided up into smaller iterations. These iterations can be easily managed and go
through a set of phases including requirements, design, implementation and testing. A
working version of the software is produced during the first iteration, so working software is
created early in the development process.

MySQL
Introduction
MySQL was developed by Michael Widenius and David Axmark in 1994.

MySQL is a Relational DataBase Management System (RDBMS)

RDBMS means R--DB--MS

- DB stands for Database, a repository for the information store.

The data in a database is organized into tables, and each table is organized into rows and
columns.

Each row in a table is called a record. A record may contains several pieces (called fields) of
information, and each column in a table is known as a field.

-MS stands for Management System, the software that allows you to insert, retrieve,
modify, or delete records.

-R stands for Relational, indicates a particular kind of DBMS that is good at relating
information stored in one table to information stored in another table by looking for
elements common to each of them. Relational DBMS has the advantage of efficient
storage, and retrieval mechanisms for data, and uses normalization process during design
of RDBMS. Database normalization process is beyond the scope of this article, and several
references are available.

What is a Database?
A database is a separate application that stores a collection of data. Each database has one
or more distinct APIs for creating, accessing, managing, searching and replicating the data
it holds.

Other kinds of data stores can also be used, such as files on the file system or large hash
tables in memory but data fetching and writing would not be so fast and easy with those
type of systems.

Nowadays, we use Relational Database Management Systems (RDBMS) to store and

manage huge volume of data. This is called relational database because all the data is
stored into different tables and relations are established using primary keys or other keys
known as Foreign Keys.

A Relational Data Base Management System (RDBMS) is a software that −

 Enables you to implement a database with tables, columns and indexes.

 Guarantees the Referential Integrity between rows of various tables.

 Updates the indexes automatically.

  Interprets an SQL query and combines information from various tables.

Features of MySQL
1. Speed: Ofcourse, the speed at which a server side program runs depends primarily on
the server hardware. Given that the server hardware is optimal, MySQL runs very fast. It
supports clustered servers for demanding applications.

2. Ease of use: MySQL is a high-performance, relatively simple database system. From the
beginning, MySQL has typically been configured, monitored, and managed from the
command line. However, several MySQL graphical interfaces are available as described
below:

MySQL Administrator: This tool makes it possible for administrators to set up, evaluate,
and tune their MySQL database server. This is intended as a replacement for mysqladmin.

MySQL Query Browser: Provides database developers and operators with a graphical
database operation interface. It is especially useful for seeing multiple query plans and
result sets in a single user interface.

Configuration Wizard: Administrators can choose from a predefined list of optimal

settings, or create their own.

MySQL System Tray: Provides Windows-based administrators a single view of their MySQL
instance, including the ability to start and stop their database servers.

3. Cost: MySQL is available free of cost. MySQL is a "Open Source" database. MySQL is
part of LAMP (Linux, Apache, MySQL, PHP / Perl / Python) environemtn, a fast growing
open source enterprise software stack. More and more companies are using LAMP as an
alternative to expensive proprietary software stacks because of its lower cost, reliability,
and documentation.

4. Query Language Support: MySQL understands standards based SQL (Structured Query
Language).

5. Capability: Many clients can connect to the server at the same time. Clients can use
multiple database simultaneously. You can access MySQL using several interfaces such as
command-line clients, Web browsers.

6. Connectivity and security: MySQL is fully networked, and database can be accessed
from anywhere on the Internet, so you can share your data with anyone, anywhere. The
connectivity could be achieved with Windows programs by using ODBC drivers. By using
the ODBC connector to MySQL, any ODBC-aware client application (for example, Microsoft
Office, report writers, Visual Basic) can connect to MySQL.

7. Portability: MySQL runs on many varieties of UNIX, as well as on other non-UNIX

 systems, such as Windows and OS/2. MySQL runs on hardware from home PCs to high-end
server. MySQL can be installed on Windows XP, Windows Server 2003, Red Hat Fedora
Linux, Debian Linux, and others.

Who uses MySQL?

 Some of the most famous websites like Facebook, Wikipedia, Google (not for
search), YouTube, Flickr.

 Content Management Systems (CMS) like Word Press, Drupal, Joomla, phpBB.

 A large number of web developers worldwide are using MySQL, to develop web
applications.

MySQL Tools
 A SQL server: This is an engine which provides access to your databases.

 Client programs for accessing the server: A program allows you to enter queries
directly and view results.

 A client library for writing your own programs: You can write your own programs
into the client library using C.

– Recommended Hardware Requirements For Mysql Installation

– Pentium V processor

– 128 MB RAM

Note that MySQL can be installed on a platform with as little as 32 MB. However, for better
performance it is recommended to have at least 128MB memory.

You can freely download MySQL from the website https://www.mysql.com

If setting up a MySQL is something you do not want to take on, consider checking out Web
Hosting Choice to find a suitable server provider. In this case, the hosting provider sets up
MySQL server and MySQLAdmin.

Database Structure and Table Details

Create Database
 Click on New as shown below

 Type your database name in red circle (example: shop) and then click on Create
button as shown below.

Create Tables
Create Admin Table as shown below

Structure of Admin Table

Create Category Table as shown below

Structure of Category Table

Create Orders Table as Shown Below

Structure of Orders Table

Create Order Track History Table as Shown Below

Structure of Order Track History Table

Create Product Review Table as Shown Below

Structure of Product Review Table

Create Products Table as Shown Below

Structure of Products Table

Create SubCategory Table as Shown Below

Structure of SubCategory Table

Create User Log Table as Shown Below

Structure of User Log Table

Create Users Table as Shown Below

Structure of Users Table

Create Wishlist Table as Shown Below

Structure of Wishlist Table

Complete Structure of Database(shop)

 DESIGN AND IMPLEMENTATION
OF E-COMMERCE SITE FOR ONLINE SHOPPING
Web Pages Details
Home Page Books Page Electronics Page Furniture Page Fashion Page

Login and Signup

HOME Page: This is home page or welcome page.

Image Slider

Featured Products

Menu Bar
This is the menu of our ecommerce
Product Details and Cart Button
The details of the product will redirect to product details page. Which contains product
information, description of products, rating & reviews and recommended items. With Add
to Cart button you can cart a product.

Wish List and Cart

Wish list icon contains the number of wish list. Wish List icon can redirect to Wish List page.
Cat icon contains the number of Cart product.

Category List
The Category list contains all products. If you select a particular category it will again shows
the subcategory of the category.
Example
Category List of Electronics

Sub Category List & Sub Category of Electronics

How to Buy a Product
Step - 1: Create an Account (or) SignUp

Step - 1: Login with username and password

Step – 3: After login into an account select your product and add them to the cart as
shown below

Here you can select either proceed to check out (or) continue shopping

Step -4: After completing shopping select proceed to check out

Step -5: There you can choose your payment method.

Step -6: After clicking submit button you can see conformation page along with tracking
id.

Step -7: Track your order, click on the Track Order button on top of the right side

To track your order click on the track button and a page will appear as shown below.
 Admin Activities
Step-1: Login with username and password as shown in below
(e.g. www.shoppingportal.com/admin)

Step-2: After Logged in you can see the entire activities of admin.

Contact US