Personal Web Site Starter Kit - in F#!

Congratulations! You have created your own Personal Web Site, which includes a home page, resume, and photo album. You can use the site as-is with some small customizations, such as adding your own content. In addition, you can add pages to the site. The following sections explain how to use the Personal Web Site. First we will mention a few important topics regarding the application and database configuration:

In the rest of the document we will describe several actions that you can do when the application is correctly configured:

NOTE: Sections marked important, have to be followed before you can start the application!

Configuring F# to Work with ASP.NET

For F# to work correctly with ASP.NET it is needed to configure a CodeDOM provider in the web.config file. The file already includes section with the configuration, but you need to update the assembly version to match the F# version you installed (if you don't know the version, you can start FSI, which prints the version when starting). Find the compiler node in the web.config file and set the right version number (e.g. 1.9.2.2): 

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true">  
      <compilers>
        <compiler language="F#;f#;fs;fsharp" extension=".fs" type="Microsoft.FSharp.Compiler.CodeDom.FSharpAspNetCodeProvider, 
                            FSharp.Compiler.CodeDom, Version=<version number>, Culture=neutral, PublicKeyToken=a19089b1c74d0809"/>
      </compilers>
    </compilation>
  </system.web>
</configuration>

If you want to configure a different ASP.NET project to use F#, you need to include the compiler section from this code snippet.

Creating and Configuring Databases

Before you can start using the application, you need to configure a database. This application uses two separate databases - one to store user information managed by the ASP.NET and second to store custom application data (Photos and Albums). We describe two possible situations - you can either use SQL Server 2005 Express edition and keep your database files in App_Data directory or you can use different SQL Server edition.

To use SQL Server 2005 Express

  1. You can get SQL Server 2005 Express for free from Microsoft website: http://msdn.microsoft.com/vstudio/express/sql
  2. You need to create the database to store custom data manually. To do this right click App_Data folder, select Add New Item..., select SQL Database and call it Personal.mdf.
  3. Open web.config file and modify the connectionStrings section to include the following:
    <connectionStrings>
      <add name="Personal" providerName="System.Data.SqlClient" connectionString=
           "Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|Personal.mdf" />
      <remove name="LocalSqlServer"/>
      <add name="LocalSqlServer" connectionString=
           "Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|aspnetdb.mdf" />
    </connectionStrings>   
  4. Now we created and configured the database, but we still need to create database tables required by the application. The database and database tables reqired by ASP.NET will be created automatically (including the AspNetDB.mdf file), so you don't need to configure it manually.
  5. To configure the custom database (Personal.mdf) we will need SQL Server Management Studio Express, which can be downloaded from the same URL as SQL Server 2005 Express. Open SQL Server Management Studio Express, connect to the created database file (right click on Databases in the Object Explorer and select Attach...), copy contents of the personal-add.sql file in the App_Data to new query window and execute it.
  6. You are now ready to start using the application, to open the home page press Ctrl+F5! 

To use other SQL Server 2005 edition

  1. First we will configure ASP.NET database. To do this run the ASP.NET SQL Server Setup wizard tool:
    C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_regsql.exe
  2. In the wizard select Configure SQL Server for application services, select authentication method (you can leave Windows authentication if your windows account has the rights to create databases), enter a database name (e.g. PWS_AspNetDb) and click Finish. If you want to create databse in different than the default location, than you need to open SQL Server Management Studio and create the database before running the wizard.
  3. Now we configured ASP.NET database and we will create the application database to store Photos and Albums. To do this open SQL Server Management Studio connect to the SQL Server instance and create a new databse (e.g. PWS_Personal) open a new query window, copy SQL commands from the personal-add.sql file in the App_Data directory and execute them to create database tables.
  4. Open web.config file and modify the connectionStrings section to include the following (note: this sample uses Windows authentication, to use different authentication method you will need to modify the connection strings):
    <connectionStrings>
      <add name="Personal" providerName="System.Data.SqlClient" connectionString=
           "Data Source=.;Integrated Security=True;Database=PWS_WebPersonal" />
      <remove name="LocalSqlServer"/>
      <add name="LocalSqlServer" connectionString=
           "Data Source=.;Integrated Security=True;Database=PWS_AspNetDb" />
    </connectionStrings>   
  5. You are now ready to start using the application, to open the home page press Ctrl+F5! 

Creating a New F# Page

F# distribution currently doesn't supply F# page template, so if you want to create a new page you'll have to workaround this limitation. The easiest way to do so is to create a new text file (right click on the project, select Add New Item, select Text File). Once you created two empty files (NewPage.aspx and NewPage.aspx.fs), you can copy the following code and start programming ASP.NET applications in F#!

NewPage.aspx

<%@ Page Language="F#" AutoEventWireup="true"  CodeFile="NewPage.aspx.fs" Inherits="FSharpWeb.NewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>New Page</title>
</head><body>
<form runat="server"><div> <h1>New Page</h1> <!-- ASP.NET button with event handler declared in code-behind file --> <asp:Button id="btnClickMe" runat="server" click="ButtonClicked" Text="Click me!" /> </div></form> </body></html>

NewPage.aspx.fs

#light
namespace FSharpWeb

open System
open System.Web
open System.Web.UI
open System.Web.UI.WebControls

type NewPage = 
  inherit System.Web.UI.Page as base
  val mutable btnClickMe : Button

  // initialize all controls to a null value
  new() = 
    let init() = (Array.zero_create 1).[0]
    { btnClickMe = init(); } 
  override this.OnLoad(e) =
    base.OnLoad(e);
  // Event handler for the button
  member this.ButtonClicked(sender, e) =
    this.btnClickMe.Text <- "Clicked!"

NOTE: Since F# doesn't currently support partial classes, you have to declare all controls manually in the code-behind file. This means that every control with runat attribute set to server and with id attribute must have corresponding field in the F# code-behind file. In this example the only control used is a btnClickMe.

Creating an Administrative User

The first step you must take is to create an administrative user. The administrative user has permission to upload photos and create albums.

To create an administrative user

  1. Run the site at least once before proceeding. This ensures the initialization of the Membership and Roles databases.
  2. In the Website menu, click ASP.NET Configuration.
  3. Click the Security tab.
  4. Click Create user.
  5. In the Create User box, type a user name, password, and e-mail address for the administrator user. You must also provide a security question and answer that is used to help you recover your password, if necessary.
  6. In the Roles box, select both the Administrators and Friends check boxes to make the user into an administrator and a member of the Friends role.
  7. Click Create User.
  8. Close the Web Site Administration Tool window.

Managing the Personal Web Site

The following sections provide basic information about how to administer the site.

Designating Guest Users as Friends

Visitors to your site can register themselves on your site. You can make registered users into Friends, which gives them permission to view private photo albums.

To give users permission to view private photo albums

  1. In the Website menu, click ASP.NET Configuration.
  2. Click the Security tab.
  3. Under Users, click Manage users.
  4. In the user list, click Edit roles for the guest. (If you do not see the user's name, use the search box.)
  5. Under Roles, select Friends.
  6. Close the Web Administration Tool window.

Working with Photo Albums

The photo album feature allows you to:

To create an album and add photos

  1. Login to the site as an administrator.
  2. In the menu, click Manage.
  3. Under Add New Album, type a name.
  4. If you want everyone to be able to see your photos, select Make this album public. If you leave this check box unselected, only users who are registered as friends can view the album.
  5. Click Add to create the album. 
  6. Under Your Albums, click the blank photo for the new album.
  7. Under Add Photos, type or select the photo file name, type a caption, and click Insert.
  8. Repeat Step 4 for each photo you want to add to the album.

To bulk upload photos into an album

  1. Copy your photos to the Upload folder in the Web site.
  2. In the menu, click Manage.
  3. In the album list, click the photo of the album to use. (Create a new album first, if necessary.)
  4. Click Import. All the photos in the Upload folder are added to the album.

Publishing your Site

When you are ready to share your Web site with others, you can copy it to your Web server. You need to know the File Transfer Protocol (FTP) address of your server, and if required, the user name and password you use.

  1. In the Website menu, click Copy Web Site. The Copy Web Site tool displays the files from your Web site under Source Web Site.
  2. In the Connect to box, click Connect to ....
  3. In the Open Web Site dialog box, click the FTP Sites tab.
  4. Type the FTP address of your server, and if required, the user name and password that your hosting site has provided. The FTP URL usually has a format like this:
    ftp://ftp.servername/foldername
  5. Click Open. The files on the Web server are displayed under Remote Web Site.
    Note: If you have trouble connecting to the server, contact the server administrator.
  6. In the Move Files list, click All source files to remote Web site.
  7. Click the Copy Web Site button. The files from your Personal Web Site are copied to the server.