Web Masters' Tips

The other panels on this page will assume you have some basic skills, notably:

• Having several programs running at once and switching between them
  (Alt-Tab for Windows, Cmd-Tab for Mac)
  


• Opening files with a program of your choice, not necessarily the computer’s default
  (Right-Click the file in Windows Explorer or in Mac Finder, then choose the program)
  


• Using a text editor (e.g. Notepad in Windows, Textedit on Mac) to prepare your text for copying into the website (Word Processors may produce unexpected results), and ability to use Copy-and-Paste (Ctrl-C and Ctrl-V on Windows, Cmd-C and Cmd-V on Mac).
  


• See how your text works in your browser before committing it to the website (e.g. Save As: MyFile.htm then double-click on it in Explorer or Finder to open it in your browser - handy if copying PayPal code into your page). If you’re not happy with the result, right-click on the MyFile.htm, Open With your editor, make the necessary changes and repeat until happy.

An Event always has two components plus an optional one.

They are

• The Event Page - this has all the description of your event and (probably) buttons to sell tickets etc (probably to Paypal)


• The Homepage Event Link - this tells the template to show your event on the Club Homepage


• The Registration Page (optional) - this has just enough to enter (and Pay for) the event

You start by cretaing the Event page and the Registration Page then Activate the event on the homepage.

The Event Page

This is created and edited under Public Pages - Events
It is like a What We Do page plus a start and finish time for the event
Make sure the start date is in the future.
I think of it as being in two halves.
the upper half is descriptive with images etc - the poster for your event
the lower half has the facilities for buying tickets giving the visitor the cahnce to buy NOW!
the easieat way to do this is to copy the Registration Page into the lower half so you can leave that blank in the first draft, copy it in when it is working.

The Registration Page

This might be on another web site but t can be a What We Do page so we'll take that route.
This is a normal Active Non-sticky What We Do Page
Its purpose is give immediate access to the Paypal buttons with the least clicks for experienced visitors
Initially I suggest you rough it out with

******

ADD TO CART

******
where you want that button to go (and same for **** ViEW CART *****)

You need to know its URL so Save the page and go Club Home - find the page under What We Do and make a note of the URL

The Homepage Event Link (Public - Home Page Options - event highlight area

The template offers you a pull down where you select your Event Page
In Button Test - put something like Buy Tickets Now
In Button Link URL - put your Registration Page's URL

Now - go to Club Home Page and your event should be featured, try the Event Details and Buy Tickets Now button to get a feel for what is where.

Edit the two pages until you are happy with their appearance, albeit with dummy buttons.

Then create the Paypal code as descibed in the relevant Panel

Then put the Buttons into your Regstration Page - see the relevant Panel

Check the functioning of the buttons on the Registration Page

Then copy the code of the Registration Page and Paste it at the bottom of the Event Page - see the relevant Panel

You will need

• an e-mail address which will become your Paypal account ID (e.g.myclub@gmail.com)


• a Paypal account - Business Class


• the URL of your Refistration Page

You can spend some time getting Not With Profit accreditation at Paypal which reduces your fees and can help with getting tax relief on donations but you don't need that to make working buttons

Open Paypal in a fresh tab in your browser and login


This is the sequence I followed after logging into Paypal

• My PayPal


• Tools - Business Setup


• Choose Your Funding Sources


• On your website - Continue


• Process all .. through Paypal - Continue


• Option B - Create a payment Button

For starters - create an Add to Cart button. Don't get hung up on details - just try what seems right - (you can always come back and change things)

Give your button a name. You might have several buttons in due course so they need an identity.

In stage 3 you will need the URL of your Registration Page as the page to return to after Paypal

Press the button to Select the code and copy it (Ctrl+C)

Go back to the Template Registration page in Club Admin Area and Update Page

Swich to code view (</>) - at this time I find fullscreen best.

Look down your page for the ***** ADD TO CART ***** dummy entry

To make it more readable you can put in breaks (Enter) like this

Look down your page for the dummy entry

*****

ADD TO CART

*****

Now delete ADD TO CART and paste in the Paypal code (Ctrl+V) It should slot in beteween the two asterisk lines like this (this is my button and my italics)

*****

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="TPF7UD2KM4BSW"><table><tr><td><input type="hidden" name="on0" value="Entrants">Entrants</td></tr><tr><td><select name="os0"> <option value="Santa Dash (Adult)">Santa Dash (Adult) £10.00 GBP</option> <option value="Santa Dash (Junior)">Santa Dash (Junior) £10.00 GBP</option> <option value="5K Run">5K Run £10.00 GBP</option></select> </td></tr><tr><td><input type="hidden" name="on1" value="Entrant's Name">Entrant's Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr></table><input type="hidden" name="currency_code" value="GBP"><input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"></form>

*****

Lastly Delete the asterisks reduce the screen to normal, change back to Editor view (</>) and save (update page )

Preview the Registration page - try the button if you like - you don't have to buy!

Toggle back to Paypal and generate a button for View Cart - Select and copy the code (Ctrl+C)

Toggle back to Registration Page and Update it as above for **** ViIEW CART *****.

You can now edit the page to get the appearance to your liking. Don't touch the buttons with the Template editor

When you are happy you can consider copying the Registration Page and pasting it in at the bottom of the Event Page. Do that in code view (</>)

There is a Panel on customising Paypal buttons.

Here is the HTML code for a Paypal button just as generated by Paypal.


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="TPF7UD2KM4BSW">
<table>
<tr><td><input type="hidden" name="on0" value="Entrants">Entrants</td></tr><tr><td><select name="os0">
<option value="Santa Dash (Adult)">Santa Dash (Adult) £10.00 GBP</option>
<option value="Santa Dash (Junior)">Santa Dash (Junior) £10.00 GBP</option>
<option value="5K Run">5K Run £10.00 GBP</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Entrant's Name">Entrant's Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Your browser will show it like this

Entrants

Santa Dash (Adult) £10.00 GBP Santa Dash (Junior) £10.00 GBP 5K Run £10.00 GBP

Entrant's Name

You can edit it in the template page editor but your efforts are then in public view so I suggest you do your editing in Notepad until you are happy then copy and paste into your Registration Page.

so
Start Notepad;
copy your button code from Paypal;
paste into Notepad.;
File save - anyname.htm (I use Cart.htm but the .htm is the critical part)
Open Explorer or My computer and find anyanme.htm
Double click on it

Now practice switching between these programs - Notepad, your browser (we're finished with Explorer so you can close it). Finish in Notepad

Notice that your button's code starts at <form and ends with </form>

I've put in some line breaks (Enter) and colours to emphasis the structure of the form.
(you can put line breaks in anywhare for readability, the browser will ignore them.)

When you make changes, make small changes, Save your Notapd - switch to your browser and Refresh

The lines in red are Paypal's - don't touch them

Between the red header and the red footor is a table - it starts at <table> and ends with </table> .

The table has four rows (<tr> to </tr>)

Each row has one column (<td> to </td>)




<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="TPF7UD2KM4BSW">


<table>


<tr>
<td>
<input type="hidden" name="on0" value="Entrants">Entrants
</td>
</tr>


<tr>
<td>
<select name="os0">
<option value="Santa Dash (Adult)">Santa Dash (Adult) £10.00 GBP</option>
<option value="Santa Dash (Junior)">Santa Dash (Junior) £10.00 GBP</option>
<option value="5K Run">5K Run £10.00 GBP
</option>
</select>
</td>
</tr>


<tr>
<td>
<input type="hidden" name="on1" value="Entrant's Name" >Entrant's Name
</td>
</tr>


<tr>
<td>
<input type="text" name="os1" maxlength="200">
</td>
</tr>






</table>




<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>



You could start by correcting the error in the row one - It asks for Entrants, it should be Event?

This all standard HTML - there are several good websites you can visit - try www.W3schools.com


Here is a customised Paypal Add to Cart Button. As before to make it readable I have broken it into lines. I've removed the paypal only lines from top and bottom.

<table border="1" >
    <tr>
        <th>
        Event ?
        </th>
        <td>
         <select name="os0">
         <option value="Santa Dash (Adult)">Santa Dash (Adult) £10.00 GBP</option>
         <option value="Santa Dash (Junior)">Santa Dash (Junior) £10.00 GBP</option>
         <option value="5K Run">5K Run £10.00 GBP</option>
        </select>
        </td>
    </tr>
    <tr>
        <th>
         Entrant's Name ?  
        </th>
        <td>
        <input type="text" name="os1" maxlength="200" required placeholder = "Dasher's name">
        </td>
    </tr>
</table>

The changes were:

to put a border round the table
to change the table to two rows of two columns
to change the 'title' cells to be 'headers' which are bold and centred
to pad the Entrants Name? with leading and traing spaces ( )
to make the entrant's name a required input
to put a prompt in the Entrant's name

Which looks like this in your browser

Event ?	Santa Dash (Adult) £10.00 GBP Santa Dash (Junior) £10.00 GBP 5K Run £10.00 GBP
Entrant's Name ?

The form above asks for a name for each entrant - Paypal will report this to you just as it is typed e.g. Joe Bloggs

If you need to make alphabetical lists you will need to ask for Surname and Forename separately. - like this:

<table>
    <tr>
        <td>
        <input type="hidden" name="on0" value="Entrants">Entrants</td></tr><tr><td><select name="os0">
            <option value="Santa Dash (Adult)">Santa Dash (Adult) £0.01 GBP</option>
            <option value="Santa Dash (Junior)">Santa Dash (Junior) £0.02 GBP</option>
            <option value="5K Run">5K Run £0.03 GBP</option>
        </select>
        </td>
        </tr>
    <tr>
        <td>
            <input type="hidden" name="on1" value="Entrant's Nickname or Surname">Entrant's Nickname or Surname
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="os1" maxlength="200">
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" name="on2" value="Entrant's Forename">Entrant's Forename</td>
        </tr>
    <tr>
        <td>
            <input type="text" name="os2" maxlength="200">
        </td>
    </tr>
</table>

Which looks like this in your browser

Entrants

Santa Dash (Adult) £0.01 GBP Santa Dash (Junior) £0.02 GBP 5K Run £0.03 GBP

Entrant's Nickname or Surname

Entrant's Forename

When your 'customer' pays you via Paypal as part of the payment process he will supply a delivery address. This might be the address Paypal already has for him or if he doesn't have a Paypal account he will be asked to fill one in.

He will get an email from Paypal and you will get one with all the details including his email address and the delivery address. It's up to you whether you send your Club's email thanking him.

Paypal will at any time on request generate a report of your 'sales' - the Activity Report is most useful

This comes as a CSV file with details of every transaction (sales and transfers to your bank).

You can use Excel to read and manipulate this file ( choose Delimited - Next - Comma - Finish).

You can also use it to send a mailshot to every customers

The example Paypal form we created earlier asks for each Entrant's name - e.g. Joe Bloggs. This doesn't let you sort alphabetically by surname. If you need that you will have to split the name part up on the Paypal form.

The default report has one line per sale (Entrant) and it includes each line from the customer's 'basket' as a single cell - so Tom Brown,Dick Whittington,Harry Hill which is not convenient for things like a check in list at the Event.

It is possible to request a report by basket item from Paypal but it is a very elaborate report.

In Accordion Wizard we have a button which will convert the default Paypal report to a simplified listing with one line per basket item



If you keep these reports after the event for use in next year's sales effort you should say so in in your Data Protection statement

This is a layman's guide to domains and URLs and sites. Please think twice before you pass it on as gospel.




A site is like a folder where the page or pages are stored. It generally belongs to a parent domain.

The domain name acts like a phone number - when you call it you can be connected to the site

Like phone numbers the domain may forward your call to another domain and hence to its site.

So some domains have a site but some domains are just forwarding addresses.

When you ask your browser for a domain it looks up the WWW directory and either goes to that site or forwards you to another domaain.

So your Club's home page is a page on (more correctly within) the RIBI's domain. You can also create a domain for your Club which will forward visitors to the RIBI domain.

At the top of your browser screen is the space where you enter the domain you want, it shows you the full address of the page it ihas found. That is called its URL = universal resource locater.
(A 404 error is comes when requested URL can't be found in the World Wide Web's directory.)

rotarygbi.org is the domain name of the template and it has all the pages of all the Clubs.

https://www.rotary-ribi.org/clubs/homepage.php?ClubID=27 is not a domain name - it is the URL of a the home page of our Club within the template domain

That is not very memorable or concise so we have registered a domain dunfermlinerotary.club.

This domain has no pages, it is just an addtress which foerwars visitors our template home page

So now your browser looks up dunfermlinerotary.club and you are put through to our template homepage.

To achieve that we had to register dunfermlinerotary.club.

There are many many registrars and they all charge much the same. The price for .club or .org is higher than for .org.uk or .co.uk and the price is renewable every one or two years

If you haven't got a domain name registered then Chris Sweeney's company 121Technologiy can help you.

To make your domain point to your template homepage you will use 'web forwarding'.

Not every registrar includes web forwarding in its cheapest package so before registering your domain make sure that web forwarding is included.

For instance bscomputers.co.uk has been registered at Plusnet for 20 years with forwarding but they turned me away for dunfermlinerotary.club which is registered at GoDaddy.

If you have already got a domain registered you will need to know who the registrar is and the user or account id and password to manage the registration.

If that info is not readily availabe there is an online facilty called whois which will tell you who the registrar is and who it is registered to. You might need to find the (former) member who did that.

If all else fails -register a new name and start again. The existing name wiil lapse inside 2 years and you might then restart it. You can have more than one domain name all forwarding to the same site.

In your registrar's management pages for your domain you will have to find web forwarding and put in your club's template site - use https://rotary-ribi/clubs/homepage/ClubId=your club number.

You may be asked by your members why the name changes in the URL. You can answer 'because' or you can explain all the above plus 'masking'

Masking is a refinement of forwarding. It is not a good idea for the template. With masking you can't use the URL from your browser in links, which you might want to do from Facebook etc.

There is nothing different about writing a script for the Template except to be aware that the Template editr filters out some comments and can negate some of your script.

Here is a before and after example

This is code before submission to this editor

This the code after allowing the editor to update page

Notice that all carriage return+line feed have been removed

Note that the comments in the <style> section have been preserved.

Note that the comments in the HTML are deleted

Note that multi line comments in <script> are preserved

BUT

Note that the single line comment in <Script> turns the rest of the script into a comment.

Moral - don't use single line comments in <script>

An Accordion Pages allows a large number of topics to be presented under a contents list.

Look at Ralph's Reports under What We do for another example.

The RIBI-T template system doesn't provide any help in creating accordion pages so I created the Accordion Wizard to make it easier.

Accordion Wizard runs on PC and keeps a database of the topics which you can easily update with new topics or changes and will generate the HTML page you need.

It is free to download and comes with a manual which you can read below.

Download AWInstall.exe here

If you can't see the document below you can download it here

This topic is under development

The problem is how to make a topic which includes a carousel of images.

I expect to have the following procedure

1. In Template Admin - develop a page with a carousel as normal (don't make it active; you may already have this page)
2. Copy the HTML code (View Page source - copy to Notepad)

3. In Accordion Wizard - paste the entire page into a topic

4. Available soon - press a button to convert your page into a topic. (Strip off a lot of template stuff)

5. Save and generate HTML as usual

To modify the page - Update the original page in Template and repeat 2 - 5.