introduction to web programming
DESCRIPTION
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. Introduction. - PowerPoint PPT PresentationTRANSCRIPT
Introduction to Web Programming
SCSC Mentoring Special ClassMade Harta Dwijaksara – 2014-06-24
2
Content Introduction 3 Tier Architectures Web Server (Apache) Client Side Programming
HTML, CSS, and Java Script Server Side Programming
PHP and MySQL
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).
How can the interconnected devices talk each others?
through protocol stack on network layer.
4
Introduction Network Layer (OSI 7 Layers)
Internet Link
Ex. User Request(HTTP, Telnet, SSH, RPC, etc.)
TCP/UDP (port)IP
5
3 Tier Architectures Multi-tier architecture is a
client–server architecture in which presentation, application processing, and data management functions are physically separated.
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) service2. 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
7
Packet Capturing using WireShark HTTP request
8
Packet Capturing using WireShark HTTP response
9
Web Technology (Tools) Each tier has different technology solution
Run on clientComputer
Run on server(web server)
Run on server(database server)
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
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/
• 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
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.kro 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)
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/
If there is no error it will show “it works”
14
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)HTML HTML+ HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML5
1991 1993 1995 1997 1999 2000 2012
16
HTML : HyperText Markup Language HTML Basic index.html
Preview on browser http://localhost/index.html
17
HTML : HyperText Markup Language Some HTML tags (www.w3schools.com)
18
HTML5 Tags HTML5 Tags
The New <canvas> Element
New Media ElementsTag 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
Tag Description<canvas> Defines graphic drawing using JavaScript
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
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
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
Property Description CSSborder-image A shorthand property for setting all the border-image-* properties 3border-radius A shorthand property for setting all the four border-*-radius properties 3box-shadow Attaches one or more drop-shadows to the box 3
Property Description CSSbackground-clip Specifies the painting area of the background images 3background-origin Specifies the positioning area of the background images 3background-size Specifies the size of the background images 3
22
HTML : HyperText Markup Language Designing : Web Layout
WEB BANNER
LEFTNAVIGATI
ON
FOOTER
RIGHTNAVIGATI
ONMAIN CONTENT
MAIN NAVIGATION
23
WEB DESIGN: HTML + CSS
24
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 ScenarioWeb 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
26
Client Side Programming (JavaScript) In-line Script
External Script
HTML file
JavaScript file
http://www.w3schools.com/jsref/default.asp
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.net PHP is easy to learn and runs efficiently on the server side
PHP test : phpinfo()
28
Server Side Programming (PHP) PHP file (*.php) http://
www.php.net/manual/en/tutorial.php PHP code:
PHP comment:
<?php// PHP code goes here include();?>
<?php// This is a single line comment
# This is also a single line comment
/*This is a multiple lines comment blockthat spans over more thanone line*/?>
29
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();
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;
31
Database Management MYSQL Create Table for Web Page
User Tablecreate table user (userid varchar(20),password varchar(20),fullname varchar(20),email varchar(20),primary key(userid),); Article Tablecreate table article (userid varchar(20),title varchar(50),content text,date varchar(20),primary key (userid, date););
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);
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 VerificationLogin Response
Login success
Add Data
Add dataRequest Update
Database
34
Dynamic Web Page (2)
35
Thank you!