Load a Geoserver's shape File into Openlayers to add in other layers

Question

I want a good advice on the mapping with openlayers. I have a shape file save in the geoserver which i can even display by the use of openlayer link in GeoServer.

What I want to do is called that shape file in my HTML,CSS,JavaScript page of the openlayer so that I can add other layers or draw on top of the layer that I called from the Geoserver and save the modifications.

I want your ideas on how I am going to do this because I am very new in openlayers a small example will be useful for me

Answer 1

When you work with GeoServer and OpenLayers you don't actually work with shapefiles. You load shapefile in GeoServer once and then all interaction is going through WMS/WFS protocols. You can also modify layer features via WFS-T.

See GeoServer example with getting feature info

Answer 2

You can see the example in the official website of OL3 here

you'll have to put your html and js files ( all your web project ) in the folder data_dir/www/ under your geoserver folder, unless you have something else in mind