[Type Subject / Course title here]

1
[Type Topic here]

PHP with CSS, JavaScript and Ajax

Objectives:

At the end of the module the student is expected to:

1. Understand what is Javascript
2. Know its advantages and disadvantages in web development
3. Create web application using javascript
4. Create application using ajax and its implementation to php
5. Create web app with ajax integrating to tables and databases

Javascript

An object-oriented computer programming language commonly used to

create interactive effects within web browsers. JavaScript is
an interpreted programming or script language from Netscape.
Originally developed by Brendan Eich and originally known as LiveScript, the
programming language JavaScript was renamed in 1995.
JavaScript is an interpreted client-side scripting language that allows a web
designer the ability to insert code into their web page. JavaScript is
commonly placed into an HTML or ASP file, and runs directly from the web
page.

It is utilized to perform tasks such as printing the time and date, create a
calendar, or other tasks that are not possible through plain HTML.

Hello, World! in JavaScript

<SCRIPT LANGUAGE="JavaScript">
<! -- Hide from old browsers
document.write('Hello World!');
// Stop hide -->
</SCRIPT>

Course Module
Although JavaScript files are often embedded into the HTML file, userscan
also save their JavaScript code in an external file. This file often ends with a
.js file extension.

Advantages of JavaScript

Speed. Being client-side, JavaScript is very fast because any code functions
can be run immediately instead of having to contact the server and wait for
an answer.

Simplicity. JavaScript is relatively simple to learn and implement.

Versatility. JavaScript plays nicely with other languages and can be used in a
huge variety of applications. Unlike PHP or SSI scripts, JavaScript can be
inserted into any web page regardless of the file extension. JavaScript can
also be used inside scripts written in other languages such as Perl and PHP.

Server Load. Being client-side reduces the demand on the website server.

Disadvantages of JavaScript

Security. Because the code executes on the users' computer, in some cases it
can be exploited for malicious purposes. This is one reason some people
choose to disable JavaScript.

Reliance on End User. JavaScript is sometimes interpreted differently by

different browsers. Whereas server-side scripts will always produce the
same output, client-side scripts can be a little unpredictable. Don't be overly
concerned by this though - as long as you test your script in all the major
browsers you should be safe.
 [Type Subject / Course title here]
3
[Type Topic here]

Comparing Javascript and PHP

Course Module
 [Type Subject / Course title here]
5
[Type Topic here]

Course Module
 [Type Subject / Course title here]
7
[Type Topic here]

JavaScript and DIVs

Course Module
Parsing data with JavaScript
 [Type Subject / Course title here]
9
[Type Topic here]

Using Ajax

Ajax is a client-side script that communicates to and from a

server/database without the need for a postback or a complete page refresh.
The best definition for Ajax is “the method of exchanging data with a server,
and updating parts of a web page – without reloading the entire page.
AJAX is a developer's dream, because you can:
 Update a web page without reloading the page
 Request data from a server - after the page has loaded
 Receive data from a server - after the page has loaded
 Send data to a server - in the background
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
 A browser built-in XMLHttpRequest object (to request data from a
web server)
 JavaScript and HTML DOM (to display or use the data)

Course Module
The keystone of AJAX is the XMLHttpRequest object.

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object.
The XMLHttpRequest object is used to exchange data with a server behind
the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.

Create an XMLHttpRequest Object

All modern browsers (Chrome, IE7+, Firefox, Safari, and Opera) have a built-
in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) use an ActiveX Object:
variable = new ActiveXObject("Microsoft.XMLHTTP");
To handle all browsers, including IE5 and IE6, check if the browser supports
the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if
not, create an ActiveXObject:
 [Type Subject / Course title here]
11
[Type Topic here]

Course Module
 [Type Subject / Course title here]
13
[Type Topic here]

Another Ajax Example

Course Module
Displaying Ajax into tables
 [Type Subject / Course title here]
15
[Type Topic here]

Course Module
Ajax and Databases
 [Type Subject / Course title here]
17
[Type Topic here]

Course Module
 [Type Subject / Course title here]
19
[Type Topic here]

References
Murach, J. (2014) Murach’s PHP and MYSQL (2nd Edition)

Yank, K, PHP and MYSQL: Novice to Ninja

WEBSITE
http://php.net/

http://www.w3schools.com/php/

https://www.tutorialspoint.com/php/

Course Module