Introduction to Web Programming

1. Introduction to Web Programming SCSC Mentoring Special Class Made HartaDwijaksara – 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 How can the interconnected devices talk each others? through protocol stack on network layer. Internet : is a global system of interconnected computer networks that use the standardInternet protocol suite(TCP/IP) to link several billion devices worldwide (wikipedia).

4. Introduction Ex. User Request (HTTP, Telnet, SSH, RPC, etc.) TCP/UDP (port) IP Internet Link Network Layer (OSI 7 Layers)

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 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 Comprise of : Web-Client, Web Server, Database Server

7. Packet Capturing using WireShark HTTP request

8. Packet Capturing using WireShark HTTP response

9. Web Technology (Tools) Run on client Computer Run on server (web server) Run on server (database server) Each tier has different technology solution

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 • the port address where the httpd service should listen to request • LoadModule LoadModule php5_module “php5apache2_4.dll” • There a lot of modules can be added to apache • ServerName  ServerNamewww.snu.ac.kr • The server name registered on DNS (can be changed with IP address) • DocumentRoot  DocumentRoot “C:/file/WEB” • 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”

15. Client Side (HTML) HTML 4.01 HTML HTML+ HTML 2.0 HTML 3.2 XHTML HTML5 1991 1993 1995 1997 1999 2000 2012 • 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)

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 Elements

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

22. HTML : HyperText Markup Language WEB BANNER MAIN NAVIGATION LEFT NAVIGATION MAIN CONTENT RIGHT NAVIGATION FOOTER Designing : Web Layout

23. WEB DESIGN: HTML + CSS

25. Client Side Programming (JavaScript) request Web Engine (Server Side) Web Page (Client Side) response The request format should be verified on the client side thus verification process will not burden the web server • 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

26. Client Side Programming (JavaScript) HTML file JavaScript file In-line Script External Script 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// 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*/?> • PHP file (*.php)  http://www.php.net/manual/en/tutorial.php • PHP code: • PHP comment:

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 Table create table user ( useridvarchar(20), password varchar(20), fullnamevarchar(20), email varchar(20), primary key(userid), ); • Article Table create table article ( useridvarchar(20), title varchar(50), content text, date varchar(20), primary key (userid, date); );

32. PHP + MySQL : 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); • Connection Preparation • Database Connect • SQL Query • Close Connection

33. Dynamic Web Page (1) Login Request Login Verification Database (MySQL) Web Client (Browser) Web Server (PHP) Login success Login Response Add data Request Update Database User Login Add Data • 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

34. Dynamic Web Page (2)

35. Thank you!