SPT-02/PM-01/SOP-05/Form-17-Rev.

0
INFORMATION SYSTEMS STUDY PROGRAM
FACULTY OF ENGINEERING AND INFORMATICS
UNIVERSITAS MULTIMEDIA NUSANTARA
EVEN SEMESTER ACADEMIC YEAR 2022-2023

IS556– WEB DESIGN AND DEVELOPMENT

Week 06 – Server-Side Web Analysis, Design, and Development
Lecturers:
Monika Evelin Johan
Budi Berlinton Sitorus
Nofriyadi Nurdam
Haditya Setiawan

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 1

Weekly Course Learning Outcomes (Sub-CLO):

1. SUB-CLO 07: Students are able to design relational databases to build an information system
application based on an analysis of organizational, business or research interests. (C5)

2. SUB-CLO 08: Students are able to use server-side programming language (PHP) to perform the
Create, Retrieve, Update and Delete (CRUD) processes on relational database. (C5)

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 2

Sub-topics
• Analysis of organization requirement
• Relational Database
• Server-side programming language (PHP)
• CRUD from relational database

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 3

Part I
• Analysis of organization requirement

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 4

Training Needs Analysis
• Training Needs Analysis is a process that a business goes through in
order to determine all the training that needs to be completed in a
certain period to allow their team to complete their job as
effectively as possible, as well as progress and grow.
• Includes:
• Decide On Skill Sets
• Evaluate The Skills Of Staff
• Highlight The Skills Gap

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 5

Decide On Skill Sets
• The first stage is to decide on the skill sets that required by all team
members to have in order to do their jobs properly.
• This means looking at every job role within business separately and
considering things like the different departments or levels of
seniority which will affect this as well.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 6

Evaluate The Skill of Staff
• Purposes:
• to look at all team members and evaluate their current skill levels in
relation to the skills laid out in the first stage of this process.
• to see who is meeting expectations, and who needs to complete further
training in order to meet the expected skill level.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 7

Highlight The Skill Gap
• Know where you want team to be and the level they are currently at.
• The gap (if any) that has appeared between the two will be easily seen.
• The training is to help and ensure the team is at the level expected.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 8

Benefit for Your Business
• Identify knowledge gaps before they become a problem.
• Helps to plan training for the year.
• Highlights training may not have been considered.
• Ensures training is focusing on the right areas.
• Helps to decide who should attend which training sessions.
• Helps to priorities training needs.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 9

Part II
• Relational Database

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 10

Relational Database
• SQL was developed by the IBM Corporation in the late 1970s.
• It was endorsed as a national standard by the American National
Standards Institute (ANSI) in 1986 and by the International
Organization for Standardization (ISO).
• Although there is an SQL standard, that does not mean that SQL is
standardized across DBMS products.
• Indeed, each DBMS implements SQL in its own peculiar way, and
you will have to learn the idiosyncrasies of the SQL dialect your
DBMS uses.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 11

Relational Database

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 12

Relational Database
• SQL is called a data sublanguage because it has only those
statements needed for creating and processing database data and
metadata

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 13

Relational Model and Normalization
Example 1: Table that contains items that illustrate very bad practices

Sample case: On different dates, Charlie Smith has ordered three items, and his address is repeated three times. If he changed
his address, we would need to amend three rows in the table.
Charlie’s name and address should be kept in a separate table; this would allow us the ability to change his address only once.
Stock levels usually change. We currently would have to scroll through the records to determine the lowest stock level for a
particular item. The stock level and the product description should be kept in another table so only one table would need updating
when the stock level changes.
The user and the administrator can then easily see an accurate figure for the stock level when the product is displayed.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 14

Relational Model and Normalization
• Normalization is the process of eliminating duplicates and other maintenance
problems.
• Normalization is achieved by applying rigorous atomicity and splitting the data into
several tables, instead of using just one table, so that each table has a specific and
singular purpose.
• Also, the information in each table must have closely related data, such as first name,
last name, and e-mail address; if the customer changes his or her e-mail address, you
have to amend only one record.
• Normalization allows a database to be easily extended so that it can hold more types
of information. For instance, a table could be added to hold the colors of the phones,
or you could have a table for dispatch dates.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 15

Relational Model and Normalization
• For an example of normalization: The first name and last name should be in separate
columns. The address should be split into separate columns for the street, town, and
ZIP code or postal code. This process is known by the rather clumsy name of atomicity
because, like atoms, the data is separated into minimal components. It is then atomic
or indivisible.
• Normalization can be difficult to understand at first, but you will be automatically
normalizing your tables if you apply atomicity and then group closely related data into
separate tables.
• By breaking data down to the lowest level, you allow for future growth and better data
control, and you leave yourself with more options in the future to modify and
manipulate the data.
• Being able to have a one-to-many relationship on multiple tables ensures less data
redundancy.
IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 16
Relational Model and Normalization
• For an example of normalization: The first name and last name should be in separate
columns. The address should be split into separate columns for the street, town, and
ZIP code or postal code. This process is known by the rather clumsy name of atomicity
because, like atoms, the data is separated into minimal components. It is then atomic
or indivisible.
• Normalization can be difficult to understand at first, but you will be automatically
normalizing your tables if you apply atomicity and then group closely related data into
separate tables.
• By breaking data down to the lowest level, you allow for future growth and better data
control, and you leave yourself with more options in the future to modify and
manipulate the data.
• Being able to have a one-to-many relationship on multiple tables ensures less data
redundancy.
IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 17
Relational Model

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 18

Important Relational Terms

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 19

Characteristics of Relation

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 20

Functional Dependencies
• Functional dependencies are the heart of the database design
process, and it is vital to understand it.
• For example:
• NumberOfBoxes --> CookieCost
• NumberOfBoxes determines CookieCost.
• The variable NumberOfBoxes, is called the determinant

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 21

Functional Dependencies
• ExtendedPrice = Quantity * UnitPrice
• ExtendedPrice is functionally dependent on Quantity and UnitPrice
• (Quantity, UnitPrice) -> ExtendedPrice
• the composite (Quantity, UnitPrice ) is determinant

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 22

Advantages and Disadvantages of
Normalization

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 23

Part III
• Server-Side Programming Language

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 24

Recall: Front-end vs. Back-end
• Create different server-side vs. client-side programming of the
following aspect?
• purposes and concerns
• languages
• operating system environments
• web frameworks

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 25

Client-side vs. Server-side

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 26

Client-side vs. Server-side

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 27

When and Why use Server-side?
• Most large-scale websites
• Tailor website content for individual users
• Interaction with users of the site
• Sending notifications and updates via email or through other
channels
• Efficiently deliver information tailored for individual users
• A much better user experience.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 28

Benefits
• Efficient storage and delivery of information
• Customized user experience
• Controlled access to content
• Store session/state information
• Notifications and communication
• Data analysis

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 29

Static Site

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 30

Dynamic Site

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 31

Server-side programming language: PHP
• The PHP Hypertext Preprocessor (PHP) is a programming language
that allows web developers to create dynamic content that
interacts with databases.
• PHP is basically used for developing web-based software
applications.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 32

Characteristics Applications
• Simplicity • Performs system functions
• Efficiency • Handle forms
• Add, delete, and modify
• Security elements within the
• Flexibility database
• Familiarity • Access cookies variables and
set cookies.
• Restrict users to access some
pages of your website.
• encrypt data.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 33

Output

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 34

Vital Components
• Web Server
• Database
• PHP Parser

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 35

PHP Tags

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 36

Single Line Comments

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 37

Multi-lines Comments

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 38

Multi-lines Printing

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 39

Others for your attention
• whitespace insensitive
• case sensitive
• Semicolon terminate Statements
• Expressions are combinations of tokens
• Braces make blocks

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 40

Part IV
• CRUD for Relational Database

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 41

CRUD PHP Application
• CRUD is an acronym for Create, Read, Update, and Delete.
• CRUD operations are basic data manipulation for databases. PHP
application is able to perform all operations on a SQL database table
in one place.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 42

CRUD PHP Steps
Create Database.sql
Create file config.php
• Create file index.php

• Create file add.php

• Create file edit.php

• Create file delete.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 43

Creating the Database Table Example

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 44

Creating the Config File Example

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 45

Create index.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 46

Create index.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 47

Create add.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 48

Create add.php (Cont.)

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 49

Create add.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 50

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 51
Create update.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 52

Create update.php (Cont.)

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 53

Create update.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 54

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 55
Create delete.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 56

Create delete.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 57

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 58
THANK YOU
Don’t forget to take the quiz ☺

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 59

References
• Felke-Morris, T. A. (2018). Web Development and Design
Foundations with HTML5, Global Edition (8th ed.). Pearson
International Content.
https://umnlibrary.vitalsource.com/books/9781292164083
• Robins, J. N. (2018). Learning Web Design: A Beginner’s Guide to
HTML, CSS, JavaScript, and Web Graphics 5th Ed. O’Reilly Media.
• Adrian W. West, Steve Prettyman - Practical PHP 7, MySQL 8, and
MariaDB Website Databases_ A Simplified Approach to Developing
Database-Driven Websites (2018, Apress) - libgen.lc
• https://www.w3schools.com/

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 60