Creating Databases Example using Google Maps API + file creation. Dollar sign problem. Classwork/Homework: [catch up]. Work on final project.

Slides:



Advertisements
Similar presentations
JavaScript I. JavaScript is an object oriented programming language used to add interactivity to web pages. Different from Java, even though bears some.
Advertisements

Java Script Session1 INTRODUCTION.
Introduction to PHP MIS 3501, Fall 2014 Jeremy Shafer
1 Chapter 5 – Handling HTML Controls in Web Pages spring into PHP 5 by Steven Holzner Slides were developed by Jack Davis College of Information Science.
Google Maps API. Today’s Objectives Get Google Maps working: desktop + mobile Get clustering data complete, data onto a map.
Multiple Tiers in Action
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
PHP : Hypertext Preprocessor
Additional Topics. Tutorial #9 Review – Forms Forms Legend and fieldset Fields Text Password Radio buttons, check box, text area, select lists Buttons.
Programming Games Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video elements). Geolocation. Classwork/Homework: Catch-up.
Creating databases for web applications Play quizzes Testing process regular expressions: form validation PHP coding handling forms Homework: regular expressions.
MySQL + PHP.  Introduction Before you actually start building your database scripts, you must have a database to place information into and read it from.
Programming games Examples: Audio example. Google Maps api. Classwork: show more complex video. Classwork/Homework: Find place (lat and long) for basic.
Google Maps API. Static Maps send an HTTP GET request receive an image (PNG, GIF, JPEG) no javascript needed encode params in URL example:
1 PHP and MySQL. 2 Topics  Querying Data with PHP  User-Driven Querying  Writing Data with PHP and MySQL PHP and MySQL.
NMED 3850 A Advanced Online Design January 26, 2010 V. Mahadevan.
School of Computing and Information Systems CS 371 Web Application Programming PHP - Basics Serving up web pages.
A little PHP. Enter the simple HTML code seen below.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Programming Games Google Map API examples. CSS. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
How data rule the world Kristoffer Benjaminsson CTO.
CSC 2720 Building Web Applications Server-side Scripting with PHP.
Programming Games Reprise: storage, datatypes. Geolocation/Google API example. Work session Homework: [Catch up. Upload work. Post proposal.] Work on your.
Creating User Interfaces Recap HTML/HTML5 JavaScript features Homework: keep working on user observation studies. Review JavaScript.
Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch.
Creating Databases applications for the Web Basic HTML review, forms Preview: Server side vs client side Flash HW: Review HTML forms and FLASH examples.
Strings, output, quotes and comments
Programming Games [Show Google Maps project.] Demonstrate more examples. Classwork/Homework: Decide on final project. Post proposal to moodle.
JavaScript - Basic Concepts Prepared and Presented by Hienvinh Nguyen, Afshin Tiraie.
Introduction to Programming JScript Six Scripting functions Discuss functions Password Example.
Google HOW DO I SUBMIT MY ASSIGNMENT?. To join a classroom, your teacher will give you a code.
Creating Interfaces Show form validation examples, Hangman. HTML5 with Google Maps API. Add in localStorage. Design pitfalls. Homework: Make proposal for.
Static Locations, Dynamic Content.
Creating Databases for Web applications Server side vs client side PHP basics Homework: Get your own versions of sending working: both html and Flash!
 Previous lessons have focused on client-side scripts  Programs embedded in the page’s HTML code  Can also execute scripts on the server  Server-side.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Windows 7 WampServer 2.1 MySQL PHP 5.3 Script Apache Server User Record or Select Media Upload to Internet Return URL Forward URL Create.
1) PHP – Personal Home Page Scripting Language 2) JavaScript.
Creating Web Documents: JavaScript Ftp / file management: review Introduction to JavaScript Sources Homework: start review for midterm, work on Project.
Display Page (HTML/CSS)
Session 2: PHP Language Basics iNET Academy Open Source Web Development.
If you don’t have Google Earth downloaded already, you can go to to get it.
Chapter 2 The Web and Business Applications. Agenda Cell referencing Fill handle Enter a formula using pointing method Comment Formatting Date arithmetic.
CGS 3066: Web Programming and Design Spring 2016 PHP.
A little PHP. Enter the simple HTML code seen below.
Google Maps API. Contents: 1. Google Maps API Key 2. Create a Basic Google Map 3. Google Maps Overlays 4. Google Maps Events 5. Google Maps Controls 6.
1 Bus Tracker A Google Maps Application. 22 Objectives You will be able to Add an icon to a map created with the Google Maps API. Use Ajax techniques.
PHP using MySQL Database for Web Development (part II)
Creating Databases Example using Google Maps API + file creation. Dollar sign problem. Classwork/Homework: [catch up]. Work on final project.
A little PHP.
Introduction to Dynamic Web Programming
Creating Databases Local storage. join & split
CS 371 Web Application Programming
PHP (PHP: Hypertext Preprocessor)
Intro to PHP & Variables
JavaScript: Array, Loop, Data File
Intro to PHP at Winthrop
JavaScript an introduction.
Your 1st Programming Assignment
PHP: Security issues FdSc Module 109 Server side scripting and
WEB PROGRAMMING JavaScript.
Step 1 Click on VM icon.
Tutorial 10: Programming with javascript
Catchup. Work on project.
Creating User Interfaces
PHP Forms and Databases.
Web Programming Anselm Spoerri PhD (MIT) Rutgers University
Introduction to Web programming
ASSETS, SNIPPETS & COMPONENTS
Presentation transcript:

Creating Databases Example using Google Maps API + file creation. Dollar sign problem. Classwork/Homework: [catch up]. Work on final project

Google Maps example Challenge: create list of positions defining polygon(s) for a quiz (or something else) Solution: – Create.html and.php pair of scripts to create file – Create drawing program using the file created. Recreates inserting name of file Note: student's project will still need work on file, namely combining multiple files into one.

Scripts eyer/createFileOfLocations.html eyer/createFileOfLocations.html This creates a file with the name specified by the user. The following file has a file name hard coded in it: eyer/drawpolygon2.html eyer/drawpolygon2.html

About the html file Mouse clicks on map add to an array A form invokes a client side function "sendit()" using onsubmit and then the server side writeoutlatlongs.php using action The form also requests a name for the file.

Html script var map; var redx = "rx1.png"; function init() { blatlng = new google.maps.LatLng( , ); myOptions = { zoom: 17, center: blatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById("place"), myOptions); listener = google.maps.event.addListener(map, 'click', function(event) { checkit(event.latLng);}); }

Html script, cont. var elements = []; var markersArray = []; function sendit() { var data = elements.join(':'); //alert("in sendit, data is "+data); document.f.positions.value = data; return false; } function checkit(clatlng) { lastmarker = clatlng; marker = new google.maps.Marker({ position: clatlng, icon: redx, map: map }); markersArray.push(marker); pos = "["+String(clatlng.lat())+", "+String(clatlng.lng())+"]"; elements.push(pos); //alert("position is "+pos+" and number of elements is "+elements.length); }

Html script, cont.: body Mark polygon When done inserting points, accept or enter name of area to be used as file name and click on Done. Your name for the polygon

php script <?php $newname = $_GET['subject']; $positions = $_GET['positions']; $filen ="uploads/". $newname. ".js" ; $open = fopen($filen,"w"); print (" Saving positions in $filen "); //explode into array $positions = explode(":",$positions); //now write out each pair as line in file $open = fopen($filen,"w");

php script, cont. if ($open) { fwrite($open,"var positions = [ \n"); for($i=0;$i<count($positions)-1;$i++) { fwrite($open,$positions[$i].",\n"); } fwrite($open,$positions[$i]."\n "); // omit comma after last element fwrite($open,"]; \n"); fclose($open); } else { print (" Unable to write updated file. "); } ?>

myplace.js var positions = [ [ , ], [ , ], [ , ], [ , ], [ , ] ];

Draw script You can view source. on2.html on2.html Makes use of Google Maps API google.maps.Polygon and google.maps.Infowindow Robust system could include facility for editing positions.

What if… CTS assigned you a password with a dollar sign in it. Two solutions (say password was abc$def – Use single quotes: $password = ‘abc$def’ – Escape character: $password = “abc\$def’ Can use this in other situations. eyer/dollartest.php eyer/dollartest.php

<?php $stringWdollar = 'abc$def'; print ("string with single quotes ".$stringWdollar); print(" "); $stringWdollarescaped = "abc\$def"; print ("string with dollar sign escaped ".$stringWdollarescaped); print (" "); $stringWdollarescapedsinglequotes = 'abc\$def'; print ("string with dollar sign escaped, single quotes ".$stringWdollarescapedsinglequotes); print (" "); $stringWdollarplain = "abc$def"; print ("string with dollar, double quotes ".$stringWdollarplain); ?>

Classwork/homework [Catch up with postings, showing work.] [Evaluation surveys.] Prepare to show something on final project.