VF page with Relationship query in salesforce

Note:Run page by {base url}/apex/test/{AccountID here}

Controller

Public with sharing class associatedContactDisplayController {
Public List<contact> associatedConList{get;set;}
    public associatedContactDisplayController(ApexPages.StandardController controller) {
    associatedConList = new List<contact>();
       for(Account acc:[select id,name,(select name,id,email,birthdate,leadsource,MobilePhone,Department,MailingAddress,Description from Contacts) from account where id=:controller.getRecord().id]){
          for(contact con:acc.Contacts)
              associatedConList.add(con);
       }
    }
}

Visualforce Page  (VF pageName-Test)


<apex:page standardController="account" extensions="associatedContactDisplayController" tabStyle="Contract">
  <apex:form >
    <apex:pageBlock >
      <apex:pageblockSection title="All associated contacts List">
      </apex:pageblockSection>
          <apex:pageblockTable value="{!associatedConList}" var="conRec">
                <apex:column value="{!conRec.name}"/>
                <apex:column value="{!conRec.email}"/>
                <apex:column value="{!conRec.birthdate}"/>
                <apex:column value="{!conRec.leadsource}"/>
                <apex:column value="{!conRec.MobilePhone}"/>
                <apex:column value="{!conRec.Department}"/>
                <apex:column value="{!conRec.Description }"/>     
          </apex:pageblockTable>    
    </apex:pageBlock>
  </apex:form>
</apex:page>

Detail Explanation:

Let us decode the relationship query that we have used in above example,
 for(Account acc:[select id,name,(select name,id,email,birthdate,leadsource,MobilePhone,Department,MailingAddress,Description from Contacts) from account where id=:controller.getRecord().id]){

While writing inner query for getting child records we have to use child relationship name, in this case it is 'contacts' , normally for standard objects child relationship name ends with 's', for custom objects we can specify the child relationship name as required. So, for querying the records in inner query we have to specify child relationship instead of object name i.e [select field name from childrelationship name]. 

Also, so as to iterate through child records we have used child relationship name as done in below line,

for(contact con:acc.Contacts){
     associatedConList.add(con);
}

here the iterating list will be specified variable of parent record (dot) child relationship name which is acc.Contacts
Here acc is the account variable and contacts is the child relationship name.

Now let us see how we can get child records in case of custom object, i.e if the child object is a custom object. The only difference here will be, we need to append __r to the child relationship name. That is inner query will end with 'from childrelationshipname__r'  and iterating for loop will be as below,

for(customobject c :acc.childrelationshipname__r){ 
     childreclist.add(c); 
} 

How do we get the child relationship name?

Go to all the fields on child object and click on the look up to parent field and you will find the child relationship there. For example in case of account and contacts, go to contact all fields and click on field - 'Account Name' you will be navigated to below page where you can get the child relationship name,