01.
Introduction to Web
Design and
Programming
Perancangan & Pemrograman Web
Outline
● Background and Introduction
● The Web timeline
● Web Basics
● HTML5, CSS3, JavaScript, and JQuery
● Cient-Side Scripting vs. Server-Side Scripting
● Web Browsers
● Web Application Development
● Responsive Web Design
PERANCANGAN DAN PEMROGRAMAN WEB SEMESTER GANJIL 2017/2018
Background
oHistory of internet
◦ 1969: ARPANET. Early technology, limited access.
Funded by US Department of Defense.
First internet transmission between UCLA and
Standford by UCLA graduate student Charley Kline*.
◦ 1982: Computer Science Network (CSNet).
The emerging of internet to the public.
◦ 1986: UInet. Maintained by R.M. Samik Ibrahim.
◦ 1990: Sir Tim Berners-Lee invented the World Wide
Web (WWW). He developed three fundamental
technologies: HTML, URI, HTTP.
oDefinition: The Internet vs internet?
*http://mailblog.aol.com/2011/10/28/a-conversation-with-internet-pioneer-charley-kline
Introduction
Internet Users: 51% of World Population
Source: http://www.internetworldstats.com/stats.htm
Internet
https://www.digitalunite.com/sites/default/files/images/The-internet.jpg
The Web Timeline
How Internet works?
Client
Client
Web Server
Sumber: https://turbofuture.com/internet/How-The-Internet-Works-In-a-Nutshell
Web Programming
o The Internet and web programming technologies you’ll learn
in this book are designed to be portable, allowing you to
design web pages and applications that run across an
enormous range of Internet-enabled devices.
o Client-side programming technologies are used to build
web pages and applications that are run on the client (i.e., in
the browser on the user’s device).
o Server-side programming—the applications that respond to
requests from client-side web browsers, such as searching
the Internet, checking your bank-account balance, ordering a
book from Amazon, bidding on an eBay auction and
ordering concert tickets.
Web Basics
(Request and Receive Response)
HTTP Request: GET /books/downloads.html HTTP/1.1
Web Basics
(Request and Receive Response)
HTTP Response: HTTP/1.1 200 OK
How do we code in PPW
Laptop B CI / CD
Gitlab Pipeline
Commit
Code using
GIT push
The Internet
Accessing
the web page
Laptop A
HP XYZ HP ABC
What is Git?
ogit is a versioning tool created by Linus
Torvald. He created the tools to review and
combine contribution to his Linux kernel
from thousandof programmer around the
globe.
owe can see “git” as similar to dropbox,
onedrive, google but it is made for
programmer.
oit provides powerful tools for:
◦ text processing, version control and
◦ merge source code from differents programmer
concurrently and efficiently
Git 101
o Clone:
# git clone [url]
oCommit:
# git commit -a
oPush:
# git push
oPull:
# git pull
Client vs Server Side Scripting
CLIENT SIDE SCRIPTING SERVER SIDE SCRIPTING
- Runs on the user’s computer - Executed on the web server
(Browser or scripting host)
- Depends on browser → - Not depend on client: Wide
Browser must support the Range Programmatic
scripting language capabilities→ Programmers
have more flexibility
- User can view the script by - User cannot view the source
using the browser’s source code because the response is
viewing capability an HTML Page
Illlustration Client Side - Server Side
Client Side Scripting Languages
Server Side Scripting Language
Responsive Web Design
Framework for Responsive Web
Web Application Development
There are several trend, tools and best practices uses in Web
Application Development. In this course, student will be taught on
those best practice in different level of understanding:
Understand how it work: (detail explanation is given)
o Client side: Bootstrap
o Web Application Framework: Django
Understand how to do it: (basic concept is explained)
o Version Control, code repository: gitlab
o Test Driven Development: TDD
Know how to use it: (provided for you in the tutorial)
o Continous Integration: gitlab pipelines
o Cloud Computing Deployment: Heroku
o Authentication: oauth, (e.g. login by google account)
Multi-tiered Application Architecture
(Domain Name System)
DNS Resolving
What is DNS, and why we need it?
oDNS is like a phone book for the Internet. If
you know a person’s name but don’t know
their telephone number, you can simply
look it up in a phone book. DNS provides
this same service to the Internet, resolving
name to IP Address.
oEvery Client (Browser, Mobile Phone)
always resolving DNS to IP before
accessing the Server
DNS Resolving
