Web Programming

Lecturer:

M.Zalmai “Rahmani”

[email protected]

Web Programming II

Lecture 0

Introduction

Azma InstituteDatabase 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

http://www.cites.uiuc.edu/101/url101.html

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.

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”

[email protected]

Web Programming II

Lecture 01

Introduction

Azma InstituteDatabase 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 byspecifying a URL and providing input via HTTPencoded 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

OSWeb

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

http://www.en.wampserver.com/


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 andchange accordingly then click on Next. The default values can generally be usedwhen 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:\wamp\www).

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.

http://localhost/

http://localhost

http://localhost/

Software

Web Programming