VisualForce : Create Simple Interest Program using VisualForce and APEX Controller | APEX, VISUALFORCE INTEGRATION

What is Visualforce?

Salesforce Visualforce is a user interface framework in Salesforce used to create custom web pages for Salesforce applications.

It allows developers to design:

• Custom forms
• Dashboards
• Reports
• PDF pages
• Dynamic web applications

Visualforce pages are written using:

• HTML-like tags
• Salesforce components
• Apex programming language

Visualforce works mainly with:

• Apex Controllers
• Salesforce Database Objects
• Standard Salesforce UI

Architecture of Visualforce

Visualforce Works With:

1. Visualforce Page (Frontend)
2. Controller (Logic)
3. Salesforce Database (Data)

Common Visualforce Components

Component	Purpose
apex:form	Create form
apex:inputText	Textbox
apex:commandButton	Button
apex:pageBlock	UI block
apex:dataTable	Show records
apex:repeat	Loop data
apex:outputText	Display text

 Create Simple Interest Program using Visual Force and APEX Controller | APEX, VISUALFORCE INTEGRATION:

It is most important concept to create Controller in APEX and use into visual force Pages.

Step to Create Controller First

public class SIController {

    public Decimal p{get;set;}

    public Decimal r{get;set;}

    public Decimal t{get;set;}

    public Decimal result{get;set;}

    

    public void calc()

    {

        result = (p*r*t)/100;

    }

   }

Code of VisualForce Page:

<apex:page controller="SIController">

   

   <apex:pageBlock title="si">

       

       <apex:pageBlockSection>

            <apex:form>

           <apex:inputText value="{!p}" label="Enter p" /> <br/><br/>

        <apex:inputText value="{!r}" label="Enter r" /><br/><br/>

        <apex:inputText value="{!t}" label="Enter t" /><br/><br/>

        <apex:commandButton value="Calculate" action="{!calc}" />

          </apex:form>

       </apex:pageBlockSection>

        <apex:pageBlockSection>

            <apex:outputText value="{!result}" />

       </apex:pageBlockSection>

    </apex:pageBlock>

        

        

</apex:page>

MVC Architecture in Visualforce

M → Model

Salesforce Objects (Account, Contact, Student__c)

V → View

Visualforce Page

C → Controller

Apex Class

Example 2: Student Registration System

We will create:

• Input form
• Save student data
• Show message

---

Step 1: Create Custom Object

Create Object:

Student__c

Fields:

Field	Type
Name	Text
Email__c	Email
Course__c	Text

---

Step 2: Create Apex Controller

Go to:

Setup → Apex Classes → New

Class Name:

StudentController

Code:

public class StudentController {

    public Student__c stu {get;set;}

    public StudentController() {
        stu = new Student__c();
    }

    public void saveStudent() {

        insert stu;

        ApexPages.addMessage(
            new ApexPages.Message(
                ApexPages.Severity.CONFIRM,
                'Student Registered Successfully'
            )
        );

        stu = new Student__c();
    }
}

---

Step 3: Create Visualforce Page

Page Name:

StudentRegistration

Code:

<apex:page controller="StudentController">

    <apex:form>

        <apex:pageMessages/>

        <apex:pageBlock title="Student Registration Form">

            <apex:pageBlockSection columns="1">

                <apex:inputText value="{!stu.Name}" label="Student Name"/>

                <apex:inputText value="{!stu.Email__c}" label="Email"/>

                <apex:inputText value="{!stu.Course__c}" label="Course"/>

                <apex:commandButton
                    value="Register"
                    action="{!saveStudent}"/>

            </apex:pageBlockSection>

        </apex:pageBlock>

    </apex:form>

</apex:page>

Example 3: Display Records in Table

Now we will show all students.

---

Controller Code

public class StudentListController {

    public List<Student__c> students {get;set;}

    public StudentListController() {

        students = [
            SELECT Id, Name, Email__c, Course__c
            FROM Student__c
        ];
    }
}

---

Visualforce Page

<apex:page controller="StudentListController">

    <apex:pageBlock title="Student List">

        <apex:pageBlockTable value="{!students}" var="s">

            <apex:column value="{!s.Name}"/>

            <apex:column value="{!s.Email__c}"/>

            <apex:column value="{!s.Course__c}"/>

        </apex:pageBlockTable>

    </apex:pageBlock>

</apex:page>


Visualforce with CSS
<style>
    .title{
        color:red;
        font-size:30px;
    }
</style>

<h1 class="title">Welcome</h1>


Visualforce with JavaScript
<script>
function showMsg(){
    alert("Welcome");
}
</script>


Navigation in Visualforce (Salesforce)
What is Navigation in Visualforce?

Navigation means:

Moving from one page to another page in Salesforce using buttons, links, URLs, or Apex controllers.

In Visualforce, navigation is used for:

Opening another Visualforce page
Redirecting to record detail page
Navigating after save/delete
Opening external websites
Moving between pages dynamically

1. Simple URL Navigation
Example
Create two Visualforce pages.

Home Page
Page Name:
HomePage

Code:
<apex:page>

    <h1>Welcome to Home Page</h1>

    <a href="/apex/AboutPage">
        Go To About Page
    </a>

</apex:page>


About Page
Page Name:
AboutPage

Code:
<apex:page>

    <h1>Welcome to About Page</h1>

    <a href="/apex/HomePage">
        Back To Home
    </a>

</apex:page>


Output
Home Page
   ↓
Click Link
   ↓
About Page


Explanation
<a href="/apex/AboutPage">


/apex/ is used to open Visualforce pages.


AboutPage is Visualforce page name.



2. Navigation Using apex:commandButton
Example
<apex:page>

    <apex:form>

        <apex:commandButton
            value="Go To Contact Page"
            action="/apex/ContactPage"/>

    </apex:form>

</apex:page>