Friday, 22 June 2012

How to Create Your Own Website: The Beginner's A-Z Guide

It hits you like a TON of BRICKS! You've got a KILLER idea and you want the entire world to see it. With the idea fresh in your mind you sit down and BANG it's out there and then it sinks into you...."how do I show it to the entire world?"

Well you make your own website: unless all you want is a Facebook fan page.

It's true that these days there are a quite a few websites out there which helps you to make a website!!! But think about it for a second. Did Mark Zuckerberg ask someone else to write facebook for him? or did Larry and Sergey hire someone to make google? NO, well as a matter of fact Hell No.

You have an idea and if you want to make it the way you want it to, there is only one way to do it. Your Way. 

So how do we actually start making a website? Some might tell you to get a domain name, then get a web host, then design the web page using CSS (a pinch of Javascript if required) and finally depending on the complexity you might have to do some server side scripting and your done. Well any idiot with a CS degree knows this...the question is what is the exact way of doing it?

Well there are many ways out there, and I thought of this one particular way which is easy and efficient. 

Introducing,  well to be honest, if are not into sales or CRM the chances of you hearing about Salesforce is pretty less. is a software as a service company that distributes business software on a subscription basis. Like all CRM software it captures, records and organises information from the present or prospective customers from different departments of the company. That's pretty much about Salesforce, we on the other hand are interested on how to make a website.

There are some basic things which you need to know about Salesforce before we start making our website. 

The first one is VisualForce: This is where you do your front-end design. Salesforce has got it's own components for VisualForce like buttons, text-boxes, drop-down menus things like that. This would look like HTML, so if you can understand HTML understanding VisualForce should not be that difficult. You can also use HTML or JavaScript or CSS.

The second is Apex: Apex is a language which Salesforce has created. It looks very similar to Java and those who know Java, Apex should be a walk in the park. Apex is used to write classes. Let's say you would like to add some functionality to the pages like query some items from a database and filter it with a set of parameters. Well that is where Apex comes handy, you can create classes and write your business logic in those classes and call those classes in your VisualForce page. You can write all these classes in Eclipse, by either downloading a plugin or download the entire Eclipse is available from Salesforce.

And finally Sites: Another fact about Salesforce is that it is a Software As A Service (SAAS) platform. So everything is on the cloud. Since things are on the cloud, there are a lot of security issues. Once you design your webpages in VisualForce, write your classes in Apex you need to you give the necessary permission through sites. Sites allows you to create your own domain and let the general public see what you've made. But before the public can see what you've made you need to give access to each and every component that you've used in your VisualForce pages.

So shall we crack on with it?

First of all we need to create an account on Salesforce. You can do that by going to

The registration is fairly simple and after you've finished with the it you can login on

Once you've logged in your page would something like this...

Once you see this page, on the top right hand-side of the page you would see your name. Click on your name and go to setup.

After you are in the setup page, on the left hand side you would see something called Develop, click on that and it would expand. Inside that there is an option called Pages. This is the one that would help us create our web-pages. 

Click on the new button and it would take you to a page, it would look something like this.

As you can see I have already entered some data and I have done some coding. In the Label part you can select the name of the web-page.  I have entered "testPage" as the label name and if you look closely I have done some VisualForce coding. Here is the VisualForce code

<apex:page sidebar="false" showHeader="true" standardController="TestDatabase__c" extensions="MyPageController">

    <apex:pageBlock title="Personal Details">
        <apex:form >
            <apex:pageBlockSection collapsible="true" columns="2" title="Name">
                <apex:inputField value="{!TestDatabase__c.firstName__c}" label="First Name"/>
                <apex:inputField value="{!TestDatabase__c.lastName__c}" label="Last Name"/>
            <apex:pageBlockSection collapsible="true" columns="2" title="Address">
                <apex:inputTextarea value="{!TestDatabase__c.address__c}" label="Address"/>
            <apex:pageBlockSection collapsible="true" columns="2" title="Contact Information">
                <apex:inputField value="{!TestDatabase__c.emailID__c}" label="Email ID"/>
                <apex:inputField value="{!TestDatabase__c.Phone_Number__c}" label="Phone number"/>
            <apex:commandButton action="{!pageSave}" value="Submit"/>

As a rule of thumb, all the VisualForce code should be done inside the apex tag which is <apex:page> </apex:page>. I have not removed the default Salesforce template, if I were to do that, I would have to use Cascading Style Sheet for formatting. Now the standard controller is like the database in Salesforce. I have created a database, which are called Objects. Now in this scenario I have created a custom object and also used and extension.

Extensions are used when you want to add some more functionality. In the above code I have added an extension as well. The extension name is the class name.

Now let us dismantle this line of code 

<apex:inputField value="{!TestDatabase__c.lastName__c}" label="Last Name"/>

The inputField is an HTML input element. It's just like an InputField in Java or .NET. The next part value="{!TestDatabase__c.lastName__c}".  TestDatabase__c is the object's name, while lastName__c is the Custom field which have created inside TestDatabase__c. And the last part which says label is simply a label duh!!!

I do admit it's a little bit confusing in the beginning but give it a couple of days and it's fairly simple. The important fact is that you need to be comfortable with the interface.

Now moving on I did mention that I used an extension for some added functionality. It is to basically do a page redirection when I click on the save button. Here is the code for that

public with sharing class MyPageController 
 private ApexPages.StandardController controller;
    public MyPageController(ApexPages.StandardController controller) 

 public PageReference pageSave()
  PageReference ref=Page.saveConformation;
  return ref;
All I am doing here is a simple page redirection which on saving would take you to another page which says, Thank You For Registering. SaveConformation is the name of the page.

Now we have the webpage finished and have a small class. All that is remaining is we have to go to Sites, and provide access to our pages. First we would have to create a domain in sites which is unique, after that add the two web-pages and you have your website ready to be served.

This is the sample website which I created

There are loads of things which can be explored in Salesforce, hope this not very small article would give you some help in creating your next idea :)

No comments:

Post a Comment