Newsletter Sign Up Form to Database Tutorial

Newsletter Sign Up 

Form to Database 

Tutorial 

Introduction 

The goal of this tutorial is to demonstrate how to set up a small Web application that will send  information from a form on your Web site to a back­end database. 

Will this tutorial teach you all there is to know about database­driven Web sites?  No. The intent is not to drill into technical details but rather to demonstrate how to get a small  application up and running as quickly as possible and without the need for you to know  programming or platform language details. 

So what will this tutorial teach you? 

This tutorial will focus on the following customer objective: 

I would like to create a location online to store the e­mail addresses that visitors submit to me via  an online form located on my Web site. 

Currently, I receive a copy of these submissions one by one and have to copy and paste them  into MS Excel so they can be uploaded to my e­mail marketing software.  I would like to eliminate  this tedious work if possible. 

In this tutorial, you will complete the following steps:

· Verify that your hosting account supports the database platform. · Create a back­end database.

· Add a table to your database. This is where the submitted information will be stored. · Add a field to the table. Similar to a table column in a spreadsheet, the field you create is 

where the e­mail addresses will be stored.

· Connect a NetObjects Fusion site to the back­end database you created.

· Use an existing connector on the site to specify the settings and the name of the back­  end database you created so that your database will “match up” with your site.

· Use the Insert Component to specify the field in your back­end database where you want  the information submitted on your Web site to be stored.

· Verify that the settings on the Form field of the Home page match the field name in the  database.

Preparation 

Now that we know the objective, we will need to make sure we have all the necessary tools to  accomplish this task: 

You will need the following:

· NetObjects Fusion 8.0 with Templates Volume 2.0 · Web Hosting account with access to a MySQL database 

If you haven’t done so already, the first step is to install the new Templates Volume 2.0.  To avoid starting from the very beginning, we will be using the Newsletter signup feature that  comes with the Electronics ­ Superstore template. After you have installed the templates, don’t  worry about launching NetObjects Fusion 8.0. You will not need it for a few minutes, and it will  only be a distraction.  Next, you will need to make sure your hosting account supports the necessary database  functionality:  1.  Make sure the supported database platform is MySQL. This information should be in your  hosting account help and documentation.  2.  Sign in to your database administration area. You must have the ability to create a Table  or have one set up for you, along with the ability to add Rows/Columns within the  database.  Create the database at this time and write down the name of the database  below replacing the ‘?’ with the database name you create.  Database Name = ?  User = (If different from your hosting account. This information should be listed in your  hosting administration area.)  Password = (If different from your hosting account. This information should be listed in  your hosting administration area.)  3.  After you have created the database, you will need to create a Table within the database.  Consult your hosting account help or documentation if you are not sure how to create a  table. 

Table Name = customer_nletter 

(You can essentially use any name you like. For now, it is suggested that you keep the names  provided until you are familiar with the set­up process.)  4.  Once you have created the Table, you now need to create the field or column where the  addresses will be held.  If we were to look at this from a MS Excel point of view, the set up would be  similar to:  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 

MS Excel = Database (In our case, this is MySQL.)  Spreadsheet Name = Table 

Column = Field  Row = Data 

Column (field) Name = email  Type = VARCHAR 

(This refers to the type of data that will be stored in the column (field).  I have set mine to  VARCHAR. For now, use this type.) 

5.  After you have completed steps 1­4 above, you are ready to move on to the next steps  within NetObjects Fusion 8.0. 

So what exactly have you accomplished here? 

At this stage of the tutorial, you should know if your hosting account supports the MySQL  database platform. You should also know how to add tables, columns, etc., to your database via  the database administration area. 

Setting Up 

Now that the platform is prepared, you are ready to do the design work that will connect the Web  site form to the database you created. 

This section of the tutorial will cover: 

1.  Connecting the Web Page with the Back­End Database  2.  Sending Data 

Connecting the Web Page with the Back­End Database 

Make sure you have the information from the preparation section of this tutorial (database name,  table name, etc.). You will need this information to incorporate it into your Web site to create the  connection between your Web pages and your database. 

1.  Launch NetObjects Fusion 8.0 and open the Electronics ­ Superstore template. Open the  template by selecting New Site > From Template from the File menu. 

2.  Open the ‘submissions’ page in Page view.  You will be prompted with the following dialog box: 

3.  Click OK.We will make minor modifications to an already existing connector. 

4.  On the page, locate and double­click the Connector icon  . 

5.  The Connector – newsletter dialog box will open. The name ‘newsletter’ is created  when the connector is first added to the page. For this tutorial, we will leave the  connector named ‘newsletter.’

There is no need to modify the Type, Host, or Engine information, but you should make  sure it matches the illustration above. 

6.  In the remaining fields, insert the information you wrote down above for the Database,  User, and Password. 

If you click on theTest Connection button you will receive a Connection Failed error.  Please disregard this error message.  When you publish later in this tutorial you will not  receive this error. 

7.  Click the Database tab. 

8.  Click on the Add Table button and insert the table name you wrote down above. 

9.  With the new table you added highlighted, click on the Add Column button and insert the  column name from above 

10.  When complete, the Database section should look like the illustration below: 

11.  Click OK. 

There is no need to go into the Recordsets tab at this time. This will be explained in  another tutorial and has no effect or functionality related to submitting information from  the form to the database. 

12.  In Page view, click on the Insert icon below the Connector icon  .  13.  In the Insert Properties properties palette, click SQL Wizard.

14.  Review the information and make sure Table: contains the table name from above and  Fields: contains the column (field) name from above. 

15.  Click OK. 

Congratulations! With a small modification to the form, you will be ready to start seeing  results.

Sending Data 

Now that we have completed the preparation and set up of the database, we are ready to make  sure the form is set up correctly. 

1.  In Page view, click on the Home page. 

2.  Scroll down until you see the Newsletter Sign Up Layout Region. 

3.  Select the Layout Region. In the properties dialog box, click the Settings button. 

4.  Make sure the Settings | Action location is correct. This is where the results of the form  will be sent. 

Notice the results go to the page where we just completed setting up the database  connection. Remember to change the Action text box to reflect the path to the  ‘submissions’ page as it reflects to your Web site. For example: 

If the URL to my store were http://www.mydomain.com/store/index.html, then the Action  text box would be as it is displayed above. For every other directory added within the  /store directory, I would have to add the name of this directory before the 

html/submissions.php.  If you receive a Page Not Found error, which is common when  testing, look at the URL to make sure the path to the submissions page is correct.  This is necessary so that the .php scripts can pick up the information from the form on  your Home page and process it into the database. 

5.  Click OK. 

6.  Now, we have to make sure the field responsible for sending over data from the form  matches the field we set up in our database. Select the text field just above the Submit

button so that the form properties dialog box appears. 

7.  Verify the field properties in the properties palette has the value email as the Name: 

8.  Congratulations! You are now ready to publish to the Internet and test the results. 

So what exactly have you accomplished here? 

You have accomplished setting up a form that will be used to submit data from the form on a Web  site to a back­end MySQL database. 

Let’s run through it again just to clarify the high points.  Connecting Reviewed 

After we set up the database on our hosting platform, we were then ready to get to the fun part of  making it useful. The first thing we had to do was make sure that the Web page that will be used  to submit information to the database had the information necessary to connect to the back­end  database on the hosting platform. We did this by adding a Connector  component. Every time  you wish to interact with a back­end database from a Web page, the Web page must contain the  Connector component. 

The information you provide in the Connector dialog box is the roadmap to your database and  how it is set up. 

Sending Data Reviewed 

After we set up the database on the back end and replicated the data in our Connector 

component, we were now ready to do something with the data we planned to send over. Since  our task was to store the data in a database, we needed a way to insert the information into the  database when someone submitted the form. Enter the Insert  component. This component  tells the back­end scripts to “Insert the information in this Field, which is located in thisTable.” 

Conclusion 

So what can you use this information for? 

Just about anything that requires data being submitted from a form to a database. You can create  membership sign­up forms, newsletter sign­ups, subscriber sign­up forms, and more. You will  notice this tutorial only contains submitting information to a database. Displaying data or other  data­handling functionality is beyond the scope of this tutorial.