I am using google maps which has a basic form for the user to fill in his details. On clicking submit the form details are suppose to get stored in the MySQL table that I have created.
I am using apache that is already pre-installed on my mac. I have downloaded MySQL and its running fine. I have created the table with the required columns in it. I am using PyCharm Community Edition for running my python scripts.
My map.html file (the one which has the google map with the form) is running fine on localhost. However, on clicking submit I get the following error : Not Found The requested URL /Library/WebServer/CGI-Executables/processing.py was not found on this server.
My map.html file is in Library/WebServer/Documents/
My processing.py file (the python script that is used for processing the form data and inserting into the MySQL table) is in Library/WebServer/CGI-Executables/
I haven't made any changes to my httpd.conf file except for adding .py to AddHandler statement.
I am attaching all my files below.
Please help me with this as I have been stuck on this for a very long time now. Please note that Im using Mac OS Sierra.
Thanks in advance.
What I have tried:
#map.html file
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>MAPS
#map {
width: 100%;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Calibri;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
display: none;
}
#map #infowindow-content {
display: none;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Calibri;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Calibri;
font-size: 16px;
font-weight: 400;
}
#pac-input {
background-color: #fff;
font-family: Calibri;
font-size: 15px;
font-weight: 400;
margin-left: 12px;
padding: 8px 12px;
text-overflow: ellipsis;
width: 400px;
border: 1px solid #ccc;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 400;
padding: 6px 12px;
}
#target {
width: 345px;
}
#form
{
display: none;
}
#heading {
text-align: center;
color: #003366;
font-size: 30px;
font-family: Calibri;
padding: 8px 12px;
}
label.field {
text-align: left;
font-weight: bolder;
font-size: 16px;
font-family: Calibri;
}
input[type=text], input[type=email], input[type=number], select {
font-family: Calibri;
font-size: 16px;
font-weight: bolder;
padding: 8px 12px;
width: 100%;
margin: 8px 0;
display: inline-block;
border: 1px solid black;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
font-family: Calibri;
font-size: 16px;
font-weight: bolder;
background-color: white;
color: #00b300;
padding: 8px 12px;
margin: 8px 0;
border: 2px solid #00b300;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
}
input[type=submit]:hover {
background-color: #00b300;
color: white;
}
input[type=reset] {
font-family: Calibri;
font-size: 16px;
font-weight: bolder;
background-color: white;
color: #cc0000;
padding: 8px 12px;
margin: 8px 0;
border: 2px solid #cc0000;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
}
input[type=reset]:hover {
background-color: #cc0000;
color: white;
}
input[type=text]:focus {
background-color: #f2f2f2;
border-color: #4d90fe;
}
input[type=email]:focus {
background-color: #f2f2f2;
border-color: #4d90fe;
}
input[type=number]:focus {
background-color: #f2f2f2;
border-color: #4d90fe;
}
select:focus {
background-color: #f2f2f2;
border-color: #4d90fe;
}
<div id="map"></div>
<div id="form">
<p id="heading">PERSONAL INFORMATION</p>
Full Name:
<br>
<br>
E-mail:
<br>
<br>
Mobile:
<br>
<br>
Gender:
Male
Female
Other
<br>
<br>
Area of Expertise:
<br>
<br>
Years of Experience:
<br>
<br>
<p style="text-align: center">
</p>
</div>
var map;
var iconBase;
var input;
var searchBox;
var markers=[];
var markerArray =[];
var infowindow;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 20.5937, lng: 78.9629},
zoom: 5,
mapTypeId: 'roadmap',
gestureHandling: 'cooperative'
});
//Declaring infowindow.
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
// Create the search box and link it to the UI element.
input = document.getElementById('pac-input');
searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
//Creates a marker when the user clicks on a location on the map.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
//Marker function declaration.
function addMarker(location, map) {
// Add the marker at the clicked location.
var iconBase = 'https://maps.google.com/mapfiles/kml/paddle/';
marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: location,
map: map,
icon: iconBase + 'ylw-blank.png'
});
//Infowindow pops up on clicking the marker.
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('form').style.display='inline-block';
infowindow.open(map, marker);
});
}
#processing.py file(Written this code in PyCharm Community Edition)
import MySQLdb
import cgi
import cgitb
cgitb.enable()
form = cgi.FieldStorage()
fullname = form.getvalue('fullname', '')
emailid = form.getvalue('emailid', '')
mobile = form.getvalue('mobile', '')
gender = form.getvalue('gender', '')
areaofexpertise = form.getvalue('areaofexpertise', '')
yearsofexperience = form.getvalue('yearsofexperience', '')
db = MySQLdb.connect(host="localhost", user="root", passwd="*****", db="client_database")
cursor = db.cursor()
query = """INSERT INTO client_info (FULL_NAME, EMAIL_ID, MOBILE, GENDER, AREA_OF_EXPERTISE, YEARS_OF_EXPERIENCE)
VALUES (%s, %s, %s, %s, %s, %s)"""
cursor.execute(query, (fullname, emailid, mobile, gender, areaofexpertise, yearsofexperience))
result = cursor.fetchall()
db.commit()
db.close()
Submit an article or tip