Web development 8 4 2013 Web development Content
Web development 8. 4. 2013
Web development
Content Part I: Server-side scripting Part II: Client-side scripting
Part I Server-side scripting – PHP – My. SQL – 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> <h 1>Hello!</h 1> <? php echo "Hello World!"; ? > </body> </html>
PHP
My. SQL CREATE TABLE Users ( ID INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(ID), User. Name VARCHAR(20), . . . ) INSERT INTO Users (User. Name, . . . ) VALUE (’aaa’, . . . ) SELECT * FROM ’Users’
Data fetching <? php $con = mysqli_connect("localhost", "mopsi", "pswd", "database"); If ( mysqli_connect_errno() ) { echo "Failed to connect to My. SQL"; } $result = mysqli_query($con, "SELECT ID, User. Name FROM Users"); while ( $row = mysqli_fetch_array($result) ) { echo $row['ID']. " ". $row['User. Name']; 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 My. SQL"; } mysqli_query($con, "INSERT INTO Users (ID, User. Name, Password) VALUES ('435', 'matti', '23#sg 5')"); ? > 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", "User. Name": "Juha"}, {"ID": "15", "Use r. Name": "Jukka"}, {"ID": "18", "User. Name": "karol "}]} [key] ID User. Name 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 My. SQL"; } $result = mysqli_query($con, "SELECT ID, User. Name FROM Users"); while( $row = mysqli_fetch_assoc($result) ) { $rows[] = $row; } print json_encode($rows); mysqli_close($con); ? >
JSON in Java. Script var json. Info = '{"request_type": "init_mopsi"}'; var json. String = init. Mopsi(json. Info); var json. Object = eval("(" + json. String + ")"); if (json. Object. latitude != "") { g_latitude = json. Object. latitude[0]; g_longitude = json. Object. 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 u. Name=matti&p. Word=asd#22 d GET is sent in the URL of a GET request /mopsi/register. php? u. Name=matti&p. Word=asd#22 d
POST vs 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="reg. Form" action="registration. php" method="post"> Username: <input type="text" name="u. Name"> Password: <input type="text" name="p. Word"> <input type="submit" value="submit"> </form> </body> </html> In registration. php values are in: $_POST[u. Name] and $_POST[p. Word]
![Submit data from HTML to PHP <? php $user. Name = $_POST[u. Name]; $pass.](http://slidetodoc.com/presentation_image_h2/acd0505f80546623cb318dcfd1c7f00d/image-19.jpg "Submit data from HTML to PHP <? php $user. Name = $_POST[u. Name]; $pass.")
Submit data from HTML to PHP <? php $user. Name = $_POST[u. Name]; $pass. Word = $_POST[p. Word]; //TODO: insert credentials into DB ? > echo "Welcome $user. Name!";
Part II Client-side scripting – HTML – CSS – Java. Script (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> </tr> <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: #d 0 e 4 fe; font-family: "Sans"; font-size: 20 px; } #reg. Form { color: orange; text-align: center; }
JQuery A Java. Script library Designed to make easier to. . . – – navigate in a document select DOM elements handle events create animations
Java. Script vs JQuery Java. Script: var container = document. get. Element. By. Id('container'); JQuery: $('#container');
JQuery example <!DOCTYPE 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: 5 px; text-align: center; background-color: #e 5 eecc; border: solid 1 px #c 3 c 3 c 3; } #panel { padding: 50 px; display: none; }
JQuery example <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="style. css"> <script src="jquery. js"></script> <script> $(document). ready(function(){ $("#flip"). click(function() $("#panel"). slide. Down("slow"); }); </script> </head> http: //cs. uef. fi/paikka/Matti/dump/test. html
Google. Maps API v 3 API access to Google. Maps - in web pages, in mobile apps - map tiles + overlays + events - geocoding - distances - directions Free unless commercial use is intended https: //developers. google. com/maps/
Google. Maps example <html lang="en"> <head> <meta charset="utf-8" /> <title>Google Maps Java. Script API Example: Simple Map</title> <script src = "http: //maps. google. com/maps? file=api& amp; v=2& sensor=false& key=AIza. Sy. D 4 i. E 2 x. VSpk. LLOXoyq. T-Ru. Pw. URN 3 dd. Sc. AI" type="text/javascript"> </script>
Google. Maps example <script type="text/javascript"> var map; function initialize() { if ( GBrowser. Is. Compatible() ) { map = new GMap 2(document. get. Element. By. Id("map_canvas")); map. set. Center(new GLat. Lng(37. 4419, -122. 1419), 13); map. set. UITo. Default(); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500 px; height: 300 px"></div> </body> </html>
Google. Maps example
Google. Maps markers <script type="text/javascript"> function initialize() { if ( GBrowser. Is. Compatible() ) { var map = new GMap 2(document. get. Element. By. Id("map_canvas")); map. set. Center(new GLat. Lng(37. 4419, -122. 1419), 13); // Add 10 markers to the map at random locations var bounds = map. get. Bounds(); var south. West = bounds. get. South. West(); var north. East = bounds. get. North. East(); var lng. Span = north. East. lng() - south. West. lng(); var lat. Span = north. East. lat() - south. West. lat(); } for (var i = 0; i < 10; i++) { var latlng = new GLat. Lng( south. West. lat() + lat. Span * Math. random(), south. West. lng() + lng. Span * Math. random() ); map. add. Overlay(new GMarker(latlng)); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500 px; height: 300 px"></div> </body> </html>
Google. Maps markers
Google. Maps polylines <script type="text/javascript"> function initialize() { if (GBrowser. Is. Compatible()) { var map = new GMap 2(document. get. Element. By. Id("map_canvas")); map. set. Center(new GLat. Lng(37. 4419, -122. 1419), 13); var polyline = new GPolyline([ new GLat. Lng(37. 4419, -122. 1419), new GLat. Lng(37. 4519, -122. 1519) ], "#ff 0000", 10); map. add. Overlay(polyline); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500 px; height: 300 px"></div> <div id="message"></div> </body> </html>
Google. Maps polylines
Google. Maps 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 - Java. Script - Net requests
Firebug
Chrome Developer Tool
Useful links HTML http: //www. w 3 schools. com/html/default. asp CSS http: //www. w 3 schools. com/css/default. asp Java. Script http: //www. w 3 schools. com/js/default. asp Jquery http: //www. w 3 schools. com/jquery/default. asp Google Maps API https: //developers. google. com/maps/documentation/javascript/ PHP http: //www. php. net/manual/en/index. php
- Slides: 46
