Document

LABORATORIUM ENSYSe
No.
Form No.
MODULE 1 Effectively
apply
Module Name ERD & Normalization

Labwork Information System Analysis Design and Application Development

Program Learning PLO 6. Able to design integrated system according to technical
Outcomes standard, applicable safety and environmental health and considering
performance and reliability aspect, ease of implementation and
sustainability, and concentrate on economic, social, and cultural
aspect.
Course Learning CLO 5. Able to model and design business process and database
Outcome planning in an integrated system

1.1 Tools and Material

Here are the tools and materials used in the practical labwork of 1st module :
Tools Material
Microsoft Excel
Draw.io

1.2 Study Literature

1.2.1 Normalization

Database Normalization is a systematic approach of decomposing tables to eliminate

data redundancy (repetition) and undesirable characteristics like Insertion, Update and Deletion
Anomalies in the database. It is a multi-step process that puts data into tabular form, removing
duplicated data from the relation tables.

Normalization is used for mainly two purposes;

● Eliminating reduntant data.
● Ensuring data dependencies make sense i.e data is logically stored.

The inventor of the relational model Edgar Codd proposed the theory of normalization with the
introduction of First Normal Form, and he continued to extend theory with Second Normal
Form. In this module, we will learn the two types of normalization form 1NF and 2NF.

1.2.1.1 First Normal Form (1NF)

For a table to be in the First Normal Form, it should follow the following 3 rules:
 ● It should only have single (atomic) valued attributes/columns.
● Columns have no repeating/similar data
● Each row is unique
● Each field has a unique name

1.2.1.2 Second Normal Form (2NF)

For a table to be in the Second Normal Form, it should follow the following 3 rules:

● It should be in 1NF
● Non-key attribute are functional dependent on primary key
● It should not have Partial Dependency

1.2.2 ER-Model
An Entity-Relationship Model (ERM) is an abstract or conceptual data model that
represents data in the form of entities and relationships. Entity-Relationship is one of the
database modeling methods used to generate conceptual schemes for data types / models. The
diagram to illustrate the Entity-Relationship model is called Entity Relationship diagram, ER
diagram, or ERD.

1.2.2.1 Component of Entity Relationship Diagram

a. Chen’s Notation
Chen's notation prioritizes the basic conceptual model data
Table 1.9 Chen’s notation on ERD
1.2.2.2 Degree of Relation
The degree of relation indicates the number of entity sets that are related to each other. The
type of set of relations is:
● The Unary degree (Degree One) involves an entity that relates to itself
● Binary Degree (Degree Two) sets of relations involve two entity sets. In general the set
of relation in the database system is binary
● The Ternary degree (Degree Three) sets the relationships allowing for the involvement
of more than two entity sets

Figure 1.1 Unary Degree Relationship

Figure 1.2 Binary Degree Relationship

Figure 1.3 Tenary Degree Relationship

1.2.2.3 Cardinality
The cardinality mapping of a relation describes how much the maximum number of entities
can relate to the entity on another set of entities.
 Table 1.10 Symbol of Cardinality

● One to One
Meaning an entity can only relate to one object in another. This cardinality is
symbolized by 1-1

Figure 1.4 One to One

● One to Many

That is, an entity can relate to many objects on another entity. This cardinality is
symbolized by 1-m

Figure 1.5 One to Many

● Many to One
This is the opposite of one to many, meaning that many entities will relate to the
same object on another entity. This cardinality is symbolized by 1-m
 Figure 1.6 Many to One
● Many to Many
That is, there will be many entities that relate to many objects on another entity. This
cardinality is symbolized by m-n

Figure 1.7 Many to Many

 Document
LABORATORIUM ENSYSe
No.
Form No.
MODULE 2 Effectively
apply
Module Name Query
Lab Work Analysis and Design of Information Systems
Program Learning PLO 6. Able to design an integrated system according to the applicable
Outcomes technical, safety and environmental health standards by considering aspects
of performance and reliability, ease of implementation and sustainability,
and taking into account economic, social and cultural factors.
Course Learning CLO 5. Able to model and design business processes and database design
Outcomes in an integrated system
Article :

DDL (Data Definition Language)

1. Definition of DDL
DDL (Data Definition Language) is a language that allows Database Administrators (DBA)
or users to describe and give names of entities, attributes, and relationships that the
application needs along with associated integrity and security restrictions (Connolly &
Begg, 2010). According to Ema Utami & Sukrisno (2005) DDL is a SQL command that is
used to define or declare database objects. Database objects can be tables or databases
themselves. DDL can also be used to create a database connection between the table and
its limits by determining the index as the key. Beside that, DDL can be used to create,
modify, and delete structure or definition of data type from objects that are in the database.
2. Statement of DDL
Command that commonly used in DDL are:
1. Create, this command is used to make or create the database or it’s object.
2. Drop, this command is used to delete database object
3. Alter, this command is used to modify the attribute or the entity from objects in a
database.
 CREATE is commands used to make or to create new database object or the database
themselves.
The syntax to used create command to make database as follows.
𝑪𝑹𝑬𝑨𝑻𝑬 𝑫𝑨𝑻𝑨𝑩𝑨𝑺𝑬 < 𝑫𝒂𝒕𝒂𝒃𝒂𝒔𝒆_𝑵𝒂𝒎𝒆 >
Example:
CREATE DATABASE FRI_Company
Create command has several rules:
1. Incase-sensitive, it means there are no differences using capitalized letters or not.
2. In writing queries can be in a full one line or separated in rows if writing a long
query.
3. Keyword in SQL
a. Keyword (Reserved Word), is the words that already used by the system like
CREATE, in general SQL’s keyword written in capital letters. However, it’s
not the rule of SQL’s keyword written.
b. Identifier, is the variables name or another identifier. In general, identifier
written in merger both capital letters and not capital like ‘Mahasiswa’, ‘Harga’,
and so on but it’s not the standard rules. So, if writing identifier like this
‘mahasiswa’ is allowed. As for the rules for creating identifiers are:
• Using space ‘ ‘ is forbidden, forbidden to write identifier as ‘Nama Part’.

• Using underscore to separated identifier that has more than one word.
Example
‘Nama_Part’ and ‘Gaji_Karyawan_Tetap’.
• Using number as first word is forbidden. Example ‘1Data’
• Using special characters like ‘*’, ‘!’, ‘?’, ‘/’, and so on is forbidden.
c. Data Type, each column must have a data type. There are several data type that
commonly used as follows.
Data Type Description
CHAR (size) A FIXED length string (can contain letters, numbers, and
special characters). The size parameter specifies the column
length in characters – can be from 0 to 255. Default is 1.
 VARCHAR (size) A VARIABLE length string (can contain letters, numbers, and
special characters). The size parameter specifies the maximum
column length in characters – can be from 0 to 65535.
TEXT (size) Holds a string with a maximum length of 65,535 bytes.
INTEGER (size) A medium integer. Signed range is from -2147483648 to
2147483647. Unsigned range is from 0 to 4294967295. The
size parameter specifies the maximum display width (which is
255).
FLOAT (size, d) A floating point number. The total number of digits is specified
in size. The number of digits after decimal point is specified in
the d parameter.
DATE A date. Format: YYYY-MM-DD. The supported range is from
‘1000-01-01’ to ‘9999-12-31’.
Many Others

Create commands can be used to make or create table. The syntax to used create
command to make table as follows.
CREATE TABLE <Table_Name> (
<Field_Name1> <Data_Type1>
<Field_Name2> <Data_Type2>
. .
<Field_NameN> <Data_TypeN>
As Example:
CREATE TABLE FRI_Company (
Kode_Part varchar(10) PRIMARY KEY NOT NULL,
Nama_Part varchar(20),
Jumlah integer(12))
DROP is commands to delete database object. Using this command must be
careful because in SQL there are no undo button, so if used this command database or
database object that deleted will be gone.
Drop can be used to delete database and also delete table.
 DROP DATABASE <database_name>
DROP TABLE <table_name>
Example:
DROP DATABASE FRI_Company
DROP TABLE Harga

ALTER is commands to modify column, add column, or delete column from the
table and also alter can be used to modify the database. The syntax to used alter command
as follows.
ALTER TABLE <Table_Name> <ACTION>
The <ACTION> are as follows:
1. To add field, the syntax is ADD <Column_Name> <Data_Type>
2. To delete field, the syntax is DROP COLUMN <Column_Name>
3. To modify field, the syntax is MODIFY <Column_Name> <Column_Type> or
ALTER <Column_Name> <Column_Type>
As Example:
ALTER TABLE FRI_Company
DROP COLUMN Harga
 DML (Data Manipulation Language)

1. Definition of DML
Data Manipulation Language (DML) is a SQL statement that serves to manipulate
data in database, such as retrieval, insertion, modification, and deletion of data. The
function of DML is to manipulate data such as to add data, change data and delete data.
2. Statement of DML
For manipulate the data in database, there are several statement that are used to
manipulate the data. The following are the commands used in DML :
• Insert
The insert command is used to enter data into table in database. By using an insert,
data can be entered directly or indirectly.
Example:
- Directly

- Indirectly

• Update
The update command is used to modify data in the table.
Example:

• Delete
The delete command is used to delete data in the table.
Example:

• Select
The Select command is used to display the contents of the table. There are several
ways to use the select command. The following are the select commands used in
DML and its example :
 - To display entire table
Example:

- To display a certain column

Example:

- To display a certain value

Example:

- To display data using ‘order by’

Example:

3. Transaction Control Language

Transaction Control Language (TCL) is a command that deals with transactions in the
database. The following are TCL that used in SQL:
• Commit
Commit is command that used to save changes on the workspace that is being
operated, because at first the changes are still stored on the workspace temporary.
Example:

• Rollback
Rollback is command that used to undo changes made after the last Commit
command.
Example:
 JOIN

A JOIN clause is used to combine rows from two or more tables, based on a related column
between them. The result is a stitched set of columns from both tables, defined by the join type
(INNER/OUTER/CROSS and LEFT/RIGHT/FULL, explained below) and join criteria (how rows
from both tables relate).
A table may be joined to itself or to any other table. If information from more than two
tables needs to be accessed, multiple joins can be specified in a FROM clause.
When data from more than one table in the database is required, a join condition is used. Rows in
one table can be joined to rows in another table according to common values existing in
corresponding columns, that is, usually primary and foreign key columns.
There are 3 types of JOIN:

1. Inner Join
The inner join keyword selects records that have matching values in both tables.

Inner join syntax:

SELECT column_name.1 , column_name.2
FROM table_name.1 INNER JOIN table_name2
ON column_name.1 = column_name.2

There are three types in this inner join: (chandraiah & M.A, 2014)
a. Inner Equi-join
An equijoin is a join with a join condition containing an equality operator. An
equijoin combines records that have equivalent values for the specified columns.
b. Inner Non-equi join
 A Non equijoin is a join with a join condition without containing an equality
operator. A non-equijoin combines records that have equivalent values for the
specified columns
c. Inner Self join
A self-join is a join of a table to itself. Since a join requires minimum of two tables,
here, we refer the same table twice in the FROM clause and is followed by table
aliases that qualify column names in the join condition.
2. Outer Join
The outer join returns all rows from both the participating tables which satisfy the join
condition along with rows which do not satisfy the join condition.
Here is the subtypes of outer join:
a. Left outer join
The left join keyword returns all records from the left table (table1), and the
matched records from the right table (table2). The result is NULL from the right
side, if there is no match.

Left outer join syntax:

SELECT column_name.1 , column_name.2
FROM table_name.1 LEFT OUTER JOIN table_name2
ON column_name.1 = column_name.2

b. Right outer join

The right join keyword returns all records from the right table (table2), and the
matched records from the left table (table1). The result is NULL from the left side,
when there is no match.
 Right outer join syntax:
SELECT column_name.1 , column_name.2
FROM table_name.1 RIGHT OUTER JOIN table_name2
ON column_name.1 = column_name.2

c. Full outer join

In SQL the FULL OUTER JOIN combines the results of both left and right outer
joins and returns all (matched or unmatched) rows from the tables on both sides of
the join clause.

Full outer join syntax:

SELECT column_name.1 , column_name.2
FROM table_name.1 FULL OUTER JOIN table_name2
ON column_name.1 = column_name.2

3. Joining more than two tables

It is a generalized joining process in which number of tables are exceeding by two. Here, the
minimum number of joining conditions required depends on the number of tables being joined
 REFERENCES
Connolly, Thomas dan Begg, Carolyn. 2010. Database Systems A Practical Approach to Design,
Implementation, and Management Fifth Edition. Boston: Pearson Education.

Utami, Ema dan Sukrisno. 2005. Konsep Dasar Pengolahan dan Pemrograman Database
dengan SQL Server, Ms. Access dan Ms. Visual Basic. Yogyakarta: Penerbit ANDI.

Connolly, T., & Begg, C. (2010). Database System A Practical Approach to Design,
Implementation, and Management Fifth Edition. Boston: Pearson Education.

chandraiah, b., & M.A, J. (2014). A simple approach to SQL joins in a relational algebraic notation.
researchgate, 20-21.
 Document
LABORATORIUM ENSYSe
No.
Form No.
ARTICLE 3RD MODULE Effectively
Apply
Module Name Use Case and Activity Diagram
Lab Work Analysis and Design of Information Systems Practicum
Student Outcomes
Learning Outcomes LO5. Students are able to model and design business processes
and database design in an integrated system

Unified Modeling Language (UML)

Unified Modeling Language (UML) is a standardized modeling language consisting of
an integrated set of diagrams, developed to help system and software developers accomplish
specification, visualization, architecture design, construction, simulation and testing, and
documentation. UML is a visual modeling language dominant in object-oriented software
development that was adopted by the Object Management Group (OMG) as its standard
modeling language in 1997. UML is a method to analyze business process and model the
business process in the specific notation. UML satisfies an important need in software and
system development. Modeling—especially modeling in a way that’s easily understood—
allows the developer to concentrate on the big picture. The UML represents a collection of best
engineering practices that have proven successful in the modeling of large and complex
systems. (Greeff & Ghoshal, 2004).
UML was originally developed with the idea of promoting communication and
productivity among the developers of object-oriented systems, but the readily apparent power
of UML has caused it to make inroads into every type of system and software development. By
using UML, we can create models for all types of software applications, where these
applications can run on any hardware, operating system and network, and written in any
programming language. UML defines notation and syntax / semantics. UML notation is a set
of special form for describing various software diagrams. Each form has a specific meaning,
and the UML syntax defines how the forms can be combined.
The purpose or function of UML:
1. Can provide a visual modeling language to user of various types of program or engineer
processes.
2. Can relate to the best available method in modeling.
3. Can share ready-to-use models, which is an expressive visual modeling language to
easily share models and extend programs.
4. Can be useful as a blue print, because its complete and detailed in design.
5. Can model systems with object-oriented concept, so its not only useful for modeling
software only.
6. Can create a modeling language that later can be used by human and machine.

The tools used in object-oriented design based on UML are as follows.

A. Use Case Diagram
Use case is an activity the system performs, usually in response to a request by a
use that represent the step in specific business function or process. Use case allow you to
understand and communicate the purpose of a system or its components. The use case
diagram is the UML model used to graphically show the use cases and their relationship
to users (Satzinger et al., 2011). A UML use case diagram is the primary form of
system/software requirements for a new software program underdeveloped. A use case
diagram normally concentrates on showing the purposes of the system (use case) and the
users (actors).
We call a use case diagram that has its individual use cases elided (hidden) a context
diagram, because it shows the system in its environment (context) of surrounding systems
and actors. Key concepts of use case modeling is that it helps us design a system from the
end user’s perspective. It’s an effective technique for communicating system behavior in
the user’s terms by specifying all externally visible system behavior. Use case diagram are
typically developed in early stage of development and people often apply use case
modeling for some purposes:
1. Specify the context of a system
2. Capture the requirements of a system
3. Validate a systems architecture
4. Drive implementation and generate test cases
The symbols of use case diagram area as follows.

Symbol Description

Actor
Someone interacts with use case (system function) that has a
responsibility toward the system (inputs) and has expectation
from the system (outputs).

Use Case
Description that represent the system’s functions.

Association
The participation of an actor in use case is shown by connecting
an actor to a use case by a solid link. Actors may be connected
to use cases by associations, indicating that the actor and the use
case communicate with one another using messages.

Generalization
Generalization is a parent-child relationship in use case, where
one of them is in a more general form the other. The child use
case is connected to the parent use case.

Include
Include is the relationship between use cases, when a use case is
depicted as using the functionality of another use case. An
additional use case relation to a use case where an added use
case requires this use case to carry out its functions or as a
condition for running this use case. A use case includes the
functionality described in another use case as a part of its
business process flow.

Extend
Extend described the relationship between use cases, where a
use case is another use case is another use case functionality if
certain conditions are met. An additional use case relation to a
 use case where the added use case can stand alone even without
the additional use case.

B. Activity Diagram
Activity diagram describe the various user (or system) activities, the person who
does each activity, and the sequential flow of these activities (Satzinger, er al., 2012).
Activity diagram is one of behavioral diagram in UML diagram that described dynamic
aspects of the system. The activity diagram is very useful when you want to illustrate work
flowing through a business process. You can also document complex use cases with what
is known as an interaction overview diagram. Activity diagram is essentially an advanced
version of flow chart that modeling the flow from one activity to another activity. Activity
diagram describe how activities are coordinated to provide a service which can be at
different levels of abstraction. An Activity diagram resembles a horizontal flowchart that
shows the action and events as they occur. Activity diagram show the order in which the
action take place and identify the outcomes (Shelly and Rosenblatt., 2012).
The symbols of activity diagram area as follows.

Symbol Description

Initial State
Initial state is portrays the beginning of a set of actions or
activities

Activity Final State

Activity final state is portrays the end or stop all control flows
in a set of actions or activities

Activity
Activity is used to represent a set of actions

Decision
Decision represents a test condition to ensure that the control
flow or object flow only goes down one path
Fork Node
Fork node used to split behavior into a set of parallel or
concurrent flows of activities/actions.

Join Node
Join node combine two parallel activities/actions into one
activity/action or bring back together a set of parallel or
concurrent flows of activities/actions

Swimlane
Swimlane is a way to group activities performed by the same
actor on an activity diagram or to group activities in a single
thread.

Control Flow & Object Flow

Control flow shows the sequence of execution.
Object flow shows the flow of an object from one
activity/action to another activity/action
 DAFTAR PUSTAKA
Booch, G., Rumbaugh, J., & Jacobson, I. (1999). The Unified Modeling Language User
Guide. California: Addison Wesley Longman Publishing Co., Inc.
Chonoles, M. J., & Schardt, J. A. (2003). UML 2 for Dummies. For Dummies.
Satzinger, J., Jackson, R., & Burd, S. (2011). Systems Analysis and Design in a Changing
Worlf (6th Ed). Boston: Cengage Learning.
Shelly, G., & Rosenblatt, H. (2012). Essentials of Systems Analysis and Design 9th Ed.
Boston: Cengage Learning.
 Document
ENSYSE LABORATORY No.
Form No.
Effectively
MODULE 4
apply
Document Name Article
Module Name Class Diagram and Sequence Diagram
Labwork Information System Analysis Design and Application Development
PLO 6. Able to design an integrated system according to the applicable
Program Learning technical, safety and environmental health standards by considering
Outcomes aspects of performance and reliability, ease of implementation and
sustainability, and taking into account economic, social and cultural
factors.
Course Learning CLO 5. Able to model and design business processes and database
Outcomes design in an integrated system

1. UML
a. Definition of UML
UML is a methodology in developing object-oriented systems and is also a tool to support system
development.

b. Types of UML
The current UML standards call for 13 different types of diagrams are organized into two distinct
groups: structural diagrams and behavioral or interaction diagrams.

Structural UML diagrams

• Class diagram
• Package diagram
• Object diagram
• Component diagram
• Composite structure diagram
• Deployment diagram
Behavioral UML diagrams

• Activity diagram
• Sequence diagram
• Use case diagram
• State diagram
• Communication diagram
• Interaction overview diagram
• Timing diagram
2. Class Diagram
a. Definition of Class Diagram
Class Diagram is A diagram used to form conceptual models of application systems and
provide model details for translation into program code.

b. Class diagram attribute

1) Class name : to differentiate between one class and another class.

2) Attributes : are the variables that belong to a class.
3) Operations : operations or activities that a class can perform.

c. 4 relationship between class in class diagram :

1) Composition Relationship

Where a class (part of) can be created if the main class is created before.
2) Generalization/Inheritance Relationship

Are two classes that have some of the same characteristics.

3) Aggregation Relationship

Aggregation is a relationship between two classes that is best described as "having-a" and
a "whole / part" relationship.
4) Association Relationship

Relation between classes with general meaning, association are usually accompanied by
multiplicity
• One-to-one
Relationships where on an entitiy can only have one relation to the other entity.
Example : There is no employee(O) or one employee(1) that can only have one
parking place.
• One-to-Many
 Relationships where an entity can have many relation to the other entity.
Example : One production line within the company have many kind of product
types.
• Many-to-Many
More than one data in entity have relation with more than one data in other
entity. Example : Many students can apply for many subjects in a period.

d. Visibility Symbol
Symbol Meaning
“+” Public (can be called from all objects)
“-“ Private (can only be called from inside the class itself)
“#” Protected (can only be called by corresponding class and its derived class)
““ Default/ without symbol

3. Sequence Diagram
a. Definition of Sequence Diagram
Sequence Diagrams on UML are used to describe descriptions of any scenarios that are in Use
Case. Sequence Diagram modeling objects that took a role in the scenario and described its
interaction.
b. Sequence Diagram notations
A sequence diagram is structured in such a way that it represents a timeline which begins at the
top and descends gradually to mark the sequence of interactions. Each object has a column and
the messages exchanged between them are represented by arrows.

1) Lifeline Notation
A sequence diagram is made up of several of these lifeline notations that should be arranged
horizontally across the top of the diagram. No two lifeline notations should overlap each
other. They represent the different objects or parts that interact with each other in the
system during the sequence.

A lifeline notation with an actor element symbol is used when the particular sequence
diagram is owned by a use case.
2) Activation Bars
Activation bar is the box placed on the lifeline. It is used to indicate that an object is active
(or instantiated) during an interaction between two objects. The length of the rectangle
indicates the duration of the objects staying active.

3) Message Arrows
An arrow from the Message Caller to the Message Receiver specifies a message in a
sequence diagram. A message can flow in any direction; from left to right, right to left or
back to the Message Caller itself.

Symbol Name Description

Synchronous Represented by a solid line with a
message symbolsolid arrowhead. This symbol is
used when a sender must wait for a
response to a message before it
continues. The diagram should show
both the call and the reply.
Reply message Represented by a dashed line with a
symbol lined arrowhead, these messages are
replies to calls.
 REFERENCE
Medium. The Ultimate Guide to Sequence Diagrams. https://medium.com/thousand-words-by-
creately/the-ultimate-guide-to-sequence-diagrams-a78e0e516886
Lucidchart. UML Sequence Diagram Tutorial. https://www.lucidchart.com/pages/uml-sequence-
diagram
Hendini, Ade. (2016). Pemodelan UML Sistem Informasi Monitoring Penjualan dan Stok Barang
(Studi Kasus: Distro Zhezha Pontianak. (4).
Urva, G., Siregar, H. F., Prof, J., Kisaran, M. Y., & Utara, S. (2015). Pemodelan UML E-
Marketing Minyak Goreng. (9), 92–101.
 PROTOTYPING

DEFINITION

Prototype is a draft version of a product that allows you to explore your ideas and show the
intention behind a feature or the overall design concept to users before investing time and money
into development. A prototype can be anything from paper drawings (low-fidelity) to something
that allows click-through of a few pieces of content to a fully functioning site (high-fidelity).

BENEFITS OF PROTOTYPES

It is much cheaper to change a product early in the development process than to make change after
you develop the site. Therefore, you should consider building prototypes early in the process.
Prototyping allow you to gather feedback from users while you are still planning and designing
your Web site.

The Difference between Sketches and Prototypes

Sketch Prototype
Evocative Didactic
 Suggest Describe
Explore Refine
Question Answer
Propose Test
Provoke Resolve
Tentative Specific
Non-committal Depiction

High-Fidelity and Low-Fidelity Prototyping

here are things to consider when trying to decide which option is best for your project (Walker et
al 2002):
 Low-fidelity prototypes are often paper-based and do not allow user interactions. Low-
fidelity prototypes are helpful in enabling early visualization of alternative design
solutions, which helps provoke innovation and improvement.
 High-fidelity prototypes are computer-based, and usually allow realistic (mouse-
keyboard) user interactions. High-fidelity prototypes take you as close as possible to a true
representation of the user interface.
Wireframe
A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or
a website containing the most essential elements and the content. A wireframe is like a blueprint
of a building. When someone wants to build a massive building, they don’t start right away, right.
Instead, they sketch, draw, make the blueprints, calculate, etc. A few characteristic features of a
wireframe are the following:
 It shows the main chunks of content
 It draws the outline and the layout structure
 It depicts the most basic UI
Mockup
A mockup is a visual way of representing a product. While a wireframe mostly represents a
product’s structure, a mockup shows how the product is going to look like. But still, a mockup is
not clickable (just like the wireframe). As opposed to a wireframe, a mockup is either a mid or
high-fidelity display of design. Briefly, unlike wireframes with gray lines, boxes and
placeholders, mockups are built with more visual details of the final web/app:
 Rich colors, styles, graphics and typography
 Actual buttons and texts
 Content layouts and component spacing
 Navigation graphics
 ADOBE XD
DEFINITION

Adobe XD, a vector-based digital design tool for websites and apps. Use it to create and
collaborate on everything from prototypes to mockups to full designs. Adobe XD is the Adobe
prototyping tool for user experience and interaction designers. Adobe XD features are used for
creating wireframes, prototypes, and screen designs for digital products such as websites and
mobile apps. Prototyping, sharing, commenting features within just one tool.

GENERAL FEATURES

Welcome screen

XD launches with a standard handy dialogue showing the device model and screen resolution to
begin with. Tutorials and shortcuts for other goodies are there at a glance as well.

UI Kits (Apple IOS, Google Material and Microsoft Windows)

Either you access these from the welcome screen or from the menu bar later, convenience of having
the native UI Kits built-in is significant. Simple and genius.

DESIGN MODE

Artboards

Whilst the Artboard control is somewhat standard, the small sweet feature Adobe added is ‘the fold
indicator’. As it might be clear from the name the dotted line, appearing when extending the Artboard
height, indicates the beginning of the scrollable content. If you set scrolling from the right panel to
‘none’ you will obviously get none.

Property Inspector on the right provides sufficient information, related to the tools/objects being
selected. Options might vary, but generally this is a go-to panel to change any colour, size, shape
related properties and many more.

Layers

XD has a smart layers panel, containing all the essential controls like editing, visibility, order etc. as
well as some smart zoom in/out features and a nesting structure that helps to avoid all the visual
noise and mess inevitable when artboards spread around a bit.
Symbols

Similarly to what is already known to Sketch users, you can group and edit your symbols, arranging
them among various screens with a full control of the original. A foundation for every UI library.

Repeat Grid

It not only improves the performance speed significantly when working on blocks of similar type.
But allows to control the content of those blocks, keeping the overall consistency and logic. Loading
data from a text file in seconds, replacing visuals, changing hierarchy for multiple elements in one.
All these little things that really make a difference. The way it lets you change paddings and margins
within the Grid is as neat and handy as it gets.

PROTOTYPING MODE

Creating transitions

Prototyping mode is mainly about bringing some life and telling a story of the screens designed
beforehand. By wiring them together, using simple transitions and basic set of animations, it doesn’t
take long to build the flow and share it straight away with other stakeholders for a feedback.

Live Device Preview

To preview your designs on mobile you can use either the IOS or Android App using your Adobe
credentials. It updates and previews your designs automatically and basically translates all the
changes made on the desktop into mobile practically simultaneously.

Screencasts

Once the outcome needs approving or sharing, you can output it into a MOV file or a link that can
be accessed via browser. It is obviously clickable, so all the transitions and interactions made during
the Prototyping mode will be active in the browser as well.
 References

1. M. Walker, L. Takayama and J.A. Landay, High-fidelity or low-fidelity, paper or

computer? Choosing attributes when testing web prototypes, Proceedings of the Human
Factors and Ergonomics Society 46th Annual Meeting, September 29–October 4, 2002,
Baltimore, USA, HFES, Santa Monica (2002), pp. 661–665.
2. Pashinova, Kate. 2017. Adobe XD. The New Hope. Date on access 09 February 2021,
Access on: https://futurice.com/blog/adobe-xd-the-new-hope
3. Cousins, Carrie. 2019. What Is Adobe XD? a 101 Intro. Date on access 09 February 2021,
Access on: https://designshack.net/articles/software/what-is-adobe-xd/
4. Valishvili, Lex. 2019. Design with Precision – An Adobe XD Review. Date on access 09
February 2021, Access on: https://www.toptal.com/designers/adobe/adobe-xd-review
 Document
LABORATORY ENSYSe No.
Form No.
MODULE 6 Effectively
apply

Module Name Create, Read, Update and Delete (CRUD) & Connect Database
Lab Work Analysis Design of Information Systems
Program Learning PLO 6. Able to design an integrated system according to the
Outcomes applicable technical, safety and environmental health standards by
considering aspects of performance and reliability, ease of
implementation and sustainability, and taking into account economic,
social and cultural factors.
Course Learning CLO 6. Students are able to design information system of the
Outcomes business process

CRUD

Definition:

Concept CRUD (create, read, update, delete) is useful for conducting database operations or
managing data in the database. CRUD is a general operation in making website, desktop
application and other systems. CRUD operations are a core process that is very necessary if we
want to build a dynamic website application.

Create:

The command used to create the database object such as:

➢ Table ➢ Procedure
➢ View ➢ Trigger
➢ Index ➢ Function
➢ Synonym ➢ Packages
➢ Sequence ➢ User-Defined Data Type

The example code of create:

INSERT INTO user (name, phone, address) VALUES (‘$name’, ‘$phone’, ‘$address’)

Read:

Read is a command that used to display or show the contents of the table. The example code
is:
SELECT*FROM user WHERE id=$id

Update:

Update is a command that used to change the table structure, change the data type, change the
data, and others. The main function of this command is used to modify data in the table. The
example of code update:

UPDATE user SET name=’$name’, phone=’$phone’, address=’$address’ WHERE id=$id

Delete:

The Command used to delete data in the table. Serves to delete objects on the database. The
example of delete codes is:

DELETE FROM user WHERE id=$id

PHP DATA OBJECT (PDO)

The PHP Data Objects (PDO) extension defines a lightweight, consistent interface for
accessing databases in PHP. Each database driver that implements the PDO interface can
expose database-specific features as regular extension functions. The PDO Statement
represents a prepared statement and, after the statement is executed, an associated result set.

Benefits of PDO:

- Security (useable prepared statement)

- Usability (many helper functions to automate operation)
- Reusability (unified API to access multitude of database, from SQLite to Oracle)

Example of PDO

- Connecting DB
$conn = new PDO (mysql:host=$servername;dbname=myDB”, $username,
$password);
- PDO Query
$sql = ‘SELECT name, color, calories FROM fruit ORDER BY name’;
$row = $conn->query($sql)
 Document
LABORATORIUM ENSYSe
No.
Form No.
MODULE 7 Effectively
apply
Module Name Reporting
Lab Work Information System Analysis Design and Application Development
Program Learning PLO 10. Able to select resources and utilize appropriate engineering
Outcome design and analysis tools based on information and computing
technology to carry out engineering activities.
Course Learning CLO 6. Able to design simple information systems from designed
Outcome business processes.

1.1 Tools and Material

Here are the tools and materials used in the labwork of 7 th module :

Tools Sostware
1. Information System Analysis Design 1. Xampp
and Application Development 7th Module
2. Personal computer or laptop 2. Visual Studio Code or another text
editor
3. Microsoft word

1.2 Study Literature

1.2.1 Reporting
Report is a reporting system that is used when it wants to display the results of
reports from a data analysis, in the form of tabular, graphs and calculation results
and is an extract from the database which results can be directly printed through the
printer media, or displayed to the monitor screen. Reporting as a whole, is used in
an early part of the data analysis process and serves to present data in a visual and
and often interactive way for further data discovery or data analysis.
In making a report there are several ways that can be used, namely:
1. Using the default browser
2. PHP Library
 3. Fpdf
4. Mpdf
5. Dompdf
1.2.2 Query
1. Connecting to database.
$conn = new PDO (“mysql:host=$servername; dbname”, $username,
$password);

2. Construct a SELECT statement and execute it by using the query() method of

PDO object.
$sql = ‘SELECT name, color, calories FROM fruit ORDER BY name’;
$row = $pdo->query($sql)
The query() method of PDO object returns a PDOStatement object or false on
failure.
3. Set fetch mode for the PDOStatement object by using the setFetchMode()
method. The PDO: : FETCH_ASSOC mode instructs the fetch() method to
return a result set as an array indexed by column name.
$row ->setFetchMode(PDO: :FETCH_ASSOC);
4. SUM
SUM command is a method used to add numbers in table columns using
array_sum function. In MySQL, we can easily add numbers using the SUM
command (column) but in some cases, this command can not be used. The most
common cause is due to the complexity of the query that uses conditional so it
forces to create a temporary column or field. For example the existing columns
are column_1 and coloumn_2.
Query:
“SELECT sum (column1) as number1, sum(column2) as number2”
The query above will not error and will display the sum of the values of column1
and column2 of all rows.

1.2.3 Difference between PDO and MySQL

1. Object-orientation
While the mysql extension used a number of function calls that operated on
a connection handle and result handles, the PDO extension has an
object-oriented interface.
2. Database independence.
The PDO extension is designed to be compatible with multiple databases
with little effort on the part of the user, provided standard SQL is used in all
queries.
3. Connections to the database are made with a Data Source Name or DSN. A
DSN is a string that contains all of the information necessary to connect to a
database, such as ‘mysql:dbname-test_db’.