Lab 1 – CS 3340, Spring 2016

Lab Objectives:

1. Begin to learn to use Visual Studio 2015 (VS).2. Create a website, a webpage and display.3. Utilize a VS Solution.4. Upload website to a server named Lucius.5. Open, edit, and view website on Lucius.

This lab is composed of 8 Stages and each stage consists of a number of steps you will complete. The Stages are:

1. Create a Local Website – Our unit of work in this class is a website which consists of one or more webpages. We will build a website for each lab and homework. In this stage you will build a website on your local computer.

2. Add a Web Page – You will add a HelloWorld webpage and display it on localhost (your local computer).

3. Use a Solution – When you create a website, VS wraps it in a Solution which holds all the files and metadata for the website. Here, you will learn how to save the Solution and use it to reopen your website.

4. Making a Remote Connection to Lucius – You will make a connection from your local computer to your account on the webserver, Lucius.

5. Upload Work to Lucius – You will upload your website to Lucius.6. Display Your Page Live – You will view your page in three different ways: live over the internet,

live on Lucius, and on localhost on Lucius.7. Open Website on Lucius – Your standard workflow for this class is: build and test a website

locally, upload your website to Lucius, test, and if necessary, open your website on Lucius to make (hopefully) minor modifications.

8. Close Connection to Lucius – You will close your connection to Lucius.

Follow the steps below to complete this lab.

1

Stage 1 – Create a Local Website

1. Create you work folder – Create a folder on a disk (or thumb drive) where you will store your work for this course, e.g. something like CS3340.

2. Start VS 2013

a. Double-click the VS 2013 icon on your desktop to launch it. If you don’t see it then use: Start, All Programs.

b. The first time you start VS (maybe every time in the lab) you will get a dialog as shown below on the left. Choose, “Not now, maybe later.”

c. Next, as shown in the figure above on the right, select, “Visual C#” and then “Start Visual Studio”.

2

3. Create Your Website

a. Choose: File, New Web Site…

b. Choose or specify the items shown below.

3

c. The Solution Explorer (SE) should be open in the right (otherwise: View, Solution Explorer). You will see a node representing your website (CS3340) and one file there, Web.config.

4

Stage 2 – Add a Web Page

4. Add a Web Page

a. Right-click your website in Solution Explorer (SE). Choose: Add, Add New Itemb. Do these things:

Add New Item Dialog 1. Choose from left panel: Installed, Visual C#2. Choose from the center panel: HTML Page3. Supply the “Name”: default4. Choose: Add

5

c. The new file (default.html) is displayed in the SE, and the page is displayed in what we call Source view. Later, we will see how to open the page in a WYSIWYG editor.

5. Add some Content – Add a title and a “hello world” paragraph as shown below.

6

6. Display your Web Page – Right-click in the page and choose: View in Browser. The page should display in a browser.

7. Close VS – Close VS. You may receive a prompt to save a Solution file. If so, ignore it. We will consider this later in the lab.

7

Stage 3 – Use a Solution

8. (Read: not action required) In step 3a above we created a Website whose name is cs3340. We see a node labeled cs3340 representing this website in 3c above. Above the website node, we see a Solution node. When we use VS to create a website, it automatically creates a Solution to contain the website which contains meta-data about your website. Look back at 3c above and notice that the solution’s name is “cs3340” (or something similar). You can choose to save this solution file in a file named (in this case) cs3340.sln. The solution file is a convenient way to reopen your website by simply double-clicking it in Windows Explorer. This is what we will demonstrate next.

9. Do the following:

a. Select the Solution node in the Solution Explorer as shown in the figure below.

b. Navigate to your work folder, cs3340 and Save.c. Close VSd. Use Windows Explorer to navigate to your work folder, cs3340. Find the Solution file, cs3340.sln

and double-click. VS should open with your website displayed in the SE.

10. (Read: not action required) An alternate way to open your website is to ignore the Solution and simply open VS and choose: File, Open Web Site and then navigating to your work folder.

8

Stage 4 – Making a Remote Connection to Lucius

11. (Read, no action required) Next, you will post your page to Lucius. When this is complete your page will be “live” on the internet at the address:

http://lucius.valdosta.edu/yourID/default.html

Lucius is a virtual server installed on VSU’s network and configured as a .NET webserver. “Posting” your page means uploading your file(s) to a location in the file system on Lucius. Access to the file system on Lucius is available from any campus machine (but NOT off campus). The following steps show how to upload your work to Lucius from a campus machine.

12. (Read, no action required) Each person in the class has an account on Lucius that uses your Active Directory credentials. Each person also has a location on the hard drive to upload their work. We will call this your root folder. The file system path on Lucius is:

C:\Students\yourID

For example, shown on the right is the folder for “_dgibsons” (this is just a test account I created. Also, your folder will not have the subfolder named TestWebApp as shown in the figure).

13. Start Remote Desktop Connection – This step can only be completed from a campus computer. It cannot be done off campus.:

a. Choose Start, and type in “Remote Desktop Connection”. When it is found, launch the program. Do not type anything. Expand the Options.

9

b. Type in the values: “lucius.valdosta.edu” and your Active Directory id, as shown below. Then, choose the Local Resources tab.

10

c. Choose the More… button.

d. Make sure the Drives is checked. This option makes the local hard drive(s) (where you have stored your work so far) available on Lucius. If you want, expand Drives and make sure the drive where your work is stored is checked. Choose OK when complete.

11

e. Choose Connect. A confirmation dialog will appear as shown below. Choose Connect again.

f. Enter your Active Directory password and choose OK.

12

Stage 5 – Upload Work to Lucius

14. Examine the File System on Lucius

a. Start Windows Explorer on Lucius (if needed use the Start menu to find it). b. Find the Computer node in the left panel. You should see something like what is shown below.

However, the drives that are bracketed in the figure will be different. They will correspond to the drives on the computer you are working on.

15. Copy Files From Local Machine

a. Navigate to the folder where your work is stored on the local machine (not Lucius). In the case shown below: E:\Data-Classes\CS 3340 – Web Programming\CS3340.

b. Select the three files: default.html, Web.config, and Web.Debug.config (don’t select the two Solution files).

c. Copy them (Ctrl+c)

13

16. Paste Files to Lucius

a. Navigate to your folder on Lucius: C:\Students\yourIDb. Paste the three files into this location (Ctrl+v) (Ignore the TestWebApp folder shown in the figure

below).

14

Stage 6 – Display Your Page Live

17. (Read, no action required) We can display our pages in three ways:

a. Localhost – On localhost. We do this when we right-click a page in VS and choose, View in Browser.

b. Live on Lucius – Open a browser on Lucius and type in the URL of your page. If there are errors, a description will be shown here.

c. Live – Open a browser on any computer other than Lucius. If there are errors, no description will be shown.

Your goal is to have your page work properly Live which of course means I can view your page from my office (or anywhere). When you first upload your work, you should try to view your page Live. If this fails, no error messages will be given except that it can’t display the page. If this happens, you should next try to view your page Live on Lucius. There, you will see more detailed messages about the source of the error. Finally, if you get errors here, you should next try to view your page on Localhost. If your page has errors, you should back up and open your page in the order shown above, stopping the first time you have an error and debugging from there. We don’t expect any errors with this simple page.

18. Live on Lucius – Open a browser on Lucius. Supply the URL to your page:

https://lucius.valdosta.edu/yourID/default.html

The result should look like what is shown below. If you get an error, you need to move on to the first step in the next Tutorial section.

19. Live – Open a browser on the local computer (not Lucius). Supply the same URL. The result should be the same.

15

Stage 7 – Open Website on Lucius

20. (Read, no action required) You can open your website directly on Lucius. This is the most convenient way to work as no upload is required and no tinkering to get it to work. However, you are not allowed to work directly off Lucius when we are in class. The server will not handle so many simultaneous connections very well, and the system will degrade to even slower than a crawl.

For the remainder of the Lab, only 3 people will do this at a time as you will be working directly off Lucius. When you get to this step, please ask my permission to proceed. If you don’t finish in class, then find a time to come back to the lab and work.

21. Do the following:

a. Ask me if it is OK to proceed.b. Launch VS 2013 on Lucius.c. Choose: File, Open Web Site

d. Navigate to your folder: c:\Students\yourID and then choose Open.

16

e. VS should be open and the SE should show your files.

22. Modify Page – Open default.html and add the paragraph indicated below:

23. View Page on Localhost – Right-click your page and choose, Open in Browser.

17

24. View Page Live on Lucius – Open a browser on Lucius. Supply the URL to your page.

25. View Page Live – View your page live. Open a browser on the local computer (not Lucius). Supply the same URL. The result should be the same.

26. (Read, no action required) Most times when you upload your work to Lucius you will want to open your website on Lucius as described above. As the semester goes on, you will complete Labs and Homeworks which will be stored in folders under your website as shown in the figure below. For each Lab and Homework, you will also modify your course home page (see figure below) to include a link to the lab or homework.

18

27. Close VS. You will probably receive a prompt as shown below to save the solution. You can do what you want here. The default location is something like this:

C:\Users\dgibson\Documents\Visual Studio 2013\Projects\localhost_3381\localhost_3381.sln

Of course, you could select the Solution and choose to save the Solution in a more convenient location as we did in step 9 above. The choice is yours: save a solution file or use Open Website.

Stage 8 – Close Connection to Lucius

28. Log off Lucius. Choose: Start, Log off.

Note: When you simply close (X the RDC window) the RDC window, you close your access to the connection, but Lucius still maintains the connection. This requires resources which impedes others’ ability to work efficiently. Thus, be kind and LOG OFF.

This Lab is now complete.

19