Tag Archive: html


I am designing a simple HTML site for my intranet. this site will host our policies and procedures, which have been split up into roughly 600 PDF files. The pages are written in HTML with CSS 2 completely from scratch. I use NTFS permissions and URLAuthorization to control who can visit the Windows Authentication website.

The site consists of five static pages, a little CSS trickery, and now, a bit of PHP. I decided that due to the sheer volume of the PDF file’s (which are linked from within the pages, and each file name is a slew of very specific policy numbers) that it would be difficult to pin point a broken link myself.

So I came up with the idea of a broken link (or feedback) page. A very simple page, with two input fields and a textarea field (Name, Email, Comment, respectively). A submit button finishes it off.

The problem with this is that when you hit submit and the mailto: runs, it opens up your default email program and populates a new message. this is ok, but what about people without an email client, or without one configured by default?

So I decide to use a bit of PHP to get my IIS to send my mail for me, in the background.

Here it goes.

First, my setup. I have a SBS 2008 running IIS 7.0, Exchange 2007, Sharepoint, pretty much everything. I then have a very low resourced Windows Server 2008 R2 member. This server does very little, but it does have IIS 7.5 installed, in order to run Lync Server 2010.

First thing we will do is install SMTP for IIS. Open up Server Manager, expand Features.

Click Add Features on the right, then select SMTP Server. Click Install.

Install SMTP

Install SMTP

 

Once that completes, you will have a new tool under Administrative Tools: Internet Information Services 6.0 Manager. Make sure it is 6.0, the other IIS Manager will not let you do this.

IIS 6.0 Manager

IIS 6.0 Manager

You might get a popup about 32 or 64-bit, choose 64 and click ok.

Choose 32 or 64 Bit

Choose 32 or 64 Bit

You will see Internet Information Services in the left window, with a sub-tree of your server name. Expand that node, and you will see VirtualSMTP. Right click that and select rename, and give it a good name- in this case I named mine MemberSMTP (It’s on my domain MEMBER).

Rename SMTP Virtual Server

Rename SMTP Virtual Server

Now right-click the renamed server, and select properties.

Click the Access Tab, then select Connections.

You want to enable the server that is hosting your website (the one that needs to sendmail) to use that server. I used the radio button Only The List Below (less access is good access).

Click Add, and add the loopback or localhost IP address of the server hosting the IIS if it is local. For good measure, I also added the true IP address of the server.

Connections

Connections

Click OK, and select the button Relay…

Set this up exactly as the other list.

Click Ok, Apply, and Ok.

Right click on the VirtualServer and select Start. If it is already started, click Stop, then Start again.

Thats it for the IIS part (roughly), now on to the PHP and the form itself.

Well, before we get into it, we need to have three web pages in our site. the form itself, named feedback.htm. We need a thank you page, named thanks.htm, and an error page, named error.htm. Put these in the root of your website. Here is the HTML from one of my pages.

Note that it will not work for you perfectly lacking my CSS.


<!--pan class="hiddenSpellError" pre=-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>Feedback</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
css"
href="PolicyStyleSheet.css" />

 
    <style type="text/css">
        .style1
        {
            color: #FFFFFF;
}

</style>

    <!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
    .style2
    {
        color: #FF0000;
    }
    .style3
    {
        color: #999999;
    }
</style>
<!--span class="hiddenSpellError" pre=-->endif]-->

</head>
<body>
<div id="bg"><img src="images/gradient.png" width="100%" height="100%" alt=""></div>
<div id="content">
<!-- Header -->
<div id="#hdr">
<table>80px; width: 80%;">
<tbody></tbody>
</table>
        <tr>
       
<td> </td>
<img src="images/small logo no background.jpg"
        style="height: 75px; margin-left: 10px;"  />
        <td align="center"><h1><a name="top">Report a Problem<br />
        or Broken Link</a></h1>
        </td>

        <td>
        <a href="feedback.htm" title="Feedback">Feedback</a>
        </td>
       
        </tr>
        </table></div>
<div>
    <table border="0" cellpadding="0" cellspacing="0"
        style="height: 55px; width: 48%; margin-left: 50px;">


    </table>
</div>

<div id="lh-col1">
</div>

<div id="rh-col"><br />
</div>


</body>
</html>

 You pretty much just need three basic pages, with names you can remember, that have a head and body. you will customize them more later, or take the time to do so now. the error page should say something like “Sorry, you did not fill out the form correctly. Click here to return.” The thanks.htm should say something like “Hey thanks for taking the time! Go back to the site.”

Anyhow, the HTML/CSS lessons will have to come from someone else another time, if you can’t program HTML at this point, stop reading this post.

Now let’s install PHP. All of the romantics and programmers will tell you to manually install it. I don’t have time for all that, so I download the Windows binary here- VC9 x86 Non Thread Safe (2011-Jan-05 21:37:35). Once it downloads, double-click the msi file to start the install.

I selected to install all of the options. you can customize this the way you wish. Make sure to select IIS FastCGI when you get to that point.

IIS FastCGI

IIS FastCGI

Once that completes, we need to make a file in the root of our website. Open up Notapad and save the file as feedback.php. How you get it into your website is up to you. I actually use MS Visual Web Developer 2010, and just copied it into the file directory.

Now we need to make our script, and add some code to feedback.htm and feedback.php. there is a website that will generate it for you- go HERE. Thanks SiteWizard for such a great tool!

Scroll down and select Create a PHP feedback form, and select go to step 2.

PHP Feedback Form

PHP Feedback Form

Fill in your email address, or whoever you want to form results to be mailed to. Enter in the web address of your feedback page, thank you page, and error page. these were the feedback.htm, thanks.htm, and error.htm pages we already created. To get the correct address click on View in Browser from whatever program you are using to author your site, then copy the address for each page.

Page URL's

Page URL's

Skip over all of the optional selections. You can change these if you wish, but you don’t have to. Select to agree to the conditions, and click Generate Script.

The screen has two text areas. the top one is your feedback.PHP contents. Select all of the text, copy it, and paste it into your feedback.php file, using Notepad or your site editor.

Feedback.PHP content

Feedback.PHP content

 

Select the text from the second box and insert this into your feedback.htm page. It should go in the body of the page, in between <div></div> tags.

Feedback.HTM content

Feedback.HTM content

 

Now browse to your feedback.htm. Enter some information, and hit send. The email should arrive quickly.

If you have any problems with the HTML, post a comment and I will help out. If you have problems with IIS 7.5, ask away. If you have problems setting up PHP, view their documentation. If you need to change your PHP.ini settings, I can point you at an entry, but that’s it:


[mail function]
; For Win32 only.
; http://php.net/smtp
SMTP = localhost
; http://php.net/smtp-port
smtp_port = 25

; For Win32 only.
; http://php.net/sendmail-from
;sendmail_from = me@example.com

; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
; http://php.net/sendmail-path
;sendmail_path =

And of course thanks again to TheSiteWizard.

So you create a survey on Sharepoint, and sent out an email to all users. After a week only 5 people have taken it. This is because getting users to do something as simple as a survey if they feel it is not necessary can often be difficult. I will describe a simple way to make the survey much more noticeable, and then describe an alternate way as well.

We will be inserting a content editor web part with an image for users to click. You want the image to be noticable. I picked a RED button, as my site is blue. It stands out like a sore thumb. First, download a picture for your button. I Google searched red button, and came up with a nice looking glossy button here.

Google Button

Google Button at Clker.Com

Now, I will go to a Sharepoint library and upload the image. You can put it in any directory you want.

Sharepoint Button

Sharepoint Button

 

Once it is uploaded, click the link untill you are at a page displaying just that image. Now, copy the internet address of that image.

Go to your home screen. Click Site Actions>Create. Click Survey. Customize the survey as you see fit- I will not describe this process here. For mine, I made a 3 question, radial choice survey asking which design users liked for our site, out of three themes we have recently used.

Now go to the home screen. Click Site Actions>Edit Page. This will make all of your web parts appear. Decide where you want this button to be, and click add web part (you can drag it around after). I replaced the default Image Web Part which is in the right hand column.

Add Content Editor

Add Content Editor

 

Add a Content Editor Web Part.

Content Editor Options

Content Editor Options

Now click the little arrow to modify the shared web part. The editor column appears on the right. Click Rich Text Editor. You are then presented with a blank box. On the toolbar, there is an Insert Picture icon. Click this.

Now paste the button address in the space for the address of your picture. For Alt text, I chose Push Me!

Now the picture is displayed in the text editor box. You can resize it, and add text under it if you wish. I added text saying “Take this one question survey about the design of our site!”.

Exit out of this for a moment. Now you will navigate to your created survey- it’s probably listed in the quick launch on the left. Click Respond To This Survey.

You will be looking at the first page of survey questions. Copy this web address from your browsers address bar.

Now hit home, and then again Site Settings>Edit Page>Modify Content Editor Web Part.

Then in the right column, click Source Editor. You will see the HTML code for your picture and text, it will look something like this:

&lt;a href=&quot;http://companyweb/Lists/Site%20Design/NewForm.aspx?Source=http%3A%2F%2Fcompanyweb%2FLists%2FSite%2520Design%2Foverview%2Easpx&quot;&gt;&lt;img style=&quot;width: 178px; height: 173px;&quot; src=&quot;http://companyweb/All%20IT%20Forms/Pictures/119498475589498995button-red_benji_park_01_svg_med.png&quot; alt=&quot;Push Me!&quot; width=&quot;190&quot; height=&quot;173&quot; /&gt;&lt;/a&gt;
&lt;div&gt; &lt;/div&gt;
&lt;div&gt;&lt;a href=&quot;http://companyweb/Lists/Site%20Design/NewForm.aspx?Source=http%3A%2F%2Fcompanyweb%2FLists%2FSite%2520Design%2Foverview%2Easpx&quot;&gt;Click the Red Button to take a&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href=&quot;http://companyweb/Lists/Site%20Design/NewForm.aspx?Source=http%3A%2F%2Fcompanyweb%2FLists%2FSite%2520Design%2Foverview%2Easpx&quot;&gt;quick Survey about Site Design!&lt;/a&gt;&lt;/div&gt;

You are now going to add a link to the picture. Do this by adding an HTML link tag just before the beginning of the IMG tag. Remember we just copied it, so paste that address in between the “”.

Exit out of all of this, and you now have a bright red button on the side of your page, and when users click it they are taken directly to the survey.

Survey Look at Finish

Survey Look at Finish

 

Another method that I will briefly describe, is to use a splash page and redirection. Create a simple HTML page, and put a link in the middle. I did a white page with a red text link saying “Take Company Survey”. In the properties of that text link, aim it at the survey like we just did. Upload that site to companyweb using Sharepoint Designer or Visual Web. Now, I regulate users start page in the office, which is set to http://companyweb/default.aspx. Once I uploaded the new page as splash.html, I pointed their new home page at http://companyweb/splash.html.

When users logged in, they got that page with the link, which hinted at taking the survey. While it did not require they take the survey, it is a quick trick to get people attention. You could add validation controls that forced them to that site, and even add a fade page control that took them directly there. You could even set the company start page at the survey page if you wanted too- but this might be confusing.

Tons of options here to get the word out about a survey.

Credit to http://www.clker.com for providing me that image for internal use.

%d bloggers like this: