Web development

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 Hello!

PHP

MySQL CREATE 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 " "; } 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":" ","end_time":" "} keyvalue request_typeget_routes user_id260 start_time end_time

JSON An array can contain multiple objects: {"users":[{ "ID":"14","UserName":"Juha"},{"ID":"15","Use rName":"Jukka"},{"ID":"18","UserName":"karol "}]} [key]IDUserName 014Juha 115Jukka 218karol

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 GETPOST BACK button/ReloadHarmlessData will be re-submitted BookmarkedCan be bookmarkedCannot be bookmarked CachedCan be cachedNot cached Restrictions on data lengthmax URL length (2048 characters) no restrictions Restrictions on data typeASCII onlyNo restrictions (also binary) Security/visibilityData 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 Username: Password: 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 ) 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 Basic website structure: Hello HTML Hello World!

HTML Useful tags: Ordinary link: Link-text goes here Image-link: table header table data

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 Click to slide down panel Hello world!

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

JQuery example $(document).ready(function(){ $("#flip").click(function() $("#panel").slideDown("slow"); });

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

GoogleMaps example Google Maps JavaScript API Example: Simple Map <script src="//maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyD4iE2xV SpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"> var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng( , ), 13); map.setUIToDefault(); }

GoogleMaps example

GoogleMaps markers Google Maps JavaScript API Example: Simple Markers <script src="//maps.google.com/maps?file=api&v=2&key=AIzaSyD4iE2xVSpkLLOXoyqT- RuPwURN3ddScAI" type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng( , ), 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)); }

GoogleMaps markers

GoogleMaps polylines Google Maps JavaScript API Example: Simple Polyline <script src="//maps.google.com/maps?file=api&v=2&key=AIzaSyD4iE2xVSp kLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng( , ), 13); var polyline = new GPolyline([ new GLatLng( , ), new GLatLng( , ) ], "#ff0000", 10); map.addOverlay(polyline); }

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 Firefox Highly useful in web development Can be used for inspecting -CSS -HTML -JavaScript -Net requests

Firebug

Chrome Developer Tool

Useful links HTML CSS JavaScript Jquery Google Maps API PHP