To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):
function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();
//empty map, bounds are test-layer bounds (EPSG:32647)
map = new OpenLayers.Map({
div: "map",
allOverlays: true,
maxExtent: new OpenLayers.Bounds(
653237.69439077,1519879.063165,655229.57939001,1520825.6733868
)
});
//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],
protocol: new OpenLayers.Protocol.WFS({
url: "http://..../wfs",
featurePrefix: 'testkf',
featureNS: "http://.../testkf",
extractAttributes: true,
featureType: "test",
geometryName: "geom",
})
});
map.addLayer(test);
//add Popup
var select = new OpenLayers.Control.SelectFeature(test);
map.addControl(select);
select.activate();
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
<!-- crucial part is form within popup. careful with linebreaks-->
test.events.on({
featureselected: function(event) {
var feature = event.feature;
feature.popup = new OpenLayers.Popup.FramedCloud
("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<form action="http://.../myphp.php" method="post" target="new">'+
'<p><div class="label"> entry by:</div> <input name="entryname" type="text" size="30" maxlength="30" value="'+feature.attributes.entryname+'" ></p><br>'+
'<input type="submit" name="schreiben" value="Submit" onClick="window.location.reload()"></form>',
null,
true
);
map.addPopup(feature.popup);
},
<!-- destroy popup when feature is no longer selected. Prevents showing 2 Popups at the same time-->
featureunselected: function(event) {
var feature = event.feature;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
});
//Toolbar:
var panel = new OpenLayers.Control.Panel(
{'displayClass': 'customEditingToolbar'}
);
var select = new OpenLayers.Control.SelectFeature(test, {
title: "Select Field",
displayClass: "olControlSelectFeature"
});
var draw = new OpenLayers.Control.DrawFeature(
test, OpenLayers.Handler.Polygon,
{
title: "Draw Feature",
displayClass: "olControlDrawFeaturePolygon",
multi: true
});
var save = new OpenLayers.Control.Button({
title: "Save Changes",
trigger: function() {
if(edit.feature) {
edit.selectControl.unselectAll();
}
saveStrategy.save();
},
displayClass: "olControlSaveFeatures"
});
panel.addControls([save, draw, select]);
map.addControl(panel);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
For the form within the popup, a separate php-script is needed. Here, the crucial part is:
$res = pg_query ("UPDATE $tabelle SET entryname = '".pg_escape_string ($entryname)."' WHERE gid = '$gid'");
Hope that helps!
Place your html files (and OpenLayers.js etc) in the www directory of your GeoServer data directory. You will not then need a proxy as your map page and WFS data will be coming from the same machine and port.
For what you are doing there is no need to run Apache.
The only other problem you may see is if you just double click on the html file in explorer to open it instead of typing http:// localhost :8080/geoserver/web/mypage.html (without the spaces) into the browser
Best Answer
If you need to do this a lot (more than a couple of times) then you could write a custom datastore by following the steps in this GeoTools tutorial. Then all you need to do is drop the jar file into your WEB-INF/lib folder and it will work just like any other datastore in GeoServer.