Web development

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

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

62 εμφανίσεις

Web development

8.4.2013

Web development

Content

Part I:

Server
-
side scripting


Part II:

Client
-
side scripting

Part I

Server
-
side scripting


PHP


MySQL


JSON

PHP






-

server
-
side scripting language

-
can
be embedded to a HTML
page

-
is
interpreted at the server

-
generates
HTML and can be embedded in
it

-
requires PHP extension
for website






<html>

<body>


<h1>Hello!</h1>


<?
php

echo "Hello World!"; ?>

</body>

</html>

PHP

MySQL

CREATE
TABLE

Users (



ID
INT NOT NULL AUTO_INCREMENT,



PRIMARY KEY(ID),



User
Name VARCHAR(20), ...)

INSERT

INTO Users (UserName, ...) VALUE (’aaa’, ...)

SELECT

* FROM ’Users’

Data fetching

<?
php


$con =
mysqli_connect
("
localhost
", "
mopsi
", "
pswd
", "database");


If (
mysqli_connect_errno
() ) {




echo "Failed to connect to
MySQL
";


}


$result =
mysqli_query
($con, "SELECT ID,
UserName

FROM Users");


while ( $row =
mysqli_fetch_array
($result) ) {




echo $row['ID'] . " " . $row['
UserName
'];




echo "<
br
/>";


}


mysqli_close
($con);

?>

Data fetching

Inserting data

<?php

$con = mysqli_connect("localhost", "mopsi", "pswd", "database");

if ( mysqli_connect_errno() ) {


echo "Failed to connect to MySQL";

}


mysqli_query($con, "INSERT INTO Users (ID, UserName,
Password) VALUES ('435', 'matti', '23#sg5')");


mysqli_close($con);

?>

JSON

A data
-
interchange format

Easy for humans to read and write

Easy for machines to parse and generate

A lightweight alternative to XML


JSON

Key
-
value pairs
:

{"request_type":"get_routes","user_id":"260","st
art_time":"1358426045","end_time":"1359030
846"}

key

value

request_type

get_routes

user_id

260

start_time

1358426045

end_time

1359030846

JSON

An array can contain multiple objects
:

{"users":[{
"ID":"14","UserName":"Juha"},{"ID":"15","Use
rName":"Jukka"},{"ID":"18","UserName":"karol
"}]}

[key]

ID

UserName

0

14

Juha

1

15

Jukka

2

18

karol

JSON in PHP

<?php


$con = mysqli_connect("localhost","uname","pword","paikkaprojekti");


$rows = array();



If ( mysqli_connect_errno() ) { echo "Failed to connect to MySQL"; }


$result = mysqli_query($con, "SELECT ID, UserName FROM Users");


while( $row = mysqli_fetch_assoc($result) ) {




$rows[] = $row;


}


print json_encode($rows);


mysqli_close($con);

?>


JSON in JavaScript




var

jsonInfo

= '{"
request_type
":"
init_mopsi
"}';


var

jsonString

=
initMopsi
(
jsonInfo
);


var

jsonObject

=
eval
("(" +
jsonString

+ ")");



if
(
jsonObject.latitude

!= "") {



g_latitude

=
jsonObject.latitude
[0];



g_longitude

=
jsonObject.longitude
[0];


}


Submit data from HTML to PHP

POST

is sent in the HTTP message body

POST /mopsi/register.php HTTP/1.1

Host: cs.uef.fi

uName=matti&pWord=asd#22d


GET

is sent in the URL of a GET request

/mopsi/register.php?uName=matti&pWord=asd#22d

POST vs GET

GET

POST

BACK button/Reload

Harmless

Data will be re
-
submitted

Bookmarked

Can be bookmarked

Cannot be bookmarked

Cached

Can be cached

Not cached

Restrictions on data length

max URL length (2048
characters)

no restrictions

Restrictions on data type

ASCII only

No restrictions (also
binary)

Security/visibility

Data is part of the URL
(visible)

A bit safer as params are
not stored in browser
history or in web server
logs

Submit data from HTML to PHP

<html>


<body>




<form id="
regForm
" action="
registration.php
" method="post">





Username: <input type="text" name="
uName
">





Password: <input type="text" name="
pWord
">





<input type="submit" value="submit">




</form>


</body>

</html>


In
registration.php

values are in:

$_POST[
uName
]

and
$_POST[
pWord
]

Submit data from HTML to PHP

<?
php


$
userName

= $_POST[
uName
];


$
passWord

= $_POST[
pWord
];




//TODO: insert credentials into DB



echo "Welcome $
userName
!";

?>


Part II

Client
-
side scripting


HTML


CSS


JavaScript (including
JQuery
)


HTML

A markup language for creating web pages to be
displayed in a web browser

Consists of tags enclosed in angle brackets (like
<html>)

The purpose of a web browser is to read HTML
documents and compose them into visible or
audible web pages.

The browser does not display the HTML tags, but
uses the tags to interpret the content of the
page.

HTML structure

<
html>


<
head>



<
title>Hello HTML</title>


</
head>


<
body>



<
div id=”content”>




<
p>Hello World!</p>



</
div>


</
body>

</html>

HTML tags

<
a
href
="http://www.example.com/">Link
-
text goes here</a>

<
a
href
="http://www.example.com
/">


<
img
src
="URL" alt="Alternate Text
">

</
a>

<
img

src
="URL" alt="Alternate Text" height="42" width="42">


<table border="1">


<
tr
>



<
th
>table header</
th
>



<
th
>table header</
th
>


</
tr
>


<
tr
>



<
td>table data</td>



<
td>table data</td>


</
tr
>

</table>


CSS

A style sheet language

Used to separate content from its presentation

Consists of a list of
rules


Selectors


Declarations

CSS example

body {

background
-
color: #d0e4fe;

font
-
family: "Sans";

font
-
size: 20px;

}

#
regForm

{

color: orange;

text
-
align: center;

}

JQuery

A
JavaScript

library


Designed to make
easier

to...


navigate in a document


select DOM elements


handle events


create animations



JavaScript vs JQuery

JavaScript:

var container = document.getElementById('container');


JQuery:

$('#container');


JQuery example

<!DOCTYPE html>

<html>



<head>




<link
rel
="
stylesheet
" type="text/
css
"
href
="style.css">






</
head
>




<body>






<div id="flip">Click to slide down panel</div>




<div id="panel">Hello world!</div>




</body>

</html>

JQuery example

#panel, #flip {


padding
: 5px;


text
-
align
: center;


background
-
color
: #e5eecc;


border
: solid 1px #c3c3c3;

}


#panel {


padding
: 50px;


display
: none;

}

JQuery example

<!DOCTYPE html>

<html>

<head>

<link
rel
="
stylesheet
" type="text/
css
"
href
="style.css">


<script
src
="jquery.js"></script>

<script>



$(document).ready(function(){




$("#flip").click(function()





$("#panel").
slideDown
("slow");



});

});

</script>

</head>

http://cs.uef.fi/paikka/Matti/dump/test.html

GoogleMaps API v3

API access to GoogleMaps

-
in web pages, in mobile apps

-
map tiles + overlays + events

-
geocoding

-
distances

-
directions



Free unless commercial use is intended


https://developers.google.com/maps/

GoogleMaps example

<html
lang
="en">


<
head>



<
meta
charset
="utf
-
8" />



<
title>Google Maps JavaScript API Example: Simple Map</title>



<
script
src

= "http://
maps.google.com/maps?file=api
&








amp;v
=2&amp;sensor=
false&amp
;









key=AIzaSyD4iE2xVSpkLLOXoyqT
-
RuPwURN3ddScAI
"





type
="text/
javascript
">



</
script>








GoogleMaps example


<script type="text/
javascript
">


var

map;




function initialize() {




if (
GBrowserIsCompatible
() ) {





map = new GMap2(
document.getElementById
("
map_canvas
"));





map.setCenter
(new
GLatLng
(37.4419,
-
122.1419), 13);





map.setUIToDefault
();




}



}



</script>



</head>




<body
onload
="initialize()"
onunload
="
GUnload
()">




<div id="
map_canvas
" style="width: 500px; height: 300px"></div>



</body>


</html>

GoogleMaps example

GoogleMaps markers

<script type="text/javascript">




function initialize() {




if ( GBrowserIsCompatible() )
{





var
map = new
GMap2(document.getElementById
("map_canvas"));





map.setCenter(new
GLatLng(37.4419,
-
122.1419), 13);







//
Add 10 markers to the map at random locations





var
bounds = map.getBounds();





var
southWest = bounds.getSouthWest();





var
northEast = bounds.getNorthEast();





var
lngSpan = northEast.lng()
-

southWest.lng();





var
latSpan = northEast.lat()
-

southWest.lat();










for
(var i = 0; i < 10; i++) {






var
latlng = new GLatLng
( southWest.lat
() + latSpan * Math.random(),








southWest.lng
() + lngSpan * Math.random
() );






map.addOverlay(new
GMarker(latlng));





}





}



}

</
script
>

</head>

<body onload="initialize()" onunload="GUnload()">


<
div id="map_canvas" style="width: 500px; height: 300px"></div>

</
body>

</html>

GoogleMaps markers

GoogleMaps

polylines

<
script type="text/javascript">


function
initialize() {



if
(GBrowserIsCompatible()) {




var
map = new GMap2(document.getElementById("map_canvas"));




map.setCenter(new
GLatLng(37.4419,
-
122.1419), 13);




var
polyline = new GPolyline([










new
GLatLng(37.4419,
-
122.1419),










new
GLatLng(37.4519,
-
122.1519)








],
"#ff0000", 10);




map.addOverlay(polyline
);




}


}



</
script>

</
head
>


<
body onload="initialize()" onunload="GUnload
()">


<
div id="map_canvas" style="width: 500px; height: 300px"></div
>



<
div id="message"></div>

</
body>

</html>

GoogleMaps polylines

GoogleMaps example

Cross browser compatibility

IE
causes problems:


different
properties of HTML
elements


differences
between versions


Cross browser compatibility

Developer tools

Firefox Web Console


Chrome
Developer
Tools


IE
Developer Console


not handy
, difficult to point out error
source



Firebug

An
add
-
on for
Firefox


Highly useful in web
development



Can be used for inspecting

-
CSS

-
HTML

-
JavaScript

-
Net requests


Firebug

Chrome Developer Tool

Useful links

HTML

http://www.w3schools.com/html/default.asp


CSS

http://www.w3schools.com/css/default.asp


JavaScript

http://www.w3schools.com/js/default.asp


Jquery

http://www.w3schools.com/jquery/default.asp


Google Maps API

https://developers.google.com/maps/documentation/javascript/


PHP

http
://www.php.net/manual/en/index.php