Website Development - Quick Guide

Website Development - Introduction

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 Howcodex is − www.howcodex.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 subdomain which by default is www.
The domain name; domain names are normally chosen to have a meaning. Like in our case “howcodex”, we can understand that this website offers tutorials.
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.
The webpage that we are looking at, in our example, it is “about_careers.htm”.

Why Do We Need Websites?

Websites primarily act as a bridge between one who wants to share information and those who want to consume it. If you are running a business, then it is almost imperative for you to have a website to broadcast your offerings and reach out to potential clients at a global stage.

The following points explain why it is important to have a website −

A website is an online brochure where you can advertise your business offers.
It gives you a platform to reach out to a far-and-wide global customer base.
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.
If you have an official website with a domain, then you can have your personalized email. For example, info&commat;howcodex.com (it is much better than florjan.llapi&commat;yahoo.com).

How to Setup a Website?

A website is composed of several elements and while setting up a website, you would have to take care of each of them.

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.

Website Development - Required Skills

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.
PHP − It is a popular programming language to develop webpages. You can collect more information on PHP on − https://www.howcodex.com/php/ .
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 – https://www.howcodex.com/perl/ to know more about PERL.
Java or VB Scripts − These scripts are required to perform user-level validations and to add more interactivity to your Website. So, a web developer is required to have adequate knowledge of any of these client-side scripts.
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 − https://www.howcodex.com/asp.net/ and https://www.howcodex.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.

Hardware and Software Support Resource

The Support Resource upgrades the hardware and software as and when needed. They play a crucial role in keeping the system up and running in a flawless manner.

Marketing and Promotion

Marketing professionals mostly use popular Social Media Platforms such as Facebook and Twitter to promote the content and resources available on the site. They reach out to the target audience and create awareness among them.

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.

Website Development - Domain Name

Domain name is the part of your online address and your visitors will use it to find you easily. For example, Howcodex domain name is howcodex.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 howcodex.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, howcodexs29.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 howcodex.net, howcodex.info, howcodex.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.

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, howcodex.com. It helps improve your rank on search engines (which increases traffic) and it also makes more sense to your customers.

Domain Name Extensions

First domain type is Top Level Domain (TLD). These top level domains include any extensions which contain only one suffix — for example, .net, .info, .biz and so on.

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.

A gTLD is a Generic Top-Level Domain and includes addresses like – .marketing, .estate, .fashion and .photography. This is a booming segment which is very popular recently and there is a huge range to choose from, whatever your industry!

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 −

.com – commercial − This is an open TLD; any person or entity is permitted to register and it is always the main TLD.
.org – organization − This is an open TLD; any person or entity is permitted to register. But, it is originally intended for use by any non-profit organizations. But as of now, there are no such restrictions and the .org domain name is being used by numerous organizations.
.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.
.edu – education − This TLD is limited to specific higher educational institutions such as, but not limited to, trade schools and universities.
.mil – military − The .mil TLD is limited to use by the United States military.
.arpa – Address and routing − It is for Advanced Research Projects Agency in the early days on the Internet, .arpa is now exclusively used as an Internet infrastructure TLD.

In the next chapter, we will understand how to register a domain name.

Domain Name Registration

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 −

GoDaddy - with the URL https://uk.godaddy.com
Name – with the URL https://www.name.com/
iPage – with URL https://www.ipage.com
BlueHost – with URL https://www.bluehost.com/
Hostgator – with URL https://www.hostgator.com/

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.

In my case, I wrote “howcodex.com “and clicked “Search Domain”.

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 “howcodex.online”.

Click on the green “Select” button.
Then click on “Continue to Card” as shown in the screenshot given below.

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.

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.

Click “Continue to Cart”.

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.

Also, you have the possibility to buy other similar domains.
Click “Proceed to Checkout”.

As we are a new customer, we will click on “Continue”.

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).

Now, we should enter the credit card details or PayPal details. Then click “Continue” as shown in the following screenshot.

The following screen will show up once the purchase of the domain is successful.

Website Development - Subdomains

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.howcodex.com in addition to the already existing www.howcodex.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.howcodex.com to delve into an even more specific area of interest on the site. Each subdomain can be up to 25 characters long.

Website Development - Domain Privacy

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.

The next step is to click on “Lookup” as shown in the following screenshot.

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

Each of these sections have −

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

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.

The following screenshot has full information details of the domain name.

Configure DNS Record on a Hosting Platform

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.howcodex.com has an IP of 93.184.220.42, so it is easier to remember a friendly name.

Pointing a Domain to an IP is done through a record. For example: www.howcodex.com A 93.184.220.42

There are other types of DNS records that are used for a webpage, depending on the functions that we need to publish.

S.No	Type of Record & Explanations
1	A Record Connects an IP Address to a host name
2	CNAME Record Allows more than one DNS name for a host
3	MX Record Ensures email is delivered to the right location
4	NS Record Contains the name server info
5	TXT Record Provides additional info about a host or more technical info to servers
6	SRV Record Finds computers that host specific services
7	AAAA Record Provides IP addresses that do not fit a standard A Record format
8	SPF Record Used to help prevent against spam

Let us now see it practically: earlier the domain howcodex.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”.

Select the Domain whose DNS should be managed by clicking on Setting . Click on “Manage DNS “.

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”.

Website Development - CMS Platforms

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.

Choosing the Right Website

Let us understand this by asking ourselves a few questions and then discuss the concept in detail.

Question 1 − How much money do we want to spend?

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.

Question 2 − How much time do we have to plan for the maintenance?

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.

Question 6 − What type of web programing language or platform is easier to find?

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.

CMS Platform

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.

Joomla has balance between customization possibilities and user-friendliness, yet it is much more complex than WordPress. If you have never worked with this engine before, you will need some time to get used to modifying it. Assigning plugins to modules, positioning modules on different pages, configuring layouts and other necessary manipulations can be a bit hard on a beginner developer.

On the other hand, Joomla extension developers and community have come up with many inspired solutions for common web design problems that are hard to resolve within WordPress. If we take any Joomla slider extension as an example, you can set its location on the page, the duration for showing each slide, the sliding effect and the type of pagination.

Its official webpage is https://www.joomla.org/.

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.

Its official website is https://www.drupal.org/. A view of its dashboard background is shown in the screenshot below.

Flat & Dynamic Webpages

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

Disadvantages of static websites

Requires web development expertise to update site
Site not that useful for the user
Content can get stagnant

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 −

What operating system or browser the visitor is using.
Whether the user is using a computer or a mobile device.
The source location that referred the visitor.
If the visitor has done a purchase before from an online shop, etc.

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.

The following illustration shows a schematic view of a dynamic webpage.

Publishing & Development Tools

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.

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 – https://www.editpadlite.com/.

Note − You should always use a text editor that you feel more comfortable working on.

XAMPP & LAMPP

Another tool that you need to have in your computer when you are specially developing a dynamic webpage is – XAMPP for Windows OS and LAMPP for Linux OS. It has various products such as

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/.

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 – https://www.adobe.com/products/dreamweaver.html.

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.

WinSCP can be downloaded from https://winscp.net/eng/docs/guide_install.
FileZilla can be downloaded from https://filezilla-project.org/download.php.

Commercial & Free Themes

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/.

Choosing a Web Hosting Company & a Plan

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.
A company that supports Multiple Add-on Domains.
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.
Do they offer Backup. Are they free of charge?
Do they have 24/7/365 Live Chat Support.

Choose a Web Hosting Plan

Before choosing the right hosting plan, you should know what you need, a Windows OS based hosting or a Linux OS based hosting. This choice depends on the coding language that your website has. If it is ASP, it should certainly be a Windows based hosting and should also have an IIS server installed in it. If it has any other programming languages like PHP, Perl, Ruby, then you should go with Linux based hosting.

After you have decided on the type of hosting (Windows or Linux), you should define the right hosting plan.

You should take into consideration the following factors −

Disk Space
Bandwidth
Number of Hosted Domains
Number of Subdomains
Parked Domains
Versions of PHP, MySQL and Perl.

The main plans in general are as follows −

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.

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/.

Website Development - Cpanel

Control panel is the administration web interface of your webhosting account. It is an interface that you access to administer all the aspects of your account. You can typically control all portions of your site within the control panel without using any additional software like FTP software to upload files, though many people find it faster and easier to do so.

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.

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.

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.

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.

Website Development - Setup

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 1 − Firstly, we purchased a domain name at GODADDY.

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.

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.

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.

Public Authority Certificates

Digital Certificates are a standard of security for establishing an encrypted link between a server and a client. This is generally between a mail server or a webserver that protects data in transitions by encrypting them. A Digital Certificate is also a Digital ID or a passport which is issued by a Third-party authority, which verifies the identity of the server’s owner.

For example, the following screenshot shows the eBay public certificate.

Components of a digital certificate

All these components can be found in the certificate details −

Serial Number − Used to uniquely identify the certificate.
Subject − The person or entity identified.
Signature Algorithm − The algorithm used to create the signature.
Signature − The actual signature to verify that it came from the issuer.
Issuer − The entity that verified the information and issued the certificate.
Valid-From − The date a certificate is first valid from.
Valid-To − The expiration date.
Key-Usage − Purpose of the public key (e.g. encipherment, signature, certificate signing...).
Public Key − The public key.
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 −

Domain validation SSL Certificate.
Organization Validated SSL Certificates.
Extended Validation SSL Certificates.

Let us now discuss each of them in detail.

Domain validation SSL certificate

It validates the domain that is registered by a system administrator and he has the administrator rights (authorization or permission) to approve the certificate request. This validation is generally done by an email request or by DNS record.

Organization Validated SSL Certificates

It validates the domain ownership and business information like the official name, City, Country. Validation is done also by email or DNS record entering. The certificate authority also needs some genuine documents to verify your Identity. The Organization Validated SSL Certificates display the company information in the certificate details as shown in the following screenshot.

Extended Validation SSL Certificates

It validates the domain ownership, organization information and the legal existence of the organization. It also validates that the organization is aware of the SSL certificate request and approves it. The validation requires documentation to certify the company identity plus a set of additional steps and checks. The Extended Validation SSL Certificates are generally identified with a green address bar in the browser containing the company name like the one shown in screenshot below.

Purchasing a Public Certificate

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.

The purchasing process then takes place as depicted in the following illustration.

E-Commerce Platforms

In this chapter, we will deal with e-commerce. Which are the most popular and secure ecommerce 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.

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.

Bigcommerce

The website link is - https://www.bigcommerce.com. It has over 115 e-commerce templates, unlimited product uploads, mobile view, it is perfectly integrated with amazon and eBay. It also can be integrated with most of the payment gateways. From security perspective, it is PCI compliant.

E-Commerce Payment Gateway

Payment Gateway is an online payment processing technology which helps businesses to accept credit cards and electronic checks. In other words, payment gateways are “Manin-the-middle” which are located between e-commerce platforms and clients.

A payment gateway allows you to −

Make and take payments quickly and easily.
Keep your customer's data (information) and money secure.
Gain trust of your customers, so they are willing to hand over their money.

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 ecommerce platform. For example, PayPal gateway is fully supported by Magento because the same group have created them.
Payment gateway should be of 3.0 PCI data security standards.
Do you need payment gateway and merchant account or an all-in-one payment service provider?
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.

Small Business Website

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.

Let us now understand each of these essential pages in detail.

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.
About − Provide your company background and list organizational memberships. Also, include customer testimonials, unless you want to link this out on a separate page like social media as Facebook.
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.

Back Up Your Website

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.

There are two ways to back up your website −

Manual
Automatic(through cPanel).

Let us discuss both these ways to backup your website in detail.

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).

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.

Website Development - Webpage Migration

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.

As migration is a process, the following steps are needed to complete it in a minimal downtime of your webpage.

We must fully backup our webpage as discussed in the previous chapters.
Upload the backup file in the new hosting.
Unzip files in the Public folder.
Import the database file.
Configure files with the credentials of the new database.
Point your new domain name servers with your current registrar and wait for the new records to be propagated.

Testing Your Website

In this chapter, we will learn how to do some small troubleshooting of a website.

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.

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.

Website Development - Security

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.

Broken Authentication and Session Management

Application functions related to authentication and session management are often not implemented correctly, which allows attackers to compromise passwords, keys, session tokens or even to exploit other implementation flaws to assume other users’ identities.

Solution − To secure your site from this flaw, you must make cookies and sessions with expiration time.

Cross-Site Scripting (XSS)

XSS flaws occur whenever an application takes untrusted data and sends it to a web browser without proper validation or escaping. XSS allows attackers to execute scripts in the victim’s browser, which can then hijack user sessions, deface websites or redirect the user to malicious sites.

Solution − Protection from this is on the same lines as it is for iSQL.

Insecure Direct Object Reference

A direct object reference occurs when a developer exposes a reference to an internal implementation object, such as a file, directory or a database key. Without an access control check or other protection, attackers can manipulate these references to access unauthorized data.

Solution − You should implement specific protection mechanisms such as passwords to safeguard such files.

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.

Solution − Software should be kept up to date.

Sensitive Data Exposure

Many web applications do not properly protect sensitive data, such as credit cards, tax IDs and authentication credentials. Attackers may steal or modify such weakly protected data to conduct credit card fraud, identity theft or other crimes.

Solution − Sensitive data deserves extra protection such as encryption at rest or in transit, as well as special precautions when exchanged with the browser.

Missing Function Level Access Control

Most web applications verify function level access rights before making that functionality visible in the UI. However, applications need to perform the same access control checks 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 − You should check the levels of authentication.

Cross-Site Request Forgery (CSRF)

A CSRF attack forces a logged-on victim’s browser to send a forged HTTP request, including the victim’s session cookie and any other automatically included authentication information, to a vulnerable web application. This allows the attacker to force the victim’s browser to generate requests which the vulnerable application thinks are legitimate requests from the victim.

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.

Using Components with Known Vulnerabilities

Components, such as libraries, frameworks and other software modules almost always run with full privileges. If a vulnerable component is exploited, such an attack can facilitate serious data loss or server takeover. Applications using components with known vulnerabilities may undermine application defenses and enable a range of possible attacks and impacts.

Solution − Check if that component version has vulnerabilities and try to avoid or change with another version.

Invalidated Redirects and Forwards

Web applications frequently redirect and forward users to other pages and websites. These applications use untrusted data to determine the destination pages. Without proper validation, attackers can redirect victims to phishing or malware sites or use forwards to access unauthorized pages.

Solution − Always validate a URL.

Secure Used Protocols

This is the case where you have a VPS plan and you manage everything on your own. When the services are installed they use default ports. This makes the job easier to a hacker because he knows where to look at.

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 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.

Speed Up Your Website

Speeding up a webpage or a website is as important as finding the right hosting provider or domain name. Why?

Just read the following statistics and you will change your mind.

One second in page load time yields −

11% fewer page views.
16% decrease in customer satisfaction.
7% loss in conversions.

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.

Based on the results of a study done by Akamai −

47% of people expect a webpage to load in two seconds or less.
40% will abandon a web page if it takes more than three seconds to load.
52% of online shoppers say quick page loads are important for their loyalty to a website.

How to Test my Website Speed?

Some noted experts of this field suggest to use an online tool which is called as Webpagetest (https://www.webpagetest.org/). It is an open source project that is primarily being developed and supported by Google. It does the website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

In our example, we will be testing the performance of howcodex.com for a user from Germany using the Chrome browser.

To run the test, open the URL https://www.webpagetest.org/

Type in the domain name as shown in the following screenshot −

Test location – It is the country of the user location.
Browser – It is to simulate users’ browser.
Click “Start Test”.

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.

If we go to the Performance Review section, it will indicate which elements should be optimized.

How to Speed up my Website?

The basic tips to speed up your website are as follows −

Minimize HTTP requests − In simple words; simplify your webpage design.
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 Compression − Compression reduces the bandwidth of your pages, thereby reducing the HTTP response. You can do this with a tool called Gzip.
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.
Optimize Images of your website.
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.
Reduce redirections which create HTTP requests.
If your website is a Content Management System platform, then minimize the usage of plugins as much as possible.
Remove broken links from your JavaScript, CSS and Image URLs.

In the next chapter, we will learn how to advertise a webpage.

Advertise Your Webpage

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.

Social Media Advertisement

A social media advertisement is any kind of paid content on a social media network. These options run from a one-off promoted Tweet or Facebook post to a full-scale campaign with major budgets attached. Each social network offers different options, but we will discuss how to do it on Facebook because it is the biggest social media platform and the ROI of ads is about 95% on it.

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.

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.

Write the campaign name, in our case it is – howcodex → 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.

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.

Website Development - Adwords

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.

How to Create an AdWords Campaign?

To create an AdWords Campaign, you should follow the steps given below.

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

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.

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?

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.

Step 5 − Select such Keywords that the search engine will show when people do searching.

Website Development - SEO

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.
Performance − Your webpage should be fast (no delays). We have discussed it in the previous chapter named – Speed up your website.
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.
User Experience − Your webpage should be safe to navigate, no harmful softwares uploaded.
Keyword Stuffing − Do not overuse the keywords on your pages.
Purchased Links − Do not use too many buying links.

Making Money from a Website

One of the main purposes when creating a website is to make money from it. To achieve this, there are several methods which we will discuss below −

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/

Make Affiliated Marketing

You promote a product to your website visitors and email subscribers. If the product or service resonates with these people, they will click on your affiliate link and purchase the product and from this you take commissions.

Make Partnerships

This basically means to find businesses that can have interest to advertise on your website and make a deal.

Previous Page Print Page