Download Tej's CO327 Web Application Notes - WordPress – www ...

colonteeΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

223 εμφανίσεις

CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


HTTP

Hyper Text Transfer Protocol



A protocol (set of rules) to allow computers to
share data and communicate with each other.



Application Protocol

URL

Uniform Resource Locator

WWW

World Wide Web

System of interlinked hypertext documents accessed via
the internet.

Internet

A global system of interconnected computer networks
connected via the standard protocol suite TCP/IP.

Hypertext

Text on a computer with references to other text
(via
hyperlinks).

Hypertext
Mark
-
up

Text which contains information about the structure and
presentation of a document, along with its content.
Rendered by a browser or hypertext client.

HTML

Hyper Text Markup Language

The standard language for writing w
eb pages. Contains
elements which begin and end with complimentary tags
i.e. ‘<p>’ and ‘</p>’.

XHTML

Extensible Hyper Text Markup Language



Stricter than HTML4

o

Elements should be clearly defined one
within another.

o

All elements should be lowercase.

o

All
elements must have an end tag.

o

Attributes inside the start tag of elements
must always be quoted.

o

Attributes cannot be minimized.

o

ID required for certain elements.



Compatible with all HTML4 syntax.



More likely to be rendered correctly by Browsers,
as it

i
s

recent and strict.



CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Common Tags

Header

<h1></h1>


Paragraph

<p></p>


Unordered List

<ul>


<li>ONE</li>


<li>TWO</li>

</ul>


Ordered List

<ol></ol>


Link

<a href="...">
link text
</a>


Image

<img src=”…” alt=”…” />


Table

<table>


<tr>



<td>




column 1



</td>



<td>




column 2



</td>


</tr>

</table>

W3C

World Wide Web Consortium

Publish HTML

(and CSS)

standards used by
developers to write
website content, and
browsers/web
-
clients to render pages.



See
www.w3schools.com


Modularization

Allows extension of XHTML.

CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Ruby
Annotation

Allows Asiatic linguistically script characters on
pages rendered from HTML files.

Effective
Webpages



Proximity

Items related to each other should be
grouped close together.



Al
ignment

Nothing should be placed on the page
arbitrarily.



Repetition

Repeat visual elements of the design
throughout the piece.



Contrast

Avoid elements that are similar: if they are
not the same then make them

very

different.

Client
-
Server
Model



Two applications running on
separate
machines, interacting to perform a particular
task.



I
.e.
clients (such as browsers/web
-
clients)
send a request to different web servers (via a
URL), in order to retrieve a document or
HTML file. If the request is valid,

the server
will return the file to the client application via
the internet, where the web
-
client would try
and render the file if it is in HTML (as is the
case with all webpages, including those
programmed using server
-
side scripting
languages).



The WWW u
ses this model as its basis; the
Web Client runs on the user machine and
the Web server runs on another machine
(usually) often in a different part of the
world. The machines are connected via a
network.



CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Page

The unit of data transferred between a
server
and a client is known as a `page’.



This page contains
data in
mark
-
up

language
which contains both, information of visual
presentation of the content, and the content
of the ‘page’ itself.



A page is normally considered to be the
contents of a file
residing on the server’s
accessible file
-
store.

Pages that are simply
files on the server are often referred to as
`static’ pages


the contents have been
decided upon in advance and can only be
changed by the author changing the contents
of the file.



Appl
ications running on servers (server side
scripts, web applications etc…) now allow the
dynamic construction of HTML ‘page’
which is
to

be sent to the web
-
client via the internet.
This allows the website to seem interactive

and deal with user requests, whil
e the
application may also send
-
receive data to a
server
-
side database application (via SQL
usually).

Disability



visual


blindness, low vision,
colour

blindness



hearing


deafness, poor hearing



mobility


limited

movement in arms and hands, poor
motor control, etc
.



cognitive


dyslexia, difficulty understanding images or text,
etc

The Disability
Discrimination
Act

Requires providers to make "reasonable
adjustments" to accommodate readers with
disabilities, especial
ly in education or where a
service is being provided.

CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Hyper Text Markup Languages (HTML4,
XHTML 1.1, HTML 5)

<!DOCTYPE HTML>

<html>


<head>



<title>
Your Website
</title>



<style>



</style>


</head>





<body>



<header>




<nav>





<ul>






<li>
Page 1
</li>






<li>
Page 2
</li>





</ul>




</nav>



</header>









<section>




<article>





<header>






<h2>
Article One
</h2>






<p>
Posted on September 4th 2009.
</p>





</header>





<p>
Article Content Here
</p>




</article>








<article>





<
header>






<h2>
Article One
</h2>






<p>
Posted on September 4th 2009.
</p>





</header>





<p>
Article Content Here
</p>







</article>



</section>









<aside>




<article>





<header>






<h2>
A Side Article
</h2>





</header>





<p>
Article
Content Here
</p>




</article>



</aside>










<footer>




<p>
Copyright© 2012 by XYZ. All Rights Reserved.
</p>



</footer>


</body>

</html>



CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Style and Stylesheets

A style is the presentation information within the mark
-
up language text which denotes
how an element’s contents are to be rendered within (usually) the web browser.

This
may include:
Font family, text size
, b
order, border width, border style

etc…


The
Syntax includes three parts:

Selector

{




Background
-
color:
value;




Color:
value;




Text
-
aligns:
value;




Text
-
decorations:
value;




Word
-
spacing:
value;




White
-
space:
value;




Font
-
size:
value;




Font
-
family:
value;

}

A
S
elector
can be:



An
Element Tag (i.e. “h1”, “h2”, “body”, “a” etc…)



A special state associated with an element tag (i.e. “a:link”, “a:hover”, “a:active”,
“a:visited”)



A custom defined class, i.e. “.mainArticle” or “.footer”



The particular id assigned to an existing element on

the HTML page (i.e. “#header”,
or “#footer”)




CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


3 Ways of providing ‘Style’ to a HTML file:

1.

RECOMMENDED, FOR A CLEAN HTML!
As a
separate file linked to the HTML file,
within the <head> element,

as follows:


<html>


<link

rel
=
"stylesheet"

type
=
"text/css"

href
=
"mystyle.css"

/>

</html>

2.

In the head element of the HTML
directly.

<head>

<style

type
=
"text/css"
>


</style>

</head>

3.

As an attribute within the
start tag of an element.

<body>


<p

style
=
"color: red;"
></p>

</body>


FONT
-
FAMILY Property



SERIF:
Small
lines at the end of characters. Traditional and elegant.



SANS
-
SERIF:
No lies at the end of elements. Modern and easier to read.



MONOSPACE:
Same width.



CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Server Side Scripting in PHP



Scripting language


Not compiled but interpreted line by line (java
is compiled)



Server Side


Run on the web server


As opposed to client side, which are run in the web browser
(javascript is client side)



Allows code and HTML to be mixed


Languages is “embedded” and “cross platform”
.


Part of the LAMP open source web tools (Li
nux, Apache, MySQL,
PHP)



Language support for databases, particularly SQL



Example of a basic *.PHP file


<!DOCTYPE html>

<html>


<head>


<title>
First PHP program
</title>


</head>


<body>


<?php


print

“Hello world
!
\
n”
;


?>


</body>

<
/html>





//

and
#

allow in
-
line comments



/* … */
allow multi
-
line comments



CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


HTTP
Data Transfer

There are two main ways of communicating data from the client to
the PHP Script executed on the server.

GET Method



URL can be bookmarked; returned page can be
cached
.



Useful for things you want to link to
.



Size limited (IE URLS are max 2083 characters)
.



Data is visible to user
.



Good for small data being transferred from Client.



There is also an assumption with GET that the result obtained from the PHP script will
not change no matter how many times the data is sent


it is thus safe for the browser
to cache the resultant pages.


Transition Page


<html>


<body>




<form

action
=
"welcome.php"

method
=
"get"
>


Name:
<input

type
=
"text"

name
=
"fname"

/>


Age:
<input

type
=
"text"

name
=
"age"

/>


<input

type
=
"submit"

/>


</form>





</body>

</html>





Reception

Page


<html>


<body>




Welcome
<?php

echo

$_GET
[
"fname"
];

?>
.
<br

/>


You are
<?php

echo

$_GET
[
"age"
];

?>

years old!



</body>

</html>






CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


POST

Method



Send data in body of http request.



Passwords, big forms etc.



Data is not visible to user



If the data may change (e.g., we are using a shopping trolley that we are
updating with new items or we are searching a database that is being
updated) then we actually want the server to recompute the results for the
data we have sent. In this case we nee
d to use the POST method and
the
resultant pages must not be cached
.



Transition Page


<html>


<body>



<form

action
=
"welcome.php"

method
=
"post"
>


Name:
<input

type
=
"text"

name
=
"fname"

/>


Age:
<input

type
=
"text"

name
=
"age"

/>


<input

type
=
"submit"

/>


</form>



</body>

</html>






Reception Page


<html>


<body>




Welcome
<?php

echo

$_POST
[
"fname"
];

?>
!
<br

/>


You are
<?php

echo

$_POST
[
"age"
];

?>

years old.



</body>

</html>




CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


Syntax


Statements

Declaring variables, and IF statements.



$variable





//
^
declare new variable


$variable

=

29.4034




//
^
declare data into variable (type is auto
-
adjusted).








/*




IF STATEMENTS




*/


if

(
$variable

>

29.4034
)


{



//code here


}


else

if

(
$variable

=

29.4034
)


{



//code here


}


else


{



//code here


}



CASE statements with discrete integer/char/string variables



$discreteVariable





/*




CASE STATEMENTS




*/


switch

(
$discreteVariable
)



{



case

"a"
:




//code here




break
;



case

"b"
:




//code here




break
;



case

"c"
:




//code here




break
;







// ELSE
--
>



default
:





//code here




break
;


}




CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.



LOOP STATEMENTS (FOR, FOREACH, WHILE, DO
-
WHILE)



/***




LOOP STATEMENTS




***/


// FOR and FOREACH loops,
----

Run for a fixed number of times. Used when the number of iteration is known.


for
(
$i

=

0
;

$i

<

100
;

$i
++)


{



//code here


}




foreach
(
array_expression
as

$value
)





//for simple array, working with values only


{



//code here


}




foreach
(
array_expression
as

$key

=>

$value
)



//for association array, working with keys and their
corresponding values.


{



//code here


}








// WHILE loop
----

Executes if/until some predefined condition occurs. Used when the number of iterations is NOT known.


while
(
$i

<=

100
)


{



//code here


}








// DO
-
WHILE loop
----

Executes code, and
if the while condition is satisfied, repeats.


do


{



//code here


}


while
(
$boolVar

=

false
);





CO327 Web Applications
: Notes and Key Information

Copyright© 2012 by Gurtej

Singh Birring. All Rights Reserved.


ARRAYS

Arrays in PHP are essentially ordered maps, the ‘key’ however, may or may not be used,
and can either be a string or an integer
if it is.



/***




ARRAYS




***/


//declaring


$students

=

array
(
"Jill"
,

"John"
,

"Mark"
,

"Rob"
,

"Antony"
);



// ^ declare and initialize an array


$students
[
5
]

=

"Tej"
;


// ^ add all extra values to next free index/key.






$noOfStudents

=

count
(
$students
);


// ^ count($ArrayStatement) is a function used to count items in an array.






//iterate the array to print all values stored.


foreach
(
$students

as

$s
)


{



print

"
$s

</br>"
;


}



If the key is used as a “string”, the array is often denoted as an
associative array
.



/***



ASSOCIATIVE ARRAYS


***/


//declaring


$marks

=

array
(
"Jill"
=>
56
,

"Fred"
=>
78
,

"Andy"
=>
45
,

"Kate"
=>
60
);


// ^ initialise array


$marks
[
"Tej"
]

=

100
;


// ^ add
extra values








$noOfMarks

=

count
(
$marks
);


// ^ count($ArrayStatement) is a function used to count items in an array.








//iterate the array to print all values stored.


foreach
(
$marks

as

$name

=>

$mark
)


{



print

"Name:
$name

&nbsp&nbsp&nbsp&
nbsp Mark:
$mark

</br>"
;


}




$_GET
and
$_POST
to retrieve GET and POST data, are
associative arrays.