Basic Web Application ( Week 8 )

1. Installaion
( How to Install PHP and MySQL Under Windows XP )
http://heliotropicsystems.com/pubs/TSa092005.pdf
http://www.builderau.com.au/program/mysql/print.htm?TYPE=story&AT=339271632-
339028784t-320002018c
( How to configure LAMP )
http://lamphowto.com/
http://www.mysql-apache-php.com/

There are good sources to help installing LAMP and WAMP.

2. PHP Configuration (php.ini)
Sometimes, We need to modify this file to set up our system. Because PHP stores
all kinds of configuration in this file. This file is in the directory where we
installed PHP.

Following is good source to understand how to use php.ini file
http://www.washington.edu/computing/web/publishing/php-ini.html

3. Uploading Files to MySQL Database
This is very interesting skill and sometimes very useful.. So, I wanna mention
here.
Using PHP to upload files into MySQL database sometimes needed by some web
application. For instance for storing pdf documents or image.

A. First, Make the teable for the upload files
id, name, type, size, content

We can use one of three BLOB data types for column content.
They are TINYBLOB, BLOB, MEDIUMBLOB, and LONGBLOB

BLOB is limited to store up to 64 kilobytes of data and MEDIUMBLOB is to store
up to 16 megabytes.

( Example )
CREATE TABLE upload (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(30) NOT NULL,
type VARCHAR(30) NOT NULL,
size INT NOT NULL,
content MEDIUMBLOB NOT NULL,
PRIMARY KEY(id)
);

B. Second, uploading a file to MYSQL DB.
uploading the file to the server then read the file and insert it to MySQL.

Using post method, and then using file as input type. Bellow is the example

And then we can use $_FILES to upload the file to MySQL

$_FILES['userfile']['name']
$_FILES['userfile']['type']
$_FILES['userfile']['size']
$_FILES['userfile']['tmp_name']
$_FILES['userfile']['error']

Following is the example of uploading the file to MySQL

$fileName = $_FILES['userfile']['name'];
$tmpName = $_FILES['userfile']['tmp_name'];
$fileSize = $_FILES['userfile']['size'];
$fileType = $_FILES['userfile']['type'];

$fp = fopen($tmpName. 'r');
$content = fread($fp, filesize($tmpName));
$content = addslashes($content);
fclose($fp);

$query = "INSERT INTO upload (name, size, type, content) VALUES
('$fileName', '$fileSize', '$fileType', '$content')";

mysql_query($query) or die ('Error, query failed');

Wow! I'm feeling there are so many interesting techniques in PHP+MySQL....
Continue to next

JavaScript

1. Functions of JavaScript
A. Giving HTML designers a programming tool
B. Enabling put dynamic text into an HTML page
C. Enabling react to events
D. Enabling read and write HTML elements
E. Enabling validating data
F. Enabling detect the visitor's browser
G. Enabling create cookies

2. JavaScript Event Reference
onabort, onblur, onchange, onclick, ondbclick, onerror, onfocus, onkeydown,
onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onreset, onresize, onselect, onsubmit, onunload

** onerror event **
This event is useful to show a script error in the page.

(( Syntax ))
onerror=handleErr

function handleErr(msg,url,l)
{
// Handle the error here
return true or false
}

For using this onerror event, we need to create a function to hadle the errors.
Then we call the function with the onerror event handler. The event handler is
called with three arguments: msg(error message), url(the url of the page that
caused the error) and line(the line where the error occured).

3. How to break a code line in javascript

(( Example ))
document.write("This is \
DMT class.")

With a backslash, we can break up a code line.
But, we can't break up a code like the follwoing:

document.write \
("This is DMT class.")

4. Comments for JavaScript
A. // -- For single line comment
B. /* */ -- For multi line comment

5. Built-in JavaScript Objects

A. String Object
*Method
anchor, big, charAt, indexof, substr, toLowerCase and so on
*Property
constructor, length, prototype
B. Date Object
*Method
Date, getDate, getSeconds, getTime, setDate, toString, UTC and so on
*Property
constructor, prototype
C. Array Object
*Method
concat, join, reverse, shift, sort, toString and so on
*Property
constructor, length, prototype
D. Boolean Object
E. Math Object
*Method
abs, asin, ceil, log, random, sin, tan and so on
*Property
constructor, prototype
F. More Objects
Window, Navigator, Screen, History, Location

6. JavaScript Browser Detection

(( Example ))
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_Version)

document.write("Browser name:"+browser)
document.write("
")
document.write("Browser version: "+ version)

* With NAVIGATOR object, JavaScript can detect the visitor's browser type and
version.

7. JavaScript Cookie

(( Example ))
A. SetCookie
function setCookie(c_name, value, expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+"="+escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

B. GetCookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
.........
}
}

C. CheckCookie
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{ alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}

* Cookies are stored on the visitor's computer. Whenever the same computer
requests a page with a browser, it will send the cookie too.
--- Cookie is usually used to identify user.

8. Creating JavaScript Objects
A. Creating instance of an object
(( Example ))
personinfoObj=new Object()
personinfoObj.firstname="John"
personinfoObj.lastname="Doe"
personinfoObj.age=50
personinfoObj.eyecolor="blue"

B. Creating template of object

function personinfo(firstname, lastname, age, eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

StudentOne=new personinfo("Mike","Doe",30,"blue")

Week 5 : XHTML + CSS

A. Three flavors of XHTML 1.0
1.XHTML 1.0 Strict -- Use this when you want really clean structual mark-up, free of any markup associated with layout. Use this together with W3C's
Cascading Style Sheet language(CSS) to get the font, color, and layout effects
you want.
2.XHTML 1.0 Transitional -- Many people writing Web pages for the general public to access might want to use this flavor of XHTML 1.0. The idea is to take advantage of XHTML features including style sheets but nonetheless to make
small adjustments to your markup for the benefit of those viewing your pages
with older browsers which can't understand style sheets. These include using
the body element with bgcolor, text and link attributes.
3.XHTML 1.0 Frameset -- Use this when you want to use Frames to partition the browser window into two or more frames.
B.XHTML 2.0
XHTML 2.0 is a markup language intended for rich, portable web-based applciations. While the ancestry of XHTML 2.0 comes from HTML 4, XHTML 1.0, and XHTML 1.1, it is not intended to be backward compatible with its earlier versions. Application developers familiar with its earlier ancestors will be comfortable working with XHTML 2.0.
XHTML 2.0 updates many of the modules defined in Modularization of XHTML, and includes the updated versions of all those modules and their semantics.
C.The benefits of CSS
1.Control layout of many documents from one single style sheet
2.More precise control of layout
3.Apply different layout to different media-types(screen, print, etc.)
4.numerous advanced and sophisticated techniques
D. Grouping of elements (Span and Div)
1.The elements and are used to group and structure a document and will often be used together with the attributes class and id.
The element is what you could call a neutral element which does not add anything to the document itself. But with CSS, can be used to add visual features to specific parts of text in your documents.
E.The Box Model
The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element.
F.Floating elements
An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right to the left in a document.
G.Layer on layer with z-index
CSS operates in three dimensions - height,widht and depth. Layers can be used in many situations. For example, try to use z-index to create effects in headlines instead of creating these as graphics. For one thing, it is faster to load text and for another, it provides a potentially better ranking in search engines.
H.XML
1.Well-formed documents
--One and only one root element exists for the document.
--Non-empty elements are delimited by both a start-tag and an end-tag.
--Empty elements may be marked with an empty-element tag.
--All attribute values are quoted, either sing or double quotes.
--Tags may be nested but must not overlap. Each non-root element must be completely contained in another element.
--The document complies to its character set definition. The charset is usually defined in the xml declaration but it can be provided by the transport protocol, such as HTTP.
2.DTD
--The oldest schema format for XML is the Document Type Definition(DTD), inherited from SGML. While DTD support is ubiquitous due to its inclusion in the XML 1.0 standard.
3.XML Schema
--A newer XML schema language, described by the W3C as the successor of DTDs, is XML Schema, or more informally referred to by the intialism for XML Schema instances, XSD(XML Schema Definition). XSDs are far more powerful than DTDs in descrbing XML languages. They use a rich datatyping system, allow for more detailed constraints on an XML document's logical structure and are required to be processed in a more robust validation framework.
I.RSS
--RSS stands for Really Simple Syndication
--RSS allows you to syndicate your site content
--RSS defines an easy way to share and view headlines and content
--RSS files can be automatically updated
--RSS allows personalized views for different sites
--RSS is written in XML
--RSS is useful for web sites that are updated frequently
News sites, Companies, Calendars, Site changes
--With RSS, information on the internet becomes easier to find, and web developers can spread their information more easily to special interest groups.
J.CSS Pseudo-classes & elements
-- :active Adds special style to an activated element
-- :focus Adds special style to an element while the elements has focus
-- :hover Adds special style to an element when you mouse over it
-- :link Adds special style to an unvisited link
-- :visisted Adds special style to a visited link
-- :first-child Adds special style to an element that is the first child of some other element
-- :lang Allows the author to specify a language to use in a specified element
-- :first-letter Adds special style to the first letter of a text
-- :first-line Adds special style to the first line of a text
-- :before Inserts some content before an element
-- :after Inserts some content after an element