Hello everyone, In this tutorial, I am going to describe the Visualforce page and also provide a step-by-step process to create a simple Visualforce page through the developer console.

After completing this unit, you’ll be able to:
  • What is Visualforce and what it’s used for?
  • How to create a Visualforce page?
So let’s begin.

What is Visualforce page?

 Visualforce page is a web development framework, contains a set of tags that enables a developer to build attractive custom user interfaces for mobile and desktop apps. These apps can be hosted on the lightning platform also. Visualforce pages are created using a unique tag-based Mark-up language. Visualforce tags are similar to HTML but it’s primary use to access, display and update the salesforce organization’s data.
            Visualforce page can integrate with any standard web technology or Javascript framework to allow developer for a more sophisticated and rich user interface. Visualforce page is accessible by a unique URL. When someone accesses a Visualforce page the server performs data processing request that required by the page and renders the page into HTML, after that return the result to the browser for display.

The syntax for Visualforce Page
 <apex:page>
  Hello World
 </apex:page>

Where can Visualforce pages be used? 

The Visualforce page can be used:
  1. To override standard functionality, such as the New, Edit
  2. To define custom tabs.
  3. To override tab overview pages, such as the Accounts tab home page
  4. To integrated with HTML, CSS, Ajax, jQuery.
  5. To embed components in detail page layouts.
  6. To create dashboard components or custom help pages.
  7. To customize, extend, or integrate the sidebars in the Salesforce console (custom console components).
  8. To add menu items, actions, and mobile cards in Salesforce1.
Controllers in Visualforce Page

 There are three types of controller used in a Visualforce page, They are,

1. Standard Controllers: It’s pre-built Visualforce controller provide by salesforce.com. Standard Controller contains the same functionality and logic that are used in salesforce standard pages. If you use the standard contact controller, clicking a Save button in a Visualforce page result in the same functionality as clicking Save on the standard Contact edit page.
 <apex: page standardcontroller ="Contact">
 </apex: page>
2. Custom Controllers: When you need more customize functionality then you should go to their own apex controller class.
 <apex: page standardcontroller ="CustomController">
 </apex: page>
3. Extension Controllers: A extension is an Apex class that used to extends the functionality of a standard or custom controller. It provides additional functionality to a standard controller and controller. If we want to use both standard controller and controller in the Visualforce page, we have to use an extension controller. If there is more than one extension it will execute from left to right.
 <apex: page standardcontroller="Contact" extensions ="CustomController1, CustomController2">
 </apex: page>
Creating a Visualforce Page

Follow these steps to create a Visualforce page through Developer Console.

Step 1: Click on the Developer console under the name menu.


Step 2: In developer console click on File>New>Visualforce Page.


Step 3: Enter the name of Visualforce page then hit on OK button.


Step 4: Now write the code as shown in the below image.


Step 5: Click on File>Save or Press Ctrl+S in the keyboard.


Step 6: Click on Preview button.


Congratulation, you created your first Visualforce page.


See also:

Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.