DYNAMIC WEBSITE HOSTING USING AWS

MINOR PROJECT REPORT

Submitted by
A.DHEENUL (20BCM514)

Under the Guidance of

DR.T.REVATHI

ASSOCIATE PROFESSOR & HOD

Department of Computer Science (SF)

In partial fulfillment of the requirements for the award of the degree of

Bachelor of Science in Computer Science of Bharathiar University

PSG COLLEGE OF ARTS & SCIENCE

DEPARTMENT OF COMPUTER SCIENCE
An Autonomous College – Affiliated to Bharathiar University
Accredited with “A++” grade by NAAC (4th Cycle)
College with Potential for Excellence
(Status awarded by the UGC)
STAR College Status Awarded by DBT-MST
An ISO 9001:2015 Certified Institution
Coimbatore – 641014

NOVEMBER – 2022

PSG COLLEGE OF ARTS & SCIENCE

An Autonomous College – Affiliated to Bharathiar University
 Accredited with “A++” grade by NAAC (4th Cycle)
College with Potential for Excellence
(Status awarded by the UGC)
STAR College Status Awarded by DBT-MST
An ISO 9001:2015 Certified Institution
Civil Aerodrome Post
Coimbatore – 641014

DEPARTMENT OF COMPUTER SCIENCE

CERTIFICATE

This is to certify that this Project work entitled “DYNAMIC WEBSITE HOSTING USING
AWS” is a bonafide record of work done by A.DHEENUL (20BCM514) in partial fulfillment of the
requirements for the award of degree of Bachelor of Science in Computer Science of Bharathiar
University.

Signature of the Faculty Guide Signature of the HOD

Submitted for Viva-Voce Examination held on

Internal Examiner External Examiner

DECLARATION
I, A.DHEENUL (20BCM514) hereby declare that this Project work entitled “DYNAMIC
WEBSITE HSOTING USING AWS”, is submitted to PSG College of Arts & Science (Autonomous),
Coimbatore in partial fulfillment for the award of degree is a record of original work done by me under
the supervision and guidance of DR.T.REVATHI MCA., MPhil., PhD., Head of the Department,
Department of Computer Science, PSG College of Arts & Science, Coimbatore.

This project work had not been submitted by me for the award of any other Degree/ Diploma/
Associate ship/ Fellowship or any other similar degree to any other University.

PLACE: COIMBATORE A.DHEENUL

DATE: 20BCM514
 ACKNOWLEDGEMENT
With great gratitude, I would like to acknowledge the help of those who contributed with
their valuable suggestions and timely assistance to complete this project work.

First and foremost, I would like to extend my heartfelt gratitude and place my sincere
thanks to Thiru. L. Gopalakrishnan Managing Trustee, PSG & Sons’ Charities, Coimbatore for
providing all sorts of support and necessary facilities throughout the course.

I express my deep sense of gratitude to Dr. T. Kannaian MSc., MTech., PhD., Secretary,
PSG College of Arts & Science for infrastructure provided to undertake this work.

I whole heartedly express my gratitude to Dr. D. Brindha MSc., MPhil., PhD, MA(Yoga)
Principal, PSG College of Arts & Science for her academic support and constant source of
inspiration throughout the course.

I express my sincere thanks to Dr. A. Anguraj, MSc., MPhil., PhD., Vice Principal
(Academic Affairs) and Dr. M. Umarani, MBA., MPhil., PhD., Vice Principal (Student
Affairs), for their support.

My sincere thanks to Dr. T. Revathi, MCA., MPhil., PhD., Associate Professor & Head
of Department of Computer Science for the valuable suggestions, support and guidance as my
Internal Guide, without which my work would not have reached the present form.

I am greatly indebted to my parents and God Almighty for showering their blessings to
complete this immense task.
 SYNOPSIS
The project is captioned as “Dynamic Website Hosting using AWS.” The purpose of this project is to
use the hosting techniques using cloud services, as there are many sites that helps in hosting the website
which is not cost efficient and easily scalable.

Traditional on-premised web architectures provide complex solutions and accurate reserved capacity
forecast to ensure reliability. Dense peak traffic periods and wild swings in traffic patterns result in low
utilization rates of expensive hardware. This yields high operating costs to maintain idle hardware, and
an inefficient use of capital for underused hardware.

Amazon Web Service (AWS) provides a reliable, scalable, secure, and highly performing
infrastructure for the most demanding web application. This infrastructure is cost effective, the traffic
patterns match according to our need, and it is easy to host and manage our website, compared to on-
premise web hosting and with other service providers.

The aim of this project is to host a dynamic website using AWS, which has high performance, secure,
reliable and easy to manage.
 TABLE OF CONTENTS

CONTENTS PAGENO.

1. INTRODUCTION 1
1.1. Project overview 2
1.2. Module description 3
2. 2.SYSTEM SPECIFICATION 4
2.1. Hardware specifications
2.2. Hardware specifications for EC2 Instance
2.3. Software specifications
3. SYSTEM ANALYSIS 11
3.1. Existing system
3.2. Proposed system
4. SYSTEM DESIGN
4.1. Data Flow Diagram 12
4.2. ER Diagram 15
4.3. Database Design 17
4.4. Input Design 18
4.5. Output Design 20
5. SYSTEM TESTING & IMPLEMEMTATION 23
6. SCOPE FOR FUTURE ENHANCEMENT 29
7. CONCLUSION 30
8. BIBLIOGRAPHY 31
9. APPENDICES
9.1. Screen Shots 32
9.2. sample program 43
 INTRODUCTION

The project is captioned as “Dynamic Website Hosting using AWS.” There are many
techniques for hosting a dynamic website some methods are simple but expensive and some are
complex and cost efficient. On-premise website hosting is more expensive too. Today, every
organization and individuals have their own website for their organizational and purpose like
freelancing, etc. Hence getting to know the various hosting methods in AWS can help the build and host
their website which is cost efficient and scalable.

By this project and individual can learn hosting a dynamic website using AWS for his own
purpose and in a cost-efficient method. In the expectation of facing above mentioned challenges this
project has been done.

1
1.1. PROJECT OVERVIEW
The “Dynamic Website Hosting using AWS” project is designed for the successful completion
of project on hosting a web application using AWS. The project's basic aim is to build a website for
freelancing for an individual and host it using the services available in AWS, which has a high
performing, easy scalable and cost-efficient environment.

In this project a website is developed for the purpose of freelancing for an individual, in that
website, the details like works and skills of an individual and a separate section is kept for contact.

After creating the website, log into the AWS console for creating an instance to host the website.
After logging in, create an Amazon Linux instance in the EC2 section, after creating the instance
connect to the instance through PuTTY for further configuration.

Then after connecting to the instance, install Apache web server (like IIS in windows) in to order
to make our instance work like a website. Next step is installing needed software's like LAMP server for
setting up our database and phpMyAdmin for database management.

After installing all the needed software, upload the developed dynamic website’s files into the
instance using WinSCP into the folder var/www/html (where this the root folder for the Linux system)
to host the website.

Finally restart the instance, copy the public DNS provided by AWS for the instance and by using
any browser check whether our website is working properly.

The modules in the project are:

 Dynamic website
 AWS Console
 EC2 Instance

2
1.2. MODULE DESCRIPTION

DYNAMIC WEBSITE

In this module, a dynamic website is created using HTML5, CSS3, JS, PHP in Visual Studio
2022. The website is for freelancing, in this HTML5 is used to create the basic webpage(content) of the
website, CSS3 is used in styling the content of the HTML page, then JavaScript for animation and
effects in the website, PHP is used to collect the response provided by the user and store it in the
database. This website is used for freelancing purpose and it has works, about the freelancing
individual, and a section to contact with the freelancer.

AWS CONSOLE

In this module, by logging into the AWS console, create a EC2 instance with the required
specifications for hosting the dynamic website, before creating the instance change network
configuration to allow requests from all traffics like (SSH, HTTP, HTTPS), finally add a new volume to
the EC2 instance and create it.

EC2 INSTANCE

In this module, after creating an Amazon Linus EC2 Instance, configure it to host our dynamic
website. First connect to the instance using PuTTY and the private key. After connecting to the instance,
as it is a Linux machine, we should add a new user other than admin user to get access to the “www”
root folder to upload the files of our dynamic website. Second is to prepare the LAMP server, for this
first install the Apache web server to our EC2 Instance (to make our instance act as a website), next
install LAMP server and set it to start every time at boot. After installing secure the database by setting
up a password, finally install phpMyAdmin to manage the database. After configuring and installing all
needed software into our EC2 Instance upload the dynamic website files, as it a Linux machine install
WinSCP in your local system and connect to your Instance using its IP address and the copy the files
from your local system to the Linux machine’s folder namely “/var/www/html”, where it is the root
folder for hosting the website.

3
 2.SYSTEM SPECIFICATION

2.1. HARDWARE SPECIFICATIONS

COMPONENTS REQUIREMENTS
Intel® core i5
PROCESSOR
Ryzen 3
RAM 4 GB

HARD DISK DRIVE 250 GB

INTERNET / ETHERNET Required

2.2. HARDWARE SPECIFICATIONS FOR EC2 INSTANCE

COMPONENTS REQUIREMENTS

OS IMAGE Amazon Linux 2

Kernel 5.10,
VERSION
SSD Volume type
t2.medium
INSTANCE TYPE
(2 vCPU, 4 GiB memory)
STORAGE 8 GiB

2.3. SOFTWARE SPECIFICATIONS

COMPONENTS REQUIREMENTS

OPERATING SYSTEM Windows 10 / Linux

AWS console
FRONT-END
HTML, CSS, JS, PHP
BACK-END MySQL

FRAMEWORK Visual Studio

Google Chrome / Microsoft Bing / Mozilla
WEB BROWSER
Firefox

4
2.3.1. SOFTWARE DESCRITPION

FRONT-END TECHNOLOGIES

AWS Console

The AWS Management Console is a web application that comprises and refers to a broad
collection of service consoles for managing AWS resources. When you first sign in, you see the console
home page. The home page provides access to each service console and offers a single place to access
the information you need to perform your AWS related tasks. It also lets you customize the Console
Home experience by adding, removing, and rearranging widgets such as Recently visited, AWS Health,
Trusted Advisor, and more. It also provides all information related to our account like billing. This
console provides an inbuilt user interface to perform AWS tasks like working with Amazon S3 buckets,
launching, and connecting to Amazon EC2 instances, setting Amazon CloudWatch alarms, etc. For
hosting our dynamic website, EC2 service is needed. By using this service to create a Linux instance
and configuring it to host the dynamic website.

BASIC ARCHITECTURE

This picture explains how a picture is website is simply hosted in AWS.

5
HTML (Hyper Text Markup Language)

HTML stands for Hyper Text Markup Language. Hypertext is ordinary text that has been dressed
up with extra features, such as formatting, images, multimedia, and links to other 7 documents. Mark up
is the process of taking ordinary text and adding extra symbols. HTML is neither a page-layout
language nor a printing language. This allows documents to be displayed on many different platforms.
HTML is flexible to work on the website with their variety of commands. As a formatting language,
HTML utilizes SGML (Standard General Markup Language) and Document Type Declarations (DTD).
SGML document has three main parts. The first part defines the character set to be used and tells which
character i that set distinguishes text for markup tags. Markup tags specify how the viewer application
or browser should present the text to the user. The second part specifies the document and states which
markup tags are legal. The third part called the document instance contains the actual text and markup
tags. In this project a new HTML tag <video></video> tag with <source> tag is used to embed video
from local system and a tag called <marquee></marquee> is also used to create a scrolling text effect in
the website.

CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS
describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is
among the core languages of the open web and is standardized across Web browsers according to W3C
specifications. Previously, the development of various parts of CSS specification was done
synchronously, which allowed the versioning of the latest recommendations. In this website CSS is
mainly used for styling and by using @keyframes animations are added, different attributes like width,
height, text-align, font-size, background, color, position, bottom, left, display, flex-direction,
justify-content, z-index, transition, border-radius and etc., are used for animation and styling
purpose for creating the website.

6
JS (Java Script)
JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with
first-class functions, and is best known as the scripting language for Web pages, but it is used in many
non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is
dynamic, and supports object-oriented, imperative, and functional programming styles. JavaScript runs
on the client side of the web, which can be used to design / program how the web pages behave on the
occurrence of an event. JavaScript is an easy-to-learned and powerful scripting language, widely used
for controlling web page behavior. The basic syntax is intentionally like both Java and C++ to reduce
the number of new concepts required to learn the language. Language constructs, such as if statements,
for and while loops, and switch and try . . . catch blocks function the same as in these languages. JS is
mainly used to add effects/animations in this website. Commands like slideInLeft, slideOutLeft,
slideInRight, slideOutRight, slideOutDown, fadeOut , fadeIn are used in creating animations for this
website.

PHP (Hypertext PreProcessor)

PHP (acronym for: PHP Hypertext Pre-processor), is a server-side embedded scripting language.
This means that it works within an HTML document to confer to it the capacity of generating content on
demand. You can convert your site into a web application, not just a collection of static pages with
information that may not get updated quite so often, which may be all right for a "personal" web site.
PHP is the widely used, free, and perfectly suited for Web development and can be embedded directly
into the HTML code. The PHP syntax is like Perl and C. PHP is often used with Apache (web server)
on various operating systems. It also supports ISAPI and can be used with Microsoft's IIS on Windows.
A PHP file may contain text, HTML tags and scripts. Scripts in a PHP file are executed on the server.
The general scripting or programming languages like Perl, Python, etc. also have platform
independence, and are open source. The PHP language features the usual complement of control
structures, operators, variable types, function declarations and class/object declarations that we have
been accustomed to expect from any compiled or interpreted language, and yet it has features 5 of its
own. PHP comes with many options to build the distribution and configure an installation. PHP supports
several APIs and interfaces to other programming tools. In this website PHP is used to get the data
provided by user in the HTML form and send it to the database. The main use of PHP in this website is
for database connectivity and data transfer.

7
BASIC ARCHITECTURE OF WEBSITE

This picture explains how a webpage is created using HTML, JS, and CSS.

8
BACK-END TECHNOLOGIES

MySQL

MySQL is a full-featured relational database management system. It is very stable and has proven
itself over time. A data type is the type of data a column will store. There can be many different data
types inside a table, but each column will store its own specific type of information. A column defined
as an integer column will only hold numeric information, whereas a column defined as a CHAR (10)
will hold up to 10 alphanumeric characters. There are three groups of data formats. The first is
obviously numeric. Numeric data is a positive or negative number, such as 4 or -50. Some, like dates
and times, could be alphanumeric but are stored like numbers. As well as data types, MySQL also
provides column modifiers, some are AUTO_INCREMENT, UNSIGNED, PRIMARY KEY, NULL,
NOT NULL, and BINARY. MySQL runs on many platforms, and binaries are available for most of
them. In this project INSERT command is used to store the data provided by the user from the for to
database. In this project there are 3 columns namely name of VARCHAR (20), email VARCHAR (25),
message VARCAHR (60) to get data from user and store it in the database.

BASIC ARCHITECTURE OF MYSQL AND PHP

This picture explains how php is used to connect to database MySQL.

9
LAMP (Linux, Apache, MySQL, PHP)

LAMP is an open-source Web development platform that uses Linux as the operating system,
Apache as the Web server, MySQL as the relational database management system and PHP/Perl/Python
as the object-oriented scripting language. LAMP is suitable for building dynamic web sites and web
applications. Since its creation, the LAMP model has been adapted to another component, though
typically consisting of free and open-source software. Linux, Apache, MySQL, and PHP, all of them
add something unique to the development of high-performance web applications. Originally popularized
from the phrase Linux, Apache, MySQL, and PHP, the acronym LAMP now refers to a generic
software stack model. In this project LAMP server is used to connect the website with a database
(MariaDB) by using PHP and MySQL for back-end process. To use the database from the local
system copy the public DNS of the instance followed by phpMyAdmin and hit search, then it’ll be
redirected to the phpMyAdmin page of that instance from there database can be managed.

BASIC ARCHITECTURE OF LAMP SERVER

This picture explains what a LAMP server is and how it works

10
 3.SYSTEM ANALYSIS

3.1. EXISTING SYSTEM

In the existing system includes two types On-Premise hosting and hosting using different service
providers like Hostinger, WordPress, etc. In this hosting method the cost of hosting a dynamic website
is high, low performance, not easy to scale.

DISADVANTAGES

 Cost of hosting a dynamic website is high.

 Performance of the website is poor.
 Large capital investment for on-premise hosting.
 Not easily scalable and reliable.

3.2. PROPOSED SYSTEM

In this method of Dynamic Website hosting using AWS, makes our website high performing, easy
scalable, deployment, cost-efficient, reliable, and secure. AWS provides various methods for hosting a
website like static hosting using S3 and dynamic hosting EC2, etc.

ADVANTAGES

 Less cost for hosting a dynamic website.

 Easy to scale and more reliable.
 High performance of the website compared to on-premise.
 Easy to host and secure.

BLOCK DIAGRAM

11
 4.SYSTEM DESIGN

4.1. DATA FLOW DIAGRAM

A data flow diagram also known as “bubble chart” has the purpose of clarifying system
requirements and identifying major transformation that will become program in system design.
Therefore, it is the starting point of the phase that functionally decomposes the requirement
specification down to the lowest level of details. A DFD contains series of bubbles joined by lines.

DFD SYMBOLS

Defines a source or destination of

system data.

It identifies data in motion. It is a

pipeline through which information
flows.

It represents a process that transforms

incoming data flow into outgoing data
flows.

This represents a data store. Data at

rest or a temporary repository of data

12
4.1.1. DATA FLOW DIAGRAM

DFD LEVEL 0

DFD LEVEL 1

13
4.1.2. PROCESS FLOW DIAGRAM

14
4.2. ER DIAGRAM

ER Diagram stands for Entity Relationship Diagram, also known as ERD is a diagram that
displays the relationship of entity sets stored in a database. In other words, ER diagrams help to explain
the logical structure of databases. ER diagrams are created based on three basic concepts: entities,
attributes, and relationships. It is a graphical representation that depicts relationships among people,
objects, places, concepts, or events within an information technology (IT) system. Entity relationship
diagrams provide a visual starting point for database design that can also be used to help determine
information system requirements throughout an organization. An ERD uses data modelling techniques
that can help define business processes and serve as the foundation for a relational database.

Following are the main components and its symbols in ER Diagrams

The Entity Relationship Diagram

symbol represents entity types.

Symbol represents attributes.

This symbol represents relationship

types.

It links attributes to entity types and

entity types with other relationship
types.

Represents multi-valued attributes.

15
4.2.1. ER DIAGRAM

16
4.3. DATABASE DESIGN
Database design is the organization of data according to a database model. The
designer determines what data must be stored and how the data elements interrelate. With this
information, they can begin to fit the data to the database model. Database management
system manages the data accordingly. Database design involves classifying data and
identifying interrelationships.

DATABASE NAME: portfolio_website_01

TABLE NAME: contact

FIELD DATATYPE SIZE CONSTRAINT DESCRIPTION

Not Null
Name VARCHAR 20 Sender's name

Not Null
Email VARCHAR 25 Sender's Email

Not Null
Message VARCHAR 60 Message

17
4.4. INPUT DESIGN (Dynamic Website)

Input design is converting user-originated input format to a computer-based format.

This computer-based format is called as input form or source document. In an information
system, input is the raw data that is processed to produce output.

In this input design a form is created, within the form labels are created to display a
fixed text, 3 text boxes are used to get input from the user and button is used to send the
collected data.

In the input design of the dynamic website consists of a form, which is used to contact
with the freelancer. The form contains sender’s name, email, and the message he wants to
send.

OBJECTIVES OF INPUT DESIGN

 Input forms must be complete & accurate.

 There should be not any inconsistency of data in input forms.
 Input forms should be attractive to the user.
 Assuring input meets the intended purpose.
 Input forms must be easy to fill out.

SCREENSHOT

This picture is the input page (form) in the website.

18
4.4.1. INPUT DESIGN (AWS Console)

In the input design for the console, for connecting to our instance the private key
created while creating the instance needs to be provided in PuTTY while connecting for
authentication. After connection to copy files from local system to the Linux Instance,
WinSCP is required, for this connection also the private key (.ppk key) is required as input.

SCREENSHOT

This picture shoes how an instance is connected using PuTTY.

19
4.5. OUTPUT DESIGN(Dynamic Website)

Computer output is the most important & direct source of information to the user. The
system is accepted by the user only by the quality of its output. If the output is not of decent
quality, the user is likely to reject the system. Therefore, an effective output design is the
major criteria for deciding the overall quality of the system. The design of output is the most
important task of any system.

In this project the output is, when the user input is given into the form in the website,
that data is sent to the database and acknowledgement is sent to the user after successful entry
of the data.

OBJECTIVES OF OUTPUT DESIGN

 Designing output to serve the intended purpose.

 Designing output to fit the user.
 Delivering the appropriate quantity of output.
 Making sure the output is where it is needed.
 Providing the output on time.
 Choosing the right output method.

20
SCREENSHOTS

This is the picture of the website after the response from the user is submitted in the form.

This picture is the database view, output of data sent from the form to the database.

21
4.5.1. OUTPUT DESIGN (AWS Console)

In the output design form AWS is, successful connection of Amazon Linux Instance
using PuTTY and connection with the Instances using WinSCP for copying data. After these
process, configuration and copying of data made simple.

SCREENSHOTS

Finally output after connection to the instance.

22
 5. SYSTEM TESTING

Testing plays a vital role to the success of an application, which comes as a phase
before the implementation phase of the software developed life cycle. The testing phase has
several purposes of conforming the quality of the application. These help us to find and
eliminate any residual errors from the previous stage and rectify the errors in the application.
This increases operational reliability of the system.

UNIT TESTING

Unit testing is process in which h individual programs are tested for their proper
functioning. Program logic is written for a specific usage, so we need to test whether each of
the programs is working fine as for our requirement. In this testing subroutines were tested.

In this testing each module is tested individually like, first the dynamic website is
tested whether it is working and displaying all the contents of the website properly.

Next in using AWS console instance connection and health is checked, at last, EC2
Instance is checked after configuring and installing all the needed software.

SCREENSHOTS

This picture is the result of locally testing the website after development.

23
SCREENSHOTS
This picture is output from AWS after creating the instance.

This picture is the output of the instance after configuration.

24
INTEGRATION TESTING
As individual modules are successfully unit tested an integrated test plan is developed
to incorporate each module into overall software structure. Integrated testing accomplishes
the quality in assembling the modules. It also tests relationship formed when different
modules are merged into the application.

In this testing after connecting modules with each other it is tested. Like, after instance
and copying files to it using public DNS to test the website.

SCREENSHOT

This picture is the output from AWS after successfully connection and testing using public
DNS.

25
VALIDATION TESTING

The process of cross checking the success of a validation is known as validation

testing. Validations are restrictions given for the input data and these are checked against
conditions given in the programs. In this testing we use the keypair (.ppk file) to connect to
our instance and we use a password to connect to our database also. This testing is done for a
secure connection.

SCREENSHOT

This picture shows validation done by PuTTY while connection to EC2 and database.

26
OUTPUT TESTING

When modules are integrated sample data for all the modules and screens are entered in
the system. Then reports developed for the application are generated and verified whether the
reports are up to the specified requirements.

In this testing after successfully connecting with each module and all testing, finally
output testing is done from AWS to check the website and database for proper functioning.

SCREENSHOT

This picture is final view after creating and configuring EC2 for Dynamic website hosting.

27
5.1. SYSTEM IMPLEMENTATION

The implementation is the final phase. It involves user system testing and
running of the developed proposed system. The testing phase involves the testing of
developed system using various kinds of data while testing, errors are noted and
corrections are made. The corrections are also noted future use.

This phase is initiated after the system has been tested and accepted by the user.
In this phase, the system is installed to support the intended business functions. System
performance is compared to performance objectives established during the planning
phase. Implementation includes user notification, user training, installation of
hardware, installation of software onto production computers, and integration of the
system into daily work processes.

This phase continues until the system is operating in production in accordance with the
defined user requirements.

The steps included in system implementation are:

 Creating a Dynamic Website.

 Logging in to AWS console and creating an Instance.
 After creating instance configuring it to host the website.
 Copying the required files from local system.
 Creating and testing database.
 Finally using the website by provided public DNS.

28
 6. SCOPE OF FUTURE ENHANCEMENT

The “Dynamic Website Hosting using AWS” is a hosting method to host our dynamic
website, which is suitable for all individuals and easy to implement by all.

One important future scope is that, In this project only simple hosting method is used for
hosting the dynamic website more things like traffic manager and load balancers can be
added while hosting the website to make our website more reliable and a high performing
one, other than this, a separate database can also be added to check the logs of the instance, it
can be connected by using API Gateway repositories for better security and for error
correction using the logs of the instance.

29
 7. CONCLUSION

The building blocks of this Minor Project “Dynamic Website Hosting using AWS”
was one of these opportunities. It gave us the requisite practical knowledge to supplement the
already known theoretical concepts thus making us more competent as a computer science
student. The project from a personal point of view also helped us in understanding the
following aspects of project development:

 Proper creation of the Dynamic Website, Logging into AWS console.

 Creation of instance and configuring it according to our need.
 Successfully completing all the process and hosting the dynamic website.

The project also provided us the opportunity of interacting with our teachers and to gain from
their best experience.

30
 8. BIBLIOGRAPHY

WEBSITE REFERENCE

W1 - https://aws.amazon.com

W2 - https://www.geeksforgeeks.org

W3 - https://www.w3schools.com

W4 - https://github.com/

W5 - https://www.javatpoint.com/

BOOK REFERENCES

B1 – “Explain the Cloud Like I’m 10” by Todd Hoff published in Google Books, on
3rd October 2017.

B2 – “Cloud Computing For Dummies” by Judith Hurwitz, Robin Bloor, Marcia Kaufman,
Fern Halper published in Google Books, 2009.

31
 9.APPENDICES
9.1 SCREENSHOTS
AWS CONSOLE HOME
This is the home page of AWS console after Logging into it, which shows the services and
contents etc.

32
AWS CONSOLE
This picture shows the contents of AWS console.

CREATING AN INSTANCE
This picture shows creating an instance in AWS console in EC2 section.

33
INSTANCE
This image shows the instance detail after creating it in EC2 Dashboard.

CONNECTING TO THE INSTANCE

This picture shows the connection process of the instance.

34
CONNECTED
This picture show successful connection of the instance.

CONFIGURE THE EC2 FOR HOSTING

This show configuration of the instance for hosting the website.

35
CONFIGURATION
This picture shows successful installation of needed software into the instance.

CONFIGURED EC2
Final view of the instance after configuration.

36
CONNECTING TO EC2 THROUGH (WinSCP) TO COPY FILES
This picture shows connection process of EC2 instance.

CONNECTED AND COPYING FILES

This picture shows WinSCP window after connection of our instance through it for copying.

37
TESTING THE WEBSITE
Testing of the website after copying the files into instance www root folder.

PAGE 1
About page from the dynamic website.

38
PAGE 2
Work page from the dynamic website.

PAGE 3
Contact page from the dynamic website.

39
PAGE 4
Contact page after filling data into the form in the website.

AFTER SENDING MESSAGE

Acknowledge sent from database after the data is posted into the database.

40
LOGGING INTO PHPMYADMIN
This picture shows the login process for phpMyAdmin page.

CHECKING FOR ENTERED DATA

This picture shows the database, where the data from website is stored.

41
STOPPING INSTANCE
Stopping the instance in EC2 dashboard when hosting is not required.

42
9.2. SAMPLE CODING

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>portfolio.me</title>
<link rel="icon" type="image/x-icon" href="/Images/briefcase.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-
fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="Website_style.css">
</head>
<body>

<div id="loading">
<div id="spinner"></div>
</div>

<div id="particles-js"></div>
<div id="box">
<div class="box1 onlywide animated bounceOutLeft" style="animation-delay:1.7s;"></div>
<div class="box2 onlywide animated bounceOutLeft" style="animation-delay:1.8s;"></div>
<div class="box2 onlywide animated bounceOutLeft" style="animation-delay:1.9s;"></div>
<div class="box2 animated bounceOutRight" style="animation-delay:1.9s;"></div>
<div class="box2 onlywide animated bounceOutRight" style="animation-delay:1.8s;"></div>
<div class="box2 onlywide animated bounceOutRight" style="animation-delay:1.7s;"></div>
</div>
<a id="about" onclick="showabout()" class="animated fadeIn" style="animation-delay:2.2s;">about</a>
<a id="work" onclick="showwork()" class="animated fadeIn" style="animation-delay:2.2s;">work</a>
<a id="contact" onclick="showcontact()" class="animated fadeIn" style="animation-delay:2.2s;">contact</a>
<div id="middle" class="animated slideInDown" style="animation-delay:2.0s;">
<h1>Dheenul A</h1>
<h2>Cloud Administrator</h2>

43
 <div id="menu">
<a onclick="showabout()">about</a>
<a onclick="showwork()">work</a>
<a onclick="showcontact()">contact</a>
</div>
<table>
<tr>
<td class="animated zoomIn" style="animation-delay:2.2s;"><a
href="https://www.linkedin.com/in/dheenul-a-6b6878201/" target="_blank" class="social"><i class="fab fa-
linkedin"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.4s;"><a href="https://twitter.com/Dheenul8?
t=vIVwuHgqVzw3cAd8URjFFA&s=08" target="_blank" class="social"><i class="fab fa-twitter"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.6s;"><a
href="https://instagram.com/_.dheenul._813._?igshid=YmMyMTA2M2Y=" target="_blank" class="social"><i
class="fab fa-instagram"></i></a></td>
</tr>
</table>
</div>
<div id="work_container" class="container">
<div onclick="closework()"><i class="fas fa-angle-right"></i></div>
<h1>Works...</h1>
<section>
<h2>My Works</h2>
<p>
As I'm into cloud computing my first project is based on cloud. In this project I hosted a website using
Appservice in Azure by creating a seperate domain for it.
For creating my website I used languages like HTMl, CSS, Javascript and PHP for backend and service
from Azure.

</p>
<div id="used">
<div><i class="fas fa-circle"></i>&nbsp;AWS</div>
<div><i class="fas fa-circle"></i>&nbsp;HTML</div>
<div><i class="fas fa-circle"></i>&nbsp;CSS</div>
<div><i class="fas fa-circle"></i>&nbsp;Javascript</div>
<div><i class="fas fa-circle"></i>&nbsp;PHP</div>
</div>

</section>
</div>
<div id="about_container" class="container">
<div onclick="closeabout()"><i class="fas fa-angle-left"></i></div>

44
 <h1>About...</h1>
<section>
<h2>About me</h2>
<p>
Hello, I'm Dheenul, Student at PSG College of Arts and Science. I'm pursuing my Bachelors of Science in
Computer Science, currently I'm at my final year.
I enjoy thriving in new challenges and networking with new people . I'm a Tech enthusiastic, community
volunteer and I'm into cloud related technologies, networking, NFTs and Cryptocurrencies.

</p>

</section>
<section>
<h2>Skills</h2>
<p>
As my basic skillset, I have knowledge in Object Oriented Programming languages like C++, Java and
Python, And I have knowledge in web development languages like HTML, Javascript, CSS, PHP and some
experience in database management in Oracle using MySql.
As I'm into cloud computing, I'm a Google Cloud Certified Associate Cloud Engineer and learning AWS as
it a fast growing cloud service provider and I'm looking forward to master in networking skills aswell.
I have knowledge in both GCP and AWS
</p>
</section>
</div>
<div id="contact_container" class="container">
<div onclick="closecontact()"><i class="fas fa-angle-down"></i></div>
<h1>Contact...</h1>
<section>
<h2>contact me</h2>

<form action="test1.php" method="post">

<input name="name" type="text" placeholder="name" required>
<input name="email" type="email" placeholder="email" required><br>
<textarea name="message" placeholder="your message" required rows="5"></textarea><br>
<button class="btn_one" name="send">send</button>
</form>

</section>
</div>
<div id="footer">
<p>Made on Visual Studio by Dheenul </p>

45
 </div>
<div class="video">
<video class ="bod" width="400" height="300" loop autoplay muted controls id="vid">
<source type="video/mp4" src="y2mate.com - What is Cloud Computing Introduction to Cloud Computing
Edureka_1080p.mp4">
<source type="video/ogg" src="y2mate.com - What is Cloud Computing Introduction to Cloud Computing
Edureka_1080p.ogg">
</video>
</div>
<div class="video2">
<video width="406" height="300" loop autoplay muted controls id="vid">
<source type="video/mp4" src="Presentation on Freelancing PowerPoint Freelancing Information for the
beginners.mp4">
<source type="video/ogg" src="Presentation on Freelancing PowerPoint Freelancing Information for the
beginners.ogg">
</video>
</div>

<div class="marquee">
<div>
<span>For freelancing contact me through this website</span>
</div>
</div>
<script src="Website_javascript.js" type="text/javascript"></script>
<script src="particles.js"></script>
<script src="app.js"></script>

</body>
</html>

46
47
PHP CODE FOR DATABASE CONNECTION AND SHARING:
<?php
$server_name="localhost";
$username="root";
$password="123456";
$database_name="portfolio_website_01";

$conn=mysqli_connect($server_name,$username,$password,$database_name);
if(!$conn)
{
die("Connection failed:". mysqli_connect_error());
}

if(isset($_POST['send']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$sql_query = "INSERT INTO contact (name,email,message)

VALUES ('$name','$email','$message')";

if (mysqli_query($conn, $sql_query))
{
echo "New Details Entry inserted successfully !";
}
else
{
echo "Error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);

}
?>

48
LINUX COMANDS FOR INSTANCE CONFIGURATION
INSTALLING APACHE WEB SERVER WITH PHP AND MARIADB

sudo yum update -y

sudo amazon-linux-extras install php8.0 mariadb10.5
sudo yum install -y httpd
sudo systemctl start httpd
sudo systemctl enable httpd

TO SET FILE PERMISSION FOR APACHE WEB SERVER

sudo usermod -a -G apache ec2-user
exit
groups
ec2-user adm wheel apache systemd-journal
sudo chown -R ec2-user:apache /var/www
sudo chmod 2775 /var/www
find /var/www -type d -exec sudo chmod 2775 {} \;
find /var/www -type f -exec sudo chmod 0664 {} \;

TO PREPARE THE LAMP SERVER

echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php
http://my.public.dns.amazonaws.com/phpinfo.php
sudo yum list installed httpd mariadb-server php-mysqlnd
rm /var/www/html/phpinfo.php

TO SECURE THE DATABASE

sudo systemctl start mariadb
sudo mysql_secure_installation
sudo systemctl stop mariadb
sudo systemctl enable mariadb

49
INSTALL PHPMYADMIN
sudo yum install php-mbstring php-xml -y
sudo systemctl restart httpd
sudo systemctl restart php-fpm
cd /var/www/html
wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-
languages.tar.gz
mkdir phpMyAdmin && tar -xvzf phpMyAdmin-latest-all-languages.tar.gz -C
phpMyAdmin --strip-components 1
rm phpMyAdmin-latest-all-languages.tar.gz
sudo systemctl start mariadb
http://my.public.dns.amazonaws.com/phpMyAdmin

50