43
Web development 8.4.2013

Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Embed Size (px)

Citation preview

Page 1: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Web development

8.4.2013

Page 2: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Web development

Page 3: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Content

Part I:Server-side scripting

Part II:Client-side scripting

Page 4: 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

Page 5: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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>

Page 6: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

PHP

Page 7: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

MySQLCREATE TABLE Users (

ID INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(ID), UserName VARCHAR(20), ...)

INSERT INTO Users (UserName, ...) VALUE (’aaa’, ...) SELECT * FROM ’Users’

Page 8: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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);

?>

Page 9: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Data fetching

Page 10: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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);?>

Page 11: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JSON

A data-interchange format

Easy for humans to read and write

Easy for machines to parse and generate

A lightweight alternative to XML

Page 12: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JSON

Key-value pairs:

{"request_type":"get_routes","user_id":"260","start_time":"1358426045","end_time":"1359030846"}

key value

request_type

get_routes

user_id 260

start_time 1358426045

end_time 1359030846

Page 13: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JSON

An array can contain multiple objects:

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

[key] ID UserName

0 14 Juha

1 15 Jukka

2 18 karol

Page 14: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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);

?>

Page 15: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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]; }

Page 16: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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

Page 17: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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

Page 18: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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]

Page 19: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Submit data from HTML to PHP

<?php $userName = $_POST[uName]; $passWord = $_POST[pWord];

//TODO: insert credentials into DB

echo "Welcome $userName!";?>

Page 20: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Part IIClient-side scripting

– HTML– CSS– JavaScript (including JQuery)

Page 21: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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.

Page 22: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

HTMLBasic website structure:

<html>

<head>

<title>Hello HTML</title>

</head>

<body>

<div id=”content”>

<p>Hello World!</p>

</div>

</body>

</html>

Page 23: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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

Image-link: <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>

Page 24: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

CSS

A style sheet language

Used to separate content from its presentation

Consists of a list of rules– Selectors

– Declarations

Page 25: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

CSS examplebody {

background-color: #d0e4fe;

font-family: "Sans";

font-size: 20px;

}

#regForm {

color: orange;

text-align: center;

}

Page 26: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JQuery

A JavaScript libraryDesigned to make easier to...

– navigate in a document

– select DOM elements

– handle events

– create animations

Page 27: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JavaScript vs JQuery

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

JQuery:$('#container');

Page 28: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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>

Page 29: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

JQuery example

#panel, #flip {padding: 5px;text-align: center;background-color: #e5eecc;border: solid 1px #c3c3c3;

}#panel {

padding: 50px;display: none;

}

Page 30: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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

Page 31: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

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/

Page 32: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps example<html lang="en"> <head> <meta charset="utf-8" /> <title>Google Maps JavaScript API Example: Simple Map</title> <script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"></script> <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>

Page 33: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps example

Page 34: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps markers<html lang="en"> <head> <meta charset="utf-8" /> <title>Google Maps JavaScript API Example: Simple Markers</title> <script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"></script> <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>

Page 35: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps markers

Page 36: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps polylines<html lang="en"> <head> <meta charset="utf-8" /> <title>Google Maps JavaScript API Example: Simple Polyline</title> <script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"></script> <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>

Page 37: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps polylines

Page 38: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

GoogleMaps example

Page 39: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Cross browser compatibility

Market share: Chrome (41%), IE (30%), Firefox (21%), Safari (9%), Opera (1%)

IE causes problems: different properties of HTML elements, differences between versions

Page 40: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Developer tools

Firefox, Chrome Developer Tool, IE Developer Console (not very handy, difficult to point out error source)

An add-on for FirefoxHighly useful in web development Can be used for inspecting- CSS- HTML- JavaScript- Net requests

Page 41: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Firebug

Page 42: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Chrome Developer Tool

Page 43: Web development 8.4.2013. Web development Content Part I: Server-side scripting Part II: Client-side scripting

Useful linksHTMLhttp://www.w3schools.com/html/default.asp

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

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

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

Google Maps APIhttps://developers.google.com/maps/documentation/javascript/

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