Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Introduction to Web Programming

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 39 Publicité

Plus De Contenu Connexe

Publicité

Plus récents (20)

Introduction to Web Programming

  1. 1. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology National Diploma in Information and Communication Technology K72C001M07-Web Programming Task 01: Introduction to Web Programming 11/23/2018 Introduction to Web Development 1
  2. 2. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology What Do I Hope You'll Take Away From This Class? Client-server relationship Web pages are content, styling, and behavior Making web pages is fun! 11/23/2018 Introduction to Web Development 2
  3. 3. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Web Languages / Technologies • Content: Hypertext Markup Language (HTML): used for writing web pages • Style: Cascading Style Sheets (CSS): stylistic info for web pages • Behavior: JavaScript: interactive and programmable web pages • Data representation for transfer: JavaScript Object Notation (JSON) • Enhanced data transfer: Asynchronous JavaScript and XML (AJAX) • Dynamic Web Servers: PHP Hypertext Processor (PHP) • Data Bases: Structured Query Language (SQL) 11/23/2018 Introduction to Web Development 3
  4. 4. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology The Internet and the World Wide Web The Internet Wikipedia: http://en.wikipedia.org/wiki/internet A connection of computer networks using the Internet Protocol (IP) 11/23/2018 Introduction to Web Development 4
  5. 5. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology The Internet: A Brief History • Began as a US Department of Defense network called ARPANET (1960s-70s) • Initial services: electronic mail, file transfer • Opened to commercial interests in late 80s • WWW created in 1989-91 by Tim Berners-Lee • Popular web browsers released: Netscape 1994, IE 1995 • Amazon.com opens in 1995; Google in January 1996 • Facebook founded in February 2004 • Snapchat created in September 2011 11/23/2018 Introduction to Web Development 5
  6. 6. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Key Aspects of the Internet •Subnetworks can stand on their own •Computers can dynamically join and leave the network •Built on open standards; anyone can create a new internet device •Lack of centralized control (mostly) •Everyone can use it with simple, commonly-available software 11/23/2018 Introduction to Web Development 6
  7. 7. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Question Who "runs" the Internet? Who is responsible for overseeing it? 11/23/2018 Introduction to Web Development 7
  8. 8. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology People and Organizations (and Companies) •Internet Engineering Task Force (IETF): Internet protocol standards •Internet Corporation for Assigned Names and Numbers (ICANN): decides top-level domain names •World Wide Web Consortium (W3C): web standards These protocols are carried out in large part by Internet service providers and other companies and organizations who build Internet-related products and applications 11/23/2018 Introduction to Web Development 8
  9. 9. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Layered Architecture •Physical layer: devices such as ethernet, coaxial cables, fiber- optic lines, modems •Data Link Layer: basic hardware protocols (ethernet, Wi-Fi, DSL PPP) •Network/Internet Layer: basic software protocol (IP) •Transport Layer: adds reliability to network layer (TCP, UDP) •Application Layer: implements specific communications for each kind of program (HTTP, POP3/IMAP, SSH, FTP) 11/23/2018 Introduction to Web Development 9
  10. 10. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology 11/23/2018 Introduction to Web Development 10
  11. 11. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Internet Protocol (IPv4) A simple protocol for attempting to send data between two computers Each device has a 32-bit IP address written as four 8-bit numbers (0-255) Find your internet IP address: whatismyip.com Find out your local IP address: in a terminal, type ipconfig (Windows) or ifconfig (Mac/Linux) 11/23/2018 Introduction to Web Development 11
  12. 12. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Internet Protocol •Any resource attached to an IP network can be assigned an IP address, e.g. computer, printer or a scanner. •It is possible for a single host to have multiple IP addresses if it is running multiple networking applications, such as DNS, Web or Mail server software. •Addresses are always unique. •Because IP addresses are software configured, it is easy to move hosts from one network to another simply by changing the IP address or the network mask 11/23/2018 Introduction to Web Development 12
  13. 13. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Transmission Control Protocol (TCP) Adds multiplexing, guaranteed message delivery on top of IP Multiplexing: multiple programs using the same IP address Port: a number given to each program or service port 80: web browser (port 443 for secure browsing) port 25: email port 22: ssh port 5190: AOL Instant Messenger More common ports Some programs (games, streaming media programs) use simpler UDP protocol instead of TCP 11/23/2018 Introduction to Web Development 13
  14. 14. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology The World Wide Web (WWW) How is it different than the Internet? The Internet describes all the interconnected devices that use the "internet protocol." The World Wide Web is the subset of the Internet that uses the HTTP and HTTPS protocols, mostly to transmit "webpages." 11/23/2018 Introduction to Web Development 14
  15. 15. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology The World Wide Web Web Server: software that listens for web page requests Apache Microsoft Internet Information Server (IIS) (part of windows) Web Browser: fetches/displays documents from web servers Mozilla Firefox Microsoft Internet Explorer (IE) and Microsoft Edge Apple Safari Google Chrome Opera 11/23/2018 Introduction to Web Development 15
  16. 16. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Uniform Resource Locator (URL) An identifier for the location of a document on a web site A basic URL: http://www.slgti.com/ICT/K72C001M07/index.html ~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~ protocol host path Upon entering this URL into the browser, it would: Ask the "DNS" server for the IP address of www.slgti.com Connect to that IP address at port 80 Ask the server to GET ICT/K72C001M07/index.html Display the resulting page on the screen 11/23/2018 Introduction to Web Development 16
  17. 17. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Domain Name System (DNS) A set of servers that map written names to IP addresses Example: www.lms.slgti.com → 45.40.155.145 Many systems maintain a local cache called a hosts file Windows: C:Windowssystem32driversetchosts Mac: /private/etc/hosts Linux: /etc/hosts 11/23/2018 Introduction to Web Development 17
  18. 18. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Domain Name System (DNS) •A DNS server provides 'name resolution service‘ which means that DNS servers resolve names into IP addresses or vice versa. •DNS servers are also called name servers. •A local DNS server which performs domain name lookup is usually located on the network to which your computer is attached. •If you are using an Internet Service Provider (ISP), your DNS server is at your ISP. •If you are using the network at your college or your office, you probably have a local DNS server somewhere near you at the server room. 11/23/2018 Introduction to Web Development 18
  19. 19. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Hypertext Transport Protocol (HTTP) The set of commands understood by a web server and sent from a browser Some HTTP commands (your browser sends these internally): GET filename: download POST filename: send a web form response PUT filename: upload 11/23/2018 Introduction to Web Development 19
  20. 20. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Hypertext Transport Protocol (HTTP) •HTTP is a very simple client-server request/response communication protocol •HTTP is the heart of the world wide web (WWW) which is used to transfer or convey information •HTTP is stateless and relies on URL naming mechanism •Development of HTTP was coordinated by the W3C (World Wide Web Consortium) and the IETF (Internet Engineering Task Force) 11/23/2018 Introduction to Web Development 20
  21. 21. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology HTTP Error Codes When something goes wrong, the web server returns a special "error code" number to the browser, possibly followed by an HTML document Common Error Codes: 200 OK 301-303 page has moved (permanently or temporarily) 403 you are forbidden to access this page 404 page not found 418 I'm a teapot 500 internal server error Complete list 11/23/2018 Introduction to Web Development 21
  22. 22. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Internet Media ("MIME") Types Sometimes when including resources in a page (style sheet, icon, multimedia object), we specify their type of data MIME type file extension text/html .html text/plain .txt image/gif .gif image/jpeg .jpg video/quicktime .mov application/octet-stream .exe 11/23/2018 Introduction to Web Development 22
  23. 23. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Web Page •A document or information resource that is suitable for the World Wide Web •Can be accessed through a web browser •Displayed on a monitor or mobile device •This information is usually in HTML or XHTML format. •Use other resources such as style sheets, scripts and images into their final presentation •Retrieved from a local computer or from a remote web server 11/23/2018 Introduction to Web Development 23
  24. 24. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Web Site •A collection of related web pages containing images, videos or other digital assets •Hosted on at least one web server •Accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator •Domain name and IP 11/23/2018 Introduction to Web Development 24
  25. 25. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Web Server •Web server is a software on a server machine that can be run to answer requests from Web clients using the Hypertext Transfer Protocol (HTTP). •This can also be defined as a network server that manages access to files, folders and other resources over the Internet or local intranet via HTTP. •Web servers handle access permission, execute programs, keep track of directories and files and communicate with client computers. 11/23/2018 Introduction to Web Development 25
  26. 26. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Structure of World Wide Web 1. Clients use browser application to send URLs via HTTP to servers requesting a Web page 2. The server name part of the URL will be resolved by the DNS 3. Web pages are constructed using HTML (or other markup language) and consist of text, graphics, sounds and even embedded files 4. Servers respond with requested Web page or other message such as an error message 5. Client’s browser renders Web page returned by the server to the client 6. The entire system runs over standard networking protocols such as TCP/IP and DNS 11/23/2018 Introduction to Web Development 26
  27. 27. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Client-Server Computing Architecture •In the client-server architecture, the client is separated from a server •The client is defined as the requester of services and the server is defined as the provider of services •A Server a host that is running one or more server programs which can be sharing of information or resources •Client does not share any of its resources, but requests a server's content or service function. 11/23/2018 Introduction to Web Development 27
  28. 28. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Client-Server Computing Architecture 11/23/2018 Introduction to Web Development 28
  29. 29. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Client-Server Computing Architecture 11/23/2018 Introduction to Web Development 29 Characteristics of a client Initiates requests(Master) Waits for and receives replies Usually connects to a small number of servers at one time Typically interacts directly with end-users using a graphical user interface Examples: web browsers, email clients and online chat clients
  30. 30. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Client-Server Computing Architecture 11/23/2018 Introduction to Web Development 30 Characteristics of a server Passive (slave) Waits for requests from clients Upon receipt of requests, processes them and then serves replies Usually accepts connections from a large number of clients Typically does not interact directly with end-users Examples: web servers, database servers and mail servers
  31. 31. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Advantages of Client-Server Architecture •Low coupling of client and server, thus greater independence for maintenance. •For example, it is possible to replace, repair, upgrade, or even relocate a server while its clients remain both unaware and unaffected by that change. •Greater security for data stored on the server. Servers can control access and resources. •Easy to update and administer data, because of centralized nature. •Servers can play different roles for different clients. 11/23/2018 Introduction to Web Development 31
  32. 32. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Disadvantages of Client-Server Architecture •Congestion in Network: More traffic to the server as the number of simultaneous client requests to a given server increases. •If the server fails under a critical condition, the clients’ request will not be fulfilled. •Cost : It is very expensive to install and manage this type of computing. 11/23/2018 Introduction to Web Development 32
  33. 33. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Web Application Any application that uses Web Technologies including web browsers, web servers and Internet protocols is called Web Application. A web application can be divided into three different layers. Presentation layer which forms the first tier of the application, consists of web server and the web browser, which is responsible for assembling the data into presentable format. Application layer constitutes the second tier of the application and is consisting of server side program and scripts. Finally the third tier provides the programmable access to the databases. 11/23/2018 Introduction to Web Development 33
  34. 34. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Static vs. Dynamic Content Static web pages do not change the content or layout depending on user input. In contrast, dynamic web pages adapt their content depending on user input or computing environment (user, time or data). Dynamic content can be delivered as a result of two technologies: Client-side scripting languages Server-side scripting languages 11/23/2018 Introduction to Web Development 34
  35. 35. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Characteristics of Client-side Scripting •Plain HTML is basically static • The browser displays the text and graphics and waits for the user to click a link or fill in a form to return data to the server. •Client-side scripts can modify the pages at runtime, and therefore, they also falls under the heading of DHTML (dynamic HTML). •Client-side scripts have greater access to the information and functions available on the user's computer, whereas for server-side scripts its for the server. •Client-side scripts require that the user's web browser understand the scripting language in which they are written. 11/23/2018 Introduction to Web Development 35
  36. 36. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Client-side Scripting Languages JavaScript VBScript Action Script AJAX 11/23/2018 Introduction to Web Development 36
  37. 37. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Server Side Scripting •Server-side scripting is a web server technology in which a user's request is fulfilled by running a script directly on the Web server to generate dynamic HTML pages. •In client-side scripting, the scripts are first downloaded, and then interpreted and executed by the Web browser. •Server-side scripting enables the ability to highly customize the response based on the user's requirements, access rights, or queries into data stores 11/23/2018 Introduction to Web Development 37
  38. 38. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology Server-side Scripting Technologies •ASP - Microsoft designed, primarily Windows based, solution allowing various languages (generally VBScript) inside a HTML-like outer page •ASP.NET - part of Microsoft's .NET platform and is the successor to ASP •JSP - a Java-based system for embedding Java-related code in HTML pages •PHP - open source solution based on including code in its own language into an HTML page •Ruby on Rails - a free web application framework that aims to increase the speed and ease with database driven Web sites creation 11/23/2018 Introduction to Web Development 38
  39. 39. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology --End-- 11/23/2018 Introduction to Web Development 39

Notes de l'éditeur

  • Partial map of the Internet based on the January 15, 2005 data found on opte.org. Each line is drawn between two nodes, representing two IP addresses. The length of the lines are indicative of the delay between those two nodes. This graph represents less than 30% of the Class C networks reachable by the data collection program in early 2005. Lines are color-coded according to their corresponding RFC 1918 allocation as follows: Dark blue: net, ca, us Green: com, org Red: mil, gov, edu Yellow: jp, cn, tw, au, de Magenta: uk, it, pl, fr Gold: br, kr, nl White: unknown

×