HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site

By Olga Maria Stefania Cucaro

This book aims to initiate those who want to independently create a website, to the world of domains and programming linked to the web. The author conceived this work as a scientific work intended for educational and study use for all those who approach the study of client-side and server-side programming.
In the first place the difference between the various domains existing on the network will be explained and at a later time we will try to explain the CSS and HTML and then enter the PHP programming (server side) and JavaScript (client side) with the creation of databases via phpMyAdmin.
All this will be explained through an example website created specifically using a free Bootstrap for simplicity and basic convenience and programming a control panel with login connected to the site via database for inserting images directly from the web by uploading them to the database created with connected phpMyAdmin to the site. Obviously, after entering the world of databases and programming, you can apply this knowledge to any other need for iteration by the user required by the site project.
The aim of this study is not to create simple web pages that today can be done easily with WordPress or other easy-to-use software, but for purely educational purposes to explain the use of databases and server and client-side programming to make a dynamic otherwise static site. In summary, this work can be useful for those who want to approach the fascinating world of website programming from the beginning.

• Language: English
• Publisher: ResearchFreelance
• Release date: Feb 8, 2022
• ISBN: 9791220896689

Book preview

Introduction

This book aims to initiate those who want to independently create a website, to the world of domains and programming linked to the web. The author conceived this work as a scientific work intended for educational and study use for all those who approach the study of client-side and server-side programming.

In the first place the difference between the various domains existing on the network will be explained and at a later time we will try to explain the CSS and HTML and then enter the PHP programming (server side) and JavaScript (client side) with the creation of databases via phpMyAdmin.

All this will be explained through an example website created specifically using a free Bootstrap for simplicity and basic convenience and programming a control panel with login connected to the site via database for inserting images directly from the web by uploading them to the database created with connected phpMyAdmin to the site. Obviously, after entering the world of databases and programming, you can apply this knowledge to any other need for iteration by the user required by the site project.

The aim of this study is not to create simple web pages that today can be done easily with WordPress or other easy-to-use software, but for purely educational purposes to explain the use of databases and server and client-side programming to make a dynamic otherwise static site. In summary, this work can be useful for those who want to approach the fascinating world of website programming from the beginning.

GENERAL PART

Difference between sites and blogs

The blog is updated daily, or weekly not new news which the blogger has decided to talk about in the blog built ad hoc (cooking blog, programming, etc.). The site can only be updated when company information changes or in the case of a portfolio or e-commerce site when products or prices change.

Sites can be both static and dynamic, while a blog must necessarily be dynamic as it must be continuously updated. Static sites are created in html and css and are only editable by an expert through the source files, while dynamic sites have many iterations with the user that modify the pages automatically. Examples of dynamic sites are e-commerce sites and blogs that allow you to select what interests you or interact with the site in various ways.

To create dynamic and responsive sites or blogs we now use hosting with simple control panels also called Content Management System (CMS) such as the open source Wordpress software. This is the simplest method to continuously and easily create and update your site without having any specific knowledge.

What are domains and hosting

A domain is required to make a website public. The domain is made available by a provider and can be free or paid. Usually the top-level domains are those that identify a territory, while those that interest users are those of the second, third and fourth level.

The second level domains are those that we will usually find for a fee and identify the user (for example www.user.com). The second and third level ones are mostly available for free on the web (eg we can have www.altervista.user.com). The second, third and fourth level domains can also be connected to your site (eg we can have blog.user.com).

When we want to put web pages online, we must also request a hosting (web space), from the English to host which means to host. Often the provider we choose will give us both the domain and the free or paid hosting. This depends on the conditions offered by the provider.

In the example that we will explain later in this book, we have chosen a hosting with a free third level domain from Altervista.

Obviously, if you are a programmer and you are selling a site to a customer, you will not be able to use a third level domain, but you will use a second level domain with paid hosting that you will transfer to the company after creating the site or that you will manage annually. This will depend on the contract drawn up with the customer.

As in everything related to programming, the choice of paid or free hosting depends on the final result you want to achieve. Paid hosting has additional services and various e-mail addresses associated with the domain, furthermore being composed only of the name of the company or of the person it could be facilitated in the Google search.

How to create pages without knowing languages ​​with WordPress

Wordpress is an open source software that allows you to dynamically create and update your blog or site. Through a very intuitive CMS (Content Management System) it allows you to add textual content, videos and images without working on the code directly on the pages of our site. It also offers the possibility if you know the basics of html language, to modify it directly from the source code. Obviously this platform offers many possibilities to use widgets and templates to be able to have, at the end of the creation work, a personalized blog, but not as much as it would allow us to make a personalized creation with html, php, javascript and mysql code where we can create our own. site from scratch with no pre-made themes. To customize the site more based on a theme, I can add a CSS to the

Wordpress is still an excellent choice and also allows us to insert php code. In this case I can go to the theme editor aspect and enter the theme functions a file called function.php. This is not very recommendable as all additional code will be lost when the theme is updated.

Instead, there is a plug-in to insert the php code which is called Code Snippets. After installation and activation, I will find Snippets on the main menu and I will be able to use some existing files or create new ones.

How to create pages using HTML and CSS

When we write a site in html, our PC (CLIENT) communicates with another computer called SERVER which provides a response to the Client.

The client makes a request to the Server which responds by interpreting the html language and viewing the site.

To create web pages you can use a simple wordpad or notepad or the more advanced Notepad which also highlights the writing errors of the instructions.

HTML represents the structure of the site, while CSS can be considered the dress (the graphics) of the site.

HTML is a markup language and not a programming language. In fact, the browser translates the code and allows us to view the web page.

The tags are essential to give a structure to the page which will then be translated by the browser.

Example of element or tag:

Page title

Paragraph title

Page title

If we copy this code on a note sheet and save it with an html extension, we will see that our raw site will appear.

We then save the file with the html extension. We will call it index.html because it is the name that the browser will recognize as the main page of our site.

If we double click on the desktop file it will display on the browser:

You see that the browser recognizes the tags and formats our text as we wanted. This is a simple example of how the browser reads html pages.

The browser then translates the tags into elements of the web page.

From chrome if we type:

Ctrl + u will display the html code of any web page.

Index.html:

Web Design Example

current> index.html> Home

about.html> About

services.html> Services

Body of the site

Example Web Deisgner, Copyright & copy; 2022

Web Design Example

current> index.html> Home

about.html> About

services.html> Services

Body of the site

Example Web Deisgner, Copyright & copy; 2022

Obviously, if we do not insert the html file of the contacts, an error page will appear.

We must therefore create the contact page.html

Web Design Example

You can find us via xxxxxx n. xxx
our number is xxxx

Example Web Deisgner, Copyright & copy; 2022

Obviously, a precise page style will be missing which can be inserted directly into the html page or in a particular file defined style.css which will contain the page style file as we will see later.

Now that the files have increased, let's create a special folder for the site that we will call base site and where we will insert the file with the .css extension and the files with the.html extension to view the site, click twice on the index.html page. The style file will also be written to the notepad for simplicity and saved with the .css extension as follows.

Style.css:

background {

font: 15px / 1.5 Arial, Helvetica, sans-serif;

padding: 0;

margin: 0;

background-color: # ff55dc;

}

/ * Global * /

.container{

width: 80%;

margin: auto;

overflow: hidden;

}

ul {

margin: 0;

padding: 0;

}

/ * Header ** /

header {

background: blue;

color: #ffffff;

padding-top: 30px;

min-height: 70px;

border-bottom: # e8491d 3px solid;

}

header to {

color: #ffffff;

text-decoration: none;

text-transform: uppercase;

font-size: 16px;

}

header li {

float: left;

display: inline;

padding: 0 20px 0 20px;

}

header #branding {

float: left;

}

header #branding h1 {

margin: 0;

}

header nav {

float: right;

margin-top: 10px;

}

header .highlight, header .current a {

color: # ff6940;

font-weight: bold;

}

header a: hover {

color: #cccccc;

font-weight: bold;

}

footer {

padding: 20px;

margin-top: 20px;

color: #ffffff;

background-color: orange;

text-align: center;

}

Index.html:

stylesheet href = ./ style.css>

Web Design Example

current> index.html> Home

contacts.html> Contacts

Body of the site

Example Web Deisgner, Copyright & copy; 2022

Contact.html:

stylesheet href = ./ style.css>

Web Design Example

index.html> Home

current> contacts.html> Contacts

You can find us via xxxxxx n. xxx
our number is xxxx

Example Web Deisgner, Copyright & copy; 2022

All the html pages that we insert in the folder will have the same formatting inserted in the style.css style sheet

Another choice would be to use other resources available online to create or edit CSS style sheets.

There are some online tools you can use for this, such as:

https://www.toptal.com/developers/css3maker/

https://css3generator.com/

https://webcode.tools/generators/css/background-color

https://css-generator.netlify.app/

Obviously, in addition to the css style sheet, we must create the html files to write the content of the site.

In this regard we can also use the Amaya software with which we can create both the css and html file.

https://amaya.it.uptodown.com/windows

Nowadays, creating responsive sites that work on any device and with various links and pages can be very complex and take a lot of time so it can be useful to download already prepared models such as bootstraps from the internet or download examples of complete sites directly from the internet. to be modified at will, always respecting the licenses available to the user.

Dynamic and static sites

Static sites are the sites that in past years represented most of the sites on the internet. Today the situation is changing dramatically and static sites are in less and less quantity.

The static site is the simplest to create and provides an unchanged site up to the changes made by the programmer through code. The dynamic site is more sophisticated and requires level programming within the site pages