1 / 43

Web development

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. - server-side scripting language - can be embedded to a HTML page - is interpreted at the server

agrata
Download Presentation

Web development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web development 8.4.2013

  2. Web development

  3. Content Part I: Server-side scripting Part II: Client-side scripting

  4. Part I Server-side scripting • PHP • MySQL • JSON

  5. - 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 PHP <html> <body> <h1>Hello!</h1> <?php echo "Hello World!"; ?> </body></html>

  6. PHP

  7. MySQL CREATE TABLEUsers ( ID INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(ID), UserName VARCHAR(20), ...) INSERT INTO Users (UserName, ...) VALUE (’aaa’, ...) SELECT * FROM ’Users’

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

  9. Data fetching

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

  11. JSON A data-interchange format Easy for humans to read and write Easy for machines to parse and generate A lightweight alternative to XML

  12. JSON Key-value pairs: {"request_type":"get_routes","user_id":"260","start_time":"1358426045","end_time":"1359030846"}

  13. JSON An array can contain multiple objects: {"users":[{ "ID":"14","UserName":"Juha"},{"ID":"15","UserName":"Jukka"},{"ID":"18","UserName":"karol"}]}

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

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

  16. 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

  17. POST vs GET

  18. 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]

  19. Submit data from HTML to PHP <?php $userName = $_POST[uName]; $passWord = $_POST[pWord]; //TODO: insert credentials into DB echo "Welcome $userName!"; ?>

  20. Part II Client-side scripting • HTML • CSS • JavaScript (including JQuery)

  21. 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.

  22. HTML Basic website structure: <html> <head> <title>Hello HTML</title> </head> <body> <div id=”content”> <p>Hello World!</p> </div> </body> </html>

  23. HTML Useful 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>

  24. CSS A style sheet language Used to separate content from its presentation Consists of a list of rules • Selectors • Declarations

  25. CSS example body { background-color: #d0e4fe; font-family: "Sans"; font-size: 20px; } #regForm { color: orange; text-align: center; }

  26. JQuery A JavaScript library Designed to make easier to... • navigate in a document • select DOM elements • handle events • create animations

  27. JavaScript vs JQuery JavaScript: var container = document.getElementById('container'); JQuery: $('#container');

  28. 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>

  29. JQuery example #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; }

  30. 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

  31. 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/

  32. 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>

  33. GoogleMaps example

  34. 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>

  35. GoogleMaps markers

  36. 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>

  37. GoogleMaps polylines

  38. GoogleMaps example

  39. 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

  40. Developer tools Firefox, Chrome Developer Tool, IE Developer Console (not very handy, difficult to point out error source) An add-on for Firefox Highly useful in web development Can be used for inspecting • CSS • HTML • JavaScript • Net requests

  41. Firebug

  42. Chrome Developer Tool

  43. 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

More Related