43
Web development 8.4.2013
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
MySQLCREATE TABLE Users (
ID INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(ID), UserName 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","start_time":"1358426045","end_time":"1359030846"}
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","UserName":"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 IIClient-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.
HTMLBasic website structure:
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<div id=”content”>
<p>Hello World!</p>
</div>
</body>
</html>
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>
CSS
A style sheet language
Used to separate content from its presentation
Consists of a list of rules– Selectors
– Declarations
CSS examplebody {
background-color: #d0e4fe;
font-family: "Sans";
font-size: 20px;
}
#regForm {
color: orange;
text-align: center;
}
JQuery
A JavaScript libraryDesigned 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="//maps.google.com/maps?file=api&v=2&sensor=false&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>
GoogleMaps example
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&v=2&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>
GoogleMaps markers
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&v=2&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>
GoogleMaps polylines
GoogleMaps example
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
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
Firebug
Chrome Developer Tool
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
