How to Create a Web Page Application about Biodata Using HTML, CSS, PHP, and how to link it to a data database.

Introduction

The following steps are required to design a biological data form.

Let us first identify HTML, CSS, and PHP in computer languages.

HTML

HTML stands for HyperText Markup Language and is used to design web pages using a markup language. HTML is a combination of hypertext and markup. Hypertext defines a link between web pages. The markup language is used to define the text document in the tag, it defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that the machine can understand it and manipulate the text appropriately. Most markup languages (e.g. HTML) are human The language uses tags to define what manipulation must be done on the text.

HTML is a markup language used by a browser to manipulate text, images, and other content to display it in a required format. HTML was created in 1991 by Tim Berners-Lee. The first version of HTML was HTML 1.0 and the first standard version was HTML 2.0, released in 1999.

CSS

Cascading Style Sheets, affectionately known as CSS, is a simple design language designed to simplify the process of creating a web presence.

CSS allows you to apply styles to web pages. More importantly, CSS makes this possible regardless of the HTML that makes up any website.

CSS supports the look and feel of a website Using CSS, you can control the text color, font style, paragraph spacing, column size, and layout, background images or colors, layout designs, display differences for different devices and screen sizes, and many other effects. The

CSS is easy to learn and understand, but it gives you powerful control over the presentation of your HTML document. CSS is combined with the HTML or XHTML markup languages.

Introduction to PHP

PHP is one of the most widely used server-side scripting languages ​​for web development. Popular websites like Facebook, Yahoo, Wikipedia, etc., and our own Studytonight are developed with PHP.

PHP is popular because it is very easy to learn. Code and server deployment, so it’s been the first choice for beginners for decades.

In this series of tutorials we are going to cover all the major concepts of the PHP language from the basics to the advanced, and also share ready-to-use, useful code for beginners in snippets to start your web development project.

What is PHP?

PHP stands for Hypertext Pre-Processor. PHP is a scripting language used to develop static and dynamic websites and web applications. Here are some important things you need to know about PHP:

PHP is an interpreted language so no compiler is required.

To run and run PHP code we need a web server with PHP installed.

PHP is a server IDE Scripting language, i.e. PHP is executed on the server and the result is sent to the browser in simple HTML.

PHP is open-source and free.

What is a web page?

A web page is a simple document that can be viewed by a browser. Such documents are written in HTML language. Different types of resources can be embedded on a web page, e.g. For example Style information — control the appearance of a page.

Let us now see how to create biodata using the computer language above.

Step 1: First of all, install a virtual server on your computer (for example Xampp, Wamp).

Xampp is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P).

Figure 1: Xampp Server

Figure 2: Xampp Server

Step 2:

Next, we will require an editor where the HTML code has to be written. You can use any editor (such as Notepad++, Visual Studio Code, Adobe Dreamweaver, sublineText, Codeblocks, NetBeans, etc). Here we will use Visual Studio Code.

Step 3:

Install Visual Studio Code. Here are the steps:

Figure: Visual Studio Code

Visual Studio Code is a freeware source code editor from Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, smart code completion, snippets, code refactoring, and embedded Git.

Click on the first link in the browser window. After clicking on the first link, the following window will appear.

Figure: Download Visual Studio code

Download the software by clicking on the download button.

Figure: Installation of Visual Studio Code

Step 4:Open the Visual Studio Code Text Editor and write the HTML to design the HTML login page.

We are using different HTML tags to design the page required for the form)

Here I’ve pasted the fields as I see fit

Have a view of the code written in Visual Studio Code.

Figure: coding part

The following HTML code is mentioned.

<!DOCTYPE html>
<html>
<head>
<title>BioData Page</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h1>BioData Form</h1>
</div>
<div class="panel-body">
<form action="connect.php" method="post">
<div class="form-group">
<label for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
/>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input
type="text"
class="form-control"
id="lastName"
name="lastName"
/>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div>
<label for="male" class="radio-inline"
><input
type="radio"
name="gender"
value="m"
id="male"
/>Male</label
>
<label for="female" class="radio-inline"
><input
type="radio"
name="gender"
value="f"
id="female"
/>Female</label
>
<label for="others" class="radio-inline"
><input
type="radio"
name="gender"
value="o"
id="others"
/>Others</label
>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="text"
class="form-control"
id="email"
name="email"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
id="password"
name="password"
/>
</div>
<div class="form-group">
<label for="number">Phone Number</label>
<input
type="number"
class="form-control"
id="number"
name="number"
/>
</div>
<input type="submit" class="btn btn-primary" />
</form>
</div>
<div class="panel-footer text-right">
<small>&copy; KasunWeerasekara184187H</small>
</div>
</div>
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">HTML,CSS AND PHP</strong>
<small>13mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a Bio Data Form.
</div>
</div>
</body>
</html>

Here I even have enclosed the LINK tag to link the CSS file for this markup language page.

HTML or Hypertext Markup Language is that the normal and most elementary language in use to make internet pages.

CSS stands for Cascading Style Sheets

This is used for style purposes. HTML encoding is just a structure and CSS is applied to dictate the appearance of your website. Font size, font color, image font style, page layout, mouse-over effects, and more are determined by CSS. The CSS applied over the above HTML encoding is shown below.

Figure: CSS coding part

Here you’d be speculative why I even have used <div> in HTML. Let Pine Tree State tell you the importance of victimization <div>.

The <div> part is commonly used as a layout tool.

We need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=” “ attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be read, you could add the class attribute to a <DIV> tag, like this:

<div class=”form_group”>. Here we have used this class because we can directly apply CSS to this class. The tags which have been opened should be closed also.

Now allow us to move further.

Step 05:

applying CSS to the HTML code. General rules for applying CSS are:

We use a period (.) Next to a class to apply effects to it and the ‘#’ tag in front of an ID.

.container {

// CSS attributes are written here

}

Here I took containers as a class. Class is custom.

Below is a web application made using CSS, HTML.

Figure: normal empty page

Figure: web page after entering data

After writing the HTML code and applying the above CSS, the registration page would look like above

Next, we will insert data into the fields of the registration page and store the information in MySQL.

For that, we have to start the XAMPP Controller. Start Apache and MYSQL in the XAMPP driver.

Now we will go to the next level where we will use the PHP syntax.

PHP

PHP is a server-side scripting language designed for web development but is also used as a general-purpose programming language. PHP is an abbreviation for “PHP: Hypertext Preprocessor”.

PHP is a widely-used, open-source programming language. PHP scripts run on the server. PHP is free to download and use. The PHP code runs on the server and the result is returned to the browser as plain HTML.PHP files have a “.php” extension. PHP can collect data from forms.

PHP can add, delete, modify data in your database. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and supports a wide range of databases. PHP is easy to learn and runs efficiently on the server-side.

PHP Variables (rules)

A variable begins with the $ sign, followed by the variable name.

A variable name must begin with a letter or the character of underlined. The name cannot start with a number.

Output variable

PHP ‘echo’ statement is often used to send data to the screen

PHP FORMS

Write Html encoding for the registration page and save it as index.php. Again create a PHP page called connect.php where we will write the code to create a connection to the database.

$conn = new mysqli('localhost','root','','test');

The PHP script are perpetually written between (<?php (opening) and ?> closing).

Here as you’re seeing that I even have used user-defined variables to assign something. This makes ME straightforward to jot down code effectively and in an exceedingly clean way.

Here I even have appointed localhost to $servername, ’root’ to $username, and parole has been left blank. once more I have written mysql_connect() — this is principally accustomed open affiliation to MySQL server. once more we’ve used mysql_select_db() — this is employed to pick out the information created in localhost/PHPMyAdmin.

Now allow us to produce information in MySQL. The PHPMyAdmin window can seem like the subsequent screenshot:

Figure: PHPMyAdmin

Here you’ll be able to produce your own information and as several tables within that.

Suppose here I actually have produced information named ‘test’, within that I have created a table named ‘registration’. during this table, we are going to create fields that are utilized in our registration kind akin to First name, Lastname, GENDER, PWD, mail, PHONE number, and submit.

Note: Here we are able to write any name for the involved fields, simply detain mind the names you’ve got given for the relative fields.

You can produce a table manually or by writing queries. Here, I actually have created it manually.

Figure: Insert fields

On this page, we are writing code to see how we can get data from the fields.

For this purpose, we use form methods that we use to get the data entered into the fields and store it in our MySQL database.

The method attribute specifies how form data should be sent (the form data is sent to the page specified in the action attribute). The form data can be sent as URL variables (with method = “get”) or as an HTTP post transaction (with method = “post”).

Basically, we use one of the following two methods to get data from the fields.

GET method: The GET method generates a long character string that is displayed in the browser’s location. Sending is restricted We should never use the GET method when we want to send a password or other sensitive information to the server. The PHP provides an associative array $ _GET to access all information sent with the GET method.

POST method: With this method, parameters are not saved in the browser history. The data is not displayed in the browser URL. POST is more secure than GET. PHP provides an associative array $ _POST to access all the information sent via the POST method.

Here I have inserted the connect.php file because I have written the code to list all inserted data in this PHP file.

<?php
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$password = $_POST['password'];
$number = $_POST['number'];
// Database connection
$conn = new mysqli('localhost','root','','test');
if($conn->connect_error){
echo "$conn->connect_error";
die("Connection Failed : ". $conn->connect_error);
} else {
$stmt = $conn->prepare("insert into registration(firstName, lastName, gender, email, password, number) values(?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssssi", $firstName, $lastName, $gender, $email, $password, $number);
$execval = $stmt->execute();
echo $execval;
echo "Registration successfully...";
$stmt->close();
$conn->close();
}
?>

This is how we insert data into a web page.

Summary

We have with success created a biodata from the page. I hope this text is beneficial to you. If you have got any comments or drawbacks with this article, please call for the comment section.

Read my next weblog post to urge a thought concerning a way to connect the rear finish to the current login type and the way to review the data.

Go next post!