iLab 8 of 8: Newsletter Sign-Up with Confirmation E-Mail
Submit your assignment to the Dropbox located on the silver tab at the top of this page.
See Syllabus, Due Dates for Assignments & Exams, for due dates.

i L A B O V E R V I E W
Scenario/Summary
Dr. Dinewell has decided to publish an e-mail newsletter to keep in touch with visitors to her site. You have been asked to add a form to the Healthy Eating website that will allow visitors to sign up to receive this newsletter. A visitor who wishes to receive the newsletter will enter his or her e-mail address on the sign-up form. The e-mail address will be stored in a database table. In addition, an automatic confirmation e-mail will be sent to the user immediately.
You will create a newsletter sign-up form on the Healthy Eating site, and add code to this form to save the user’s e-mail address in the database and to send the confirmation e-mail.
Deliverables
1. Signup.aspx web form created on the Healthy Eating website, with associated code-behind file.
2. Word document submitted to Dropbox with screenshot of sign-up form in browser.
Grading Rubric

Criteria Points %
Step 3: Create Newsletter Signup Form (Signup.aspx).
• Signup.aspx form created on the Web server
• Has standard page header, navigation menu, and page footer
• Bold heading “Sign Up for Free Nutrition Newsletter”
• Prompt, textbox, and button for entry of e-mail address
• Literal for display of thank you message to user
• AccessDataSource connected to Subscribers table of database/HealthyEating.mdb file, with InsertQuery
• “For Test Only” textboxes for sender e-mail address, SMTP server address, port, account name, and password; and checkbox for Use SSL/TLS
• GridView control bound to AccessDataSource to display records from Subscribers table 10 40%
Step 4: Add Code to Save E-mail Addresses and Send Confirmation (Signup.aspx.vb).
• Code placed in click event handler of btnSignup button
• Calls Insert() method of AccessDataSource to save e-mail address to Subscribers table
• Sets up MailMessage object
• Sets up SmtpClient object
• Calls Send() method of SMTPClient to send MailMessage (NOTE: This may be commented out in the code with no deduction)!
• Displays thank you to user in literal on Web form 10 40%
Step 6: Test, Capture Screenshots, and Submit (Student Name BIS450 Lab8 Screenshot.docx)
• Word file submitted to Dropbox with screenshot of Newsletter Sign-up Form 5 20%
Total 25 100%

i L A B S T E P S
Preparation

1. Download the BIS450 Lab8 Code Snippets.txt file from Doc Sharing and save it in your working folder for this lab.
2. Using the Citrix remote lab:
a. Follow the log-in instructions located in the iLab tab in Course Home.
b. Upload the file that you downloaded from Doc Sharing into your BIS450Labs folder on your Citrix drive. (You created this folder in Week 1).
3. If possible, obtain a free e-mail account with an e-mail provider that allows you to send e-mail via the Simple Mail Transfer Protocol (SMTP). Google Gmail is one such provider; you can obtain a free Gmail account at http://gmail.com. Other providers can be found by doing a Web search for “free e-mail smtp access.” You may use your personal e-mail account for this lab if you wish, provided it allows SMTP access; but to protect the security of your personal e-mail, it is recommended that you obtain a new account with Gmail or another free provider just for use in this lab. An account from a Web-based e-mail provider such as Gmail is recommended, rather than one provided by your own Internet Service Provider (ISP). ISP-provided e-mail accounts are sometimes restricted in ways that may interfere with their use in this lab.
For security reasons, the DeVry University Web server does not support sending e-mail directly from the server, which is why you will need an account with Gmail or a similar provider. You can complete the lab without such an account, with no loss of points, if you choose. However, with an SMTP-capable e-mail account, you will be able to test your code to see that it works and actually sends an e-mail, which is much more satisfying! If you have any questions or concerns about this issue, please discuss them with your professor.
STEP 1: Open Website on the DeVry Web Server

1. Launch Microsoft Visual Studio 2010.
You must use Visual Studio 2010 in the Citrix environment.
2. Pull down the File menu and select Open Website. In the Open Website dialog, select FTP Site in the left column. The connection information that you used in the previous lab should be displayed:
• Server: bisweb.devry.edu
• Port: 21
• Directory: coursefolder/yourname, where coursefolder = folder on the Web server for your course (provided by your professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith).
• Passive Mode and Anonymous Login: Both unchecked.
• Username: acad\Dnnnnnnnn, where Dnnnnnnnn = your DSI number.
• Password: Enter the same password as the one that you use for Citrix iLab (must be re-entered each time).
Click Open.
STEP 2: Gather Outbound E-mail Server Information.

1. As explained in the “Preparation” section above, to fully test your work in this iLab, you will need an e-mail account that allows SMTP access. A new account from a free web-based e-mail provider such as Gmail, separate from your existing personal e-mail account, is recommended.
2. By reviewing the documentation supplied by your e-mail provider, gather the following information about outbound SMTP access for your account:
• What is your e-mail address?
• What is the SMTP Server address?
• What is the port number?
• What is your account name? (may be the same as your e-mail address)
• What is the password?
• Is a secure connection (SSL or TLS) required?
TIP: For Gmail, you can obtain this information from http://mail.google.com/support/bin/answer.py?hl=en&answer=13287. Look in the section for “Outgoing Mail (SMTP) Server.” For other e-mail providers, look for instructions on configuring e-mail clients like Microsoft Outlook, and/or information on using POP, IMAP, or SMTP. In these instructions, you are only interested in the settings for outgoing mail via SMTP; you do not need to be concerned about settings that relate to incoming mail via POP or IMAP (although these are often discussed together in the documentation).
TIP: Some e-mail providers may list more than one port number for SMTP. You may have to try each listed port, in turn, to find out which one will work for you, so make note of them all.
If you are unable to obtain an e-mail account with SMTP access, or if you choose not to do so, you may skip this step with no deduction.
STEP 3: Create a Newsletter Signup Form.

1. Add a new web form named Signup.aspx to the site. Make sure that it goes into the root of the site and not into one of the subfolders.
2. Set the Title property of the Document to Newsletter Signup.
3. Attach StyleSheet.css to the Web form.
4. As you did when setting up the Web forms in previous labs, open Default.htm and copy the contents of its element (in HTML, everything in between the and tags, but not the and tags themselves). Paste these contents inside the div in Signup.aspx (in HTML, in between the

tags). Delete the contents of the #main div after pasting.
5. Inside div#main, type Sign Up for Free Nutrition Newsletter! as a heading for the form, followed by a blank line. Bold this heading.
6. Type the prompt Enter your e-mail address:. To the right of this prompt, place a TextBox from the Standard section of the Toolbox. To the right of the TextBox (on the same line), place a Button. On the line below, place a Literal control. Set the properties of each control as indicated below:
Control (ID) Text
TextBox txtEmail
Button btnSignup Sign Up for Newsletter
Literal litMessage
7. Use the Enter key to move to the next line on the form. Drag an AccessDataSource control from the Data section of the Toolbox onto the web form. Click on the Configure Data Source task in the control’s smart tag and configure the data source as we did in iLabs 4 and 5, using the following settings:
• Microsoft Access data file: database/HealthyEating.mdb
• Specify columns from a table or view (Name: Subscribers)
• Columns: Check SubscriberID and Email
• No WHERE clause is needed
• Click the Advanced button and check the box to generate INSERT, UPDATE, and DELETE statements.
• There is no data in the table, so you will not retrieve any records if you test your query.
8. You will need to edit the automatically generated SQL INSERT statement. With the AccessDataControl still selected, click the InsertQuery property, then click the […] button. Edit the INSERT command so that it reads as follows:
INSERT INTO [Subscribers] ([Email]) VALUES (?)
Then, in the Parameters box, select the SubscriberID parameter and click the red X button to delete it. The final definition of the INSERT command should look like this:

Click OK.
(These changes are necessary because in the database table, SubscriberID is an AutoNumber field whose value is supplied by the database, not by the INSERT command).
9. On the line below the AccessDataSource control, type the heading For Test Only:. Then on the following lines, type these prompts followed by the corresponding controls:
Prompt Control (ID) Text
Sender’s Email Address: TextBox txtSenderEmail
SMTP Server Address: TextBox txtSMTPAddress
Port: TextBox txtPort
Account Name: TextBox txtUsername
Password: TextBox txtPassword
Checkbox chkSSL Use SSL/TLS
Also, set the TextMode property of the txtPassword TextBox to Password. This will cause your password to be masked when you enter it.
TIP: You will use these controls to enter the information for your SMTP-capable e-mail account when you test your code. Of course, if this were a real project, in the final version, these values would not be entered on the form by a user. Most likely, they would be saved in the Web.config file (as you did the administrator log-in information in an earlier lab). It is often convenient to put in temporary features like these ones for use during development and testing. Just be sure, on a real project, to remove them before going live with the site!
10. Also, for test purposes only, drag a GridView control from the Data section of the Toolbox and drop it on the form just below the controls that you added in the previous action. Set the GridView’s data source to AccessDataSource1. This will allow you to see the contents of the newsletter subscriber list in the database, so you can confirm that your code to add an e-mail address to the database is working.
Your completed form should look like this in Design View:

11. Save your work on the Signup.aspx form.
STEP 4: Add Code to Save E-mail Addresses and Send Confirmation.

1. Double-click the btnSignup button to create a skeleton click event handler procedure in the code-behind file.
2. Open the BIS450 Lab8 Code Snippets.txt file that you downloaded from Doc Sharing, and select and copy the first line, “Imports System.Net.Mail”. Paste this command into the very first line of the code-behind file, above “Partial Class Signup”.
3. Return to the BIS450 Lab8 Code Snippets.txt file, select and copy the section of code beginning with the comment, “Save e-mail address to database”, and paste it into in between the Protected Sub btnSignup_Click(. . . ) and End Sub statements in the code-behind file. After pasting in this code, the code-behind file should look like this:

4. If you do not have an e-mail account that supports SMTP access, or if you choose not to use your own e-mail account to test your code, “comment out” the line
smtp.Send(msg)
by placing a single quotation mark (‘) at the beginning of the line, like this:
‘smtp.Send(msg)
This will allow the rest of your code to work, including saving the e-mail address in the database and displaying a thank-you message to the user, without actually trying to send an e-mail.
5. Save your work on the Signup.aspx and Signup.aspx.vb files.
STEP 5: Test, Capture Screenshot, and Submit.

1. To test the Newsletter Signup form, in the Solution Explorer window, right-click on Signup.aspx and select View in Browser. The form should look like this:

2. If you have an e-mail account that provides SMTP access, enter your own e-mail address into the “Enter your e-mail address:” TextBox; then enter the SMTP information for your e-mail account that you gathered in Step 2 into the fields under “For Test Only:”. Click the Sign Up for Newsletter button. The e-mail address that you entered should appear in the test GridView at the bottom of the page, and an e-mail should be sent to your account. (It may take some time for the e-mail to appear in your inbox, even if everything worked correctly).
Your ability to actually send an e-mail depends on many factors, some of which are beyond your control, such as your ISP’s network configuration and restrictions imposed by your e-mail provider. This is the reality of the modern Internet, which is a complex system with many interdependent parts. On a real project, you might have to work across organizational boundaries with several different specialists, including network engineers and system administrators, to get this and other advanced Web features to work. If you are consistently getting errors thrown by the line smtp.Send(msg) in your code, and you are reasonably sure that you are entering your e-mail account information correctly, then just comment out this line by placing a single quote (‘) in front of it, and move on. The rest of your code will still work, and you will still get a thank-you message displayed and the e-mail address will still be added to the database—but no e-mail will be sent.
If you do not have an e-mail account with SMTP access, or if you have chosen not to use one, you should have already commented out the smtp.Send(msg) line. If not, please do so now. Then, enter the following “dummy” information in the form:
• Enter your e-mail address: [email protected]
• Sender’s e-mail address: [email protected]
• SMTP server address: smtp.test.xyz
• Port: 25
• Account name: test
• Password: test
• Use SSL/TLS: leave unchecked
• Click the Sign Up for Newsletter button.
3. Capture a screenshot of the Newsletter Signup form showing the thank-you message and the e-mail address that you entered displayed in the test GridView, and paste it into a Word document.
4. Save the Word document containing your two screenshots as Your Name BIS450 Lab8 Screenshot.docx. (Make sure that the browser URL is visible in both screenshots). Submit this file to the Week 7 iLab Dropbox.