Een autodealer website bouwen met Form2Content
-
Upload
rene-kreijveld -
Category
Internet
-
view
653 -
download
4
Transcript of Een autodealer website bouwen met Form2Content
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
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> {/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