You are on page 1of 37

A

Seminar on
Professional Web development using PHP
Submitted to
Department of Electronics and Communication
ITM GIDA, Gorakhpur

Presented by:-
Arihant Jain
Introduction to Web development

Web development is a broad term for the work involved in developing a web
site for the internet (World Wide Web) or an intranet (a private network). Web
development can range from developing the simplest static single page of plain
text to the most complex web-based internet applications, electronic business,
and social network services
Creating your Web site

Technology and tools :-


• Markup Languages
– HTML, DHTML, XML, XSLT, etc....
• Cascading Style Sheets (CSS)
• Scripting languages
– perl, javascript ,php, etc....
• Web creation and editing software
– Notepad, Net beans, FrontPage, Coldfusion, Flash, Hotmetal, Site
Builder, etc
MARKUP LANGUAGES - HTML

• HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.

HTML Fundamentals :-
• Clear text, case insensitive.
• Ignores white space.
• Comprised of tags <tag />.
• Open tags and closed tags.
HTML Tags

• HTML Tags
• As told earlier, HTML is a markup language and makes use of various tags
to format the content. These tags are enclosed within angle braces
<Tag Name>.
• Except few tags, most of the tags have their corresponding closing tags.
For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.

• HTML documents comprises following Tags….


TAG DESCRIPTION
<HTML> This tag encloses the complete HTML document.


<Head> This tag represents the document's header like <title>, <link> etc.

<body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.

<title> The <title> tag is used inside the <head> tag to mention the
document title.

<h1> This tag represents the heading.

<p> This tag represent a paragraph.


HTML code on basic tags
<!DOCTYPE html>
<html>
<head>
<title>Heading and Paragraph Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<p> This is first paragraph</p>
<a href=“”>click here</a>
</body>
</html>
This will produce the following result..
HTML -ATTRIBUTES

• An attribute is used to define the characteristics of an HTML element and


is placed inside the element's opening tag. All attributes are made up of
two parts: a name and a value:

• The name is the property you want to set. For example, the paragraph <p>
element in the example carries an attribute whose name is Style, which
you can use to design the element of paragraph on the page.

• The value is what you want the value of the property to be set and always
put within quotations. The below example shows three possible values of
style attribute: Size, family, color.
• The style Attribute –
• <!DOCTYPE html>
• <html>
• <head>
• <title>The style Attribute</title>
• </head>
• <body>
• <p style="color:#FF0000; font-family:verdana; font-size:40">
• this is paragraph.
• </p>
• <p style="color:green; font-family:verdana; font-size:40">
• this is paragraph.
• </p>
• </body>
• </html>
• This will produce the following result…..
CSS - OVERVIEW

What is CSS?
• Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
• CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images
or colors are used, as well as a variety of other effects.
• CSS is easy to learn and understand but it provides a powerful control over
the presentation of an HTML document. Most commonly, CSS is combined
with the markup languages HTML or XHTML.
CSS - SYNTAX
• A CSS comprises of style rules that are interpreted by the browser and
then applied to the corresponding elements in your document. A style rule
is made of three parts:
• Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
border, etc.
• Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.
• You can put CSS Style Rule Syntax as follows:
• selector { property: value }
CSS-INCLUSION
• There are three ways to associate styles with your HTML document. Most
commonly used methods are inline CSS and External CSS.
Inline CSS - The style Attribute
• You can use style attribute of any HTML element to define style rules.
These rules will be applied to that element only. Here is the generic
syntax:
• <element style="...style rules....">
Example
• Following is the example of inline CSS based on the above syntax:
<h1 style ="color:red;"> This is inline CSS </h1>
This will produce following result..

This is inline CSS


Embedded CSS - The <style> Element
• You can put your CSS rules into an HTML document using the <style>
element. This tag is placed inside the <head>...</head> tags. Rules defined
using this syntax will be applied to all the elements available in the
document. Here is the generic syntax:
<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>
Example –
• <head>
• <style type="text/css" media="all">
• h1{
• color: #36C;
• }
• </style>
• </head>
External CSS - The <link> Element
• The <link> element can be used to include an external stylesheet file in
your HTML document.
• An external style sheet is a separate text file with .css extension. You define
all the Style rules within this text file and then you can include this file in
any HTML document using <link> element.
• Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href="..." media="..." />
</head>
• Example -Consider a simple style sheet file with a name mystyle.css
having the following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4px;
margin-bottom: 1px;
text-transform: lowercase;
}
• Now you can include this file mystyle.css in any HTML document as
follows:
<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>
PHP-INTRODUCTION

• PHP is a recursive acronym for "PHP: Hypertext Preprocessor". PHP is a


server side scripting language that is embedded in HTML. It is used to
manage dynamic content, databases, session tracking, even build entire
ecommerce sites.
• It is integrated with a number of popular databases, including MySQL,
PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.
• Common Uses of PHP
• PHP performs system functions, i.e. from files on a system it can create,
open, read, write, and close them. The other uses of PHP are:
• PHP can handle forms, i.e. gather data from files, save data to a file,
through email you can send data, return data to the user.
• You add, delete, modify elements within your database through PHP.
• Characteristics of PHP
• Five important characteristics make PHP's practical nature possible:
• Simplicity
• Efficiency
• Security
• Flexibility
• Familiarity
• "Hello World" Script in PHP
• To get a feel of PHP, first start with simple PHP scripts. Since "Hello,
World!" is an essential example, first we will create a friendly little "Hello,
World!" script.
• As mentioned earlier, PHP is embedded in HTML. That means that in
amongst your normal HTML (or XHTML if you're cutting-edge) you'll have
PHP statements like this:
<html>
<head>
<title>Hello World</title>
<body>
<?php echo "Hello, World!";?>
</body>
</html>
It will produce the following result:
Hello, World!
PHP –DECISION MAKING

• The if, elseif ...else and switch statements are used to take decision based
on the different condition.
• The If...Else Statement
• If you want to execute some code if a condition is true and another code if
a condition is false, use the if....else statement.
• Syntax
if (condition)
code to be executed if condition is true;
else
code to be executed if condition is false;
• Example
• The following example will output "Have a nice weekend!" if the current day
is Friday, otherwise it will output "Have a nice day!":
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Have a nice weekend!";
else
echo "Have a nice day!";
?>
</body>
</html>
This will give the following result:
Have a nice day!
PHP FORMS

• The most important thing to notice when dealing with HTML forms and
PHP is that any form element in an HTML page will automatically be
available to your PHP scripts.
• The HTML <form> tag is used to create an HTML/PHP form and it has
following syntax:
• <form action="Script URL" method="GET|POST"> form elements like
input, textarea etc.
</form>
• Try out the following example :-
<?php
if(isset($_POST["submit"]))
{
echo "Welcome ".$_POST["name"]. "<br>";
echo "you are ".$_POST["age"]." year old and you are ".$_POST["gender"]."<br>";

echo "your email is ".$_POST["email"]." <br>";


echo "and you like " .$_POST["food"]."<br>";
exit();
}
?>
<html>
<head>
<title> php forms</title>
</head>
<body>

<form method="POST" action="<?php $_PHP_SELF ?>">


Name:<input type="text" name="name" value=""/><br>
Age :<input type="text" name="age" value=""/><br>
Email:<input type="text" name="email" value=""/><br>
Gender:<input type="radio" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female<br>
<select name="food">
<option value="burger"/>burger<br>
<option value="pizza"/>pizza<br>
<option value="momos"/>momos<br>
<input type="submit" name="submit" value="submit"/><br>
</form>
</body>
</html>
It will give following result :
JAVASCRIPT

There are two types of scripting languages:


1. Client side scripting
2. Server side scripting
The scripts which run on client side browser is client side scripting.
e.g. JavaScript.
The scripts which run on web server is called server side scripting.
e.g. PHP, VbScript etc.
• JavaScript started as LiveScript, but Netscape changed the name, possibly
because of the excitement being generated by Java to JavaScript.

• JavaScript made its first appearance in Netscape 2.0 in 1995 with a name
LiveScript.

• JavaScript is a lightweight, interpreted programming language with object-


oriented capabilities that allows you to build interactivity into otherwise
static HTML pages.

• The Generic name of JavaScript is EcmaScript.


• Javascript code -:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
Click here for the result
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
It shows the following result…
MYSQL-INTRODUCTION

• MySQL Database
• MySQL is a fast, easy-to-use RDBMS being used for many small and big
businesses. MySQL is developed, marketed and supported by MySQL AB,
which is a Swedish company. MySQL is becoming so popular because of
many good reasons:
• MySQL is released under an open-source license. So you have nothing to
pay to use it.
• MySQL is a very powerful program in its own right. It handles a large
subset of the functionality of the most expensive and powerful database
packages.
• MySQL uses a standard form of the well-known SQL data language.
• MySQL works on many operating systems and with many languages
including PHP PERL, C, C++, JAVA, etc.
Create Database
Syntax:
CREATE DATABASE database_name;
Example:
Let's take an example to create a database name "employees"
CREATE DATABASE employees;

MySQL Drop Database


Syntax:
DROP DATABASE database_name;
Example:
Let's take an example to drop a database name "employees"
DROP DATABASE employees;
MySQL CREATE TABLE
The MySQL CREATE TABLE command is used to create a new table into the
database.
A table creation command requires three things:
• Name of the table
• Names of fields
• Definitions for each field

Syntax:
Following is a generic syntax for creating a MySQL table in the database.

• CREATE TABLE table_name (column_name column_type...);


create a table named "cus_tbl" in the database "customers".

CREATE TABLE cus_tbl(


cus_id INT NOT NULL AUTO_INCREMENT,
cus_firstname VARCHAR(100) NOT NULL,
cus_surname VARCHAR(100) NOT NULL,
PRIMARY KEY ( cus_id )
);
See the created table:
Use the following command to see the table already created:
SHOW tables;

See the table structure:


Use the following command to see the table already created:
DESCRIBE cus_tbl;
MySQL ALTER Table
MySQL ALTER statement is used when you want to change the name of your
table or any table field. It is also used to add or delete an existing column in a
table.

The ALTER statement is always used with "ADD", "DROP" and


"MODIFY" commands according to the situation.
1) ADD a column in the table
Syntax:
ALTER TABLE table_name
ADD new_column_name column_definition
[ FIRST | AFTER column_name ];
2) MODIFY column in the table
The MODIFY command is used to change the column definition of the table.
Syntax:
ALTER TABLE table_name
MODIFY column_name column_definition
[ FIRST | AFTER column_name ];
3) DROP column in table
Syntax:
ALTER TABLE table_name
DROP COLUMN column_name;
• an example to drop the column name "cus_address" from the table
"cus_tbl".
Use the following query to do this:
ALTER TABLE cus_tbl
DROP COLUMN cus_address;
• THANK YOU

You might also like