How to use fieldset in Salesforce Visualforce pages?

Fieldset:

A fieldset is a grouping of fields. When a fieldset is added to a Visualforce page, developers can loop over its fields and render them. Fieldsets can be directly referenced in Visualforce by combining the $ObjectType global variable with the keyword FieldSets.

Steps to create a fieldset on an object:

Goto setup and enter object name in the quick find box and select fieldsets from its management settings.
Click "New"
A form will open, enter all the required details, and click save.
On click of "Save" button, a new page will open, Drag and drop the field to list in the fieldset section and click save.

Now the fieldset has created, let's understand it's used in the Visualforce page with an example. we have created a fieldset with the name 'infoAboutOpportunity' on the opportunity and we have added 7 fields in the fieldset.

Below is a snippet of code for Controller of Visualforce Page:

public with sharing class opportunityFieldSet{
    public List<Opportunity> opportunityListObj{get;set;} /* List of Opportunity records to be display on visualforce Page */
    private Account accountObj;
    private Id accountObjId;
    private integer counter=0;
    private integer list_size=5;
    private integer total_size;
    /*Constructor for the apex class */
    public opportunityFieldSet(ApexPages.StandardController controller){
        accountObj = (Account)controller.getRecord();  
        opportunityListObj = new List<Opportunity>();
        accountObjId = accountObj.Id;
        List<Opportunity> opportunityListObj1 = [Select id from Opportunity where Accountid=: accountObjId]; this.opportunityListObj = getOpportunity();
        total_size = opportunityListObj1.size();
    }
    /* Getting all the fields in the fieldset */
    public List<Schema.FieldSetMember> getFields(){
        return SObjectType.Opportunity.FieldSets.infoAboutOpportunity.getFields();
    }
    /* Queying only those fields which are part of fieldset in the opportunity records */
    public List<Opportunity> getOpportunity() {
        String query = 'SELECT '; System.debug('counter' +counter);
        for(Schema.FieldSetMember f : this.getFields()) {
            query += f.getFieldPath() + ', ';
        }
        query += 'Id FROM Opportunity where Accountid =: accountObjId limit :list_size offset :counter';
        return Database.query(query);
    }
    /* Adding the queried record to the list */
    public void currentOpportunities(){
        opportunityListObj = new List<Opportunity>();
        opportunityListObj = getOpportunity();
    }
    /*Adding Pagination to the page */
    public PageReference Beginning() {
        counter = 0;
        currentOpportunities();
        return null;
    }
    public PageReference Previous() {
        counter -= list_size;
        currentOpportunities();
        return null;
    }
    public PageReference Next() {
        counter += list_size;
        currentOpportunities();
        return null;
    }
    public PageReference End() {
        if(total_size - math.mod(total_size,list_size) == total_size)
            counter = total_size - math.mod(total_size,list_size) - list_size ;
        else
            counter = total_size - math.mod(total_size,list_size);
        currentOpportunities();
        return null;
    }
    public Boolean getdisablePrevious() {
        if (counter == 0)
            return true;
        else
            return false;
    }
    public Boolean getdisableNext() {
        if (counter >= total_size - list_size)
            return true;
        else
            return false;
    }
}

Below is a snippet of code for Visualforce Page:

<apex:page standardController="Account" extensions="opportunityFieldSet">
    <apex:form>
        <apex:pageBlock title="Opportunity" id="myPanel">
            <apex:pageBlockButtons location="top" >
                <apex:outputPanel id="myButtons">
                    <apex:commandButton action="{!Beginning}" title="Beginning" value="Start" disabled="{!disablePrevious}" reRender="myPanel,myButtons"/>
                    <apex:commandButton action="{!Previous}" title="Previous" value="Previous" disabled="{!disablePrevious}" reRender="myPanel,myButtons"/>
                    <apex:commandButton action="{!Next}" title="Next" value="Next" disabled="{!disableNext}" reRender="myPanel,myButtons"/>
                    <apex:commandButton action="{!End}" title="End" value="End" disabled="{!disableNext}" reRender="myPanel,myButtons"/>
                </apex:outputPanel>
            </apex:pageBlockButtons>
            <table>
                <tr>
                    <!-- Adding the labels of fields on the page -->
                    <apex:repeat var="f" value="{!$ObjectType.Opportunity.FieldSets.infoAboutOpportunity}">
                        <th>
                            <apex:outputText styleClass="bold" value="{!$ObjectType.Opportunity.Fields[f].label}"/> &nbsp; &nbsp; &nbsp;
                        </th>
                    </apex:repeat>
                </tr>
                <!-- Adding the Opportunity records on the page -->
                <apex:repeat value="{!opportunityListObj}" var="obj">
                    <tr>
                        <apex:repeat value="{!fields}" var="f">
                            <td>
                                <apex:outputField value="{!obj[f]}"/> &nbsp; &nbsp; &nbsp;
                            </td>
                        </apex:repeat>
                    </tr>
                </apex:repeat>
            </table>
        </apex:pageBlock>
    </apex:form>
</apex:page>