SSUET/QR/112

Computer Laboratory Manual

Software Engineering
(CE-202)
Fall 2022

Computer Engineering Department

Sir Syed University of Engineering & Technology

University Road, Karachi 75300
http://www.ssuet.edu.pk
 LAB PLAN
Course Title: Software Engineering
Course Code: CE-202

Week Required
Lab Date Objective
No. Reading
10-10-2022
Construct Gantt Chart & PERT Chart Using “MS
1 to 1-14
PROJECT”
14-10-2022
17-10-2022
Demonstrate Unified Modeling Language
2 to 15-19
Diagrams And “Rational Rose”
21-10-2022
24-10-2022 Illustrate Use Case Diagram Using “Rational
3 to Rose” 20-23
28-10-2022
31-11-2022
Illustrate Sequence Diagram Using “Rational
4 to 24-30
Rose”
04-11-2022
07-11-2022
Apply Web Development Framework Using
5 to 31-50
“Dreamweaver CS 5”
11-11-2022
14-11-2022
6 Apply Web Development Client Side Scripting
to 51-63
HTML, Login Form, CSS And Java Scripting
18-11-2022
21-11-2022 Open Ended Lab(Utilize Gantt Chart, Network
7 to Diagram, Use Case Diagram, Login Form & CSS
25-11-2022 Style on Project Management System).
28-11-2022
8 to Implement Server Site Scripting On MY SQL. 64-79
02-12-2022
Midterm Examination
9 (05-12-2022 to 10-12-2022)
12-12-2022
Show Authentication using PHP, Query,
10 to 80-89
Database.
16-12-2022
19-12-2022
Use Dreamweaver Web Development tool to
11 to 90-94
View Record
23-12-2022
20-12-2021
Use Dreamweaver Web Development tool to Edit
12 to 95-101
Record
25-12-2021
02-01-2023
Use Dreamweaver Web Development tool to
13 to 102-109
Insert/Delete Record
06-01-2023
09-01-2023
14 Demonstrate & Practice Software Requirement
to 110-114
Specification
13-01-2023
16-01-2023 Open Ended Lab(Using Login Form, add fields in
to database ,implement authentication & design
15 20-01-2023 menu including ADD, EDIT, DELETE & VIEW
records on any system).
23-01-2023 Lab Examination
16 to (23-01-2023 to 11-02-2023)
27-01-2023
 SSUET/QR/118
(Form IIa)
Sir Syed University of Engineering & Technology, Karachi
Computer Engineering Department
Rubric Guideline for Software Based Lab

Computer Graphics Animation & Multimedia (CE-306), Fall Semester 2022

Criteria Exceeds Meets Expectations Developing Unsatisfactory

Expectations (70%-89%) (50%-69%) (<50%)
(>=90%)
Able to use software Able to use software Able to use Unable to use the
Software
with its standard and with its standard and software with its software
Handling
advanced features advanced features with standard features
without assistance minimal assistance with assistance
Able to program/ Able to program/ Able to program/ Unable to
Programming/
simulate the lab simulate the lab tasks simulate lab tasks program/simulate
Simulation
tasks with without errors with errors
simplification
Able to achieve all Able to achieve all the Able to achieve Unable to achieve
Results the desired results desired results most of the the desired results
with alternate ways desired results
with errors
Laboratory manual Laboratory manual has Laboratory Laboratory manual
has no grammatical very few grammatical/ manual has has several
and/ or spelling spelling errors. multiple grammatical/
Laboratory errors. All sections of the report grammatical/ spelling errors and
Manual All sections of the are technically accurate. spelling errors. sentence
report are very well Few sections of construction is poor.
written and the report contains
technically accurate. technical errors.
 SSUET/QR/118
[Form-IIb]
Sir Syed University of Engineering & Technology, Karachi
Computer Engineering Department
Rubric-Laboratory Manual
Computer Graphics Animation & Multimedia (CE-306), Fall Semester 2022
Name of Student: ________________________ Roll No. __________________
Lab Description & Score
Understanding the Coordinate System and Implementing It with Different Modes.
1. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Understanding & Implementation of Circle, Trim, and Offset Commands.
2. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Understanding & Implementation of drawings through Array, Polygon, Donut, Rectangle and Hatch
(Bhatch) commands.
3. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Understanding & Implementation of Drawings through Line Type, Break, Mirror, Copy.
4. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Understanding & Implementation of Drawings through Blocks.
5. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Implementation of Series-Parallel Resistive Network Using Pspice.
6. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Open Ended Lab#1
7. Software Handling Programming/ Simulations Results Lab Report Score
( )/6 ( )/12 ( )/6 ( )/4 ( )/15
8. Midterm Week
Implementation of Simple RC Circuits and Finding Its Response.
9. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Implementation of Simple RL Circuits and Finding Its Response.
10. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
An Introduction to MATLAB.
11. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Implementation of Basic Operations on Matrix.
12. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Creation of Script and Function (M-File).
13. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
Open Ended Lab#2 & Final Lab Viva
14. Software Handling Programming/ Simulations Results Lab Report Score
( )/2 ( )/4 ( )/2 ( )/2 ( )/10
TOTAL SCORE

Overall Score: ________ out of 14 Examined by: _______________________________

(Obtained Score / 160) x 14 (Name and Signature of concerned lab instructor
 SSUET/QR/118
(Form IIIa)
Sir Syed University of Engineering & Technology, Karachi
Computer Engineering Department
Rubric for Subject Project
Computer Graphics Animation & Multimedia (CE-306), Fall Semester 2022
Name of Student: ________________________ Roll No. __________________
Criteria Exceeds Meets Developing Unsatisfactory Score
Expectations Expectations (50%-69%) (<50%) Obtained
(>=90%) (70%-89%)

Able to Able to Able to Able to

demonstrate the demonstrate demonstrate the demonstrate the
project with the project project with project with
achievement of with achievement of achievement of
required achievement of a*t least 50% less than 50%
objectives required required required
having clear objectives but objectives and objectives and
understanding understanding insufficient lacks in
Project of project of project understanding of understanding of
Demonstration limitations and limitations and project project limitations
future future limitations and and future
enhancements. enhancements future enhancements.
Hardware is insufficient. enhancements. Hardware and/or
and/or Software Hardware Hardware and/or Software modules
modules are and/or Software are not functional,
fully functional, Software modules are if applicable.
if applicable. modules are partially
functional, if functional, if
applicable. applicable.

Able to achieve Able to Able to achieve Unable to achieve

Project results all the desired achieve all the most of the the desired results
results with desired results desired results
alternate ways to with errors
improve
measurements

Project report has Project report Project report Project report has
no grammatical has very few has multiple several
and/ or spelling grammatical/ grammatical/ grammatical/
Project Report errors. spelling errors. spelling errors. spelling errors and
All sections of the All sections of Few sections of sentence
report are very the report are the report construction is
well-written and technically contains poor.
technically accurate. technical errors.
accurate.

Able to answer Able to answer Able to answer Unable to answer

Viva the questions the questions the questions but the questions
easily and related to the with mistakes
correctly across project
the project.
Total Marks
 SSUET/QR/118
(Form IIIb)
Sir Syed University of Engineering & Technology, Karachi
Computer Engineering Department
Rubric for Lab Exam

Computer Graphics Animation & Multimedia (CE-306), Fall Semester 2022

Name of Student: ________________________ Roll No. __________________

Criteria Exceeds Meets Expectations Developing Unsatisfactory Score

Expectations (70%-89%) (50%-69%) (<50%) Obtained
(>=90%)
Performance
Able to Able to present Able to present No or very less
present full adequate knowledge sufficient knowledge of
knowledge of of both problem and knowledge of both problem
both problem solution both problem and and solution
and solution. solution
Viva
Able to Able to answer the Able to answer Unable to answer
answer the questions related to the questions but the questions
questions the project with mistakes
easily and
correctly
across the
project.
Total Score

Final Lab Assessment

Criteria Score Obtained

Laboratory Manual

Subject Project (If any)

Lab Exam

Total (50)

Examined by: _______________________________

(Name and Signature of concerned lab instructor)
 SSUET/QR/113

TABLE OF CONTENTS
Lab Objectives Page Corresponding
No. No. CLOs

1 Construct Gantt Chart & PERT Chart Using “MS PROJECT” 1 CLO_1

2 Demonstrate Unified Modeling Language Diagrams And “Rational Rose” 3 CLO_1

3 .Illustrate Use Case Diagram Using “Rational Rose” 5 CLO_1

Illustrate Sequence Diagram Using “Rational Rose” 9 CLO_1

4
5 Apply Web Development Framework Using “Dreamweaver CS 5” 12 CLO_2

Apply Web Development Client Side Scripting HTML, Login Form, CSS And Java 15 CLO_2
6 Scripting
7 Open Ended Lab(Utilize Gantt Chart, Network Diagram, Use Case Diagram, Login Form & CSS
Style on Project Management System).
8 Implement Server Site Scripting On MY SQL. 19 CLO_2

9 Show Authentication using PHP, Query, Database 26 CLO_2

10 Use Dreamweaver Web Development tool to View Record 37 CLO_2

43 CLO_2
11 Use Dreamweaver Web Development tool to Edit Record

Use Dreamweaver Web Development tool to Insert/Delete Record 49 CLO_2

12
13 Demonstrate & Practice Software Requirement Specification 52 CLO_2

14 Open Ended Lab(Using Login Form, add fields in database ,implement authentication
& design menu including ADD, EDIT, DELETE & VIEW records on any system).
Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

Lab#01

Objective: Construct Gantt Chart & PERT Chart Using MS Project

 Introduction about Microsoft Project and discuss some features.

 Introduction about Gantt Chart and Network Diagram.
 Create Gantt chart and Network Diagram with the help of example

Introduction about Microsoft Project:

Microsoft Project is a project management software program, developed and sold by
Microsoft, which is designed to assist a project manager in developing a plan, assigning
resources to tasks, tracking progress, managing the budget, and analyzing workloads.
Microsoft Project can be used in a variety of industries including construction,
manufacturing, pharmaceuticals, government, retail, financial services and health care.

Microsoft Project is a software application sold by Microsoft that provides project

management tools to manage projects. The program, which has many different versions,
allows users to:

 Understand and control project schedules and finances.

 Communicate and present project information.
 Organize work and people to make sure that projects are completed on schedule.

Features:
Project creates budgets based on assignment work and resource rates. As resources are
assigned to tasks and assignment work estimated, the program calculates the cost, equal to the
work times the rate, which rolls up to the task level and then to any summary tasks and
finally to the project level. Resource definitions (people, equipment and materials) can be
shared between projects using a shared resource pool. Each resource can have its own
calendar, which defines what days and shifts a resource is available. Resource rates are used
to calculate resource assignment costs which are rolled up and summarized at the resource
level. Each resource can be assigned to multiple tasks in multiple plans and each task can be
assigned multiple resources, and the application schedules task work based on the resource
availability as defined in the resource calendars. All resources can be defined in label without
limit. Therefore, it cannot determine how many finished products can be produced with a
given amount of raw materials. This makes Microsoft Project unsuitable for solving problems
of available materials constrained production. Additional software is necessary to manage a
complex facility that produces physical goods.

The application creates critical path schedules, and critical chain and event chain
methodology third-party add-ons also are available. Schedules can be resource leveled, and
chains are visualized in a Gantt chart. Additionally, Microsoft Project can recognize different
classes of users. These different classes of users can have differing access levels to projects,
views, and other data. Custom objects such as calendars, views, tables, filters, and fields are
stored in an enterprise global which is shared by all users.

CE-202L: Software Engineering Lab 1

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

Introduction about Gantt Chart

A Gantt chart, commonly used in project management, is one of the most popular and useful
ways of showing activities (tasks or events) displayed against time. On the left of the chart is
a list of the activities and along the top is a suitable time scale. Each activity is represented by
a bar; the position and length of the bar reflects the start date, duration and end date of the
activity.

A Gantt chart is a type of bar chart, developed by Henry Gantt in the 1910s, that illustrates a project
schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary
elements of a project. Terminal elements and summary elements comprise the work breakdown
structure of the project. Modern Gantt charts also show the dependency (i.e., precedence network)
relationships between activities.

This allows you to see at a glance:

 What the various activities are

 When each activity begins and ends
 How long each activity is scheduled to last
 Where activities overlap with other activities, and by how much
 The start and end date of the whole project

To summarize, a Gantt chart shows you what has to be done (the activities) and when (the
schedule).

Sample of Gantt chart

Introduction about Network Diagram

The Network Diagram view was called the PERT Chart in earlier versions of Project. This
view shows the dependencies between tasks in a graphical manner. Gantt chart is primarily
meant to view the schedule time line, whereas Network diagram to view the all type of
dependencies in the project.

CE-202L: Software Engineering Lab 2

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

Each task shown in the box called node and a line connecting two boxes represents the
dependency between those tasks.

You can also create new tasks in the Network Diagram. It’s always easy to manage the tasks
from Gantt chart view, but if you are concerns on view the dependencies instantly while you
creating the tasks, Network Diagram will be the right one.

Network Diagram also can display a record of progress:

 If the task is completed, the task node shows cross diagonal lines
 If the task is in progress but not completed, a single diagonal line draw through node
 No diagonal line appears in tasks that are not yet started

Sample of Network Diagram

Create Gantt chart and Network Diagram

Gantt Chart:

1. Adding tasks and milestones to a Project File:

 On the View menu, click Gantt Chart.
 In the Task Name field, type a task name, and then press TAB. (Microsoft Project
enters an estimated duration of one day for the task followed by a question mark)

CE-202L: Software Engineering Lab 3

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

 In the Duration field, type the amount of time each task will take in months, weeks,
days, hours, or minutes, not counting nonworking time. (By default the time period
will be days, but that can be changed to hours, months, etc.)
 Press ENTER. It should look like the figure below:

 To add a milestone the only difference is that the duration of the activity must be zero
(below is an example):

Note: By double clicking on a Task or milestone, you can modify its information with
a form that prompts

2. Grouping Tasks in Logical Order:

Outlining helps organize your tasks into more manageable chunks. You can indent related
tasks under a more general task, creating a hierarchy. The general tasks are called summary
tasks; the indented tasks below the summary task are subtasks. A summary task's start and
finish dates are determined by the start and finish dates of its earliest and latest subtasks.

 Click once on the first activity of the group of activities you want to group. For the
example Activities 4and 5

 Then click on the option “New Task” in the “Insert” Menu to insert a new task that
will represent thename of the group (“Group 1” for this example)

 Then select the tasks below (4 and 5) and then click in the option “Indent” in the
“Project

3. Creating Relationships Between Tasks:

CE-202L: Software Engineering Lab 4

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

A network of tasks in a project must be connecting activities from the start to the end, to
establish these relationships we need to use the field “Predecessors” of each task, where we
can designate which activity will be preceding the one we are updating, in the example below
we will indicate MS project that “Activity 5” can start once “Activity 4” is completed
(Finish to Start relationship).

Notice that by establishing the relationship now the Group 1 takes 2 days to be completed,
because before, the activities were set to be performed in parallel, and now they are in series
(Finish to Start relationship)

Note: MS project will calculate dates based on the durations of the tasks, their relationships
and the start date set for the project, however it is possible to change the starting date of a
task (if necessary) By double clicking on a Task or milestone, and using the fields related to
the dates (Start or Finish)

4. Assigning Resources to Tasks:

You can use the Resource Sheet in Microsoft Project to create a list of the people, equipment,
and material resources that make up your team and carry out the project tasks. Your resource
list will consist of work resources or material resources. Work resources are people or
equipment; material resources are consumable materials or supplies, such as concrete, wood,
or nails.
 On the View menu, click Resource Sheet.
 On the View menu, point to Table, and then click Entry.
 In the Resource Name field, type a resource name.
 You can go through the fields in the sheet, but for the simplicity of the example just
focus on the name and initials of the Resource
 Below is an example of some Human resources added to the Resource Sheet (We
could add also other type of resources such as Equipments, Consumables, etc.)

 Once the resources are created, you can go back to the View menu, and click Gantt
Chart to see again the tasks, and then when you double click a task you can add a
resource to this task by using the tab “Resources”

Network Diagram:

CE-202L: Software Engineering Lab 5

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

 Click Gantt chart view and go to the sub options in Gantt Chart
 Click Network diagram

Now let’s try a small example, step by step to practice each of the options we have seen so far
about how to create a project using MS Project. We are going to use a small set of tasks
(Table Below) related to the initial phases of a System Testing Plan (Definition and Design)

Activity Predecessor Responsibility Effort System Testing

Phase
1.RSD Analysis Requirements  Test Manager 3 days Definition Phase
Specification Document  Project
completed. Manager
(Not part of System  Test Leader
Testing Plan
2. Develop Test Plan Activity 1 •Test Manager 5 days Design Phase
•Test Leader
•Tester E
3. Develop Test Design Activity 2 •Tester A and B 8 days Design Phase
Specification
4. Develop Test Case Activity 3 •Tester A and B 5 days Design Phase
Specification
5. Develop Test Activity 4 •Tester A and B 3 days Design Phase
Procedure Specification
6. Develop Test Item Activity 5 •Tester A and B 1 days Design Phase
7. Prepare Tools and Test Activity 6 •Tester A and B 3 days Design Phase
Scripts

CE-202L: Software Engineering Lab 6

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

8. Review Test Plan and Activity 7 •Test Manager 2 days Design Phase
Attachments •Test Leader
•Tester E
Check that System is Activity 8 •Tester E, A and B 1 days Design Phase
Ready to be tested
10. Add Design Activity 9 •Test Leader 1 days Design Phase
Documents to CMS •Tester E, A and B
(Milestone)

Step by Step Create Gantt Chart of System Testing Plan

Adding Task:

 Write the name of each task in the spreadsheet using the column “Task Name”
 Write the duration in days of each task in the spreadsheet using the column
“Duration”
 Group the tasks by the Phase according to the table of tasks shown before, and add a
group that encloses the phases named “System Testing Plan MCY-ADTT-ST-2002-
01” this will represent the plan as a whole
 Write the predecessors of each task in the spreadsheet using the column
“Predecessors” (If you can’t see the column, try to expand the vertical bar that
divides the spreadsheet to the Gantt Chart)
 To convert a Task in a Milestone, just double click the Task and go to the tab
“Advanced” then check the box that says “Mark Task as a Milestone”

Grouping:

 Insert a new task at the beginning that will group everything. Highlight the tasks that
are going to be added as subtasks and use ‘Indent’ option.

CE-202L: Software Engineering Lab 7

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

1.1 Insert new task 1.2 Highlight task

The final result should look like this, now repeat this steps to create the Subgroups that will
represent the phases (Definition and Design).

1.3 Create Group

 Insert a new task at the beginning of the definition tasks. Highlight the tasks that are
going to be added as subtasks.

2.1 Insert new task 2.2 Highlight task

CE-202L: Software Engineering Lab 8

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

The final result should look like this, now repeat this steps to create the Subgroup that will
represent the phase “Design

2.3 Create Group

 Insert a new task at the beginning of the Design tasks. Highlight the tasks that are
going to be added as subtasks in the design phase and then Click on the option
‘Indent’

CE-202L: Software Engineering Lab 9

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

3.1 Insert new task 3.2 Highlight tasks

The final result should look like this

CE-202L: Software Engineering Lab 10

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

3.3 Create Group

Add Resource:

 Got to the view “Resource Sheet”

 Add the necessary resources to the “Resources Sheet”, we are going to use only the
Name, Initials and Standard Rate in $/hr. The resources are going to be taken from the
table showed at the beginning of the example, more specifically from the column
“Responsibilities”
 Now, with the Resources already register in the project file, go back to the View
“Gantt Chart”

Assign Resources:

 Double click the task you want to link to resources available in the “Resource Sheet”
 Then got to the Tab “Resources” and look up the resources you want to relate to the
activity (For the example let’s keep the amount of effort of each Resources as 100%,

CE-202L: Software Engineering Lab 11

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

Leveling Resources won’t be covered in this tutorial), finally Click the “Ok” button to
finish the assignment.
 Repeat steps 1 and 2 for the rest of the tasks.

Insert more Column:

 We can show more information, related to the tasks, in the spreadsheet, one column
that might be of general interest is the cost, to do this first perform a Right Click on
top of the spread sheet (Specifically In the titles of the Columns), a pop-up menu
should appear showing several options, chose the one that says “Insert Column”
 2. Then lookup the column named “Cost” and then press the “Ok” button

As explained before, you can add and hide columns from the Spread sheet, this lets you show
exactly what the people needs to see, below is a view with selected fields: Name, Cost,
Duration, Resource initials and Start Date. The reader is welcome to experiment with this
features and to explore more views that are offered by MS Project, such as resources usage,
cost reports, etc.

CE-202L: Software Engineering Lab 12

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

CE-202L: Software Engineering Lab 13

Lab # 1: Creating Gantt Chart & PERT Chart Using “MS PROJECT” SSUET/QR/114

Exercise:

Create Gantt Chart and Network Diagram in Microsoft Project with above mention projects.
 Social website like (Facebook, Twitteretc.)
 Hospital Management System
 Faculty Management System

CE-202L: Software Engineering Lab 14

 Lab #2: Introduction to Rational Rose Software and UML Diagrams. SSUET/QR/114

Lab # 2

Objective: Demonstrate Unified Modeling Language Diagrams And

“Rational Rose”
 Introduction to Rational Rose Software
 Getting started with Rational Rose

Brief Introduction to Rational Rose Development Software

This manual provides introduction and concept tutorial to help you become familiar with
Rational Rose Software. This manual is intended to help you using the main features of the
development tool.
ROSE = Rational Object Oriented Software Engineering

Rational Rose is a set of visual modeling tools for development of object oriented software.

Visual Modeling is the process of graphically depicting the system to be developed:

 Presenting essential details
 Filtering out non-essential details
 Viewing the system from different perspective

Modeling can be useful at any point in the application development process.

Initial Design Work (Requirement Analysis and Definition)
 Use Cases
 Class Diagrams
 Sequence Diagram

Rose Enterprise

Supports multiple languages, including VC++, VB, Java, COBRA.

Rose GUI
 Standard Toolbar
 Diagram Toolbox
 Browser
 Diagram Window
 Documentation Window
 Specifications
 Log Window
Getting Started with Rational Rose Development Software
Click on Start, Programs, Rational Suit Development, and then on Rational Rose 2000
Enterprise Edition (not the one that has the arrow next to it).

CE-202L: Software Engineering Lab 15

 Lab #2: Introduction to Rational Rose Software and UML Diagrams. SSUET/QR/114

You will now see a window appearing that says “Create New Model”. This is for working
with Java, Oracle, and VB, just press “Cancel”.
Next you see the main window called “Rational Rose [untitled]” and a smaller window within
it called “Class Diagram: Logic View/ Main”. The First diagram you will be working on is a
use case diagram.

Toolbar
The standard toolbar is displayed directly under the menu bar, along the top of the application
window. This toolbar is independent of the open diagram window.
The following icons are available for use on the standard toolbar, independent of the open
diagram window.

Standard Toolbar

Create New Model

Clicking the New File icon creates a new model.

Open Existing Model

Clicking the Open Model icon from the toolbar opens the Load Model dialog box. You can
open a model from anywhere within the design.
Create and Open icons: If you have a model open when you click either the Create or Open
icon, you are asked to save your current model. Clicking No discards all changes since your
last save. Clicking Yes saves your changes and opens a new model, or displays the Load Model
dialog box automatically.

Save Model or Log

Clicking the Save Model icon opens the Save Model to dialog box. Enter a new file name.
After the model is named and saved, clicking this icon automatically saves your changes to the
current model without displaying the dialog box. This will also save the log if the log window
is open.

Cut
Clicking the Cut icon removes icons from your model. Element(s) must be selected to activate
the icon. Cutting an element will also cut associated relationships. You can cut multiple
selected items.

Copy
Clicking the Copy icon copies an element to a new location on the same model, or to a new
model, without affecting the original model.

Paste
Clicking the Paste icon pastes a previously cut or copied element to the clipboard onto another
location.

CE-202L: Software Engineering Lab 16

 Lab #2: Introduction to Rational Rose Software and UML Diagrams. SSUET/QR/114

Print Diagrams
Clicking the Print icon prints diagrams to the default printer.

Context Sensitive Help

Clicking the Context Sensitive Help icon makes all topics covered in the on-line help material
available. Click on this icon, drag to the item and release the mouse.

View Documentation
Clicking the View Documentation icon displays the documentation window on the diagram.

Browse Class Diagram

Clicking the Browse Class Diagram icon opens the Select Class Diagram dialog box.

Browse Interaction Diagram

Clicking the Browse Interaction Diagram icon opens the Select Interaction Diagram dialog
box.

Browse Component Diagram

Clicking the Browse Component Diagram icon opens the Select Component Diagram
dialog box.

Browse State Machine Diagram

Clicking the Browse State Machine Diagram icon opens the Select Statechart Diagram or
Activity Diagram dialog box.

Browse Deployment Diagram

Clicking the Browse Deployment Diagram icon opens the Deployment Diagram dialog box.

Browse Use-Case Diagram

Clicking the Browse Use-Case Diagram icon opens the Selected Use Case Diagram dialog
box.

Browse Parent
Clicking the Browse Parent icon displays the "parent" of the selected diagram or specification.
If you have a specification selected, the specification for the parent of the "named" item is
displayed.

Browse Previous Diagram

Clicking the Browse Previous Diagram icon displays the last displayed diagram.

Zoom In
Clicking the Zoom In icon magnifies the current diagram to view an area in detail.

CE-202L: Software Engineering Lab 17

 Lab #2: Introduction to Rational Rose Software and UML Diagrams. SSUET/QR/114

Zoom Out
Clicking the Zoom Out icon minimizes the current diagram allowing you to "pull back" to
view more information.

Fit in Window
Clicking the Fit In Window icon centers and displays any diagram within the limits of the
window. This command changes the zoom factor so that the entire diagram shows.

Undo Fit in Window

Clicking the Undo Fit in Window icon undoes the actions performed on the previous Fit In
Window command.
Toolbar for Class Diagrams

Any element of a diagram can be created by placing the mouse pointer over a Tool in the Toolbar and Drag &
Drop over the diagram canvas.

Text Realization
Note Interface
Pointer Class Association Generalization
Note Anchor Package

Dependency or instantiation
Association
class

CE-202L: Software Engineering Lab 18

 Lab #2: Introduction to Rational Rose Software and UML Diagrams. SSUET/QR/114

User Interface for Modeling UML Diagrams

Diagram Toolbox

Bowser
Window
Diagram Window
Your Model is
Really in
HERE!

Documentation Window

Log Window

Exercise:

Create Use Case Diagrams

for the following systems:
 Social website like (Facebook, Twitteretc.)
 Hospital Management System
 Faculty Management System

CE-202L: Software Engineering Lab 19

 Lab #3: An Overview of Modeling Use Case diagram using Rational Rose SSUET/QR/114

Lab # 3

Objective: Illustrate Use Case Diagram Using “Rational Rose”

 An Overview of Modeling Use Case Diagram
 Creating a Use Case Diagram

An Overview of Modeling Use Case Diagram

Use-case diagrams present a high-level view of system usage as viewed from an outsider's
(actor's) perspective.

These diagrams show the functionality of a system or a class and how the system interacts with
the outside world.

Use-case diagrams can be used during analysis to capture the system requirements and to
understand how the system should work.

During the design phase, use-case diagrams specify the behavior of the system as implemented.

Creating a Use Case diagram:

1. In the Window on the left side click on the "+" (plus) sign next to "Use Case View"
2. In the same window, double click on the icon next to "Main". This will open a blank
Use Case diagram called "Main"

Adding an Actor

1. To create an Actor, click on the stick figure icon located on the toolbar in the middle of
the screen. Then click on the diagram to place the Actor.
2. Open the Actor's specification by right clicking on the Actor (in the diagram) and select
"Specification" from the pop-up menu. Fill in applicable fields. The specification can
also be brought up by double clicking on the actor.

Example: Add an Actor called "Elevator Rider"

Adding a Use Case

CE-202L: Software Engineering Lab 20

 Lab #3: An Overview of Modeling Use Case diagram using Rational Rose SSUET/QR/114

1. In the toolbar, click on the oval shaped icon then click on the open diagram to place the
use case.
2. Bring up the specification and fill in appropriate fields.

Example: Add a Use Case called "Ride Elevator"

Adding an Association

1. Click on the association icon (a solid line with no arrowheads). Then, click on the actor
first then the use case. An association (line) will be drawn between the two.

NOTE: Adding additional buttons to your toolbar:

Using the Main Menu Bar (top of the screen) follow these steps:

a. Click on "Tools"
b. Click on "Options"
c. Click on the "Toolbars" tab Note that different diagrams have different toolbars
associated with them. You can add/remove buttons for each type of tools bar.
d. Click on the button with "..." in it next to the name of the diagram toolbar you
want to alter.
e. The window that appears will allow you to add/remove buttons.

Use Case Diagram for Flight Reservation System

Exercise:
Q1: Draw a use case diagram of the stated scenario: A user has all the rights of login to a
catalog management website browse the catalog and view products. Similarly, the
administrator of that website has all the rights that a user has but in addition to that

CE-202L: Software Engineering Lab 21

 Lab #3: An Overview of Modeling Use Case diagram using Rational Rose SSUET/QR/114

administrator has other rights too that include Logout, create product, edit product and to
delete product. Find out the actors and relation of actor or actors to the use cases.

Note: Show the relevant association of actors with the use cases.

State the Actors and Use Cases of the above stated scenario and describe briefly the
dependencies between them.

Q2: At the start of each semester a student can request a prospectus containing a course list.
Information about a course is provided, such as the tutor, department and pre-requisites.
The new system will allow students to create a schedule, then select four courses. Each
student chooses two others in case their first choices become full or are cancelled. No
course can have more than 10 students. No course can have less than 3 students or it will
be cancelled. This will be the same functionality as available to other internal users of
the system. When registration is complete, the registration system sends a message to the
billing system to send out a bill to the student.
Tutors use the system to find which classes they are teaching and who the students are.
The
registrar will administer the system.
For a period at the beginning of the semester the student can change their schedule.
Students must be allowed to access the system during this time to add or delete courses.

Identify the Actors, Use Cases and Association of the given scenario.

Q3: For the hospital Management System, a general example is shown below.

The Actors and their use cases are identified as: -

Task 1: Receptionist--Interact with Visitors; Give appointments to Medical

Representatives, Revert to Phone Queries, Handles Patient Registration.

Task 2: Doctors--Give prescription to Patient, Do Operation, and Review Patients

health.

Task 3: Nurse--Give Medicine to Patient, Coordinate with Doctors in Operation,

Report to doctors, Monitors Patients health.

Task 4: Patient--Interact with Doctor, Follow Doctor Instructions, Pay Bills.

Task 5: Billing Section--Patient Billing, Discharge Billing, give salaries to Nurse,

Staff and Doctors, Maintain Tax Records.

Here for the Billing Section we have considered Patient Billing and Discharge
billing as separate, as the Patient might not be admitted and is charged for only
counseling.

CE-202L: Software Engineering Lab 22

 Lab #3: An Overview of Modeling Use Case diagram using Rational Rose SSUET/QR/114

Draw the Use Case Diagram for the above scenario.

CE-202L: Software Engineering Lab 23

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

Lab # 4
Objective: Illustrate Sequence Diagram Using “Rational Rose”

 Creating a Sequence Diagram using Collaboration Diagram on Rational Rose

 Getting familiar with sequence diagram symbols and notations
 Steps for creating a Sequence Diagram on Rational Rose

Creating a Sequence Diagram using Collaboration Diagram

1. Make sure the Collaboration diagram is the active diagram. (If you've been doing the
examples in order, it should already be active)
2. Hit the "F5" key (the single key labeled 'F5').

Rose generates the Sequence diagram based on the Collaboration diagram. The reverse can
be done as well. A Collaboration diagram can be generated from a Sequence diagram by
hitting the 'F5' key.

The sequence diagram looks like this:

Getting familiar with sequence diagram symbols and notations

A sequence diagram in a Unified Modeling Language (UML) is a kind of interaction

diagram that shows how processes operate with one another and in what order.

CE-202L: Software Engineering Lab 24

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

Sequence diagrams are sometimes called event diagrams, event scenarios, and timing
diagrams.

Basic Sequence Diagram Symbols and Notations

Class roles

Class roles describe the way an object will behave in context. Use the UML object symbol to
illustrate class roles, but don't list object attributes.

Activation

Activation boxes represent the time an object needs to complete a task.

Messages

Messages are arrows that represent communication between objects. Use half-arrowed lines
to represent asynchronous messages. Asynchronous messages are sent from an object that
will not wait for a response from the receiver before continuing its tasks.

CE-202L: Software Engineering Lab 25

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

Various message types for Sequence and Collaboration diagrams

Lifelines
Lifelines are vertical dashed lines that indicate the object's presence over time.

Loops
A repetition or loop within a sequence diagram is depicted as a rectangle. Place the condition
for exiting the loop at the bottom left corner in square brackets [].

CE-202L: Software Engineering Lab 26

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

Destroying Objects
Objects can be terminated early using an arrow labeled "<< destroy >>" that points to an X.

Steps for creating a Sequence Diagram on Rational Rose

CE-202L: Software Engineering Lab 27

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

CE-202L: Software Engineering Lab 28

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

CE-202L: Software Engineering Lab 29

 Lab #4: Creating Sequence Diagram using Rational Rose Software SSUET/QR/114

Exercise

Q1: Model a Sequence Diagram for login operation.

 The new customer will enter his/her user id& password and then click on login button
on the login.aspx Webpage.
 The Session Manager gets the user id and user details from Customer class instance and
verifies the user id and password.
 If user details are invalid customer will not be allowed to login and an appropriate error
message will be displayed, otherwise the customer is logged in.

Q2: Model a Sequence Diagram for the Library Management System.

There is a volume of students renting books from the library. To regulate this, it’s
essential for students to have online access to the record of available books. This system
sequence diagram example is just made for this purpose. Also, the system will also
inform the student if they exceeded the allotted time for renting a book and a penalty
will apply accordingly.

CE-202L: Software Engineering Lab 30

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Lab # 5
Objective: Apply Web Development Framework Using “Dreamweaver CS 5”
1. To understand Web Development Technologies i.e. Open and Close Source
Technologies.
2. To understand Client - Server Architecture
3. To understand the Software Architecture or Architecture of a Web Based Application.
4. To learn Web Development by making a web page for User Side Scripting using
“HTML” for Login purpose.

Theory:
In this lab we are going to understand Web development (open/ close source technologies to be
used) its architecture and developing a frame based website (understanding html tags Frame set and
Table to form a form object Input type.

Objective No. 1:
To understand Web Development Technologies i.e. Open and Close Source Technologies.

Web Development Technologies:

There are two sources of web development technologies:
 OPEN SOURCE
 CLOSED SOURCE

Open Source Technologies:

Open Source Software’s are freeware i.e. that software that are freely available in market; they do
not require a license or the license is available to everyone. These are in reach of everyone at no
cost and for any intent. This software can be modified or altered as per requirement of the user
because their source codes are open to the public.
The open source software that we are using in this lab is

XAMPP:
Xampp is an open source and free software. It is actually a cross platform web server package.
XAMPP is short for:

X: Cross Platform
A: APACHE Server
M: MySQL
P: PHP
P: Perl

It consists of the following:

CE-202L: Software Engineering Lab 31

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

 A Web Server “APACHE”

 Database “MySQL”
 Interpreter for scripts “Adobe Dreamweaver”
 Interpreter for scripts in PHP and Perl Programming Language

APACHE:
APACHE is a public domain open source Web server. Apache is generally recognized as the world's
most popular Web server (HTTP server), originally designed for UNIX environments. Apache
HTTP Server is an established standard in the online distribution of website services, which gave
the initial boost for the expansion of the World Wide Web.
There is a great amount of modules created especially for the Apache server, which support
various scripts and allow dynamic content to be run on the server.
Checking the service of XAMPP:
 Open your web browser and type http://localhost, a XAMPP page will appear
 If the page does not open, go to the Xampp folder, go to xampp_control and start Apache
and MySQL if not running
 Then type http://localhost in your browser
 Xampp page will be loaded
Checking the location of htdocs:

 Go to the drive where you installed Xampp, then go to Xampp and then look for the folder
htdocs
 This is the folder where you will be having all of your work

Creating a Folder:
 Go to htdocs in Xampp
 Create a new folder named “My Website”
 All your work will be saved in this new folder
Objective No. 2:
To learn about the Software Architecture or Architecture of a Web Based Application.

What is Architecture?
Architecture can be defined as the designing of a model with all of its required components.
Architecture is the fundamental organization of a system embodied in its components, their
relationships to each other, and to the environment, and the principles guiding its design and
evolution. Every system has architecture, whether known or not. However, it may lack an
architectural description.

Software Architecture:
Software Architecture is the designing of a software model or a web based application using certain
notations and symbols.
Following are the general steps to follow for developing Architecture for Solution Domain:

CE-202L: Software Engineering Lab 32

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

 Move from problem domain to solution domain

 Put the system in context, draw context model
 System boundary — what’s in, what’s out
 Draft overall architecture from by decomposing the system into main modules and show
data flow between them (an information view)
 Do this for the system box in the context model
 Show also main data flow in and out of system
 Divide the data storage logical storage modules, do not assume or decide at this stage what
goes in the same database
 Be clear with the notation and symbols you use Provide a clear legend for your diagram

Diagram below depicts the Web Application Architecture Data work flow
The picture below shows the server side scripting and user side scripting:

Step 1: The user enters a new Web page address or clicks a link that requires a new Web page from
the Web server.

Step 2: The Web browser connects the Web server and sends a HTTP GET command with the path
name of the requested Web page.

Step 3: The Web server fetches the HTML document of the requested page or asks an application
server to generate the HTML document.

Step 4: The Server-side scripting step: The Web server scans the HTML document for any server-
side script code embedded in the document. The Web server will remove the embedded script code
and execute it.

When the Web server executes the embedded script code, it will provide many host objects
representing the server host environment. Through those host objects, server-side script code can
easily access the carrying HTML document, the server file system, any databases, and networked
computers.

Usually, server-side script code will update the carrying HTML document with dynamic data
resulted from its computations.

At the end of the server-side script process step, the updated HTML document is ready to be sent
back the client - the Web browser.

Objective No. 3:
To learn Web Development by making a web page for User side Scripting using “HTML” for
Login purpose.
From the idea software architecture, we will now create a login form using “HTML Scripting.”
The steps for the creation of a “Login Web Page” are given below:
Steps:

CE-202L: Software Engineering Lab 33

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

 Open Dreamweaver from the shortcut on Desktop

 This will open a page like this

Select PHP from Create New, which will open the following page

CE-202L: Software Engineering Lab 34

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Click on split to have both views (i.e. the code view and the design view)

In HTML the code is written between the beginning and ending tags of body

We have to create a Login Form, so first a form will be inserted

Click insert →Form → Form, this will open a new window, click OK to insert the form

CE-202L: Software Engineering Lab 35

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

The inserted form will look like this

<form id="form1" name="form1" method="get" action="" >

</form>

Now insert a table for the login form from insert → table, Choose 4 rows and 3 columns
for the table

CE-202L: Software Engineering Lab 36

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

This will insert a table like this

Now naming the form

CE-202L: Software Engineering Lab 37

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Now filling the username and password fields

Now making text field for the user to type his username.
Insert→ Form→ Text Field

CE-202L: Software Engineering Lab 38

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Keep ID be uname for username

The inserted text field will look like this

Now repeat the previous step for password

Insert→ Form→ Text Field
Keep ID be pswd for password. Mark password in properties pane to make it protected

CE-202L: Software Engineering Lab 39

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

The form will now look like this

Adding a submit button

Insert→ Form→ Button

CE-202L: Software Engineering Lab 40

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Name the button “submit”

CE-202L: Software Engineering Lab 41

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

The inserted button will look like this

Now merging the first row, select the

first row and merge it from properties

After merging

Now adding background, changing text color and thickening the borders of the form
using Page Properties from the properties pane. Also changing the font of the text.

CE-202L: Software Engineering Lab 42

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

CE-202L: Software Engineering Lab 43

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Now create a new page

File →New →HTML

CE-202L: Software Engineering Lab 44

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Now write “WELCOME TO MY PAGE” in between the body tags

Adding background picture and changing the font from the properties pane

CE-202L: Software Engineering Lab 45

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Now save the two HTML documents by the names “index.php” and “submit.php” in
the folder MyWebsite in htdocs

To link the two documents, the action of the form will be given the destination of
submit.html

Browser Output:
Running it on the browser with the link

CE-202L: Software Engineering Lab 46

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

http://localhost/MyWebsite

Typing username and password and clicking the submit button will give

Now add some html tags for headings and paragraph writing:
Html Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Html Paragraph
The HTML <p> element defines a paragraph.

CE-202L: Software Engineering Lab 47

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Example:

Output:

Html Lists
HTML lists allow web developers to group a set of related items in lists.

 Adding a list
Format  list unordered list/ordered list
A list will appear like this

CE-202L: Software Engineering Lab 48

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

Exercise:

1) To implement the given form.

2) Explore and implement the other forms of lists (ordered list and definition list).

CE-202L: Software Engineering Lab 49

 Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114

3) Explore and implement the Email link tag from the insert menu. Insert  Emaillink.

CE-202L: Software Engineering Lab 50

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Lab # 6

Objective: Apply Web Development Client Side Scripting HTML, Login

Form, CSS and Java Scripting
1. To learn about CSS in Web Development and to get aware of Java Scripting.
2. To Apply CSS in Web Development and to learn more about adding designs to web
pages.
3. To Apply Validation to the LOGIN FORM using JAVA Scripting.

Theory:
This lab is mainly concerned with the learning about applying CSS rules to web pages in web
development. This lab also deals with Applying Validation to the login form with the help of Java
Scripting using Tag Inspector.

Objective No. 1:
To learn about CSS in Web Development and to get aware of Java Scripting.

CSS:
CSS stands for
C: Cascading
S: Style
S: Sheets

CSS (Cascading Style Sheets) is used to style HTML elements. Cascading Style Sheets (CSS) is a
simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS
can be added to HTML in the following ways:

 Inline - using the style attribute in HTML elements

 Internal - using the <style> element in the <head> section
 External - using an external CSS file

CE-202L: Software Engineering Lab 51

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Syntax:

CSS has a simple syntax and uses a number of English keywords to specify the names of various
style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and
a declaration block.

Selectors:
In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match
expression.

Declaration-Block:
A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a
property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must
be inserted to separate each declaration.

Validation Using Java Scripting:

JavaScript, provides a way to validate form's data on the client's computer before sending it to the
web server. Form validation generally performs two functions.

 Basic Validation - First of all, the form must be checked to make sure data was entered into
each form field that required it. This would need just loop through each field in the form
and check for data.
 Data Format Validation - Secondly, the data that is entered must be checked for correct
form and value. This would need to put more logic to test correctness of data.

Form data that typically are checked by a JavaScript could be:

 Required fields
 Valid user name
 Valid password
 Valid e-mail address
 Valid phone number

Forms validation on the client-side is essential it saves time and bandwidth, and gives more options
to point out to the user where they’ve gone wrong in filling out the form. It does not mean that
server-side validation is not needed. People who visit the site may use an old browser or have
JavaScript disabled, which will break client-only validation. Client and server-side validation
complement each other, and as such, they really shouldn’t be used independently.

CE-202L: Software Engineering Lab 52

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Objective No. 2:
To Apply CSS in Web Development and to learn more about adding designs to web pages. From
previous lab, we have learnt to make a login form. Here are certain steps that are followed to
apply CSS
Steps:
Step 1. Create a LOGIN FORM using text fields and labels. Observe the effect of
placeholders on the browser.

Step 2. Now click on CSS Styles on the right side panel

Step 3. Then click on the option of New CSS Rule under the heading of Properties

CE-202L: Software Engineering Lab 53

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Step 4. A new window will open - Enter the type and name of your selector. Also choose the
rule definition. Clicking on OK will open a new window which will save the new CSS file

CE-202L: Software Engineering Lab 54

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Step 5. This Saves the style sheet and will attach on index page.

Step6. Now let’s explore some important attributes of CSS for alignment.

CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

Example:

Output:

CE-202L: Software Engineering Lab 55

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

CSS PADDING
The CSS padding properties are used to generate space around an element's content, inside of
any defined borders.
CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left

Step 7. Apply CSS Rules as per your choice

Here, we have implemented external css by using selectors as input types, body *(html tag) and
“class” : form . .

CE-202L: Software Engineering Lab 56

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

Step 8. After applying CSS, the form will look like this:

CE-202L: Software Engineering Lab 57

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

.CSS File:

This image show how the style.css file attach in index.php file

<link href="style.css" rel="stylesheet" type="text/css" />

and in the body tag we use div tag and call the class form style in index.php

CE-202L: Software Engineering Lab 58

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

<div class=login> .................... </div>

Objective No. 3:
To Apply Validation to the LOGIN FORM using JAVA Scripting.
Steps:
1. Select the form
2. Then go to Window → Tag Inspector → Behaviors → Add Behavior

CE-202L: Software Engineering Lab 59

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

3. Now choose Validate form.

4.

This will open a new window; mark all the given fields to be required and the form will validated.

CE-202L: Software Engineering Lab 60

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

http://localhost//MyWebsite/index.php
Entering without the required fields filled

Exercise:

CE-202L: Software Engineering Lab 61

 Lab #6: Web development Client Side Scripting HTML, Login Form, CSS and Java SSUET/QR/114
Scripting

The content for the above webpage was taken

from https://news.gatech.edu/features/2021/10/wildlife-home-campus

Use the following in the external CSS file:

1. Use font properties like (font-size, font-family) and text properties like (color, text-
decoration).
2. Set the background image in the top right position as shown in the above web page
using the background properties (background-image, background-repeat, background-
position).
3. Create two hyperlinks in the above webpage.
4. Add a profile picture in your portfolio page and apply CSS rules on text and
backgrounds. Set the alignment of text and image accordingly.

CE-202L: Software Engineering Lab 62

CE-202: Software Engineering SSUET/QR/114

Laboratory Exercise 07
Open-Ended Lab
Title:

1. Objective:
Select any project management topic like Hospital management
system, Library etc. and utilize Gantt Chart, Network Diagram, Use
Case Diagram. Create Login Form and design a webpage which
incorporates the pictures of above diagrams & apply proper CSS.

2. Hardware/Software Required

3. Diagram

4. Methodology

5. Observation Table

6. Results

____________________________________________________________________________
______
Department of Computer Engineering
Sir Syed University of Engineering & Technology, Karachi
CE-202: Software Engineering SSUET/QR/114

7. Conclusion

Laboratory Exercise 14
Open-Ended Lab
Title:

1. Objective:

2. Hardware/Software Required

3. Diagram

4. Methodology

5. Observation Table

____________________________________________________________________________
______
Department of Computer Engineering
Sir Syed University of Engineering & Technology, Karachi
CE-202: Software Engineering SSUET/QR/114

6. Results

7. Conclusion

____________________________________________________________________________
______
Department of Computer Engineering
Sir Syed University of Engineering & Technology, Karachi
 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

Lab # 8
Objective: Implement Server Site Scripting On MY SQL and

1. To understand the concept of Database and to get to know about MySQL.

2. To study the relational logical structure and to get an idea of Design and Data Entry Mode.
3. To design a Database in XAMPP (MySQL) and insert a table that holds fields and records
of Login information.

Theory:
This lab is mainly concerned with the learning of the concept of Database and to get aware of the
Database of XAMPP i.e. MySQL. This lab also deals with the knowledge of relational logical structure
and different modes of backend database. In this lab we will also design a database using MySQL.

Objective #1:
To understand the concept of Database and to get to know about MySQL.

Database:
Database is regarded as software which is used to store certain kind of information. It follows a
Relational Structure for Data Information Storage. Often abbreviated as DB. Database can be defined
as a collection of information organized in such a way that a computer program can quickly select
desired pieces of data. For e.g. electronic billing system.

Traditional databases are organized by fields, records, and files.

Field: A field is a single piece of information.

Record: A record is one complete set of fields.

File: A file is a collection of records.

Database Management System:

To access information from a database, you need a database management system (DBMS). This is a
collection of programs that enables you to enter, organize, and select data in a database.

Increasingly, the term database is used as shorthand for database management system.
CE-202L: Software Engineering Lab 64
 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

MySQL:

MySQL is the database of XAMPP. Specialized database software, like MySQL, are just programs that
lets you store and retrieve the data as efficiently as possible. MySQL is the most popular database
system used with PHP. MySQL is a database system used on the web and it runs on a server as well.
It is ideal for both small and large applications as it is very fast, reliable, and easy to use. MySQL
supports standard SQL. MySQL compiles on a number of platforms and is free to download and use.
MySQL is developed, distributed, and supported by Oracle Corporation. The data in MySQL is stored
in tables. A table is a collection of related data, and it consists of columns and rows. Databases are
useful when storing information categorically.

Why MySQL:

One great thing about MySQL is that it can be scaled down to support embedded database applications.
Maybe it is because of this many people think that MySQL can only handle small and medium-sized
systems. The truth is that MySQL is the de-facto standard database system for web sites with HUGE
volumes of both data and end users (like Friendster, Yahoo, and Google). PHP combined with MySQL
are cross-platform (you can develop in Windows and serve on a Unix platform)

Objective #2:
To study the relational logical structure and to get an idea of Design and Data Entry Mode. Since
Databases follow relational structure. A relational structure can be represented by a cylinder:

Relational Logical Structure:

STUDEN STUDEN STUDENT

T1 T2 3

LOGIN EXTRA
ACADEMIC CURRICUL
INFO S AR
ACTIVITIES

A user can create his database and can make amendments in it. After creating a database, the user can
insert tables for different types of data or information as shown in the above picture. The most

CE-202L: Software Engineering Lab 65

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

important point in making a database is to avoid redundancy i.e. to avoid multiple existence of same
information that can cause inconsistency. The databases nowadays have the facility to control
redundancy and the software that help in the creation of a database also facilitate the user by providing
direct control over redundancy.

Example of Design Mode:

Database Name: webapp

Table Name: login_info

FIELD 1 FIELD 2 FIELD 3

Login_id uname pwd

Type: INT Type: VARCHAR Type: VARCHAR
Length: 20 Length: 50 Length: 50
Constraint: Primary Key Constraint: Not NULL Unique Constraint: Not NULL
Extras: Auto Increment

Note: Primary Key is inherited with the properties of Not NULL and Unique.

Example Of Data Entry Mode:

login_id uname pwd

1 bushra 1234
2 farah 123

In the table

Columns are regarded as Fields and

Rows are regarded as Records.

Objective #3:
To design a Database in XAMPP (MySQL) and insert a table that holds fields and
records of Login information.

CE-202L: Software Engineering Lab 66

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

STEPS:

1. Open your browser and type localhost /xampp

Xampp window will appear

2. Now click on phpMyAdmin in Tools on the very left of the page

3. This will open a new window of php MyAdmin for creating a database
CE-202L: Software Engineering Lab 67
 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

4. Click on Databases to create a database

5. Create a database with name WEBAPP. Now click on webapp from the left of the page
6. This will take you to “Create table” asking for the name of your table a number of columns.
Write the name of table and the number of columns and click on Go.

CE-202L: Software Engineering Lab 68

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

7. Fill the fields and click on Save.

Inserting Rows in Table

1. Insert record in the table using the option of Insert from the top menu

2. This will open a new page for filling records in the specified fields. Fill up the fields and click
on Go.

3. Now click on Browse on the top menu to see the output

Objective#4:
Introduction to GitHub
What is Github?
GitHub is a collaboration platform that uses Git for versioning. GitHub is a popular place to share
and contribute to open-source software.
What is a repository? A repository is a project containing files and folders. A repository tracks
versions of files and folders.
1) First, Create your account on github

CE-202L: Software Engineering Lab 69

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

2) Create a New Repository

CE-202L: Software Engineering Lab 70

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

3) Pushing code to repository

Create a new file directly or push your existing folder

Install the git with the following link

CE-202L: Software Engineering Lab 71
 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

https://gitforwindows.org/
4) Open your Git Bash
Git Bash can be downloaded in here ( https://git-scm.com/downloads), and it is a shell used to
interface with the operating system which follows the UNIX command.

5) Setting path
Go to the folder, right click and click git bash here

It will open a gitbash window like this

6) Initialize the git repository

Use git init to initialize the repository. It is used to create a new empty repository or
directory consisting of files' with the hidden directory. '.git' is created at the top level of
your project, which places all of the revision information in one place.

CE-202L: Software Engineering Lab 72

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

7) Add the file to the new local repository

Use git add . in your bash to add all the files to the given folder.
Use git status in your bash to view all the files which are going to be staged to the first
commit.

8) Commit the files staged in your local repository by writing a commit message
You can create a commit message by git commit -m 'your message', which adds the
change to the local repository.
git commit uses '-m' as a flag for a message to set the commits with the content where the
full description is included.

CE-202L: Software Engineering Lab 73

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

9) Copy your remote repository's URL from GitHubThe HTTPS or URL is copied from
the given GitHub account, which is the place of the remote repository.

10) Add the URL copied, which is your remote repository to where your local content
from your repository is pushed
git remote add origin 'your_url_name'
In the above code, The 'origin' is the remote name, and the remote URL is

11) Push the code in your local repository to GitHub

git push -u origin master is used for pushing local content to GitHub.
CE-202L: Software Engineering Lab 74
 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

Cloning a repository
When you create a repository on GitHub.com, it exists as a remote repository. You can clone
your repository to create a local copy on your computer and sync between the two locations.
1. On GitHub.com, navigate to the main page of the repository.
2. Above the list of files, click Code.

Copy the URL for the repository.

 To clone the repository using HTTPS, under "HTTPS", click

CE-202L: Software Engineering Lab 75

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

1. Open Git Bash.

2. Change the current working directory to the location where you want the cloned
directory.
3. Type git clone, and then paste the URL you copied earlier.

CREATING A NEW BRANCH

Once the repo is cloned, you need to do two things:

1. Create a new branch by issuing the command:

git checkout -b new_branch

CE-202L: Software Engineering Lab 76

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

1. Create a new remote for the upstream repo with the command:

git remote add upstream https://github.com/kedark3/demo

In this case, "upstream repo" refers to the original repo you created your fork from.

Now you can make changes to the code. The following code creates a new branch, makes an
arbitrary change, and pushes it to new_branch:
Once you push the changes to your repo, the Compare & pull request button will appear in
GitHub.

Click it and you'll be taken to this screen:

CE-202L: Software Engineering Lab 77

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

Open a pull request by clicking the Create pull request button. This allows the repo's
maintainers to review your contribution. From here, they can merge it if it is good, or they may
ask you to make some changes.

SUMMARY
In summary, if you want to contribute to a project, the simplest way is to:

1. Find a project you want to contribute to

2. Fork it
3. Clone it to your local system
4. Make a new branch
5. Make your changes
6. Push it back to your repo
7. Click the Compare & pull request button
8. Click Create pull request to open a new pull request

Exercise:
The content for the given webpage was taken from
https://www.sqlservertutorial.net/sql-server-sample-database/

 The following illustrates the BikeStores database diagram:

CE-202L: Software Engineering Lab 78

 Lab #8: Server Site Scripting on MY SQL SSUET/QR/114

The BikeStores sample database has two schemas sales and production, and these schemas have
nine tables.

Create the given tables with the mentioned fields using XAMPP Server.

 Create your github user account, fork and clone a repository of your group, edit the file,
push the code and pull the request in your remote repository.

CE-202L: Software Engineering Lab 79

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

Lab # 9

Objective: Show Authentication using PHP, Query, Database.

1. To understand the concept of Server Side Scripting and PHP.
2. To learn to link PHP with MySQL Database.
3. To design a login form and a database (store record) and link them to check if
information entered is authentic (as stored in database).

Theory:
This lab is mainly concerned with the learning of the concept of Server Side Scripting in PHP and
to get aware of the codes and syntax to link PHP with MySQL database. This lab also deals with
the practical implementation of the already discussed concepts. In this lab we will make a Login
form and design a database to store records and then link them to know if the data entered is
present in the database or not.

Objective #1:
To understand the concept of Server Side Scripting and PHP.

Server-Side Scripting:

Server-side scripting is a web server technology in which a user's request is fulfilled by running
a script directly on the web server to generate dynamic web pages. It is usually used to provide
interactive web sites that interface to databases or other data stores. The primary advantage to
server-side scripting is the ability to highly customize the response based on the user's
requirements, access rights, or queries into data stores.

From security point of view, server-side scripts are never visible to the browser as these scripts
are executes on the server and emit HTML corresponding to user's input to the page.

When the server serves data in a commonly used manner, for example according to the HTTP or
FTPprotocols, users may have their choice of a number of client programs (most modern web
browsers can request and receive data using both of those protocols). In the case of more
specialized applications, programmers may write their own server, client, and communications
protocol that can only be used with one another.

Programs that run on a user's local computer without ever sending or receiving data over a
network are not considered clients, and so the operations of such programs would not be
considered client-side operations but will be called server-side scripts

PHP:
PHP is a widely-used general-purpose scripting language that is especially suited for Web
development and can be embedded into HTML. PHP is an acronym for Hypertext Preprocessor.
It’s a widely-used, open source scripting language. PHP scripts are executed on the server and
PHP can create, open, read, write, and close files on the server.

CE-202L: Software Engineering Lab 80

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

PHP can generate dynamic page content and can collect form data. It can add, delete, and modify
data in your database. It has the ability to restrict users to access some pages on your website. One
of the important features is that PHP can send and receive cookies and can encrypt data.

PHP File:

PHP files can contain text, HTML, CSS, JavaScript, and PHP code. PHP codes are executed on
the server, and the result is returned to the browser as plain HTML. PHP files have extension
".php"

Why PHP:

PHP is easy to learn and runs efficiently on the server side and supports a wide range of
databases. PHP runs on various platforms (Windows, Linux, UNIX, Mac OS X, etc.). PHP is
compatible with almost all servers used today (Apache, IIS, etc.).

Objective #2:
To learn to link PHP with MySQL Database. Before you can get content out of your MySQL
database, you must know how to establish a connection to MySQL from inside a PHP script. To
perform basic queries from within MySQL is very easy.

Let's get started. The first thing to do is connect to the database. The function to connect to
MySQL is called mysql_connect. This function returns a resource which is a pointer to the
database connection. It's also called a database handle, and we'll use it in later functions. Don't
forget to replace your connection details.

Before linking PHP with MySQL Database Adobe Dreamweaver CS6 is configured with
LocalHost

Setting up Dreamweaver

1. Open Dreamweaver and click on the word “Sites”

2. Then select “Manage Sites”

CE-202L: Software Engineering Lab 81

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

The main section we will be working with is the “Servers” window. Click “Servers”. If you
have not configured a server before, this window should be empty. In order to add a server
we need to click on the “plus sign”.

This should bring up a window with “Basic” and “Advanced” options. You don’t have to
change anything on the “Basic” window.

CE-202L: Software Engineering Lab 82

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

When you click on the “Advanced” options, the important setting is the one listed in the
“Test Server” section at the bottom. Make sure that the drop-down menu has “PHP MySQL”
selected and click the “Save” button.

Finally, user will see the newly created server in the “Servers” window. Make sure to
uncheck the box labeled “Remote” and change it to “Testing”. Click “Save” and you have
finished your Dreamweaver and localhost configuration.

CE-202L: Software Engineering Lab 83

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

Submit.php
<?php
session_start();
$uname = $_POST['uname'];
$pwd = $_POST['pswd'];
$_SESSION['usern'] = $uname;
$db_user = 'root';
$db_pass = "";
$db = 'test';//test

$con = mysqli_connect('localhost',$db_user,$db_pass) or die('Unable to connect database');

mysqli_select_db($con,$db) or die('cannot');
$sql= "SELECT * from login where uname = '$uname' AND pwd = '$pwd'";

$result = mysqli_query($con,$sql);

$hashed_password =
'$2y$10$MQU3vDgoN10.JxyJ1m9UQOEqFy.Jg3D8tmHdZUAAkcpGFRwkbbLfi';

echo "Original Password is: ", $password;

echo "\n";

echo "Hashed Password is: ", $hashed_password;

echo "\n";

if (password_verify($password, $hashed_password)) {
echo 'Password is valid!';
} else {
echo 'Invalid password.';
}

$sql= "SELECT * from login where uname = '$uname' AND pwd = '$pwd'";

$result = mysqli_query($con,$sql);

if(mysqli_num_rows($result) > 0 )
{

CE-202L: Software Engineering Lab 84

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

//$result = mysqli_query($con,$sql);
$row=mysqli_fetch_array($result);
{
header('location: menu.php');
}
}
else {
header ('location: exit.php');
}
mysqli_close();
?>
Now the code for menu.php. This will take you to the next page in case of success:

Menu.php:
<?php
session_start();
// FILE CALLED FROM Submit.php IN CASE OF SUCCESS
echo "Welcome User : ";
echo $_SESSION['usern'];

echo "<br>";
echo "Manage User Menu";
echo "<br>";
echo "================";
echo "<br>";
echo "<br>";
?>
<a href="view.php">1. View reports</a>
<br>
<b><a href="updateform.php">2. Update your Password</a><b>
<br>
<a href="insertform.php">3. Create New account</a>
<br>
<a href="delete.php">4. Delete your Account</a>
<br>
<a href="index.php">5. Login</a>
<br>
<a href="exit.php">6. Logout</a>

In case of exit, the following code will be used:

CE-202L: Software Engineering Lab 85

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

Exit.php

<?php
session_start();
// FILE CALLED FROM Submit.php IN CASE OF FAILURE
echo "Login Failure for user: ";
echo $_SESSION['usern'];

echo "<br>";
echo "Click here to Re attemp Login: ";
//session_destroy();
?>

BROWSER OUTPUT:
Running it on the browser with the link

http://localhost/test/index.php

CE-202L: Software Engineering Lab 86

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

CE-202L: Software Engineering Lab 87

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

Exercise:
The flowchart given below is from online-example - Login Process (genmymodel.com)

CE-202L: Software Engineering Lab 88

Lab#9: PHP, Query, Database (Authentication) SSUET/QR/114

Using the above scenario for an Inventory System:

1. Design the form and authenticate the database using Adobe Dreamweaver.
2. Link PHP with MySQL Database

CE-202L: Software Engineering Lab 89

 Lab#10:Web Development – View Record SSUET/QR/114

Lab # 10

Objective: Use Dreamweaver Web Development tool to View Record

1) To understand the concept of viewing records from database.
2) To view reports or multiple records from database.

Theory:
This lab is mainly concerned with the learning of the concept of Server Side Scripting in PHP and to
get aware of the concept of VIEW ALL RECORDS in PHP. In this lab we are actually implementing
the functionality of VIEW ALL RECORDS in PHP.

Objective #1:
To understand the concept of viewing records from database.

View All Records:

The term “view all records” is used for displaying the records of the users stored in the database which
are being fetched by PHP.To get PHP to execute the viewing functionality we must use the
mysqli_query() function. This function is used to send a query or command to a MySQL
connection.Next, we use the mysqli_fetch_array() function to return the first row from the record set
as an array. Each call to mysqli_fetch_array() returns the next row in the record set. The while loop
loops fetch through all the records in the record set. To print the value of each row, we use the PHP
$row variable ($row ['Username'] and $row ['Password']).

Objective #2:
To view reports or multiple records from database.

PHP code for viewing the record set is as follows:

View.php

<?php

$db_user = 'root';
$db_pass = "";
$db = 'test';//test

$conn = mysqli_connect('localhost',$db_user,$db_pass) or die('Unable to connect database');

CE-202L: Software Engineering Lab 90

 Lab#10:Web Development – View Record SSUET/QR/114

mysqli_select_db($conn,$db)or die("cannot connect database practice");

if(! $conn ) {
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT uname, pwd FROM login';

$retval = mysqli_query( $conn, $sql);

if(! $retval )
die('Could not get data: ' . mysql_error());{

echo "<table>";
echo "<tr>";
echo "<th>Username</th>";
echo "<th>Password</th>";

echo "</tr>";
while($row = mysqli_fetch_array($retval, MYSQL_NUM)) {
echo "<tr>";
echo "<td>" . $row[0] . "</td>";
echo "<td>" . $row[1] . "</td>";

echo "</tr>";
}
echo "</table>";

?>

CE-202L: Software Engineering Lab 91

 Lab#10:Web Development – View Record SSUET/QR/114

BROWSER OUTPUT:

Running it on the browser with the link

http://localhost/test/

CE-202L: Software Engineering Lab 92

 Lab#10:Web Development – View Record SSUET/QR/114

CE-202L: Software Engineering Lab 93

 Lab#10:Web Development – View Record SSUET/QR/114

Exercise:
Design a login form using Dreamweaver, database using phpMyAdmin and create view report.
The table is from: https://www.allphptricks.com/insert-view-edit-and-delete-record-from-
database-using-php-and-mysqli/

CE-202L: Software Engineering Lab 94

Lab#11:Web Development – Edit Record SSUET/QR/114

Lab # 11

Objective: Use Dreamweaver Web Development tool to Edit Record.

1) To understand the concept of updating records, present in database.
2) To update record present in MySQL database using PHP.

Theory:
This lab is mainly concerned with the learning of the concept of Server Side Scripting in PHP and
to get aware of the concept of UPDATE RECORDS in PHP. In this lab we are actually
implementing the functionality of updating records of the previously stored data using PHP.

Objective #1:
To understand the concept of updating records, present in database.

UPDATE RECORD:

The UPDATE statement is used to update existing records in a table.Data can be updated into
MySQL tables by executing SQL UPDATE statement through PHP function mysql_query. The
SQL UPDATE statement allows you to update a single record or multiple records in a table.

SQL UPDATE - Simple example

UPDATE table nameSET name = 'value'WHERE name = ''value;

Objective #2:

To update record present in MySQL database using PHP.PHP code for updating record is as
follows:

Update.php

<?php

$db_user = 'root';

$db_pass = "";

$db = 'test';//test

CE-202L: Software Engineering Lab 95

Lab#11:Web Development – Edit Record SSUET/QR/114

$conn = mysqli_connect('localhost',$db_user,$db_pass) or die('Unable to connect database');

mysqli_select_db($conn,$db)or die("cannot connect database practice");

if(! $conn ) {

die('Could not connect: ' . mysql_error());

$sql = 'SELECT Id, uname, pwd FROM login';

$retval = mysqli_query( $conn, $sql);

if(! $retval )

die('Could not get data: ' . mysql_error());{

echo "<table>";

echo "<tr>";

echo "<th>Username</th>";

echo "<th>Password</th>";

echo "<th>Action</th>";

echo "</tr>";

while($row = mysqli_fetch_array($retval, MYSQL_NUM)) {

echo "<tr>";

echo "<td>" . $row[1] . "</td>";

echo "<td>" . $row[2] . "</td>";

echo "<td><a href='update.php?id=" . $row[0] .

"'>Edit</a></td>";

CE-202L: Software Engineering Lab 96

Lab#11:Web Development – Edit Record SSUET/QR/114

echo "</tr>";

echo "</table>";

if(!empty($_POST))

$newpwd1 = $_POST['pswd'];

$id = $_POST['id'];

$sql="UPDATE login SET pwd = '".$newpwd1."' where Id = $id ";

$result=mysqli_query($conn, $sql);

if($result)

echo "You have successfully changed your password";

}else{

echo "Operation Failure please re-attempt";

$id = $_GET['id'];

if(isset($id) && $id != '')

//$newpwd1

$sql="SELECT * FROM login WHERE Id = $id";

$result=mysqli_query($conn, $sql);
CE-202L: Software Engineering Lab 97
Lab#11:Web Development – Edit Record SSUET/QR/114

if($result)

$row = mysqli_fetch_array($result, MYSQL_NUM);

?>

<form id="update_form" name="update_form" method="post" action="">

<table width="285" border="1">

<tr>

<th colspan="3" scope="col"><em><strong>Update User Password</strong></em></th>

</tr>

<tr>

<td width="78"><em><strong>Username</strong></em></td>

<td width="144"><em><strong>

<input type="text" name="uname" id="uname" disabled="disabled" value="<?php echo

$row[1]; ?>" />

<input type="hidden" name="id" id="id" value="<?php echo $row[0]; ?>"

/>

</strong></em></td>

<td width="22">&nbsp;</td>

</tr>

<tr>

<td><em><strong>Password</strong></em></td>

<td><em><strong>

<input type="password" name="pswd" id="pswd" />

</strong></em></td>
CE-202L: Software Engineering Lab 98
Lab#11:Web Development – Edit Record SSUET/QR/114

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><em><strong></strong></em></td>

<td><input type="submit" name="submit" id="submit" value="update" /></td>

</tr>

</table>

</form>

BROWSER OUTPUT:
Running it on the browser with the link
http://localhost/test/

CE-202L: Software Engineering Lab 99

Lab#11:Web Development – Edit Record SSUET/QR/114

CE-202L: Software Engineering Lab 100

Lab#11:Web Development – Edit Record SSUET/QR/114

Exercise:
Design a login form using Dreamweaver, database using phpMyAdmin and create update
record.
The table is from: https://www.allphptricks.com/insert-view-edit-and-delete-record-from-
database-using-php-and-mysqli/

CE-202L: Software Engineering Lab 101

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

Lab # 12

Objective: Use Dreamweaver Web Development tool to Insert/Delete Record.

1) To understand the concept of inserting in and deleting records from database.
2) To insert record in MySQL database using PHP.
3) To delete record from MySQL database.

Theory:
This lab is mainly concerned with the learning of the concept of Server Side Scripting in PHP and
to get aware of the concept of INSERTING & DELETING RECORDS in PHP. In this lab we are
actually implementing the functionality of insertion and deletion of records using PHP.

Objective #1:
To understand the concept of inserting in and deleting records from database.

Inserting Records in Database:

The INSERT INTO statement is used to insert new records in a table. It is possible to write the
INSERT INTO statement in two forms. The first form does not specify the column names where
the data will be inserted, only their values. The second form specifies both the column names and
the values to be inserted.

Deleting Records from Database:

The DELETE statement is used to delete rows in a table. It is possible to delete all rows in a table
without deleting the table. This means that the table structure, attributes, and indexes will be
intact.

Objective #2:

To insert record in MySQL database using PHP

PHP code for inserting record is as follows:

Insert.php

<?php
if(!empty($_POST))
{
$uname = $_POST['uname'];

CE-202L: Software Engineering Lab 102

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

$pwd = $_POST['pswd'];

$db_user = 'root';
$db_pass = "";
$db = 'test';//test

$con = mysqli_connect('localhost',$db_user,$db_pass) or die('Unable to connect

database');

mysqli_select_db($con,$db)or die("cannot connect database practice");

$sql="insert into login(uname,pwd) values('".$uname."','".$pwd."')";

$result=mysqli_query($con, $sql);

if($result)
{
echo "You have successfully created new account";
}
else{
echo "Operation Failure please re-attempt";
}

}
?>
<form id="insert_form" name="insert_form" method="post" action="">
<table width="285" border="1">
<tr>
<th colspan="3" scope="col"><em><strong>Insert User Record</strong></em></th>
</tr>
<tr>
<td width="78"><em><strong>Username</strong></em></td>
<td width="144"><em><strong>
<input type="text" name="uname" id="uname" />
</strong></em></td>
<td width="22">&nbsp;</td>
</tr>
<tr>
<td><em><strong>Password</strong></em></td>
<td><em><strong>
<input type="password" name="pswd" id="pswd" />
</strong></em></td>
<td>&nbsp;</td>

CE-202L: Software Engineering Lab 103

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

</tr>
<tr>
<td>&nbsp;</td>
<td><em><strong></strong></em></td>
<td><input type="submit" name="submit" id="submit" value="Submit" /></td>

</tr>
</table>
</form>

BROWSER OUTPUT:

Running it on the browser with the link

http://localhost/test/

CE-202L: Software Engineering Lab 104

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

CE-202L: Software Engineering Lab 105

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

PASSWORD HASH FUNCTION

Hashing password is a technique of converting a single password into another

string called hashed password. The hashed password is generally one-way, i.e.
we can’t go to the original password from the hashed password.

Objective # 3:

To delete record from MySQL database.

PHP code for deleting record is as follows:

Delete.php
<?php

session_start();

$uname = $_SESSION['usern'] ;
$db_user = 'root';
$db_pass = "";
$db = 'test';//test

$conn = mysqli_connect('localhost',$db_user,$db_pass) or die('Unable to connect database');

CE-202L: Software Engineering Lab 106

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

mysqli_select_db($conn,$db)or die("cannot connect database practice");

if(! $conn ) {
die('Could not connect: ' . mysql_error());
}

$sql="Delete from login where uname = '".$uname."' ";

$result=mysqli_query($conn,$sql);

if($result)

echo "You have successfully deleted your account";

else

echo "Operation Failure please re-attempt";

?>

BROWSER OUTPUT:

Running it on the browser with the link

http://localhost/test/

CE-202L: Software Engineering Lab 107

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

CE-202L: Software Engineering Lab 108

Lab#12: Web Development – Insert & Delete Record SSUET/QR/114

Exercise:
Design a login form using Dreamweaver, database using phpMyAdmin and add 2 more
records and delete first 3 records and show the resultant table.
The table is from: Add, Edit and Delete Record using PHP/MySQL | Free Source Code,
Projects & Tutorials (sourcecodester.com)

CE-202L: Software Engineering Lab 109

 Lab#13: Software Requirement Specification SSUET/QR/114

Lab # 13

Objective: Demonstrate & practice Software Requirement Specification.

Theory:
 A SRS is a document which contains the complete description of software without
talking much about implementation details.
 It is a set of precisely stated properties and constraints which final product must
satisfy.
 Clearly and accurately describes each of the essential requirements (functions,
performance, design constraints, and quality attributes) of the system / software and
its external interfaces .
 Defines the scope and boundaries of the system / software.
 Each requirement must be described in such a way that it is feasible and objectively
verifiable by a prescribed method (e.g., by inspection, demonstration, analysis, or test)
 Basis for contractual agreements between contractors or suppliers and customers
 Specifications are intended to a diverse audience.
o Customers and users for validation, contract, ... Systems (requirements)
analysts
o Developers, programmers to implement the system
o Testers to check that the requirements have been met
o Project Managers to measure and control the project

Components of SRS Document

1. Functional Requirements
2. Non - Functional Requirements
3. Static Requirements
4. Execution Constraints eg. Response time, throughput time
5. Standards to be followed
6. Security requirements
7. Company Policies
8. Interface with other external agents ie. persons, software or hardware

Goals of SRS Document

Feedback to customer : It is the customer’s assurance that the development organization

understands the issues or problems to be solved and the software behavior necessary to
address those problems.

Problem Decomposition: SRS helps to break down the problem into its component parts in
an orderly fashion.

Input to Design Specification: SRS contains sufficient detail in the functional system
requirements so that a design solution can be devised.

CE-202L: Software Engineering Lab 110

 Lab#13: Software Requirement Specification SSUET/QR/114

Product Validation Check: SRS serves as the parent document for testing and validation
strategies that will be applied to the requirements for verification.

Characteristics of an SRS

Following are the characteristics of a good SRS document:

1. Correctness:
User review is used to ensure the correctness of requirements stated in the SRS. SRS
is correct if it covers all the requirements that are actually expected from the system.
2. Completeness:
Completeness of SRS indicates every sense of completion including the numbering of
all the pages, resolving the to be determined parts to as much extent as possible as
well as covering all the functional and non-functional requirements properly.
3. Consistency:
Requirements in SRS are said to be consistent if there are no conflicts between any set
of requirements. Examples of conflict include differences in terminologies used at
separate places, logical conflicts like time period of report generation, etc.
4. Unambiguous:
An SRS is said to be unambiguous if all the requirements stated have only 1
interpretation. Some of the ways to prevent unambiguousness include the use of
modelling techniques like ER diagrams, proper reviews etc.
5. Ranking for importance and stability:
There should a criterion to classify the requirements as less or more important or more
specifically as desirable or essential. An identifier mark can be used with every
requirement to indicate its rank or stability.
6. Modifiability:
SRS should be made as modifiable as possible and should be capable of easily
accepting changes to the system to some extent. Modifications should be properly
indexed and cross-referenced.
7. Verifiabile:
There must exist a cost effective way of checking if software satisfies requirements
8. Traceability:
One should be able to trace a requirement to a design component and then to a code
segment in the program. Similarly, one should be able to trace a requirement to the
corresponding test cases.
9. Design Independence:
There should be an option to choose from multiple design alternatives for the final
system. More specifically, the SRS should not include any implementation details.
10. Testability:
An SRS should be written in such a way that it is easy to generate test cases and test
plans from the document.
11. Understandable by the customer:
An end user maybe an expert in his/her specific domain but might not be an expert in
computer science. Hence, the use of formal notations and symbols should be avoided
The language should be kept easy and clear.
12. Right level of abstraction:
If the SRS is written for the requirements phase, the details should be explained
explicitly.

CE-202L: Software Engineering Lab 111

 Lab#13: Software Requirement Specification SSUET/QR/114

IEEE 830-1998 Standard – Objectives

 Help software customers to accurately describe what they wish to obtain

 Help software suppliers to understand exactly what the customer wants
 Help participants to develop a template (format and content) for the software
requirements specification (SRS) in their own organizations

IEEE 830-1998 Standard – Section 1 of SRS

CE-202L: Software Engineering Lab 112

 Lab#13: Software Requirement Specification SSUET/QR/114

IEEE 830-1998 Standard – Section 2 of SRS

IEEE 830-1998 Standard – Section 3(1) of SRS

CE-202L: Software Engineering Lab 113

 Lab#13: Software Requirement Specification SSUET/QR/114

IEEE 830-1998 Standard – Section 3(2) of SRS

Exercise:

Write a Software Requirement Specification Document of an airline system.

CE-202L: Software Engineering Lab 114

CE-202L: Software Engineering Lab SSUET/QR/114

Laboratory Exercise 14
Open-Ended Lab

1. Objective: Open Ended Lab (Create an Admin portal of any

management system, the admin should access the system with admin
credentials, add fields in database regarding employee/staff/student
record, implement authentication & design menu including ADD, EDIT,
DELETE & VIEW records on any system. Apply proper CSS and create
a GUI for the menu).

2. Hardware/Software Required

3. Diagram

4. Methodology

5. Observation Table

6. Results

____________________________________________________________________________
______
Department of Computer Engineering
Sir Syed University of Engineering & Technology, Karachi
CE-202L: Software Engineering Lab SSUET/QR/114

7. Conclusion

____________________________________________________________________________
______
Department of Computer Engineering
Sir Syed University of Engineering & Technology, Karachi