BLOG APP USING VF Pages & FORCE.COM SITES | Techila
2043
single,single-post,postid-2043,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-9.4.2,bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

BLOG APP USING VF Pages & FORCE.COM SITES

BLOG APP USING VF PAGES

BLOG APP USING VF Pages & FORCE.COM SITES

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 an 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)

STEP 1:

I browsed 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”

STEP 2:

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 Visualforce tags wherever necessary and save them as Visualforce pages. This is how I did it.

STEP 3:

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 >

<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 –>

</body>

</apex:component>

 

I have modified the links and the link names… modify them as per your needs.

STEP 4: Creating Visualforce Pages.

I have an image stored as a Static resource named “createnewarticle”.

create new article

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;”>&nbsp;</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></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 an image stored as a Static resource named “SaveArticle”.

Save Article

Save the above image to your desktop and upload as a static resource with name “SaveArticle”

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;”>&nbsp;</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></apex:form>

</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>

     </div>

 </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>

</div>

<!– end #content –>

</apex:form>

</apex:page>

STEP 5:

It’s done!  Now go to your site detail page and set the visualforce page “SFUnearthed_articles” as the site Home Page.

Courtesy: http://www.forcetree.com/2009/08/building-blog-applicationwebsite-using.html
http://www.dailyblogtips.com/wp-content/uploads/blog.jpg

“Know more about Salesforce Consulting at Techila”

Author: techila

No Comments

Post A Comment