1. Client-side Language and Server-side Language

1.1 Client-side Language

Basic user-side language including html, css, javascript, … comes with FrameWorks like Bootstrap, react, vue.

• Html, css play the role of building the web framework
• JS creates interaction between the user and the web

1.2 Server-side Language

• Server-side languages ​​can be: PHP, python, javascript, java, ruby, golang, … Receive and process requests sent up from client-side
• Corresponding Frameworks: Laravel, Django, Express Js, Springboot, …

2. Database

Database is the place to store all the data of the website that the programmer wants. For example, login information, product information, …
A database database allows multiple users to access concurrently at the same time.
Current Database Types:

• File databases like mongodb, text files, ascii files, ..
• Relational databases like: MS SQL Server, Postgres, Oracle
• Semi-structured database like: XML

3. Xampp/Lampp stack: install and configure

3.1 What is Xampp?

Xampp is a software that integrates many types of servers such as apache, tomcat, … Types of databases such as mysql.

• The first X stands for the operating system it works with: Linux, Windows, and Mac OS X.
• Apache: Apache Open Source Web Server is the most widely used server worldwide for distributing Web content. The application is provided as free software by the Apache Software Foundation.
• PHP: A server-side programming language, PHP allows users to create dynamic Web pages or applications. PHP can be installed on all platforms and supports a wide variety of database systems.
• MySQL / MariaDB: In MySQL, XAMPP contains one of the most popular relational database management systems in the world. Combined with Apache Web Server and the PHP programming language, MySQL provides data storage capabilities for Web services. Current versions of XAMPP have replaced MySQL with MariaDB (a fork of the community-developed MySQL project, made by the original developers).

3.2 Installing and configuring Xampp

There are enough versions to install for window/linux/os. Download here
On xampp, the default webserver will listen on port 80, mysql will listen on port 3306. If one of the two ports is occupied by a running service, you need to reconfigure the application port by the following way.

1. Config port for webserver (default: 80)

• B1: Find and select apache’s config button
  
• B2: Open httpd.conf file, Press Ctrl+F to find all port 80, and change it to a certain port (let’s say 81)
  
• B3: Done, default port changed from 80 to 81.

2. Config port for mysql (default: 3306)

• B1: Select apache’s config, open config.inc.php file, find and replace all default port 3306 to 3325
  
• Step 2: Select mysql config, open my.ini file, find and replace all default port 3306 to 3325
  
• B3: Done, default port changed from 3306 to 3325.

4. Web frameworks

The web framework model is built on the MVC pattern.
MVC consists of 3 components: model, view, and controller.

1. Controller

• The controller is responsible for receiving the request from the router, then processing the data, calling the model if needed, and finally returning it to the view.
  2. View
• Get the controller directive to render the template.
  3. Model
• Link to the database, get the data and return it according to the request of the controller.

5. Client and Server side rendering

5.1 Server side rendering

Server side rendering is the usual way of rendering web pages in the browser. The traditional way to render web content is as follows:

1. The user sends a request to the webserver
2. The server side checks and prepares the HTML content after going through a series of scripts in the website (including library links like cdn)
3. The HTML and css fragments are sent to the user’s browser for rendering.
4. The browser downloads the HTML and renders (render: the process of converting code into an interface, making pages visible to the user)
5. The browser then downloads the Javasciprt(JS) and executes the JS, which makes the web page interactive.

• The use of libraries for FE linked by cdn, helps reduce the pressure on the server.

5.2 Client side rendering

Client side rendering is the process by which the browser receives html, css, and js files and renders the interface and interactive effects with the website.

1. Browser loads HTML and JS while seeing a loading icon
2. Render the html and after the browser fetches the JS, it will make API requests through Ajax and fetch the dynamic content and process them to render the final content.
3. The final content will be rendered, the DOM processing on the user’s browser.

6. ORM (Object Relational Mapping)

6.1 What is an ORM?

ORM is a programming technique that maps objects defined in classes to data records in the database.

6.2 Mechanism of action of ORM

• ORM is to encapsulate the database in one object
• For example in laravel, using Eloquent ORM is shown in that it is a duplication between an object in the code and a table in the db.

7. REST and SOAP

7.1 REST

7.1.1 What is REST?

REST is a form of data structure transformation. It uses plain HTTP for machine-to-machine communication. So, instead of using a URL for handling some user information, REST sends an HTTP request like GET, POST, DELETE, etc. to a URL to process the data.
API (Application Programming Interface) is an application programming interface that helps to create methods to connect with different libraries and applications.
REST API is a data structure transformation application that has methods to connect to other libraries and applications. The API can return data that the user needs for the application itself with commonly used data types such as JSON or XML.

7.1.2 Structure Of REST API

REST usually works mainly based on HTTP protocols, the basic operating bases mentioned above will be using separate HTTP methods:
1. GET: Returns with a Resource or has a list of Resources.
2. POST: It supports creating a new Resource.
3. PUT: Usually supports updating information for Resource.
4. DELETE: Delete a Resource.
This is the operation method called Crud which corresponds to a Create, Read, Update, Delete meaning in order: Create, read, edit and delete. The format for the API is either JSON or XML.

Eg

• GET/users: can get a list of users.
• GET/users/123: will get the information of a user with id=123
• GET/posts: get all posts.
• GET/users/123/projects: Will get all user projects with id=123.

8. Sessions & Cookies

9. How to secure store password

10. Create form and upload files

11. Same-origin policy and CORS

12. CSP content sharing policy”