Introduction to Web Programming SCSC Mentoring Special Class
Made Harta Dwijaksara 2014-06-24
Slide 2
Content Introduction 3 Tier Architectures Web Server (Apache)
Client Side Programming HTML, CSS, and Java Script Server Side
Programming PHP and MySQL 2
Slide 3
Introduction Internet : is a global system of interconnected
computer networks that use the standard Internet protocol
suite(TCP/IP) to link several billion devices worldwide
(wikipedia).computer networksInternet protocol suite How can the
interconnected devices talk each others? through protocol stack on
network layer. 3
Slide 4
Introduction Network Layer (OSI 7 Layers) Internet Link Ex.
User Request (HTTP, Telnet, SSH, RPC, etc.) TCP/UDP (port) IP
4
Slide 5
3 Tier Architectures Multi-tier architecture is a clientserver
architecture in which presentation, application processing, and
data management functions are physically separated.clientserver
architecture 5
Slide 6
3 Tier Architectures of Web Comprise of : Web-Client, Web
Server, Database Server 1.Web server running a service on port
80/8080 for HTTP (web) service 2.User Browsing (IE, Chrome,
Opera,etc.) HTTP(s) request to Web Server (http://....) 3.Web
server process the request and gives the HTTP response (web page
content) 4.Web browser takes the response and display through web
browser GUI 6
Slide 7
Packet Capturing using WireShark HTTP request 7
Slide 8
Packet Capturing using WireShark HTTP response 8
Slide 9
Web Technology (Tools) Each tier has different technology
solution Run on client Computer Run on server (web server) Run on
server (database server) 9
Slide 10
Web Server (Apache HTTP Server) Web server is a program that
generate and transmit response to client request for web resource
Handling a client request consists of several key steps Parsing the
request message Checking that the request is authorized associating
the URL in the request with a file name Constructing the response
message Transmitting the response message to the requesting client
Web Server vs Web Site Web-site consist of a collection of
web-pages associated with a particular hostname Web server is a
program to satisfy client request for web resource 10
Slide 11
Web Server (Apache HTTP Server) The Apache HTTP Server Freely
Available Binaries and Source Code Cross platform implementation
Became the #1 Web Server on the Internet in less than a year
Getting Started Download :
http://apache.mirror.cdnetworks.com//httpd/binaries/
http://apache.mirror.cdnetworks.com//httpd/binaries/ Run the
installer file.msi and follow the instruction Open port 80 (8080 in
case you need to use HTTPS) Allow the httpd service to use the port
11
Slide 12
Web Server (Apache HTTP Server) Little Introduction to
Configuration File Listen Port Listen 80 o the port address where
the httpd service should listen to request LoadModule LoadModule
php5_module php5apache2_4.dll o There a lot of modules can be added
to apache ServerName ServerName www.snu.ac.krwww.snu.ac.kr o The
server name registered on DNS (can be changed with IP address)
DocumentRoot DocumentRoot C:/file/WEB o The location of your web
page data (web page resource) 12
Slide 13
Setting Up Web Site (Apache HTTP) Creating Home Director Create
a directory with the following structure MYHOME Ex. D:/WWW/MYHOME
or /usr/www/MYHOME Change the configuration file Setting the
listening port to 80 Set the DocumentRoot to the path of previously
made home directory Run the apache httpd service Test your first
server http://127.0.0.1/http://127.0.0.1/ If there is no error it
will show it works 13
Slide 14
14
Slide 15
Client Side (HTML) HTML : HyperText Markup Language is the
standard markup language used to create web pages. Another markup
language : XML, SGML, XHTML, etc. Version (W3School :
www.w3schools.com) HTMLHTML+HTML 2.0HTML 3.2 HTML 4.01 XHTMLHTML5
1991199319951997199920002012 15
Slide 16
HTML : HyperText Markup Language HTML Basic index.html Preview
on browser http://localhost/index.htmlhttp://localhost/index.html
16
Slide 17
HTML : HyperText Markup Language Some HTML tags
(www.w3schools.com) 17
Slide 18
HTML5 Tags HTML5 Tags The New Element New Media Elements
TagDescription Defines sound or music content Defines containers
for external applications (like plug-ins) Defines sources for and
Defines tracks for and Defines video or movie content
TagDescription Defines graphic drawing using JavaScript 18
Slide 19
Client Side (CSS) CSS : Cascading Style Sheet is a style sheet
language used for describing the look and formatting of a document
written in a markup language. Inline CSS External CSS 19
Slide 20
Client Side (CSS) CSS Selector : allow you to select and
manipulate HTML element(s). The element Selector The id Selector
keyword id= on html tag The class Selector keyword class= on html
tag 20
Slide 21
CSS3 Modules CSS3 has been split into "modules". It contains
the "old CSS specification" (which has been split into smaller
pieces). In addition, new modules are added. CSS3 Border Properties
CSS3 Background Properties PropertyDescriptionCSS border-imageA
shorthand property for setting all the border-image-* properties3
border-radiusA shorthand property for setting all the four
border-*-radius properties3 box-shadowAttaches one or more
drop-shadows to the box3 PropertyDescriptionCSS
background-clipSpecifies the painting area of the background
images3 background-originSpecifies the positioning area of the
background images3 background-sizeSpecifies the size of the
background images3 21
Slide 22
HTML : HyperText Markup Language Designing : Web Layout WEB
BANNER LEFT NAVIGATI ON FOOTER RIGHT NAVIGATI ON MAIN CONTENT MAIN
NAVIGATION 22
Slide 23
WEB DESIGN: HTML + CSS 23
Slide 24
24
Slide 25
Client Side Programming (JavaScript) Why JavaScript? :
JavaScript is one of 3 languages all web developers MUST learn:
HTML to define the content of web pages CSS to specify the layout
of web pages JavaScript to program the behavior of web pages
Example Scenario Web Page (Client Side) Web Engine (Server Side)
request response The request format should be verified on the
client side thus verification process will not burden the web
server 25
Slide 26
Client Side Programming (JavaScript) In-line Script External
Script HTML file JavaScript file
http://www.w3schools.com/jsref/default.asp 26
Slide 27
Server Side Programming (PHP) What is PHP? PHP is an acronym
for "PHP Hypertext Preprocessor" PHP is a widely-used, open source
scripting language PHP scripts are executed on the server PHP costs
nothing, it is free to download and use Why is PHP? Runs on various
platforms (Windows, Linux, Unix, Mac OS X) Compatible with almost
all servers used today (Apache, IIS, etc.) PHP supports a wide
range of databases PHP is free. Download it from the official PHP
resource: www.php.netwww.php.net PHP is easy to learn and runs
efficiently on the server side PHP test : phpinfo() 27
Slide 28
Server Side Programming (PHP) PHP file (*.php)
http://www.php.net/manual/en/tutorial.php
http://www.php.net/manual/en/tutorial.php PHP code: PHP comment:
28
Slide 29
Database Management MYSQL MySQL is the world's most popular
open source database. Installation Download :
http://dev.mysql.com/downloads/windows/installer/http://dev.mysql.com/downloads/windows/installer/
Run installer and follow instruction Go to PHP installation
directory and update php.ini file Uncomment
;extension=php_mysql.dll Check the phpinfo(); 29
Slide 30
Database Management MYSQL Access Database : Command Prompt
Create User Ex: create user admin@localhost identified by admin;
Create Database Ex: create database mywebpage Grant database access
to user admin Ex: grant all on mywebpage.* to admin@localhost;
30
Slide 31
Database Management MYSQL Create Table for Web Page User Table
create table user ( userid varchar(20), password varchar(20),
fullname varchar(20), email varchar(20), primary key(userid), );
Article Table create table article ( userid varchar(20), title
varchar(50), content text, date varchar(20), primary key (userid,
date); ); 31
Slide 32
PHP + MySQL : Connection Connection Preparation Database
Connect SQL Query Close Connection $mysql_host ="localhost";// IP
address or hostaname $mysql_user = "admin"; $mysql_pass = "admin";
$mysql_db = "webpage"; $mysql_table_user = "user;
mysql_connect($mysql_host,$mysql_user,$mysql_pass) or
die(mysql_error()); mysql_select_db($mysql_db) or
die(mysql_error());; $sql = "insert into $mysql_table_user (userid,
password, fullname, email) values
('$new_user','$new_pass','$new_name','$new_email')";
mysql_query($sql) or die(mysql_error()); mysql_close($con); 32
Slide 33
Dynamic Web Page (1) Scenario User Login to get access to
update the web-page User add new article to web-page The query is
forwarded by web server to database server Web Client (Browser) Web
Server (PHP) User Login Database (MySQL) Login Request Login
Verification Login Response Login success Add Data Add data Request
Update Database 33
