web eng.pdf
TRANSCRIPT
What is HTML?
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
write down the difference between static and dynamic website
Static Websites
A static site is a website that is written entirely using HTML. Each web page is a separate
document and there are no databases or external files that are drawn upon.
This means that the only way to edit this type of website is to go into each page and edit the
HTML. So you would have to do it yourself using a web page editor such as FrontPage or
Dreamweaver, or pay your web developer to make updates for you.
Dynamic Websites
A dynamic website is written using more complex code — such as PHP or ASP — and has a
greater degree of functionality. For instance, many dynamic websites can be controlled by a
content management system. This means that you will potentially be able to make updates
without needing any knowledge of HTML or any website software.
Each page of a dynamic website is generated from information stored in a database or external
file. And the content management system that you may use to maintain your website directly
modifies this stored information.
Which Should You Choose?
Many people prefer dynamic websites because they have a lot of benefits. Dynamic sites reduce
ongoing maintenance costs, make data management very efficient, and enable the addition of any
future addons such as data feeds or a comprehensive site search. They also make it impossible to
destroy the layout, as might happen if you edit it from a web page editor.
There are some drawbacks to using dynamic websites. First, they usually cost more to develop,
because they require more complex coding, as well as the development of a content management
interface to enable you to maintain your website. Second, you will need to obtain web hosting
which supports databases and dynamic languages. Fortunately, most hosts do offer these features
by default.
If you realize that you do want a dynamic website which will enable you to maintain your own
content, you can save costs by opting for a website that is only partly dynamic. For example,
certain pages such as ‘About Us’ or ‘Contact Us’ pages can be static, whereas galleries or
product catalogues can be dynamic. Also, consider opting for an open source CMS.
To determine which is best for your website, also consider asking your web developer for their
opinion on which would be best.
Advantages of static websites
Quick to develop Cheap to develop Cheap to host
Disadvantages of static websites
Requires web development expertise to update site Site not as useful for the user Content can get stagnant
Advantages of dynamic websites
Much more functional website Much easier to update New content brings people back to the site and helps in the search engines Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic websites
Slower / more expensive to develop Hosting costs a little more
Web browser
A web browser (commonly referred to as a browser) is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web. An information
resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page,
image, video or other piece of content.[1] Hyperlinks present in resources enable users easily to
navigate their browsers to related resources.
Although browsers are primarily intended to use the World Wide Web, they can also be used to
access information provided by web servers in private networks or files in file systems.
The major web browsers are Firefox, Internet Explorer/Microsoft Edge,[2][3][4] Google Chrome,
Opera, and Safari.
Function
The primary purpose of a web browser is to bring information resources to the user ("retrieval"
or "fetching"), allowing them to view the information ("display", "rendering"), and then access
other information ("navigation", "following links").
This process begins when the user inputs a Uniform Resource Locator (URL), for example
http://en.wikipedia.org/, into the browser. The prefix of the URL, the Uniform Resource
Identifier or URI, determines how the URL will be interpreted. The most commonly used kind of
URI starts with http: and identifies a resource to be retrieved over the Hypertext Transfer
Protocol (HTTP).[17] Many browsers also support a variety of other prefixes, such as https: for
HTTPS, ftp: for the File Transfer Protocol, and file: for local files. Prefixes that the web browser
cannot directly handle are often handed off to another application entirely. For example, mailto:
URIs are usually passed to the user's default e-mail application, and news: URIs are passed to the
user's default newsgroup reader.
In the case of http, https, file, and others, once the resource has been retrieved the web browser
will display it. HTML and associated content (image files, formatting information such as CSS,
etc.) is passed to the browser's layout engine to be transformed from markup to an interactive
document, a process known as "rendering". Aside from HTML, web browsers can generally
display any kind of content that can be part of a web page. Most browsers can display images,
audio, video, and XML files, and often have plug-ins to support Flash applications and Java
applets. Upon encountering a file of an unsupported type or a file that is set up to be downloaded
rather than displayed, the browser prompts the user to save the file to disk.
Information resources may contain hyperlinks to other information resources. Each link contains
the URI of a resource to go to. When a link is clicked, the browser navigates to the resource
indicated by the link's target URI, and the process of bringing content to the user begins again
EXPLAIN THE NECESSITY OF !DOCTYPE IN WEB DESIGN
Doctypes are used to let browsers know which version and mode of (x)HTML you are using so
that they will render properly. If you leave out the doctype, the browser will render the page in
quirks mode rather than standards mode and things might not look the way you would expect
them to look.
If you build your pages in XHTML 1.1 and follow Web Standards you would want to use this
doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE
html>.
What is contextual selector?
Contextual selector is a selector that addresses specific occurrence of an element. It
is a string of individual selectors separated by white space, a search pattern, where
only the last element in the pattern is addressed providing it matches the specified
context.
TD P CODE {color: red}
The element CODE will be displayed in red but only if it occurs in the context of
the element P which must occur in the context of the element TD.
ID's and Classes are "hooks"
write down the difference between css id and class
The difference between an ID and a class is that an ID can be used to identify one element, whereas a
class can be used to identify more than one.
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Use a class when you want to consistently style multiple elements throughout the
page/site. Classes are useful when you have, or possibly will have in the future, more
than one element that shares the same style. An example may be a div of "comments"
or a certain list style to use for related links.
Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the ID when you have a single element on the page that will take the style.
Remember that IDs must be unique. In your case this may be the correct option, as
there presumably will only be one "main" div on the page.
Examples of ids are: main-content, header, footer, or left-sidebar.
A good way to remember this is a class is a type of item and the id is the unique name
of an item on the page.
Inheritance
Inheritance in CSS is the mechanism through which certain properties are passed on from
a parent element down to its children. It’s quite similar to inheritance in genetics, really.
If the parents have blue eyes, their children will probably have blue eyes, too.
Not all CSS properties are inherited, because it doesn’t make sense for some of them to
be. For instance, margins are not inherited, since it’s unlikely that a child element should
need the same margins as its parent.
Why inheritance is useful
Why does CSS have an inheritance mechanism then? The easiest way to answer that is
probably to consider what it’d be like if there was no such thing as inheritance. You
would have to specify things like font family, font size and text colour individually—for
every single element type.
Using inheritance, you can for example specify the font properties for the html or body
elements and they will be inherited by all other elements. You can specify background
and foreground colours for a specific container element and the foreground colour will
automatically be inherited by any child elements in that container. The background
colour isn’t inherited, but the initial value for background-color is transparent,
which means the parent’s background will shine through. The effect is similar to what
you’d get if the background colour were inherited, but consider what would happen if
background images were inherited!
Every child would have the same background image as its parent and the result would
look like a jigsaw puzzle put together by someone with a serious drug problem, since the
background would “start over” for each element.
The cascade
CSS means Cascading Style Sheets, so it shouldn’t come as a surprise that the cascade is
an important concept. It’s the mechanism that controls the end result when multiple,
conflicting CSS declarations apply to the same element. There are three main concepts
that control the order in which CSS declarations are applied:
1. Importance 2. Specificity 3. Source order
I will look into these concepts below, one by one.
Importance is most … er … important. If two declarations have the same importance, the
specificity of the rules decides which one will apply. If the rules have the same
specificity, then source order controls the outcome.
Importance
The importance of a CSS declaration depends on where it is specified. The conflicting
declarations will be applied in the following order; later ones will override earlier ones:
1. User agent style sheets 2. Normal declarations in user style sheets 3. Normal declarations in author style sheets 4. Important declarations in author style sheets 5. Important declarations in user style sheets
A user agent style sheet is the built-in style sheet of the browser. Every browser has its
default rules for how to display various HTML elements if no style is specified by the
user or designer of the page. For instance, unvisited links are usually blue and underlined.
A user style sheet is a style sheet that the user has specified. Not all browsers support
user style sheets, but they can be very useful, especially for users with certain types of
disabilities. For instance, a dyslexic person can have a user style sheet that specifies
certain fonts and colours that help reading
PHP Data Types
PHP Data Types
PHP supports eight primitive types.
Four scalar types:
1). Boolean
2). Integer 3). Float (floating-point number, aka 'Double')
4). String
Two compound types:
1). Array
2). Object
And finally two special types:
1). Resource
2). NULL
Variables can store data of different types, and different data types can do different things.
PHP supports the following data types:
String Integer Float (floating point numbers - also called double) Boolean Array Object NULL Resource
PHP String
A string is a sequence of characters, like "Hello world!".
A string can be any text inside quotes. You can use single or double quotes:
Example
<?php
$x = "Hello world!";
$y = 'Hello world!';
echo $x;
echo "<br>";
echo $y;
?>
PHP Integer
An integer is a whole number (without decimals). It is a number between -2,147,483,648
and +2,147,483,647.
Rules for integers:
An integer must have at least one digit (0-9) An integer cannot contain comma or blanks An integer must not have a decimal point An integer can be either positive or negative Integers can be specified in three formats: decimal (10-based), hexadecimal (16-
based - prefixed with 0x) or octal (8-based - prefixed with 0)
In the following example $x is an integer. The PHP var_dump() function returns the data
type and value:
Example
<?php
$x = 5985;
var_dump($x);
?>
Run example »
PHP Float
A float (floating point number) is a number with a decimal point or a number in
exponential form.
In the following example $x is a float. The PHP var_dump() function returns the data
type and value:
Example
<?php
$x = 10.365;
var_dump($x);
?>
Run example »
PHP Boolean
A Boolean represents two possible states: TRUE or FALSE.
$x = true;
$y = false;
Booleans are often used in conditional testing. You will learn more about conditional
testing in a later chapter of this tutorial.
PHP Array
An array stores multiple values in one single variable.
In the following example $cars is an array. The PHP var_dump() function returns the data
type and value:
Example
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
Run example »
You will learn a lot more about arrays in later chapters of this tutorial.
PHP Object
An object is a data type which stores data and information on how to process that data.
In PHP, an object must be explicitly declared.
First we must declare a class of object. For this, we use the class keyword. A class is a
structure that can contain properties and methods:
Example
<?php
class Car {
function Car() {
$this->model = "VW";
}
}
// create an object
$herbie = new Car();
// show object properties
echo $herbie->model;
?>
Run example »
You will learn more about objects in a later chapter of this tutorial.
PHP NULL Value
Null is a special data type which can have only one value: NULL.
A variable of data type NULL is a variable that has no value assigned to it.
Tip: If a variable is created without a value, it is automatically assigned a value of NULL.
Variables can also be emptied by setting the value to NULL:
Example <?php
$x = "Hello world!";
$x = null;
var_dump($x);
?>
Run example »
PHP Resource
The special resource type is not an actual data type. It is the storing of a reference to
functions and resources external to PHP.
A common example of using the resource data type is a database call.
We will not talk about the resource type here, since it is an advanced topic.
Difference between GET and POST methods
Fundamental Difference is probably the Visibility - GET request is sent via the
URL string (appended to the URI with a question-mark as separator), which is
visible whereas POST request is encapsulated in the body of the HTTP request
and can't be seen.
Length - Since, GET request goes via URL, so it has a limitation for its length. It
can't be more than 255 characters long (though this is browser dependent, but
usually the max is 255 characters only). Whereas no such maximum length
limitation holds for the POST request for the obvious reason that it becomes a part
of the body of the HTTP request and there is no size limitation for the body of an
HTTP request/response.
Performance - GET request is comparatively faster as it's relatively simpler to
create a GET request and the time spent in the encapsulation of the POST request
in the HTTP body is saved in this case. In addition, the maximum length
restriction facilitates better optimization of GET implementation.
Type of Data - GET request is sent via URL string and as we all know that URL
can be text-only, so GET can carry only text data whereas POST has no such
restriction and it can carry both text as well as binary data.
Caching/Bookmarking - again for the obvious reason that a GET request is
nothing but an URL hence it can be cached as well as Bookmarked. No such
luxuries with a POST request.
FORM Default - GET is the default method of the HTML FORM element. To
submit a FORM using POST method, we need to specify the method attribute and
give it the value "POST".
Data Set - GET requests are restricted to use ASCII characters only whereas
POST requests can use the 'enctype' attribute with a value "multipart/form-data" to
use the Universal Multiple-Octet Coded Character Set (UCS).
PHP Operators
Operators are used to perform operations on variables and values.
PHP divides the operators in the following groups:
Arithmetic operators
Assignment operators
Comparison operators
Increment/Decrement operators
Logical operators
String operators
Array operators
PHP Arithmetic Operators
The PHP arithmetic operators are used with numeric values to perform common
arithmetical operations, such as addition, subtraction, multiplication etc
Operator Name Example Result Show it
+ Addition $x + $y Sum of $x and $y Show it
»
- Subtraction $x - $y Difference of $x and $y
PHP Assignment Operators
The PHP assignment operators are used with numeric values to write a value to a
variable.
The basic assignment operator in PHP is "=". It means that the left operand gets set to the
value of the assignment expression on the right.
Assignment Same as... Description Show it
x = y x = y The left operand gets set to the value of the expression
on the right Show it »
x += y x = x + y Addition Show it »
PHP Comparison Operators
The PHP comparison operators are used to compare two values (number or string):
Operator Name Example Result Show it
== Equal $x == $y Returns true if $x is equal to $y Show it »
=== Identical $x === $y Returns true if $x is equal to $y, and
they are of the same type Show it »
PHP Increment / Decrement Operators
The PHP increment operators are used to increment a variable's value.
The PHP decrement operators are used to decrement a variable's value.
Operator Name Description Show it
++$x Pre-increment Increments $x by one, then returns $x Show it »
$x++ Post-increment Returns $x, then increments $x by one Show it »
--$x Pre-decrement Decrements $x by one, then returns $x Show it »
$x-- Post-decrement Returns $x, then decrements $x by one Show it »
PHP Logical Operators
The PHP logical operators are used to combine conditional statements.
Operator Name Example Result Show it
and And $x and $y True if both $x and $y are true Show it »
or Or $x or $y True if either $x or $y is true Show it »
PHP String Operators
PHP has two operators that are specially designed for strings.
Operator Name Example Result
. Concatenation $txt1 . $txt2 Concatenation of $txt1
and $txt2
.= Concatenation
assignment $txt1 .= $txt2 Appends $txt2 to $txt1
PHP Array Operators
The PHP array operators are used to compare arrays.
Operator Name Example Result Show it
+ Union $x + $y Union of $x and $y Show it »
== Equality $x == $y Returns true if $x and $y have the same
key/value pairs Show it »
EXPLAIN PHP MYSQL
With PHP, you can connect to and manipulate databases.
MySQL is the most popular database system used with PHP.
What is MySQL?
MySQL is a database system used on the web
MySQL is a database system that runs on a server
MySQL is ideal for both small and large applications
MySQL is very fast, reliable, and easy to use
MySQL uses standard SQL
MySQL compiles on a number of platforms
MySQL is free to download and use
MySQL is developed, distributed, and supported by Oracle Corporation
MySQL is named after co-founder Monty Widenius's daughter: My
The data in a MySQL database are stored in tables. A table is a collection of related data,
and it consists of columns and rows.
Databases are useful for storing information categorically. A company may have a
database with the following tables:
Employees
Products
Customers
Orders
What is PHP
PHP is a scripting language that is often embedded into HTML to add functions HTML
alone can't do. PHP allows you to collect, process and utilize data to create a desired
output. In short, it let's you interact with your pages.
PHP is able to preform a number of tasks including printing data, making numeric
calculations (such as addition or multiplication), making comparisons (which is bigger,
are they equal, etc) and making simple boolean choices.
From this you can create more complex loops and functions to make your page generate
more specialized data.
What is MySQL
MySQL is a relational database system that is used to store information. MySQL can
store many types of data from something as tiny as a single character to as large as
complete files or graphics. Although it can be accessed by most programing languages, it
is often coupled with PHP because they work together with ease.
Information stored in a MySQL database hosted on a web server can be accessed from
anywhere in the world with a computer.
This makes it a good way to store information that needs the ability to change over time,
but also needs to be accessed over the net. Some examples that can utilize MySQL are a
web message board or a customer's shipping status.
How do PHP and MySQL work together?
PHP and MySQL complement each other to do with neither can do alone. PHP can
collect data, and MySQL can in turn store the information. PHP can create dynamic
calculations, and MySQL can provide it with the variables it uses. PHP can create a
shopping cart for your web store, but MySQL can then keep the data in a format PHP can
use to create receipts on demand, show current order status, or even suggest other related
products.
Although PHP and MySQL can each be used independently, when you put them together
it opens up countless possibilities for your site. As the internet progresses, it becomes
more and more necessary to deliver dynamic content to keep up with the demands of web
surfers and their desire to have information instantly delivered to them online. By
learning to use PHP and MySQL you can deliver this information to them on demand.
procedure of creating database and table in mysql database.
MySQL is a free and open source database management system. You need to use sql
commands to create database. You also need to login as mysql root user account. To
create a database and set up tables for the same use the following sql commands:
1. CREATE DATABASE - create the database. To use this statement, you need the
CREATE privilege for the database.
2. CREATE TABLE - create the table. You must have the CREATE privilege for the
table.
3. INSERT - To add/insert data to table i.e. inserts new rows into an existing table.
Procedure for creating a database and a sample table
Login as the mysql root user to create database: $ mysql -u root -p
Sample outputs:
mysql>
Add a database called books, enter: mysql> CREATE DATABASE books;
Now, database is created. Use a database with use command, type: mysql> USE books;
Next, create a table called authors with name, email and id as fields: mysql> CREATE TABLE authors (id INT, name VARCHAR(20),
email VARCHAR(20));
To display your tables in books database, enter: mysql> SHOW TABLES;
Sample outputs:
+-----------------+
| Tables_in_books |
+-----------------+
| authors |
+-----------------+
1 row in set (0.00 sec)
Finally, add a data i.e. row to table books using INSERT statement, run: mysql> INSERT INTO authors (id,name,email)
VALUES(1,"Vivek","[email protected]");
Sample outputs:
Query OK, 1 row affected (0.00 sec)
Superglobals were introduced in PHP 4.1.0, and are built-in variables that are always
available in all scopes.
PHP Global Variables - Superglobals
Several predefined variables in PHP are "superglobals", which means that they are
always accessible, regardless of scope - and you can access them from any function, class
or file without having to do anything special.
The PHP superglobal variables are:
$GLOBALS
$_SERVER
$_REQUEST
$_POST
$_GET
$_FILES
$_ENV
$_COOKIE
$_SESSION
PHP $GLOBALS
$GLOBALS is a PHP super global variable which is used to access global variables from
anywhere in the PHP script (also from within functions or methods).
PHP stores all global variables in an array called $GLOBALS[index]. The index holds the
name of the variable.
The example below shows how to use the super global variable $GLOBALS:
Example
<?php
$x = 75;
$y = 25;
function addition() {
$GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}
addition();
echo $z;
?>
In the example above, since z is a variable present within the $GLOBALS array, it is also
accessible from outside the function!
PHP $_SERVER
$_SERVER is a PHP super global variable which holds information about headers, paths, and
script locations.
The example below shows how to use some of the elements in $_SERVER:
Example <?php
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>
Run example »
The following table lists the most important elements that can go inside $_SERVER:
Element/Code Description
$_SERVER['PHP_SELF'] Returns the filename of the currently executing script
$_SERVER['GATEWAY_INTERFACE'] Returns the version of the Common Gateway Interface (CGI) the
server is using
$_SERVER['SERVER_ADDR'] Returns the IP address of the host server
$_SERVER['SERVER_NAME'] Returns the name of the host server (such as
www.w3schools.com)
$_SERVER['SERVER_SOFTWARE'] Returns the server identification string (such as Apache/2.2.24)
$_SERVER['SERVER_PROTOCOL'] Returns the name and revision of the information protocol (such
as HTTP/1.1)
$_SERVER['REQUEST_METHOD'] Returns the request method used to access the page (such as
POST)
$_SERVER['REQUEST_TIME'] Returns the timestamp of the start of the request (such as
1377687496)
$_SERVER['QUERY_STRING'] Returns the query string if the page is accessed via a query string
$_SERVER['HTTP_ACCEPT'] Returns the Accept header from the current request
$_SERVER['HTTP_ACCEPT_CHARSET'] Returns the Accept_Charset header from the current request
(such as utf-8,ISO-8859-1)
$_SERVER['HTTP_HOST'] Returns the Host header from the current request
$_SERVER['HTTP_REFERER'] Returns the complete URL of the current page (not reliable
because not all user-agents support it)
$_SERVER['HTTPS'] Is the script queried through a secure HTTP protocol
$_SERVER['REMOTE_ADDR'] Returns the IP address from where the user is viewing the current
page
$_SERVER['REMOTE_HOST'] Returns the Host name from where the user is viewing the
current page
$_SERVER['REMOTE_PORT'] Returns the port being used on the user's machine to
communicate with the web server
$_SERVER['SCRIPT_FILENAME'] Returns the absolute pathname of the currently executing script
$_SERVER['SERVER_ADMIN']
Returns the value given to the SERVER_ADMIN directive in the
web server configuration file (if your script runs on a virtual host,
it will be the value defined for that virtual host) (such as
$_SERVER['SERVER_PORT'] Returns the port on the server machine being used by the web
server for communication (such as 80)
$_SERVER['SERVER_SIGNATURE'] Returns the server version and virtual host name which are
added to server-generated pages
$_SERVER['PATH_TRANSLATED'] Returns the file system based path to the current script
$_SERVER['SCRIPT_NAME'] Returns the path of the current script
$_SERVER['SCRIPT_URI'] Returns the URI of the current page
PHP $_REQUEST
PHP $_REQUEST is used to collect data after submitting an HTML form.
The example below shows a form with an input field and a submit button. When a user submits
the data by clicking on "Submit", the form data is sent to the file specified in the action attribute
of the <form> tag. In this example, we point to this file itself for processing form data. If you
wish to use another PHP file to process form data, replace that with the filename of your choice.
Then, we can use the super global variable $_REQUEST to collect the value of the input field:
Example <html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_REQUEST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
Run example »
PHP $_POST
PHP $_POST is widely used to collect form data after submitting an HTML form with
method="post". $_POST is also widely used to pass variables.
The example below shows a form with an input field and a submit button. When a user submits
the data by clicking on "Submit", the form data is sent to the file specified in the action attribute
of the <form> tag. In this example, we point to the file itself for processing form data. If you
wish to use another PHP file to process form data, replace that with the filename of your choice.
Then, we can use the super global variable $_POST to collect the value of the input field:
Example <html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_POST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
Run example »
PHP $_GET
PHP $_GET can also be used to collect form data after submitting an HTML form with
method="get".
$_GET can also collect data sent in the URL.
Assume we have an HTML page that contains a hyperlink with parameters:
<html>
<body>
<a href="test_get.php?subject=PHP&web=W3schools.com">Test $GET</a>
</body>
</html>
When a user clicks on the link "Test $GET", the parameters "subject" and "web" is sent to
"test_get.php", and you can then access their values in "test_get.php" with $_GET.
The example below shows the code in "test_get.php":
Example <html>
<body>
<?php
echo "Study " . $_GET['subject'] . " at " . $_GET['web'];
?>
</body>
</html>
what is javascript?
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high level, dynamic, untyped, and interpreted
programming language.[6] It has been standardized in the ECMAScript language
specification.[7] Alongside HTML and CSS, it is one of the three essential technologies of
World Wide Web content production; the majority of websites employ it and it is
supported by all modern web browsers without plug-ins.[6] JavaScript is prototype-based
with first-class functions, making it a multi-paradigm language, supporting object-
oriented,[8] imperative, and functional programming styles.[6] It has an API for working
with text, arrays, dates and regular expressions, but does not include any I/O, such as
networking, storage or graphics facilities, relying for these upon the host environment in
which it is embedded.[7]
IMPORTANCE OF JAVASCRIPT IN WEB DESIGN
Since 1995, when Netscape first introduced Javascript to the World Wide Web as a
simple client-side scripting language for web browsers, Javascript has become the most
misunderstood, disliked and disdained programming language. Users and developers
were quick to point out its many design errors. Vendors implemented buggy versions of
Javascript in their also buggy web browsers. No wonder users chose to disable their
browser’s ability to run Javascript code!
But now, eighteen years after Javascript first appeared, it has become the dominant
programming language of the web. All modern web browsers implement the Javascript
language, thus making it the only one deployed on all personal computers and mobile
devices around the world. Javascript has become a powerful, dynamic and fully-
functional object-oriented programming language on par with more traditional languages
like C++. Ruby, or Java. It has advanced features such as prototypal inheritance,
modules, namespaces, anonymous (lambda) functions, and even metaprogramming. Full-
blown applications such as Gmail and Google Maps are programmed in Javascript.
Today, you cannot be a web developer and not know Javascript. It’s a language a serious web
developer must learn and master for the reasons discussed in this article.
#1: It’s free and easy to set up.
You don’t have to purchase Javascript. On the client-side, Javascript comes with a browser and
executes within the browser. There is no need to download, install and configure any library files
to be able to run Javascript. All you need is a program code editor (e.g. Sublime Text,
Notepad++, EditPlus, etc.) and, of course, your internet browser and you can write and execute
Javascript code.
Javascript is also an interpreted language. You can pause the program at a specific line of
code, modify that line and resume program execution at that line. There is no time
consuming edit-compile-execute cycle to contend with. Memory management and data
types are managed by the browser.
#2: It’s easy to debug.
All popular browsers allow you to debug your Javascript code. But there are free,
excellent online tools that allow you to look not only at your Javascript code but also at
its execution environment. What’s more, these tools provide a logging capability which
allows you to write and store the values of your variables at various execution stages of
your program. Two excellent and free tools are Firebug and Web Developer Toolbar.
Firebug is a plugin for the Firefox browser and Web Developer Toolbar is available for
Chrome and Firefox.
These helpful tools let you not only debug Javascript, but also examine the HTML and
CSS code of your webpage so you can take an in-depth look at your entire application.
You can modify the code in real time and see your modifications immediately take
effect.
#3: AJAX
AJAX stands for Asynchronous Javascript and XML. It is a set of interrelated web
development technologies which enable web browsers to interact asynchronously with
the web server. Using AJAX, webpages get updated in the background without reloading
and refreshing the webpage. This means the users’ surfing experience is not only
uninterrupted but also dynamic because the content of the webpage is continuously
updating to the newest version. Whereas initially the web was a place for viewing static
webpages, AJAX has now transformed the web into a place where users can interact with
websites and other users as well.
#4: Powerful and Free Frameworks and Libraries
Developing software can be daunting, intellectually challenging, nerve-racking and time
consuming. To overcome those obstacles, increase their prospects of success and
drastically cut down on development time, developers resort to frameworks and libraries.
Simply put, a framework is a proven and reliable design or configuration of the
components of your software while a library is a set of error-free program code organized
into functions. By utilizing frameworks and libraries, developers avoid “reinventing the
wheel” and employ tested and reliable solutions to often recurring problems.
Development time and effort is also reduced by half.
Because of the widespread use of Javascript, many popular and very reliable frameworks
and libraries are available for free for developers. Among the frameworks are AngularJS,
Backbone.js, and Bootstrap. The popular libraries are jQuery, Prototype, and Dojo.
Bootstrap and jQuery are often used together. Bootstrap also employs responsive web
design, which is a design technique that allows a webpage to change its layout based on
the width of the browser screen. Thus, a webpage can be easily displayed either on a full
desktop monitor screen or on a mobile device.
#5: In Demand and Thriving User Community
The Javascript ecosystem continues to grow, and the demand for developers who
know pure Javascript and specific Javascript libraries and frameworks is high. The
graph below shows that Javascript demand has grown more than any other
programming language.
Growth in popularity (based on jobs available) from 2012 – 2013
There is also a thriving community of users and developers who are not only willing to
share their experiences in various forums and conferences, but who also make their tested
and reliable code freely available in various libraries and frameworks. There are also
numerous websites offering free tutorials and training in Javascript programming.
JavaScript To Find Greatest Among 3 Numbers
/* The Following Script will display the greatest among three numbers*/
[html]
<html>
<head>
<h1>Greatest Among Three Numbers</h1>
</head>
<body>
<script type="text/javascript">
var a=10,b=20,c=7;
/* checks a>b and a>c if both conditions satisfied, A is greater */
if (a>b && a>c)
{
document.write("<b>A is greater</b>");
}
/* checks b>a and b>c if both conditions satisfied, b is greater */
if (b>a && b>c)
{
document.write("<b>B is greater</b>");
}
/* if the above two conditions were false c is greater*/
else
{
document.write("<b>C is greater</b>");
}
</script>
</body>
</html>
[/html]
The Output will be:
Greatest Among Three Numbers
B is Greater
Definition and Usage
The getElementById() method returns the element that has the ID attribute with the
specified value.
This method is one of the most common methods in the HTML DOM, and is used almost
every time you want to manipulate, or get info from, an element on your document.
Returns null if no elements with the specified ID exists.
An ID should be unique within a page. However, if more than one element with the
specified ID exists, the getElementById() method returns the first element in the source
code.
Example
Get the element with id="demo" and change its color:
var x = document.getElementById("demo"); // Get the element with id="demo"
x.style.color = "red"; // Change the color of the element