Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| modul:m290:learningunits:lu08:theorie:01 [2024/10/29 13:26] – vdemir | modul:m290:learningunits:lu08:theorie:01 [2024/11/18 06:13] (aktuell) – kdemirci | ||
|---|---|---|---|
| Zeile 3: | Zeile 3: | ||
| ===== Learning Objectives ===== | ===== Learning Objectives ===== | ||
| - Describe the 3 tiers of a typical web communication | - Describe the 3 tiers of a typical web communication | ||
| - | - Name the languages or softwsre, which are used on each tier | + | - Name the languages or software, which are used on each tier |
| ===== WHAT is a 3 tiers web architecture? | ===== WHAT is a 3 tiers web architecture? | ||
| The 3-tier web architecture is a way of structuring a website or application to make it more organized, secure, and easy to manage. It splits everything into three main layers: | The 3-tier web architecture is a way of structuring a website or application to make it more organized, secure, and easy to manage. It splits everything into three main layers: | ||
| - | {{: | + | {{: |
| - | + | ||
| - | {{ : | + | |
| Each layer has a specific job and only communicates with the layer directly next to it. This separation helps improve security (each layer only does what it's supposed to), makes it easier to update or fix issues, and allows each layer to be scaled independently if the app grows. | Each layer has a specific job and only communicates with the layer directly next to it. This separation helps improve security (each layer only does what it's supposed to), makes it easier to update or fix issues, and allows each layer to be scaled independently if the app grows. | ||
| - | ==== 1. Presentation Layer (Frontend) ==== | + | {{ : |
| + | |||
| + | ==== 1. Presentation Layer/Tier (Frontend) ==== | ||
| * This is the layer that users see and interact with, like a website or app screen. | * This is the layer that users see and interact with, like a website or app screen. | ||
| * It’s built with HTML, CSS, and JavaScript to show things like buttons, text, images, and form fields. | * It’s built with HTML, CSS, and JavaScript to show things like buttons, text, images, and form fields. | ||
| Zeile 26: | Zeile 26: | ||
| * Frameworks: React, Angular, and Vue are popular frontend frameworks built on JavaScript. | * Frameworks: React, Angular, and Vue are popular frontend frameworks built on JavaScript. | ||
| - | ==== 2. Application Layer (Backend) ==== | + | ==== 2. Application Layer/Tier (Backend) ==== |
| * This layer handles the " | * This layer handles the " | ||
| * When you enter your login info, the Application Layer checks if it’s correct and decides what happens next. | * When you enter your login info, the Application Layer checks if it’s correct and decides what happens next. | ||
| Zeile 37: | Zeile 37: | ||
| * Ruby: Often used with Ruby on Rails for rapid development. | * Ruby: Often used with Ruby on Rails for rapid development. | ||
| * PHP: Common in web development, | * PHP: Common in web development, | ||
| - | ==== 3. Data Layer ==== | + | ==== 3. Data Layer/Tier ==== |
| * This layer stores all the data the app needs, like user accounts, messages, or posts. | * This layer stores all the data the app needs, like user accounts, messages, or posts. | ||
| * When you log in, this layer is where your username and password are checked against stored data. | * When you log in, this layer is where your username and password are checked against stored data. | ||
| Zeile 47: | Zeile 47: | ||
| * Other Database Languages: PL/pgSQL for PostgreSQL and PL/SQL for Oracle are specialized SQL extensions that add procedural elements. | * Other Database Languages: PL/pgSQL for PostgreSQL and PL/SQL for Oracle are specialized SQL extensions that add procedural elements. | ||
| + | ===== The winner is .... JavaScript ===== | ||
| + | As you can see, the programm language JavaScript is used on both layers, presentation and logic layer. It is thereforeclear that we will also program our server in JavaScript in this Module 290. As we are already familiar with JavaScript, we do not have to explicitely learn a new programm language, but simply use the old one for a new purpose. The relevant JavaScript components are | ||
| + | * **Node.js: | ||
| + | |||
| + | * **NPM:** NPM, or Node Package Manager, is a package manager specifically designed for JavaScript. It is an essential part of the Node.js ecosystem and is used by developers to manage dependencies and libraries in their projects. | ||
| + | |||
| + | * **Express: **Express is a popular web application framework for Node.js. It was developed to facilitate the creation and management of server-side applications and APIs in JavaScript. It is also known as // | ||
| + | | ||
| ==== Vocabulary ==== | ==== Vocabulary ==== | ||
| ^English ^ Deutsch ^ | ^English ^ Deutsch ^ | ||
| | ... | ... | | | ... | ... | | ||
| - | | ... | ... | | + | |
| ---- | ---- | ||
| [[https:// | [[https:// | ||