22.05.2017 Views

BIS 450 DeVry Week 7 I Lab 8

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 7 I <strong>Lab</strong> 8<br />

Downloading is very simple, you can download this Course here:<br />

https://www.mindsblow.com/product/bis-<strong>450</strong>-devry-week-7-ilab-8/<br />

Or<br />

Contact us at:<br />

SUPPORT@MINDSBLOW.COM<br />

<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 7 i<strong>Lab</strong> 8<br />

<strong>BIS</strong><strong>450</strong><br />

<strong>BIS</strong> <strong>450</strong> <strong>DeVry</strong> <strong>Week</strong> 7 i<strong>Lab</strong> 8<br />

i<strong>Lab</strong> 8 of 8: Newsletter Sign-Up with Confirmation E-Mail<br />

Submit your assignment to the Dropbox located on the silver tab at the top of this page.<br />

See Syllabus, Due Dates for Assignments & Exams, for due dates.<br />

i L A B O V E R V I E W<br />

Scenario/Summary<br />

Dr. Dinewell has decided to publish an e-mail newsletter to keep in touch with visitors to her site. You have been asked<br />

to add a form to the Healthy Eating website that will allow visitors to sign up to receive this newsletter. A visitor who<br />

wishes to receive the newsletter will enter his or her e-mail address on the sign-up form. The e-mail address will be<br />

stored in a database table. In addition, an automatic confirmation e-mail will be sent to the user immediately.<br />

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

mail address in the database and to send the confirmation e-mail.<br />

Deliverables<br />

1. Signup.aspx web form created on the Healthy Eating website, with associated code-behind file.<br />

2. Word document submitted to Dropbox with screenshot of sign-up form in browser.<br />

Grading Rubric<br />

Criteria Points %<br />

Step 3: Create Newsletter Signup Form (Signup.aspx).<br />

• Signup.aspx form created on the Web server<br />

• Has standard page header, navigation menu, and page footer<br />

• Bold heading “Sign Up for Free Nutrition Newsletter”<br />

• Prompt, textbox, and button for entry of e-mail address<br />

• Literal for display of thank you message to user<br />

• AccessDataSource connected to Subscribers table of database/HealthyEating.mdb file, with InsertQuery<br />

• “For Test Only” textboxes for sender e-mail address, SMTP server address, port, account name, and password; and<br />

checkbox for Use SSL/TLS<br />

• 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).<br />

• Code placed in click event handler of btnSignup button<br />

• Calls Insert() method of AccessDataSource to save e-mail address to Subscribers table<br />

• Sets up MailMessage object<br />

• Sets up SmtpClient object<br />

• Calls Send() method of SMTPClient to send MailMessage (NOTE: This may be commented out in the code with no<br />

deduction)!<br />

• Displays thank you to user in literal on Web form 10 40%<br />

Step 6: Test, Capture Screenshots, and Submit (Student Name <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>8 Screenshot.docx)<br />

• Word file submitted to Dropbox with screenshot of Newsletter Sign-up Form 5 20%<br />

Total 25 100%<br />

i L A B S T E P S<br />

Preparation<br />

1. Download the <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>8 Code Snippets.txt file from Doc Sharing and save it in your working folder for this lab.<br />

2. Using the Citrix remote lab:<br />

a. Follow the log-in instructions located in the i<strong>Lab</strong> tab in Course Home.<br />

b. Upload the file that you downloaded from Doc Sharing into your <strong>BIS</strong><strong>450</strong><strong>Lab</strong>s folder on your Citrix drive. (You created<br />

this folder in <strong>Week</strong> 1).<br />

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

Transfer Protocol (SMTP). Google Gmail is one such provider; you can obtain a free Gmail account at http://gmail.com.<br />

Other providers can be found by doing a Web search for “free e-mail smtp access.” You may use your personal e-mail<br />

account for this lab if you wish, provided it allows SMTP access; but to protect the security of your personal e-mail, it is<br />

recommended that you obtain a new account with Gmail or another free provider just for use in this lab. An account<br />

from a Web-based e-mail provider such as Gmail is recommended, rather than one provided by your own Internet<br />

Service Provider (ISP). ISP-provided e-mail accounts are sometimes restricted in ways that may interfere with their use<br />

in this lab.<br />

For security reasons, the <strong>DeVry</strong> University Web server does not support sending e-mail directly from the server, which<br />

is why you will need an account with Gmail or a similar provider. You can complete the lab without such an account,<br />

with no loss of points, if you choose. However, with an SMTP-capable e-mail account, you will be able to test your code<br />

to see that it works and actually sends an e-mail, which is much more satisfying! If you have any questions or concerns<br />

about this issue, please discuss them with your professor.<br />

STEP 1: Open Website on the <strong>DeVry</strong> Web Server<br />

1. Launch Microsoft Visual Studio 2010.<br />

You must use Visual Studio 2010 in the Citrix environment.<br />

2. Pull down the File menu and select Open Website. In the Open Website dialog, select FTP Site in the left column.<br />

The connection information that you used in the previous lab should be displayed:<br />

• Server: bisweb.devry.edu<br />

• Port: 21<br />

• Directory: coursefolder/yourname, where coursefolder = folder on the Web server for your course (provided by your<br />

professor), and yourname = your first initial and last name, (e.g. jsmith for student John Smith).<br />

• Passive Mode and Anonymous Login: Both unchecked.<br />

• Username: acadDnnnnnnnn, where Dnnnnnnnn = your DSI number.


• Password: Enter the same password as the one that you use for Citrix i<strong>Lab</strong> (must be re-entered each time).<br />

Click Open.<br />

STEP 2: Gather Outbound E-mail Server Information.<br />

1. As explained in the “Preparation” section above, to fully test your work in this i<strong>Lab</strong>, you will need an e-mail account<br />

that allows SMTP access. A new account from a free web-based e-mail provider such as Gmail, separate from your<br />

existing personal e-mail account, is recommended.<br />

2. By reviewing the documentation supplied by your e-mail provider, gather the following information about outbound<br />

SMTP access for your account:<br />

• What is your e-mail address?<br />

• What is the SMTP Server address?<br />

• What is the port number?<br />

• What is your account name? (may be the same as your e-mail address)<br />

• What is the password?<br />

• Is a secure connection (SSL or TLS) required?<br />

TIP: For Gmail, you can obtain this information from<br />

http://mail.google.com/support/bin/answer.py?hl=en&answer=13287. Look in the section for “Outgoing Mail (SMTP)<br />

Server.” For other e-mail providers, look for instructions on configuring e-mail clients like Microsoft Outlook, and/or<br />

information on using POP, IMAP, or SMTP. In these instructions, you are only interested in the settings for outgoing<br />

mail via SMTP; you do not need to be concerned about settings that relate to incoming mail via POP or IMAP (although<br />

these are often discussed together in the documentation).<br />

TIP: Some e-mail providers may list more than one port number for SMTP. You may have to try each listed port, in<br />

turn, to find out which one will work for you, so make note of them all.<br />

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

with no deduction.<br />

STEP 3: Create a Newsletter Signup Form.<br />

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

of the subfolders.<br />

2. Set the Title property of the Document to Newsletter Signup.<br />

3. Attach StyleSheet.css to the Web form.<br />

4. As you did when setting up the Web forms in previous labs, open Default.htm and copy the contents of its element<br />

(in HTML, everything in between the and tags, but not the and tags themselves). Paste these contents inside the div in<br />

Signup.aspx (in HTML, in between the<br />

and<br />

tags). Delete the contents of the #main div after pasting.<br />

5. Inside div#main, type Sign Up for Free Nutrition Newsletter! as a heading for the form, followed by a blank line. Bold<br />

this heading.<br />

6. Type the prompt Enter your e-mail address:. To the right of this prompt, place a TextBox from the Standard section<br />

of the Toolbox. To the right of the TextBox (on the same line), place a Button. On the line below, place a Literal control.<br />

Set the properties of each control as indicated below:<br />

Control (ID) Text<br />

TextBox txtEmail<br />

Button btnSignup Sign Up for Newsletter<br />

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

the Toolbox onto the web form. Click on the Configure Data Source task in the control’s smart tag and configure the<br />

data source as we did in i<strong>Lab</strong>s 4 and 5, using the following settings:<br />

• Microsoft Access data file: database/HealthyEating.mdb<br />

• Specify columns from a table or view (Name: Subscribers)<br />

• Columns: Check SubscriberID and Email<br />

• No WHERE clause is needed<br />

• Click the Advanced button and check the box to generate INSERT, UPDATE, and DELETE statements.<br />

• There is no data in the table, so you will not retrieve any records if you test your query.<br />

8. You will need to edit the automatically generated SQL INSERT statement. With the AccessDataControl still selected,<br />

click the InsertQuery property, then click the […] button. Edit the INSERT command so that it reads as follows:<br />

INSERT INTO [Subscribers] ([Email]) VALUES (?)<br />

Then, in the Parameters box, select the SubscriberID parameter and click the red X button to delete it. The final<br />

definition of the INSERT command should look like this:<br />

Click OK.<br />

(These changes are necessary because in the database table, SubscriberID is an AutoNumber field whose value is<br />

supplied by the database, not by the INSERT command).<br />

9. On the line below the AccessDataSource control, type the heading For Test Only:. Then on the following lines, type<br />

these prompts followed by the corresponding controls:<br />

Prompt Control (ID) Text<br />

Sender’s Email Address: TextBox txtSenderEmail<br />

SMTP Server Address: TextBox txtSMTPAddress<br />

Port: TextBox txtPort<br />

Account Name: TextBox txtUsername<br />

Password: TextBox txtPassword<br />

Checkbox chkSSL Use SSL/TLS<br />

Also, set the TextMode property of the txtPassword TextBox to Password. This will cause your password to be masked<br />

when you enter it.<br />

TIP: You will use these controls to enter the information for your SMTP-capable e-mail account when you test your<br />

code. Of course, if this were a real project, in the final version, these values would not be entered on the form by a<br />

user. Most likely, they would be saved in the Web.config file (as you did the administrator log-in information in an earlier<br />

lab). It is often convenient to put in temporary features like these ones for use during development and testing. Just be<br />

sure, on a real project, to remove them before going live with the site!<br />

10. Also, for test purposes only, drag a GridView control from the Data section of the Toolbox and drop it on the form<br />

just below the controls that you added in the previous action. Set the GridView’s data source to AccessDataSource1.<br />

This will allow you to see the contents of the newsletter subscriber list in the database, so you can confirm that your<br />

code to add an e-mail address to the database is working.<br />

Your completed form should look like this in Design View:<br />

11. Save your work on the Signup.aspx form.<br />

STEP 4: Add Code to Save E-mail Addresses and Send Confirmation.<br />

1. Double-click the btnSignup button to create a skeleton click event handler procedure in the code-behind file.


2. Open the <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>8 Code Snippets.txt file that you downloaded from Doc Sharing, and select and copy the first<br />

line, “Imports System.Net.Mail”. Paste this command into the very first line of the code-behind file, above “Partial Class<br />

Signup”.<br />

3. Return to the <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>8 Code Snippets.txt file, select and copy the section of code beginning with the comment,<br />

“Save e-mail address to database”, and paste it into in between the Protected Sub btnSignup_Click(. . . ) and End Sub<br />

statements in the code-behind file. After pasting in this code, the code-behind file should look like this:<br />

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

to test your code, “comment out” the line<br />

smtp.Send(msg)<br />

by placing a single quotation mark (‘) at the beginning of the line, like this:<br />

‘smtp.Send(msg)<br />

This will allow the rest of your code to work, including saving the e-mail address in the database and displaying a thankyou<br />

message to the user, without actually trying to send an e-mail.<br />

5. Save your work on the Signup.aspx and Signup.aspx.vb files.<br />

STEP 5: Test, Capture Screenshot, and Submit.<br />

1. To test the Newsletter Signup form, in the Solution Explorer window, right-click on Signup.aspx and select View in<br />

Browser. The form should look like this:<br />

2. If you have an e-mail account that provides SMTP access, enter your own e-mail address into the “Enter your e-mail<br />

address:” TextBox; then enter the SMTP information for your e-mail account that you gathered in Step 2 into the fields<br />

under “For Test Only:”. Click the Sign Up for Newsletter button. The e-mail address that you entered should appear in<br />

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

the e-mail to appear in your inbox, even if everything worked correctly).<br />

Your ability to actually send an e-mail depends on many factors, some of which are beyond your control, such as your<br />

ISP’s network configuration and restrictions imposed by your e-mail provider. This is the reality of the modern Internet,<br />

which is a complex system with many interdependent parts. On a real project, you might have to work across<br />

organizational boundaries with several different specialists, including network engineers and system administrators, to<br />

get this and other advanced Web features to work. If you are consistently getting errors thrown by the line<br />

smtp.Send(msg) in your code, and you are reasonably sure that you are entering your e-mail account information<br />

correctly, then just comment out this line by placing a single quote (‘) in front of it, and move on. The rest of your code<br />

will still work, and you will still get a thank-you message displayed and the e-mail address will still be added to the<br />

database—but no e-mail will be sent.<br />

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

commented out the smtp.Send(msg) line. If not, please do so now. Then, enter the following “dummy” information in<br />

the form:<br />

• Enter your e-mail address: test@test.xyz<br />

• Sender’s e-mail address: test@test.xyz<br />

• SMTP server address: smtp.test.xyz<br />

• Port: 25<br />

• Account name: test<br />

• Password: test<br />

• Use SSL/TLS: leave unchecked<br />

• Click the Sign Up for Newsletter button.<br />

3. Capture a screenshot of the Newsletter Signup form showing the thank-you message and the e-mail address that<br />

you entered displayed in the test GridView, and paste it into a Word document.<br />

4. Save the Word document containing your two screenshots as Your Name <strong>BIS</strong><strong>450</strong> <strong>Lab</strong>8 Screenshot.docx. (Make<br />

sure that the browser URL is visible in both screenshots). Submit this file to the <strong>Week</strong> 7 i<strong>Lab</strong> Dropbox

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!