REFERENCES:
The following references have been used in building this site..
In this article i would be explaining how i built my Force.com Site. The steps explained will help you build a similar such site, you can then customize the site as per your needs...
Create a object with the following information.
Object Name: Article
| Field Label | Field Name | type |
| Article Title | Name | Text |
| Article Description | Article_Description | Text |
| Author | Author | Text |
| createdmonth | createdmonth | Formula -MONTH( DATEVALUE(CreatedDate)) |
| Category | Category | Picklist (VisualForce,Apex Class,Apex Triggers,Set-up and Config,Other) |
STEP1:
I browsed through the net for free web templates and found hundreds of them... I downloaded one such template from this link.. Click here.
This example uses the CSS file provided here. Click here to download. Upload the downloaded Zip file into Static Resource, name it SFUNEARTHEDCSS and make the cache control "PUBLIC"
STEP2:
Open the "index" HTML file provide along with the CSS and images folder... Open the file using a notepad or wordpad to view the HTML code...
You will have to modify this code ,insert visualorce tags whereever necessary and save them as visualforce pages.. This is how i did it..
STEP3:
Create a Visualforce Component to use as the Site Header. We are using components here to avoid repetition of code... In all pages the header would be the same, hence creating a component would enable reuse of code...
Setup --> Develop --> Components --> New
Create a new component with the name "SFUnearthedHeader" and paste the code below..
<apex:component >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Salesforce Unearthed</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="{!URLFOR($Resource.SFUNEARTHEDCSS,'style.css')}" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header-wrapper">
<div id="logo">
<h1><a href="http://salesforceexperts.blogspot.com">Salesforce Unearthed</a></h1>
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="/apex/SFUnearthed_Articles">Articles</a></li>
<li><a href="http://salesforceexperts.blogspot.com">Blog</a></li>
<li><a href="/apex/SFUnearthed_Resources">Resources</a></li>
<!--<li><a href="#">Time to Relax</a></li>-->
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
</div>
<!-- end #header-wrapper -->
</apex:component>I have modified the links and the link names... modify them as per your needs...
STEP 4: Creating Visualforce Pages..
I have a image stored as a Static resource named "createnewarticle"..
Save the above image to your desktop and upload as a static resource with name "createnewarticle" ....
Create a Visualforce page named "SFUnearthed_articles"
VF code is..
<apex:page showheader="false" controller="SFUnearthed" title="Salesforce Unearthed" action="{!pageload}">
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<apex:form >
<div id="page">
<div id="content">
<apex:outputpanel id="articlespace">
<apex:repeat value="{!articles}" var="article">
<div class="post">
<h2 class="title">{!article.Name}</h2>
<p class="date">{!article.Category__c}</p>
<p class="meta"><em>Posted by <a href="#">{!article.Author__c}</a> {!article.CreatedDate}</em></p>
<div class="entry">
<apex:outputtext escape="false" value="{!article.Article_Description__c}"/>
</div>
</div>
</apex:repeat>
</apex:outputpanel>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<div style="position:relative;left:40px;">
<apex:commandlink action="{!createnewarticle}"> <apex:image url="{!$Resource.createnewarticle}"/> </apex:commandlink>
</div>
<br/>
<li>
<h2>Categories</h2>
<ul>
<li><apex:commandlink value="Visualforce" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="visualforce"/></apex:commandlink></li>
<li><apex:commandlink value="Apex Class" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Class"/></apex:commandlink> </li>
<li><apex:commandlink value="Apex Triggers" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Triggers"/></apex:commandlink> </li>
<li><apex:commandlink value="Set-up and Config" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Set-up and Config"/></apex:commandlink> </li>
<li><apex:commandlink value="Others" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Other"/></apex:commandlink> </li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>
</apex:form>
</apex:page>Apex Class(controller) code is:
public class SFUnearthed
{
Public List<Article__c> latestarticle =new List<Article__c>();
public void pageload()
{
// Get the current month
datetime currentdate=system.now();
Integer currentmonth = currentdate.month();
latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where createdmonth__c=:currentmonth order by createddate limit 100];
}
Public Article__c newarticle;
public List<Article__c> getarticles()
{
return latestarticle;
}
public void category()
{
String parameter = System.currentPagereference().getParameters().get('category');
latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where category__c=:parameter order by createddate limit 100];
}
public Article__c getarticle()
{
newarticle = new Article__c();
return newarticle;
}
public Pagereference SaveArticle()
{
system.debug('Article description is'+newarticle.Article_Description__c);
insert newarticle;
Pagereference articlehome = new Pagereference('/apex/SFUnearthed_Articles');
return articlehome;
}
Public Pagereference createnewarticle()
{
Pagereference createarticle= new Pagereference('/apex/SFUnearthed_NewArticle');
return createarticle;
}
}Create a Visualforce page named "SFUnearthed_NewArticle"...
I have a image stored as a Static resource named "SaveArticle"..
Save the above image to your desktop and upload as a static resource with name "SaveArticle" ....
VF code is..
<apex:page controller="SFUnearthed" showheader="false" >
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<div id="page">
<apex:form >
<!--- Copied code from blog edit --->
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css" ></link>
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.3.0/build/utilities/utilities.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.3.0/build/container/container-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/button/button-beta-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.3.0/build/editor/editor-beta-min.js"></script>
<div style="position:relative;left:100px;">
<table cellspacing="7">
<tr><td style="text-align:right;">Title</td> <td><apex:inputtext value="{!article.Name}"/></td>
<td style="text-align:right;">Your Name</td><td><apex:inputtext value="{!article.Author__c}"/></td>
<td> Category </td> <td> <apex:inputfield value="{!article.Category__c}"/></td></tr>
</table>
</div>
<div class="yui-skin-sam" style="display:none" id="editor" align="center" >
<pre>
<apex:commandlink style="position:absolute;left:425px;" action="{!SaveArticle}" onClick="beforeTextSave()"> <apex:image url="{!$Resource.SaveArticle}"/> </apex:commandlink>
<br/>
<apex:inputtextarea id="msgpost" cols="500" rows="50" value="{!article.Article_Description__c}"/>
</pre>
</div>
<script type="text/javascript" >
var myEditor;
window.onload = function init()
{
myEditor = new YAHOO.widget.Editor('{!$Component.msgpost}', {
height: '400px', width: '722px', dompath: true, animate: true });
myEditor.render();
document.getElementById('editor').style.display='';
}
function beforeTextSave()
{
document.getElementById('{!$Component.msgpost}').value = myEditor.getEditorHTML();
}
</script>
<!-- End of copied code from blog edit -->
</apex:form>
</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</apex:page>Create a Visualforce page named "SFUnearthed_resources"
VF code is..
<apex:page showheader="false">
<apex:form >
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<div id="page">
<div id="content">
<div class="post" >
<h2 class="title">Salesforce.com Resources and Guides</h2>
<p class="date">All in one place</p>
<p class="meta"><em>Last updated on 25 Aug 2009</em></p>
<div class="entry" style="font-size:30px;">
<p> Here you can find all resources related to Salesforce.com at one place. All resources are not hosted on this site but rather would be links to other sites.</p>
<p> <strong> Visualforce </strong></p>
<p> To get started with Visualforce you will have to download the Visualforce developer's guide from <a href="http://wiki.developerforce.com/index.php/Documentation" target="_blank" >here </a>
.You can find all resources related to Salesforce.com on this page.</p>
<p> Once you get started with visualforce,you will find it difficult to refer the PDF for syntax verifications. In such cases you can click on the "Component Reference" link on your page editor to view
a complete list of all tags with the supported attributes </p>
<p> It is obvious that you will get stuck at places when you develop applications using visualforce. In such cases post your problem
on the community forums -<a href="http://community.salesforce.com" target="_blank"> Click Here </a>. Experts from around the world
will help you find solutions. </p>
</p>
</div>
</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</div>
<!-- end #content -->
</apex:form>
</apex:page>STEP5:
Its done!!!!... Now go to your site detail page and set the visualforce page "SFUnearthed_articles" as the site Home Page..
If you are not sure how to create a site then click here.