Eind december 2018 kreeg ik een telefoontje van mijn hoster dat mijn website problemen had, de database stond dermate te stuiteren dat ook andere klanten op de shared omgeving er last van hadden. De site is daarom uitgeschakeld, de site is overgezet naar een VPS. De "oude" site draaide op basis van Wordpress, dit leek me de uitgelezen mogelijkheid om een nieuwe site op te zetten en dat op basis van Umbraco te doen.
Wil je zelf hier ook mee gaan testen/ontwikkelen? Maak dan een eigen subdomein aan op jouw ontwikkelomgeving. Zet dan een .htaccess en een .htpassword bestand in je root-map van dat subdomein zodat er geen botjes/zoekmachines jouw testsite gaan indexeren. In je .htpassword-bestand zet je de gebruikersnaam en een base64-encoded waarde voor het wachtwoord. Gebruik daarvoor dit formulier: http://www.htaccesstools.com/htpasswd-generator/
Dan moet je nog een stukje code in je .htaccess bestand zetten, namelijk de locatie van het .htpassword-bestand. Zet daarvoor tijdelijk een bestand met bijvoorbeeld de naam info.php in je root-map en zet daarin de volgende code:
<?php
phpinfo();
?>
Open deze pagina in je browser, ergens moet je dan de waarde van '_SERVER["SCRIPT_FILENAME"]' tegenkomen. Dat zal iets zijn als c:\www\inetpub\wwwroot\devsite\info.php. Daarmee weet je voldoende, dus je kunt het info.php-bestand weer verwijderen. Plaats daarna de volgende code in je .htaccess-bestand:
AuthType Basic
AuthName "ontwikkelsite"
AuthUserFile c:\www\inetpub\wwwroot\devsite\.htpasswd
require valid-user
Zo, daarmee is de boel afgeschermd voor de buitenwereld. Ik heb eerder wat met Umbraco geprobeerd (zie blog 1 en blog 2) en ik heb de ééndaagse Fundamentals-training gehad, maar dat is alweer diep weggezonken. Bij die training ook de voorbeelden welke we toen gevolgd hebben in PDF-formaat ontvangen, dus hier eerst even mee aan de slag. Een dev-omgeving aangemaakt op mijn VPS, de eerder genoemde .htaccess en .htpassword geplaatst, de gedownloade bestanden van https://our.umbraco.org/download via FTP over gezet en daarna de installatie gestart. Omdat ik met een mySQL-database werk gekozen voor custom install (dan krijg je namelijk de keuze voor het type database en kun je de credentials invoeren), daarna de melding van de Machine Key (ja, installeer maar) en de demo-site (nee, die doen we niet). Daarna krijg ik een foutmelding dat er geen/onvoldoende rechten zijn om de ~/media map aan te maken / aan te passen. Ingelogd op mijn VPS en de gebruiker "groep van toepassingen" (begint meestal met een I) de rechten om te schrijven en aanpassingen door te voeren op mijn map waar ik Umbraco installeer. Daarna gaat het wel goed.
Na de installatie gaan we een aantal zaken aanpassen in de web.config. We gaan namelijk de DEBUG-mode aanzetten zodat je bij fouten te zien krijgt welke fouten er optreden (standaard staat dat uit en als je jouw site live gaat zetten moet je die DEBUG-mode natuurlijk daar uit zetten). Hetzelfde geldt voor het weergeven van fouten. Dit staat standaard op RemoteOnly, maar ik wil tijdens het ontwikkelen zien wat er fout gaat, dus zet de waarde op Off. Tevens draait mijn site op HTTPS, maar op HTTP is de site ook nog te bereiken. HTTPS begint de standaard te worden, dus in de web.config wil ik afdwingen dat als je naar /umbraco gaat (de back-office) je naar HTTPS gaat, maar ook als je de site bezoekt dat je automatisch naar de secure versie gaat. Dat doe je door de volgende regels in de Web.config in de root aan te passen of toe te voegen:
<!-- dit was false -->
<add key="umbracoUseSSL" value="true" />
<!-- bovenstaande zorgt dat /umbraco altijd op https bereikbaar is. maar ik wil natuurlijk ook de site zelf op HTTPS afdwingen-->
<!-- zet daarvoor je rewrites / rules aan en voeg daarin onderstaande toe, als alles werkt kun je "Temporary" vervangen door "Permanent": -->
<rule name="Redirect to HTTPS" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:0}" redirectType="Temporary" appendQueryString="true" />
</rule>
<!-- debug was false, op true gezet -->
<compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.5" numRecompilesBeforeAppRestart="50">
<!-- waarde was RemoteOnly, als de site live gaat dus weer terugzetten! -->
<customErrors mode="Off" />
Hiermee hebben we een blanco Umbraco-omgeving. De flow zoals je die volgens de Fundamentals-cursus volgt is:
- Stel eerst je document types in
- Zet daarna de content-structuur op
- Ontwerp of pas de sjablonen (templates) aan om de weergave te tonen zoals je die wilt hebben
- En wil je zaken net wat anders afhandelen of aanpassen, doe het dan in de Razor-templates
Dus voor ik kan beginnen moet/wil ik eerst nadenken over de structuur die de site moet krijgen en hoe deze eruit moet zien. Ik had nog een gratis UI-kit liggen, de Monica UI-kit. Het is een sjabloon voor een winkel die kleding verkoopt, maar ook prima te gebruiken voor mijn website.
Ik ben ongeveer 2 dagen bezig geweest met het HTML-sjabloon voor de startpagina. Niet 2 volledige dagen, maar er gaat wel even wat tijd in zitten. Hierna heb ik de documenttypes aangemaakt. Layout voor het header- en footerdeel, hierna de Homepage, Productpagina, Specialpagina en Blogpagina.
Bij Document Types heb ik de volgende types (met sjabloon) aangemaakt:
- Homepage
- Productpage.
Hier heb ik een tab "ProductPage" toegevoegd met een tags-element.
Zo kan ik in Umbraco een "tag" toevoegen (heren, dames, kids) en dat afvangen in de Razor-template:
var Helper = new SiteHelper();
var productList = Helper.GetSiteProducts(String.Join(",", Model.Content.ProductCategory), true);
var categoryProductsEnumerator = productList.GetEnumerator();
- Productdetailpage
- Specialpage. Deze is bedoeld voor speciale acties.
Bevat een tab "PageDetails" met een Title, Startdate, Enddate, Description, Link.
Via een Composition "SpecialPageHeader" kan een afbeelding ingesteld worden.
- Clickpage. In het Razor-template staat de code om de pagina door te sturen naar de affiliate-site.
- Zoekresultaten. Overzicht van waar op gezocht is.
In mijn helper cache ik zoekresultaten zodat niet continu HTTP-calls uitgevoerd hoeven worden.
var Helper = new SiteHelper();
var searchResults = Helper.GetSearchResults(Request["search"], Session);
var searchResultsEnumerator = searchResults.GetEnumerator();
SiteProduct currentProduct = null;
- Adminpage. Hier zit een "beveiligd" checkbox op, waarmee je aan kunt geven of de pagina verborgen moet worden in het site-menu.
Tevens een dropdown waarin de Partial-view gekozen kan worden die getoond moet worden.
@if (Model.Content.HasValue("partial"))
{
PartialName = Helper.GetPartialName(Umbraco.Field("partial").ToString());
if (string.IsNullOrEmpty(PartialName) == false)
{
@Html.Partial(PartialName);
}
}
- Mapje Components. Deze bevat het type/sjabloon SpecialPageHeader voor de afbeelding bovenaan sommige pagina's.
Bij Templates heb ik 2 masterpages, de AdminLayout en de Layout (voor de site).
Hier staan de sjablonen voor de Adminpage, Clickpage, Productdetailpage, Zoekresultaten, Homepage, Productpage en Specialpage.
Ik heb enkele Partial Views. Hier zijn 2 views voor het admin-deel, het overzicht van producten die nog beoordeeld moeten worden en één voor het tonen van 1 product dat je dan kunt beoordelen (moet het op de site, onder welk deel, moet het op de homepage ja of nee).
De Zoekbalk die ik op alle productoverzichten toon.
En onder het mapje Components de SpecialPageHeader die checkt of er een afbeelding getoond moet worden:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ISpecialPageHeader>
@{
var mediaItem = Model.Content.HeaderImage;
}
@if (mediaItem != null)
{
<img src="@Model.Content.HeaderImage.Url" class="img-fluid" />
}
In de paginaboom is de Homepage, Product (detailpagina), Click-pagina en Zoekresultaten een "root"-node. Onder de Homepage wordt de site verder opgebouwd.
Tot zover heb ik een werkende site. Maar er moet nog flink wat gebeuren. Bij mijn wordpress-site plaatste ik automatisch producten op mijn Facebookpagina en werd het ook via Twitter gedeeld. Een goede manier om publiek te trekken. Facebook heeft allemaal barrières opgeworpen om items te delen, dus dat zal nog een uitzoekklus worden. Het eerstvolgende actiepunt daarna zal het onderhoudbaar maken van de producten zijn. Op de testomgeving heb ik op basis van https://skrift.io/articles/archive/sections-and-trees-in-umbraco-7/ een opzetje gemaakt, maar nu ik zelf in de API een aantal CRON-taken ingericht heb ga ik dit misschien nog wel wat anders doen. Of toch niet. Mooi punt voor een volgend blog-item.