1. dsd business internet
Een autodealer website
bouwen met
Form2Content
René Kreijveld ! @renekreijveld
Joomladagen, 11 april 2015
1
2. dsd business internet
René Kreijveld
• Webdeveloper bij 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
• Persoonlijk: drums spelen, muziek,
lezen, films, jachthondentraining met Mila, mijn
Bracco Italiano
2
4. dsd business internet
Form2Content
• Content Construction Kit (CCK)
• Veel verschillende veldtypes
• Dataverzameling via data invoer formulieren
• Verzamelde data via template (sjabloon) naar
Joomla artikel
• Data is achteraf gemakkelijk te wijzigen
• Resultaat: zeer gestructureerde Joomla artikelen
zonder HTML kennis
4
5. dsd business internet
Inhoudstypes
• Definieert de contentsoort
• Bevat instellingen voor het te genereren artikel
(titel/categorie/meta instellingen enz.)
• Definitie van de velden in het content type
• Voorbeeld contentsoorten:
Blog artikel; Nieuwsbericht; Evenement
beschrijving; Bedrijfspand; Auto.
5
6. dsd business internet
Veldtypes
• Checkbox
• Database lookup (single)
• Database lookup (multi)
• Datum picker
• Display list
• E-mail
• Bestand upload
• Geo coder
• Hyperlink
6
• IFrame
• Afbeelding
• Afbeelding gallerij
• Info tekst
• Multiselect (checkbox)
• WYSIWYG editor
• Textarea
• Tekstveld
• Select lijst
7. dsd business internet
Templates
• Drie soorten templates:
• Template voor de artikel introtekst
• Template voor de artikel vervolgtekst
• Template voor het data invoer formulier
• Template taal: Smarty, gecombineerd met HTML,
CSS, Javascript
7
8. dsd business internet
Smarty
• Template engine voor PHP
• {if} … {else} … {/if}
• {foreach} … {/foreach}
• {php} … {/php}
• Datum/tijd functies
• Variabelen
• En meer, zie: http://www.smarty.net
8
9. dsd business internet
www.form2content.com
• 2 versies: LITE (gratis) en PRO (betaald)
• PRO: meer opties, uitgebreidere contenttypes,
meer veldtypes
http://www.form2content.com/faqs/f2c-pro-lite-
comparison-chart
• Extra extensies: f2c search, submit mailer,
edit artikel knop, related articles plugin en meer
• € 35,- 6 maanden / € 50,- 12 maanden
9
11. dsd business internet
Autodealer website
• Elke auto wordt beschreven in 1 artikel
• Artikelen in categorie “Te koop” of “Verkocht”
• Kenmerken: merk, type, kenteken, transmissie,
brandstof, bouwjaar, kmstand, prijs, prijsreeks,
beschrijving, foto’s
• Frontend contentbeheer met Form2Content
11
14. dsd business internet
Velden toevoegen
14
• merk - database lookup
• type - tekst
• transmissie - single select list (dropdown)
• brandstof - single select list (dropdown)
• bouwjaar - single select list (dropdown)
• kmstand - tekst
• prijs - tekst
15. dsd business internet
Velden toevoegen
15
• prijsreeks - single select list (dropdown)
• beschrijving - multi-line text (editor)
• foto’s - image gallery
21. dsd business internet
Template aanpassen
• Standaard intro template is voor de introtekst
• Standaard main template is voor de vervolgtekst
• Ideaal om alle velden terug te vinden in template
• Templates staan in:
/media/com_form2content/templates
• Handig: template cheat sheet
21
24. dsd business internet
Template basics
• {$JOOMLA_TITLE} - Artikel titel
• {$JOOMLA_ARTICLE_LINK} - Link naar artikel
• {$JOOMLA_CATEGORY_ID} - Cat. ID artikel
• {ldelim} - {
• {rdelim} - }
• Selectlist/Radion buttons
{$VELDNAAM} - Gekozen waarde
{$VELDNAAM_TEXT} - Getoonde waarde
24
25. dsd business internet
Template basics
• Foto gallerij:
{$VELDNAAM} - Pad naar folder met foto’s
{$VELDNAAM_PATH_ABSOLUTE}
{$VELDNAAM_PATH_RELATIVE}
{$VELDNAAM_URL_ABSOLUTE}
{$VELDNAAM_URL_RELATIVE}
• {$VELDNAAM_URL_ABSOLUTE}thumbs/
{$VELDNAAM_IMAGES[0].FILENAME} -
Eerste afbeelding
25
29. dsd business internet
Let op!
• Na aanpassing template, deze opnieuw toewijzen
aan eerder gemaakte, bestaande artikelen!
F2C Artikel Manager
29
30. dsd business internet
In de praktijk
• Blog view met introteksten per auto:
http://autodealer2.dev/autos
• Detail view met intro en main tekst onder elkaar:
http://autodealer2.dev/autos/3-mooie-skoda-octavia
30
31. dsd business internet
In de praktijk
• Meerdere auto’s en Form2Content zoekmodule
toegevoegd:
http://autodealer3.dev/autos
31
32. dsd business internet
Form2Content extras
• http://www.form2content.com/download/f2c-pro
• http://www.form2content.com/download/f2c-search
• http://www.form2content.com/download/f2c-kml-
feeds
• http://www.form2content.com/download/f2c-plugins
• http://www.form2content.com/download/joomla-
content-restriction-plugin
32
33. dsd business internet
Laatste gedachten …
• Met F2C zeer gestructureerde en consistente
invoer van content mogelijk
• Handig: na een template aanpassing met één klik
alle Joomla artikelen opnieuw laten genereren
• Frontend: Mootools nodig
• Voor invoerformulieren kun je ook eigen templates
gebruiken; in combinatie met jQuery zéér krachtige
dynamische formulieren mogelijk
• Je hebt hier pas het begin gezien :-)
33
34. dsd business internet
Zelf aan de slag
• Het auto inhoudstype en de gebruikte templates
zijn te vinden in mijn Github repository:
https://github.com/renekreijveld/autodealer
34