Web Design and Programming

(Perancangan dan Pemrograman Web)

IKI 20840

CODE:
DESCRIPTION:

OBJECTIVES:
This subject teaches students to design web pages, to plan and implement websites, and to program
dynamic websites. Upon completion of this subject, students are exepected to have the knowledge of
building good and usable web pages and to be able to implement dynamic website contents using
client-side and server-side programming paradigms.
COURSE OUTLINE
HTML and CSS, which are the basic building block of webpages, are the first two topics covered in this
subject. This subject then discusses dynamic web presentation using javascript. Javascript is also the
foundation of ajax programming style which is introduced at the end of the program. Server-side
programming is then discussed using PHP and ASP languages. To enrich web presentations, this subject
also discusses image creation for web pages and dynamic presentation using macromedia flash.
CREDIT UNIT: 3 SKS
REFERENCE:
Internet & World Wide Web How to Program, 3e, Deitel Deitel Goldberg
COURSE STRUCTURE:
Week 1
1 - Introduction to Computers and the Internet
1.1
Introduction
1.2
What Is a Computer?
1.3
Programming Language Types
1.4
Other High-Level Languages
1.5
Structured Programming
1.6
History of the Internet
1.7
Personal Computing
1.8
History of the World Wide Web
1.9
World Wide Web Consortium (W3C)
1.10 Hardware Trends
1.11 Key Software Trend: Object Technology
1.12 JavaScript: Object-Based Scripting for the Web
1.13 Browser Portability
1.14 C and C++
1.15 Java
1.16 Microsoft .NET
1.17 Dynamic HTML

2 - Setting up Web Environment

2.1
Server
2.2
Operating System
2.2
HTTP Request Types
2.3
System Architecture
2.4
Client-Side Scripting versus Server-Side Scripting
2.5
Accessing Web Servers
2.6
Microsoft Internet Information Services (IIS)
21.6.1 Microsoft Internet Information Services (IIS) 5.0
21.6.2 Microsoft Internet Information Services (IIS) 6.0
2.7
Apache Web Server
2.8
Website Setup

Week 2
3 - Introduction to XHTML: Part 1
3.1
Introduction
3.2
Editing XHTML
3.3
First XHTML Example
3.4
W3C XHTML Validation Service
3.5
Headers
3.6
Linking
3.7
Images
3.8
Special Characters and More Line Breaks
3.9
Unordered Lists
3.10 Nested and Ordered Lists

4 - Introduction to XHTML: Part 2

4.1
Introduction
4.2
Basic XHTML Tables
4.3
Intermediate XHTML Tables and Formatting
4.4
Basic XHTML Forms
4.5
More Complex XHTML Forms
4.6
Internal Linking
4.7
Creating and Using Image Maps
4.8
meta Elements
4.9
frameset Element
4.10 Nested framesets

Week 3
5 - Cascading Style Sheets (CSS)
5.1
Introduction

5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11

Inline Styles
Embedded Style Sheets
Conflicting Styles
Linking External Style Sheets
W3C CSS Validation Service
Positioning Elements
Backgrounds
Element Dimensions
Text Flow and the Box Model
User Style Sheets

6 - More on Cascading Style Sheets (CSS)

6.1
Styles
6.2
Developing styles
6.3
Browser Compatibility
Week 4
7 - Adobe Photoshop Elements: Creating Web Graphics
7.1
Introduction
7.2
Image Basics
7.3
Vector and Raster Graphics
7.4
Toolbox
3.4.1 Selection Tools
3.4.2 Painting Tools
3.4.3 Shape Tools
7.5
Layers
7.6
Screen Capture
7.7
File Formats: GIF, JPEG and PNG
7.8
Web Resources

Week 5
8 - Page Design Principles
9 - Site Design Principles
Week 6
10 - JavaScript: Introduction to Scripting
10.1 Introduction
10.2 Simple Program: Printing a Line of Text in a Web Page
10.3 Obtaining User Input with prompt Dialogs
10.3.1 Dynamic Welcome Page
10.3.2 Adding Integers
10.4 Memory Concepts
10.5 Arithmetic
10.6 Decision Making: Equality and Relational Operators

11 - JavaScript: Control Statements I

11.1 Introduction
11.2 Algorithms
11.3 Pseudocode
11.4 Control Structures
11.5 if Selection Statement
11.6 if...else Selection Statement
11.7 while Repetition Statement
11.8 Formulating Algorithms: Case Study 1 (Counter-Controlled Repetition)
11.9 Formulating Algorithms with Top-Down, Stepwise Refinement: Case Study 2 (SentinelControlled Repetition)
11.10 Formulating Algorithms with Top-Down, Stepwise Refinement: Case Study 3 (Nested
Control Structures)
11.11 Assignment Operators
11.12 Increment and Decrement Operators
11.13 Note on Data Types
Week 7
12 - JavaScript: Control Statements II
12.1 Introduction
12.2 Essentials of Counter-Controlled Repetition
12.3 for Repetition Statement
12.4 Examples Using the for Statement
12.5 switch Multiple-Selection Statement
12.6 do...while Repetition Statement
12.7 break and continue Statements
12.8 Labeled break and continue Statements
12.9 Logical Operators
12.10 Summary of Structured Programming

13 - JavaScript: Functions
13.1 Introduction
13.2 Program Modules in JavaScript
13.3 Programmer-Defined Functions
13.4 Function Definitions
13.5 Random-Number Generation
13.6 Example: Game of Chance
13.7 Another Example: Random Image Generator
13.8 Scope Rules
13.9 JavaScript Global Functions
13.10 Recursion
13.11 Recursion vs. Iteration
Week 8
14 - JavaScript: Arrays
14.1 Introduction

14.2
14.3
14.4
14.5
14.6
14.7
14.8
14.9
14.10
14.11

Arrays
Declaring and Allocating Arrays
Examples Using Arrays
Random Image Generator Using Arrays
References and Reference Parameters
Passing Arrays to Functions
Sorting Arrays
Searching Arrays: Linear Search and Binary Search
Multidimensional Arrays
Building an Online Quiz

Week 9
15 - Dynamic HTML: Object Model and Collections
15.1 Introduction
15.2 Object Referencing
15.3 Collections all and children
15.4 Dynamic Styles
15.5 Dynamic Positioning
15.6 Using the frames Collection
15.7 navigator Object
15.8 Summary of the DHTML Object Model
16 - Dynamic HTML: Event Model
16.1 Introduction
16.2 Event onclick
16.3 Event onload
16.4 Error Handling with onerror
16.5 Tracking the Mouse with Event onmousemove
16.6 Rollovers with onmouseover and onmouseout
16.7 Form Processing with onfocus and onblur
16.8 More Form Processing with onsubmit and onreset
16.9 Event Bubbling
16.10 More DHTML Events

Week 10
17 Macromedia Flash: Building Interactive Animations
17.1 Introduction
17.2 Flash Movie Development
17.3 Learning Flash with Hands-On Examples
17.3.1 Creating a Shape with the Oval Tool
17.3.2 Adding Text to a Button
17.3.3 Converting a Shape into a Symbol
17.3.4 Editing Button Symbols
17.3.5 Adding Keyframes
17.3.6 Adding Sound to a Button

17.4
17.5
17.6

17.7
17.8

17.3.7 Verifying Changes with Test Movie

17.3.8 Adding Layers to a Movie
17.3.9 Animating Text with Tweening
17.3.10 Adding a Text Field
17.3.11 Adding ActionScript
Creating a Projector (.exe) File with Publish
Manually Embedding a Flash Movie in a Web Page
Creating Special Effects with Flash
16.6.1 Importing and Manipulating Bitmaps
16.6.2 Creating an Advertisement Banner with Masking
16.6.3 Adding Online Help to Forms
Creating a Web-Site Introduction
ActionScript

18 - Macromedia Dreamweaver
18.1 Introduction
18.2 Macromedia Dreamweaver
18.3 Text Styles
18.4 Images and Links
18.5 Symbols and Lines
18.6 Tables
18.7 Forms
18.8 Scripting in Dreamweaver
18.9 Site Management
Week 11
19 - Introduction to Server-side Programming with PHP
19.1 Introduction
19.2 PHP
19.3 String Processing and Regular Expressions
19.4 Viewing Client/Server Environment Variables
19.5 Form Processing and Business Logic
19.6 Verifying a Username and Password
19.7 Connecting to a Database
19.8 Cookies and Sessions
19.9 Dynamic Content in PHP
19.10 Operator Precedence Chart

Week 12
20 - Active Server Pages (ASP)
21.1 Introduction
20.2 How Active Server Pages Work
20.3 Setup
20.4 Active Server Page Objects
20.5 Simple ASP Examples

20.6
20.7
20.8
20.9
20.10

File System Objects

Session Tracking and Cookies
ActiveX Data Objects (ADO)
Accessing a Database from an Active Server Page
Server-Side ActiveX Components

21 - Accessibility
21.1 Introduction
22.2 Web Accessibility

Week 13
22 - Object Oriented Programming in PHP

Week 14
Framework and Model-View-Controller Programming style in PHP
Week 15
AJAX Programming
Week 16
Studium General

COURSE DELIVERY
Assignment
: 75%
Mid Semester Exam: 25%

Week
1

Topics
Introduction to Computers and the
Internet
Setting up Web Environment
Introduction to XHTML
Cascading Style Sheets (CSS)
Creating Web Graphics using Adobe
Photoshop
Page Design Principles
Site Design Principles
JavaScript: Introduction to Script
Control Statements in Javascript I
Control Statements in Javascript I
Javascript Functions
Javascript Arrays

2
3
4

Dynamic HTML: Object Model

Dynamic HTML: event Model

Class Lecture

10

Class Lecture

11

12

13
14

15
16

Macromedia Flash: Building Interactive

Animations
Macromedia Dreamweaver
Introduction to Server-side
Programming with PHP
Introduction to Server-side
Programming with ASP
Object Oriented Programming in PHP
Framework and Model-View-Controller
Programming style in P
AJAX Programming
Studium General

5
6
7
8

Assignment

Assignment 1
Assignment 2

Delivery
Class Lecture

Class Lecture
Class Lecture
Class Lecture
Class Lecture
Class Lecture

Assignment 3

Class Lecture

Mid Semester
Exam

Class Lecture

Class Lecture
Assignment 4

Class Lecture
Class Lecture
Class Lecture

Assignment 5

Class Lecture
Class Lecture