e-commerce: introduction to web development 1 dr. lawrence west, management dept., university of...

e-Commerce: Introduction to Web Development

1Dr. Lawrence West, Management Dept., University of Central [email protected]

Topics

• What is a Web Site

• Server Directories

• Web Files

• The HTML File

• Creating a New Web Site with Visual Studio.NET

• Creating and Saving a Web Page

• Organizing a Web Site

• Hyperlinks

• Miscellaneous



What is a Web Site?

• A web site is a collection of files:

– having certain properties

– located is special directories

– available on a web server

• You will develop your web site on a local hard drive running Microsoft’s Internet Information Server

– PWS or IIS and a computer make a server, even if the computer isn’t connected to the Internet

• Later you will move your site to a real server



Browser

Internet

Browser

Browser

Web Server Architecture

WebServers

ApplicationServers

DatabaseServers

InternalUsers



Server Directories

• When you install any web server you designate a physical directory on the server to be the root directory of your web sites

• By default, PWS creates c:\inetpub\wwwroot as the root directory for your web sites

– You may override this location at installation time

– Only recommended if you need to use a different physical drive

• Web ‘sites’ are created directly under this host directory in the physical directory structure

• Web servers operate using similar principles



Server Directories (cont.)

• All web servers have a base URL such as, http://www.mycomputer.com

– http://localhost is also a valid path for IIS on your local computer

• The physical location of your server directories and files work with your URL

• The file c:\inetpub\wwwroot\mysite\default.htm has the URL http://www.mycomputer.com/mysite/default.htmor http://localhost/mysite/default.htm



Server Folders in Visual Studio Development Environment

• The Visual Studio development environment does not require that you host your project in a server directory (including virtual directories)

• Your project may go anywhere in the computer’s file system

• When you deploy the project to a server you will need to deploy to a valid directory

• Be careful of program resources that are outside the project folder (such as images) as they may be disconnected when the project is deployed



Web Files

• Web files are files located in server directories and ‘have certain properties’

– Files with .html or .htm extensions are automatically recognized as web pages to be served up

– Files with .asp or .aspx extensions are recognized as files containing web content and script to be executed

– .jpg and .gif files are recognized as images to be included in .htm or .asp pages (or served up separately)

– Other file extensions may be served up by the site but browser must be configured to handle them



Structure of an HTML/HTM File

<html>

<head><meta http-equiv="Content-Language" content="en-us"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>New Page 1</title></head>

<body>

<p>This is a simple web page with no formatting applied</p>

</body>

</html>

HTML tag begins content used by the browser

Head section contains data about the document (optional)

Body contains content displayed by the browser

All of this content (except text above) was created automatically by the FrontPage editor



Creating a New Web Project w/ VS.Net

• Start Visual Studio

• Select the File | New | Web Site… menu

• Select ASP.NETWeb Site

• Rename defaultapplication name(very tough to dolater!!)

• Click OK



Creating a New Web Project w/ VS.Net (cont.)

• New project is created

• First blank page is displayed(default.aspx)

• Tools may be exposed or docked depending on VSsettings

– Toolbox

– Server Explorer

– Solution Explorer

– Help



Creating a New Web Project w/ VS.Net (cont.)

• Solution Explorer containsinitial project elements

– Solution (name matchesweb name when new solutionwas selected)

– Web site with same name

– Several pages used by the site (more later)

– Initial page (Default.aspx)

• You build your application by adding more elements and giving them properties and capabilities



Creating a Web Page

• Add new web pages (as well as other items—later) by

– Right click the web app

– Select Add New Item…

– Select item (Usually Web Form)

– Name the form in the dialog

– Keep .aspx extension for forms

• New form appears in Solution Explorer



Set Key Page Properties

• bgColor: Background color

• Background: Image

• Text: Color of text on page

• Link & VLink: Colors of unvisitedand visited links on page

• Don’t be goofy with colors

• Set most colors in Master Pages (later)

• Title



Demonstration—Adding Content to Web Pages

• Text

• Controls

• Viewing page in design and HTML views

• Topics for later

– Tables

– Images

– Hyperlinks



Organizing the Web Site

• Use Folders to organize your web site

– Keep similar items together

• Make maintenance easier

• Find folders easier

• Keep folders uncluttered

– Put home page in the web site’s root

• Home page must be called default.htm or default.aspx

• If only a folder is specified by the browser with no file then default.htm, default.html, or default.aspx will be displayed if they exist in that folder



Organizing the Web Site (cont.)

• Add new folders like you would a new page

• Files may be moved between folders by dragging anddropping

– Unlike working in FrontPage, relative hyperlinks are not automatically updated when dragging and dropping between folders

– Hyperlinks created in code are also notupdated automatically

– Plan folder structure early to avoid extensive rewriting



Organizing the Web Site (cont.)

• Files and folders may be moved within the web site by dragging to new locations in the folder view

• Images

– Images used throughout the web (or that could be used in multiple locations) should go in the Images directory

– Images that are distinctly tied only to individual pages should be kept with that page

– You may create images directories within other subfolders (nothing magical about them)

– More on images later



Hyperlinks

• The essence of web-based information is the ability to create hyperlinks from one document to another

• Hyperlinks are created in VS using a dialog

• Before attempting to create a hyperlink to a page in the application, ensure that the target page already exists and is saved

• There are three types of hyperlinks

– Jumps

• Internal – within the same web site

• External – to a document on another site (or server)

– In-line hyperlinks (most often used for images)



Hyperlinks (Creating Internal Jumps)

• Creating Internal Jumps

– Edit the page on which the link willreside

– Type in the text you want displayed in the link or add an image

– Select text or image

– Activate the hyperlink dialog

• Type Ctrl-L

• Use the Format | Convert to Hyperlink menu

– Select Browse… button



Hyperlinks (Creating Internal Jumps)

• Select folder and file tobe target of hyperlink

• Select URL type

– Change to “Document Relative” for relativehyperlink

• Select OK

• Select OK again

• There is also a hyperlink control that can have properties set in code at run time as well as at design time



Hyperlinks (cont.)

1. The hyperlink HTML consists of an anchor tag with the target

2. The text or image that will be displayed and respond to the click

3. The closing tag

<a href="TestFolder/newpage.htm">Hyperlink Text</a>

1 2 3



Hyperlinks (cont.)

• Hyperlinks can be Relative, Root Relative, or Absolute

– A relative or root relative hyperlink is only good for links to pages in the same web site

• Shows the path starting from the current location or the web site root

– Absolute hyperlinks can be to internal or external pages

• Show entire path to the page, including the http:// header, machine address, folder, and page name

– Always use relative hyperlinks for links to the same site

• Allows site to be moved in total from one machine to another without rewriting



Hyperlinks (Relative Hyperlinks)

• Target located in the same directory<a href=“filename.htm”>

• Target located down one directory <a href=“dirname/filename.htm”>

• Target located up one directory <a href=“../filename.htm”>

• Target located up one directory and then down two <a href=“../dirname1/dirname2/filename.htm”>



Hyperlinks (External Jumps)

• Create external jumps by entering the complete URL in the hyperlink dialog

– Type in from memory

– Navigate using your browser and copy the URL to the clipboard and paste



Hyperlinks (cont.)

• We will return to hyperlinks later

– In-line hyperlinks will be covered with images

– We will also cover bookmarks to hyperlink to a specific point in a document (including within the same document as the link)

– We will also see how to use images as a hyperlink instead of text

– Use of hyperlink controls to enable dynamically setting hyperlink properties in code

– Use of hyperlinks in grid or repeater controls



Misc

• You can test your website by hitting F5 or clicking the Run button– Always starts default application page (Note:)

• You can test individual pages by entering http://localhost:portnum/websitename/page.aspx

– You don't need to close the page you are editing in order to test it. Just save it

– You will probably need to use the Refresh button on your browser to see the updated page

• Close your web site by saving any files being edited and closing VS

e-commerce: introduction to web development 1 dr. lawrence west, management dept., university of...

Documents