Linn's Note: 2009

Emerging Web Technologies Written Project

Hebat隊

Title: 印尼旅遊網站

Teacher: Dr. 梅興

Made By:

Robin 林坤建 / Eric 沈育生

495511648 / 496512625

資工三甲 / 資工二乙

Outline

The goal of the project
Used technology and skill
Some of the primary script explanations
Problem’s met
Future development

1. The goal of the project

To introduce Indonesia to fellow Taiwanese (at the time of this presentation), and also to the world, by using the means of internet webpage newest emerging technology.

2. Used technology and skill

· Html

· Xml

· Php

· MySql

· Ajax

· Javascript

· Css

· Scriptaculous

· Apache

· Flash

· Flex

· Youtube API

· Google map API with flash

· Dreamweaver

· Notepad

3. Some of the primary script explanations

For the Intro page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intro</title>
<style type="text/css">

</style>


<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>

<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}

// functions for the api calls
function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

</script>

</head>

<body onClick = "loadNewVideo()" >
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECE9D8" >
<tr>
<td align="center"><div>


<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript" >
// <![CDATA[
// allowScriptAccess must be set to allow the Javascript from one
// domain to access the swf on the youtube domain
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
// this sets the id of the object or embed tag to 'myytplayer'.
// You then use this id to access the swf and make calls to the player's API
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
//]]>
</script>
<br />

</div>
</div>
</td>
</tr>
<tr>
<td align="center">Press Anywhere to PLAY / REPLAY or <a href="home.html">Skip</a></td>
</tr>
<tr>
<td align="center">Made By : LinnRobin</td>
</tr>
</table>
</body>
</html>

For the flash map at “home” page

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*"
width="100%" height="100%" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Panel title="" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<mx:VBox width="20%" height="100%" paddingLeft="5" paddingTop="5">
<mx:HBox>
<mx:CheckBox
selected="true"
change="toggleCategory('restaurant')"/>
<mx:Label
text="Restaurants"/>
</mx:HBox>
<mx:HBox>
<mx:CheckBox
selected="true"
change="toggleCategory('bar')"/>
<mx:Label
text="Bars"/>
</mx:HBox>
</mx:VBox>
<mx:UIComponent id="mapHolder"
initialize="onHolderCreated(event);"
resize="onHolderResized(event)"
width="80%" height="100%"/>
</mx:HDividedBox>

</mx:Panel>
<mx:HBox width="100%">
<mx:Text
text="Press the button for full-screen mode"
width="100%"/>
<mx:Image
id="fullscreenButton"
useHandCursor="true"
buttonMode="true"
source="@Embed('fullscreen_1.png')"
click="toggleFullScreen()"/>
</mx:HBox>

<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapType;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.controls.ZoomControl;
import mx.controls.Alert;

private var map:Map;

[Embed(source="blue-dot.png")] private var blueIcon:Class;
[Embed(source="green-dot.png")] private var greenIcon:Class;
[Embed(source="fullscreen_1.png")] private var fullscreenIcon:Class;
[Embed(source="fullscreen_2.png")] private var fullscreen2Icon:Class;

private var categories:Object =
{ "restaurant": {
"color": 0xFF0000,
"markers": []},
"bar": {
"color": 0x0000FF,
"markers": []}
};

public function onHolderCreated(event:Event):void {
map = new Map();
map.key = "ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
mapHolder.addChild(map);
}

public function onHolderResized(event:Event):void {
map.setSize(new Point(mapHolder.width, mapHolder.height));
}

private function onMapReady(event:Event):void {
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.setCenter(new LatLng(-2.8114, 120.4766), 3);
map.addControl(new ZoomControl());

var xmlString:URLRequest = new URLRequest("phpsqlajax_genxml2.php");
var xmlLoader:URLLoader = new URLLoader(xmlString);
xmlLoader.addEventListener("complete", readXml);

this.map.addEventListener(MapMouseEvent.CLICK, onMapClick);
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
}

private function onMapClick(event:MapMouseEvent):void
{
var marker:Marker = new Marker(event.latLng);
var options:InfoWindowOptions = new InfoWindowOptions({
customContent: new InfoWindowTabbedComponent(marker),
customOffset: new Point(0, 10),
width: 300,
height: 150,
drawDefaultFrame: true
});
marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
marker.openInfoWindow(options);
});
this.map.addOverlay(marker);
marker.openInfoWindow(options);
}

private function fullScreenHandler(evt:FullScreenEvent):void {
if (evt.fullScreen) {
fullscreenButton.source = new fullscreen2Icon();
} else {
fullscreenButton.source = new fullscreenIcon();
}
}

private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}

public function readXml(event:Event):void{
var markersXML:XML = new XML(event.target.data);
var markers:XMLList = markersXML..marker;
var markersCount:int = markers.length();

for (var i:Number = 0; i < markersCount; i++) {
var marker:XML = markers[i];
var name:String = marker.@name;
var address:String = marker.@address;
var type:String = marker.@type;
var latlng:LatLng = new LatLng(marker.@lat, marker.@lng);
createMarker(latlng, name, address, type);
}
}

public function createMarker(latlng:LatLng, name:String, address:String, type:String):void {
var markerOptions:MarkerOptions = new MarkerOptions({});
var fillStyle:FillStyle = new FillStyle({color: categories[type].color});
markerOptions.fillStyle = fillStyle;

var marker:Marker = new Marker(latlng, markerOptions);
var html:String = "<b>" + name + "</b> <br/>" + address;
marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({contentHTML:html}));
});
categories[type].markers.push(marker);
map.addOverlay(marker);

}

private function toggleCategory(type:String):void {
for (var i:Number = 0; i < categories[type].markers.length; i++) {
var marker:Marker = categories[type].markers[i];
if (!marker.visible) {
marker.visible = true;
} else {
marker.visible = false;
}
}
}

]]>
</mx:Script>
</mx:Application>

And…

package {

import com.google.maps.overlays.Marker;

import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;

import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.controls.Label;
import mx.controls.TextInput;
import mx.core.UIComponent;

/**
* InfoWindowSprite consists of several ellipses arranged in a 'thought bubble'
* manner, the largest of which contains an embedded image and a circular
* close button.
* It can dispatch an Event instance (type: "close"), which the user can listen
* for and use to call map.closeInfoWindow();
*/
public class InfoWindowTabbedComponent extends UIComponent {

public var textInputName:TextInput;
public var textInputAddress:TextInput;
public var comboBoxType:ComboBox;
public var marker:Marker;

public function InfoWindowTabbedComponent(m:Marker) {
marker = m;

var panel:Box = new Box();
panel.width = 290;
panel.height = 120;

var hbox:HBox = new HBox();
var labelName:Label = new Label();
labelName.text = "Name: ";
labelName.width = 70;
textInputName = new TextInput();
textInputName.id = "name";
textInputName.percentWidth = 100;
textInputName.text = "Insert Name";

hbox.addChild(labelName);
hbox.addChild(textInputName);

var hbox3:HBox = new HBox();
var labelAddress:Label = new Label();
labelAddress.text = "Comment: ";
labelAddress.width = 70;
textInputAddress = new TextInput();
textInputAddress.id = "address";
textInputAddress.percentWidth = 100;
textInputAddress.text = "Insert Comment";

hbox3.addChild(labelAddress);
hbox3.addChild(textInputAddress);

var hbox2:HBox = new HBox();
var labelType:Label = new Label();
labelType.text = "Type: ";
labelType.width = 70;
comboBoxType = new ComboBox();
comboBoxType.id = "type";
comboBoxType.dataProvider = new ArrayCollection(
[ {label:"bar", data:"bar"},
{label:"restaurant", data:"restaurant"}]);
hbox2.addChild(labelType);
hbox2.addChild(comboBoxType);

var button:Button = new Button();
button.label = "Submit";
button.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
saveData();
});

panel.addChild(hbox);
panel.addChild(hbox3);
panel.addChild(hbox2);
panel.addChild(button);
addChild(panel);

}

public function saveData():void {
var name:String = textInputName.text;
var address:String = textInputAddress.text;
var type:String = comboBoxType.text;
var lat:Number = marker.getLatLng().lat();
var lng:Number = marker.getLatLng().lng();
var urlRequest:URLRequest = new URLRequest("phpsqlinfo_addrow.php");
urlRequest.data = "name=" + name + "&address=" + address + "&type=" + type + "&lat=" + lat + "&lng=" + lng;
urlRequest.method = URLRequestMethod.GET;
var urlLoader:URLLoader = new URLLoader(urlRequest);
urlLoader.addEventListener("complete", function(e:Event):void {
if (urlLoader.data.length <= 1) {
Alert.show("Successfully added!");
marker.closeInfoWindow();
} else {
Alert.show("There was an error adding the data :(");
}
});
}

}

}

For showing the flash map at “home” page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div id="header">

<div id = "titles1">
<h1>Traveling Indonesia - Home</h1>
</div>
</div>
<div id="navigation"><ul>
<li><a href="intro.html">Intro</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="cities.html">Cities</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="links.html">Links</a></li>
</ul></div>
<div id="content">
<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="./maps1.swf">
<param name="quality" value="high">
<param name="flashVars" value="key=ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg">
<embed
width="800px"
height="600px"
src="./maps1.swf"
quality="high"
flashVars="ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div></div>
<div id="footer">Made By : LinnRobin</div>
</div>
</body>
</html>

CSS used

@charset "utf-8";
#wrapper #header {
width: 100%;
}

#wrapper #header h1 {
text-indent: -999999px;
font-size: 1px;
}
#wrapper #header #titles1 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}
#wrapper #header #titles2 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: -400px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}
#wrapper #header #titles3 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: -800px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}

#wrapper #navigation {
width: 100%;
margin: 0px;
padding: 0px;
height: 40px;
}
#wrapper #navigation ul {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
list-style-type: none;
float: none;
clear: none;
width: 100%;
height: 100%;
background-repeat: no-repeat;
text-align: center;
}
#wrapper #navigation li {
margin-bottom: 10px;
height: 40px;
width: 100px;
float: left;
clear: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-repeat: no-repeat;
}
#wrapper #navigation a {
display: block;
height: 30px;
width: 100px;
background-image: url(../image/button.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-top: 10px;
}
#wrapper #navigation a {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

#wrapper #navigation a:link {
color: #000000;
text-decoration: none;
}
#wrapper #navigation a:hover {

color: #FF0000;
text-decoration: none;
background-image: url(../image/button.jpg);
background-repeat: no-repeat;
background-position: 0px -40px;
}
#wrapper #navigation a:visited {
text-decoration: none;
}
#wrapper #navigation a:active {
text-decoration: none;
}
#wrapper #content {
width: 100%;
text-align: center;
vertical-align: middle;
float: left;
}
#wrapper #footer {
text-align: center;
float: left;
width: 100%;
}
#wrapper {
width: 100%;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

For the cities page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cities</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>

<link href="../css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../js/lightbox.js" type="text/javascript"></script>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "titles2">
<h1>Traveling Indonesia - Cities</h1>
</div>
</div>
<div id="navigation"><ul>
<li><a href="intro.html">Intro</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="cities.html">Cities</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="links.html">Links</a></li>
</ul></div>
<div id="content">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="16%" align="left" valign="top"><div spry:region="ds1">
<table>
<tr>
<th>City Name:</th>
</tr>
<tr spry:repeat="ds1" spry:setrow="ds1">
<td>{name}</td>
</tr>
</table>
</div></td>
<td width="84%"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><strong>Description</strong>:</td>
</tr>
<tr>
<td align="left" valign="top"><div spry:detailregion="ds1">{Desc}</div></td>
</tr>
</table></td>
</tr>
<tr>
<td width="16%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Rating:</strong></td>
</tr>
<tr>
<td> 
<div spry:detailregion="ds1"><iframe src="{ds1::rater}" width="300" height="200" scrolling="auto" frameborder="0"></iframe></div></td>
</tr>
</table></td>
<td><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" ><strong>Photos:</strong></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="20%"><div spry:detailregion="ds1"><a href="{ds1::img}"rel="lightbox[roadtrip]"><img name="" src="{img}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img2}"rel="lightbox[roadtrip]"><img name="" src="{img2}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img3}"rel="lightbox[roadtrip]"><img name="" src="{img3}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img4}"rel="lightbox[roadtrip]"><img name="" src="{img4}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img5}"rel="lightbox[roadtrip]"><img name="" src="{img5}" width="160" height="240" alt="" /></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="footer">Made By : LinnRobin</div>
</div>
</body>
</html>

4. Problem’s met

Google maps API with flash is a new technology
Wrong decision of programming tools
Php and Mysql + google maps API with flash
Publishing from local to the internet
Free web hosting without advertisement are hard to find

5. Future development

Member functions
Calendar events
Hot Spot
Flickr, Twitter, Facebook Integration
Forum development
Forum and map integration

Linn's Note

Wednesday, June 17, 2009

Emerging Web Technologies Written Project

Contents

Archives

Followers

IBM Lotus MashUp

Calendar