PDA

View Full Version : simple perl-cgi app on apache



OneDreamCloser
14 Apr 2011, 01:43 AM
hello all,

this is my 1st app that will run on an apache server and it is based on google maps. the problem is that while i can open the .html file (together with a bit of javascript code) and see it running …
i cannot do that when i have a .perl-cgi script instead of the .html file.
i use the default apache server install on mac os x, the root directory i use for the .chi script is the default one "/Library/WebServer/CGI-Executables" (please note that the Hello World chi script works just fine).
so when i type "http://localhost/cgi-bin/demo.cgi" i am getting the following:
Failed to load resource: the server responded with a status of 404 (Not Found) ---> demo.js
Failed to load resource: the server responded with a status of 404 (Not Found) ---> favicon.ico
and the "/var/log/apache2/error_log" complains only for the favicon thing.

attached is the simple app i am using, so if you could tell me if you are able to run it and how you did it, it would very informative.
i am in a desperate need to make this work, so i would appreciate your help.

thank you.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
label { font-size:9px; text-align:center; color:#222; text-shadow:0 0 5px #fff; font-family:Helvetica, Arial, sans-serif; }
#map_canvas { height: 100% }
</style>
<title>demo</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/Library/WebServer/CGI-Executables/demo.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

#!/usr/bin/perl -wT

use strict ;
use warnings ;
use CGI ;
use CGI::Ajax ;


print "Content-type: text/html \n\n" ;
my $html = <<HTML ;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
label { font-size:9px; text-align:center; color:#222; text-shadow:0 0 5px #fff; font-family:Helvetica, Arial, sans-serif; }
#map_canvas { height: 100% }
</style>
<title>demo</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

HTML
print $html ;


(
function()
{
var infowindow ;

window.onload = function()
{
/* Google Maps options set. */
var options =
{
zoom : 12,
center : new google.maps.LatLng(37.99466403683962, 23.771860599517822),
mapTypeControlOptions : { mapTypeIds: [google.maps.MapTypeId.ROADMAP, "minimal"] },
disableDefaultUI : true,
mapTypeControl : false,
navigationControl : true,
navigationControlOptions : {style: google.maps.NavigationControlStyle.ZOOM_PAN},
scaleControl : false,
keyboardShortcuts : false,
disableDoubleClickZoom : false,
draggable : true,
scrollwheel : false,
streetViewControl : false,
noClear : false,
backgroundColor : "#FFFFFF"
} ;
/* Add transparency to the map. */
var stylez = [{featureType: "all", elementType: "all", stylers: [{lightness: 50}]}] ;
var map = new google.maps.Map(document.getElementById("map_canvas"), options) ;
var styledMapOptions = { name: "minimal" } ;
var minimalMapType = new google.maps.StyledMapType(stylez, styledMapOptions) ;
map.mapTypes.set("minimal", minimalMapType) ;
map.setMapTypeId("minimal") ;
} ;
}
)() ;