< cTuxBoy's blog >

Hoe eigen SASS-bestanden toevoegen aan Foundation5

2014-11-25T22:49:00.000+01:00

Het Foundation5 framework voorziet al in heel wat middelen om je site aan te passen in de _settings.scss. Toch kan het handig zijn om je eigen SCSS-stijlen toe te voegen.

Maak een nieuw bestand aan bvb. _custom.scss en sla dit op in foundation-project/scss/
Importeer _custom.scss in app.scss:
@import "custom.scss";

Happy styling! ;-)

Drupal: Geheugenlimiet instellen

2014-11-01T11:11:00.000+01:00

Het is bekend dat Drupal veel resources gebruikt. Daardoor kan het voorkomen dat je een foutmelding krijgt dat het Drupal-systeem te weinig geheugen ter beschikking heeft om alles vlot te kunnen verwerken.

Standaard staat de geheugenlimiet ingesteld op 128MB.

Gelukkig is er een manier om het beschikbare geheugen manueel aan te passen.

Open het tekstbestand .htaccess (dit bestand staat in de root-folder van je Drupal installatie).

Voeg volgende regels toe aan dit bestand:

# memorylimit
php_value memory_limit 160M

In bovenstaand voorbeeld wordt het beschikbare geheugen aangepast naar 160MB. Uiteraard kun je hier ook een ander getal plaatsen.

LET OP! Mogelijk kan je hosting-provider je op de vingers tikken wanneer je teveel geheugen reserveerd voor je Drupal-systeem. Wanneer je site in productie gaat, test deze dan opnieuw met de standaard-geheugenlimiet.

Sla het bestand op en leeg de cache van je Drupal-systeem.
(Beheer > Ontwikkeling > Prestaties)

In de Statusrapportage kun je nu je beschikbare geheugen kontroleren.
(Beheer > Rapportages)

Halte Alarm app: Developer versie: Dubbele haltenamen verwijderen!

2014-09-05T23:47:00.001+02:00

Tijdens een zoekopdracht krijg je veelal dezelfde haltenamen (=haltepalen/halteaanduidingen) voor éénzelfde halte, en dit kan soms vervelend en/of verwarrend zijn!

Bijvoorbeeld als je zoekt op 'nieuwpoort stad', krijg je dit resultaat:

Hetzelfde resultaat, maar dan geografisch.

In de test-versie wordt iedere halte die meerdere halteaanduidingen heeft, omgezet naar één halteaanduiding. En dit is het resultaat voor dezelfde zoekopdracht als hierboven.
(De haltenrs (123456) worden dan ook verwijdert in deze versie, daar dit niet meer relevant is!)

... en het resultaat geografisch:

Dus geen dubbele haltenamen meer, maar één haltenaam per halte!

Voordelen:

Geen ellenlange resultatenlijsten meer met ALLE halteaanduidingen voor dezelfde haltenamen waarvan enkel het haltenr verschilt.
Snellere requests van de server (21453 haltes ipv 38535 haltes doorzoeken!)
Sneller je halte vinden.
Geen verwarring meer.

Nadeel:

Als de halteaanduidingen (haltepalen) te ver uit elkaar staan voor dezelfde halte (meer dan 50 meter!) kan dit de nauwkeurigheid beïnvloeden wanneer je de geselecteerde halte nadert. In de meeste gevallen zal dit geen noemenswaardige problemen opleveren!

Deze versie zal in de praktijk eerst grondig getest worden.
Indien de resultaten positief zijn, wordt er een nieuwe versie (1.2) uitgerold.

Wordt vervolgd...

:-)

'Halte alarm' app in de pers...

2014-09-03T15:48:00.003+02:00

Leuk om je eigen uitvinding in de pers te zien...
verschenen in het Nieuwsblad op 03/09/2014

verschenen in het Wekelijks Nieuws op 05/09/2014

En online....
http://www.nieuwsblad.be/article/detail.aspx?articleid=dmf20140902_01246872

Release notes - Halte Alarm (De Lijn) app

2014-08-31T20:33:00.001+02:00

Versie 2.1 (06/11/14)

Vanaf nu zoeken met min. 3 tekens ipv 4 tekens. Nodig voor gemeente-namen die drie tekens of minder bevatten, bvb. de gemeente 'As', kan nu opgezocht worden door 'As ' ; dus As+spatie in te voeren. (Met dank aan An Beuls voor de terechte opmerking!)

Versie 2.0 (26/10/14)

Opslaan favoriete haltes
Verbeterde User Interface
Bugfixes

Versie 1.2 (07/09/14)

Iedere halte heeft nu maar één verwijzing ipv meerdere
Verwijderen nr. haltepalen
Bugfixes

Versie 1.1 (02/09/14)

Verbeterde zoekfunctie (niet meer hoofdlettergevoelig)
Mogelijkheid om zoekopdracht te resetten (opnieuw-knop), wanneer op de backbutton wordt gedrukt.
Bugfixes

Zonder zorgen de bus of tram nemen met de Halte Alarm app!

2014-08-29T23:18:00.001+02:00

Een app die je tijdig verwittigd wanneer je moet afstappen van de bus of tram van De Lijn.
Hoe vaak gebeurt het niet dat iemand je zegt, neem deze bus en stap af aan de halte .... . Daar sta je dan! Dan maar vragen aan de chauffeur of hij je een seintje wil geven als je aan deze halte aankomt. Op de koop toe vergeet de chauffeur je te verwittigen en rijd zo de halte voorbij!
Zelfs als je dagelijks bus of tram neemt kan de app een hulpmiddel zijn, bvb. je aan het praten bent met een medereiziger en je daardoor te laat op de haltebel drukt.
Zelfs als je in slaap valt kan de app dienst doen als wekker wanneer jeje afstaphalte bereikt.
Conclusie: Stress en te laat op je afspraak!
Daar ik zelf buschauffeur ben bij De Lijn, merk ik deze problemen dagelijks op.
Zo is het idee ontstaan van deze app.

Hoe werkt de app?
Deze is zo éénvoudig mogelijk opgezet, zodat iedereen met een smartphone ermee overweg kan.
In twee stappen is de app ingesteld!

Stap1: Zoek je afstaphalte...
Zoek bij voorkeur op Gemeente of Dorp.

Wanneer je per ongeluk de verkeerde halte hebt selecteerd, kun je zonder een nieuwe zoekopdracht, terug naar de resultatenlijst door op 'xx haltes gevonden' te drukken. Handig niet!?

Stap2: Activeer Alarm!
Wanneer je het Alarm Activeert, wordt je huidige locatie gezocht. (Naargelang de GPS in je toestel kan dit tot enkele minuten duren!)
Wanneer de locatie gevonden is, zie je de afstand naar de ingestelde halte. Handig om te zien hoever je afstaphalte nog is!
Wanneer je de afstaphalte nadert, wordt je op drie manieren verwittigd:

Notificatie
Geluid
Trilfunctie

Voila, je bent tijdig verwittigd en aangekomen aan je afstaphalte!

De app is zo ontwikkeld dat deze zeer spaarzaam omgaat met energie.
Het Alarm (dus ook de GPS) kan pas geactiveerd worden nadat je een halte hebt geselecteerd, en wordt automatisch uitgeschakeld wanneer je de ingestelde halte nadert!

OPGELET: De app is een hulpmiddel, en de nauwkeurigheid van je GPS kan beïnvloed worden door de omgeving (gebouwen, bomen, weersomtandigheden, ...)

Hoe standaard-afbeelding toevoegen tijdens het delen van je site op Facebook?

2014-02-22T20:53:00.000+01:00

Laatst kreeg ik een opmerking, wanneer mijn site http://www.market-locator.com gedeeld wordt op Facebook er een logo of afbeelding ontbreekt naast de link.

Na wat zoekwerk kwam ik erachter dat je via 'Facebook' meta-tags bepaalde info kan toevoegen aan je site, en Facebook deze meta-tags gebruikt om gegevens bij de gedeelde link te plaatsen.

Om te testen hoe Facebook jou site 'scant' kun je de link ingeven op:

https://developers.facebook.com/tools/debug

In onderstaande afbeelding zie je hoe Facebook de gegevens opneemt van mijn site.

Het is eigenlijk héél simpel!

1. Maak een afbeelding van max. 200 x 200 pixels.

2. Upload deze naar je site.

3. Plaats volgende meta-tag regel tussen de <head>-tags:

<meta property="og:image" content="http://www.jouwsite.com/directory_van_je_afbeelding/afbeelding.png" />

4.Test je site nogmaals via: https://developers.facebook.com/tools/debug

Hier zie je het resultaat tijdens het delen van een link:

Het is ook mogelijk op éénvoudige wijze andere gegevens (beschrijving, title, ... ), op dezelfde manier toe te voegen vb:

<meta property="og:title" content="Titel van je site" />

<meta property="og:site_name" content="Site naam" />

...

Voor nog meer mogelijkheden, surf naar:

https://developers.facebook.com/docs/plugins/checklist/

en klik op 3. Use proper Open Graph tags to drive distribution

Succes!!!

;-)

Drupal7: Nieuwste jQuery-bibliotheek toevoegen aan je site.

2013-10-19T16:33:00.002+02:00

De jQuery-versie in de Drupal-core is meestal niet de nieuwste versie.
Op zich is dit zeker geen probleem, maar soms kan het handig zijn, vooral voor de stabiliteit en performance van je site.

Er bestaat een module: jQuery Update , maar helaas wordt hiermee ook niet de nieuwste versie toegevoegd.

Deel 1: Zelf jQuery-biblitheek toevoegen...

LET OP: verwijder NOOIT de jQuery-versie die met drupal wordt meegeleverd. Deze is nodig om de core-modules vlot te laten werken.

jQuery kun je op verschillende manieren toevoegen, nl. lokaal, of via een repo. Mijn voorkeur gaat naar de tweede mogelijkheid.

De nieuwste versie kun je via verschillende aanbieders 'binnenhalen', nl:

jquery.com
Google
Microsoft
...

Als vb. nemen we de CDN van Google. (zie hieronder)

De link in het groen zullen we in de head van je subtheme plakken.

1. Open ../sites/all/themes/je_theme/templates/html.tpl.php
(het is mogelijk dat html.tpl.php niet in de template-directory van je_theme staat. Deze kopieer je dan uit je hoofdtheme en plakt deze in de template-directory van je_theme.)

Plak nu de groene link vd Google-site tussen de head-tags van je browser.
Wijzig nu het versienr. die in de link vermeld staat naar de laatste versie: .../2.0.3/...
Zorg er wel voor dat deze jQuery-link boven de drupal $scripts staat. Dit is nodig daar anders de standaard jQuery-bibliotheek overschreven wordt.

Daar er nu jQuery bibliotheken aanwezig zijn, kan dit voor conflicten zorgen. Dit lossen we op door volgende regel toe te voegen:

<quote>
<script type="text/javascript">var $j = jQuery.noConflict();</script>
</quote>

Standaard gebruikt jQuery $ . De extra jQuery-bibliotheek geven we dus een andere alias; in ons voorbeeld $j, zo ontstaan er geen conflicten tussen beide bibliotheken.

In onderstaande schermfbeelding zie je tussen
<quote>

...

</quote>
hoe je header er zou moeten uitzien.

Je kunt controleren of de jQuery-bibliotheken actief zijn door volgende regels te typen in de console van de developer-plugin van je browser:
<quote>
jQuery().jquery
$j.jquery
</quote>
Resultaat:

In mijn voorbeeld zijn volgende bibliotheken actief: 1.10.1 en 2.0.3

Deel 2: jQuery code typen die de 2.0.3-versie gebruikt.

Maak een nieuw javscript-bestand aan met de naam custom_scripts.js in ../sites/all/themes/je_theme/js/
en voeg volgende code toe zoals in onderstaande afbeelding:

Als je nu de nieuwste jQuery-versie wil gebruiken voeg je gewoon de code toe in het bovenste gedeelte waar // jQuery code staat. Of gebruik je liever de stadaard megeleverde jquery-bibliotheek, dan voeg jeje code toe aan het onderste gedeelte.

Maar het is nog niet gedaan!

Bijna...

Momenteel is het bestand custom_scripts.js nog niet gelinkt met je site.

Open ../sites/all/themes/je_theme/je_theme.info

Voeg volgende regels toe onderaan het bestand:

<quote>

; jQuery/Javascripts Scripts

scripts[] = js/custom_scripts.js

</quote>

Leeg alle caches van je drupal-site en test je website met de nieuwste jQuery-bibliotheek!

Alle info over dit artikel had ik hier gevonden en met succes toegepast op mijn eigen site!

Drupal7:Form-id weergeven en overriden

2013-10-03T13:41:00.005+02:00

Tijdens het coden in Drupal is het soms handig om de form-id te kennen, dit om bepaalde formulieren te overriden.
Uiteraard bestaat er een zeer goed module hiervoor, nl: Devel.

Maar het kan nog sneller...

1. Form-id weergeven

Zoals je in de afbeelding ziet, weet je onmiddelijk de form-id. In bovestaande afbeelding is de form-id: user_login .

Om deze melding te krijgen voeg je volgende code toe aan je /sites/all/themes/mijn_theme/template.php:

function MIJN_THEME_form_alter(&$form, &$form_state, $form_id) {
// Show form_id
drupal_set_message("Form ID is : " . $form_id);
}

Vergeet niet de naam MIJN_THEME te vervangen door de naam van je eigen theme, en na het opslaan van template.php de caches te legen!

Wanneer je nu op een pagina met formulier terecht komt staat nu de id van je formulier erbij.

Waarvoor kunnen we dit gebruiken? Als je formulier wil aanpassen naar je eigen wensen. Voorbeeld om een extra class-CSS toe te voegen aan je formulier.

In dit code-voorbeeld ontbreekt de class-tag:

<form method="post" action="login">

Mét class-tag:

<form class="test" method="post" action="login">

Ok, hieronder het verlossend antwoord...

2. Formulier overriden

Om bovenstaand code-voorbeeld op te lossen voegen we eenvoudigweg volgend stukje code toe aan je template.php.

function MIJN_THEME_form_alter(&$form, &$form_state, $form_id) {
// Show form_id
drupal_set_message("Form ID is : " . $form_id);
// Node edit form
if ($form_id == "user_login") { $form['#attributes'] = array('class' => 'test');

}

Klein woordje uitleg: De form-id wisten we al user_login.

Als (if) form-id = "user_login"{
voeg dan volgend attribuut toe class="test"

Voila! That's it!

Op deze manier kun je alle formulieren aanpassen, door het toevoegen/aanpassen van elementen, attributen, enz...

Voor alle mogelijke aanpassingen van formulier-elementen kun je terecht op de Drupal API pagina.

Succes!

Drupal7: Tekst onzichtbaar maken voor ingelogde gebruiker.

2013-02-23T02:03:00.004+01:00

Stel je wil de bezoeker aanmoedigen om zich te registreren op je site. Vb. met deze tekst:

Registreer je en voeg commentaar toe!

Uiteraard is het zinloos dat bovenstaande tekst nog zichtbaar is voor een ingelogde gebruiker.

Je kan dit zoals altijd in Drupal op verschillende manieren doen, vb. door het toevoegen van een blok en deze een gebruikersrol meegeven, maar onderstaande code-snippet kun je overal gebruiker op je site, vb. in Panels, modules, templates, Basic-page, ...
Enige voorwaarde als je de code in een blok, basic-page, artikel, ... gebruikt moet je de PHP-filter activeren in de Drupal core.

Hier de code-snippet:

<?php
global $user;
// Indien een anonieme gebruiker
if ($user->uid == 0) {
// Toon tekst
echo 'Registreer je en voeg commentaar toe!';
}
?>

Woordje uitleg...

Een anonieme gebruiker geeft altijd een uid (=User Id) die gelijk is aan nul!
Een ingelogde gebruiker geeft altijd een uid die groter is dan nul!

Dus bovenstaande code in mensentaal betekent:
Wanneer een NIET ingelogde bezoeker de site bezoekt heeft deze een uid die gelijk is aan nul en is de tekst zichtbaar.
Wanneer een bezoeker is ingelogd heeft deze een uid gekregen die groter is dan nul en is de tekst niet zichtbaar.

Je kunt er ook voor zorgen dat een stukje tekst (vb. je bent ingelogd!) enkel zichtbaar is voor een ingelogde gebruiker.

<?php

global $user;
// Indien een gebruiker is ingelogd
if ($user->uid > 0) {
// Toon tekst
echo 'Je bent ingelogd!';
}

?>

In dit code-voorbeeld zie je indien de uid (dus ingelogde gebruiker) groter is dan nul de tekst 'Je bent ingelogd!' wordt getoont.

Drupal7: Redirect standaard login/registratie-pagina naar error-pagina

2013-02-20T16:48:00.001+01:00

De registratie/login-pagina's van Drupal zijn standaard te bereiken via volgende url:

../user/register of ../user/login

Er kunnen verschillende redenen zijn om deze pagina's door te sturen naar een andere url (in dit vb. een error-pagina):

- Spammers weren

- Eigen login/registratie-pagina gemaakt

-...

NB: Indien je wil dat niemand kan inloggen op je site (enkel de admin!), is het eenvoudigst om de accountinstellingen te wijzigen van je Drupal-site: Instellingen > Personen > Accountinstellingen

Op de site http://www.market-locator.com/ had ik behoorlijk wat last van spammers. Ook heb ik zelf een login-pagina en registratie-pagina ontwikkelt:

Registratie: http://www.market-locator.com/registration

Wanneer een bezoeker surft naar de standaard login/register-pagina's wordt deze doorgestuurd naar een error-pagina in bovenstaande site.

Uiteraard kun je de bezoeker ook doorverwijzen naar je zelfgemaakte login/register-pagina's of andere pagina's.

De praktijk:

Hoe stuur je de bezoeker naar bvb. een zelfgemaakte error-pagina als ze surfen naar: ../user/login of ../user/register?

1. In dit voorbeeld maken we een nieuwe 'Basic Page' en noemen we deze error en typen we volgende tekst bvb. 'ACCES DENIED! VERBODEN TOEGANG!

2. Geef de pagina-link een naam, vb: error.

3. In de root-folder van je Drupal-site staat een .htacces-file, open deze in een editor.

4. Voeg nu volgende regels toe aan dit bestand:

Redirect 301 /user/register /error

Redirect 301 /user/login /error

Nu gaan we testen:

Surf nu naar je Drupal-site en typ:

http://www.jouw_site.com/user/register of http://www.jouw_site.com/user/login

Als alles goed gaat zou je nu de error-pagina moeten zien!

Succes ;-)

Drupal 7: Na login op huidige pagina blijven

2012-12-25T23:31:00.002+01:00

Wanneer je inlogt via de login-pagina van je drupal-site wordt je 'standaard' doorgestuurd naar je account-pagina.
Het is soms handiger om na het inloggen doorgestuurd te worden naar de hoofdpagina van de site.
Hiervoor kun je volgende module gebruiken: Login Destination.

Maar stel, je wil na het inloggen op de huidige pagina blijven.
Dit kun je oplossen met:

$form_state['no_redirect'] = TRUE
Deze functie kunnen we gebruiken als vervolg op deze tutorial .

Ok, hier gaan we...

1. Op het template.php bestand die in de root van je theme staat.

2.Plaats deze code in je template:

function omega_subtheme_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == "user_login_block") {
$form_state['no_redirect'] = TRUE; // redirect to the current page
}
}

Met het form_id 'user_login_block' kan Drupal achterhalen welk formulier we gaan 'configureren' om de redirect-functie toe te passen.

Door het toevoegen van '$form_state['no_redirect'] = TRUE' zeggen we eigenlijk tegen Drupal dat we op de huidige pagina willen blijven.

Met de functie $form_state['no_redirect'] kun je eigenlijk al je formulieren redirecten en heb je de module Login destination niet meer nodig!

Voor meer info ivm deze functie, surf naar de Drupal API pagina.

Drupal 7: Tabs verwijderen en titels aanpassen vd gebruikersaccount

2012-12-21T00:50:00.001+01:00

Als je naar de gebruikersaccount-pagina gaat via volgende links:

je-drupal-site/user
je-drupal-site/user/register
je-drupal-site/user/password

zie je standaard 3 tabs:

Nieuw account aanmaken
Inloggen
Nieuw wachtwoord aanvragen

en als titel wordt altijd Gebruikersaccount weergegeven.

In deze tutorial gaan we de tabbladen verwijderen en de algemene titel vervangen door aparte titels per gebruikersaccount-pagina.

Om deze aanpassingen door te voeren gaan we eigenlijk de standaardgegevens vh theme overschrijven (=overriden).

Ieder theme heeft een template.php. Dit bestand bevind zich in de root van je theme-map, hierin kunnen we wijziginen doorvoeren zonder de core-bestanden van je Drupal-installatie aan te passen!

Open ../sites/all/themes/je_theme/template.php in je favoriete teksteditor, en kopieer en plak daar onderstaande code in:

function je_theme_preprocess_page(&$vars){

Verwijder tabs en plaats aparte titels

switch (current_path()) {

case 'user':

$vars[title] = t('Inloggen!');

unset($vars[tabs]);

break;

case 'user/register':

$vars[title] = t('Nieuw account aanmaken!');

unset($vars[tabs]);

break;

case 'user/password':

$vars[title] = t('Wachtwoord vergeten?');

unset($vars[tabs]);

break;

}

Uiteraard wijzig je de naam je_theme in de naam van je eigen theme.

Bovenstaande code hoeft weinig uitleg.

Sla het bestand template.php op en wis alle cache gegevens.

Voila nu heb je volgende formulieren:

- je-drupal-site/user

- je-drupal-site/user/register

- je-drupal-site/user/password

Nu heb je met dit handig stukje code de tabs verwijderd alsook iedere pagina een aparte titel gegeven.

Bron: http://drupalwatchdog.com/2/1/dedrupalize-login-form

Drupal7: Twitter-like login maken

2012-12-19T18:04:00.001+01:00

Voor mijn Drupal-site http://www.market-locator.com was ik op zoek hoe een een login-formulier-tooltip te ontwikkelen net zoals het Login-formulier van Twitter.com.

Via Google had ik enkele alternatieven gevonden:

Bedoeling is dit te ontwikkelen zonder extra modules. Voordeel is dat je weet wat je programmeert ;-)

Na wat research heb ik volgende info gevonden op Drupal.org en in combinatie met de BeautyTips jQuery-plugin kun je onderstaande Login-form-tooltip ontwerpen.

Dit is het resultaat:

Stappenplan:

1. Download de Beautytips-plugin en plaats de scripts in je Drupal-installatie. Persoonlijk plaats ik ieder script in een aparte map.

Vb. voor Beautytips: /sites/all/themes/jmijn_theme/js/bt/Beautytips-scripts.js

2. Verwijs naar de plugin door onderstaande regels toe te voegen aan het '.info'-bestand ( /sites/all/themes/mijn_theme/mijn_theme.info )

; jQuery Beautytips tooltips

scripts[] = js/bt/jquery.bgiframe.min.js

scripts[] = js/bt/jquery.bt.min.js

scripts[] = js/bt/other_libs/jquery.hoverIntent.minified.js

scripts[] = js/bt/other_libs/excanvas_r3/excanvas.compiled.js

stylesheets[] = js/bt/jquery.bt.css

Opgelet: Kijk na in de plugin welke js-bestanden er aanwezig zijn. Er zijn meerdere scripts in de BeautyTips-plugin aanwezig, maar je hoeft ze niet allemaal toe te voegen.

Uiteraard kun je ook de scripts toevoegen via een custom-blok (editor instellen als PHP-filter!) met het commando:

<?php

drupal_add_js('sites/all/themes/mijn_theme/s/bt/jquery.bgiframe.min.js','inline');

De reden dat ik deze in het '.info'-bestand plaats is dat het script op alle pagina's toegankelijk is.

Zo kun je voor iedere CSS-selector een eigen tooltip ontwerpen.

In onderstaand voorbeeld heb ik beautyTips ook toegepast, om de bezoeker attent te maken als je op de 'target'-afbeelding klikt, je huidige locatie wordt toegevoegd.

De code hiervoor is:

...
<img src="target.png" class="afbeelding" />
...
<script>
jQuery('.afbeelding').bt();
</script>
...

.bt() is de BeautyTips-methode en tussen de ( ) kun ja allerlei opties toevoegen.

3. Voeg een custom-blok of pagina toe en zet de editor op 'PHP-filter'.
Opgelet: Mogelijk dien je PHP-filter in te schakelen in de Drupal-Modules.

<?php
$elements = drupal_get_form('user_login_block');
$rendered = drupal_render($elements);
?>

Met 'drupal_get_form('user_login_block')' halen we het login-formulier op en plaatsen we alles in de variabele '$rendered'.

Nu plaatsen we het formulier tussen 'div'-containers en geven deze een id mee; in dit geval #bt-login-wrap .

Deze container zetten we standaard onzichtbaar style="display:none;"

4. Voeg nu een link toe. Deze link zullen wegebruiken om het formulier zichtbaar te maken.

<a id="login" href="#">Login</a>

Zoals je merkt wordt er geen verwijzing in deze link geplaatst. We hebben enkel de css-selector '#login' nodig om de verwijzing te maken via jQuery naar het login-formulier.

5. Als laatste vragen we de BeautyTips-methode op:

<script>
jQuery(document).ready(function(){
jQuery("#login").bt({
trigger: 'click',
positions: 'bottom',
fill: '#FFF',
strokeStyle: '#777',
spikeLength: 5,
spikeGirth: 10,
padding: 8,
cornerRadius: 5,
shadow: true,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,.9)',
shadowOverlap: false,
noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
contentSelector: "jQuery('#bt-login-wrap').html()"});
});
</script>

Als je nu op de Login-link klikt krijg je een tooltip met daarin het login-formulier!
Nu kun je dit formulier opmaken via CSS.

Heb je nog vragen/opmerkingen, mail ze gerust via het contactformulier op mijn site.

Veel succes!

Ontwikkeling website ivm gratis producten en aanbiedingen

2011-01-09T14:13:00.005+01:00

Het is al een tijdje geleden dat ik een bericht heb gepost op mijn blog.
Dit komt daar ik al sinds maart 2010 bezig ben aan een hobby-project, nl. een eigen zoekrobot ontwikkelen.

http://www.vazodo.com/

Het is al jaar en dag dat ik gefascineerd ben van alles wat met searchengines en SEO (=Search Engine Optimation) te maken heeft.

Intussen is de ontwikkeling van dit éénmansproject zover gevorderd dat deze zijn test-fase is ontgroeid.

De site bestaat uit 3 delen:
- een Back Office, die enkel toegankelijk is voor de webmaster.
- de MySQL-database waar alle links in een relationeel model zijn opgeslagen.
- de publieke site die toegankelijk is voor iedereen.

Aan dit project wordt zo goed als dagelijks gewerkt.
Om de bezoeker op de hoogte te houden van updates kun je deze volgen door rechtsboven op de index-pagina op de update x.x.x-link te klikken. De laatste database-wijziging kun je onderaan de webpagina volgen; daar wordt de datum vermeld vd laatste wijziging.

Om nog een stapje verder te gaan, worden alle links waarbij de einddatum verlopen is automatisch uit de zoekresultaten gefiltert. Zo probeer ik zoveel mogelijk te voorkomen dat er 'gebroken' links in de database aanwezig zijn.

Een leuke optie is alvast de suggestie-box a-la-google. Wanneer je een letter in het zoekvak typt, worden al op voorhand enkele suggesties getoond.

Indien je op de hoogte wil blijven vd laatste acties kun je op de site ook nog inschrijven op de nieuwsbrief.

Review boek: Websites opmaken met css... zoals het hoort.

2010-08-08T17:07:00.006+02:00

Terwijl ik op de tram zit, op weg naar mijn zus, heb ik rustig de gelegenheid een review te schrijven over het boek Websites opmaken met CSS... zoals het hoort van Marc Creeten.

Heb dit boek sinds vorige week. Mijn eerste indruk was positief, over het 214 pagina's tellende boek.
Mijn verwachtingen over de inhoud vh boek werden dan ook ingewilligd, daar ik al een idee had vd auteur (via zijn website) hoe duidelijk hij zijn artikelen schrijft.

Het boek is ook aangenaam om te lezen. Net zoals er in de inleidende tekst vermeld staat, leer je écht op een eenvoudige manier hoe CSS te gebruiken. Als 'hobby'-webdeveloper ben ik toch ook al een aantal jaren bezig met CSS, maar heb na enkele hoofdstukken te lezen toch nog enkele handigheidjes ontdekt.

In de eerste hoofdstukken maak je kennis met de basis van CSS, alsook hoe je de DocType van je webpagina instelt. In de volgende hoofdstukken leer je aan de hand van een voorbeeld, hoe je op een bijna 'kinderlijk' eenvoudige manier CSS toepast.

Veel boeken beloven je dat je als leek, snel overweg kan met CSS, maar als je dan begint te lezen is het precies of je over een I.Q. van 130 dient te beschikken om het te begrijpen.
Het boek die hier voor me ligt, is één van de weinige die ik ken die deze belofte kan waarmaken!

Besluit: Als je dit boek hebt uitgelezen, zal je wél in staat zijn om goede CSS-opmaak te schrijven.

Last but not least, voor de prijs hoef je het niet te laten € 12.50.

Prijs/kwaliteit = 100%

BlackBerry-PIN: 21BAA2D0
Don't work hard, work smart.... Get a BlackBerry!
Sent via BlackBerry offered by Proximus

Notepad++, must have Plugins voor de Webdeveloper

2010-08-08T11:41:00.006+02:00

Standaard zijn al enkele PlugIns geïnstallerd in Notepad++ oa:

- Compare (bestanden vergelijken met elkaar)
- LightExplorer (verkenner)
- Snippets (om stukjes code snel in te voegen)
- ...

Maar door onderstaande PlugIns toe te voegen, kan je Notepad++ omtoveren naar een volwaardige web-editor, die het werken met HTML, CSS, PHP aangenamer maakt.

Download volgende PlugIns:

- DBGP-plugin (PHP-Debugger)
- FunctionList (Lijst met PHP-functies uit huidig php-bestand)
- MultiClipboard (klembordgeschiedenis)
- NppAutoIndent (zorgt voor inspringing in je (php)code, wat de leesbaarheid bevorderd)
- NppFTP (om je bestanden te up/downloaden naar je server)
- WebEdit (toolbar met HTML-tags, alsook mogelijkheden om shortcuts toe te wijzen)
- CSS-eXplorer (tijdens het schrijven van dit artikel, werkte deze plugin helaas nog niet voor Notepad++5.7, maar zeker de moeite om eens de site vd makers te bezoeken!)

De plugins zijn eenvoudig te installeren, na installatie dien je Notepad++ te herstarten om alle PlugIns actief te maken. Dan bekom je dit resultaat:

Happy Webdeveloping ;-)

Notepad++, het zwitsers zakmes voor de programmeur

2010-08-08T10:36:00.007+02:00

Notepad++ heeft héél wat voordelen voor zowel de hobbyist, als voor de professionele programmeur.
Het is een uit de kluiten gewassen kladblok met enorm veel mogelijkheden.
De voordelen van dit programma zijn legio!

Hieronder zal ik enkele van de vele mogelijkheden van het programma opnoemen:

-Ondersteuning van héél wat programmertalen waaronder: HTML, CSS, SQL, PHP, C, COBOL, FORTRAN, JAVA, JAVASCRIPT, PASCAL, PERL, PYTHON, RUBY, ...

- Folding (in/uitklappen)
- Vensters laten meescrollen, vensters klonen, ...
- Uitgebreide zoekfunctie, zoals: zoeken via reguliere expressies, zoeken en vervangen door verschillende bestanden tegelijk.
- Syntax-highlighting
- Uitvoeren van Macro's
- Converteren naar verschillende indelingen (Charsets: UTF8, ANSI, ...)
- Tabbladen
- ...

Kortom, te veel om op te noemen.

Nog enkele eigenschappen, die het programma een must maakt:

- Freeware
- Zeer licht en compact, dus start heel vlug op!
- Verkrijgbaar in mobiele versie, dus kan gebruikt worden vanaf USB-stick
- Uitbreidbaar met talloze plugins

Op huidig moment, is Notepad++5.7 de laatste versie

Twee velden combineren uit één tabel

2010-05-29T12:39:00.004+02:00

Het was me al eens gelukt om twee velden te combineren in ooBase met de ingebedde HSQLDB-server van OpenOffice:
http://ctuxboy.blogspot.com/2009/11/keuzelijst-met-meerdere-velden-in.html

Daar ik nu bezig ben met een project, waarbij een externe MySQL-server wordt gebruikt in combinatie met ooBase als front-end applicatie, is de SQL-syntax nu afgestemd op de gebruikte MySQL-server.

Om deze query te verwezelijken dien je enkel volgende syntax toe te voegen in de ontwerpweergave:

CONCAT( `name`, ' ', `firstname` )

In onderstaande schermafdruk wordt alles duidelijk!

Inloggen op Belgische eID-site met Firefox

2010-04-22T18:12:00.010+02:00

Lukt het niet met je eID-cardreader, om in te loggen op MyBelgium, of andere gerelateerde eID-sites,via Firefox?

Installeer dan volgende add-on: https://addons.mozilla.org/nl/firefox/addon/51744

Herstart de webbrowser!

Installeer de nodige certificaten wanneer je inlogd op de site van MyBelgium.

Voila, nu zou je probleemloos moeten kunnen inloggen!

Voor meer info: http://eid.belgium.be/nl/binaries/Firefox%20-%20NL_tcm147-98991.pdf

Succes!

Bedieningspaneel voor xampp onder Linux

2010-04-21T18:29:00.011+02:00

Php is een server-scripting taal, daarvoor dien je ook een server te draaien om de php-code te verwerken.
Daarvoor kun je het kant-en-klare pakket 'xampp' gebruiken.
Dit pakket beschikt oa over :

- Apache
- PHP
- MySQL
- phpMyAdmin
- ...

Dit is handig en snel geïnstalleerd!

De xampp-versie voor M$-windows beschikt over een handig bedieningspaneel.

M$ Windows-versie:

Zoiets bestaat ook voor linux, in dit artikel zal ik U op weg helpen, hoe je dit bedieningspaneel installeerd.

Linux-versie:

Ik veronderstel dat xampp al geïnstalleerd is op je pc. Indien niet download en volg dan de instructies op deze site.

Aan de slag...

- Open een terminal en maak een leeg bestand 'xamp-control-panel'.
christophe@ubuntu-laptop:~$ gedit ~/.local/share/applications/xampp-control-panel.desktop [enter]
('gedit', kun je eventueel vervangen door je eigen editor!)

- Plak nu onderstaande code in de editor, sla het bestand op, en sluit de editor af.

[Desktop Entry]
Comment=Start/Stop XAMPP
Name=XAMPP Control Panel
Exec=gksudo "python /opt/lampp/share/xampp-control-panel/xampp-control-panel.py"
Icon[en_CA]=/usr/share/icons/Tango/scalable/devices/network-wired.svg
Encoding=UTF-8
Terminal=false
Name[en_CA]=XAMPP Control Panel
Comment[en_CA]=Start/Stop XAMPP
Type=Application
Icon=/usr/share/icons/Tango/scalable/devices/network-wired.svg

Je kunt nu je 'xampp-control-panel' opstarten via je start-menu:

Toepassingen -> Overige

Voor meer gedetailleerde uitleg kun je vinden op deze site.

Hierbij wil ik de forum-gebruiker 'Gijsbert' bedanken, die mij op de hoogte heeft gebracht via een topic in het ubuntu nl forum, over het 'bestaan' van deze oplossing :-)

Happy coding ;-)

eID installeren via Ubuntu softwarecentrum

2010-04-20T21:30:00.013+02:00

In mijn vorig bericht, heb ik proberen uit te leggen hoe je een eID-kaartlezer installeert onder (ubuntu) linux, via de Belgische eID-site.

Welnu, het kan nog eenvoudiger! Jawel, u hebt goed gelezen!!!
Zelfs M$ Windows kan daar niet aan tippen ;-)

In ubuntu 9.10 is de software voor eID al aanwezig, ttz je hoeft het enkel aan te klikken om te installeren!!!

Lang Leve (Ubuntu) Linux :-)))

Ga naar:

Toepassingen -> Ubuntu Softwarecentrum

- Typ in het zoekvakje rechtsboven 'ied'

- Dubbelklik op de te installeren applicatie 'Uitlezen en beheer'

Ga nu naar:

Toepassingen -> Hulpmiddelen -> Lezen en beheren

Uiteraard dien je nog het 'ontbrekende pakket te installeren, zodanig de applicatie de aangesloten cardreader kan 'zien'.

Typ in de terminal als root:

christophe@ubuntu-laptop:~$ sudo aptitude install libccid [enter]

Geef opnieuw je root-paswoord in, en het ontbrekende pakket wordt geïnstalleerd.

Happy eIDen ;-)

Belgische eID kaartlezer onder ubuntu 9.10 linux

2010-04-19T21:44:00.002+02:00

Het installeren van randapparatuur onder linux is soms een hele uitdaging, daarom zal ik hier zo goed mogelijk proberen uit te leggen hoe je een eID-kaartlezer werkend kan krijgen onder linux (ubuntu).

Mijn kaartlezer is van het merk 'Logon' (http://www.log-on.be), maar denk dat het met andere types kaartreaders ook zou moeten werken.

Op de Belgische-eID site vind je meer uitleg, hoe je de kaartlezer installeerd voor linux.

Download Linux Ubuntu (TGZ, 7.88 MB), en pak deze uit in een nieuw aangemaakte map in je home-dir (bijv. ~/eID).

In deze map vind je een README-bestand. Hierin staat vermeld hoe je het stuurprogamma installeerd.

Open nu een terminal-venster en navigeer naar de map 'install':

christophe@ubuntu-laptop:~$ cd eID/install/ [enter]

Typ nu volgende opdracht in als root:

christophe@ubuntu-laptop:~/eID/install$ sudo ./install.sh [enter]

en typ je root-passwoord in.

Volg de instructies die in het terminal-venster verschijnen.

Als de installatie is voltooid, mag je de terminal sluiten.

Nu zou de applicatie moeten aanwezig zijn in je start-menu:

Toepassingen -> Overige -> Belgische eID.

Wanneer je nu de kaartlezer aansluit, en deze applicatie start, zal er in de systray een pictogram van een cardreader staan.

Zoals je kunt zien hierboven wordt de cardreader nog niet herkent!

Maar als je in de terminal een lijst opvraagt met geïnstalleerde usb apparaten zal deze wel aanwezig zijn!

Dit gaan we oplossen door volgend ontbrekend pakket te installeren 'libccid'

Typ in de terminal als root:

christophe@ubuntu-laptop:~$ sudo aptitude install libccid [enter]

Geef opnieuw je root-paswoord in, en het ontbrekende pakket wordt geïnstalleerd.

Nadat je de eID toepassing opnieuw hebt opgestart en je eID-paspoort in de reader hebt geplaatst, zal je zien dat je volgend pictogram krijgt in je systray:

Voila, nu kun je volop gebruik maken van de aanwezige eID toepassingen van de overheid of andere bedrijven.

Hieronder zie je een voorbeeld van mijn eID-cardreader in aktie:

Voor meer info: http://eid.belgium.be/

Happy eIDen ;-)

Records zoeken via keuzelijst zonder macro's in ooBase

2009-12-01T11:06:00.000+01:00

Soms kan het handig zijn, om dmv een keuzelijst de gegevens van je klanten terug te vinden.

Hoe gaan we te werk:

1. Maak een nieuwe database 'Klanten'.

2. Maak daarin volgende tabellen met volgende velden:

-tblKlanten:-ID: INTEGER(10),Autowaarde aan, (Primaire sleutel)
-Naam: VARCHAR(30)
-Voornaam: VARCHAR(30)
-Telefoon: NUMMERIC(9)

-Dummy:-ID: INTEGER(10), Autowaarde géén, (Primaire sleutel)
-Dummy: VARCHAR(30)

In tabel 'Dummy' maken we één record aan, dus voeg manueel in de velden 'ID' en 'Dummy' de volgende gegevens toe: 1, dummytekst.

De tabel 'Dummy' is eigenlijk een trukje, want deze heeft enkel de functie om het veld'Dummy.ID' in het hoofdformulier straks te verbinden met de 'tblKlanten.ID'.
Verder wordt er niets gedaan met de tabel 'Dummy'.

3.Voer nu enkele namen, voornamen en telefoonnrs. in de tabel 'tblKlanten'.

4.Nu gaan we een query maken van 'tblKlanten', die ervoor zal zorgen dat de velden 'Naam' en 'Voornaam' samen zullen weergegeven worden in de keuzelijst.
OPGELET: Zorg wel de het nieuw aangemaakte veld in de query vooraan staat, en dan pas de 'ID'.

Voor meer details om ivm deze handeling verwijs ik je naar een ander bericht.

5. Maak een formulier aan via de assistent.
Gebruik als tabel voor het hoofdformulier 'Dummy'. selekteer alle velden en voeg ze toe(nadat het formulier is aangemaakt worden deze velden manueel gewist, daar we toch geen gegevens zullen toevoegen aan het hoofdformulier).

6. Bij de volgende stap gaan we een subformulier toevoegen, met als optie 'Subformulier gebaseerd op handmatige selectie van velden.'

7. Bij de volgende stap selecteren we 'tblKlanten' en voegen we volgende velden toe:

-ID
-Naam
-Voornaam
-Telefoon

8. Selecteer de gebonden velden (ID) van beide tabellen, links vind je de velden van het subformulier (tblKlanten), en rechts vh hoofdformulier (Dummy).

9. Voor het schikken vd besturingselementen, zie afbeelding hieronder.

10. Bij de volgende stap kies je de optie 'Het formulier moet alle gegevens weergeven' bij de volgende stap ivm layout laat ik u de vrije keuze, klikdaarna op voltooien.
Je formulier zou er nu zo moeten uitzien ongeveer:

11. Open nu je formulier in de ontwerpweergave Verwijder nu de velden+labels 'ID' en 'Dummy'. Dit doe je door deze aan te klikken en op [Del] te drukken van je toetsenbord.

12.Klik op de optie keuzelijst.
Je kunt nu een keuzelijst 'tekenen' door met je muis-cursor in het formulier te slepen (dit ter grootte ve tekstvak ongeveer), en klik rechts op de keuzelijst, kies daaruit 'Besturingselement...'. Dit opent het eigenschappenvenster vd 'keuzelijst'.

13. Stel volgende gegevens in:

-gegevensveld: ID (dit is van tabel 'Dummy')
-Type lijstinhoud: Query
-Lijstinhoud: qryNaamKlant

14. Open nu de formnavigator.

15. Klik nu met de rechtermuisknop op het subformulier in de navigator om de eigenschappen op te vragen, en kontroleer of de hoofdvelden en slavevelden op 'ID' staan ingesteld. Dit koppelt de tabel 'tblKlanten' vh subformulier aan de tabel 'Dummy' vh hoofdformulier, waarbij in het hoofdformulier de tabel 'Dummy' gekoppeld is aan de 'qryNaamKlant' vd keuzelijst.

16. Vraag nu ook de eigenschappen op van het hoofdformulier via de navigator, en verander de instelling 'Toevoegen toestaan' op Nee.

17. Sla nu je formulier op en sluit deze.

17. Wanneer je formulier opnieuw opstart in het hoofdvenster van ooBase, zou je nu volgend resltaat moeten krijgen:

Wanneer je nu een naam selekteerd in de keuzelijst en het formulier herlaad, om de wijzigingen toe te passen, worden alle gegevens getoond vh betreffende record.
Uiteraard kan je wat aanpassingen doorvoeren, vb. een knop toevoegen om het formulier te herladen ofwel een Macro maken die dit automatisch het formulier herlaad wanneer je een naam selecteert in de keuzelijst.

Succes!

Keuzelijst met meerdere velden in ooBase

2009-11-26T12:24:00.000+01:00

Momenteel ben ik bezig een database-applicatie aan het ontwerpen, die kan gebruikt worden voor bv. een kinderdagverblijf.

Daarin zitten een aantal tabellen, die gerelateerd zijn met elkaar, nl:

- Tabel 'tblOuders'
- Tabel 'tblKinderen'

De Tabel 'tblOuders' is gelinkt met 'tblKinderen', dus een één-op-veel relatie, één ouder heeft één of meerdere kinderen.

Ik heb een formulier ontworpen 'Beheer Ouders', deze bevatten alle contactgegevens vd ouders.
Dan heb ik nog een formulier 'Beheer Kinderen', deze bevat alle gegevens vd kinderen, en een ook een gerelateerde keuzelijst 'Ouders'.

In deze keuzelijst selecteer je gewoon welke 'ouder' bij welk 'kind' hoort.

Bij het aanmaken van een keuzelijst via de assistent kun je maar één weergave-veld selecteren, wat voor problemen kan zorgen in de praktijk.
Vb. Stel dat je als weergave-veld de 'naam' ve ouder hebt geselecteerd, op zich geen probleem. Als je ouders hebt met dezelfde naam, dan heb je wél een probleem, dan komen dezelfde namen enkele keren voor in de keuzelijst, maar welke kind heeft nu welke ouder?.

Hoe kan je dit oplossen?

We zullen ervoor zorgen dat de naam én de voornaam, dus twee velden ve tabel in de keuzelijst voorkomen.

1. Selekteer het betreffende besturingselement (keuzelijst) en ga naar het eigenschappenvenster.

2. Klik op het tabblad gegevens en selekteer bij 'type lijstinhoud' SQL, en bij 'lijstinhoud' klik je op het knopje met de drie puntjes.

3. Nu kun je je tabellen/queries 'manipuleren'. We voegen nu de betreffende tabel toe, in mijn geval 'tblOuders'.

4. Dubbelklik op 'ID' uit deze tabel

5. Na maken we een nieuw (niet-bestaand) veld aan en typen volgende gegevens thv veld:

"Naam" || ' ' || "Voornaam"

6. Om het proper te houden geven we ook nog een 'alias' aan dit veld, vb. NaamVoornaamOuders, en selekteren bij volgorde 'oplopend'.

7. Sleep nu het nieuw aangemaakte veld naar links, zodanig deze voor het veld 'ID' staat.
Je kunt deze 'nieuwe' tabel testen door deze 'query' uit te voeren.

Voila nu heb je een keuzelijst met twee velden zoals ik de afbeelding hieronder.

Succes!