Internet Based Programming - Bandırma Onyedi Eylül University PDF

02/11/2025 Internet Based Programming Introduction: basic concepts, communicating on the internet (TCP/IP, IP address, DNS, client- server , HTTP, connection setup), WWW, Web development Asst. Prof. Dr. İnan KAZANCI...

02/11/2025 Internet Based Programming Introduction: basic concepts, communicating on the internet (TCP/IP, IP address, DNS, client- server , HTTP, connection setup), WWW, Web development Asst. Prof. Dr. İnan KAZANCI [email protected] Textbooks 1. Randy Connolly and Ricardo Hoar, Fundamentals of Web Development. 3 Edition Pearson, 2022. 2. Michael Mendez, The Missing Link An Introduction to Web Development and Programming. Open SUNY Textbooks, 2014. 3. Turgay Tugay Bilgin, Web Tabanlı Programlama, Papatya Bilim, 2017. 02/11/2025 2 1  02/11/2025 Evaluation Weight Participation TBA Quizzes TBA %15 Assignments TBA Mid-term %25 exam Final Exam %60 02/11/2025 3 Welcome to Internet Based Programming This course intends to provide: Basic knowledge and skills required for planning, designing and developing effective web pages with a focus on the practical application of the technologies used in the web development. It covers basic terminologies, tools, HTML5, Cascading Style Sheet (CSS), the basics of javascript and other technologies. 02/11/2025 4 2  02/11/2025 Introduction The focus of this course is on how to create websites by forming the understanding of the web development process. However, a web developer should also have basic knowledge about the working of the Internet, TCP/IP layers suit and concepts related to them. 02/11/2025 5 Introduction Internet based programming refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web programming, web publishing, and database management. It is the creation of an Internet Based Programming Internet Programming application that works over the internet. A process of Network problem solving of networks 02/11/2025 6 3  02/11/2025 Internet Internet is interconnected network of networks. It connects about 18 billion devices around the world to exchange data. (Refer to Cisco) The connections between the computers are made using fiber-optic cables, twisted copper cables, wireless radio connections and satellite links. Internet can handle different kinds of information enabling people to do different tasks such as sending/receiving emails, viewing sites, searching, online chatting and many more. 02/11/2025 7 Internet Brief history: In 1960’s The Advanced Research Projects Agency (ARPA) in the U.S. Department of Defense (DoD) showed interest in finding a way to connect computers to share research findings. In 1967, ARPA presented its ideas for ARPANET. The idea was that each host computer would be attached to a specialized computer, called IMP(Interface Message Processor). The IMP’s in turn would be connected to one another. By 1969 ARPANET was a reality. Software called the Network Control Protocol (NCP) provided communication between the hosts. 02/11/2025 8 4  02/11/2025 Internet Brief history (Cont.): In 1973, TCP/IP - the protocol suite for the Internet was outlined. IP responsible for routing TCP responsible for higher level functions such as segmentation, reassembly and error detection. In 1983, TCP/IP becomes the official protocol for the ARPANET. In the Internet's early days (the 1960s and 1970s), only government, military, and educational institutions had computers connected to the Internet.  Today, the Internet is decentralized and no longer structured only around government computers. IN 2024 more than 5.5 billion users are connected to the Internet (refer to https://www.statista.com/). 02/11/2025 9 Internet: Protocols Internet is a collection of networked devices that use protocols to exchange data. Protocols are set of rules (conventions) governing data communications. The key elements of a protocol are syntax, semantics, and timing. Syntax: Refers to the structure or format of data. Ex: A simple protocol might expect first 8 bits to be address of sender, next 8 bits to be address of receiver and the rest the message. Semantics: Refers to the meaning of each section of bits. Ex: Address identify the route to be taken or the final destination. Timing: Refers to two things, When data should be sent and how fast they can be sent. 02/11/2025 10 5  02/11/2025 Internet: Protocols 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 02/11/2025 11 Internet: Why layering? Protocol  To provide structure to the design of network protocols, network designers organize protocols—and the network hardware and software that implement the protocols— in layers. That is, each protocol Layers (TCP/IP) belongs to one of the layers. The Internet protocol stack Known as TCP/IP consists of five layers: the physical, link, network, transport, and application layers.  Application layer: supporting network applications E.g., HTTP, DNS application application Allow an application in one end system to exchange packets of information (message) with the application in another end system.  Transport layer: process-process data transfer transport transport E.g., TCP, UDP  Network layer: routing of datagrams from source to destination E.g., IP network  Link layer: data transfer between neighboring network elements E.g., Ethernet, 802.11 (WiFi) link  Physical layer: bits “on the wire” Moves the individual bits within the frame from one node to the next physical 02/11/2025 12 6  02/11/2025 Internet Protocol (IP) Simple protocol for data exchange between computers IP Addresses: 32-bit for IPv4 128-bit for IPv6 02/11/2025 13 Domain Name System (DNS) There are two ways to identify a host in the Internet: A hostname (e.g., www.google.com) and IP address. Hostnames identifiers: are mnemonic (consists of alphanumeric characters) and are therefore preferable by humans. An IP address consists of four bytes and has a hierarchical structure.  As we scan the address from left to right, we obtain more and more specific information about where the host is located in the Internet (that is, within which network, in the network of networks). The question here, how to map between IP address and name, and vice versa? By using DNS 02/11/2025 14 7  02/11/2025 Domain Name System (DNS) DNS: is a distributed database implemented in many DNS servers. It is an application-layer protocol that allows hosts to communicate with the distributed database to resolve names. DNS is commonly employed by other application-layer protocols, such as HTTP to translate user-supplied hostnames to IP addresses. 02/11/2025 15 Web Browser vs Web Server A Web Browser is a software application that helps us to access and display web pages over the Internet. Web browses use HTTP (HyperText Transfer Protocol) to communicate with Web servers. Mozilla Firefox, Microsoft Edge, Opera, Safari, and Google Chrome etc. A Web Server listens for web page requests over the Internet. Web servers use HTTP to HTTP communicate with respected clients. Request INTERNET Popular web server software includes Jetty, Apache, Nginx, and Microsoft HTTP IIS. Response 02/11/2025 16 8  02/11/2025 The Web and HTTP The HyperText Transfer Protocol (HTTP), the Web’s application-layer protocol, is at the heart of the Web. HTTP is implemented in two programs: a client program and a server program.  Client: Browser that requests, receives, (using HTTP protocol) and “displays” Web objects.  Server: Web server sends (using HTTP protocol) objects in response to requests.  An object is simply a file—such as an HTML file, a JPEG image, … that is addressable by a single URL. 02/11/2025 17 The Web and HTTP HTTP defines the structure and the sequence of the messages and how these messages being exchange between client PC running and server. Firefox browser It defines how Web clients request Web pages from Web servers and how servers server running transfer Web pages to clients. Apache Web server Android smartphone running Google Chrome 02/11/2025 18 9  02/11/2025 Uniform Resource Locator (URL) Identifier for the location of a document on a web site Example: https://mdbf.bandirma.edu.tr/tr/bil-muh Upon entering this URL into the browser, it would: Ask the DNS server for the IP address of mdbf.bandirma.edu.tr Connect to that IP address at port 80 Ask the server to GET /tr/bil-muh. Display the resulting page on the screen 02/11/2025 19 Types of Connection (TCP/UDP) Connection oriented model  Like phone calls.  Uses Transmission Control Protocol (TCP).  Defined ordering of messages and acks. Connectionless model  Like sending letters via postal service.  Uses User Datagram Protocol (UDP).  More efficient and good for sending broadcasts. 02/11/2025 20 10  02/11/2025 The Big Picture Whenever you visit a page on the web, your computer uses HTTP to download that page from another computer (server or host) somewhere on the Internet. This process contains the following steps:  Step 1: Direct browser to URL:  The user either types a URL in the browser or follows a link from an already opened page 02/11/2025 21 The Big Picture  Step 2: Browser looks up IP:  The browser uses a DNS resolver to map the domain (URL) to an IP address.  Step 3: Browser sends HTTP request:  Once the browser identifies the IP address of the computer hosting the requested URL, it sends an HTTP request. 02/11/2025 22 11  02/11/2025 The Big Picture  Step 4: Host sends back HTTP response:  Once the host computer receives the HTTP request, it sends back a response with both the content and metadata about it.  Step 5: The browser renders the response:  The browser now has all the information it needs to render the document requested. 02/11/2025 23 Internet vs World Wide Web Q: Is the World Wide Web (WWW) and the internet the same? A: No:  The world wide web, or web for short, are the pages you see when you're at a device and you're online.  The Internet is the interconnected network of networked devices that spans the globe and that the web works on. 02/11/2025 24 12  02/11/2025 Internet vs World Wide Web Birth of the Web  While working at CERN (the European Organization for Nuclear Research), a research facility in Switzerland, Tim Berners-Lee envisioned a means of communication for scientists by which they could easily “hyperlink” to another research paper or article and immediately view it.  Berners-Lee created the World Wide Web to fulfill this need.  In 1991, Berners-Lee posted the code for the Web in a newsgroup and made it freely available.  This version of the World Wide Web used Hypertext Transfer Protocol (HTTP) to communicate between the client computer and the web server, used Hypertext Markup Language (HTML) to format the documents, and was text based. 02/11/2025 25 Web Development Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. The word Web Development is made up of two words, that is:  Web: It refers to websites, web pages or anything that works over the internet.  Development: It refers to building the application from scratch. Web Development can be classified into two ways:  Frontend development.  Backend development. 02/11/2025 26 13  02/11/2025 Web Development The part of a website where the user interacts directly is termed as frontend. It is also referred to as the ‘client side’ of the application. Client (Browser) 02/11/2025 27 Web Development Backend is the server side of a website. It is part of the website that users cannot see and interact with. It is the portion of software that does not come in direct contact with the users. It is used to store and arrange data in database. Client (Browser) Server Database 02/11/2025 28 14  02/11/2025 Web Development Client (Browser) Server Database 2- Retrieve 1- Request data 3- Send data 5- Send 4- Generate 6- Show HTML file HTML file HTML file in visual format to the user 02/11/2025 29 Web Development Full stack web developer Client (Browser) Server Database 2- Retrieve 1- Request data 3- Send data 5- Send 4- Generate 6- Show HTML file HTML file HTML file in visual format to the user Frontend Backend 02/11/2025 30 15  02/11/2025 Enabling Web Technologies Hypertext Markup Language (HTML): used for writing web pages. Cascading Style Sheets (CSS): provides stylistic info for web Frontend pages. JavaScript: interactive web pages (on the client). Server side Programming language (Python, PHP, MySQL, Node.js, etc.): dynamic and data-driven pages (on the web Backend server). 43 02/11/2025 31 02/11/2025 32 16