Web Programming

Lecturer:
M.Zalmai “Rahmani”
rahmani.zalmai@gmail.com
Web Programming II
Lecture 0
Introduction
Azma Institute
Database Department

What is Web?
 The Web is a network of computers all over the world.
 All the computers in the Web can communicate with each other.
 All the computers use a communication standard called HTTP (The
Hypertext Transfer Protocol (HTTP) is an application protocol for distributed,
collaborative, hypermedia information systems. HTTP is the foundation of data
communication for the World Wide Web. Hypertext is structured text that uses
logical links (hyperlinks) between nodes containing text.).

How does the WWW work?
Web information is stored in documents called web pages.
Web pages are files stored on computers called web servers.
Computers reading the web pages are called web clients.
Web clients view the pages with a program called a web browser.

How does a Browser Fetch
a Web Page?
A browser fetches a page from a web server by a request.
A request is a standard HTTP request containing a page address.
An address may look like this:
http://www.someone.com/page.htm.

How does a Browser Display
a Web Page?
All web pages contain instructions for display
The browser displays the page by reading these instructions.
The most common display instructions are called HTML tags.
HTML tags look like this <p>This is a Paragraph</p>.

What is a URL?
A URL, or Uniform Resource Locator, is the location of a file on the Web.
When you type the address of a Web page into your browser,you are typing
a URL.
The most common format of a URL:
http://www.cites.uiuc.edu/101/url101.html
http://www.cites.uiuc.edu/101/url101.html.
Protocol HOST The directory structure and filename

What is Engineering???
The profession of applying scientific principles to the design,
construction, and maintenance of systems to reduce cost, and have
good quality.
The main components are:
Time
 Cost
 quality

What is Web Engineering???
Web Engineering is the application of systematic and quantifiable
approaches (concepts, methods, techniques, tools) to cost-effective
requirements analysis, design, implementation, testing, operation, and
maintenance of high-quality Web applications.

Prerequisite for this course
Web Engineering I
Web development concept
Web designing and technologies
Build basic web application projects
Information About: URL, HTML, CSS, Forms,
JavaScript, XML, Jquery

Objectives
Convert astatic site to a dynamic one using PHP
Remove inefficient duplicate code
Use MySQLi and prepared statements for secure database queries
Manipulate page content immediately with jQuery
Update the database silently with jQuery AJAX
Upload the project to a web host and deal with important security
considerations.

Contents
Introducing PHP and MySQL
Using Variables, Statements, and Operators
Using Variables, Statements, and Operators
Using Arrays and Custom Functions
Using Files, Sessions and Cookies
Sample Application: ???

Contents
The students are required to study the text material for the whole
course content to be able to carry out all the workload.

Lecturer:
M.Zalmai “Rahmani”
rahmani.ralmai@gmail.com
Web Programming II
Lecture 01
Introduction
Azma Institute
Database Department

Clint Server Model
Setup Environment

Clint Server Model
CLIENT
WEB
SERVER
HTTP Request
(url)
<HTML>
<?php PHP code ?>
</HTML>
Gets Page
Server response
Browser creates
the web page
Hello

Clint Server Model
Client
Web
browser
OS
requests an Internet
resource by
specifying a URL and
providing input via HTTP
encoded strings
HTML supports JavaScript, DOM, CSS, HTML Events
Usually we want to open an HTML file from some website, but
we can also open a program alternatively.

Client Server Model
Client
Web
browser
Operating
System
(OS)
Web server
Operating
System
(OS)
Server
Internet
Server-side program
works out the necessary
business logic and
dynamically builds an
HTML response.

Client Server Model
Client
Web
browser
OS
Web
server
OS
Server
Internet
Server-side program
sends back output as
HTML using HTTP as
transport mechanism

Client Server Model
Client
Web
browser
OS
Web
server
OS
Server
Internet
Client-side program (Internet Explorer,
Firefox) displays the HTML output
• HTML text
• Graphics
• Streaming video/audio
• XML

Client Server Model
Client
Web
browser
Web
server HTML
Server
MySQL
Operating System
PHP
Internet
My codes
Our codes might be embedded into an HTML, or vice-versa.
It may generate an HTML on its own as well.

Setup Environment
 Available Packages
 WAMP Server
Windows OS
 MAMP Server
Mac OS
 XAMP
Linux and Windows OS
 You will be able to tune your server without even
touching the setting files.
 WAMP (Windows Apache MySQL PHP/PHPMyAdmin)

Wamp Server Installation
 WAMP Server is a Windows web development environment.
 It allows you to create web applications with
 Apache
 PHP
 MySQL database.
 It also comes with PHPMyAdmin to easily manage your databases.

Tray Icon
 Manage your Apache and MySQL services
 Switch online/offline (give access to everyone or only localhost)
 Install and switch Apache, MySQL and PHP releases
 Manage your servers settings
 Access your logs
 Access your settings files
 Create alias

Tray Icon
 Manage your Apache and MySQL services
 Switch online/offline (give access to
everyone or only localhost)
 Install and switch Apache, MySQL and PHP
releases
 Manage your servers settings
 Access your logs
 Access your settings files
 Create alias

Step by Step Installation
 http://www.en.wampserver.com/
 Once you have downloaded the latest version of WAMP
 2.2 or 2.5, follows these steps to install it to your local PC:
 Locate the downloaded set up file and double-click on it.
 You will be faced with an alert window warning for
 installation. Click on Yes to continue

 The Welcome setup window will load. Click on Next to proceed

 On the License Agreement screen select the radio button for I accept
the agreement then click on Next

 The Select Destination Location screen will load. Change the default
location if you desire then click on Next

 Now the Select Additional Tasks screen is loaded. Select the checkboxes for any
icons you want installing then click on Next

 You will be faced with the Ready to Install screen. Review the settings
and use the Back button to go back and change any of the settings. If
the settings are correct, click on Install to install WAMP 2.2/2.5

 The PHP mail parameters screen will load. Review the default settings and
change accordingly then click on Next. The default values can generally be used
when installing WAMP 2.2/2.5 to a local PC

 WAMP 2.2 is started. The WAMP Server icon is loaded onto the
system tray. Should turn totally GREEN

How to Start
When you install WAMP Server, a "www" directory is created
(generally C:wampwww).
Create a directory inside for your project and put your PHP
 files in it.
Click on the link "Localhost" in the WAMP Server Tray Icon menu or
open your browser and open the http://localhost address.

Web Programming

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to Web Programming

Similar to Web Programming (20)

Recently uploaded

Recently uploaded (20)

Web Programming