IN 215 1

IN 215
INTERNET PROGRAMMING
altab6ua Ayoub Elgassier
 Lecture Points
2

 The Web Concepts

 The Web Development

 How the Web works

Introduction to Internet Programming Semester: Spring 2024-2025

 Client/Server
3

Computers on the Internet use Client-Server architecture in which the remote server machine provides
files & services to the user local client machine.

 Client:  Server:

▪ Communicates with the server, ▪ Distributes the information and the

machine where the information and
▪ fetches the information, processes it, and
software reside is called the server.
then displays it.
▪ A server process, running on a server
▪ process, running on a client host, access
host, provides access to a service.
the service via the server process.

 The primary idea of client/server system is that you have a central repository of information
Introduction to Internet Programming Semester: Spring 2024-2025
 Network Protocols
4
‫ﺗﻧظﯾم‬
 A network protocol is a standard way of regulating data transmission between computers.
1 2
 Two network protocols are now dominant: TCP (Transaction Control Protocol) and IP (Internet
Protocol), together known as TCP/IP.
‫ﻣﻌدات‬
 An IP (Internet Protocol) address is a unique code identifying a piece of equipment connected to a
network. These addresses are used in messages between network devices.

Introduction to Internet Programming Semester: Spring 2024-2025

 Web Browser
5

 A web browser or Internet browser is a software app for retrieving, presenting,

and passing information resources on the Web.

 Browsers primarily ‫وظﺎﺋﻔﮫ‬

1  interprets the information in the URL in order to connect to the proper Internet
server and to retrieve your desired document.

2  analyze and process HTML documents to determine how to arrange and style
the page's content.

3  Each time a click on a hyperlink in a WWW document instructs browser to

find the URL that’s embedded within the hyperlinks.

Introduction to Internet Programming Semester: Spring 2024-2025

 URL - Uniform Resource Locator
6

 needed to locate any resources on the Web. ‫اﺳﺗﺧداﻣﮫ‬

 an address format specifying how and where to find a document.

 The General format is as follows: [Link]

1  machine_name is either an IP address [[Link]], or a Fully Domain Name [[Link]]

2  port is an entry point to software on the server; an optional part of a URL.

3  path is a relative file path from the server's document root; the server will start looking for a file in a specific
directory and paths are relative to this

4  file_name is the name of the file to be browsed, e.g. welcome

5  file_extension is one of a number of suffixes indicating the type of data contained within the file, e.g. html
[Link]
Introduction to Internet Programming Semester: Spring 2024-2025
 HTTP - Hyper-Text Transfer Protocol
7

 The basic structure of HTTP communication follows request - response model.

 The HTTP interaction is initiated by a client sending a request message to the server, the server is then
expected to generate a response message.
‫اﺳﺗﺧداﻣﮫ ﻓﻲ اﻟوﯾب‬
 Used by the Web to define how message are formatted &
transmitted and what actions Web servers & browsers should take
in response to various commands. ‫ﻟﯾش ﺳﻣﯾﻧﺎه ﺑﺎﻟﺳم ھدا ؟‬
 known as Hyper Text Transfer Protocol because of its efficiency
that allows us to use in a hypertext environment where there are
rapid jumps from one document to another document.

Introduction to Internet Programming Semester: Spring 2024-2025

 HTTPS
8

 Hypertext Transfer Protocol Secure is an extension of the Hypertext Transfer Protocol.

 HTTPS is used for secure communication over a computer network, and is widely used on the
Internet.
‫ﻛﯾف ﯾﺗم ﺗﺷﻔﯾر ﺑروﺗوﻛول اﻻﺗﺻﺎل‬
 In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS) or,
formerly, Secure Sockets Layer (SSL).

Introduction to Internet Programming Semester: Spring 2024-2025

 HTTP Methods
9

 HTTP methods are used to interact with server-side resources

 Each HTTP method maps to a specific operation, such as creating, reading, updating, or deleting a
resource, and an HTTP method must be included with every request

GET Retrieves information from the given

server using a given URI

POST Sends data to the server using HTML

Forms

DELETE Removes all current representations of the

target resource given by a URI

PUT Replaces all current representations of the

target resource with the uploaded content

Introduction to Internet Programming Semester: Spring 2024-2025

 HTTP Status Codes
10

HTTP status codes are an essential part of web communication, providing valuable insights into the
outcome of a client's request to a server, allowing for effective troubleshooting and error handling

200 OK
201 Created
301 Moved Permanently
400 Bad Request
401 Unauthorized
404 Not Found
500 Internal Server Error
503 Service Unavailable

Introduction to Internet Programming Semester: Spring 2024-2025

 HTTP Characteristics
11

1  Connection-less; a connection is established only for the period of transfer, and each command is

executed independently, without any knowledge of the commands that came before it. This is the
main reason that it is difficult to implement Web sites that react intelligently to user input.

2 Stateless; the server has no 'history' of client visits

3 Comprehensive addressing; diverse files on any HTTP server world-wide can be referenced via
URLs;

4 Diverse data; using extensible MIME-types (see later), HTTP servers can supply information of
every possible data types; and

5  Rapid; allows request-response cycles of less than 100 milliseconds

Introduction to Internet Programming Semester: Spring 2024-2025

 MIME - Multipurpose Internet Mail Extensions
12

 MIME were created to exchange different kinds of data files on the Internet (audio, video, images,
other kinds)

 When information is sent to a browser, a MIME

header identifies the file type of the document.

 Attaching a MIME type to a file allows the browser

to process the file's contents correctly without the

browser having to guess at the data type from the

file's extension.
Introduction to Internet Programming Semester: Spring 2024-2025
 Website Development
13

To develop a Website, three steps

1  Develop the contents

 Internet Programming

2  Obtain the appropriate equipment

 Webserver hardware & software

3  Register the webserver to an Internet

 Obtain IP address and DNS address

Introduction to Internet Programming Semester: Spring 2024-2025

 Web Programming Languages
14

 Programming Language is a vocabulary and set of grammatical rules (syntax) for instructing a
computer to perform specific tasks.

 Web Programming is a set of activities and technologies of script development

 Web programming refers to writing, markup and coding, involved in Web site building (known as
web development), which includes web content, web client and server scripting and network
security.

Introduction to Internet Programming Semester: Spring 2024-2025

 Frameworks & Libraries
15

 Software framework is universal reusable platform, providing functionality or shell to build apps &
projects

 contains reusable code written to perform common tasks allowing to add significant functionality to
the system using existing code around your structure

 A library is a collection of pre-written code that can be used to perform common tasks or add specific
functionality to a program.

 often written in a specific programming language and are designed to be easily reusable and modular.

 With libraries, there is no need to write code to perform a specific function because the library already
contains the code for the specific function. programmers can also create their own custom libraries

Introduction to Internet Programming Semester: Spring 2024-2025

 Frameworks & Libraries
16

 Frameworks

1. Django

2. [Link]

3. Laravel

 Libraries

1. jQuery (JavaScript)

2. Bootstrap (HTML, CSS, JavaScript)

3. React (JavaScript)

Introduction to Internet Programming Semester: Spring 2024-2025

 Technology Stack
17

 A technology stack is a collection of tools, programming languages, and frameworks that developers
use for web development.

 made up of several layers of components that are utilized to create web and mobile apps.
1 2
 All apps have 2 major components: the client-side (front end) and the server-side (back end).

 The frontend, where the user interacts with the website, comprises three major technologies:
1 2 3
HTML, CSS, and Javascript.

 LAMP stack: LAMP stands for Linux, Apache, MySQL, and PHP

 MEAN stack: MEAN stands for MongoDB, [Link], Angular JS, and [Link].

Introduction to Internet Programming Semester: Spring 2024-2025

 Server side code
18

 A software that runs on the server, not the client, called Backend

 Receives input from URL parameters, HTML Form, Cookies, HTTP headers

 Access server-side database, email servers, files, mainframes, etc.

 Server-side code dynamically builds a custom HTML response for a client.

 Why Server-side code?

1  Accessibility: reach the Internet from any browser, any device, any time, anywhere

2  Manageability

3  Security

4  Scalability
Introduction to Internet Programming Semester: Spring 2024-2025
 Client Side Code
19

 Software that is downloaded from Web server to browser & then executes on the client, called Frontend

 The frontend comprises everything the user sees and experiences instantly while visiting a website.
Why client-side code?
1 Better scalability: less work done on server

2 Better performance/user experience–

3  Create UI constructs not inherent in HTML

 Drop-down menu; Tabbed dialogs

4 Effects, e.g. animation

5 Data validation
Introduction to Internet Programming Semester: Spring 2024-2025
 Text Editor & IDE
20

 An integrated development environment (IDE) is a software app that helps programmers develop
software code efficiently.

 IDE increases developer productivity by combining capabilities such as software editing, building,
compiling, debugging, testing, preview, and packaging in an easy-to-use application.

 A code editor can open files in different formats for making

changes, but they are missing the building and evaluation aspects &
of an IDE.

 A text editor can only write code

Introduction to Internet Programming Semester: Spring 2024-2025

 Website Design Tools/ Editors
21

Currently, there are different web site design tools. Some of them are as follows

 Visual Studio Code  WordPress

 Atom  Joomla
 Sublime
 Constant Contact Builder
 Adobe Dreamweaver  Fluid UI
 Site Builder
 Notepad  Figma
 Gator Builder
 VIM  Adobe XD
 Divi
 Brackets
 Weebly
 Notepad++

 PyCharm  GIMP

Introduction to Internet Programming Semester: Spring 2024-2025

 Web Server
22

 A web server can be referred to as either the hardware (the computer) or the software (the computer
application) that helps to deliver content that can be accessed through the Internet.

 The hardware houses the content, while the software makes the content accessible through the internet.

 Software that delivers Web pages and other documents to browsers using the HTTP protocol

 A web server is responsible for checking requests for viewing that web site.

 Client computers send requests for particular URLs to the web server, which then finds the
appropriate web page, and sends it back to the client computer.

 A web server on the Internet must have a permanent Internet connection, so that the web server can
respond straight away.
Introduction to Internet Programming Semester: Spring 2024-2025
 Popular Web Servers
23

 APACHE: Apache HTTP Server is a free and open-source

web server that delivers web content through the internet. It is

commonly referred to as Apache and after development; it

quickly became the most popular HTTP client on the web.

 IIS: Internet Information Services (IIS) is a flexible, general-

purpose web server from Microsoft that runs on Windows

systems to serve requested HTML pages or files. IIS works

through a variety of standard languages and protocols

Introduction to Internet Programming Semester: Spring 2024-2025
 Web application (Web app)
24

 A web application (or webapp), unlike standalone application, runs over the Internet

 The web site includes static web pages, or aggregation of static and dynamic web pages.

 The later ones link under certain rules data sources (structured and non-structured DB) and program
codes (scripts), realizing some functionality. This combination of web pages, scripts and DB is called
web application.

 The web applications are distributed (on one or more

servers), working under HTTP and available by browser
or non-browser client application serving as network
interface.

Introduction to Internet Programming Semester: Spring 2024-2025

 Web Architecture
25

Introduction to Internet Programming Semester: Spring 2024-2025

 How web works
26

1. The user types a URL into the Web browser to identify which web page they would like to view

2. The browser parses the URL and requests a DNS server using broadcast IP. It then sends the URL to

the DNS to resolve the IP address. In other words, it converts [Link] to [Link]

3. The browser then uses the IP address to send the HTTP packet to the browser’s ISP connection, which

passes it to the next server, routing it from server to server until it reaches the destination Web server

4. The Web server locates the request page either on its hard drive or cached in memory

5. The Web server sends it connects back to the requested browser

6. The browser interprets the HTML formatting instructions and displays the content to the user
Introduction to Internet Programming Semester: Spring 2024-2025
 How web works
27

Introduction to Internet Programming Semester: Spring 2024-2025

 In this course…….
28

The course will focus on the following in upcoming lectures:

 HTML (Hyper-Text Transfer Protocol) provides the format for specifying simple logical structure
and links in a hypertext document. The documents are interpreted by a Web browser which uses the
HTML code to format the page being displayed

 CSS (Cascading Style Sheets) is a style sheet that describes

how HTML components appear on a page. CSS is used to
manage your website’s appearance, style, and formatting,
including RGB values, border colors, background pictures,
and more.
 JavaScript is a scripting language that allows you to control the behavior of your website.
Introduction to Internet Programming Semester: Spring 2024-2025
 Questions
29

Introduction to Internet Programming Semester: Spring 2024-2025