Web Design and Programming

(Perancangan dan Pemrograman Web)

CODE: IKI 20840

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 Inline Styles

5.3 Embedded Style Sheets

5.4 Conflicting Styles

5.5 Linking External Style Sheets

5.6 W3C CSS Validation Service

5.7 Positioning Elements

5.8 Backgrounds

5.9 Element Dimensions

5.10 Text Flow and the Box Model

5.11 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 (Sentinel-

Controlled 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 Arrays

14.3 Declaring and Allocating Arrays

14.4 Examples Using Arrays

14.5 Random Image Generator Using Arrays

14.6 References and Reference Parameters

14.7 Passing Arrays to Functions

14.8 Sorting Arrays

14.9 Searching Arrays: Linear Search and Binary Search

14.10 Multidimensional Arrays

14.11 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.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

17.4 Creating a Projector (.exe) File with Publish

17.5 Manually Embedding a Flash Movie in a Web Page

17.6 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

17.7 Creating a Web-Site Introduction

17.8 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 File System Objects

20.7 Session Tracking and Cookies

20.8 ActiveX Data Objects (ADO)

20.9 Accessing a Database from an Active Server Page

20.10 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 Topics Assignment Delivery

1 Introduction to Computers and the

Internet

Setting up Web Environment

Class Lecture

2 Introduction to XHTML Assignment 1 Class Lecture

3 Cascading Style Sheets (CSS) Class Lecture

4 Creating Web Graphics using Adobe

Photoshop

Assignment 2 Class Lecture

5 Page Design Principles

Site Design Principles

Class Lecture

6 JavaScript: Introduction to Script

Control Statements in Javascript I

Class Lecture

7 Control Statements in Javascript I

Javascript Functions

Assignment 3 Class Lecture

8 Javascript Arrays Mid Semester

Exam

Class Lecture

9 Dynamic HTML: Object Model

Dynamic HTML: event Model

Class Lecture

10 Macromedia Flash: Building Interactive

Animations

Macromedia Dreamweaver

Class Lecture

11 Introduction to Server-side

Programming with PHP

Class Lecture

12 Introduction to Server-side

Programming with ASP

Assignment 4 Class Lecture

13 Object Oriented Programming in PHP Class Lecture

14 Framework and Model-View-Controller

Programming style in P

Class Lecture

15 AJAX Programming Assignment 5 Class Lecture

16 Studium General Class Lecture