1 of 93

Meeting 4

Understanding The Architecture

π Space in CIS Team – Web Development

2 of 93

Meeting Agenda

Recap for the our first month.

Entry Level
Beginner Level
Intermediate Level

Client – Server Architecture.

π Space in CIS Team – Web Development

3 of 93

Entry Level – 2 Months

Introduction to Computer Science

Data Structure and Algorithms

Database: Design & SQL

New: Operating Systems

π Space in CIS Team – Web Development

4 of 93

Beginner Level - 2 Months

GitHub

Client - Server & HTTP

π Space in CIS Team – Web Development

5 of 93

Intermediate Level - 4 Months

Laravel

Advanced Concepts

π Space in CIS Team – Web Development

6 of 93

DON’T START CODING WITHOUT THINKING FIRST!

π Space in CIS Team – Web Development

7 of 93

System Design

Modeling:

Always try to model the ideas in a form that “HUMANS” will understand.
System Design is all about modeling the system you want to build before you build it.

فهم السيستم عن طريق بعض النماذج.

π Space in CIS Team – Web Development

8 of 93

System Architecture

We Are developing a web application, right?

The most common model that illustrates how web application works is:

CLIENT-SERVER Model

π Space in CIS Team – Web Development

9 of 93

CLIENT-SERVER-Model

π Space in CIS Team – Web Development

10 of 93

π Space in CIS Team – Web Development

11 of 93

Case Study: Me & Supermarket

"I’m asked to buy something from the supermarket, to buy some stuff..

But I’m really lazy, I want to stay home and just call delivery.

So I called the supermarket for delivery"

Mm, can you describe that simple process?

π Space in CIS Team – Web Development

12 of 93

Me & Supermarket Cont.

1- I call the number of the Supermarket عشان اعرف اوصله واكلمه

2- the Supermarket pick up the phone هيرد عليا

3- I REQUEST to buy somethings from the seller. اقوله انا

عايز ايه

4- the Supermarket RESPOND to Me

π Space in CIS Team – Web Development

13 of 93

Me & Supermarket Cont.

5- The Supermarket will tell me: If they have what I asked for or not

6- Send and deliver the response of what I asked for.

7- Then I took the things by a “BAG”

π Space in CIS Team – Web Development

14 of 93

What happened there?

“I (The Client) Requested (Made Request) Something (surely I want some resource) over the phone (Communication channel) From the Supermarket (The Server) who responded (made a RESPONSE) with what I wanted (The resource) and serve me and send it to the bag.”

π Space in CIS Team – Web Development

15 of 93

Components

Client – Server

Communication Channel

Request – Response

Resources & Services

π Space in CIS Team – Web Development

16 of 93

Client – Server Model.

π Space in CIS Team – Web Development

17 of 93

Client – Server Model.

Distributed application structure that partitions tasks between the providers of a resource or service, called servers, and service requesters, called clients.

Clients and servers communicate over a computer network.

Clients send Requests to Servers asking for some kind of information.

Upon receiving a Request, Servers send Responses back to the Client

π Space in CIS Team – Web Development

18 of 93

Communication Language

Do You speak English?

Sprechen Sie Deutsch?

لا الحوار كده صعب، لازم الاتنين يفهموا نفس اللغة عشان يقدروا يكلموا بعض.

π Space in CIS Team – Web Development

19 of 93

HTTP

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML.

It was designed for communication between web browsers and web servers.

π Space in CIS Team – Web Development

https://www.seobility.net/en/wiki/HTTP_headers

20 of 93

Full Example

π Space in CIS Team – Web Development

https://cisteam.org

21 of 93

Full Example

1- You open your browser, the Client, and type in a web address like https://cisteam.org and hit enter.

2- The browser takes this address and builds an HTTP Request. It addresses it to the Server located at https://cisteam.org .

3- The Request is handed off to your Internet Service Provider (ISP) (like TEDATA) and they send it through the Internet, mostly a series of wires and fiber optic cables, to the Server.

π Space in CIS Team – Web Development

22 of 93

Full Example Cont.

4- The Server reads the Request. It knows how to read it because it is formatted as an HTTP Request.

5- The Server generates an HTTP Response to that Request.

π Space in CIS Team – Web Development

23 of 93

Full Example Cont.

6- The server hands the Response off to their ISP and it goes through the internet to arrive at your computer.

7- Your browser reads the Response. It knows how to read it because it is formatted as an HTTP Response.

8- Your browser displays the data on your machine

π Space in CIS Team – Web Development

24 of 93

Alert: Web Application?

Web Application: application software that runs on a web server.

Web Application is run by server side language: PHP

Web application is a client-side and server-side software application in which the client runs and can request service via web browser

π Space in CIS Team – Web Development

25 of 93

Backend vs Frontend

π Space in CIS Team – Web Development

26 of 93

PIC

π Space in CIS Team – Web Development

27 of 93

Backend vs Frontend

Backend: What you never see as a client

Frontend: Everything you see as a client

π Space in CIS Team – Web Development

28 of 93

Backend vs Frontend Cont.

Backend:

The Code Runs At the Server Side of the website, Clients can never see or modify the code, The code runs far away at the server only.

Frontend:

The Code Runs At the Client Side of the Website.
The Server sends those files “static files” to the client browser
The Client Browser is smart enough to render the files.

π Space in CIS Team – Web Development

29 of 93

Static Sites

static site “Only the files you want!”

It returns the same hard-coded content from the server whenever a particular resource is requested.

So for example if you have a page about a product at /static/myproduct1.html, this same page will be returned to every user.

If you add another similar product to your site you will need to add another page (e.g. myproduct2.html) and so on.

π Space in CIS Team – Web Development

30 of 93

The Static Nightmare

Static vs Dynamic

π Space in CIS Team – Web Development

31 of 93

But what if you have a million user?��You will serve a million page!!

π Space in CIS Team – Web Development

32 of 93

OH NO!

π Space in CIS Team – Web Development

33 of 93

The Static Nightmare

Why not make everything Dynamic?

One Page, Served to Million User

ONLY CHANGE THE DATA!

Which means we will be smarter, instead of creating a million page, we will create one page and change the data according to the user!

π Space in CIS Team – Web Development

34 of 93

35 of 93

Dynamic sites

A dynamic site is one that can generate and return content based on the specific request URL and data (rather than always returning the same hard-coded file for a particular URL).

Using the example of a product site, the server would store product "data" in a database rather than individual HTML files.

π Space in CIS Team – Web Development

36 of 93

Dynamic sites

π Space in CIS Team – Web Development

37 of 93

Dynamic Sites Cycle .

When receiving an HTTP GET Request for a product:

1. The server determines the product ID

/best?team=my_team_name&show=11

/best/my_team_name/11/

2. The Web Server detects that the request is "dynamic" and forwards it to the “Web Application” for processing.

π Space in CIS Team – Web Development

38 of 93

Dynamic Sites Cycle

3. Fetches the data from the database based on the id given.

4. Constructs the HTML page for the response by inserting the data into an HTML template.

5. Send the template to the client.

π Space in CIS Team – Web Development

39 of 93

An Updated Client – Server Model…

π Space in CIS Team – Web Development

https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview

40 of 93

Frontend

π Space in CIS Team – Web Development

41 of 93

I Can See That!

π Space in CIS Team – Web Development

42 of 93

HTML Intro

It’s used to “structure” the page which the Server sends to the Client.

All I can do in HTML is to define the overall structure of the web page!

A file with special extension: .html

π Space in CIS Team – Web Development

43 of 93

HTML Cont.

HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

π Space in CIS Team – Web Development

44 of 93

HTML Element

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

π Space in CIS Team – Web Development

45 of 93

HTML Element attributes

Each element can also have attributes - each element has a different set of attributes relevant to the element.
They control and changes the element's behavior

Example:

<a href="http://www.example.com/">Visit this great website!</a>

- href here is an attribute

π Space in CIS Team – Web Development

46 of 93

HTML Example

π Space in CIS Team – Web Development

47 of 93

Life with HTML Only!

π Space in CIS Team – Web Development

48 of 93

The skeleton is now a human being with flesh and beauty!

π Space in CIS Team – Web Development

49 of 93

CSS To the Rescue

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

A file with special extension: .css

π Space in CIS Team – Web Development

50 of 93

CSS Syntax

π Space in CIS Team – Web Development

https://www.w3schools.com/css/css_syntax.ASP

51 of 93

JavaScript

The Previous human can’t jump, can’t run and can’t interact with you.

JavaScript Adds Interactivity, The page responds to you without ever going to the server!

π Space in CIS Team – Web Development

52 of 93

You Don’t know JavaScript

π Space in CIS Team – Web Development

53 of 93

Backend

π Space in CIS Team – Web Development

54 of 93

You Can’t See Me!

π Space in CIS Team – Web Development

55 of 93

Server Side

It’s what derives the web application.

It handles routing.

Handles Authentication

Handles Authorization

Connects with the database

π Space in CIS Team – Web Development

56 of 93

Consider it: The Car Engine!

π Space in CIS Team – Web Development

57 of 93

What is PHP

PHP is a popular general-purpose scripting language that is especially suited to web development.

Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

Just files with “.php” extension.

π Space in CIS Team – Web Development

58 of 93

Where is PHP?

Server Side

The Code that exists on the server only, never sent to the client.

You can write html inside php files.

Wait but why?

Because we want to create dynamic pages!

π Space in CIS Team – Web Development

59 of 93

PHP at Server Side

PHP is a server side language, which means what happens:

1- The web server processes PHP files first and figure out the data that needs to be displayed inside the html

2- Render the data inside the html page

3- Send the page to the browser with the new dynamic data

π Space in CIS Team – Web Development

60 of 93

π Space in CIS Team – Web Development

61 of 93

You already met PHP!

π Space in CIS Team – Web Development

62 of 93

Meet PHP on Steroids

π Space in CIS Team – Web Development

63 of 93

Laravel Framework

Laravel is a PHP web application framework with expressive, elegant syntax.

More Next Session

π Space in CIS Team – Web Development

64 of 93

π Space in CIS Team – Web Development

65 of 93

IMPORTANT NOTE!

Laravel is Easy!

Easy is dangerous!

π Space in CIS Team – Web Development

66 of 93

Meeting 5 & 6

Where are we?

π Space in CIS Team – Web Development

67 of 93

Recap:

π Space in CIS Team – Web Development

68 of 93

Client-Server & Dynamic Sites

π Space in CIS Team – Web Development

69 of 93

Client-Server Model with Dynamic Sites

π Space in CIS Team – Web Development

https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview

70 of 93

The Software Architecture

We knew the High Level System Architecture.

“Client – Server Model”

It’s Time To Know the design of our Web Application

Where to Start!

π Space in CIS Team – Web Development

71 of 93

Into The Web Application

π Space in CIS Team – Web Development

72 of 93

Meet Design Patterns.

“A Pattern is a solution to a problem in a context”.

The context:

is the situation in which the pattern applies. This should be a recurring situation.

The problem:

refers to the goal you are trying to achieve in this context, but it also refers to any constraints that occur in the context.

The solution:

is what you’re after: a general design that anyone can apply that resolves the goal and set of constraints.

π Space in CIS Team – Web Development

73 of 93

What is a compound Design Pattern?

“A Compound Pattern combines two or more patterns into a solution that solves a recurring or general problem.”

NOW INTERDUCING THE KING OF COMPOUND DESIGN PATTERNS:

MVC

π Space in CIS Team – Web Development

74 of 93

The King of Compound Patterns: MVC

Context: Building Web Application.

Problem: Separate the Functionalities of the Web Application.

Solution: We will use A certain organization of classes.

π Space in CIS Team – Web Development

75 of 93

HAHA, KING HA?

Other Design Patterns used to Bully MVC ☹

“You are just an Oreo!”

They Even created a song for him

π Space in CIS Team – Web Development

76 of 93

Oreo?

π Space in CIS Team – Web Development

77 of 93

π Space in CIS Team – Web Development

Head First Design Patterns 2^nd Edition

78 of 93

Listen.

https://www.youtube.com/watch?v=YYvOGPMLVDo

π Space in CIS Team – Web Development

79 of 93

Walkthrough

1-You’re the user—you interact with the view.

go to CIS Team Website for example, the view is what is displayed to you

2- The controller asks the model to change its state.

You press a button, the component that handles your action is the controller

3- The controller may also ask the view to change.

Now after you pressed the button, the view will change, according to your actions

π Space in CIS Team – Web Development

80 of 93

Walkthrough Cont.

4- The model notifies the view when its state has changed.

The model needs to tell the view that the data (state) has been changed

5- The view asks the model for state..

The view gets the state it displays directly from the model

π Space in CIS Team – Web Development

81 of 93

Recap For The Design Phase

Overall Architecture: Client – Server Model

Software Architecture: MVC

π Space in CIS Team – Web Development

82 of 93

Roadmap Alert!

1- Head First Object Oriented Analysis And Design

2- Head First Design Patterns 2^nd edition

π Space in CIS Team – Web Development

83 of 93

Into The Communication Protocol��HTTP

π Space in CIS Team – Web Development

84 of 93

HTTP Request

When a “client” (like a web browser) retrieves information, it sends a payload of data to a server as a “request”.

This request has many parts, but we will focus on the verb and path for now.

π Space in CIS Team – Web Development

85 of 93

HTTP Verb and Path��Every request needs to be able to tell a server what information is requested and how that information is being requested.

π Space in CIS Team – Web Development

86 of 93

The What: “Path”

The what is the path (also know as a URI), indicating what resource this request is referencing.

Examples of a path:

/tasks

/tasks/4

/items/6/reviews

π Space in CIS Team – Web Development

87 of 93

The How: “Verb”

The how is the verb, indicating what actions the server should take regarding the requested resource.

While the path can vary greatly based on the application, the verbs follow common patterns.

π Space in CIS Team – Web Development

88 of 93

HTTP verbs:

π Space in CIS Team – Web Development

89 of 93

Request Vs Response

π Space in CIS Team – Web Development

90 of 93

Inside the Web Application:��MVC & Routing

π Space in CIS Team – Web Development

91 of 93

MVC & Routing

π Space in CIS Team – Web Development

https://dzone.com/articles/introduction-to-mvc-architecture-web-developer-poi

92 of 93

Homework 1

Study the slides at least two times.
Read These Articles: مهم جدا جدا جدا

https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview

https://www.guru99.com/functional-requirement-specification-example.html

OOAD Ch2

π Space in CIS Team – Web Development

93 of 93

Thank You

π Space in CIS Team – Web Development