Now we are ready to add another function, with another type of 'node'. We are going to add the Webform Node, which enables us to collect information from visitors to our sites by asking them to fill in a form (webform).

To start, go to "administer – site building - modules" and select "webform" , then "save configuration".

You can now go to create content on the navigation menu and click webform to start your new webform node.

• Click menu settings , enter “contact us” in the title field, select Primary Links as the parent item and set weight to -6
• For Title enter “Contact Us”
• For Description enter “Please use this form to contact us”.
• For Confirmation message , enter “Thanks for your message, we'll get back to you promptly”.
• Now scroll down the page until you reach email to address , and enter your own email address. This is the email address that will be sent the results of visitor enquiries.
• Leave E-mail from address and E-mail subject as Default .
• Now move down to click publishing options check published and uncheck promoted to front page
• Now finish the form by clicking save.

For the next task, please click HERE

By clicking the new contact us link on the primary link (top right) menu, you will now see the new webform node, but there are no form fields to complete, so now we need to create them.
We require two fields to be completed, one to collect the visitors email address, and the second to collect their enquiry message.
To do this, you need to edit the webform. You can do this by clicking the title (contact us) and then clicking the edit tab, then click the form components tab.

You will see a box which faintly labeled new component name. Enter the word email in this box.
Now for type select email.
Check the boxes Mandatory and Email, then click add.

(If you will see an error message at the top of the page, ignore it.)

Another form will now open up. The only entry you need to make here is set width=40. then click submit at the bottom of the page.

You can now add another form component, This one should be called "Your Message". Set the type to Text Area and check the mandatory and email boxes. Click add and in the next form set width=40 and height=5. Click submit at the bottom of the page.

Your contact form is now complete. Please test it by entering your email and a message and click submit. It should send the message to your own email address.

For the next task, please click HERE

Whenever someone registers on your site (we call them registrants) as default, Drupal only asks them for a username and an email address, it then it sends a randomly generated password to the registrants so that they can then enter your site.

You can have control over the manner in which you allow new registrants to access your site.

Go to administer- user management - user settings and you will reach the settings that control both the manner in which registrations are controlled, and the messages that are sent to visitors when they register on your site. The choices are…

• Only site administrators can create new user accounts.
• Visitors can create accounts and no administrator approval is required.
• Visitors can create accounts but administrator approval is required.

If you want visitors to freely register on your site, choose the middle option. If you however want control over who can and who cannot access your content, then choose the last option, whereupon new users are created but their “status” is set to “blocked”, which means that although they chosen a username and have been sent a password by Drupal, they cannot log in until you “unblock” them, which you can do by going to administer- user management - users. Here you will see a list of users together with their “active” or “blocked” status. By clicking edit for each user, you can switch the status from blocked to active and vice versa.

For the next task, please click HERE

When a visitor chooses to register on your site, he currently would only be asked to supply a username and email address. Drupal will then send a password to the registrant. By using the Profile module, it is possible to ask for more information (e.g. name, address etc. This module enables you to build a form (a little like the webform module) with questions that are either optional or mandatory

To activate the profile module, go to administer - site building - modules and activate the profile module.

Now if you return to administer - user management - profiles you will see that, just like the webform, you are able to add fields to the registration form.

I suggest that you start by adding a single-line text field

Now enter these values (or variants of your own choosing)

•  For Category enter “Personal Information”. The category enables you to classify the type of information you wish to collect from your registrants. Another category could be “Location” where address details are stored.

•  For Title enter “Name”

•  For Form name : enter “ profile_name ”

•  Explanation is optional, you would only use this if you needed to provide assistance to the registrant when they are posting their answer.

•  Select Weight to –10, so that this field “floats” to the top of your registration form.

•  For Visibility select: “Public field, content shown on profile page and on member list pages.”

•  Now go down and check both of these boxes

The user must enter a value.

Visible in user registration form.

•  Click Submit

Now let's add one more field for the registration form that enables your visitor to enter they country of residence. This they will do by selecting from a list

Under Add new field select list selection and enter these values (or variants of your own choosing)

• For Category enter “Location”.
• For Title enter “Country of Residence”
• For Form name enter “ profile_country ”
• Ignore Explanation
• For Selection Options, go to www.learndrupal.co.uk/node/22 , where you will see a full list of countries. Copy that list and paste it into this field.
• Select Weight to –4, so that this field is second from the top of your registration form.
• For Visibility select: “Public field, content shown on profile page and on member list pages.

Now go down and check both of these boxes

• The user must enter a value.
• Visible in user registration form.
• Click Submit

Now experiment by adding at least one more field in your registration form.

Click HERE for the next stage.

Stage 9 introduced some basic HTML codes for you to experiment with. Since 25% of your project marks are allocated to your use of HTML, you will be able to secure higher marks if you are able to demonstrate the use of tables.

Tables enable us to have better control over laying out text and graphics. They do so by allowing us to position content in rows and columns, just as in the example below.

A table is started by using the <table> command and (as with all html commands) ended by adding a forward slash to the command </table>

To start a row in a table we use the <tr> command, and to end a row we use </tr>

So a table with 3 rows would look like this

<table>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

Each row can then be broken up into cells by using the <td></td> command. So if we wanted each row to have 3 cells, the code would look like this..

<table>

<tr><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td></tr>

</table>

Now if we wanted content to appear in each cell, we would place the content between the <td></td> commands as below.

<table>

<tr><td>ONE</td><td>TWO</td><td>THREE</td></tr>

<tr><td>FOUR</td><td>FIVE</td><td>SIX</td></tr>

<tr><td>SEVEN</td><td>EIGHT</td><td>NONE</td></tr>

</table>

The resulting table would look like this..

To adjust the size ot the table we can add a width command in the opening table statement e.g. <table width=400>

The resulting table would look like this..

And now we can center the table by adding an align command t e.g. <table width=400 align=center>

To carry out an exercise in creating a table with images, please click HERE

This is an exercise to demonstrate that you are able to build a simple table that lays out images.

First go to Creat Content amd create a new page and call it HTML test. Set the Input Type to Full HTML.

Using this page, see if you can create a simple restaurant menu as below..

In order to do this, first create a table with 2 rows (one for the images and the other for the prices), then, using the <td></td> commands, create thee cells in each row.

Now, you need to bring the images in the first row. Images can be brought in using the <img src=imageURL> command.

The URLs for each image are..

http://bs107.net/images/burger.jpg

http://bs107.net/images/pizza.gif

http://bs107.net/images/spaghetti.gif

So to bring the burger image in the first cell, you would use

<td><img src= http://bs107.net/images/burger.jpg></td>

Now see if you can complete the table on your new HTML Test page.

For the next task, please click HERE