Web Programming Lab Manual

Visual Studio Code is one of the most popular and powerful text editors used by software
engineers today.

I. Introduction
What are ‘text editors’?
Text editors, also called code editors, are applications used by developers to write code. They
can highlight and format your code so that it’s easier to read and understand.
Using a text editor is part of creating your “development environment,” the set of tools that you
use for working on coding projects.
Specific to writing code, text editors provide a number of advantages:
 Language-specific syntax highlighting
 Automatic code indentation
 Color schemes to suit your preferences and make code easier to read
 Plug-ins, or add-on programs, to catch errors in code
 A tree view, or visual representation, of a project’s folders and files, so you can
conveniently navigate your project
 Key shortcuts, or combinations, for faster development
You may also have read or heard about IDEs, or “integrated development editors.”
An IDE allows you to not only edit, but also compile, and debug your code through one
application or interface. While the text editor we recommend isn’t considered an IDE, it has
many IDE-like features that make life as a developer easier without needing a lot of resources
that an IDE usually requires. The best of both worlds!

Choosing a Text Editor

There are a number of text editors to choose from. For example, Visual Studio Code is one of the
most popular text editors used by developers. (That’s Visual Studio Code and not Visual Studio,
which is slightly different. We want the former, the one with ‘Code’ in the name.) Other popular
text editors you may have heard of are Atom and Sublime Text.
Any of these text editors mentioned are great for development but to make things easier, we
suggest you start off with Visual Studio Code. Some of the benefits of this editor are:
 Free to use
 Open-source, (meaning a program’s code can be viewed, modified, and shared)
 IDE-like features
 Supported by a large community of users and Microsoft
When you are further along in your coding career, you can try other code editors to see what
features work best with your personal development workflow.

Visual Studio Code

What are ‘development folders’?
Before using your text editor, it’s important to establish an organized file system. As the number
and size of your projects grow, it becomes increasingly important to know where to save new
projects and find old projects.
Most developers store their projects in an easy-to-find directory, (what you might be used to
calling a ‘folder’). It will store all of your coding projects. Whenever you create a new project,
no matter how small, you should always make a new folder inside your projects directory. You
will find that single-file projects can quickly turn into large, multi-folder projects

Open your development folder

Click on the ‘Explorer’ icon on the left hand menu and click on the button ‘Open Folder’ and
choose your development folder. This will launch your file manager.
Navigate to the HelloWorld folder and select Open. The folder will open in Visual Studio Code’s
side pane. At this point, there should not be any contents in the folder. We’ll add a file in the
next step.

Add a file.
Before you learn how to add files to a project folder, it is important to understand the purpose of
file extensions. A file extension is the suffix of a filename (the last 3 or 4 characters in a
filename, preceded by a period) and describes the type of content the file contains. For example,
the HTML file extension is .html, and it tells the browser (and other applications) to interpret the
contents of the file as an HTML document. Once Visual Studio Code loads a project folder, you
can add files. The steps below describe how to add files. Don’t worry about doing this on your
own computer. We’ll get to that next.

In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see
four icons appear to the right of the folder name. Click the ’New File’ icon. Type the new file’s
name with its appropriate file extension ( for example, .html, .css, .csv). It is critical that you
include the correct file extension, so programs like linters know how to interpret its contents.
Press Enter when done.

Begin coding!
Copy and paste the following boilerplate HTML code:

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
Using headings(<h1>,<h2>,<h3>….<h6>) , Paragraph tag(<p>) ,and background color

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
EXERCISES FOR PRACTICE IN LAB SESSION

Html comments
Single comment (<!-- -->)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body bgcolor="gray">

<head> <!-- Document Header Starts--> <title>This is document title</title>

</head><!-- Document Header Ends-->
<body>
<p>Document content goes here .... </p>
</body></html>

</body>
</html>
Multiline Comments (<!-- -->)
HTML Frames

HTML Tables
HTML Table Colspan & Rowspan
HTML Table Colgroup
If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

The <colgroup> element should be used as a container for the column specifications. Each group
is specified with a <col> element. The span attribute specifies how many columns that get the
style. The style attribute specifies the style to give the columns.

HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items will
be marked with bullets (small black circles) by default:
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will
be marked with numbers by default:

HTML Description Lists

HTML also supports description lists. A description list is a list of terms, with a description of
each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks. You can click on a link and jump to another document. When you
move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Use an Image as a Link

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let
them send a new email):
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you
to specify what happens at certain events, such as a click of a button:

HTML Images
Images can improve the design and the appearance of a web page.

Images in Another Folder/server or website and Animated Images

If you have your images in a sub-folder, you must include the folder name in the src attribute:
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

HTML Image Maps

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the
CSS background-image property:

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image
on the <body> element:
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and
vertically, until it reaches the end of the element:

No-repeat will fix this.

Background Cover
If you want the background image to cover the entire element, you can set the background-
size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property
to fixed:
This way, the background image will cover the entire element, with no stretching (the image will
keep its original proportions):

Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-
size property to 100% 100%:
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own favicon on sites
like https://www.favicon.cc.
Tip: A favicon is a small image, so it should be a simple image with high contrast. A favicon
image is displayed to the left of the page title in the browser tab, like this:

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses
the style attribute of an HTML element. The following example sets the text color of
the <h1> element to blue, and the text color of the <p> element to red:
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in
the <head> section of an HTML page, within a <style> element. The following example sets the
text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL
the <p> elements to red. In addition, the page will be displayed with a "powderblue" background
color:

External CSS
An external style sheet is used to define the style for many HTML pages. To use an external
style sheet, add a link to it in the <head> section of each HTML page:
Index.html

Style.css

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about
them later. The CSS color property defines the text color to be used. The CSS font-
family property defines the font to be used. The CSS font-size property defines the text size to be
used.
CSS Border, padding, margin
The CSS border property defines a border around an HTML element. Tip: You can define a
border for nearly all HTML elements.
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

This example links to a style sheet located in the html folder on the current web
site:

<link rel="stylesheet" href="/html/styles.css">

This example links to a style sheet located in the same folder as the current
page:

<link rel="stylesheet" href="styles.css">

Creating Box using css
Boxes may be used to design/build the layout or structure of our website/application. It help us to
create sections on an application. Header, content and footer of our applications maybe created
using boxes. For example, in order to display the create a box, we have write:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="mybox">
This is my Box
</div>
</body>
</html>

.mybox{
width:300px;
height: 200px;
margin-top: 2%;
margin-left: 5%;
background-color: chocolate;
}
Output:

Setting Text color/padding/border

.mybox
{
Width:300px;
Height:200px;
margin-top:19.3%;
margin-left:5%;
background-color: green;
color:white;
padding:20px;
border-style:dashed;
}
Font size,Font-family,border-style,border-width,border-color,border-left-style,border-left-
color, overflow(overflow-x, overflow-y)

.mybox{
Width:300px;
Height:200px;
margin-top:19.3%;
margin-left:5%;
background-color: green;
font-size:40px;
border-style:dashed;
border-width: 2px;
border-color: brown;
border-left-style: dotted;
border-left-color: bisque;
overflow-y: hidden;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Output:
Changing the font-size and background color of elements placed inside of specific selector

.box h1 {

font-size:50px;
color:chartreuse;
}
.box h1:hover {
background-color: blueviolet;
font-size: 55px;
}
.box p{
font-size:20px;
color:rgb(223, 229, 229);
}

The above code change font size and foreground color of h1 elements placed in side of box class.
These properties also change when we move our mouse cursor(hover) in to h1 area.
Therefore, we may build simple and attractive interface by using Boxes.

<!DOCTYPE html>

<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <button onclick="f()">Try</button> -->
<div class="top"><!--top box-->
<center> Infolink University College </center>
<p id="ii"></p>
</div>

<div class="left"><!--left box-->

</div>
<div class="right"><!--right box-->

</div>
<div class="center"><!—box in the center-->
<a href="index.html">Home</a>
 <a href="contact.html">Contact Us</a>
<a href="vacancy.html">Vacancy </a>
<a href="online.html">Register</a>
<h1>Contact Information</h1><hr>

Contact InformationContact InformationContact InformationContact

Information\
Contact InformationContact InformationContact Information
Contact InformationContact InformationContact Information
Contact InformationContact InformationContact Information
Contact InformationContact Information
Contact InformationContact Information
</div>

</body>
</html>

Style.css

.top{
position: absolute;
margin-left:5%;
margin-top:2%;
height: 150px;
width:800px;
background-color: gray;

}
.left
{
position: absolute;
margin-left:5%;
margin-top:19.3%;
height: 700px;
width:200px;
background-color: green;
}
.center
{
position: absolute;
margin-left:25%;
margin-top:19.3%;
height: 700px;
width:450px;
background-color: rgb(129, 170, 129);
padding:20px;
}
.center a
{
color:rgb(68, 101, 75);
font-size:30px;
border-style: groove;
background-color: bisque;
}
.center a:hover
{
color:rgb(8, 233, 57);

}
.right
{
position: absolute;
margin-left:71.5%;
margin-top:19.3%;
height: 700px;
width:200px;
background-color: green;
}
Javascript
 A client-side scripting language that allows Web page authors to develop interactive Web
pages and sites
 JavaScript is considered a scripting language because it is interpreted by the browser at
runtime (when the web page is actually opened) rather than compiled and stored on your
computer.

 To embed a client-side script in a Web page, use the element:

<script type=“text/javascript” >
script commands and comments
</script>
 To access an external script, use:
<script src=“url” type=“text/javascript”>
script commands and comments
</script>

<!-- Script inside head-->

<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<!--Script in body-->
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>

External JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>

</body>
</html>

JavaScript –Variables
 Declared using the keyword var. Declaring variables is not mandatory.
 Must start with a letter or an underscore and can have digits.
 Does not have explicit data types.
 The Data type is automatically decided by the usage.
 Scope is by default global. If a variable is prefixed by the keyword “var” within a
function then it is a local variable.

function demo()
{
var inum1 = 10; // Local to the function
inum2 = 20; // Global to the document.
}
demo(); // Invoking function
inum1 = inum1+1; //Error because inum1 is local variable
inum2 = inum2+1; // no Error
JavaScript -Simple Interactions
 alert
 Displays an Alert dialog box with a message and an OK button.
 Syntax: alert("message");
 Example: alert(“You’re in a Special Area …”);
alert(“count=“+count); // count is a variable to be traced here
 confirm
 Displays a Confirm dialog box with the specified message and OK
and Cancel buttons.
 Syntax: confirm("message");
 Example: ans = confirm(“Are you sure you want to continue?”);
 ans will be true if OK is clicked or false if Cancel is clicked
 eval
 The eval function evaluates a string and returns a value.
 Syntax: eval(stringExpression)
 Example: eval(1+2*3) // gives 7 here
 prompt
 The prompt function prompts for a string value.
 Syntax: prompt(“message”) or prompt(“message”, default value)
 Example:
 aString1 = prompt(“Enter Name”);
 aString2 = prompt(“Enter Salary”, 0);
 Note: The return value is a string. Need to convert if a
numeric value is desired. Use parseInt() or parseFloat().
 Example: numSalary = parseInt(aString2);
numSalary = numSalary + 500;
JavaScript Functions – Basic Principles
 Reasons to use functions
 Ease of communication
 Problem simplification
 Easier construction
 Code readability
 Reusability
 Maintainability
 In JS, functions are the primary encapsulation mechanism which is one of
object oriented concepts.
 To create a function you define its name, any values ("arguments"), and some statements:
 function myfunction(argument1,argument2,etc)

some statements;

/* function to add two numbers

function names are following Camel Casing
No explicit return type declaration
*/
function addNumber(num1,num2)
{
return num1+num2;
}
/* Invoking the function */
total=addNumber(10,20);

/* Function to validate an email id

name : checkEmail()
parameter : String (email id)
returns : true(success), false (
fail)*/
function checkEmail(email){
/* checking for the length */
if(email.length<=0) {
return false;
}
FORMS
function IsFormComplete(FormName)
{ var x =0
var FormOk = true
while ((x < document.forms[FormName].elements.length) &&
(FormOk))
{ if (document.forms[FormName].elements[x].value == '')
{ alert('Please enter the
+ document.forms[FormName].elements[x].name
+' and try again.')
  Arrays are objects in JavaScript which is used to store a set of values in a
single variable name.
 You create an instance of the Array object with the "new" keyword.
 The length property specifies the number of elements in an array.
var myArray = new Array(n)
var family_names=new Array(3)
var family_names=new Array(“Binyam",“Selam",“Haile")

 Data can be of any type, and there can be

mixed data types within the same array if it
makes sense for your data requirements
 The syntax for creating an array variable is:
var variable = new Array(size);
var ad= [10, “Ethiopia", “Hawassa", “Atote"] ;
var planet = new Array(9);
planet= new Array(“Mercury”,”Venus”,”Earth”,”Mars”,“Jupiter”,“Saturn”,”Uranus”,
”Neptune”,”Pluto”); or
var planet= [“Mercury”, ”Venus”, ”Earth”, ”Mars”, “Jupiter”, “Saturn”, ”Uranus”, ”Neptune”,
”Pluto”]; Example:

<body>
<script language="JavaScript">
function arrayFunction() {
var grade = new Array("70", "60", "80", "90", "20");
document.write("<br> Popped: " + grade.pop());
grade.reverse();
document.write("<br>Reversed: ");
for(var i=0;i<grade.length; i++)
document.write(" " + grade[i]);
document.write("<br>Converted to string: " +
grade.toString());
</script>
</head>
<body onLoad="arrayFunction();">
</body>
Example:

<script langauge="JavaScript">
<!-- hide me

function announceTime( ) {

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();

//put together the string and alert with it

 var the_time = the_hour + ":" + the_minute + ":" + the_second;

alert("The time is now: " + the_time); }

// show me -->
</script> </head> <body> ... </body> </html>
Example:

<!DOCTYPE html>
<html>
<body>
<button
onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function changecolor()
{
document.bgColor="#ff0000";
}
</HEAD>
<BODY>
<FORM >
<INPUT TYPE=“button” VALUE="Click Me" onclick="changecolor()">
</FORM>
</BODY></HTML>
<html>
<head>
<script language="JavaScript">
function check(form)
{
if (first.urname.value == "")
alert("Please enter a string as your name!")
else
alert("Hi " + form.urname.value + "! Name
ok!");
if(form.age.value < 0 || form.age.value=="")
alert("Age should be number and greater
than 0");
else
alert("Age ok");
if (form.email.value == "" ||
form.email.value.indexOf('@', 0) == -1)
alert("No valid e-mail address!");
else
 alert("Email is oK!");
if(form.urmessage.value=="")
alert("No message written");
else
alert("Message ok");
}
</script>
</head
<body>
<h2> <u> Form validation </u> </h2>
<form name="first">
Enter your name: <input type="text"
name="urname"> <br>
Enter your age: <input type="text" name="age">
<br>
Enter your e-mail address: <input type="text"
name="email"> <br>
write message: <textarea name="urmessage"
cols=40 rows=10></textarea><br><br>
<input type="button" name="validate"
value="Check Input" onClick="check(this.form)">
</body>
</html>
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!--
function plus(){
var n1; var n2;
n1=document.addmult.num1.value;
n2=document.addmult.num2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1+n2; }
function times(){
var n1; var n2;
n1=document.addmult.num1.value;
n2=document.addmult.num2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1*n2; }
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
<P><FORM name=addmult>
<P>Enter a number in each field:
<INPUT TYPE=text NAME=num1 VALUE="" SIZE=5>
<INPUT TYPE=text NAME=num2 VALUE=""
SIZE=5><BR>
<INPUT TYPE=button VALUE="+" onclick="plus()">
<INPUT TYPE=button VALUE="*"
onclick="times()"><BR>
<INPUT TYPE=reset VALUE="Reset Form"><BR>
<TEXTAREA NAME=result ROWS=3 COLS=27
WRAP=virtual></TEXTAREA>
</FORM>
</BODY>
</HTML>
PHP
 Syntax
 PHP code should enclosed within:
<?php and ?>
So that it is distinguished from HTML.
 Hence, the PHP parser only parses code which is in between <?php and ?>
 PHP code can be embedded in HTML
<?php if ($expression) { ?>
<strong>This is true.</strong>
<?php echo “internet programming” + $grade; ?>

<?php
} else {
?>
<strong>This is false.</strong>
<?php
}
?>

Variables in PHP
 Variables in PHP are represented by a dollar sign followed by the name of the variable.
 The variable name is case-sensitive.
 A valid variable name starts with a letter or underscore, followed by any number of letters,
numbers, or underscores.
 PHP is not strongly typed
 No variable declaration ( implicit )
 To create a variable, just assign some value to it!
Example:
$myNum = 5; //declares and assignes 5 to the variable $myNum
Example:

<?php
$var = 'Bob';
$Var = 'Joe';
echo $var . “,” . $Var; // outputs "Bob, Joe"
$4site = 'not yet'; // invalid; starts with a number
$_4site = 'not yet'; //valid; starts with an underscore
$täyte = 'mansikka'; // valid; 'ä' is (Extended) ASCII 228.
?>

 Variables within double quoted strings (“”) are parsed

Example
$name = “Abebe”;
$message = “Hello $name”;
echo $message; //Hello Abebe
 Variables within single quoted strings (‘’) are not parsed!
Example
$name = “Abebe”;
$message = ‘Hello $name’;
echo $message; //Hello $name
 Strings
 types of string literals
 Single quoted
 $str1 = ‘some string’;
 Double quoted
 $str2 = “some other string”;
 Heredoc
 $str3 = <<<EOD
Example of string
spanning multiple lines using heredoc syntax.
EOD;
  Input to server side scripts comes from clients through forms.
 Two methods of sending data: GET & POST
 GET
 Search queries and small amounts of data
 Also generated when a user clicks on a link
 Non secure (displayed in address bar)
 POST
 Large and secure data
 The default method for HTML forms is GET
 To access form field values in PHP, use the built-in PHP arrays: $_GET and $_POST
respectively for GET and POST request methods

 Example:
//login.html
<!DOCTYPE html>
<html>
<body>
<form method=‘POST’ action=“login.php”>
User Name: <input type="text" name="username"
><br>
Password: <input type="password"
name="password"><br>
<input type="submit" value="Login">
</form>
</body>
</html>
 //login.php
<?php
$username = $_POST[ ‘username’ ];
$password = $_POST[ ‘password’ ];
if($username == “user” && $password == “pass”){
//login successful
header( ‘Location: home.php’ );
exit();
}else{
//login failed
header( ‘Location: login.html’ );
exit();
}
} ?>

 Example
vars.php
<?php

$color = 'green';
$fruit = 'apple';

?>

test.php
<?php

echo "A $color $fruit"; // A

include 'vars.php';

echo "A $color $fruit"; // A green apple

?>
<?php
$defined= true;

// We can't call f1() from here since it doesn't

exist yet, but we can call f2()

f2();

if ($defined) {
function f1() {
echo "I don't exist until program execution
reaches me.\n";
}
}

// Now we can safely call f1() since $defined

evaluated to true

if ($defined) f1();

function f2() {
echo "I exist immediately upon program start.\n";
}
?>
<?php
function f1(){
function f2(){
echo "I don't exist until f1() is called.\n"; }}
/* We can't call f2() yet since it doesn't exist. */
f1();
/* Now we can call f2(), f1()'s processing has made it
accessible. */
f2();
?>
Arrays in PHP
Database connectivity in PHP
 MySQL is a free and open source database that has a lot of users especially for web
applications. It can be downloaded from internet freely.
 Whichever database you’re using, the steps to interact with a database are similar:
 Connect to the database.
 Send an SQL query that contains instructions for the database software.
 If you retrieved data from the database, process the data.
 Close the connection to the database.

 To connect to the database host

resource mysql_connect ( [string server [, string username [, string password [, bool
new_link [, int client_flags]]]]] )

Example

<?php
//hostname,username to access DB, password,Databasename
$con=mysqli_connect('localhost','usid','123','myDB');
?>