CNS-257T Web Engineering- Week 03- Web Development Cycles and Architectures.pptx

Web Development Cycles, Web Architectures

1. 10/3/2022 CNS-257T Web Engineering TED,SSUET 1

2. CNS-257T Web Engineering Instructor: Engr . Anila Saghir E mail : [email protected] BS In Computer Networks and Security Telecommunication Engineering Department Sir Syed University of Engineering & Technology

3. Week 03 Lecture 01-02 10/3/2022 CNS-257T Web Engineering TED,SSUET 3

4. Internet The Internet is the collection of computers that can communicate with one another using TCP/IP over an open, global communications network Before describing how the WorldWideWeb is related to the Internet, lets take a closer look at several of the key Internet protocols 10/3/2022 MCS-242 W&DT I TED,SSUET 4

5. Basic Internet Protocols Computer Communication Protocol: A computer communication protocol is a detailed specification of how communication between two computers will be carried out in order to serve some purpose. 10/3/2022 MCS-242 W&DT I TED,SSUET 5

6. Basic Internet Protocols For example, The Internet Protocol specifies both The high-level behavior of software implementing the protocol The low-level details such as the specific fields of information that will be contained in a communication message, the order in which these fields will appear, the number of bits in each field, and how these bits should be interpreted. 10/3/2022 MCS-242 W&DT I TED,SSUET 6

7. Transmission Control Protocol/Internet Protocol (TCP/IP) Since TCP/IP is fundamental to the definition of the Internet, it’s natural to begin with these two protocols They are often treated as one protocol because the bulk of the services we associate with the Internet—e-mail, Web browsing, file downloads, accessing remote databases—are built on top of both the TCP and IP protocols. 10/3/2022 MCS-242 W&DT I TED,SSUET 7

8. TCP/IP (Cont..) IP, the Internet Protocol —is fundamental to the definition of the Internet. A key element of IP is the IP address, which is simply a 32-bit number. At any given moment, each device on the Internet has one or more IP addresses associated with it 10/3/2022 MCS-242 W&DT I TED,SSUET 8

9. TCP/IP (Cont..) IP addresses are normally written as a sequence of four decimal numbers separated by periods (called “dots”), for example 192.0.34.166 The function of IP software is to transfer data from one computer (the source) to another computer (the destination) 10/3/2022 MCS-242 W&DT I TED,SSUET 9

10. TCP/IP (Cont..) When an application on the source computer wants to send information to a destination, the application calls IP software on the source machine and provides it with data to be transferred along with an IP address for each of the source and destination computers 10/3/2022 MCS-242 W&DT I TED,SSUET 10

11. TCP/IP (Cont..) The IP software running on the source creates a packet , which is a sequence of bits representing the data to be transferred along with the source and destination IP addresses and some other header information, such as the length of the data. If the destination computer is on the same local network as the source, then the IP software will send the packet to the destination directly via this network. 10/3/2022 MCS-242 W&DT I TED,SSUET 11

12. TCP/IP (Cont..) If the destination is on another network, the IP software will send the packet to a gateway, which is a device that is connected to the source computer’s network as well as to at least one other network 10/3/2022 MCS-242 W&DT I TED,SSUET 12

13. TCP/IP (Cont..) The gateway will select a computer on one of the other networks to which it is attached and send the packet on to that computer This process will continue, with the packet going through perhaps a dozen or more hops , until the packet reaches the destination computer IP software on that computer will receive the packet and pass its data up to an application that is waiting for the data 10/3/2022 MCS-242 W&DT I TED,SSUET 13

14. TCP/IP (Cont..) 10/3/2022 MCS-242 W&DT I TED,SSUET 14 The sequence of computers that a packet travels through from source to destination is known as its route

15. TCP/IP (Cont..) Border Gateway Protocol: Decides how does each computer choose the next computer in the route for a packet is used to pass network connectivity information between gateways so that each can choose a good next hop for each packet it receives 10/3/2022 MCS-242 W&DT I TED,SSUET 15

16. TCP/IP (Cont..) IP software also adds some error detection information (a checksum) to each packet it creates, so that if a packet is corrupted during transmission, this can usually be detected by the recipient The IP standard calls for IP software to simply discard any corrupted packets 10/3/2022 MCS-242 W&DT I TED,SSUET 16

17. TCP/IP (Cont..) Thus, IP-based communication is unreliable: packets can be lost. Obviously, IP alone is not a particularly good form of communication for many Internet applications . TCP, the Transmission Control Protocol , is a higher-level protocol that extends IP to provide additional functionality, including reliable communication based on the concept of a connection 10/3/2022 MCS-242 W&DT I TED,SSUET 17

18. TCP/IP (Cont..) TCP Connection: A connection is established between TCP software running on two machines by one of the machines (let’s call it A) sending a connection-request message via IP to the other (B) That is, the IP message contains a message conforming to the TCP protocol and representing a TCP connection request 10/3/2022 MCS-242 W&DT I TED,SSUET 18

19. TCP/IP (Cont..) If the connection is accepted by B, then B returns a message to A requesting a connection in the other direction If A responds affirmatively, then the connection is established 10/3/2022 MCS-242 W&DT I TED,SSUET 19

20. TCP/IP (Cont..) Once a connection has been established, TCP provides reliable data transmission by demanding an acknowledgment for each packet it sends via IP Essentially, the software sets a timer after sending each packet 10/3/2022 MCS-242 W&DT I TED,SSUET 20

21. TCP/IP (Cont..) The TCP software on the receiving side sends a packet containing an acknowledgment for every TCP-based packet it receives that passes the checksum test If the TCP software sending a packet does not receive an acknowledgment packet before its timer expires, then it resends the packet and restarts the timer 10/3/2022 MCS-242 W&DT I TED,SSUET 21

22. TCP/IP (Cont..) Another important feature that TCP adds to IP is the concept of a port The port concept allows TCP to be used to communicate with many different applications on a machine. 10/3/2022 MCS-242 W&DT I TED,SSUET 22

23. TCP/IP (Cont..) For example, a machine connected to the Internet may run a mail server for users on its local network, a file download server, and also a server that allows users to log in to the machine and execute commands from remote locations 10/3/2022 MCS-242 W&DT I TED,SSUET 23

24. User Datagram Protocol (UDP) UDP (User Datagram Protocol) is an alternative protocol to TCP that also builds on IP. The main feature that UDP adds to IP is the port concept that is also provided by TCP. However, it does not provide the two-way connection or guaranteed delivery of TCP 10/3/2022 MCS-242 W&DT I TED,SSUET 24

25. User Datagram Protocol (UDP) Its advantage over TCP is speed for simple tasks For example, if all you want to do is send a short message to another computer, you’re expecting a single short response message, and you can handle resending if you don’t receive the response within a reasonable amount of time, then UDP is probably a good alternative to TCP 10/3/2022 MCS-242 W&DT I TED,SSUET 25

26. Domain Name Service(DNS) DNS(Domain Name Service): One Internet application that is often run using UDP rather than TCP is the Domain Name Service (DNS). DNS provides a mechanism for mapping back and forth between IP addresses and host names. 10/3/2022 MCS-242 W&DT I TED,SSUET 26

27. Domain Name Service(DNS) Host name is a top-level domain. There are two standard types of top-level domain: generic(such as .com, . edu , .org, and .biz) country-code (such as . pk , .de, .il, and .mx). The top-level domain names are assigned by the Internet Corporation for Assigned Names and Numbers (ICANN), 10/3/2022 MCS-242 W&DT I TED,SSUET 27

28. Higher-Level Internet Protocols The following analogy may help to relate the basic internet protocols. The Internet is like the physical telephone network : it provides the basic communications infrastructure 10/3/2022 MCS-242 W&DT I TED,SSUET 28

29. Higher-Level Internet Protocols UDP is like calling a number and leaving a message rather than actually speaking with the intended recipient DNS is the Internet version of directory assistance, associating names with numbers TCP is roughly equivalent to placing a phone call and having the other party answer: you now have a connection and are able to communicate back and forth 10/3/2022 MCS-242 W&DT I TED,SSUET 29

30. Higher-Level Protocols (Cont.. ) However, in the cases of both TCP and a phone call, different protocols can be used to communicate once a connection has been established So there are wide variety of high-level protocols used to communicate over TCP connections. SMTP, FTP and HTTP are examples of widely used higher level protocols 10/3/2022 MCS-242 W&DT I TED,SSUET 30

31. Higher-Level Protocols (Cont.. ) SMTP supports transfer of e-mail between different e-mail servers, FTP is used for transferring files between machines, while HTTP (Hyper Text Transport Protocol) is the primary TCP-based protocol used for communication between web servers and browsers 10/3/2022 MCS-242 W&DT I TED,SSUET 31

32. The World Wide Web (WWW) World wide web can be defined as an information system on the internet which allows documents to be connected to other documents by hypertext links , enabling the user to search for information by moving from one document to another 10/3/2022 MCS-242 W&DT I TED,SSUET 32

33. The World Wide Web (WWW) The Web is not the same as the Internet: the Web is one of many applications built on top of the Internet Note: Most web pages are written using the Hypertext Markup Language, HTML, which along with HTTP is a fundamental web technology. HTML pages can contain the familiar web links (technically called hyperlinks) to other documents on the Web 10/3/2022 MCS-242 W&DT I TED,SSUET 33

34. Hypertext Transport Protocol(HTTP) HTTP is a form of communication protocol, in particular a detailed specification of how web clients and servers should communicate The basic structure of HTTP communication follows what is known as a request–response model 10/3/2022 MCS-242 W&DT I TED,SSUET 34

35. Hypertext Transport Protocol(HTTP) Specifically, the protocol dictates that an HTTP interaction is initiated by a client sending a request message to the server; the server is then expected to generate a response message The format of the request and response messages is dictated by HTTP 10/3/2022 MCS-242 W&DT I TED,SSUET 35

36. Hypertext Transport Protocol(HTTP) HTTP does not dictate the network protocol to be used to send these messages but does expect that the request and response are both sent within a TCP-style connection between the client and the server. So, most HTTP implementations send these messages using TCP. 10/3/2022 MCS-242 W&DT I TED,SSUET 36

37. Introduction to HTTPS 10/3/2022 Stands for: Hypertext Transfer Protocol Secure Extension of HTTP with encryption using SSL/TLS Ensures secure communication between browser and server Protects against eavesdropping, data tampering, and man-in-the-middle attacks CNS-257T Web Engineering TED,SSUET 37

38. How HTTPS Works 10/3/2022 Browser requests a secure page (HTTPS://) Server sends SSL/TLS certificate Browser validates certificate from trusted authority Encryption keys are exchanged securely Data is transferred securely CNS-257T Web Engineering TED,SSUET 38

39. 10/3/2022 CNS-257T Web Engineering TED,SSUET 39

40. Introduction to REST 10/3/2022 Stands for: Representational State Transfer An architectural style for designing networked applications Relies on stateless communication Uses standard HTTP methods: GET (read) POST (create )PUT/PATCH (update) DELETE (remove) Example: GET https://api.example.com/users returns list of users. CNS-257T Web Engineering TED,SSUET 40

41. HTTPS + REST in Practice 10/3/2022 REST APIs often use HTTPS to secure data exchange HTTPS ensures data integrity and privacy for RESTful calls Example: GET https://api.bank.com/account Data encrypted end-to-end Benefits: Prevents interception of sensitive API data Builds user trust CNS-257T Web Engineering TED,SSUET 41

42. Web Development Life Cycle 10/3/2022 CNS-257T Web Engineering TED,SSUET 42

43. Web Development Life Cycle 10/3/2022 CNS-257T Web Engineering TED,SSUET The web development life cycle refers to The series of stages or steps involved in creating a website or web application. It provides a structured approach, ensuring optimal results throughout the development process. This process typically involves 07 main stages: 43

44. Stage 1: Research and Analysis 10/3/2022 This phase involves learning about the client's requirements. Identify their needs and help them by providing the perfect solution. CNS-257T Web Engineering TED,SSUET 44

45. Stage 2: Planning 10/3/2022 This initial phase involves understanding the project requirements , defining goals , and determining the scope of the project . Key activities include conducting market research, identifying target audience, creating user personas, defining features and functionalities, setting timelines, and establishing a budget. CNS-257T Web Engineering TED,SSUET 45

46. Stage 3: Design 10/3/2022 During the design phase, the site takes the shape . All the visual content, such as images, photos, and videos, is created at this stage. Web designers focus on branding, color schemes, typography, and other design elements to ensure a cohesive and appealing user interface. CNS-257T Web Engineering TED,SSUET 46

47. Stage 4: Development 10/3/2022 Once the design is approved, developers start building the website using various technologies such as HTML, CSS, JavaScript, and server-side programming languages like Python, Ruby , PHP , etc. This phase involves writing code, integrating databases, implementing functionalities, and ensuring cross-browser compatibility and responsiveness. CNS-257T Web Engineering TED,SSUET 47

48. Stage 5: Testing 10/3/2022 After the development phase, the website undergoes testing to identify and fix any bugs, errors, or issues. Testing includes: functional testing to ensure all features work as intended, usability testing to evaluate user experience, performance testing to optimize speed and responsiveness, CNS-257T Web Engineering TED,SSUET 48

49. Stage 5: Testing 10/3/2022 compatibility testing across different devices and browsers, and security testing to safeguard against vulnerabilities. CNS-257T Web Engineering TED,SSUET 49

50. Stage 6: Deployment 10/3/2022 Once the website passes all tests and meets the client's requirements, it is ready to be launched or deployed to a live server. This involves transferring all files and databases to the hosting environment, configuring domain settings, and setting up any necessary server-side software. CNS-257T Web Engineering TED,SSUET 50

51. Stage 7: Maintenance and Updates 10/3/2022 The web development life cycle doesn't end with deployment. Websites require ongoing maintenance, updates, and support to keep them secure, up-to-date, and optimized for performance. This includes monitoring site performance, fixing bugs, adding new features or content, updating software and plugins, and addressing any user feedback or issues. CNS-257T Web Engineering TED,SSUET 51

52. Practice question/ class activity 10/3/2022 Imagine you're leading a team tasked with developing a new e-commerce website for a client. As you plan the project, you realize the importance of understanding the web development life cycle. Can you identify and explain the stages involved in this cycle? Additionally, discuss the roles of both the front-end developer and the project manager in ensuring the success of each stage. CNS-257T Web Engineering TED,SSUET 52

53. Practice question/ class activity 10/3/2022 Imagine you've been hired by a startup to develop their new website from scratch. As you begin the project, you realize the importance of following a structured web development life cycle. Could you outline the key stages of this cycle and describe the roles of both the UX/UI designer and the quality assurance (QA) tester in ensuring the success of the project?" CNS-257T Web Engineering TED,SSUET 53

54. Web Application Architecture 10/3/2022 CNS-257T Web Engineering TED,SSUET 54

55. Web Application Architecture 10/3/2022 Web application architecture is an outline of how various components of web app interact with each other. Or, in other words, The way the client and the server are connected is established by web application architecture. CNS-257T Web Engineering TED,SSUET 55

56. Why Is Web Application Architecture Important? 10/3/2022 CNS-257T Web Engineering TED,SSUET 56

57. Web Application Architecture Components 10/3/2022 Typically, a web application architecture comprises three core components:  Web Browser Web Server Database Server The three layers of web application architecture Presentation layer / Client Layer   Web Browser Application Layer / Business Logic Layer   Web Server Data Layer CNS-257T Web Engineering TED,SSUET 57

58. Standard Web Application Architecture 10/3/2022 CNS-257T Web Engineering TED,SSUET 58

59. Standard Web Application Architecture 10/3/2022 CNS-257T Web Engineering TED,SSUET 59

60. Types of Web Application Architecture 10/3/2022 The popular types of web application architecture are: Single-Page Architecture Multipage Architecture CNS-257T Web Engineering TED,SSUET 60

61. What is Single-Page Application(SPA)? 10/3/2022 Single-Page Architecture is a design approach where “The entire application resides on a single web page”. Instead of loading entire new pages from the server when users interact with the application, SPAs dynamically update parts of the current page with new content, typically without requiring a full page reload. This approach is often implemented using JavaScript frameworks like AngularJS, ReactJS , or Vue.js. CNS-257T Web Engineering TED,SSUET 61

62. Advantages of Single-Page Application(SPA) 10/3/2022 Advantages of SPA: Faster initial loading time since only one page is loaded initially. Enhanced user experience due to continuous navigation and dynamic content loading. Easier code maintenance and development, especially with the use of modern JavaScript frameworks. CNS-257T Web Engineering TED,SSUET 62

63. Disadvantages of Single-Page Application(SPA) 10/3/2022 Disadvantages of SPA: SEO (Search Engine Optimization) challenges because search engines may have difficulty indexing dynamic content. Increased complexity in managing application state and handling browser history. Limited support for older browsers and devices, as SPAs heavily rely on client-side scripting. CNS-257T Web Engineering TED,SSUET 63

64. Multipage Architecture 10/3/2022 Multipage Architecture, also known as Traditional Web Application Architecture, follows the conventional approach where different pages of the application are loaded separately from the server in response to user actions such as clicking on links or submitting forms. Each page typically corresponds to a different functionality or section of the application. CNS-257T Web Engineering TED,SSUET 64

65. 10/3/2022 Advantages of Multipage Architecture: Better support for SEO , as each page can be optimized for specific keywords and indexed by search engines. Compatibility with older browsers and devices that may not fully support client-side scripting. Simplicity in managing application state and handling browser history. CNS-257T Web Engineering TED,SSUET 65

66. 10/3/2022 Disadvantages of Multipage Architecture: Slower navigation and page loading times due to full page reloads. Less interactive user experience compared to SPAs, as each interaction typically involves a complete page refresh. Increased server load and bandwidth usage due to frequent requests for complete HTML pages. CNS-257T Web Engineering TED,SSUET 66

67. Practice question/ class activity 10/3/2022 In developing a single page application (SPA) for a social networking platform, outline the key architectural components involved? CNS-257T Web Engineering TED,SSUET 67