27/01/2023 =D ITWM102 Web Development 2 (Back-end) Introduction to Server-Side Programming27/01/2023 — Course Outline + Backend development roadmap + What is server-side programming? + What is a server? + What is a Hostname and a Port? * What is HTTP? + HTTP Request and Response + HTTP Methods + HTTP Response Status Codes * Static Sites vs Dynamic sites SCR sinincen: TE oToaTs| ———————— Backend Development Roadmap Learn the basics of server-side programming languages such as JavaScript, Python, Ruby, PHP or Java: * To start developing backend applications, it is important to have a solid understanding of at least one server-side programming language. + Each language has its own strengths and weaknesses, so it is. important to choose one that best fits your needs and goals. QCHee ne TE oc: oma27/01/2023 — Backend Development Roadmap Learn server-side frameworks such as Express.js, Flask, Ruby on Rails, Laravel or Spring: + Frameworks provide a structure for building web applications and offer features such as routing, database integration, and security. + They can help speed up development time and make it easier to build scalable and maintainable web applications SCR sinincen: TE oToaTs| ———————— Backend Development Roadmap Learn databases and database management systems (DBMS) such as MySQL, MongoDB, or PostgreSQL: * Backend applications often need to store and retrieve data, so it is important to understand how databases work and how to interact with them using SQL or a relevant language driver. QCHee ne TE oc: oma27/01/2023 — Backend Development Roadmap Learn version control systems such as Git: + Version control systems help developers track changes to their code and collaborate with others. + Itis an essential tool for any developer, as it allows for easy collaboration and rollbacks in case of errors. SCR sinincen: TE oToaTs| ———————— Backend Development Roadmap Learn deployment and hosting options such as Heroku, AWS, or DigitalOcean: * Once a backend application is developed, it needs to be deployed and hosted on a server so that it can be accessed by users. + There are many different options for deployment and hosting, each with their own advantages and disadvantages. QCHee ne TE oc: oma27/01/2023 — Backend Development Roadmap Learn web application security: + Security is a critical aspect of backend development + As a backend developer, you should be familiar with common security threats such as cross-site scripting (XSS) and SQL injection attacks, and know how to prevent them. SCR sinincen: TE oToaTs| ———————— Backend Development Roadmap Get hands-on experience by building and deploying a web application: + The best way to learn backend development is by building and deploying a web application. * This will give you practical experience with the technologies and concepts you have learned and help you understand how everything works together. QCHee ne TE oc: oma27/01/2023 — Backend Development Roadmap Continuously learn and stay up to date with the latest technologies, trends, and best practices in backend development: + The field of backend development is constantly evolving, so it is important to keep learning and staying up to date with new technologies, trends, and best practices. SCR sinincen: TE oToaTs| ———————— Backend Development Roadmap Consider obtaining a certification or a degree in computer science or web development: Acertification or a degree in computer science or web development can help you to further advance in this field and give you a deeper understanding of the subject. QCHee ne TE oc: oma27/01/2023 — What is server-side website programming? * Creating web applications that run directly on the server. + The server-side code or the back-end handles tasks such as: + data storage * user authentication + server-side validation + managing business logic + creating API SCR sinincen: TE oToaTs| ———————— What is server-side website programming? * Data storage and management: + Managing the storage and retrieval of data, such as user information, product catalogs, and other application-specific data. + This typically involves communicating with a database, such as MySQL, MongobB, or PostgreSQL, to store and retrieve data. + User authentication and authorization: + Handling the process of user authentication and authorization. + This includes tasks such as password hashing, token generation, and session management. + This is crucial for maintaining the security of the web application and ensuring that only authorized users have access to certain parts of the application. QCHee ne TE oc: oma27/01/2023 — What is server-side website programming? + Server-side validation: + Validating user input before it is processed or stored. + This is important for ensuring that the data is accurate and consistent, and it helps to prevent errors and security vulnerabil + Business logic: + Handling the business logic of the application + This includes tasks such as calculating prices, generating reports, and processing orders. SCR sinincen: TE oToaTs| ———————— What is server-side website programming? + API creation: + Creating an API (Application Programming Interface) that the frontend can use to communicate with the backend + This API defines the endpoints and methods that the frontend can use to interact with the backend and retrieve data. QCHee ne TE oc: oma27/01/2023 — What is server-side website programming? + Popular server-side web languages include: + PHP + Python + Ruby -C# + NodeJS (JavaScript). SCR sinincen: TE oToaTs| ———————— What is server-side website programming? + The server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use. + Developers typically write their code using web frameworks. + Web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular domain. QCHee ne TE oc: oma27/01/2023 What is server-side website programming? + Server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience. + Companies like Amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc. + Banks use server-side programming to store account information and allow only authorized users to view and make transactions. QC: TE [sao ———————— What is a server? + A server is a computer program or device that provides functionality for other programs or devices, known as “clients”. + In web development, that server uses HTTP to serve files to users which render web pages. + This happens in response to requests which are forwarded from the HTTP clients of users’ computers: when you type in a URL to your browser's address bar, you are sending an HTTP request. + Web server refers to server software, or hardware dedicated to running said software, that can serve contents to the World Wide Web. + Aweb server processes incoming network requests over the HTTP protocol (and several other related protocols). QCHee ne TE oc: oma 1027/01/2023 — What is a Hostname and a Port? + Ahostname is a label used to identify a device in a network, allowing computers to communicate with one another. A hostname can be translated into an IP address, which allows the computer to be uniquely identified on the internet. + A portis an endpoint of communication. It is a number from 0 to 65535 (with the range 0 to 1024 reserved for system ports). You might often use localhost:8080 to access a development server for web applications, and the number 8080 represents the port. + Ports can be used to “listen” for service requests from clients: in our example, the port will listen for connections to the server. SCR sinincen: TE oToaTs| | What is HTTP? + HTTP stands for ‘Hypertext Transfer Protocol’, and it is the system of tules that underlies communication between clients and servers on the web. + It is a protocol (a set of rules) which governs any data exchange on the Web + HTTP is a client-server protocol, i.e each request is sent by the client and is sent to a server, which handles it and provides an answer, called the response. + Two widely used HTTP methods are GET and POST requests, in frontend code when programming forms, but their use in backend code is much wider. QCHee ne TE oc: oma 1127/01/2023 ——————— HTTP Request and Response + Web browsers communicate with web servers using HTTP. + When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server. + An HTTP request is a text string generated by the client and sent to ‘the server containing the specifications of the resource the client is asking for + Aresource is anything that can accessed via the web SCR sinincen: TE oToaTs| ———————— HTTP Request and Response + The HTTP Request includes: + URL identifies the target server and resource , (e.g. an HTML file, a particular data point on the server, or a tool to run) + Method: defines the required action (for example to get, delete, or post the resource), + Header - allow the client to pass additional information about the request, and about the client itself, to the server. 1227/01/2023 ——————— HTTP Request and Response + HTTP Request may also include the following: + additional information encoded in URL parameters (the field-value pairs sent via a query string) + POST data (data sent by the HTTP POST method) - POST requests add new resources, the data for which is encoded within the request body + Client-side cookies- Cookies contain session data about the client, including keys that the server can use to determine their login status and permissions/accesses to resources. SCR sinincen: TE oToaTs| ———————— HTTP Request and Response + Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. + The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success) + The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser. QCHee ne TE oc: oma 1327/01/2023 ——————— HTTP Request and Response + Server-side website code does not have to return HTML snippets/files in the response. + Itcan instead dynamically create and return other types of files (text, PDF, CSV, etc.) or even data (JSON, XML, etc.). SCR sinincen: TE oToaTs| ———————— HTTP Request and Response + The idea of returning data to a web browser so that it can dynamically update its own content (AJAX) has been around for quite a while. + More recently "Single-page apps" have become popular, where the whole website is written with a single HTML file that is dynamically updated when needed. + Websites created using this style of application push a lot of computational cost from the server to the web browser, and can result in websites that appear to behave a lot more like native apps (highly responsive, etc.). QCHee ne TE oc: oma 1427/01/2023 — HTTP Methods + There are several HTTP methods, but the most common are GET and POST: + GET requests are used to request data from a specified resource. They can be bookmarked and cached, and they remain in a browser's history. If used to submit a form, all the form data isible in the URL — that’s why they should NEVER be used for sensitive data. + The query string (name/value pairs) is sent in the URL of a GET request: /test/demo_form. php?name1=value1&name2=value2 SCR sinincen: TE oToaTs| ———————— HTTP Methods + POST requests are used to send data to a server, allowing resources to be created or updated. + They cannot be bookmarked or cached. + POST requests have no restrictions on data length OCRsstrer~ TE xen 1527/01/2023 — HTTP Methods + PUT is used to send data to server to create/ update a resource. + The difference between POST and PUT is that PUT requests are idempotent. + That is, calling the same PUT request multiple times will always produce the same result. * PUT method replaces the resource at the current URL with the resource contained within the request + In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times. SCR sinincen: TE oToaTs| ———————— HTTP Methods + HEAD is almost identical to GET, but without the response body. + In other words, if GET /users returns a list of users, then HEAD /users will make the same request but will not return the list of users. * HEAD requests are useful for checking what a GET request will return before actually making a GET request - like before downloading a large file or response body. QCHee ne TE oc: oma 1627/01/2023 — HTTP Methods + The DELETE method deletes the specified resource. SCR sinincen: TE oToaTs| ———————— HTTP Response Status Codes - HTTP response status codes indicate whether a specific HTTP. request has been successfully completed. Responses are grouped in five classes: + Informational responses (100-199) * Successful responses (200-299) + Redirects (300-399) * Client errors (400-499) + Server errors (500-599) QCHee ne TE oc: oma 1727/01/2023 ——————— Information responses + 100 (Continue) - This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished. + 101 (Switching Protocol) - sent in response to an Upgrade request header from the client, and indicates the protocol the server is switching to. + 102 Processing (WebDAV) - indicates that the server has received and is processing the request, but no response is available yet. + 103 Early Hints - primarily intended to be used with the Link header, letting the user agent start preloading resources while the server prepares a response SCR sinincen: TE oToaTs| ———————— Successful responses + 200 OK - The request has succeeded. The meaning of the success depends on the HTTP method: + GET: The resource has been fetched and is transmitted in the message body. + HEAD: The entity headers are in the message body. + PUT or POST: The resource describing the result of the action is transmitted in the message body. + TRACE: The message body contains the request message as received by the server, QCHee ne TE oc: oma 1827/01/2023 ——————— Successful responses * 201 Created - The request has succeeded and a new resource has been created as a result. This is typically the response sent after POST requests, or some PUT requests. + 202 Accepted - The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing. SCR sinincen: TE oToaTs| ———————— Redirection messages + 300 Multiple Choice - The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.) + 301 Moved Permanently - The URL of the requested resource has been changed permanently. The new URL is given in the response + 302 Found - This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests. QCHee ne TE oc: oma 1927/01/2023 — Client error responses + 400 Bad Request - indicates that the server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing) + 401 Unauthorized - Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response. + 402 Payment Required - This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists. SCR sinincen: TE oToaTs| ———————— Client error responses + 403 Forbidden - The client does not have access rights to the content; that is, itis unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server. + 404 Not Found - The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web. QCHee ne TE oc: oma 2027/01/2023 — Client error responses + 408 Request Timeout - This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message. SCR sinincen: TE oToaTs| eT Server error responses + 500 Internal Server Error - The server has encountered a situation it doesn't know how to handle. + 501 Not Implemented - The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD. + 502 Bad Gateway - This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response. QCHee ne TE oc: oma 2127/01/2023 — Static Sites + A static site is one that 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. SCR sinincen: TE oToaTs| Static Sites serverside Chentside be Fes Weo Sever Browser Preece — “HTTP Response css. = Savascrint other fle QCHee ne TE oc: oma 2227/01/2023 — Static Sites * The diagram on the previous slide shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). + When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL. + The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned SCR sinincen: TE oToaTs| ———————— Dynamic sites + A dynamic website is one where some of the response content is generated dynamically, only when needed. * Ona dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates + A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications). 2327/01/2023 Dynamic sites server. + Most of the code to support a dynamic website must run on the + Creating this code is known as "server-side programming’ (or sometimes "back-end scripting’). QC: TE [sao Dynamic sites "0 Wee sarer QCHee ne TE oc: oma © am 2427/01/2023 — Dynamic sites + The diagram on the previous slide shows a simple architecture for a dynamic website. + As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses. SCR sinincen: TE oToaTs| ———————— Dynamic sites + Requests for dynamic resources are forwarded (2) to server-side code (shown in the diagram as a Web Application) + For "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with HTML templates (4), and sends back a response containing the generated HTML (5,6). OCR sersemece TE rommmonsaszs| 2527/01/2023 Gow eal COLLEGE OF COMPUTING & MULTINED STUDES — ITWM102 Web Development 2 (Back-end)