Wifi password in windows 8.1

If you want to see your wifi password in Windows 8.1, you can do this via a “Command Promt” command.

Open the command promt, by searching Command Prompt in the Windows Start page.

wifi-startmenu

Then type or copy the next command: netsh wlan show profile name=”WifiName” key=clear.

Do not forget to change WifiName to the name of the wifi you would like to know the password from.

wifi-cmd

 

Node.js getting started tutorial

In this tutorial I am going to guide you around in working with Node.js!

  1. Get started with node.js
  2. Create a hello world app
  3. Use modules

Get started with node.js

Note: This tutorial is assuming you use Windows as your operating system.

Go download the latest Windows Installer. Install it.

You can go the node console by starting cmd, and entering node. Test if it works by typing: “console.log(‘Hello world’);

You can get out of it by typing Ctrl + C twice.

Let’s try to make our first ‘Hello World’ application!

  1. Choose a location on your hd where you want to develop your websites.
  2. Choose an IDE (Integrated Development Environment), you could just use a text writer, or any program you like. I am going to use Eclipse EE, since I am used to working with it.
  3. Create a file ‘hello_http.js’
var http = require('http');

var server = http.createServer(function(req, res) {
res.writeHead(200);
res.end('Hello Http');
});
server.listen(8080);

Now in cmd go to the folder where you saved the file, start node (by typing: node hello_http.js).

If you now go to your browser (http://localhost:8080), you should see:

What does this very short script do?

var server = http.createServer(function(req, res) { res.writeHead(200); res.end(‘Hello Http’); });Resources

  • http://nodejs.org/
  • http://nodeguide.com/beginner.html
var http = require('http');
Include a node.js core module and make it accessible through the variable http.
var server = http.createServer(function(req, res) {
  res.writeHead(200);
  res.end('Hello Http');
});
Create the server. This method gets executed everytime a request comes in.

The “req”, is the request, this can contain form data, or files (upload).

The “res” object is a writeable stream to send data back to the client.

server.listen(8080);
This makes our server listen on port 8080.

Organize your app with modules

Node.js uses modules to organize your sites. Just like how you can include core modules, you can create your own modules. Below is an example that creates a ‘Hello’ module, used to return the famous ‘Hello World’.

Hello.js:

exports.world = function() {
  return('Hello World');
}

The exports.* is the object used to return methods to the scripts that use this module.

Then create another file, Main.js. This will be our start point. The difference is now, that it will use our Hello.js module, to return the ‘Hello World’ string.

Main.js:

var http = require('http');
var hello = require('./hello');

var server = http.createServer(function(req, res) {
  res.writeHead(200);
  res.end(hello.world());
});
server.listen(8080);

As you can see we can include hello, with a ‘./’ before (means that the file is in the same folder), and without the extension, because node automatically assumes it is a .js file.

There is more!

This should cover the basics. If you want to do more, try to understand how EventEmitters work in node.js!

I, am currently reading and playing around with expressjs!

Resources

  • http://nodejs.org/
  • http://nodeguide.com/beginner.html
  • http://expressjs.com/

Simple DIV tutorial to make websites

Tired of using tables to mock-up your websites? Wondering how to create div’s next to each other, organized like the following:

  • One for the header
  • One for the menu
  • One for content
  • One for your copyright note
  • And maybe more for other purposes?

Wondering how to align images right or left in the content with css? This is your next “should have read” tutorial!

Continue reading “Simple DIV tutorial to make websites”

Install a virtual Operating System on top of your existing one!

Did you read my post about virtualization and want to try it out yourself now? Do you still doubt? Why do I use Virtual Machines? Maybe that will convince you!

  • Ubuntu as server: Php, sql, server, so when I shut down my Ubuntu server, my default operating systems performance isn’t affected.
  • Windows XP: To use software that doesn’t work any more on Windows 7.
  • Another Windows 7: To test new software, my personal playground.
  • Windows 2008 Server, to test what I’ve learned at school.

What do you need?

Continue reading “Install a virtual Operating System on top of your existing one!”

Example Observer Application: Traffic Lights

This is the post where you have all been waiting for (I hope J), after reading the informative post what an Observer Pattern is. If you have no idea what an observer is, you better start reading my previous theoretical post about the Observer Pattern.

First an overview of the application we are going to build in this post:

  • An application to create a traffic light who changes his colour
  • Easy expandable
  • Future equipped (easy to add changes)
  • Object Oriented
  • With the Observer Pattern

Stage 1: our Model Control View

Control Model View
Program.cs
TrafficLightApp.cs
Observable.csIObserver.cs
TrafficLights.cs
Light.cs
StartView.cs
Crossing.cs

Program.cs: The start file from the program. It creates a TrafficLightApp Object.
TrafficLightApp.cs: The main control of our program. This class covers for all the interactions. It also starts the views.

Observable.cs: This is the file where every model that needs to be observable will inherit from.
IObserver.cs: An interface where everything that listens to our Observable needs to implement.
TrafficLight.cs: Contains 4 lights (like on a crossroad).
Lights.cs: 1 light.

StartView.cs: A window forms class that has a button to create a new crossing.
Crossing.cs: Enables you to see a crossing with 4 lights.

Stage 2: Implementing the Observable and IObserver

The observable.cs should look like the following:


namespace ObserverExample
{
class Observable
{
private List allObservers = new List();
public void notifyObservers()
{
foreach (IObserver o in allObservers)
{
o.Update(this);
}
}
public void addObserver(IObserver o)
{
allObservers.Add(o);
}
public void removeObserver(IObserver o)
{
allObservers.Remove(o);
}
}
}

So basically, this class (Observable.cs) holds a list from Interfaces. When the notifyObservers() method is triggered, it accesses the method the method of all the interfaces.

So maybe, the IObserver.cs (interface) might like interesting for you to:


namespace ObserverExample
{
interface IObserver
{
void Update(Observable o);
}
}

Stage 3: Implementing the rest of the model

TrafficLights.cs and Light.cs, I will not show code extracts from them here, instead you are able (see bottom of the page) to download a zip file with the project included. You can check them there. Simple explanation what they are about? Light is just 1 light, and has a status which reflects the colour the lamp has (Red, orange or green). Each Light also has a changeLight method what changes the current colour to the next.

TrafficLights has a collection or list<> from 4 Lights. It has a method to change all the 4 their (colour) states. This class is also Observable, so it extends Observable.

Stage 4: Completing the control

I already (from the beginning) did some changes. I edited the Program.cs, to this:


static class Program
{
[STAThread]
static void Main()
{
TrafficLightApp Tla = new TrafficLightApp();
Tla.ExecuteProgram();
}
}

The TrafficLightApp() starts our StartView and also starts new windows, does the ‘control’, the hard work, makes it all works. If you wan’t to see this code, again, download the zip (at the bottom of this page).

Stage 5: Implementing the view

StartView.cs

I just created a really simple interface, with a button that enables to add a new crossing (That has 4 lights, and the ability to change the state). It looks like what you see at the right of this page.


namespace ObserverExample
{
public partial class StartView : Form
{
private TrafficLightApp tla;
public StartView(TrafficLightApp Tla)
{
InitializeComponent();
tla = Tla;
}
private void btnCreateNew_Click(object sender, EventArgs e)
{
tla.addCrossing();
}
}
}

Crossing.cs

Each Crossing contains 4 lights, and looks really nice. Pressing the next will change the status in the class light.cs. Then an notifyObserver() get’s done, and this view, wich is an Observer, will update.

Below you will find the most important parts of the code:

Update:

void IObserver.Update(Observable o)
{
Synchronize();
}

Synchronize:

public void Synchronize()
{
pnlPlaceholder.Controls.Clear();
foreach (Light light in lights)
{
Panel pnl = new Panel();
pnl.Width = 50;
pnl.Height = 50;
switch (light.Status)
{
case 0: pnl.BackColor = Color.Green;
break;
case 1: pnl.BackColor = Color.Orange;
break;
case 2: pnl.BackColor = Color.Red;
break;
case 3: pnl.BackColor = Color.Red;
break;
}
pnlPlaceholder.Controls.Add(pnl);
}
}

And the construct:

public Crossing(TrafficLights Tl, TrafficLightApp TLA)
{
this.tl = Tl;
this.tla = TLA;
lights = new List<Light>();
lights = Tl.Lights;
tl.addObserver(this);
InitializeComponent();
Synchronize();
}

The magic

The files

You can download the Source Files!

I’ve also created another zip file with the exe, and you can find it on the same link.

Sources

I’ve learned a lot from this in the book Design Patterns from O’Reilly. Also, the idea for this example, I got from my java lessons in Howest Simon Stevin, a high school in Bruges.

Add hyperlink to the Bulleted List Control

This will be a very short tutorial, but still I couldn’t find any information relevant to the search: How to add hyper link to the bulleted list control.

Nevertheless this is pretty easy. We assume you want to do this in your Code-behind File, so you can add hyperlink in a list dynamically.

First create the BulletedList control, then you have to set his mode to hyperlink.

BulletedList BL = new BulletedList();
BL.DisplayMode = BulletedListDisplayMode.HyperLink;

Now that we have the control,the next code is how to add the hyperlinks. I will show how to add one. With a simple iteration you can add more, the way you might want it.

item.Text = "The text of the link";
item.Value = "the-url.aspx";
BL.Items.Add(item);

Good luck with your project!

Add items to the Bulleted List Control (in the code file)

My next tutorial will be a really short one. But still I have spent a really long time to find what I was looking. Maybe because it was way to easy?

I wanted to generate a BulletedList Web Control, in my code file. Inside a for-loop I wanted to add texts to my list.

[ad#Adsense]

To start, I dropped a PlaceHolder in my file.asp (The html file). Because I like drag and drop, I did it that way! You can find in your toolbox. If you don’t like that, just copy-paste the following text where you would like your BulletedList to appear:
<asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
After that it is time to open the code behind file. In the solution explorer, click at the plus, and then open the default.aspx.cs!

The first thing is to make our Place Holder accessible. Just behind:
public partial class Default: System.Web.UI.Page
But above:
protected void Page_Load(object sender, EventArgs e)
We type this code:
private PlaceHolder PH
{
get
{
return ph1;
}
set
{
ph1 = value;
}
}

We have to create the BulletedList outside the iterator. And inside we can add the items we want to the BulletedList. First my example:
BulletedList BltTest = new BulletedList();
foreach (XmlNode QuestionAnswers in Question)
{
BltTest.Items.Add(new ListItem(QuestionAnswers.InnerText));
}
PH.Controls.Add(BltQTest);

This is the code I did use. But maybe a more generic example helps you with your BulletedList problem!
BulletedList BltTest = new BulletedList();
for (int i = 0; i < 10; i++)
{
BltTest.Items.Add(new ListItem("This is the " + i + "th item"));
}
PH.Controls.Add(BltQTest);

Good luck with your BulletedList!

SEO Friendly URLS with .htaccess

Search engine optimization, or short, seo, means optimization so search engines will rank your site higher in their views. This will affect your visitors, in a positive way. What is very important for web shops, because more visitors, is more sales. Even sites with advertising will benefit from more visitors.

When we talk about seo friendly url’s, we ask ourselves the question which link will receive the most visitors:

  • http://example.com/index.php?content=article&sub=7
  • http://example.com/article/7/Title

Some articles say that easy readable urls only affect your visibility for search engines really small. But when a user has to choose between these urls, after searching for something, which link would he choose, do you think?

Open source web applications

Cms (content management systems) like joomla, drupal or wordpress, embed this possibility by default. Sometimes you just only have to activate it. If you use a cms, please do use these functions!

Self-made applications

.htaccess

Just like joomla, drupal and wordpress does, the easiest way to make the friendly urls possible, is to use a .htaccess file. (Note: This only works on the apache server)

This file makes it possible to set additional settings, you could have done in the apache configuration file to. But because most web hosting companies do not allow to edit that file, .htaccess files are really useful!

To create an .htaccess file, we advise to use the build in notepad editor from Windows. Just create a new file and save it as htaccess.txt (Because you can’t name it .htaccess in Windows). After completion of the file, you can upload it with your ftp client, of web ftp interface, and rename it to .htaccess!

These file has to be in your root from your site. An example of the directory (how it could be):

  • Pictures
  • Css
  • Files
  • .htaccess
  • index.php
  • info.php
  • contact.php

RewriteEngine

This is the built-in function from apache, who allows you to modify urls typed in the browser, and sending the right page back. Best of all, you can use this in your .htaccess!

Imagine you have the following .php pages:

  • pics.php
  • groups.php
  • contact.php

Wouldn’t it be nice to access these files with the following urls?

  • http://example.com/pics
  • http://example.com/groups
  • http://example.com/contact

Example of the .htaccess file to accomplish this.

Options +FollowSymLinks
RewriteEngine on
# Checks if the requested url path exists with .php, and if so, it allows the RewriteRule to do so.
RewriteCond %{REQUEST_FILENAME}.php -f
# Rewrite to append “.php” to extensionless URL-path
RewriteRule ^(([^/]+/)*[^.]+)$ $1.php [L]

This is possibly the easiest way to exlude the .php from your url.

What also is very common is the following: : http://example.com/info/ or http://example.com/blog/5/Title
The following example makes this possible.

RewriteEngine On
RewriteRule ^(.*)/(.*)/(.*) index.php?page=$1&sub=$2&$3

This example makes also the following url possible: http://example.com/forum/common/topic=7&active=3. This link will search for the following file: index.php?page=forum&sub=algemeen&topic=7&active=3.

The last example is a bit more complex, and could be an example for a download site.

Options +FollowSymLinks
RewriteEngine on
RewriteRule ^files/([^/]+)/([^/]+).rar /download.php?cat=$1&file=$2 [NC]

This link (http://exaple.com/files/browsers/firefox) would reffer to donwload.php?cat=browsers&file=firefox.

Do not forget to addapt your links!

All the links you have, in your site, menu, … you have to modify! Remove the old links, and add the new ones, who do not have an extension, or are like files/browsers/firefox.

Otherwise, creating the .htaccess for seo reasons, is really stupid, because yahoo or google will think that it is duplicate content.

Images and css files

It might occur that suddenly your images are gone, or your css style. This is because for those links, (image links or css links) the RewriteEngine also tries to modify the links.

Lucky for us there is a simple way to block the RewriteEngine for folders where you put your images, css files or file folders. Just put the following RewriteCond just under RewriteEngine On

RewriteCond %{REQUEST_URI} !^/images/

Just add all the folders, and the job is done! You now have a much easier and more human readable site!

Sources

Thanks to the following sources:

http://httpd.apache.org/docs/1.3/howto/htaccess.html