How to search on a map and fetch the details using postgresql, geoserver and open layers 3 and php?

I have tables in postgresql database and database name is BMC and it consists 50 tables. I am displaying the map in a html file using openlayers3 and the application server is geoserver. so please help me to display the data from the database in a table format and search query on the map to get the exact location of it.

var Source_TANK =
        new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/BMC/wms?',
        params: {
            'LAYERS': 'BMC:water_tank',
            'VERSION': '1.1.0',
            'FORMAT': 'image/png',
            'TILED': true
        },
        id:"water_tank",
        serverType:'geoserver'
    });

    var Layer_TANK = new ol.layer.Tile({
        source: Source_TANK,

    });

<asp:ListItem Text="Water Tank" Value="49" />
                                        </asp:DropDownList>
                                      <asp:DropDownList ID="DropDownListSearchBy" runat="server" style="width:80%;margin-bottom:4px; margin-left:10px;margin-top:3px;">
                                       <asp:ListItem Text="Water Tank" Value="0" />
                                      </asp:DropDownList>
                                        <asp:TextBox ID="TextBoxSearch" placeholder="Search for Place, Property etc." style="width:80%;margin:20px;margin-left:10px;margin-top:3px;" runat="server"></asp:TextBox><br>
                                    <button id="btn_search" type="button" title="Search" style="width:auto;height:auto; background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Search
                                     <img src="img/search.png">
                                     </button>
                                   <button id="btn_clear" type="button" title="Clear" style="width:auto;height:auto;background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Clear 
                                    <img src="img/refresh2.png">
                                   </button>
                                       </form>

Solution

To show data in tabular format use WFS service GetFeature request from Geoserver. There are many output formats available like GeoJSON, KML, CSV.

Personally i choose GeoJSON since JSON object can be handled easily. Go through the below link for more http://docs.geoserver.org/latest/en/user/services/wfs/reference.html

Sample WFS url

http://localhost:8080/geoserver/BMC/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=BMC:water_tank&outputFormat=application/json

Note : this request will fetch all the records in that layer so the response may take time depending upon number of records in the table.