How to create Wrapper Class in Salesforce.

Wrapper Class in Salesforce.

 Apex Class:

Public class OrderController{
    Public List<Order__c> orderList{get;set;}
    Public WrapperClass singleConditionWrapper{get;set;}
    Public List<WrapperClass> WrapperList{get;set;}
    Public List<System__c> systemList{get;set;}
   
    Public OrderController(){
        WrapperList= new List<WrapperClass>();
        orderList = new List<Order__c>();
        orderList = [select Id,Name,Part_No__c,Opportunity__r.Show_On_Sites_Page__c ,Opportunity__r.Shipping_Company__c,Opportunity__r.Shipping_City__c, Opportunity__r.Shipping_Email__c, Opportunity__r.Shipping_Phone__c, Opportunity__r.Shipping_State__c, Opportunity__r.Shipping_Street__c, Opportunity__r.Shipping_Zip__c  from Order__c where Id =: orderId];
        if(orderList.size() > 0){
            orderName = orderList.get(0).Name;
            isShow = orderList.get(0).Opportunity__r.Show_On_Sites_Page__c;
        }
       
        systemList = new List<System__c>();
        systemList = [Select Id,Name,Serial_Number__c,Asset_Tag__c from system__c where Opportunity__c =: oppId];     
        if(systemList.size() > 0){
            for(Integer i=0; i < systemList.size(); i++){
                singleConditionWrapper = new WrapperClass(systemList.get(i).Name,systemList.get(i).Serial_Number__c,systemList.get(i).Asset_Tag__c);
                WrapperList.add(singleConditionWrapper); 
            }
        }
    } 
    Public class WrapperClass{
        Public String systemName{get;set;}
        Public String serialNumber{get;set;}
        Public String assetTag {get;set;}
   
        public WrapperClass(String systemName,String serialNumber,String assetTag){
            this.systemName=systemName;
            this.serialNumber=serialNumber;
            this.assetTag =assetTag;
        }
    }
}

Visual Force Page:

<apex:page Controller="OrderController" sidebar="false" showHeader="False">
         <apex:pageBlock rendered="{!IsShow != false}"> 
           <apex:repeat value="{!WrapperList}" var="Wap">
             <apex:pageBlockSection id="SectionColor1" title="System Name : {!Wap.systemName} | Serial Number : {!Wap.serialNumber} | Asset Tag : {!Wap.assetTag}  ">
                 
                  <apex:pageBlockTable value="{!orderList}" var="ol">
                     
                      <apex:column headerValue="Part" value="{!ol.Part_No__c}"/>
                      <apex:column headerValue="Shipping Details" value="{!ol.Opportunity__r.Shipping_Company__c} {!ol.Opportunity__r.Shipping_Street__c} {!ol.Opportunity__r.Shipping_City__c} {!ol.Opportunity__r.Shipping_State__c} {!ol.Opportunity__r.Shipping_Zip__c  } {!ol.Opportunity__r.Shipping_Phone__c} {!ol.Opportunity__r.Shipping_Email__c}" />
                      <apex:column headerValue="Ship Date" />
                      <apex:column headerValue="Tracking No" />
                   
                  </apex:pageBlockTable>
                  
                <script>colorPageBlock(document.getElementById("{!$Component.SectionColor1}"), "#484848");</script> 
            </apex:pageBlockSection>
           </apex:repeat>
        </apex:pageBlock>

    </apex:form>
</apex:page>