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.
ISYS2110_Lab_Notes_V26.docx Page 2
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.1 Learning Objectives .......................................................................... 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
ISYS2110_Lab_Notes_V26.docx Page 3
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.1 Learning Objectives .......................................................................... 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
ISYS2110_Lab_Notes_V26.docx Page 4
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.
ISYS2110_Lab_Notes_V26.docx Page 5
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
ISYS2110_Lab_Notes_V26.docx Page 6
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
ISYS2110_Lab_Notes_V26.docx Page 7
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.
ISYS2110_Lab_Notes_V26.docx Page 8
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)
ISYS2110_Lab_Notes_V26.docx Page 9
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.
ISYS2110_Lab_Notes_V26.docx Page 10
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
ISYS2110_Lab_Notes_V26.docx Page 11
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
ISYS2110_Lab_Notes_V26.docx Page 12
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
ISYS2110_Lab_Notes_V26.docx Page 13
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.
ISYS2110_Lab_Notes_V26.docx Page 14
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.
ISYS2110_Lab_Notes_V26.docx Page 15
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
ISYS2110_Lab_Notes_V26.docx Page 16
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.
ISYS2110_Lab_Notes_V26.docx Page 17
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.
ISYS2110_Lab_Notes_V26.docx Page 18
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 .
ISYS2110_Lab_Notes_V26.docx Page 19
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
ISYS2110_Lab_Notes_V26.docx Page 20
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.
ISYS2110_Lab_Notes_V26.docx Page 21
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.
ISYS2110_Lab_Notes_V26.docx Page 22
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 ).
ISYS2110_Lab_Notes_V26.docx Page 23
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.
ISYS2110_Lab_Notes_V26.docx Page 24
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.
ISYS2110_Lab_Notes_V26.docx Page 25
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.
ISYS2110_Lab_Notes_V26.docx Page 26
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.
ISYS2110_Lab_Notes_V26.docx Page 27
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 */ }
ISYS2110_Lab_Notes_V26.docx Page 28
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.
ISYS2110_Lab_Notes_V26.docx Page 29
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.
ISYS2110_Lab_Notes_V26.docx Page 30
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
ISYS2110_Lab_Notes_V26.docx Page 31
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
ISYS2110_Lab_Notes_V26.docx Page 32
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.
ISYS2110_Lab_Notes_V26.docx Page 33
Figure 20 Completed use case diagram
ISYS2110_Lab_Notes_V26.docx Page 34
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.
Recommended