Presentatie voor de Joomladagen 11 april 2015.

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

3. dsd business internet3
Mila

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

10. dsd business internet
www.form2content.com
• Couponcode:
JOOMLADAGEN
• 25% korting voor alle extensies
• Geldig tot en met 7 juni 2015
10

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

12. dsd business internet
Categorie instellingen
12

13. dsd business internet
Nieuw inhoudstype
13

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

16. dsd business internet
Inhoudstype velden
16

17. dsd business internet
Inhoudstype velden
17
phpMyAdmin

18. dsd business internet
Menuknop auto’s
18
• details menuknop

19. dsd business internet
Menuknop beheer
19
• details menuknop

20. dsd business internet
Demo auto invoer
• http://autodealer1.dev/
20

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

22. dsd business internet
Standaard intro
22

23. dsd business internet
Gewenste layout
23

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

26. dsd business internet
Template basics
• {foreach from=$VELDNAAM_IMAGES
item=GALLERYIMAGE}
<a href="{$VELDNAAM_URL_ABSOLUTE}
{$GALLERYIMAGE.FILENAME}">
<img src="{$VELDNAAM_URL_ABSOLUTE}
thumbs/{$GALLERYIMAGE.FILENAME}">
</a>&nbsp;
{/foreach}
• Template cheat sheet
26

27. dsd business internet27
Intro template

28. dsd business internet28
Vervolg template

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

35. dsd business internet
Vragen?
35