Website Development Tutorial
Website Development Tutorial
In this tutorial, we will explain the concept of website development, from the simplest to
the most advanced. It will help novice users to learn all about websites and how they are
designed and maintained. At the same time, this tutorial has enough material to help even
system administrators to broaden their knowledge about websites.
Audience
This tutorial is meant for all those readers who would like to understand the entire process
of setting up a well-designed website. We strongly believe that this tutorial will help almost
everyone who wants to set up a website, without having to take professional guidance
from a technical person.
Prerequisites
We have designed this tutorial, keeping in mind the requirements of beginners, especially
those who come from a non-technical background. Hence, we don’t assume any existing
knowledge of website development from the readers.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at [email protected].
i
Website Development
Table of Contents
About the Tutorial .................................................................................................................................... i
Audience .................................................................................................................................................. i
Prerequisites ............................................................................................................................................ i
ii
Website Development
iii
1. Website Development ─ Introduction
Website Development
A website can be defined as a collection of several webpages that are all related to each
other and can be accessed by visiting a homepage, by using a browser like Internet
Explorer, Mozilla, Google Chrome, or Opera. For example, the website address of
Tutorialspoint is: www.tutorialspoint.com.
Each website has its own URL which is a unique global address called domain name.
A URL comprises of:
The protocol used to access the website, which in this case is http, meaning port
80. It can also be https; port 443.
The domain name; domain names are normally chosen to have a meaning. Like
in our case “tutorialspoint”, we can understand that this website offers tutorials.
1
Website Development
The suffix name which can be .com, .info, .net, .biz, or country specific. For
detailed information, please refer the following Wikipedia link:
https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains.
The directories or in simple words, a folder in the server that holds this website.
A website is an online brochure where you can advertise your business offers.
If you are a blogger, you have the possibility to influence your readers.
You can show all your ideas and publish them on a website.
If you have a business idea, then you don’t have to wait. You can straightaway
open an online shop and sell your products or services online. An added advantage
is that the online shop will be open 24/7 for your clients, throughout the year.
You can communicate with your customers, giving them an opportunity to express
themselves.
You can provide valuable customer support by having a trouble-ticket system.
2
Website Development
If you have an official website with a domain, then you can have your personalized
email. For example, [email protected] (it is much better than
[email protected]).
To set up a website and make it live, you should first purchase a hosting plan.
Select a domain name for this website.
Point the DNS records to the server or the hosting provider.
Develop the content that you want to publish on the website.
Check if you need to purchase a public certificate and install it.
Publish the webpage on the Internet.
In the subsequent chapters of this tutorial, we will discuss each of these steps in detail.
3
2. Website Development ─ Required Skills
Website Development
The skills required to set up a website can vary from very basic to the most advanced. If
you are going to set up a professional website for a global audience, then you should have
the following set of skills or you would have to hire a group of people to do this job for
you.
Content Experts
Content experts supply the content that is to be published on the website. They design
the content as per the requirement of the target audience and then, edit and polish the
content before it gets published.
Content experts normally rely on the expertise of the site designer and the webmaster.
Note that the content can be text, data, images, audio or links.
Website Designer
A web designer is a technical person who designs and maintains the Graphical User
Interface (GUI) of the website. For example, where the buttons should be placed, how the
images are to be displayed, etc.
Graphic Designers
Graphic designers develop image files that are to be included in the website. These
professionals have a keen understanding of developing suitable graphics for the web
environment.
Web Developers
Web developers create the program codes to manipulate the supplied content, based on
the site design established by the website designer. A web programmer should use a set
of programing languages to compile specific functions that the webpages should do in the
background. Here is a set of important programing languages that a web programmer
must be good at:
HTML / XHTML − These are the markup languages which you will use to build
your website. A web programmer must have a good understanding of HTML and
XML.
PERL Script − PERL is another language which is being used to develop interactive
Web Applications. If you are planning to use PERL to develop your website, then
please browse our tutorial – http://www.tutorialspoint.com/perl/ to know more
about PERL.
4
Website Development
AJAX Technology − AJAX is the latest technology on the Web. Google and Yahoo
are using this technology to give a better browsing experience to their website
visitors.
ASP or JSP – Web developers are required to be well-versed with ASP or JSP to
develop interactive websites. To get more information, you can go through our
tutorials on ASP and JSP at: http://www.tutorialspoint.com/asp.net/ and
http://www.tutorialspoint.com/jsp/.
Macromedia Flash − You can use Macromedia Flash to build a Website. It can be
a little time-consuming to learn this technology, but once you learn how to use it,
then you can develop attractive websites using Flash.
Web Researcher
You should research on new tools, trends and issues affecting the web technology. Web
researchers report to the webmaster regarding new techniques that can be integrated in
the website. They optimize appropriate site traffic and evaluate site development tools,
which can be either hardware or software.
System Administrator
A System Administrator knows how to set up and point the protocols as HTTP, FTP, SMTP
and DNS records. System administrators are those experts who look after every aspect of
website development and its maintenance.
5
3. Website Development ─ Domain Name
Website Development
Domain name is the part of your online address and your visitors will use it to find you
easily. For example, Tutorialspoint domain name is tutorialspoint.com. Your domain
name is unique to you. Once you have registered it, nobody else can register the same
one if you continue to renew it.
Registering a domain name can be easy because you can select whatever name you want,
but what you choose is crucial for your business future or your blogging website. So, in
this section, let us focus on some rules that we must keep in mind before we purchase a
domain name.
Rule 1 – Choose a domain name that can be your brand name, if required. Our domain
name tutorialspoint.com is really branding because there is no generic keyword string
like tutorials-points.com that can be hard to memorize where the ‘–’ is located.
If your brand doesn’t have numbers don’t purchase a domain with numbers because there
is no brand matching from the user perspective. For example, tutorialspoints29.com.
Rule 2 – If you have the financial possibilities, then you can purchase domains with
various extensions such as .com, .net, .info, .biz, etc. In our case, it would be like
tutorialspoint.net, tutorialspoint.info, tutorialspoint.biz. There are domains that are
misspelt, such as a similar case is google.com. If you write gogle.com one ‘o’ is missing,
but still it will redirect you to the official website google.com.
Rule 3 – You must ensure that this domain name is not a trademark or is copyrighted.
Rule 4 – Find a short domain name. The lesser the characters in a domain name, the
easier it is to type, to say, to share and to get shortlisted on social media platforms and
in search results.
6
Website Development
Rule 5 – Extensions are suffixes, such as .com or .net, at the end of the web addresses.
These can have specific use, so ensure to choose an extension that works for your
business. The .com domain extension is by far the most popular, but it can be tough to
get a short and memorable .com domain name because it is around for so long. If your
webpage is serving locally, then you can buy it with the suffix of your country.
Rule 6 – If your domain name is not going by the brand name, then at least you should
use specific keywords which describes your business, for example, tutorialspoint.com. It
helps improve your rank on search engines (which increases traffic) and it also makes
more sense to your customers.
Second Level Domains (2LDs) are domain names containing one more level after the
.com or .co suffix. For example, .com.au is a second level domain style as it contains an
additional suffix after the .com that shows the website originates in Australia.
CcTLDs are Country Code Top-Level Domains which are usually restricted to certain
countries. These are domains like .au, .uk, .ae, .us, etc.
Extension also has a meaning. The meanings of some top-level domains are listed as
follows:
.net – network – This is an open TLD; any person or entity is permitted to register.
It was originally intended for use by domains pointing to a distributed network of
computers, or "Umbrella" sites that act as a portal to a set of smaller websites.
.mil – military – The .mil TLD is limited to use by the United States military.
7
4. Website Development ─ Domain Name Registration
Website Development
To register a domain name involves registering the name you want with an organization
called ICANN through a domain name registrar. For example, if you choose a name
like "mydomain.com", you should go to a registrar, pay a registration fee that costs around
10 USD per year for that name. That will give you the right to the domain name for a year.
You should renew it annually for the same amount per annum.
Some webhosts will register your domain name for free, if you purchase a hosting plan
from them, while others will do it for you as well, but you will must foot the registrar fees
and charges.
Some of the biggest registrars where you can register your domain are given below:
Now, let us see step by step how to register a domain name at GoDaddy.
Firstly, we should choose our domain name and see if it is free for purchase.
8
Website Development
As you can see in the results that are in the following screenshot, this domain is already
taken and it is not free. Then GoDaddy will recommend me other similar names, which we
might be interested in.
We will select another domain name that GoDaddy suggested us, which is
“tutorialspoint.online”.
On the other page, GoDaddy will ask if I want to hide my personal information from the
internet for an extra fee with regards to this domain name, because by default they are
open to public.
9
Website Development
GoDaddy is an accepted Domain name registrar. It is also a Hosting provider which offers
you hosting services for your website. It allows you to purchase and at the same time
gives a suitable plan for your website.
10
Website Development
In the webpage that opens next, you must choose the number of years for your domain
that it will be required with the possibility to extend this period.
11
Website Development
In the Billing Section, we should fill genuine data because it should match with the
payment information.
In the account information, we will enter an email id (we will get all the billing related and
other notifications to this email address), username, password and PIN (this email id is
also important for account resetting or other ownership issues, if the account gets hacked).
12
Website Development
Now, we should enter the credit card details or PayPal details. Then click “Continue” as
shown in the following screenshot.
13
Website Development
The following screen will show up once the purchase of the domain is successful.
14
5. Website Development ─ Subdomains
Website Development
Subdomains are extensions of domain name that you can forward to URLs or point to IP
addresses and directories within the hosting account or different servers. Sub domains
function separately from your main domain. We can create areas of a website by using
subdomains.
Example
You can create a subdomain for a blog on site called "Blog" that is accessible through the
URL – blog.tutorialspoint.com in addition to the already existing
www.tutorialspoint.com/blog.
We can add endless subdomains per domain name in theory. We can also add multiple
levels of subdomains. For instance, you can add info.blog.tutorialspoint.com to delve
into an even more specific area of interest on the site. Each subdomain can be up to 25
characters long.
15
6. Website Development ─ Domain Privacy
Website Development
Internet Corporation for Assigned Names and Numbers (ICANN) broadly requires that the
mailing address, phone number and e-mail address of those owning and administrating a
domain name should be made publicly available through the "WHOIS" directories. But this
rule enables spammers, direct marketers, identity thieves or other attackers to use the
directory for personal information. Although ICANN has been exploring changing WHOIS
to enable greater privacy. There is a lack of consensus among major stakeholders as to
what type of change should be made. However, with the offer of private registration from
many registrars, some of the risk has been mitigated.
There are four contact positions in a domain's WHOIS record, which are –
Owner
Administrator
Billing and
Technical
Some registrars will not shield the owner organization name to protect the ownership of
the domain name.
Let us now have a detailed stepwise understanding of what is being discussed here.
Go to the URL https://whois.icann.org/en and then enter the domain name of which we
want to see the public data.
16
Website Development
Enter the Captcha that is displayed on the webpage as shown in the following screenshot,
then click on “Lookup”.
The information that this domain name has will be shown as follows. The main section is
“Contact Information” which has some subsections like:
Registrant Contact
Admin Contact
Tech Contact
Name and Surname, Company name, Address, Phone Number and email address.
The following screenshot shows the registrant name which in this case is GoDaddy.com,
LLC
17
Website Development
The following screenshot shows the information of when the domain name was registered
and when it will expire.
While the last screenshot will show the name servers (DNS) of the domain.
18
Website Development
The following screenshot has full information details of the domain name.
19
7. Configure DNS Record on a Hosting Platform
Website Development
DNS records are mainly used to convert domain names into servers’ IP that host this
website. It is important to mention that the records are entered at domain registrars. They
generally provide you with a DNS manager panel. The main purpose is that people and
applications don’t have to remember big numbers to navigate to a domain. For example,
www.tutorialspoint.com has an IP of 93.184.220.42, so it is easier to remember a friendly
name.
There are other types of DNS records that are used for a webpage, depending on the
functions that we need to publish.
Type of
Explanations
Record
CNAME Record Allows more than one DNS name for a host
TXT Record Provides additional info about a host or more technical info to servers
AAAA Record Provides IP addresses that do not fit a standard A Record format
Let us now see it practically: earlier the domain tutorialspoint.online was purchased at
GoDaddy, which needs to now point to an IP. For doing this, we must follow the steps
given below.
To begin with, you should start with entering the username and password. Then click on
“Manage My Domains”.
20
Website Development
Select the Domain whose DNS should be managed by clicking on . Click on “Manage
DNS “.
21
Website Development
A new window will pop up and you must then select the record that you want to enter. In
this case, we should enter A Record to publish on the website.
The boxes shown in the following screenshot will be opened. In the “Host” box, enter the
subdomain name which will be www and in the “Points to” box enter the IP –
93.184.220.42. In the “TTL” drop box, we need to select 1 Hour, which means in one
hour the record will be spread globally and the webpage will be effective. Once all this is
done, click “Save”.
22
8. Website Development ─ CMS Platforms
Website Development
In this chapter, we will first discuss how to make the right choice for your website and
which Content Management System (CMS) Platform to choose for your website.
Answer – This is one of the main questions because it is directly related to the budget. If
your budget is low, then you should think of something non-commercial and not too
complicated.
Answer – If you are going to publish many offers, having a blog to moderate, etc., then
for sure you will need a dynamic website. You must have extra staff for handling all this,
thus this question correlates with the Question 1. Otherwise you should have a flat website,
which we will explain in the following chapters.
Question 3 – Will the website be used as an e-commerce site for selling products online?
Answer – If this is the case, you should look for a platform which is called e-commerce.
There are many such open source and commercial ones such as Magento, Opencard,
Shopify, etc.
Question 4 – Should the view be adaptable for different screens like mobiles?
Answer – If this is one of the main criteria and if there are not many other changes in
terms of information in the website; then you should go with a flat website having features
like Bootstrap.
Question 5 – Will my website interact with social media or other third party platforms?
Answer – You will need a record for all the events happening on your website and they
will be saved in a database. For keeping all this data and records, you will need a dynamic
website.
Answer – Depending on the country, there are several programing languages or platforms
which are more popular than the others. So, you should first find a platform that goes with
the trends of your region.
23
Website Development
CMS Platforms
Content Management System (CMS) Platforms are applications which allow to create and
run your website. You will get an Admin Panel, which is an interface where you can create
and update pages, posts and other type of content (images, videos, etc.) and arrange the
content the way you need.
You will also be able to change the design of the site through the admin panel by installing
themes (design templates) and changing them. All the actions are done simply by clicking
on various buttons. You don’t have to write codes or scripts in most cases, so you can
manage your content easily.
The most prominent CMS platforms are WordPress, Joomla and Drupal. They are free
and open source CMS engines. That means their source code is open to the public. You
can use, edit and customize the core files of the engine on your site and if you discover a
great way to improve the platform, you can pitch it to the developers and help in making
their engine even better in their next update.
WordPress is an open source CMS. More than 50 % of the webpages are by that platform.
It is getting more comprehensive, intuitive and popular with each new update release.
WordPress has a committed community, which has tonnes of free extensions and the
easiest-to-use interface.
Managing your content with WordPress is perfectly simple: you create a page, add it to
the menu, post something on it and see your content on the front-end of your site. All that
adds up to a pre-eminent CMS platform. The official webpage is https://wordpress.com/.
The following screenshot shows the dashboard background.
24
Website Development
Drupal is for huge websites and organizations that can afford full-time administrators.
You can do almost anything with Drupal. I am often fascinated by how many options the
engine contains out of the box. Lots of things which in WordPress or Joomla would require
custom coding have readymade solutions by default in Drupal. It can be enhanced even
more with third-party extensions. But, I will be honest with you - learning to operate it, is
the real challenge. It takes a lot of work and patience to master.
25
Website Development
26
9. Flat & Dynamic Webpages
Website Development
A Static or Flat Webpage means a webpage in which all the information and material is
presented in front of the users as it is stored in it. A Static Webpage shows the same
information and data to all users. In internet technology, Hyper Text Markup Language
(HTML) was the first language or channel by which people started to create static web
pages. HTML offers the style of text, paragraphs creation and line breaks. But the most
important function and feature of HTML is link creation option. Static webpages are useful
for their material and content, which rarely need to be revised or updated.
Advantages of Static Websites:
Quick to develop
Cheap to develop
No need to have a big hosting plan
27
Website Development
The file structure of the static website with one page is as shown below.
Dynamic Webpages
Dynamic Webpages is the latest trend at present because they can produce different
content for different visitors from the same source code file. The website can display
different content based on parameters like –
Dynamic webpages can have a variety of purposes. For example, websites run by content
management systems allow a single source code file to load the content in many different
possible pages. We should mention that all these dynamic webpages use databases.
Content creators use a gateway page to submit the material for new pages into the CMS'
database. The dynamic page loads the material for any page in the database, which is
based on the parameters in the URL. This is done when a visitor requests for a webpage.
Dynamic pages let users log into websites to see personalized content.
All Content Management Systems (WordPress, Joomla and Drupal) that we mentioned
before are dynamic websites.
28
Website Development
29
10. Publishing & Development Tools
Website Development
As you now know the fundamental necessities for developing a website as a beginner
developer, you will need some tools that you should have for primary usage.
Firstly, you should have a basic package of internet that has a good upload speed,
minimally 1Mbps. Secondly, you should have a computer with any Operating System (it
can be Linux, iOS X or Windows). Then the hardware specifications should be minimum –
1-2 GB RAM, Processor should be at least a Dual-Core one and the hard disk must be
around 80 GB.
The next step is – you should have a text editor that will help you for code writing and
editing. Some of the best text editors for this purpose are as mentioned below.
Text Sublime
Text sublime can be downloaded from https://www.sublimetext.com/. It is good because
the text changes the color of the parameters depending on their functions.
30
Website Development
Notepad ++
Another popular text editor is Notepad ++ that can be downloaded from –
https://notepad-plus-plus.org/.
EditPad
The next one in the list of most popular text editors is EditPad, which is another free tool.
It can be downloaded from – http://www.editpadlite.com/.
Note: You should always use a text editor that you feel more comfortable working on.
31
Website Development
Web Apache
MariaDB with phpMyAdmin for DB Management
PHP and
Perl Extra.
If you want, you can also create an FTP Server and Mail Server with Mercury.
Another similar tool like XAMPP is WAMPSERVER, which can be downloaded from the
following link – http://www.wampserver.com/en/.
32
Website Development
For developers who want to code ASP should have Visual Studio provided by Microsoft. It
can be downloaded from – https://www.microsoft.com/web/.
If you are a beginner and you are planning to develop a flat (static) website, you should
have Visual HTML text editors called WYSIWYG. One of the most commonly used editor
is Macromedia Dreamweaver. It can be easily downloaded from the following link –
http://www.adobe.com/products/dreamweaver.html.
33
Website Development
The other tool that you need to have is FTP Client, which is used to transfer files to the
Hosting Container. Generally, these FTP Clients are free and can be easily downloaded
from the internet.
34
Website Development
35
11. Commercial & Free Themes
Website Development
A theme is a personalized design of a website often including its layout. Changing your
theme, changes the view of how your website looks on the front-end. Usually CMS
platforms have both free and commercial versions. These themes are categorized as per
their functions like
Business
IT industry
Hosting, etc.
Free themes are found in theme providers and they are free of charge, but sometimes the
features are more limited than that of the commercial ones. Let us take the free WordPress
themes as an example. These themes are found on the following link –
https://wordpress.org/themes/, you can find and install them as per your business profile
or needs.
On the contrary, for the commercial themes, you must pay. WordPress commercial themes
are found on the following link – https://wordpress.org/themes/commercial/.
36
12. Choosing a Web Hosting Company & a Plan
Website Development
When choosing a Web hosting company one of the main key indicators is to see their
client’s satisfactory reviews and the price which is also important. As technologies and
hosting industry changes too often and fast for an expert, we should be aware to check
with following criteria’s.
Server Reliability / Uptime Scores – The most important point to know here is
whether they have a 24×7 operating web host. You need a web host to operate on
a powerful server and have stable network connections. Close to 99.5% and above
is the recommended uptime score; anything below 99% is unacceptable.
Price of Hosting Signup and Renewal Cost. Hosting deals and shared hosting
especially are normally selling very cheap on signup prices, but charge much higher
on renewals.
What Refund Policy they are offering? – If you choose to cancel your host within
the trial period, what are the implications? Does the company provides a full money
refund? What is the hosting company’s refund policy after the trial session? Are
there any cancellation charges?
Easy to use Hosting Control Panel. A user-friendly and functional hosting control
panel is very important.
Account Suspension – What are the limitations? Here’s a money tip that most
hosting review sites will not tell you – Hosting companies will pull the plug and
suspend your account if you are using too much CPU power (yes, unlimited hosting
is limited) or violating the rules.
After you have decided on the type of hosting (Windows or Linux), you should define the
right hosting plan.
37
Website Development
Disk Space
Bandwidth
Number of Hosted Domains
Number of Subdomains
Parked Domains
Versions of PHP, MySQL and Perl.
Shared Hosting
It is the most basic plan that every hosting provider offers. Shared hosting is
fundamentally many hosting accounts located on one server. Some of them share the
same IP address (although a dedicated IP address is often available for an additional fee).
This plan will always offer a specific set of features and will always have resource limits.
If you are not certain, then it will be better to start with a limited plan and later upgrade
it after the website grows and gets more traffic.
VPS Hosting
VPS is a Virtual Private Server. This refers to the partitioning of a physical server into
multiple servers where each one acts just like a dedicated server, each has its own
operating system and can be rebooted separately. These operating systems receive a
specific share of the resources of the physical server and they are isolated from each other.
There are two types of VPS hosting:
Managed – Managed means that the patching is done by the hosting company by
offering a CPanel in it.
Unmanaged – Unmanaged is a hosting where you should take care of your VPS
in everything and there is no CPanel in it.
Dedicated Hosting
This is the most powerful type of hosting, which meets the requirements and needs of
big businesses. Dedicated server owners can sell hosting services for a profit. They can
choose the server specifications and environment. If you have heavy traffic, a very popular
site, or a large customer database, then consider Dedicated Hosting. A dedicated server
also provides more freedom to send emails and stream media.
38
Website Development
TIPS: The most important thing in hosting is to check prices of different Hosting
Companies and their hosting plans prices with comparison websites for a better
understanding. An example of a comparison website for checking prices of hosting
companies is – http://www.hostmonk.com/.
39
13. Website Development ─ Website
CPanel Development
Some web hosts use customized, proprietary control panels, but most of them use popular
platforms. However, the leader of the industry is cPanel. It is the most spread out control
panel among the hosting providers. The official webpage of cPanel is – http://cpanel.com.
Now let us discuss cPanel in detail and understand the most important aspects of it.
Firstly, to enter the CPanel you should type in the URL which the Hosting Company will
give to you. This in general should be – yourdomain.com/cpanel. You should then enter
your username and password which the hosting company has given you.
The main dashboard will be as shown in the following screenshot, where on the left-hand
side, you will see the General Information, which will show the username, domain name,
home directory and the IP address of the log in. On the left towards the bottom of the
screen are the Statistics like databases used, email and the add-on Domains.
40
Website Development
In the FILES section, the most important folder is of the File Manager, you can upload
or download files of your webpage. The next important is FTP Accounts, where you can
create users that can use programs like FileZilla to upload or download files.
Taking a backup of the FILES section allows you to fully or partially download the
webpage.
41
Website Development
In the DATABASES, the phpMyAdmin is the most important section which allows you to
manage the database of the webpages. It can edit, add, truncate databases and tables.
The MySQL Databases allows you to create and delete the databases or users. The same
thing can be done step by step with the MySQL Database Wizard.
In the DOMAINS section, the Addon Domains folder is an additional domain that the
system stores as a subdomain of your main site. You can use these Addon Domains to
host additional domains on your account. The Site Publisher is used to quickly create a
website from a set of available templates. The Subdomains folder is a subsection of your
website that can exist as a new website without a new domain name.
42
Website Development
In the EMAIL section, the most important folder is Email Accounts in which you can
manage email accounts associated with your domain.
The Metrics section is more for statistics of your website. You can see each one will give
different reports for your website.
In the SECURITY section, the most important folder is IP Blocker, you can block any
host or network that you don’t want to give access to your website. There is also
ModSecurity that is used to secure Apache.
43
14. Website Development ─ Website Setup
Website Development
After understanding most of the important factors of Website Development, it is now time
to set up a webpage. For setting up a webpage, we should adhere to all the steps given
below.
Step 2 – We chose the hosting provider based on the analysis of the hosting plans that
we needed.
Step 3 – We configured the DNS records and the DNS servers of the registrar that in our
case was GODADDY again.
Step 4 – Now that we are done with all the above-mentioned steps, it is time to upload
the files of the webpage through CPanel File Manager.
44
Website Development
Step 5 – After opening it, upload the files in the folder named public_html as shown in
the following screenshot.
Step 6 – If you have a dynamic website, then you must configure the database too. To
do it, go to MySQL Databases.
Step 7 – Click on Create New Database and then write the database name that your
website will have and then click on Create Database as shown in the screenshot given
below.
45
Website Development
Step 8 – In the Add New User section type the Username and the password and then
click on Create User.
Step 9 – We must add the user that we created for this database to give rights or
permissions to manage it.
46
15. Public Authority Certificates
Website Development
For example, the following screenshot shows the eBay public certificate.
47
Website Development
Thumbprint Algorithm: The algorithm used to hash the public key certificate.
Thumbprint The hash itself, used as an abbreviated form of the public key
certificate.
Types of Validations
There are three types of validations, which are as follows –
48
Website Development
49
Website Development
50
16. Purchasing a Public Certificate
Website Development
To purchase a SSL certificate, you should go to the SSL Certificate Provider (certificate
authority). Each SSL Certificate Provider has different products, prices and levels of
customer satisfaction, which is nearly the same logic like purchasing web hosting. To check
the best offers and products you can try SSLShopper by clicking on the following link.
https://www.sslshopper.com/certificate-authority-reviews.html
It has reviews and experience from other clients that have purchased before a SSL
Certificate.
51
Website Development
The purchasing process then takes place as depicted in the following illustration.
52
17. E-commerce Platforms
Website Development
In this chapter, we will deal with e-commerce. Which are the most popular and secure e-
commerce platforms? What is needed to secure them?
E-commerce is selling and buying goods and services from the internet and paying through
this medium. This transaction happens between clients to business, B2B, client to client.
As in between all this, there are money transactions which we should be cautious when
using, or setting up e-commerce websites.
Some of the top e-commerce platforms which are secure as well are listed below along
with a detailed explanation about them.
Magento
The website link is – https://magento.com. This platform is one of the best and is
developed by eBay. Magento can be easily integrated with the PayPal gateway. It has
two versions– Free Version and Pay Version. The vulnerabilities are patched too fast .It
has a vast variety of plugins and customization. It has SaaS solutions, which means
Elastic scalability, high resilience and availability, PCI compliance, global availability and
automated patching, while still maintaining flexibility in software customization that our
merchants require.
53
Website Development
Shopify
The website link is – https://www.shopify.com, so if you are trying to design the checkout
page to be exactly how you want, Shopify is probably not for you. In fact, none of the
hosted solutions will offer customizable checkout process, so you can jump the Self-Hosted
section right away. Shopify has many apps that you can download and install on your
store, which extend the default features or introduce new functionalities.
Woocommerce
The website link is – https://wordpress.org/plugins/woocommerce/. WooCommerce is a
free e-commerce plugin that allows you to sell anything very practically. Built to integrate
seamlessly with WordPress, WooCommerce is the world’s favorite e-commerce solution.
It gives you both store owners and developers complete control that use WordPress
templates.
With endless flexibility and access to hundreds of free and premium WordPress extensions,
WooCommerce now powers 30% of all online stores, more than any other platform.
54
Website Development
Bigcommerce
55
18. E-commerce Payment Gateway
Website Development
To choose the right payment gateway, you should follow the following guidelines:
You should finalize that payment gateway which is supported in your country, not
all them operate globally.
You should check what payment gateways are supported better from your e-
commerce platform. For example, PayPal gateway is fully supported by Magento
because the same group have created them.
56
Website Development
You must see the charges and fees that will be deducted per transaction.
What payment method do they support? For example, VISA is a payment method,
Master Card is another.
Do they support your type of business? For example, some of them don’t deal with
businesses that sell adult materials, betting, gambling, firearms selling, narcotics,
etc.
PAYPAL – You can find all the terms and conditions of their business model on
their URL – https://www.paypal.com/. PayPal is one of the longest established
and probably the best-known service for transferring money online.
Authorize Net – The URL for this popular payment getaway provider is
http://www.authorize.net/. It is among the most powerful and well-known
payment gateways. It is well-supported by e-commerce WordPress plugins.
In the next chapter, we will understand how to create a small business website.
57
19. Small Business Website
Website Development
To create a small business website is not a complicated task. The main fear is to figure
out the content of the website, which is one of the main reasons business owners are put
off. Small Business websites are best when they are simple with minimal text and just a
single option on each page – for example, a Submission Form, or a Contact Us button.
Business websites also tend to follow a standard format, using a few essential pages. As
you go through the list, don’t worry about formatting each page yet, just think about the
text, images and the content you will include. The most crucial pages of a small business
website are:
Home
About
Gallery
Services
Contact
You can see all these important pages in the following screenshot of a small business
website.
Home: On the home page, you should include the name of your business, where
you are located and a simplified pitch of a few lines about why customers should
choose your business.
58
Website Development
Gallery: On the gallery page, you should put professional photos of your job
processes, product, staff, etc. Clients can “feel” the way you work.
Services: A page with details about the products you sell or services you provide.
On the page where you detail your products or services, spend one to five
sentences describing each category you offer and give prices.
Contact: In this page, you should put your address, email, phone number, the
hours you are open for business. The links to any social media accounts such as
Twitter and Facebook should appear on this page. Embed a Google map of your
location.
59
20. Back Up Your Website
Website Development
Creating a backup of your website is important because it provides insurance against all
types of setbacks, such as security compromises, inadvertently deleting your site files and
database corruptions.
It is suggested backing up your site before you make changes each time and every time.
If something goes wrong, you have a fresh copy that you know is working. It might seem
like a hassle, but the first time you use a backup, you're going to pat yourself on the back
for having so much foresight.
Manual
Automatic (through cPanel).
Manual Backup
To manually backup your website, you can do it with a File Transfer Protocol (FTP) client
like we discussed previously with either – FileZilla or WinSCP. You connect your local
computer to your hosting account and move files between them. To backup your website,
you should just copy all the files from your hosting account to your local computer.
If you have a database, create a dump file (export/backup) of it used by your account. To
do so, you should access the phpMyAdmin tool (available in your cPanel).
60
Website Development
Automatic Backup
To automatically backup a website we can do it through the CPanel Console, which can
be done by clicking on the Backup Wizard as shown in the screenshot given below.
After clicking on Backup Wizard, the next window that will show up will be like the following
screenshot. It will be explaining what all will be backed up with the tools provided by the
cPanel.
61
21. Website Development ─ Webpage Migration
Website Development
Webpage Migration is a process of moving a webpage from one host to another. This
process is done for various reasons, some of which are:
You are not satisfied anymore with the support of the Hosting Company
Prices are cheaper to another hosting
Your actual hosting plan doesn’t fulfill your needs anymore
Technology offered is not competitive anymore, etc.
62
22. Testing Your Website
Website Development
Scenario: The scenario is simple – When trying to open a website there is an error which
is popping up – Page cannot be displayed.
Answer: This issue can be addressed by following the troubleshooting steps given below.
Step 1 – Firstly, you must ensure that you don’t have an internet connection problem.
You can check it by just simply trying to open another website and see if you get the same
result or not.
Step 2 – You have internet in your computer but the website is still not opening.
You should check with the hosting provider, if your hosting plan has expired or not
(maybe you forgot to pay it).
You should also check with your domain registrar, if your Domain Name is still valid
and it has not expired too.
Step 3 – After you are done with checking the above-mentioned steps, you should check
your DNS records if they are ok or not. Sometimes Hosting Providers change the DNS
servers and forget to update the records. You can check this by opening CMD, type ping
yourdomainname.com and if you get the following response, please check further.
Ping request could not find host yourdomainname.com. Please check the name and try
again.
If you get the following result, then the DNS records and the server are healthy.
63
Website Development
Step 4 – Check for any database connection errors, if you are having similar errors like
the screenshots shown below.
To check if the database is functioning in the backend, you should have confirmation that
the username, file permissions, passwords and ports of the database did not change.
Step 5 – If you have a the Error 404 Not Found as shown in the following screenshot,
then while opening www.yourdomainname.com, you should check if your directory
structure has not changed and it is pointing on the Public_html folder.
64
23. Website Development ─ Security
Website Development
Securing your webpages is as important as developing it, because any threat which can
compromise the security can harm your business reputation, damage you financially (by
stealing your online deposits), damage your clients that visit your website, etc.
As per security experts, they will suggest to do the website security check based on the
OWASP TOP 10, which is a powerful awareness document for web application security.
The OWASP Top 10 represents a broad consensus about what the most critical web
application security flaws are.
SQL Injections
Injection flaws, such as SQL, OS and LDAP injection occur when untrusted data is sent to
an interpreter as part of a command or a query. The attacker’s hostile data can trick the
interpreter into executing unintended commands or accessing data without proper
authorization.
Solution – To secure your webpage from iSQL, you must validate inputs and filtering
symbols.
Solution – To secure your site from this flaw, you must make cookies and sessions with
expiration time.
65
Website Development
Security Misconfiguration
Good security requires having a secure configuration defined and deployed for the
application, frameworks, application server, web server, database server and the platform.
Secure settings should be defined, implemented and maintained, as the defaults are often
insecure.
66
Website Development
on the server when each function is accessed. If requests are not verified, attackers will
be able to forge requests to access functionality without proper authorization.
Solution – The most commonly used prevention is to attach some unpredictable challenge
based tokens to each request that comes from a website and associate them with the
user’s session.
Solution – Check if that component version has vulnerabilities and try to avoid or change
with another version.
Some of the main service ports which are used in hosting of websites are given below:
SSH – port 22
FTP – port 21
MySQL – port 3306
DNS – port 53
SMTP – port 25
The port changing of those services varies depending on the Operating System and its
different versions. In addition to this, you have to install a firewall. If it is a Linux OS, we
67
Website Development
will recommend IPtables and block all the other unneeded ports. In case your OS is
Windows, you can use its incorporated firewall.
To block brute force logins in your services, you can use Fail2ban, which is a Linux based
software and block all the IP addresses which makes many failed login attempts.
68
24. Speed Up Your Website
Website Development
Just read the following statistics and you will change your mind.
Amazon found this to be true, reporting increased revenue of 1% for every 100
milliseconds improvement to their site speed based on their group reports.
In our example, we will be testing the performance of tutorialspoint.com for a user from
Germany using the Chrome browser.
69
Website Development
We will get the following results in the main page. It will show all the time needed to open
the webpage with its respective elements.
70
Website Development
Minimize server response time – As per the users’ location, the server response
time changes, this is because of the distance between them. It is recommended
that if most of your visitors are in one specific region, your hosting provider should
be located there too, this makes the traveling distance shorter for the data.
Enable Browser Cache – When you visit a website, the elements of the page are
stored on cache storage, so next time you visit the site, your browser can load the
page without having to send another HTTP request to the server.
CSS delivery should be external if possible. The external style sheet is preferable,
because it reduces the size of your code and creates fewer code duplications.
Remove broken links from your JavaScript, CSS and Image URLs.
71
25. Advertise Your Webpage
Website Development
Once you have created your website and it is functional, then comes a very important step
of marketing it. This is done to increase site visitors and to spread the word, something
that can help exist on internet. The following illustration is a schematic view of all the steps
that need to be done when advertising a website.
72
Website Development
Facebook has around 1.4 billion users and over 900 million visits a day which makes it fit
for large and small businesses. The real advantage of Facebook lies in the amount of
granular data available to target users. This is because you can target your audience with
various criteria such as age, location, sex, etc.
For example, in this tutorial, we have mentioned many times the word Hosting. Now, if
we log in to Facebook, you can see on the left hand side of the webpage an advertisement
regarding hosting as shown in the screenshot below.
73
Website Development
To create a Facebook Advertisement, click on account name. Then click on Create Ads as
shown in the following screenshot.
A new window will open and in this you should select your objective. In our case, I will
select Brand Awareness.
74
Website Development
Write the campaign name, in our case it is – tutorialspoint then Click Create Ad
Account as shown in the screenshot below.
Select your account country and the currency that you want to pay Facebook as shown in
the following screenshot then Click Continue.
75
Website Development
To select your audience, you should specify the age range and the location to which this
Advertisement will be shown.
Scroll down and you will have options to select how this advertisement will be shown.
Type text for this advertisement and upload a photo, once done Click Place Order.
76
Website Development
77
26. Website Development ─ AdWords
Website Development
This is an advertising program from Google, where you can register and can pay them
based on the number of clicks on your website link or based on the number of page
impressions. Webpages from Google and from partner websites are designed to allow
Google to select and display the advertising.
Step 1 – To create an AdWords campaign, you must first create an account by clicking on
the following link – https://adwords.google.com/um/signin
78
Website Development
Step 2– After logging in, click on Campaigns, select the type of load and location as
shown in the following screenshot. AdWords is like Facebook Advertisements.
79
Website Development
Step 3 – Click on the Radio button for the target that you want as shown in the picture
below. Also, you have to bid the budget. How much do you want to spend per click?
80
Website Development
Step 4 – Put a group name and then fill the Headlines and Description Fields for the
AdWords that have to be created.
While you are filling in the details, you can see on the left preview pane how the AdWords
are going to look once they are created.
81
Website Development
Step 5 – Select such Keywords that the search engine will show when people do searching.
82
27. Website Development Website
─ SEODevelopment
Search Engine Optimization is the process where you can make your website better in
terms of ranking in search engines. The majority of web traffic is driven by major
commercial search engines, Google, Bing and Yahoo!. Although social media and other
types of traffic can generate visits to your website, search engines are the primary method
of navigation for most of the Internet users. This is a fact whether your site provides
content, services, products, information or just about anything else.
To optimize your webpage ranking, you should know what search engines look at:
Content: It is determined by the theme that is being given, the text on the page,
the titles and the descriptions that are given.
Authority: Your website should have good content to link to or for other
authoritative sites to use your website as a reference or cite the information that
is available.
Google AdSense
AdSense is the reverse of AdWords, allowing publishers (which includes bloggers and other
website owners) to tap into Google’s immense advertising network, so that other
advertisers can run ads on their website. To register in this program, you must click on
the following URL – https://www.google.com/adsense/
83
Website Development
Make Partnerships
This basically means to find businesses that can have interest to advertise on your website
and make a deal.
84