CENTRE FOR CAREER DEVELOPMENT

Application Oriented Project Report

Of
Skill Development Training Programme (SDT)

Tech name

TECHNICAL DOCUMENTATION PAGE

 HARSHAVARDHAN.J (710119205004)
JANARTHANAN.G(710119205005)
KAVIYA.K(710119205006)

V SEMESTER BE-IT Students (Batch: 2019-2023)

Department of Information Technology

Adithya Institute of Technology, Coimbatore

Department of Information Technology

BONAFIDE CERTIFICATE

Certified that this project report “TECHNICAL DOCUMENTATION

PAGE” are the bonafide work of “HARSHAVARDHAN.J

JANARTHANAN.G,KAVIYA.K” who carried out the projects work

under my supervision.
SIGNATURE SIGNATURE

Kalaivani T., Dr.S.M.Nandhagopal, Ph.D,

Assistant Professor, Professor & Head,

Department of CSE, Department of CSE&IT,

Adithya Institute of Technology, Adithya Institute of

Technology,

Coimbatore Coimbatore

TABLE OF CONTENT
S.NO TITLE PAGE NO.
1 Abstract 1

2 Existing System 18

3 Proposed System 30

4 Objectives 49
5 Features 76

6 Technologies 94

7 ER-Diagram 109

8 Modules 135

9 Coding 160

10 Sample Input/Output 179

11 Conclusion 207
 TECHNICAL DOCUMENTATION PAGE

Introduction

Technical documentation is any document that explains the features of the respective
product. In this project, we are going to create a technical documentation of C++ using
HTML and CSS. The webpage has a menu sections that helps to navigate to different
sections of the webpage

Approach

We are going to divide the whole webpage into two sections. The left side has a menu
called Documentation Menu with all the topics listed inside a navigation bar. It contains
anchor tags which has links to IDs of all the sections(like inheritance, polymorphism
etc.). In the right side, we have description for each of the topics. The idea behind this
is once user clicks on one of the topics in the left section, respective topic details will
load the content on the right. In the CSS file we are just beautifying the texts like its
alignment, padding margin etc.

REFERENCES:

[1] Abhishek Singh, Adithya R, Vaishnav Kanade, Prof. Salman Pathan, “online food ordering System”
in International research journal of engineering and technology-2018.

[2] Vishal Gupta, Neha Gaddam, lovefaith Narang, Yogesh Gite, “Digital Restaurant “ International
research journal of engineering and technology-2018.

[3] Review on Online Food Ordering Delivery Platforms and their Impacts on Sustainability,
“Charelene Li, Miranda Mirosa, Phil Bermer -2020

[4] Beltis, A. J. (2016) 9 Advantages of an Online Food Ordering System. Available at:
https://pos.toasttab.com/blog/online-foodordering system (Accessed: 7 July 2017).

[5] Gayatri, P. V., Chaitanya, J. K. and Harikrishna, K (2014) ‘Developing an Intelligent e-Restaurant
with a Menu Recommender for Customer-Centric Service using Wi-Fi Technology’, International
Journal of Computer Applications, 101(16).

[6] Hongzhen, X. U., Bin, T. and Wenlin, S. (2009) ‘Wireless food ordering system based on web
services’, in Intelligent Computation Technology and Automation, 2009. ICICTA’09. Second
International Conference on. IEEE, pp. 475–478

. [7] Leong, W. H. (2016) Food Ordering System Using Mobile Phone. University Tunku Abdul
Rahman. Available at: http://eprints.utar.edu.my/1943/1/IA-2016 12031351.pdf (Accessed: 12
January 2018).
[9] Patel, M. (2015) Online Food Order System for Restaurants. Master’s thesis. Grand Valley State
University. Available at https://scholarworks.gvsu.edu/cistechlib/219/ (Accessed: 27 January 2018).

[10] Samsudin, N. A. et al. (2011) ‘A customizable wireless food ordering system with realtime
customer feedback’, in Wireless Technolnogy and Applications (ISWTA), 2011 IEEE Symposium on.
IEEE pp. 186–191.

Scope:

First, learn the exact syntax of identifier { property: value; } and burn it into your brain,
understanding that a missing colon, semicolon or bracket can wreck everything from then on. Then
understand that the identifier part will mostly be an HTML tag name, a class or an ID, but that
there are also more complex identifiers that allow you a lot of fine-tuning in regard to the things in
the HTML you want to style. Learn the difference between these identifiers and understand that
an identifier will most often be a class, and possibly an HTML5 tag, but rarely an ID. Realise that a
single stylesheet (e.g. mystyles.css) can apply to an entire site. Then move onto mobile-first
development, where you style up a site (or just a page if you’re learning) at a mobile size (to get
started, simply resize the browser window). Then understand how a CSS @media rule block works with
a min-width of around 400px or more to override the mobile rules you already have just for the
things you need to change at larger sizes. Then learn about floats, flexbox, columns, and use the
browser’s web inspector to see margins, padding etc. and adjust them there when things don’t go as
you want, bringing the changes back to your CSS file. Refer to caniuse for browser support and don’t
bother with hacks for ye olde versions of Internet Explorer, as the much better Edge is rapidly
replacing it. Don’t use browser prefixes (e.g. -webkit) as modern browsers support most of the
features you’ll need for starting out.

4.2 Software & Hardware requirements (Flash)

• Operating System Windows XPNista/7/8

• Memory (RAM) 1GB of RAM required.

• Hard Disk Space 3.5GB of free space required.

• Processor Intel Pentium IV or later. 5onwore Requirements

• Full Setup Size 1.04 OB

SOURCE CODE:

<html>

<!--This example uses the default bootstrap stylesheet-->

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous">

<!--provides a full-width container that can expand or collapse based on the size
of viewport-->

<div class="container-fluid">

<div class="row">

<div class="col-md-2 col-sm-12 col-xs-12">

<nav id="navbar">

<h3>Technical Documentation</h3>

<!--content stacking for smaller screens-->

<ul class="nav nav-pills nav-stacked">

<!--internal linking to the respective sections-->

<a class="nav-link" href="#Introduction" rel="internal">

<li>Introduction</li>

</a>

<a class="nav-link" href="#What_you_should_already_know"

rel="internal">

<li>What you should already know</li>

</a>

<a class="nav-link" href="#About_Topic" rel="internal">

<li>About the topic</li>

</a>

<a class="nav-link" href="#Topic_1" rel="internal">

<li>Topic 1</li>

</a>

<a class="nav-link" href="#Topic_2" rel="internal">

<li>Topic 2</li>
 </a>

</ul>

</nav>

</div>

<div class="col-md-10 col-sm-12 col-xs-12">

<main id="main-doc">

<section class="main-section" id="Introduction" >

<!--basic styling for the headings, better practice to do the same

in a css file as the styling is same for all headers-->

<h3 style = "background: black; color: white">Introduction</h3>

<article>

<p>Some content about the main topic, for example Java

documentation introduction about the language

</article>

</section>

<section class="main-section" id="What_you_should_already_know">

<h3 style = "background: black; color: white">What you should

already know</h3>

<article>

<p>Background information before getting into the

topic:</p>

<!--creating list using html-->

<li>Some list content</li>

<li>Prerequisites.</li>

<li>Workings and assumptions</li>

<p>Any other content to be covered before learning this

topic</p>

</artice>

</section>

<section class="main-section" id="About_Topic">

 <h3 style = "background: black; color: white">About topic</h3>

<article>

<p>More lines about the topic. For example, how the basic
functionality works, features etc...</p>

<p>

Technical documentation should be thorough and to the point

</p>

<p>

Write about features, comparisons with other languages etc

</p>

</article>

</section>

<section class="main-section" id="Topic_1">

<h3 style = "background: black; color: white">Topic 1</h3>

<article>

Getting started with the actual documentation content

<code>This would come in a different color and font

indicating lines of code

</code>

</article>

</section>

<section class="main-section" id="Topic_2">

<h3 style = "background: black; color: white">Topic 2</h3>

<p>

Another topic about the main topic, for example, if the topic is Java, this could
be variables or data types in Java

</p>

</section>
 </main>

</div>

</div>

</div>

</html>

OUTPUT:

Conclusion:

The main focuses of these efforts are HTML and CSS. Before advancing
to more complex languages like JavaScript, PHP, or Python, it is highly
recommended that you become proficient in HTML and CSS by practicing
HTML and CSS practice projects. Before moving on to more challenging
development challenges, establish a solid foundation with HTML projects
for students. This is because before tackling more complex material, it is
crucial to have a good understanding of the foundations. The creation of
a static website benefits greatly from the ease of learning HTML and
CSS. Just these two languages make it simple for students to build the
front end of a website. However, it is also an option if you are a business
looking to hire someone to do it for you.