Transcript Introduction to Web Programming

Introduction to Web Programming
SCSC Mentoring Special Class
Made Harta Dwijaksara – 2014-06-24
Content




Introduction
3 Tier Architectures
Web Server (Apache)
Client Side Programming


HTML, CSS, and Java Script
Server Side Programming

PHP and MySQL
2
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).
How can the interconnected
devices talk each others?
through protocol stack on
network layer.
3
Introduction

Network Layer (OSI 7 Layers)
Ex. User Request
(HTTP, Telnet,
SSH, RPC, etc.)
TCP/UDP (port)
IP
Internet Link
4
3 Tier Architectures

Multi-tier architecture is a client–server architecture in
which presentation, application processing, and data
management functions are physically separated.
5
3 Tier Architectures of Web

1.
2.
3.
4.
Comprise of : Web-Client, Web Server, Database Server
Web server running a service on port 80/8080 for HTTP (web) service
User Browsing (IE, Chrome, Opera ,etc.)  HTTP(s) request to Web Server (http://....)
Web server process the request and gives the HTTP response (web page content)
Web browser takes the response and display through web browser GUI
6
Packet Capturing using WireShark

HTTP request
7
Packet Capturing using WireShark

HTTP response
8
Web Technology (Tools)

Each tier has different technology solution
Run on client
Computer
Run on server
(web server)
Run on server
(database server)
9
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
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/
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
Web Server (Apache HTTP Server)

Little Introduction to Configuration File
•
Listen Port  Listen 80
o
•
LoadModule  LoadModule php5_module “php5apache2_4.dll”
o
•
There a lot of modules can be added to apache
ServerName  ServerName www.snu.ac.kr
o
•
the port address where the httpd service should listen to request
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
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/

If there is no error it will show “it works”
13
14
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)
HTML
1991
HTML+
HTML 2.0
1993
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
HTML5
2000
2012
15
HTML : HyperText Markup Language

HTML Basic  index.html

Preview on browser  http://localhost/index.html
16
HTML : HyperText Markup Language

Some HTML tags (www.w3schools.com)
17
HTML5 Tags

HTML5 Tags

The New <canvas> Element
Tag
Description
<canvas>
Defines graphic drawing using JavaScript

New Media Elements
Tag
Description
<audio>
Defines sound or music content
<embed>
Defines containers for external applications (like plug-ins)
<source>
Defines sources for <video> and <audio>
<track>
Defines tracks for <video> and <audio>
<video>
Defines video or movie content
18
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
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
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
Property

Description
CSS
border-image
A shorthand property for setting all the border-image-* properties
3
border-radius
A shorthand property for setting all the four border-*-radius properties
3
box-shadow
Attaches one or more drop-shadows to the box
3
CSS3 Background Properties
Property
Description
CSS
background-clip
Specifies the painting area of the background images
3
background-origin
Specifies the positioning area of the background images
3
background-size
Specifies the size of the background images
3
21
HTML : HyperText Markup Language

Designing : Web Layout
WEB BANNER
MAIN NAVIGATION
LEFT
NAVIGATI
ON
MAIN CONTENT
RIGHT
NAVIGATI
ON
FOOTER
22
WEB DESIGN: HTML + CSS
23
24
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
request
Web Page
(Client Side)
response
Web Engine
(Server Side)
The request format should be verified on the client side thus
verification process will not burden the web server
25
Client Side Programming (JavaScript)

In-line Script

External Script
HTML file
JavaScript file
http://www.w3schools.com/jsref/default.asp
26
Server Side Programming (PHP)

What is PHP?





Why 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
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.net
PHP is easy to learn and runs efficiently on the server side
PHP test : phpinfo()
27
Server Side Programming (PHP)

PHP file (*.php)  http://www.php.net/manual/en/tutorial.php

PHP code:
<?php
// PHP code goes here  include();
?>

PHP comment:
<?php
// This is a single line comment
# This is also a single line comment
/*
This is a multiple lines comment block
that spans over more than
one line
*/
?>
28
Database Management MYSQL


MySQL is the world's most popular open source
database.
Installation



Download : 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
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
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
PHP + MySQL : Connection

Connection Preparation
$mysql_host ="localhost"; // IP address or hostaname
$mysql_user = "admin";
$mysql_pass = "admin";
$mysql_db = "webpage";
$mysql_table_user = "user“;

Database Connect
mysql_connect($mysql_host,$mysql_user,$mysql_pass) or die(mysql_error());
mysql_select_db($mysql_db) or die(mysql_error());;

SQL Query
$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());

Close Connection
mysql_close($con);
32
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)
Login
Request
Login
Verification
Login
success
Login
Response
Add data
Request
User Login
Web Server
(PHP)
Database
(MySQL)
Update
Database
Add Data
33
Dynamic Web Page (2)
34
Thank you!
35