Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
dsd business internet
Een autodealer website

bouwen met


Form2Content
René Kreijveld ! @renekreijveld



Joomladagen, 11...
dsd business internet
René Kreijveld
• Webdeveloper bij dsd business internet

php | html | css | mysql | javascript | jqu...
dsd business internet3
Mila
dsd business internet
Form2Content
• Content Construction Kit (CCK)
• Veel verschillende veldtypes
• Dataverzameling via d...
dsd business internet
Inhoudstypes
• Definieert de contentsoort
• Bevat instellingen voor het te genereren artikel

(titel/...
dsd business internet
Veldtypes
• Checkbox
• Database lookup (single)
• Database lookup (multi)
• Datum picker
• Display l...
dsd business internet
Templates
• Drie soorten templates:
• Template voor de artikel introtekst
• Template voor de artikel...
dsd business internet
Smarty
• Template engine voor PHP
• {if} … {else} … {/if}
• {foreach} … {/foreach}
• {php} … {/php}
...
dsd business internet
www.form2content.com
• 2 versies: LITE (gratis) en PRO (betaald)
• PRO: meer opties, uitgebreidere c...
dsd business internet
www.form2content.com
• Couponcode:



JOOMLADAGEN

• 25% korting voor alle extensies
• Geldig tot en...
dsd business internet
Autodealer website
• Elke auto wordt beschreven in 1 artikel
• Artikelen in categorie “Te koop” of “...
dsd business internet
Categorie instellingen
12
dsd business internet
Nieuw inhoudstype
13
dsd business internet
Velden toevoegen
14
• merk - database lookup
• type - tekst
• transmissie - single select list (drop...
dsd business internet
Velden toevoegen
15
• prijsreeks - single select list (dropdown)
• beschrijving - multi-line text (e...
dsd business internet
Inhoudstype velden
16
dsd business internet
Inhoudstype velden
17
phpMyAdmin
dsd business internet
Menuknop auto’s
18
• details menuknop
dsd business internet
Menuknop beheer
19
• details menuknop
dsd business internet
Demo auto invoer
• http://autodealer1.dev/
20
dsd business internet
Template aanpassen
• Standaard intro template is voor de introtekst
• Standaard main template is voo...
dsd business internet
Standaard intro
22
dsd business internet
Gewenste layout
23
dsd business internet
Template basics
• {$JOOMLA_TITLE} - Artikel titel
• {$JOOMLA_ARTICLE_LINK} - Link naar artikel
• {$J...
dsd business internet
Template basics
• Foto gallerij:

{$VELDNAAM} - Pad naar folder met foto’s

{$VELDNAAM_PATH_ABSOLUTE...
dsd business internet
Template basics
• {foreach from=$VELDNAAM_IMAGES
item=GALLERYIMAGE}

<a href="{$VELDNAAM_URL_ABSOLUT...
dsd business internet27
Intro template
dsd business internet28
Vervolg template
dsd business internet
Let op!
• Na aanpassing template, deze opnieuw toewijzen
aan eerder gemaakte, bestaande artikelen!

...
dsd business internet
In de praktijk
• Blog view met introteksten per auto:



http://autodealer2.dev/autos

• Detail view...
dsd business internet
In de praktijk
• Meerdere auto’s en Form2Content zoekmodule
toegevoegd:



http://autodealer3.dev/au...
dsd business internet
Form2Content extras
• http://www.form2content.com/download/f2c-pro
• http://www.form2content.com/dow...
dsd business internet
Laatste gedachten …
• Met F2C zeer gestructureerde en consistente
invoer van content mogelijk
• Hand...
dsd business internet
Zelf aan de slag
• Het auto inhoudstype en de gebruikte templates
zijn te vinden in mijn Github repo...
dsd business internet
Vragen?
35
Nächste SlideShare
Wird geladen in …5
×

Een autodealer website bouwen met Form2Content

1.740 Aufrufe

Veröffentlicht am

Presentatie voor de Joomladagen 11 april 2015.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Een autodealer website bouwen met Form2Content

  1. 1. dsd business internet Een autodealer website
 bouwen met 
 Form2Content René Kreijveld ! @renekreijveld
 
 Joomladagen, 11 april 2015 1
  2. 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. 3. dsd business internet3 Mila
  4. 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. 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. 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. 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. 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. 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. 10. dsd business internet www.form2content.com • Couponcode:
 
 JOOMLADAGEN
 • 25% korting voor alle extensies • Geldig tot en met 7 juni 2015 10
  11. 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. 12. dsd business internet Categorie instellingen 12
  13. 13. dsd business internet Nieuw inhoudstype 13
  14. 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. 15. dsd business internet Velden toevoegen 15 • prijsreeks - single select list (dropdown) • beschrijving - multi-line text (editor) • foto’s - image gallery
  16. 16. dsd business internet Inhoudstype velden 16
  17. 17. dsd business internet Inhoudstype velden 17 phpMyAdmin
  18. 18. dsd business internet Menuknop auto’s 18 • details menuknop
  19. 19. dsd business internet Menuknop beheer 19 • details menuknop
  20. 20. dsd business internet Demo auto invoer • http://autodealer1.dev/ 20
  21. 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. 22. dsd business internet Standaard intro 22
  23. 23. dsd business internet Gewenste layout 23
  24. 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. 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. 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. 27. dsd business internet27 Intro template
  28. 28. dsd business internet28 Vervolg template
  29. 29. dsd business internet Let op! • Na aanpassing template, deze opnieuw toewijzen aan eerder gemaakte, bestaande artikelen!
 
 F2C Artikel Manager 29
  30. 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. 31. dsd business internet In de praktijk • Meerdere auto’s en Form2Content zoekmodule toegevoegd:
 
 http://autodealer3.dev/autos 31
  32. 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. 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. 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. 35. dsd business internet Vragen? 35

×