internet for business

ISYS2110_Lab_Notes_V26.docx Page 1

ISYS 2110 Laboratory Notes

Please Note:

You should prepare for each lab session by pre-reading these lab notes.

You should save your work either to the H Drive or to a USB. To be safe you may want to save your work to both.


Table of Contents Table of Contents ......................................................................... 2

1 Introduction ........................................................................ 4

1.1 Learning Objectives .......................................................................... 4

1.2 What you will learn and the basic ground rules! ................................... 4

1.3 IMPORTANT NOTE ............................................................................ 4

1.4 Lab Attendance ................................................................................ 4

1.4.1 Overall View of the Website Development Process .......................... 5

1.4.2 Tools Used in Laboratory Sessions ................................................ 5

1.4.3 Additional Resource Websites ....................................................... 5

1.5 Rules of Thumb ALWAYS follow these rules: ..................................... 6

1.5.1 HTML ........................................................................................ 6

1.5.2 VWD ......................................................................................... 6

1.5.3 General ..................................................................................... 6

2 Lab: Designing your Resume ................................................. 7


2.2 Overview ........................................................................................ 7

2.3 Web development process ................................................................. 7

2.4 Planning ......................................................................................... 7

2.4.1 Website Persona ......................................................................... 7

2.4.2 Exercise: Goals and objectives ..................................................... 9

2.5 Information Architecture ................................................................. 10

2.5.1 Sitemap .................................................................................. 10

2.5.2 Exercise: Create a content outline .............................................. 10

2.5.3 Storyboard .............................................................................. 11

2.6 Design .......................................................................................... 11

2.6.1 Layout .................................................................................... 12

2.7 Conclusion .................................................................................... 15

2.8 Hints ............................................................................................ 15

2.9 References .................................................................................... 15

2.9.1 Planning and Design ................................................................. 15


2.9.2 Storyboard .............................................................................. 15

2.9.3 Layout .................................................................................... 15

3 Lab: Building your Resume ................................................. 16

3.1 Learning Objectives ........................................................................ 16

3.2 Overview ...................................................................................... 16

3.3 Creating a Master Page ................................................................... 16

3.3.1 Inserting a Table ...................................................................... 16

3.3.2 Creating the banner .................................................................. 19

3.3.3 Adding a Site Map and Navigation .............................................. 20

3.3.4 HTML Navigation ...................................................................... 21

3.4 Creating the Pages ......................................................................... 22

3.5 Testing Quality Assurance ............................................................ 24

3.6 Deployment .................................................................................. 24

3.7 Hints ............................................................................................ 24

3.8 FAQ .............................................................................................. 25

4 Lab: HTML and CSS ........................................................... 26

4.1 Learning Objectives ........................................................................ 26

4.2 Overview ...................................................................................... 26

4.3 Constructing the page using HTML ................................................... 26

4.3.1 CSS ........................................................................................ 27

4.4 Hints ............................................................................................ 28

4.5 Quiz ............................................................................................. 28

4.6 Exercise: Macromedia Fireworks ...................................................... 28

5 Lab: Use-Case Analysis ...................................................... 29


5.2 Role of use cases in system design ..................................................... 29

5.3 Key aspects of a use case diagram ...................................................... 29

5.4 Relationships in Use Case .................................................................. 31

5.5 Exercise ........................................................................................... 34

5.6 Use-Case Scenario ............................................................................ 34


1 Introduction 1.1 Learning Objectives Understand the purpose of this document

Overview the tools to be used in the labs

Create a simple HTML site

Learn some fundamentals about Macromedia Fireworks

1.2 What you will learn and the basic ground rules! You will learn four primary things in the laboratory sessions:

HTML 4.01 and XHTML 1.0 coding and techniques

Basic Graphic Design and Editing skills using Macromedia Fireworks.

Overall Website Development Process from a developers and businesss

standpoint

Visual Web Developer (VWD) to develop a simple ASP.NET websites

The purpose of these lab notes are to guide you through different exercises that will build your proficiency in html (hyper text markup language) and xhtml (extensible hyper text markup language) programming. You will also gain some basic skills in graphic design and graphic editing. These skills and techniques will be necessary for the VWD portion of the course and the final project.

These lab notes are, however, only part of your learning in the laboratory sessions. You will also want to refer to Castros HTML Textbook (2003), and other sources such as the links listed below for additional and more advanced techniques.

1.3 IMPORTANT NOTE The notes for each lab class should be read quickly before the lab session to help you understand concepts and requirements during the lab itself.

1.4 Lab Attendance You can miss attending a lab as long as:

1. You have completed the lab before the class

2. It is clearly your own individual piece of work. This might require you to change the page in way, which does not just include design, it also includes labels etc.


1.4.1 Overall View of the Website Development Process While you are performing the laboratory tasks and learning different programming and graphic design techniques, keep in mind the bigger picture which is the overall Website Development Lifecycle. A general overview of the process is:

Planning

Information Architecture

Design

Implementation

Testing

Deployment

By the end of this course you will understand what a business should expect during each phase of developing their website.

1.4.2 Tools Used in Laboratory Sessions 1.4.2.1 Visual Web Developer The primary web development tool used almost exclusively in this course is Microsoft Visual Web Developer (VWD). This is a very powerful tool that enables users to build dynamic fully functional ASP.NET 2.0 Ecommerce web sites.

The HTML coding in the course will be performed in conjunction with VWD.

1.4.2.2 Macromedia Fireworks For Graphics well be using Macromedia Fireworks. These are professional image editing tools. Youll learn the basics!

1.4.3 Additional Resource Websites

HTML Resources Fireworks Resources VWD Resources

Textbook Website: http://www.cookwood.com/html5ed/

http://www.cbtcafe.com/fireworks/

http://msdn.microsoft.co

m/vstudio/express/vwd

HTML Writers Guild:

http://www.hwg.org/resources/html/

http://www.joycejevans.com/tutorials/Fireworks/fwtutorials.htm/

http://msdn.microsoft.com/vstudio/express/vwd/features/visuallydesign/

default.aspx


HTML with Style:

http://www.webreference.com/html/

http://www.dw-fw-beginners.com/tutorials/

http://www.asp.net/getstarted/default.aspx?tabid

=61

Xhtml:

http://www.w3schools.com/xhtml/default.asp

http://www.smartwebby.com/web_site_design/fireworks_tutorial.asp

1.5 Rules of Thumb ALWAYS follow these rules: Dont worry if you dont understand all of these Rules of Thumb yet. You will!

1.5.1 HTML When coding html tags, elements or attributes ALWAYS write in lowercase

When saving files (graphics or text/html files) for the website ALWAYS write in lowercase

ALWAYS quote all attributes in an (x)html tag. For example, or

Always insert closing tags . Even for open tags such as the tag. In this case you will insert a space then the /. For example: or \

1.5.2 VWD Always store your database in the App_Data folder.

The main page of your websites must always be named default.aspx. This enables anyone browsing to your directory to find the main page directly.

1.5.3 General Make a backup of your files to avoid losing them

When performing a task ALWAYS think about which phase of the Website Development Lifecycle the task falls within


2 Lab: Designing your Resume 2.1 Learning Objectives

Describe the web site development lifecycle

Implement the planning, information architecture and design steps youre your resume site

Design a layout and logo using Fireworks

2.2 Overview This website will act as your online resume. You should aim to include content about yourself that would be required by a prospective employer and this information should be easy to find. You will also be required to link to all your assessment submissions during the semester.

2.3 Web development process The main steps in the process for developing a website are:

1. Planning

2. Information Architecture

3. Design

4. Implementation

5. Testing

6. Deployment

We will only be covering the first 3 steps in this lab.

2.4 Planning The planning step involves determining the goals, objectives and target audience of the site. In a business, the objectives might be to promote products and allow customers to find and purchase the products they are need. The target audience is related to segmenting, targeting and positioning within the marketing function.

2.4.1 Website Persona The purpose of personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Remember, your personas are only as good as the research behind them.


You may develop one or more personas for a project but limit yourself to the main audiences for the site. For any given project, creating only three or four personas is best. Remember that it is better to paint with a broad brush and meet the needs of the larger populations than try to meet the needs of everyone. The goal of personas is not represent all audiences or address all needs of the website but instead to focus on the major needs of the most important user groups.

2.4.1.1 Effective personas: Represent a major user group for your website Express and focus on the major needs and expectations of the most

important user groups Give a clear picture of the user's expectations and how they're likely to use

the site Aid in uncovering universal features and functionality Describe real people with backgrounds, goals, and values

2.4.1.2 Benefits of Personas Personas help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation. They also offer a quick and inexpensive way to test and prioritize those features throughout the development process. In addition they can help:

Stakeholders and leaders evaluate new site feature ideas Information architects develop informed wireframes, interface behaviors,

and labeling Designers create the overall look and feel of the website System engineers/developers decide which approaches to take based on

user behaviors Copy writers ensure site content is written to the appropriate audiences

2.4.1.3 Questions to Ask During Persona Development The following questions and areas of discussion will help you construct a snapshot of the visitors to your site.

1. Description of the user

Personal What is the age of your person? What is the gender of your person? What is the highest level of education this person has received?

Professional How much work experience does your person have? What is your persons professional background? Why will they come to the site? (User needs, interests, and goals)


Where (or from whom) else is this person getting information about your issue or similar programs or services?

When and where will users access the site? (User environment and context)

Technical What technological devices does your person use on a regular basis?

What software and/or applications does your person use on a regular basis?

Through what technological device does your user primarily access the web for information?

How much time does your person spend browsing the web every day?

2. User Motivation

What is your person motivated by? What are they looking for? What is your person looking to do? What are his needs?

2.4.1.4 Elements of a Persona Personas generally include the following key pieces of information:

Persona Group (i.e. web manager) Fictional name Job titles and major responsibilities Demographics such as age, education, ethnicity, and family status The goals and tasks they are trying to complete using the site Their physical, social, and technological environment A quote that sums up what matters most to the persona as it relates to your site Casual pictures representing that user group

2.4.2 Exercise: Goals and objectives Using Microsoft Word or Microsoft PowerPoint, list down the goals of the website, and one persona profile and objectives of the profile group visiting the website.


2.5 Information Architecture A very important yet often forgotten step in web development is designing the Information Architecture (IA) for the website. Just as a building needs an architectural design to ensure it remains standing, a website needs an IA plan. IA is closely related to the concept of Information Management (IM) as it involves planning the information in a logical and organized way (Chaffey 2009 pp. 634-639). Through careful planning you can ensure that your website is easy to navigate and that visitors will be able to find everything easily. You NEED to have a consistent navigation system!

For the purpose of this exercise we will work with a sitemap, layout and a content outline.

2.5.1 Sitemap Inspect the site map (Figure 1), which indicates the proposed pages of this Resume site. In practice you would spend some time deciding on the layout of the site map, which represents the structure of your site. However, for now this has been decided for you as shown below. We have decided that you are going to create separate pages for various parts of the Rsum, as the content will be too much for one page.

Figure 1: A Sitemap determines the navigation/structure for the website

We will use this Sitemap for the structure of our Resume Website. Later you will be expected to create your own Sitemap for your website projects.

2.5.2 Exercise: Create a content outline In your previous Microsoft PowerPoint or Microsoft Word, create a document using the sitemap from above. Each page displayed in the sitemap should be a heading. Reference each page with the corresponding number. For example, 1.0 Resume


Home (on the site map) is listed as 1.0 Resume Home. You should also include the file names in each of the page. This is your content outline. Outside of class, you will write or copy/paste your resume text content into this document. You can also include graphic content in this document if you would like. Have the content prepared by the next tutorial Session. If you are going to use graphics on the pages also have them prepared.

2.5.3 Storyboard Likewise you should spend time drafting out the process a visitor to the site might follow using a Storyboard. This can be done with rough sketch designs of the page content and should follow a logical set of steps.

2.6 Design Every good design comes from a plan. That is, a web designer creates one or more layouts, an organization chooses the best layout and then the web programmer builds that layout.

Figure 2: Sample finished layout overlaying website (http://www.megastarmedia.net)

Navigation

Main Content Search

Footer

Banner


2.6.1 Layout Layouts, also known as Composites or Wireframes (Chaffey 2009 pp. 636), are an important part of web design, which provide a clear idea of the final product before programming begins. It is extremely important to get this right in the design phase, because a change after implementation will be very costly. A layout will be the basis for the template or master page (read below) for the site and adds consistency, improving usability and the user experience. Currently most website layouts include:

Header This could be a graphic banner containing the Logo

Navigation areas One or more areas allowing users to find exactly what they want in the site. This includes search facilities.

Content the part of the page that changes.

Pictures, advertisements or other multimedia

Footer Including Copyright Information and site links.

2.6.1.1 Fireworks Exercise: Creating a layout (wireframe) First we will build this simple layout in Fireworks and then we will use this layout for ALL pages in our resume website. Note: it might be helpful to complete the Fireworks tutorial before starting this. You will use the following functions of Fireworks:

Marquee Tool

Shape Tool

Stroke

Text Tool

Linking objects

Pointer Tool

Properties

Selecting Colors via Color Picker


Figure 3: A sample layout (wireframe) for the website.

Create a new file with these dimensions: 800 pixels width and 600 pixels

height.

Create The Top Banner Border

Create a rectangle using the Rectangle Tool from the Vector palette

In the Properties section, enter the width as 794 and the height as 124

Position the rectangle along the top of your canvas.

Click on the Stroke Colour box and choose the colour you want for the

border of the rectangle. Make the border 3 pixels wide.

Writing Resume Banner

Select the Text Tool from the vector palette

In the Properties section select Arial Black as the Font and an appropriate

Font Size.

Click inside the rectangle and type Resume Banner.


Using the Pointer Tool position the text at the top left corner.

Linking the two objects

Look at the Layers Palette and make sure that the My Resume Banner Text layer is active

While holding down the shift key click on the rectangle in the layers

palette. Now both items are selected.

Click on Modify>Group

The items become one. Call the group Banner Group in the properties

section.

Redo the Steps to create the Navigation Element, the Content Element and

any others you wish to add.

Optimise the graphic as a .gif file.

Save the optimised gif into your website file structure. Create an html link

to the gif from a page called Laboratory Tasks. Call the link Resume

Layout.

2.6.1.2 Fireworks Exercise: Creating a banner

Figure 4: Top banner created in Fireworks

Your banner should be 794 X 124 pixels

Use a picture of yourself and remove the background using the Marquee

tool.

Create a line along the bottom of your banner using the Rectangle tool from

the Vector Box

Put your name, email address and perhaps your mobile number on the

banner, and add a drop shadow.


Optimize the image and save as a jpg file.

2.7 Conclusion You now have a plan from which you can build your resume. This will be done in the next lab.

2.8 Hints 1. Make sure all of the resources created are linked to your HTML page. If

not, you will not get any marks for this lab. 2. Remember, you are designing your Resume website. Be unique and use

colours that you think go well together. Check the web for existing colours combinations.

2.9 References

2.9.1 Planning and Design http://meiert.com/en/blog/20070510/10-steps-to-create-a-high-quality-website/

http://www.adobe.com/support/dreamweaver/layout/site_planning/

http://www.usability.gov/how-to-and-tools/methods/personas.html

2.9.2 Storyboard http://www.conquerorwebdesign.com/web-site-storyboard.html

2.9.3 Layout http://www.entheosweb.com/photoshop/layout.asp

http://www.hit-counter-download.com/website-layout-design.html

http://www.layoutcookbook.com/

http://vineyardesigns.com/resources/build_website/layoutdesign.shtml


3 Lab: Building your Resume 3.1 Learning Objectives

Describe the web site development process

Construct a simple web site using VWD from a pre-created design

3.2 Overview We will now build the physical resume site using our plan as a reference.

3.3 Creating a Master Page A master page is the template for an ASP.NET website. It maintains consistency across all the pages to which it is linked. You will build a master page based on the layout you have already designed.

Create a new website called Resume

Click on the Add New Item button and add a new Master Page, and leave

the default name of MasterPage.master.

Figure 5: Create a Master Page

3.3.1 Inserting a Table A table is inserted to give layout to the master page.


Figure 6: Inserting a new table

Click on Design to go to Design View.

From the Table menu choose Insert Table. Set Rows to 3 and columns to

2.

Then choose 2 consecutive cells in the first row and right click, Modify >

Merge Cells to create a one-cell header.


Figure7: Merge Cells

Do the same thing to create footer (merge two consecutive cells in the last

row)

Resize row heights for the header and footer

o Top row should be 124px for banner

o Bottom row should be 60px for footer navigation

Right click on the header row in the table and click on Insert > Row

Above to split the header row into two: one for banner and the other for

horizontal navigation

Drag the ContentPlaceHolder into the content area, which is the second

row and second column of the table (see Figure 0). Note that your

ContentPlaceHolder might be in different location than the one in Figure .


Figure 8: Dragging content placeholder into the table

3.3.2 Creating the banner Create a folder called images in solution explorer (Right click on the root in

solution explorer)

Copy your banner into the folder

Drag your banner into the top row by dragging it from the solution explorer


3.3.3 Adding a Site Map and Navigation Click the Add New Item button and add a Site Map.

Leave the name as Web.sitemap

Replace the existing code in Web.sitemap with the code in Figure

Figure 9: Resume Sitemap Code

Before the Site map can be used, all the pages referred to in the Site Map must

be created

In the Add New Item box create a web form and call it education.aspx.

Check the select master page box and click Add. In the Dialogue box

choose the relevant master page (in this case we only have one master

page so the choice is easy).

Follow steps above for all required pages like pretertiary.aspx and so on.

To view the sitemap

Drag a SiteMapDataSource from toolbox (under Data) to the Design

view.

From toolbox (under Navigation) drag a Treeview and place it in the left

column and link it to the SiteMapDataSource (Choose Data Source).

With the Treeview selected go to the Properties panel and under

Appearance change the ImageSet to Arrows.


Experiment with some other formatting elements in the Properties panel,

for example change the font or the hover background.

Drag a SiteMapPath from the Navigation toolbox to the top cell of the

table.

3.3.4 HTML Navigation The horizontal navigation, which should be created in the second row, can be

created using HTML.

Home Education Work History Interests Skills Referees

Go to design view of the master page and find the second set of tags.

Insert this block of code between the and tags.

In the footer row you can insert a mailto link.

Use this code except change the email address to your email account: Email Me

Find the last set of tags and insert this block of code between the

and tags.

We should now have a Master Page that looks something like (Figure ) in VWD.

Note we can not view it just yet.


Figure 10: Master Page in VWD

3.4 Creating the Pages Delete the Default.aspx page in the Solution Explorer. This will be created again

in the next step.

All the pages in the sitemap (see URLs in Figure 9) must be created by

adding each page and making sure that the Select Master Page checkbox is

checked in each instance (see Figure ).


Figure 11: Add new item, select master page

The Masterpage.master should be the only master page that can be

selected in the next dialog box.


Figure 12: Source View

3.5 Testing Quality Assurance You should test all your pages on your local computer, ensuring all links work and all content and pictures look correct.

3.6 Deployment The Resume website should be copied to the correct folder on the web server from where it will be visible to yourself and your friends. Once again, you should test all your pages on the web server. Do not assume that it works.

3.7 Hints 1. All the pages need to be created and have information on them. This is where

you use the content you have created in the previous lab.


3.8 FAQ Question Answer

My default page is blank It is probably not linked to the master page. Delete it and add it again, but be sure that you click the checkbox to link to master page.

Why do I have to delete the default page?

Default.aspx exists before Master Page. Thus Default page is not link to Master Page. To link it to the master page, it is easier to delete it and recreate it.

I cant see my images Make sure they are not stored in the App_Data folder. This folder is for databases only. Store images in a new folder called image.


4 Lab: HTML and CSS 4.1 Learning Objectives

Complete a simple web site using VWD from a pre-created design

Able to create and edit HTML codes in particular to updating keywords and titles, headings, hyperlinks, tables, bold, underline and italic fonts, inserting images, unordered and ordered list, horizontal lines and sentence breaks.

Able to modify CSS properties in particular to changing the background and other properties for the website.

4.2 Overview We will now complete the physical resume site using our plan as a reference.

4.3 Constructing the page using HTML When each page is created, add the content from your plan. Using the source

view, make sure each page:

Have an updated title and keywords (see head section)

Use h1, h2 and h3 tags using

Have hyperlinks to other pages in your website using

Use bold, underline and italic

Have at least one horizontal line in the website using

Use paragraph tags to arrange your text using

Show at least one image using

Use both unordered and ordered lists using list item

Use cascading style sheets (css) to change the background colour and other page characteristics. You will need to create the styles.css file and upload it to the server.

Use the html in Figure 3 to start.


My title

Page content goes here.

Figure 11: HTML to copy into your page

4.3.1 CSS Cascading style sheets (CSS) allow you to set styles for all of the pages in your website in one file. This makes the site much easier to maintain. For example, if you wanted to change all the headings to be red, you would need to edit every page if you did not use CSS. However, with CSS you could make the change with one single line. Your HTML site should link to the stylesheet below. Feel free to make any changes.

html { background: #fff; /* background colour white */ color: #000; /* font colour black */ font-family: Geneva, Verdana, Geneva, sans-serif; font-size: 12px; } body { background: #fff url(../image/bg1.gif); /* background image for the body */ } a { color: red; /* font colour for links red */ } a:hover { text-decoration: none; background: blue; /* background colour when you hover over a link blue */ }


h1, h2, h3, h4, h5 { font-family: Times New Roman; }

Figure 12: CSS to save as style.css

4.4 Hints 1. Always make sure you remember to end a tag. To help you, create the end

tag when you create the start tag.

4.5 Quiz 1. Briefly explain the purpose of each of the following tags:

a. , , , , , , 2. What does a web server do? 3. What is the difference between ftp and http?

4.6 Exercise: Macromedia Fireworks See Blackboard for the resources required for a more advanced Fireworks

lab.


5 Lab: Use-Case Analysis 5.1 Learning Objectives Understand the role of use cases in system design

Identify actors and transactions of the website

Design a website that is effective and user-friendly

5.2 Role of use cases in system design Use cases are a very useful starting point in every aspect of object-oriented system development. They describe the requirements of a system strictly from an outsiders point of view, specifying the functions which the system delivers to its customers.

The following are the key benefits of use cases.

Use cases bring to the attention of the developers the gaps which might

exist in the requirements of the user. This early identification of gaps helps

reduce the cost and time which will be needed to change the system in the

future.

Use cases can help to manage a projects workload, as they can be

assigned to members of the development team to be implemented. In

addition, since a use case represents a measurable feature of a system, its

progress to be tracked.

Use cases provide an excellent starting point for building your test cases

and procedures because they accurately capture the requirements of the

user and the metrics for measuring success.

5.3 Key aspects of a use case diagram 5.3.1 Actors Actors are the external things which interact with our system. In use case, a stick man notation is used to represent an actor as shown in Figure 15.


Figure 15 An example of an actor

Actors which interact with the system externally dont have to be actual people. An actor can also refer to a system which belongs to another party, such as a B2B (Business-to-Business) application.

5.3.1.1 Refining actors One of the interesting things when defining actors is the discovery that some actors are related to each other. We will look at this using the following example.

The Administrator actor is really a special kind of system user. To order to indicate that an administrator has the right to do everything a regular user can do (with additional rights, of course), a generalisation arrow is used as shown in Figure 2.

User

Administrator

The more general "User" actor

The Generalization Arrow

Specialised "Administrator" actor

Figure 16 Use of generalisation arrow to indicate the special nature of Administrator actor

5.3.2 Use Cases Once the actors have been identified, the next step is find cases where the system is being used to complete a specific job for an actor-use case. Use cases


can be identified from your users requirements. In this stage, the ambiguous descriptions in the requirements document should be transformed into a collection of clear jobs for the system.

A use case might be as simple as allowing the user to register into the system or as sophisticated as describing a multitasking environment. A use case is basically a complete use of the system, which means that there is some interaction between the user and the system as well as some output resulting from the interaction.

Figure 17 A use case diagram

One critical point of note is this: A use case is something that provides some measurable result to the user or an external system.

5.3.3 Communication Lines A communication line connects an actor and a use case to indicate the actor participating in the use case. There is no limit on the number of communication lines that can be drawn in a use case.

Figure 18 Communication line between an actor and a use case

The purpose of a communication line is to show that an actor is involved in a use case, not to imply an exchange of information in any direction or that the actor starts the use case.

5.4 Relationships in Use Case There are two types of relationships which are used in use case diagrams in order to describe the associations which exist between use cases. They are:

The relationship


The relationship

5.4.1 The / relationship The relationship declares that the use case at the end of the dotted arrow completely reuses all of the steps from the use case being included.

The benefits of using the relationship are twofold:

It removes the need for repetitive cut-and-paste operations between use

case descriptions

It gives you a good indication at system design time that the development

of the use case will need to be a reusable part of your system

Figure 19 Use of relationship

5.4.2 The relationship The relationship provides a means for us to show that a use case might completely reuse another use cases behaviour, similar to the relationship, but that this reuse was optional and dependent either on a runtime or system implementation decision.


Figure 20 Completed use case diagram


5.5 Exercise 1. Draw Use case Diagram for following:

Go to following websites and pick a function to draw use case diagram.

www.amazon.com

www.lazada.vn

You should choose at least 4 function to draw the diagram. You should use the / relationship and the relationship in those function where it is possible.

Refer to scenario for the Register use-case.pptx file from Blackboard and write

down the scenario for two of the Use Case you have picked from above exercise.

Make sure you ask feedback from your tutor on your work.

5.6 Use-Case Scenario Use-case scenario tells the steps in which users need to follow to complete a task.

An example of a use-case scenario looks like this.

5.6.1 A use-case scenario for registering on the website. Pre-condition: A user is active on the web site

Scenario: Register

Basic path:

1. Use-case starts when customer presses register

2. Customer enters name, postal address and email

3. The post/zip code will be checked for validity

4. The customer will select submit

5. The system will check all fields are present

6. A redirect page will be displayed to thank the customer.

internet for business

Documents

lab notes

lab session

lab attendance

learning objectives

website development

laboratory notes

rules of thumb

web development process