This document discusses using Form2Content (F2C) to build a car sales website. F2C allows defining content types and fields to create structured articles without HTML knowledge. It summarizes setting up a cars content type with fields for brand, type, etc. and uploading images. Templates are used to display the field values and images in articles. The document demonstrates building a car sales site using F2C with features like search, editing articles, and database lookups.
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Building a Car Sales website with Form2Content
1. dsd business internet
Building a carsales
website with
Form2Content
René Kreijveld ! @renekreijveld
J and Beyond 2015, may 29th 2015
1
2. dsd business internet
René Kreijveld
• Webdeveloper at dsd business internet
php | html | css | mysql | javascript | jquery | linux
• Social media:
! https://twitter.com/renekreijveld
" https://nl-nl.facebook.com/rene.kreijveld
# https://instagram.com/renekreijveld
http://www.slideshare.net/renekreijveld
$ https://github.com/renekreijveld
% https://www.linkedin.com/in/renekreijveld
• Personal: play drums, music, reading
movies, huntingdog training with Mila, my Bracco
Italiano
2
4. dsd business internet
Form2Content
• Content Construction Kit (CCK)
• Many field types
• Data collection through data entry forms
• Store collected data with a predefined layout into a
Joomla article
• Data can be altered later, the Joomla article is then
refreshed
• Result: very structured and consistent Joomla
articles without HTML knowledge for the editor
4
5. dsd business internet
Content types
• Define the type of content
• Contain default settings for the Joomla article
(title/category/metadata etc.)
• Define the fields in the content type
• Example content types:
Blogpost, News article, Event description; Car,
Client profile
5
6. dsd business internet
Field types (bold = pro version)
• Checkbox
• Database lookup (single)
• Database lookup (multi)
• Date picker
• Display list
• E-mail
• File upload
• Geo coder
• Hyperlink
6
• IFrame
• Image
• Image gallery
• Info text
• Multiselect (checkbox)
• WYSIWYG editor
• Textarea
• Textfield
• Select list
7. dsd business internet
Templates
• There are three kinds of templates:
• Template for the article intro text
• Template for the article main text
• Template for the data entry form
• Template language: Smarty, combined with HTML,
CSS, Javascript
7
8. dsd business internet
Smarty
• Template engine for PHP
• {if} … {else} … {/if}
• {foreach} … {/foreach}
• {php} … {/php}
• Date/time functions
• Variables
• And more, see: http://www.smarty.net
8
9. dsd business internet
www.form2content.com
• 2 versions: LITE (free) and PRO (paid)
• PRO: more options, bigger content types, more
field types
http://www.form2content.com/faqs/f2c-pro-lite-
comparison-chart
• Extra extensions: f2c search, submit mailer,
edit article button, related articles plugin & more
• € 35,- 6 months / € 50,- 12 months
9
12. dsd business internet
Carsales website
• Every car is described in one article
• Articles go into category “For Sale” or “Sold”
• Properties: brand, type, registration id,
transmission, fuel, year, milage, price, description,
pictures
• Frontend contentmanagement with Form2Content
• Three additional extensions:
Akeeba Backup, JCE, NoNumber Modals
12
15. dsd business internet
Add fields
15
• brand - text
• type - text
• transmission - single select list (dropdown)
• fuel - single select list (dropdown)
• year - single select list (dropdown)
• milage - text
• price - text
16. dsd business internet
Add fields
16
• description - multi-line text (editor)
• images - image gallery
21. dsd business internet
Content templates
• Default intro template is for the intro text
• Default main template is for the main text
• Great tool to find all fields in the template
• Templates are stored in:
/media/com_form2content/templates
• Helpful: template cheat sheet
21
24. dsd business internet
Template basics
• {$JOOMLA_TITLE} - Article title
• {$JOOMLA_ARTICLE_LINK} - Link to article
• {$JOOMLA_CATEGORY_ID} - Category ID article
• {ldelim} - Left delimiter { (plugins)
• {rdelim} - Right delimiter }
• Select list/Radio buttons
{$FIELDNAME} - Chosen value
{$FIELDNAME_TEXT} - Displayed value
24
25. dsd business internet
Template basics
• Image gallery:
{$FIELDNAME} - Pad naar folder met foto’s
{$FIELDNAME_PATH_ABSOLUTE}
{$FIELDNAME_PATH_RELATIVE}
{$FIELDNAME_URL_ABSOLUTE}
{$FIELDNAME_URL_RELATIVE}
• {$FIELDNAME_URL_ABSOLUTE}thumbs/
{$FIELDNAME_IMAGES[0].FILENAME} -
First image
25
31. dsd business internet
Details button
• The View details button is not needed in full article
view.
• This can be fixed by adding a small css snippet:
• This snippet is added to the intro template.
• We then need to refresh the articles.
• Modify template
31
32. dsd business internet
Putting it all together
• Multiple cars
• Added database lookup for Brands
• Added the Form2Content search
• Added Edit article button plugin
http://carsales3.demo
32
33. dsd business internet
Final thoughts …
• With F2C you can accomplish very structured and
consistent frontend article editing.
• Modify a template and very easy update all your
articles.
• Frontend: you will need Mootools.
• You can create templates for the forms. Combined
with jQuery you can create very powerful dynamic
forms.
• You have seen just the basics :-)
33