Newsletter Sign Up Form to Database Tutorial

Transcription

1 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 backend 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.

2 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

3 Column (field) Name = 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. You will have essentially prepared the platform to start accepting data from your Web site.

4 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.

5 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 the Test 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.

6 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.

7 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 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

8 button so that the form properties dialog box appears. 7. Verify the field properties in the properties palette has the value 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 this Table. 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.