Archive for the ‘Web Programming’ Category

Htaccess Tools

Post under Apache | By LGR | On December 8th, 2009

If you want to save some time editing your .htaccess file check out Htaccess Tools. It has some great .htaccess generators to help save you some time. Generators include:

  • Htpasswd Generator
  • Htaccess Authentication
  • Hotlink protection of images
  • Block IPs with .htaccess
  • Block hitbots with .htaccess
  • Error Document
  • Redirection by Language

While you can do all of these things without using an online generator, I have found that for some people using an online generator like the ones available here enables people to manage their websites more. Perhaps one of the most useful generators available on the site is the hotlink image protection. By using hotlink image protection you will be able to save on your bandwidth and prevent other websites using your images directly.

LGR Photo Discontinued

Post under News, PHP | By LGR | On June 9th, 2009

Many years ago I wrote a quick PHP script to help me create a simple HTML photo gallery from JPG images. I released it as LGR Photo and gave it away for free. It was a great little gallery and did what I needed it to do. I made it mainly for my own purposes but many others downloaded it and found it useful. I have been wanting to rewrite the script for quite sometime now, but it never seemed to make it onto the list of things to do. That being said I think it is time to simply retire LGR Photo.

If people are interested in using the script I will offer it here still for download. You are welcome to use it, rewrite it, play with it etc, but I can no longer offer support for it.

Download LGR Photo

If you want to know more about the script here is some information that I had up about the script.

Features

LGR Photo Gallery is a photo gallery script written in PHP. The current version has the following features:

  • Easy Installation. A basic install on LGR Photo using the defaults should only take as long as it takes you to download it, unzip it, and upload it and some photos to your web server.
  • Uses the GD Libraries to dynamically create thumbnails from your photos.
  • Reads EXIF comment information from photos and displays the comment under the photo.
  • Next and Previous thumbnail images when browsing photos.
  • Table columns and rows adjustable.
  • Cascading Style Sheet used for presentation.
  • Easy to insert your custom header and footer files for complete web site integration.
  • Easy to insert into an existing web site. Allows for many different layout configurations.
  • Can use Javascript to pop open photos in a new window.
  • Creates albums from folder structure. Number of sub albums only limited by the operating system.
  • Not bloatware! Only two files for a quick and easy install. Perfect for home networks and to share photos with friends and family over the internet.
  • Simple slideshow component included with a basic install.
  • Valid XHTML and CSS in default install.
  • FREE! What more can you ask for.

Requirements

The following are the requirements to run LGR Photo on your server/computer.

  • A web server that supports PHP.
  • Any operating system that can run a web server and PHP.
  • PHP Version 4.3.3 and up.
  • GD Libraries are required to create thumbnails.
  • EXIF support enabled if you want to display EXIF comment information.
  • Currently only supports jpg files.

To make LGR Photo blend in more with your web site you will need to have some knowledge of:

  • XHTML
  • Cascading Style Sheets (CSS)
  • Some time to sit and play with it.

Basic HTML – ASCII HTML Codes

Post under HTML | By LGR | On February 23rd, 2009

I am always amazed at how often I come back to a table of ASCII HTML codes that I have on my computer. ASCII HTML codes allow you to enter characters into a web page that are not found on you keyboard. The codes can also be very useful for entering characters for other languages, special characters and you can use them just for fun. You can even use many of the these ASCII HTML codes on Twitter so you can send that special some one a ♥ on Valentines Day or their Birthday.

Hope this reference helps you. I usually only use the HTML codes so that is what I have in the table.

Symbol HTML Number HTML Name Description
 

!

#

$

%

&

(

)

*

+

,

-

.

/




 

!

"

#

$

%

&

'

(

)

*

+

,

-

.

/
 
 
 
 

 

 

"

 

 

 

&

 

 

 

 

 

 

 

 

 
♠
♣
♥
♦

space

exclamation point

double quotes

number sign

dollar sign

percent sign

ampersand

single quote

opening parenthesis

closing parenthesis

asterisk

plus sign

comma

minus sign – hyphen

period

slash

black spade suit
black club suit
black heart suit
black diamond suit

Symbol HTML Number HTML Name Description
0

1

2

3

4

5

6

7

8

9

:

;

<

=

>

?

&#48;

&#49;

&#50;

&#51;

&#52;

&#53;

&#54;

&#55;

&#56;

&#57;

&#58;

&#59;

&#60;

&#61;

&#62;

&#63;

 

 

 

 

 

 

 

 

 

 

 

 

&lt;

 

&gt;

 

zero

one

two

three

four

five

six

seven

eight

nine

colon

semicolon

less than sign

equal sign

greater than sign

question mark

Symbol HTML Number HTML Name Description
@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

&#64;

&#65;

&#66;

&#67;

&#68;

&#69;

&#70;

&#71;

&#72;

&#73;

&#74;

&#75;

&#76;

&#77;

&#78;

&#79;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

at symbol

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Symbol HTML Number HTML Name Description
P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

&#80;

&#81;

&#82;

&#83;

&#84;

&#85;

&#86;

&#87;

&#88;

&#89;

&#90;

&#91;

&#92;

&#93;

&#94;

&#95;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

opening bracket

backslash

closing bracket

caret – circumflex

underscore

Symbol HTML Number HTML Name Description
`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

&#96;

&#97;

&#98;

&#99;

&#100;

&#101;

&#102;

&#103;

&#104;

&#105;

&#106;

&#107;

&#108;

&#109;

&#110;

&#111;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

grave accent

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Symbol HTML Number HTML Name Description
p

q

r

s

t

u

v

w

x

y

z

{

|

}

~

 

&#112;

&#113;

&#114;

&#115;

&#116;

&#117;

&#118;

&#119;

&#120;

&#121;

&#122;

&#123;

&#124;

&#125;

&#126;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

opening brace

vertical bar

closing brace

equivalency sign – tilde

(not defined in HTML 4 standard)

Symbol HTML Number HTML Name Description
 

¡

¢

£

¤

¥

¦

§

¨

©

ª

«

¬

­

®

¯

&#160;

&#161;

&#162;

&#163;

&#164;

&#165;

&#166;

&#167;

&#168;

&#169;

&#170;

&#171;

&#172;

&#173;

&#174;

&#175;

&nbsp;

&iexcl;

&cent;

&pound;

&curren;

&yen;

&brvbar;

&sect;

&uml;

&copy;

&ordf;

&laquo;

&not;

&shy;

&reg;

&macr;

non-breaking space

inverted exclamation mark

cent sign

pound sign

currency sign

yen sign

broken vertical bar

section sign

spacing diaeresis – umlaut

copyright sign

feminine ordinal indicator

left double angle quotes

not sign

soft hyphen

registered trade mark sign

spacing macron – overline

Symbol HTML Number HTML Name Description
°

±

²

³

´

µ

·

¸

¹

º

»

¼

½

¾

¿

&#176;

&#177;

&#178;

&#179;

&#180;

&#181;

&#182;

&#183;

&#184;

&#185;

&#186;

&#187;

&#188;

&#189;

&#190;

&#191;

&deg;

&plusmn;

&sup2;

&sup3;

&acute;

&micro;

&para;

&middot;

&cedil;

&sup1;

&ordm;

&raquo;

&frac14;

&frac12;

&frac34;

&iquest;

degree sign

plus-or-minus sign

superscript two – squared

superscript three – cubed

acute accent – spacing acute

micro sign

pilcrow sign – paragraph sign

middle dot – Georgian comma

spacing cedilla

superscript one

masculine ordinal indicator

right double angle quotes

fraction one quarter

fraction one half

fraction three quarters

inverted question mark

Symbol HTML Number HTML Name Description
À

Á

Â

Ã

Ä

Å

Æ

Ç

È

É

Ê

Ë

Ì

Í

Î

Ï

&#192;

&#193;

&#194;

&#195;

&#196;

&#197;

&#198;

&#199;

&#200;

&#201;

&#202;

&#203;

&#204;

&#205;

&#206;

&#207;

&Agrave;

&Aacute;

&Acirc;

&Atilde;

&Auml;

&Aring;

&AElig;

&Ccedil;

&Egrave;

&Eacute;

&Ecirc;

&Euml;

&Igrave;

&Iacute;

&Icirc;

&Iuml;

latin capital letter A with grave

latin capital letter A with acute

latin capital letter A with circumflex

latin capital letter A with tilde

latin capital letter A with diaeresis

latin capital letter A with ring above

latin capital letter AE

latin capital letter C with cedilla

latin capital letter E with grave

latin capital letter E with acute

latin capital letter E with circumflex

latin capital letter E with diaeresis

latin capital letter I with grave

latin capital letter I with acute

latin capital letter I with circumflex

latin capital letter I with diaeresis

Symbol HTML Number HTML Name Description
Ð

Ñ

Ò

Ó

Ô

Õ

Ö

×

Ø

Ù

Ú

Û

Ü

Ý

Þ

ß

&#208;

&#209;

&#210;

&#211;

&#212;

&#213;

&#214;

&#215;

&#216;

&#217;

&#218;

&#219;

&#220;

&#221;

&#222;

&#223;

&ETH;

&Ntilde;

&Ograve;

&Oacute;

&Ocirc;

&Otilde;

&Ouml;

&times;

&Oslash;

&Ugrave;

&Uacute;

&Ucirc;

&Uuml;

&Yacute;

&THORN;

&szlig;

latin capital letter ETH

latin capital letter N with tilde

latin capital letter O with grave

latin capital letter O with acute

latin capital letter O with circumflex

latin capital letter O with tilde

latin capital letter O with diaeresis

multiplication sign

latin capital letter O with slash

latin capital letter U with grave

latin capital letter U with acute

latin capital letter U with circumflex

latin capital letter U with diaeresis

latin capital letter Y with acute

latin capital letter THORN

latin small letter sharp s – ess-zed

Symbol HTML Number HTML Name Description
à

á

â

ã

ä

å

æ

ç

è

é

ê

ë

ì

í

î

ï

&#224;

&#225;

&#226;

&#227;

&#228;

&#229;

&#230;

&#231;

&#232;

&#233;

&#234;

&#235;

&#236;

&#237;

&#238;

&#239;

&agrave;

&aacute;

&acirc;

&atilde;

&auml;

&aring;

&aelig;

&ccedil;

&egrave;

&eacute;

&ecirc;

&euml;

&igrave;

&iacute;

&icirc;

&iuml;

latin small letter a with grave

latin small letter a with acute

latin small letter a with circumflex

latin small letter a with tilde

latin small letter a with diaeresis

latin small letter a with ring above

latin small letter ae

latin small letter c with cedilla

latin small letter e with grave

latin small letter e with acute

latin small letter e with circumflex

latin small letter e with diaeresis

latin small letter i with grave

latin small letter i with acute

latin small letter i with circumflex

latin small letter i with diaeresis

Symbol HTML Number HTML Name Description
ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

ú

û

ü

ý

þ

ÿ

&#240;

&#241;

&#242;

&#243;

&#244;

&#245;

&#246;

&#247;

&#248;

&#249;

&#250;

&#251;

&#252;

&#253;

&#254;

&#255;

&eth;

&ntilde;

&ograve;

&oacute;

&ocirc;

&otilde;

&ouml;

&divide;

&oslash;

&ugrave;

&uacute;

&ucirc;

&uuml;

&yacute;

&thorn;

&yuml;

latin small letter eth

latin small letter n with tilde

latin small letter o with grave

latin small letter o with acute

latin small letter o with circumflex

latin small letter o with tilde

latin small letter o with diaeresis

division sign

latin small letter o with slash

latin small letter u with grave

latin small letter u with acute

latin small letter u with circumflex

latin small letter u with diaeresis

latin small letter y with acute

latin small letter thorn

latin small letter y with diaeresis

Web Forms with Google Docs

Post under Google, HTML, Tools | By LGR | On February 19th, 2009

I was working on a contact form for a client this last week, and while I have a PHP form processing script that I like to use there are other alternatives to add a contact and other forms to your website if you do not happen to know PHP or you just need a quick form to help collect information for a survey Google Docs Forms.

The form below is a sample form that I created for you to tell me what your favourite websites are. The form took only a few minutes to create and embed into this post using an iframe tag.

By submitting the form the data is automatically inserted into a Google Docs Spreadsheet that you can view, edit and of course share with the world if you like. Below is the spreadsheet that the information that the form above is saved into.

This is a very simple example of what you could do with a Google Doc Form and Spreadsheet. It makes it very easy for anyone with a website to add a web form to collect information, run surveys, polls etc with out needing to know PHP, PERL or any other server side scripting. I can see myself using a simple Google Form and Spreadsheet to manage entries from the Subscriber Bonus contests each month.

Basic HTML – Ordered and Unordered Lists

Post under HTML | By LGR | On February 4th, 2009

One of the easiest ways to add some organization to your blog posts is to use a list. People like lists and they can help you make your points in a post or on your website clearly and quickly. In HTML there are three types of lists:

  • Ordered lists.
  • Unordered lists.
  • Definition lists.

For this post I will only look at ordered and unordered lists because those are the two most common types of lists. Definiation lists are useful as well and I will talk about them at a latter date.

Ordered Lists

An ordered list shows the list items starting with a number in front. A basic ordered list starts with the <ol> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your ordered list close the list with a closing </ol> tag. A basic ordered list looks like this:
<ol>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ol>

and it would be rendered like this:

  1. Item one.
  2. Item two.
  3. Item three.

Unordered Lists

An unordered list shows the list items starting with a bullet point in front. A basic unordered list starts with the <ul> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your unordered list close the list with a closing </ul> tag. A basic unordered list looks like this:
<ul>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ul>

and it would be rendered like this:

  • Item one.
  • Item two.
  • Item three.

That is the basics of ordered and unordered lists in HTML. Lists are very flexible in HTML and can do some amazing things when combined with the correct styles in a cascading style sheet. For example the current main menu at the top of the site is actually an unordered list that is styled to display as a menu. The sidebar items are unordered list items styled without a bullet.

Visual HTML Jokes

Post under HTML, Personal | By LGR | On January 28th, 2009

I was surfing around a little last night and came across this visual HTML joke of the Leaning Tower of Pisa. I think you have to be a true HTML geek to think it is funny.

That photo reminded me of a couple of photos of a truck that is embedded into the ground at a small restaurant called the Black Top Cafe just south of Blaine Lake. I thought I would add the HTML to the photos and share them here with you. I could not decide which I liked better, the <i> or the <embed>. Which one do you like better?

Here are some other visual HTML joke photos I found on Flickr that gave me a smile.

HTML CANT DO THAT!

by Noah Sussman

by Noah Sussman

HTML vs CSS

by eelke dekker

by eelke dekker

<link>

by Mark.Pilgrim

by Mark.Pilgrim

<hr>

by Mark.Pilgrim

by Mark.Pilgrim

small

by Tomas Caspers

by Tomas Caspers

<strike>

by Jesper Rønn-Jensen

by Jesper Rønn-Jensen

What are your favourite visual HTML joke photos?

Basic HTML – Links

Post under HTML | By LGR | On January 27th, 2009

One of the great things about publishing on the Internet is the ability to link to other resources on the Internet. A basic hyperlink in the body of a page is created using the anchor tag and looks like this:

<a href="http://www.lgr.ca/">LGR Internet Solutions</a>

The href (Hypertext Reference) attribute is the resource on the Internet that you are linking to. The word(s) between the opening anchor tag (<a href="http://www.lgr.ca/">) and the closing anchor tag (</a>) are the words that will be highlighted as the link. In this case the link would look like this:

LGR Internet Solutions

That is the most basic link that you can create. If you are using WordPress there is a great tutorial on the WordPress website showing you how to create a link. It walks you through the basics of creating links with WordPress in the visual and HTML editor.

Basic HTML – Headings

Post under HTML | By LGR | On January 13th, 2009

If you are new to running your own website or blog you might not know a lot of HTML but there is some basic HTML that is easy to learn that will make running and managing your website and blog much easier now and in the future. By using headings in your web pages and blog posts you make it easy to style using cascading style sheets and the document is nicely formated in the event that you move to a new theme or you redesign your website. In the past I have not always used headings on the blog posts here and those are the posts that I am often going back and editing because they are not displaying properly.

How to use headings

The code to define headings in HTML are simple. Below is how headings are displayed here on this blog and the code to define them.

This is a heading one

<h1>This is a heading one</h1>

This is a heading two

<h2>This is a heading two</h2>

This is a heading three

<h3>This is a heading three</h3>

This is a heading four

<h4>This is a heading four</h4>

This is a heading five

<h5>This is a heading five</h5>

This is a heading six

<h6>This is a heading six</h6>

WordPress - Show/Hide Kitchen Sink

WordPress - Show/Hide Kitchen Sink

If you are not using the HTML editing mode in WordPress you can still use proper headings. Simply click the Show/Hide Kitchen Sink button and the format button will be shown. Simply select the text you want as a heading and choose the heading type you want.
Selecting a heading in WordPress

Selecting a heading in WordPress

Considering how well structured most WordPress themes are I am surprised that the bold button is still there on the editor and the headings are hidden in the kitchen sink. If you use something other than WordPress to manage your website, you might have to use the HTML code to insert the proper headings, but most content management systems do have an easy way of adding proper headings into a document. For example here is a screenshot of how to add headings using Joomla.

Adding headings in the Joomla HTML editor

Adding headings in the Joomla HTML editor

Why use headings?

It is easy to use bold to define sections when you are writing a blog post but by using headings you make the post or page more structured. Headings are best used to introduce sections in a document. Web browsers generally render headings in different sizes making a heading one larger than a heading two and so on. Using proper headings in your blog post can also help boost your search engine rankings. For example a blog post title is probably best displayed as a heading one, with sections inside the blog post starting as a heading two. This gives a well structured document for the search engines to index. The search engines do not have to guess at what is a heading and what is suppose to be just bold text.

It is good practice to use headings. It will make your content easier to move from one content management system to another and it will be easier to redesign the presentation of your content by simply changing your cascading style sheet. I know that I have not always used proper headings here on the LGR Internet Solutions blog, and I am continually going back and editing posts to fix how things are laid out. Better to start from scratch doing things right than spending time fixing things.

Add Interactivity with Google Maps

Post under Javascript, Tools | By LGR | On June 4th, 2008

Writing for two blogs gets confusing sometimes. I post stuff over at Epiblogger that I really want to post here. This time I wrote a post about how to add Google Maps to your blog. Fortunately you can use the Google My Maps feature on any site so it is not restricted to just blogging.

The second way to add Google Maps that I talk about is using the Google Maps Plugin for WordPress. The great thing about the Google Maps Plugin for WordPress is you can use it even if you are not using WordPress. If you are looking for an easy way to add Google Maps to your website without fussing with all of the Javascript then this might be a good solution for you. I know I am going to put it on my list of tools to easily add Google Maps to websites whether they are using WordPress or not.

Include, Include_once, Require, Require_once

Post under PHP | By LGR | On June 2nd, 2008

I have been working with several new clients lately, mostly helping them update their websites with new content. Most of these websites were created by other companies or individuals and I am always amazed at how people create websites. One of the things that I am always amazed at is why people don’t take advantage of using includes to make managing a website easier. Individual web pages in a website are made up of many common elements: headers, menus, footers. There is no reason to duplicate these items across the website when a single file can be included on all the pages to make management of the website easier. Most web servers have PHP installed on them, so may use of it to make managing your website easier.

The PHP include() and include_once() functions will allow you to include those common elements in all pages. If you have a common menu you can use a simple include such as:
<?php
include('menu.php');
?>

You might have to change your path. For example I like to keep all the include files in a separate folder so my includes will often look something like this:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/includes/menu.php');
?>

To edit the menu and make the change across the entire website all I need to do is edit the one file menu.php. This can save you a considerable amount of time, especially if you have hundreds or thousands of web pages to edit.

The PHP functions that are most often used to include files are (from the PHP Documentation):

Include
The include() statement includes and evaluates the specified file.

Include Once
The include_once() statement includes and evaluates the specified file during the execution of the script. This is a behavior similar to the include() statement, with the only difference being that if the code from a file has already been included, it will not be included again. As the name suggests, it will be included just once.

Require
require() and include() are identical in every way except how they handle failure. They both produce a Warning, but require() results in a Fatal Error. In other words, don’t hesitate to use require() if you want a missing file to halt processing of the page.

Require Once
The require_once() statement includes and evaluates the specified file during the execution of the script. This is a behavior similar to the require() statement, with the only difference being that if the code from a file has already been included, it will not be included again.

When to use include() or require() can be an entire other post, but generally I use require() when the website needs that file to run. Site wide configuration files for example. If the file cannot be included it will stop the site from running. I use include() when it is less critical, so menus, headers, footers. The website might not look great if the menu does not get included but it will still display the information to people.