You are on page 1of 44

contents

Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

Web development definition

it is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).

Web development starts from plain text to the most complex web applications and social networks.

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

The web was created as a tool for us to share information with anyone, anywhere in the world. It started with the basics of sharing a document, but has gone on to create tools that now allow us to improve and share our lives. Tim Berners Lee created the web as open source and allowed the world to access it for free

in May 1973 GML (Generalized Markup Language) Charles Goldfarb invent GML at IBM. Widely considered the first modern markup language, and a precursor to languages like SGML, XML, HTML . Goldfarb went on to design SGML and XML. Work began in 1969, the name GML was coined in 1971, and the first public appearance was in May 1973.Then in 1974 he begins work on what will become SGML. HTML until HTML5 is an application of SGML.

HTML Tags appeared in 1991 It featured several elements still in use today, including headings (level h1 to h6), paragraphs (p), a number of different types of list, and anchor elements with href attributes. It also featured a number of elements no longer part of HTML and in 1993 a new tag was released "IMG"

In 1994 Python, a dynamic language often used on the server side of web applications was released and also Cascading style sheets appeared which are used for describing the look and formatting of a document written in a markup language

In 1995 Javascript was released ,this was the first widely supported scripting language for web browser and this addition to the World Wide Web was not fully supported by some people,Despite some people having reservations about it Javascript paved the way for the web to become less static and be more dynamic and interactive

In 1998 XML was published which is a subset of SGML, XML was designed to be both humanly and machine readable, to be "straightforwardly usable over the Internet"

To conclude When the World Wide Web first started, web pages were simply text documents. Nowadays web pages are much more than documents; they now have the ability to be full blown applications. Part of this ability is due to the additions of JavaScript and CSS.JavaScript made way for websites to think, but it was CSS that introduced the style and look of the web.

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

Web development vs. Web design

Web designer
Web design Is concerned with the process of designing the web site, which includes all the graphical interface and designs. Web designers are called front end developer Web designer uses:

Photoshop ,illustrator ,Dreamweaver and other graphics-

oriented programs

Web designer knowledge:


Typography, color theory, design principles etc.

Many web designers are actual designers but not many designers are web designers .why?

Web developer
Web developers are called back end developers Web developer uses:

Html ,css ,java script , php , MySQL and other

programming language

Web developer knowledge and skills:


Programming , Problem solving etc.

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

Client/server architecture

The client sends a request, and the server returns a response, These communication called protocols. Examples of protocols :

transmission control protocol (TCP) Internet Protocol (IP) Domain Name System (DNS) Hypertext Transfer Protocol (HTTP)

HTTP

The Hyper Text Transfer Protocol (HTTP) is the client-server network protocol that has been in use by the World-Wide Web since 1990. Whenever you surf the web, your browser will be sending HTTP request messages for HTML pages, images, scripts and styles sheets. Web servers handle these requests by returning response messages that contain the requested resource.

The HTTP request message has a simple text based structure. For example, here is the the request message sent by Internet Explorer (IE) for www.httpwatch.com
GET /simtec/httpgallery/introduction/ HTTP/1.1 Accept:*/* Accept-Language: en-gb Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0) Host: www.httpwatch.com Connection: Keep-Alive

The first line of the message, known as the request line, contains: The relative URL of the resource or a full URL The rest of the message consists of a set of name/value pairs, known as headers .HTTP clients use header values to control how the request is processed by the server.

The web server's response message has a similar structure, but is followed by the contents of the HTML page:

HTTP/1.1 200 OK Server: Microsoft-IIS/5.1 Date: Mon, 04 Oct 2004 12:04:43 GMT X-Powered-By: ASP.NET X-AspNet-Version: 1.1.4322 Cache-Control: no-cache Pragma: no-cache Expires: -1 Content-Type: text/html; charset=utf-8 Content-Length: 8307 <html> <head> ...

The first line, or status line, returns a status code from the server that indicates whether the request was successful. The value 200 is returned if the request was processed correctly and content is being returned to the client.

Request Headers

HTTP clients use headers in the request message to identify themselves and control how content is returned. If you are using IE, you will have seen the following headers sent with the request in Example 2: Accept:*/* This header indicates that the browser will accept all types of content. Accept-Language: en-gb The browser prefers British English content. Host: www.httpwatch.com HTTP/1.1 requires that the host name is supplied with every request so that multiple domains can be hosted on a single IP address. User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) This identifies the browser is Internet Explorer Version 6 running on Windows XP.

Response Headers

HTTP servers use headers in the response message to specify how content is being returned and how it should be handled. If you are using IE, you will have seen the following headers returned with the image in Example 2: Content-Length: 2748 This header contains the length in bytes of the resource (i.e. the gif image) that follows the headers. Content-Type: image/gif The content is in GIF format. Date: Wed, 4 Oct 2004 12:00:00 GMT This is the current date and time on the web server. Expires: -1 The Expires header specifies when the content should be considered to be out of date. The value -1 indicates that the content expires immediately and would have to be re-requested before being displayed again. Server: Microsoft-IIS/6.0 The web server is an IIS 6 web server. X-AspNet-Version: 2.0.50727 The web server is running ASP.NET 2.0

Status Codes
HTTP status codes are returned by web servers to describe if and how a request was processed. The codes are grouped by the first digit: 1xx Informational:

Any code starting with '1' is an intermediate response and indicates that the server has received the request but has not finished processing it. For example, reply with 100 Continue when it receives a POST request and then with 200 OK once it has been processed 2xx Successful:
These codes are used when a request has been successfully processed. For example, the value 200 is used when the requested resource is being returned to the HTTP client in the body of the response message.

3xx Redirection:

Codes starting with a '3' indicate that the request was processed, but the browser should get the resource from another location. Some examples are: 302:
The requested resource has been temporarily

moved and the browser should issue a request to the URL supplied in the Location response header.

304
The requested resource has not been modified

and the browser should read from its local cache instead. The Content-Length header will be zero or absent because content is never returned with a 304 respose.

4xx - Client Error:

The server returns these codes when they is a problem with the client's request. Here are some examples: 401
Anonymous clients are not authorized to view the

requested content and must provide authentication information in the WWW-Authenticate request header.

404
The requested resource does not exist on the

server

5xx - Server Error: A status code starting with the digit 5 indicates that an error occurred on the server while processing the request. For example: 500

An internal error occurred on the server. This may be because of an application error or configuration problem

503
The service is currently unavailable, perhaps

because of essential maintenance or overloading

HTTP Verbs
GET POST HEAD PUT DELETE OPTIONS TRACE CONNECT

The GET method

The GET method is used to retrieve information from a specified URI and is assumed to be a safe, repeatable operation by browsers, caches and other HTTP aware components. This means that the operation must have no side effects and GET requests can be re-issued without worrying about the consequences.

The POST method

The POST method is used for operations that have side effects and cannot be safely repeated. For example, transferring money from one bank account to another has side effects and should not be repeated without explicit approval by the user. If you try to refresh a page in Internet Explorer that resulted from a POST, it displays the following message to warn you that there may be side effects:

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

executed on the users web browser. Examples of client-side coding:

HTML JS CSS

Java Script
The reason JavaScript is called a client side language is because it runs scripts on your computer after youve loaded a web page. Heres an example: <script> document.getElementById('hello').innerHTML = 'Hello'; </script> That JavaScript code takes the string Hello and pops it into the element with an ID ofhello lets say it was an <h1>. What was originally inside that element gets replaced, but if you open up the source code of that page, youll still see that original text and not Hello. This is because Hello was dynamically added to the HTML document it was not a part of the original document that was loaded by your browser. However, what you will be able to see is the JavaScript code which was run by your computer.

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

are executed by the web server when the user requests a document. A server side or back-end language runs its scripts before the HTML is loaded, not after. Examples of client-side coding:

Perl Python PHP ASP.NET Java

PHP

Consider this PHP code:

<h1 id="hello"><?php echo 'Hello'; ?></h1>


This code has the exact same effect as the JavaScript code we looked at in the previous section. It puts the string Hello into the <h1> element with an ID of hello. But view the HTML source and what you see is a different story. Inside the <h1> tags will be the string Hello. On the other hand, the PHP code that was run by the server will be nowhere to be seen. This is because the server will have already taken care of the PHP, and what gets sent to your computer is the resulting pure HTML.

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

contents
Introduction What does Web Development mean ? Web history web development vs. web design. Web development hierarchy Client/server architecture Client-side coding Server-side coding Database technology Review Resources Q/A

A database is an organized collection of data. Databases are controlled across database management system (DBMS). Examples of DBMS :

MySQL Microsoft SQL Server Oracle LibreOffice Base

DBMS
DBMS allow definition, creation, querying, update, and administration of databases. There is two types of DBMS:

General purpose DBMS


Which have all the features above. Used in most applications

special-purpose DBMS
Which have a specific features to do specific job

a general-purpose DBMS is not always the optimal solution ,why?

Review

Resources

http:// wikipedia.com/ http://alterimaging.com/ http://www.aroradesigns.com/web-design-vs-webdevelopment http://www.daniweb.com/webdevelopment/aspnet/threads/29366/what-isserver-and-client-side-code/

Thank you

You might also like