dsd business internet

Een autodealer websitebouwen met

Form2Content

René Kreijveld ! @renekreijveld

Joomladagen, 11 april 2015

1

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

dsd business internet3

Mila

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

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

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

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

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

dsd business internet

www.form2content.com• 2 versies: LITE (gratis) en PRO (betaald) • PRO: meer opties, uitgebreidere contenttypes,

meer veldtypeshttp://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

dsd business internet

www.form2content.com• Couponcode:

JOOMLADAGEN • 25% korting voor alle extensies • Geldig tot en met 7 juni 2015

10

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

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 (dropdown) • brandstof - single select list (dropdown) • bouwjaar - single select list (dropdown) • kmstand - tekst • prijs - tekst

dsd business internet

Velden toevoegen

15

• prijsreeks - single select list (dropdown) • beschrijving - multi-line text (editor) • foto’s - image gallery

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 voor de vervolgtekst • Ideaal om alle velden terug te vinden in template • Templates staan in: /media/com_form2content/templates

• Handig: template cheat sheet

21

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 • {$JOOMLA_CATEGORY_ID} - Cat. ID artikel • {ldelim} - { • {rdelim} - } • Selectlist/Radion buttons

{$VELDNAAM} - Gekozen waarde {$VELDNAAM_TEXT} - Getoonde waarde

24

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

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

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! F2C Artikel Manager

29

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

dsd business internet

In de praktijk• Meerdere auto’s en Form2Content zoekmodule

toegevoegd:http://autodealer3.dev/autos

31

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

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

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

dsd business internet

Vragen?

35