I have an apex class which takes project Id from the URL of VF Page and displays all tasks assigned to it. The VF Page is opened from a custom button on Standard SFDC project object layout
(Sample URL: https://<sfdc instance>/apex/TaskPage?id=<projectId>)
I need help to write test class for this Apex Class

Apex Class

public class TaskClass{
	Id projectId;
	String errorMessage{get;set;}
	public List<Task__c>  taskList{get;set;}
	
	public TaskClass(){
		projectId = ApexPages.currentPage().getParameters().get('id');
		if(projectId!=null){
			try{
				taskList = [Select id,Name from Task__c where project__c =: projectId];
			}catch(Exception e){
				errorMessage = 'No records found';
			}
		}
		else
			errorMessage = 'Invalid URL';
	}
	//other functions
}

 

I want to fetch Start & End Date of each task on VF page and then perform operation on it (Save,update,delete)

But i am unable to pull data on VF page inputt fields

Apex:

public class TextClass1{
	public String err{get;set;}
	public List<Task__c> taskList{get;set;}
	public List<Integer> index{get;set;}
	public List<date> sDate{get;set;}
	public List<Date> eDate{get;set;}
	
	public TestClass1{
		sDate = new List<Date>();
		eDate = new List<Date>();
		index = new List<Integer>();
		err='';
		
		try{
			taskList = [SELECT id, name,start_date__c, end_date__c FROM Task__c];
			Integer i=0;
			for(Task__c t:taskList){
				sDate.add(t.Start_Date__c);
				eDate.add(t.end_date__c);
				index.add(i++);
			}
		}catch(Exception e){
			err=String.valueOf(e);
		}
	}
	public void saveAll(){
		update taskList;
	}
}

VF:

<apex:page id="page" showHeader="false" sidebar="false" doctype="html-5.0">
	
	<div>
		<center>{!err}</center>
		<apex:form id="form">
			<apex:repeat value="{!index}" var="i">
				Task Name: <apex:inputText value="{!taskList[i].name}"/>
				Start Date: <apex:input type="date" value="{!sDate[i]}"/>
				End Date: <apex:input type="date" value="{!eDate[i]}"/><br/>
			</apex:repeat>
			<apex:commandButton value="Save All"/>
		</apex:form>
	</div>

</apex:page>

I am getting this error:" Expected input type 'text', got 'date' for Id data type"

I have also tried this variation of VF code, but i dont like the extra link that appears besides the date input field

<div>
            <center>{!err}</center>
            <apex:form id="form">
                <apex:repeat value="{!taskList}" var="t">
                    Task Name: <apex:inputText value="{!t.name}"/>
                    Start Date: <apex:inputField type="date" value="{!t.Start_Date__c}"/>
                    End Date: <apex:inputField type="date" value="{!t.End_Date__c}"/><br/><br/>
                </apex:repeat>
                <apex:commandButton value="Save All"/>
            </apex:form>
        </div>

Any help would be appreciated.

Apex Code

public class myClass1{

        public string out1{get;set;}
        public list<decimal> capitals{get;set;}
        public list<decimal> revenues{get;set;}
        
        public myClass1(){
            out1='Hello';
            capitals=new list<decimal>(4);
            revenues=new list<decimal>(4);
            for(integer i=0;i<4;i++){
                capitals[i]=revenues[i]=i;
            }
        }
        public void mySave(){
           out1=String.valueOf(capitals[1]);
          //this line should display value entered in second input text in place of 'Hello'
        }
}


VisualFroce page


<apex:page controller="myClass1" showHeader="false" doctype="HTML-5.0">
    <apex:form id="form">
        <apex:tabPanel >
            <apex:tab label="one">
                <p>Tab one Content</p>
                <apex:outputtext id="out1" value="{!out1}" escape="false"/>
                <apex:commandButton value="Save" action="{!mySave}" rerender="dataTable,out1,rpt"/>
                <table id="dataTable" style="border:2px solid green">
                    
                    <apex:repeat value="{!capitals}" var="c" id="rpt">
                    <tr>
                        <td><apex:inputtext  value="{!c}"/></td>
                    </tr>
                    </apex:repeat>    
                </table>
            </apex:tab>
            <apex:tab label="two">
            
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    
</apex:page>

ideally above code should display numbers 0 to 4 in four input Text fields.

When i assign  value="{!c}", for inputText.
i am getting an error -> 'unkown property c'
in my opinion i should work perfectly.

Please correct my mistake.

I want to save values from dynamically generated input text into list<decimal> using repeat.
 please have a look on the following code and suggest changes.
 

Apex Class

public class myClass1{

        public string out1{get;set;}
        public list<decimal> capitals{get;set;}
        public list<decimal> revenues{get;set;}
                
        public myClass1(){
            out1='No way';
            capitals=new list<decimal>(5);
            revenues=new list<decimal>(5);
            for(integer i=0;i<5;i++){
                capitals[i]=revenues[i]=0;
            }
        }
        public void goDynamic(){
           out1=String.valueOf(capitals[1]);
        }
}


Visual Force Page

<apex:page controller="myClass1" showHeader="false" doctype="HTML-5.0">
    <apex:form id="form">
        <apex:tabPanel >
            <apex:tab label="one">
                <p>Tab one Content</p>
                <apex:outputtext id="out1" value="{!out1}" escape="false"/>
                <apex:commandButton value="addRow"  rerender="dataTable,out1"/>
                <apex:commandButton value="goDynamic" action="{!goDynamic}" rerender="dataTable,out1,rpt"/>
                <table id="dataTable" style="border:2px solid green">
                                     
                    <tr>
                        <th colspan="2">Capital</th>
                        <th colspan="2">Revenue</th>
                    </tr>
                    <apex:repeat value="{!capitals},{!revenue}" var="c,r" id="rpt">
                    <tr>
                        <td colspan="2"><apex:inputtext value="{!capitals[c]}"/></td>
                        <td colspan="2"><apex:inputtext value="{!revenues[r]}" /></td>

                    </tr>
                    </apex:repeat>    
                </table>
            </apex:tab>
            <apex:tab label="two">
            
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    


    
    
</apex:page>

What i want to acheive is that i can gather input values for "Capitals" and  "revenues" from the user and save it in apex and do some calculation on it.

I know that apex:repeat value="{!capitals},{!revenues}" is not working.
But i dnt know any approach to gather input in two lists simultaneously.

Any solution based on maps will be fine.
 

Apex Code:

public class myClass{
        public list<String> myValues{get;set;}
        public string outTxt{get;set;}
        public myClass(){
            outTxt='here-> ';
            myValues=new list<String>();
         }
         public void concatenate(){
              
              for(integer i=0;i<4; i++)
                    outTxt+=myValues[i]+'\n';
         }
}


VisualForce Page Code:

<apex:page controller="myClass">
    <apex:form >
        <table>
            <tr>
                <td>Value1:</td>
                <td><apex:inputtext value="{!myValues[0]}" id="val1"/></td>
            </tr>
            <tr>
                <td>Value2:</td>
                <td><apex:inputtext value="{!myValues[1]}" id="val2"/></td>
            </tr>
            <tr>
                <td>Value3:</td>
                <td><apex:inputtext value="{!myValues[2]}" id="val3"/></td>
            </tr>
            <tr>
                <td>Value4:</td>
                <td><apex:inputtext value="{!myValues[3]}" id="val4"/></td>
            </tr>
            <tr>
                <td><apex:commandButton value="Concatenate" action="{!concatenate}">
                        <apex:ActionSupport event="onclick" rerender="txt"/>
                    </apex:commandButton>
                </td>
                
            </tr>
        </table>
        <apex:outputText id="txt">{!outTxt}</apex:outputText>
    </apex:form>
</apex:page>

The problem is that when i save this visualforce page code after saving apex code i am getting error:
Subscript is invalid because list is empty

<apex:page showHeader="false" sidebar="false">
    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
    <script type="text/javascript">
        function next(buttonId){
            //code to show next tab....
            
        }
        function back(buttonId){
            // code to show previous tab...
        }
    </script>        
    <!-- Create Tab panel -->
    <apex:form >
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one<br/>
            <apex:commandButton value="Next" id="next1" onclick="next(this.id);"/>
        </apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">content for tab two<br/>
            <apex:commandButton value="Back" id="back1" onclick="back(this.id);"/>
            <apex:commandButton value="next" id="next2" onclick="next(this.id);"/>
        </apex:tab>
        <apex:tab label="Three" name="tabThree">
            <table style="border:solid; position:center">
                <tr>
                    <td>Field Name</td>
                    <td>Input</td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input type="Text" name="nm"/></td>
                </tr>
            </table>
        
        </apex:tab>
    </apex:tabPanel>
    </apex:form>
</apex:page>

I am creating a custom visual force page having mutiple tabs in TabPanel.
I want to show adjoining tab or previous tab when "next" or "back" buttons are clicked.

please help me with the javascript code to acheive this.

Moreover, i also want to stop users to access tabs on mouseclick
(that means that the user cant switch between tabs by clicking on tab labels)

any help will be appreciated.
 

test_pg1

<apex:page controller="myController">
   <apex:form >
        <apex:inputText value="{!myStr}"/>
        <apex:commandButton value="Click Here" action="!test_pg2"/>
   </apex:form>
</apex:page>



test_pg2

<apex:page controller="myController">
    <apex:outputText value="{!myStr}"/>
</apex:page>

Controller

public class myController{
    public string myStr{get;set;}
    public myController(){
        myStr=null;
    }
}

Why am i getting above mentioned error when i click on BUTTON and go to next page.

Also, The url  also remain same ---> /apex/test_pg1
I think it should change to /paex/text_pg2
 

public class getAcnt{
    public string AcNm{get;set;} //get value frm vf page
    public string AcPhn{get;set;} //get value frm vf page
    public string myStr{get;set;} // string having ID of  a particular Account
    public list<Account> Usr{get;set;} //holds values of an account retreived from database
    ................
    public void search(){
    ................
    }
}

vf page 1

<apex:page controller="getAcnt" sidebar="false">
<apex:form >
      <p>Enter Account Details.</p>
      <p>Name:<apex:inputText value="{!AcNm}"/></p>
      <p>Phone:<apex:inputText value="{!AcPhn}"/></p>
      <p><apex:commandButton value="Search" action="{!search}"/>
    <b> <a href="AcntPg">Go2Account</a></b>
........................
........................
<apex:pageBlock >
          <apex:pageblockTable value="{!Usr}" var="my">
              <apex:column value="{!my.id}"/>
              <apex:column value="{!my.name}"/>
              <apex:column value="{!myStr}"/>
          </apex:pageblockTable
 </apex:pageBlock>
</apex:form>


vf pg2

<apex:page controller="getAcnt">
  <apex:form >
      <apex:outputText value="ID: {!myStr}"></apex:outputText>
</apex:form>
</apex:page>

This code displays info correctly on vf pg1 ,
But when i click on the link to go on pg2 i cant see the ID stored in string myStr.

tried using pageReference but that was wroking on "Apex commandButton" but i want "link" and the url was also not changing.

I want that the url changes and the values also reflect on this page.

(I havent used pageReference in my Code)

Following is my sample code

public list<Account> myAccount;
str='select id,name,Phone from Account where name like \'%'+usr+'%\'+ limit 10;
myAccount=Database.query(str);
private str1;

I want to store 'id' from myAccount in str1.

I tried using str1=String.valuedOf(myAccount.id);
But its throwing error:
Compile Error: Initial term of field expression must be a concrete SObject: List<Account>

Any help will be appreciated.

I am working on a flow in which i have a dynamic picklist(choice) having name of organizations (accounts).

now, i want that once a entry is selected from this dynamic choice the contacts related to this organizations to be populated in field no2 that is: again a dynamic choice picklist.
Or Even if i want to populate all the details of that particular account, remaining fields should be auto populated on the same flow screen.
 

I want to create a visual force page using which a guest user can look for his details and can edit/delete it.

I want to create a VisualFroce page having input fields in it. I want this page to enable Guest User to enter new record in Account Object( or any other Object).

I want headStart on how to write code for Save/Search/Edit/Delete Functions on a visulaForce page.
(Assume that i have created required input fields on visualFroce Page)
 
I can do this using Flow but i want to acheive this using VisualForce Page.

Even a link to similar solved question would do.

PS: Salesforce is new to me.

I have created a visual Force page having a Flow in it. I am trying to create new ACCOUNT record using "Sites". But I am getting following Error on Record Create Stage in the flow.

Error occurred attempting to get data type for : RawFieldImpl[tableName: Account, columnName: Country__c] > CREATE
caused by element : FlowRecordCreate.t_acnt_create2
caused by: Error occurred attempting to get data type for : RawFieldImpl[tableName: Account, columnName: Country__c] > CREATE.

When i try to create new account using "preview" option on "Sites" its working fine and new record is being created in Account Object.
But i access it using "Site" url. Its giving above mentioned Error.

I dnt know what am i missing?
 

I want to fetch Start & End Date of each task on VF page and then perform operation on it (Save,update,delete)

But i am unable to pull data on VF page inputt fields

Apex:

public class TextClass1{
	public String err{get;set;}
	public List<Task__c> taskList{get;set;}
	public List<Integer> index{get;set;}
	public List<date> sDate{get;set;}
	public List<Date> eDate{get;set;}
	
	public TestClass1{
		sDate = new List<Date>();
		eDate = new List<Date>();
		index = new List<Integer>();
		err='';
		
		try{
			taskList = [SELECT id, name,start_date__c, end_date__c FROM Task__c];
			Integer i=0;
			for(Task__c t:taskList){
				sDate.add(t.Start_Date__c);
				eDate.add(t.end_date__c);
				index.add(i++);
			}
		}catch(Exception e){
			err=String.valueOf(e);
		}
	}
	public void saveAll(){
		update taskList;
	}
}

VF:

<apex:page id="page" showHeader="false" sidebar="false" doctype="html-5.0">
	
	<div>
		<center>{!err}</center>
		<apex:form id="form">
			<apex:repeat value="{!index}" var="i">
				Task Name: <apex:inputText value="{!taskList[i].name}"/>
				Start Date: <apex:input type="date" value="{!sDate[i]}"/>
				End Date: <apex:input type="date" value="{!eDate[i]}"/><br/>
			</apex:repeat>
			<apex:commandButton value="Save All"/>
		</apex:form>
	</div>

</apex:page>

I am getting this error:" Expected input type 'text', got 'date' for Id data type"

I have also tried this variation of VF code, but i dont like the extra link that appears besides the date input field

<div>
            <center>{!err}</center>
            <apex:form id="form">
                <apex:repeat value="{!taskList}" var="t">
                    Task Name: <apex:inputText value="{!t.name}"/>
                    Start Date: <apex:inputField type="date" value="{!t.Start_Date__c}"/>
                    End Date: <apex:inputField type="date" value="{!t.End_Date__c}"/><br/><br/>
                </apex:repeat>
                <apex:commandButton value="Save All"/>
            </apex:form>
        </div>

Any help would be appreciated.

Apex Code

public class myClass1{

        public string out1{get;set;}
        public list<decimal> capitals{get;set;}
        public list<decimal> revenues{get;set;}
        
        public myClass1(){
            out1='Hello';
            capitals=new list<decimal>(4);
            revenues=new list<decimal>(4);
            for(integer i=0;i<4;i++){
                capitals[i]=revenues[i]=i;
            }
        }
        public void mySave(){
           out1=String.valueOf(capitals[1]);
          //this line should display value entered in second input text in place of 'Hello'
        }
}


VisualFroce page


<apex:page controller="myClass1" showHeader="false" doctype="HTML-5.0">
    <apex:form id="form">
        <apex:tabPanel >
            <apex:tab label="one">
                <p>Tab one Content</p>
                <apex:outputtext id="out1" value="{!out1}" escape="false"/>
                <apex:commandButton value="Save" action="{!mySave}" rerender="dataTable,out1,rpt"/>
                <table id="dataTable" style="border:2px solid green">
                    
                    <apex:repeat value="{!capitals}" var="c" id="rpt">
                    <tr>
                        <td><apex:inputtext  value="{!c}"/></td>
                    </tr>
                    </apex:repeat>    
                </table>
            </apex:tab>
            <apex:tab label="two">
            
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    
</apex:page>

ideally above code should display numbers 0 to 4 in four input Text fields.

When i assign  value="{!c}", for inputText.
i am getting an error -> 'unkown property c'
in my opinion i should work perfectly.

Please correct my mistake.

I want to save values from dynamically generated input text into list<decimal> using repeat.
 please have a look on the following code and suggest changes.
 

Apex Class

public class myClass1{

        public string out1{get;set;}
        public list<decimal> capitals{get;set;}
        public list<decimal> revenues{get;set;}
                
        public myClass1(){
            out1='No way';
            capitals=new list<decimal>(5);
            revenues=new list<decimal>(5);
            for(integer i=0;i<5;i++){
                capitals[i]=revenues[i]=0;
            }
        }
        public void goDynamic(){
           out1=String.valueOf(capitals[1]);
        }
}


Visual Force Page

<apex:page controller="myClass1" showHeader="false" doctype="HTML-5.0">
    <apex:form id="form">
        <apex:tabPanel >
            <apex:tab label="one">
                <p>Tab one Content</p>
                <apex:outputtext id="out1" value="{!out1}" escape="false"/>
                <apex:commandButton value="addRow"  rerender="dataTable,out1"/>
                <apex:commandButton value="goDynamic" action="{!goDynamic}" rerender="dataTable,out1,rpt"/>
                <table id="dataTable" style="border:2px solid green">
                                     
                    <tr>
                        <th colspan="2">Capital</th>
                        <th colspan="2">Revenue</th>
                    </tr>
                    <apex:repeat value="{!capitals},{!revenue}" var="c,r" id="rpt">
                    <tr>
                        <td colspan="2"><apex:inputtext value="{!capitals[c]}"/></td>
                        <td colspan="2"><apex:inputtext value="{!revenues[r]}" /></td>

                    </tr>
                    </apex:repeat>    
                </table>
            </apex:tab>
            <apex:tab label="two">
            
            </apex:tab>
        </apex:tabPanel>
    </apex:form>
    


    
    
</apex:page>

What i want to acheive is that i can gather input values for "Capitals" and  "revenues" from the user and save it in apex and do some calculation on it.

I know that apex:repeat value="{!capitals},{!revenues}" is not working.
But i dnt know any approach to gather input in two lists simultaneously.

Any solution based on maps will be fine.
 

Apex Code:

public class myClass{
        public list<String> myValues{get;set;}
        public string outTxt{get;set;}
        public myClass(){
            outTxt='here-> ';
            myValues=new list<String>();
         }
         public void concatenate(){
              
              for(integer i=0;i<4; i++)
                    outTxt+=myValues[i]+'\n';
         }
}


VisualForce Page Code:

<apex:page controller="myClass">
    <apex:form >
        <table>
            <tr>
                <td>Value1:</td>
                <td><apex:inputtext value="{!myValues[0]}" id="val1"/></td>
            </tr>
            <tr>
                <td>Value2:</td>
                <td><apex:inputtext value="{!myValues[1]}" id="val2"/></td>
            </tr>
            <tr>
                <td>Value3:</td>
                <td><apex:inputtext value="{!myValues[2]}" id="val3"/></td>
            </tr>
            <tr>
                <td>Value4:</td>
                <td><apex:inputtext value="{!myValues[3]}" id="val4"/></td>
            </tr>
            <tr>
                <td><apex:commandButton value="Concatenate" action="{!concatenate}">
                        <apex:ActionSupport event="onclick" rerender="txt"/>
                    </apex:commandButton>
                </td>
                
            </tr>
        </table>
        <apex:outputText id="txt">{!outTxt}</apex:outputText>
    </apex:form>
</apex:page>

The problem is that when i save this visualforce page code after saving apex code i am getting error:
Subscript is invalid because list is empty

<apex:page showHeader="false" sidebar="false">
    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
    <script type="text/javascript">
        function next(buttonId){
            //code to show next tab....
            
        }
        function back(buttonId){
            // code to show previous tab...
        }
    </script>        
    <!-- Create Tab panel -->
    <apex:form >
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one<br/>
            <apex:commandButton value="Next" id="next1" onclick="next(this.id);"/>
        </apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">content for tab two<br/>
            <apex:commandButton value="Back" id="back1" onclick="back(this.id);"/>
            <apex:commandButton value="next" id="next2" onclick="next(this.id);"/>
        </apex:tab>
        <apex:tab label="Three" name="tabThree">
            <table style="border:solid; position:center">
                <tr>
                    <td>Field Name</td>
                    <td>Input</td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input type="Text" name="nm"/></td>
                </tr>
            </table>
        
        </apex:tab>
    </apex:tabPanel>
    </apex:form>
</apex:page>

I am creating a custom visual force page having mutiple tabs in TabPanel.
I want to show adjoining tab or previous tab when "next" or "back" buttons are clicked.

please help me with the javascript code to acheive this.

Moreover, i also want to stop users to access tabs on mouseclick
(that means that the user cant switch between tabs by clicking on tab labels)

any help will be appreciated.
 

test_pg1

<apex:page controller="myController">
   <apex:form >
        <apex:inputText value="{!myStr}"/>
        <apex:commandButton value="Click Here" action="!test_pg2"/>
   </apex:form>
</apex:page>



test_pg2

<apex:page controller="myController">
    <apex:outputText value="{!myStr}"/>
</apex:page>

Controller

public class myController{
    public string myStr{get;set;}
    public myController(){
        myStr=null;
    }
}

Why am i getting above mentioned error when i click on BUTTON and go to next page.

Also, The url  also remain same ---> /apex/test_pg1
I think it should change to /paex/text_pg2
 

public class getAcnt{
    public string AcNm{get;set;} //get value frm vf page
    public string AcPhn{get;set;} //get value frm vf page
    public string myStr{get;set;} // string having ID of  a particular Account
    public list<Account> Usr{get;set;} //holds values of an account retreived from database
    ................
    public void search(){
    ................
    }
}

vf page 1

<apex:page controller="getAcnt" sidebar="false">
<apex:form >
      <p>Enter Account Details.</p>
      <p>Name:<apex:inputText value="{!AcNm}"/></p>
      <p>Phone:<apex:inputText value="{!AcPhn}"/></p>
      <p><apex:commandButton value="Search" action="{!search}"/>
    <b> <a href="AcntPg">Go2Account</a></b>
........................
........................
<apex:pageBlock >
          <apex:pageblockTable value="{!Usr}" var="my">
              <apex:column value="{!my.id}"/>
              <apex:column value="{!my.name}"/>
              <apex:column value="{!myStr}"/>
          </apex:pageblockTable
 </apex:pageBlock>
</apex:form>


vf pg2

<apex:page controller="getAcnt">
  <apex:form >
      <apex:outputText value="ID: {!myStr}"></apex:outputText>
</apex:form>
</apex:page>

This code displays info correctly on vf pg1 ,
But when i click on the link to go on pg2 i cant see the ID stored in string myStr.

tried using pageReference but that was wroking on "Apex commandButton" but i want "link" and the url was also not changing.

I want that the url changes and the values also reflect on this page.

(I havent used pageReference in my Code)

It takes long time to save this simple apex page. So long that i lost patience and closed the browser.
I have tried a few times but saw the status changing to "Saved" .
When i forcibly close the console window all changes are lost.
Tried it on latest Firefox and Chrome browsers with same result.

 

I want to create a VisualFroce page having input fields in it. I want this page to enable Guest User to enter new record in Account Object( or any other Object).

I want headStart on how to write code for Save/Search/Edit/Delete Functions on a visulaForce page.
(Assume that i have created required input fields on visualFroce Page)
 
I can do this using Flow but i want to acheive this using VisualForce Page.

Even a link to similar solved question would do.

PS: Salesforce is new to me.