Tuesday, 29 October 2013


Web Designing Course Content

·         HTML Content
o   HTML Introduction, Get Started, Basic
o   HTML Elements, Attributes, Headings
o   HTML Paragraphs, Formatting
o   HTML Fonts, Styles
o   HTML Links,  Images
o   HTML Tables, Lists
o   HTML Forms
o   HTML Frames, Iframes
o   HTML Colors, Colornames, Colorvalues
o   HTML Head, Meta

·         CSS Content
o   CSS HOME
o   CSS Introduction
o   CSS Syntax
o   CSS Id & Class
o   CSS How To
o   Styling Backgrounds
o   Styling Text
o   Styling Fonts
o   Styling Links
o   Styling Lists
o   Styling Tables
o   CSS Box Model
o   CSS Border
o   CSS Outline
o   CSS Margin
o   CSS Padding
o   CSS Grouping/Nesting
o   CSS Dimension
o   CSS Display
o   CSS Positioning
o   CSS Floating
o   CSS Align
o   CSS Pseudo-class
o   CSS Pseudo-element
o   CSS Navigation Bar
o   CSS Image Gallery
o   CSS Image Opacity
o   CSS Image Sprites
o   CSS Media Types
o   CSS Attribute Selectors

·         JavaScript Content
o   JS Introduction
o   JS How To
o   JS Where To
o   JS Statements
o   JS Comments
o   JS Variables
o   JS Operators
o   JS Comparisons
o   JS If...Else
o   JS Switch
o   JS Popup Boxes
o   JS Functions
o   JS For Loop
o   JS While Loop
o   JS Break Loops
o   JS For...In
o   JS Events
o   JS Try...Catch
o   JS Throw
o   JS Special Text
o   JS Objects Intro
o   JS String
o   JS Date
o   JS Array
o   JS Boolean
o   JS Math
o   JS RegExp
o   JS Browser
o   JS Cookies
o   JS Validation
o   JS Timing
o   JS Create Object


PHP Content
·         PHP Intro:
Up until recently, scripting on the internet was something which very few people even attempted, let alone mastered. Recently though, more and more people have been building their own websites and scripting languages have become more important. Because of this, scripting languages are becomming easier to learn and PHP is one of the easiest and most powerful yet.

PHP is used to enhance web pages. With PHP, we can do things like create username and password login pages, check details from a form, create forums, picture galleries, surveys, and a whole lot more.

PHP is known as a server-sided language. That's because the PHP doesn't get executed on our computer, but on the computer we requested the page from. The results are then handed over to we, and displayed in our browser. It is free to download and use.

Why PHP?

We may be wondering why we should choose PHP over other languages such as Perl or even why we should learn a scripting language at all. Learning a scripting language, or even understanding one, can open up huge new possibilities for our website. Although we can download pre-made scripts from sites like Hotscripts, these will often contain advertising for the author or will not do exactly what we want. With an understanding of a scripting language we can easily edit these scripts to do what we want, or even create our own scripts.

Using scripts on our website allows we to add many new 'interactive' features like feedback forms, guestbooks, message boards, counters and even more advanced features like portal systems, content management, advertising managers etc. With these sort of things on our website we will find that it gives a more professional image. As well as this, anyone wanting to work in the site development industry will find that it is much easier to get a job if they know a scripting language.

PHP Install
What do we Need?

If our server supports PHP we don't need to do anything.
Just create some .php files in our web directory, and the server will parse them for we. Because it is free, most web hosts offer PHP support.
However, if our server does not support PHP, we must install PHP.
Here is a link to a good tutorial from PHP.net on how to install PHP5: http://www.php.net/manual/en/install.php

Download PHP

Download PHP for free here: http://www.php.net/downloads.php

Download MySQL Database

Download MySQL for free here: http://www.mysql.com/downloads/

Download Apache Server

Download Apache for free here: http://httpd.apache.org/download.cgi

Installing and Testing Wampserver

If the installation went well, we should have an new icon in the bottom right, where the clock is:
Description: http://www.homeandlearn.co.uk/php/images/wampserver_menu.gif
Click the icon to see the menu above.
From here, we can stop the server, exit it, view help files, and see the configuration pages.
Click on localhost, though, and we'll see this page appear: (Localhost just refers to the server running on our own computer. Another way to refer to our server is by using the IP address 127.0.0.1.)
Description: http://www.homeandlearn.co.uk/php/images/localhost.gif
Click the link under Tools that says phpinfo(). If all went well, we should be looking at the following page (The one below is a different php version, but don't worry about this - as long as we see something):
The info.php page (click to open in a new window 66K)
If we saw the above page, then congratulations! Our PHP server is up and running, and we can make a start scripting PHP pages.

Saving our PHP files

Whenever we create a new PHP page, we need to save it in our WWW directory. We can see where this is by clicking its item on the menu:
Description: http://www.homeandlearn.co.uk/php/images/wampserver_menu3.gif
When we click on www directory, we should see an explorer window appear. This one is from Windows Vista: (We'll probably have only two files, index and testmysql.)
Description: http://www.homeandlearn.co.uk/php/images/www_directory.gif
This www folder for Wampserver is usally at this location on our hard drive:
c:/wamp/www/
Bear this in mind when we click File > Save As to save our PHP scripts.

Launching our PHP scripts

Suppose we have created a php script called test1.php. To launch this script, we need to add the script name after localhost in our browser. So instead of this:
http://localhost/index.php
We would type this:
http://localhost/test1.php
We don't type the name of the wamp folder, however. This would be wrong, for example:
c:/wamp/www/test1.php
As too would this:
http://localhost/www/test1.php
Our server knows where the www folder is, so we don't have to type it out: just add the script name to localhost. Likewise, if we create a folder under www then we'd just type this:
http://localhost/folder_name/script_name.php

OK, we'll assume that everything is now up and running. If it's not, click "Move on to the Next Part" below, for some troubleshooting. If it is, click "Back to the PHP Contents Page"
PHP Syntax

A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be placed anywhere in the document.
On servers with shorthand support enabled we can start a scripting block with <? and end with ?>.
For maximum compatibility, we recommend that we use the standard form (<?php) rather than the shorthand form.
<?php
?>
A PHP file normally contains HTML tags, just like an HTML file, and some PHP scripting code.
Below, we have an example of a simple PHP script which sends the text "Hello World" to the browser:
<html>
<body>

<?php
echo "Hello World";
?>

</body>
</html>
Each code line in PHP must end with a semicolon. The semicolon is a separator and is used to distinguish one set of instructions from another.
There are two basic statements to output text with PHP: echo and print. In the example above we have used the echo statement to output the text "Hello World".
PHP Variables

Variables are used for storing values, like text strings, numbers or arrays.
When a variable is declared, it can be used over and over again in our script.
All variables in PHP start with a $ sign symbol.
The correct way of declaring a variable in PHP:
$var_name = value;
New PHP programmers often forget the $ sign at the beginning of the variable. In that case it will not work.
Let's try creating a variable containing a string, and a variable containing a number:
<?php
$txt="Hello World!";
$x=16;
?>
PHP String
String variables are used for values that contain characters.
Below, the PHP script assigns the text "Hello World" to a string variable called $txt:
<?php
$txt="Hello World";
echo $txt;
?>
The output of the code above will be:
Hello World
Now, lets try to use some different functions and operators to manipulate the string.

The Concatenation Operator

There is only one string operator in PHP.
The concatenation operator (.)  is used to put two string values together.
To concatenate two string variables together, use the concatenation operator:
<?php
$txt1="Hello World!";
$txt2="What a nice day!";
echo $txt1 . " " . $txt2;
?>
The output of the code above will be:
Hello World! What a nice day!
If we look at the code above we see that we used the concatenation operator two times. This is because we had to insert a third string (a space character), to separate the two strings.

The strlen() function

The strlen() function is used to return the length of a string.
Let's find the length of a string:
<?php
echo strlen("Hello world!");
?>
The output of the code above will be:
12
The length of a string is often used in loops or other functions, when it is important to know when the string ends. (i.e. in a loop, we would want to stop the loop after the last character in the string).

PHP If...Else
The if Statement

Use the if statement to execute some code only if a specified condition is true.

Syntax

if (condition) code to be executed if condition is true;
The following example will output "Have a nice weekend!" if the current day is Friday:
<html>
<body>

<?php
$d=date("D");
if ($d=="Fri") echo "Have a nice weekend!";
?>

</body>
</html>
Notice that there is no ..else.. in this syntax. The code is executed only if the specified condition is true.

The if...else Statement

Use the if....else statement to execute some code if a condition is true and another code if a condition is false.

Syntax

if (condition)
  code to be executed if condition is true;
else
  code to be executed if condition is false;

The if...elseif....else Statement

Use the if....elseif...else statement to select one of several blocks of code to be executed.

Syntax

if (condition)
  code to be executed if condition is true;
elseif (condition)
  code to be executed if condition is true;
else
  code to be executed if condition is false;
PHP Switch:
Use the switch statement to select one of many blocks of code to be executed.

Syntax

switch (n)
{
case label1:
  code to be executed if n=label1;
  break;
case label2:
  code to be executed if n=label2;
  break;
default:
  code to be executed if n is different from both label1 and label2;
}
This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically. The default statement is used if no match is found.
PHP Arrays
An array stores multiple values in one single variable.
A variable is a storage area holding a number or text. The problem is, a variable will hold only one value.
An array is a special variable, which can store multiple values in one single variable.
If we have a list of items (a list of car names, for example), storing the cars in single variables could look like this:
$cars1="Saab";
$cars2="Volvo";
$cars3="BMW";
However, what if we want to loop through the cars and find a specific one? And what if we had not 3 cars, but 300?
The best solution here is to use an array!
An array can hold all our variable values under a single name. And we can access the values by referring to the array name.
Each element in the array has its own index so that it can be easily accessed.
·      PHP While Loops
Loops execute a block of code a specified number of times, or while a specified condition is true.

PHP Loops

Often when we write code, we want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
In PHP, we have the following looping statements:
  • while - loops through a block of code while a specified condition is true
  • do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
  • for - loops through a block of code a specified number of times
  • foreach - loops through a block of code for each element in an array

The while Loop

The while loop executes a block of code while a condition is true.

Syntax

while (condition)
  {
  code to be executed;
  }

The do...while Statement

The do...while statement will always execute the block of code once, it will then check the condition, and repeat the loop while the condition is true.

Syntax

do
  {
  code to be executed;
 
}
while (condition);

PHP For Loops
The for Loop

The for loop is used when we know in advance how many times the script should run.

Syntax

for (init; condition; increment)
  {
  code to be executed;
  }
Parameters:
  • init: Mostly used to set a counter (but can be any code to be executed once at the beginning of the loop)
  • condition: Evaluated for each loop iteration. If it evaluates to TRUE, the loop continues. If it evaluates to FALSE, the loop ends.
  • increment: Mostly used to increment a counter (but can be any code to be executed at the end of the loop)
Note: Each of the parameters above can be empty, or have multiple expressions (separated by commas).
·      PHP Functions
The real power of PHP comes from its functions.
In PHP, there are more than 700 built-in functions.


To keep the script from being executed when the page loads, we can put it into a function.
A function will be executed by a call to the function.
We may call a function from anywhere within a page.

Create a PHP Function

A function will be executed by a call to the function.

Syntax

function functionName()
{
code to be executed;
}
PHP function guidelines:
  • Give the function a name that reflects what the function does
  • The function name can start with a letter or underscore (not a number)

PHP Forms
The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input.

PHP Form Handling

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 our PHP scripts.


PHP $_GET
In PHP, the predefined $_GET variable is used to collect values in a form with method="get".
The predefined $_GET variable is used to collect values in a form with method="get"
Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send.


PHP $_POST
The predefined $_POST variable is used to collect values from a form sent with method="post".
Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.
However, there is an 8 Mb max size for the POST method, by default (can be changed by setting the post_max_size in the php.ini file).
PHP Advanced
PHP Date
The PHP date() function formats a timestamp to a more readable date and time.
A timestamp is a sequence of characters, denoting the date and/or time at which a certain event occurred.

Syntax

date(format,timestamp)

PHP Include
The include() function takes all the content in a specified file and includes it in the current file.
If an error occurs, the include() function generates a warning, but the script will continue execution.


PHP File
The fopen() function is used to open files in PHP.
The first parameter of this function contains the name of the file to be opened and the second parameter specifies in which mode the file should be opened:
<html>
<body>

<?php
$file=fopen("welcome.txt","r");
?>

</body>
</html>
The file may be opened in one of the following modes:


Modes
Description
r
Read only. Starts at the beginning of the file
r+
Read/Write. Starts at the beginning of the file
w
Write only. Opens and clears the contents of file; or creates a new file if it doesn't exist
w+
Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist
a
Append. Opens and writes to the end of the file or creates a new file if it doesn't exist
a+
Read/Append. Preserves file content by writing to the end of the file
x
Write only. Creates a new file. Returns FALSE and an error if file already exists
x+
Read/Write. Creates a new file. Returns FALSE and an error if file already exists
Note: If the fopen() function is unable to open the specified file, it returns 0 (false).

PHP File Upload
With PHP, it is possible to upload files to the server.

<?php
if ($_FILES["file"]["error"] > 0)
  {
  echo "Error: " . $_FILES["file"]["error"] . "<br />";
  }
else
  {
  echo "Upload: " . $_FILES["file"]["name"] . "<br />";
  echo "Type: " . $_FILES["file"]["type"] . "<br />";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
  echo "Stored in: " . $_FILES["file"]["tmp_name"];
  }
?>
By using the global PHP $_FILES array we can upload files from a client computer to the remote server.
The first parameter is the form's input name and the second index can be either "name", "type", "size", "tmp_name" or "error". Like this:
  • $_FILES["file"]["name"] - the name of the uploaded file
  • $_FILES["file"]["type"] - the type of the uploaded file
  • $_FILES["file"]["size"] - the size in bytes of the uploaded file
  • $_FILES["file"]["tmp_name"] - the name of the temporary copy of the file stored on the server
  • $_FILES["file"]["error"] - the error code resulting from the file upload
This is a very simple way of uploading files. For security reasons, we should add restrictions on what the user is allowed to upload.

PHP Cookies
A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With PHP, we can both create and retrieve cookie values.
The setcookie() function is used to set a cookie.
Note: The setcookie() function must appear BEFORE the <html> tag.

Syntax

setcookie(name, value, expire, path, domain);

PHP Sessions
A PHP session variable is used to store information about, or change settings for a user session. Session variables hold information about one single user, and are available to all pages in one application.
The session_start() function must appear BEFORE the <html> tag:
<?php session_start(); ?>

<html>
<body>

</body>
</html>
The code above will register the user's session with the server, allow we to start saving user information, and assign a UID for that user's session.

Storing a Session Variable

The correct way to store and retrieve session variables is to use the PHP $_SESSION variable:
<?php
session_start();
// store session data
$_SESSION['views']=1;
?>

<html>
<body>

<?php
//retrieve session data
echo "Pageviews=". $_SESSION['views'];
?>

</body>
</html>
Output:
Pageviews=1
In the example below, we create a simple page-views counter. The isset() function checks if the "views" variable has already been set. If "views" has been set, we can increment our counter. If "views" doesn't exist, we create a "views" variable, and set it to 1:
<?php
session_start();

if(isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;
else
$_SESSION['views']=1;
echo "Views=". $_SESSION['views'];
?>


Destroying a Session

If we wish to delete some session data, we can use the unset() or the session_destroy() function.
The unset() function is used to free the specified session variable:
<?php
unset($_SESSION['views']);
?>
We can also completely destroy the session by calling the session_destroy() function:
<?php
session_destroy();
?>

PHP E-mail
The PHP mail() function is used to send emails from inside a script.
Syntax
mail(to,subject,message,headers,parameters)


PHP Filter:

A PHP filter is used to validate and filter data coming from insecure sources. To test, validate and filter user input or custom data is an important part of any web application. The PHP filter extension is designed to make data filtering easier and quicker.
To filter a variable, use one of the following filter functions:
  • filter_var() - Filters a single variable with a specified filter
  • filter_var_array() - Filter several variables with the same or different filters
  • filter_input - Get one input variable and filter it
  • filter_input_array - Get several input variables and filter them with the same or different filters
PHP Database
MySQL Introduction
MySQL is a database.
The data in MySQL is stored in database objects called tables.
A table is a collection of related data entries and it consists of columns and rows.
Databases are useful when storing information categorically. A company may have a database with the following tables: "Employees", "Products", "Customers" and "Orders".
MySQL Connect
Before we can access data in a database, we must create a connection to the database.
In PHP, this is done with the mysql_connect() function.

Syntax

mysql_connect(servername,username,password);

Parameter
Description
servername
Optional. Specifies the server to connect to. Default value is "localhost:3306"
username
Optional. Specifies the username to log in with. Default value is the name of the user that owns the server process
password
Optional. Specifies the password to log in with. Default is ""
MySQL Create
The CREATE DATABASE statement is used to create a database in MySQL.

Syntax

CREATE DATABASE database_name

To learn more about SQL, please visit our SQL tutorial.
To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

The following example creates a database called "my_db":
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

if (mysql_query("CREATE DATABASE my_db",$con))
  {
  echo "Database created";
  }
else
  {
  echo "Error creating database: " . mysql_error();
  }

mysql_close($con);
?>

Create a Table

The CREATE TABLE statement is used to create a table in MySQL.

Syntax

CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name3 data_type,
....

)
We must add the CREATE TABLE statement to the mysql_query() function to execute the command.

Example

The following example creates a table named "Persons", with three columns. The column names will be "FirstName", "LastName" and "Age":
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

// Create database
if (mysql_query("CREATE DATABASE my_db",$con))
  {
  echo "Database created";
  }
else
  {
  echo "Error creating database: " . mysql_error();
  }

// Create table
mysql_select_db("my_db", $con);
$sql = "CREATE TABLE Persons
(
FirstName varchar(15),
LastName varchar(15),
Age int
)";

// Execute query
mysql_query($sql,$con);

mysql_close($con);
?>
A database must be selected before a table can be created. The database is selected with the mysql_select_db() function.When we create a database field of type varchar, we must specify the maximum length of the field, e.g. varchar(15).

MySQL Insert
Insert Data Into a Database Table

The INSERT INTO statement is used to add new records to a database table.

Syntax

It is possible to write the INSERT INTO statement in two forms.
The first form doesn't specify the column names where the data will be inserted, only their values:
INSERT INTO table_name
VALUES (value1, value2, value3,...)
The second form specifies both the column names and the values to be inserted:
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)
MySQL Select
The SELECT statement is used to select data from a database.

Syntax

SELECT column_name(s)
FROM table_name
To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.
MySQL Where
The WHERE clause is used to extract only those records that fulfill a specified criterion.

Syntax

SELECT column_name(s)
FROM table_name
WHERE column_name operator value
MySQL Order By:
The ORDER BY keyword is used to sort the data in a recordset.
The ORDER BY keyword sort the records in ascending order by default.
If we want to sort the records in a descending order, we can use the DESC keyword.

Syntax

SELECT column_name(s)
FROM table_name
ORDER BY column_name(s) ASC|DESC
MySQL Update
The UPDATE statement is used to update existing records in a table.

Syntax

UPDATE table_name
SET column1=value, column2=value2,...
WHERE some_column=some_value
MySQL Delete
The DELETE FROM statement is used to delete records from a database table.

Syntax

DELETE FROM table_name
WHERE some_column = some_value
To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

PHP ODBC
ODBC is an Application Programming Interface (API) that allows we to connect to a data source (e.g. an MS Access database).
Create an ODBC Connection

With an ODBC connection, we can connect to any database, on any computer in our network, as long as an ODBC connection is available.
Here is how to create an ODBC connection to a MS Access Database:
  1. Open the Administrative Tools icon in our Control Panel.
  2. Double-click on the Data Sources (ODBC) icon inside.
  3. Choose the System DSN tab.
  4. Click on Add in the System DSN tab.
  5. Select the Microsoft Access Driver. Click Finish.
  6. In the next screen, click Select to locate the database.
  7. Give the database a Data Source Name (DSN).
  8. Click OK.
Note that this configuration has to be done on the computer where our web site is located. If we are running Internet Information Server (IIS) on our own computer, the instructions above will work, but if our web site is located on a remote server, we have to have physical access to that server, or ask our web host to to set up a DSN for we to use.

Connecting to an ODBC

The odbc_connect() function is used to connect to an ODBC data source. The function takes four parameters: the data source name, username, password, and an optional cursor type.
The odbc_exec() function is used to execute an SQL statement.

Example

The following example creates a connection to a DSN called northwind, with no username and no password. It then creates an SQL and executes it:
$conn=odbc_connect('northwind','','');
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);

Retrieving Records

The odbc_fetch_row() function is used to return records from the result-set. This function returns true if it is able to return rows, otherwise false.
The function takes two parameters: the ODBC result identifier and an optional row number:
odbc_fetch_row($rs)

Retrieving Fields from a Record

The odbc_result() function is used to read fields from a record. This function takes two parameters: the ODBC result identifier and a field number or name.
The code line below returns the value of the first field from the record:
$compname=odbc_result($rs,1);
The code line below returns the value of a field called "CompanyName":
$compname=odbc_result($rs,"CompanyName");

Closing an ODBC Connection

The odbc_close() function is used to close an ODBC connection.
odbc_close($conn);