Server-Side Development

Server-Side Development

• Server-side development involves processes and technologies for building the backend of web applications.
• It includes the server, database, and application logic to handle client requests and deliver appropriate responses.

Topics to Discuss

• Introduction to server-side scripting and dynamic web applications.
• Setting up a local server using XAMPP/WAMP.
• Writing server-side scripts in PHP, Python (Flask/Django), or Node.js.
• Handling form data, sessions, and cookies in dynamic web applications.
• Basics of MVC architecture for structured development.

Introduction to Server-Side Scripting

• Server-side scripting is the process of running scripts on a web server instead of the user's browser.
• It enables dynamic content development, database interactions, and secure data management.

Common Server-Side Languages

• Common server-side languages include PHP, Node.js, Python, Ruby on Rails, and ASP.NET.

How Server-Side Scripting Works

• A user requests a webpage
• Then the web server processes the request
• Then the server-side script executes
• Then the web server sends the output
• Finally, the browser displays the webpage

Why Use Server-Side Scripting

• Server-side scripting provides security, including database access, custom content, session handling, and business logic.

Setting Up XAMPP

• XAMPP is a free and open-source software providing cross-platform support, Apache (Web Server), MySQL (Database), PHP (Server-Side Scripting), and phpMyAdmin (Database Management Tool).

What XAMPP can do

• Runs a local server.
• Executes PHP scripts.
• Manages databases and also creates APIs.
• Simulates a real web server.

Instructions to Install XAMPP

• Visit https://www.apachefriends.org/ and download the XAMPP installer.
• Download XAMPP for Windows, Linux, and macOS.
• Execute the install file, which varies based on the OS.
• Continue clicking Next until XAMPP starts to install, then select your language and click Save.
• Double-click on the newly created XAMPP icon.
• Click on the Start button on the control panel to start Apache and MySQL.

Setting Up WAMP

• WAMP is local web server software for developing and testing web pages on Windows computers without needing an Internet connection.
• WAMP consists of Windows, Apache, MySQL, PHP and phpMyAdmin.

Instructions to Install WAMP

• Go to https://www.wampserver.com/en/ and install the version appropriate for your system.
• Select a language and read the license agreement, accept it, and press next.
• Select an installation location; the default is generally preferred.
• Choose to add a desktop and quick launch icon, then confirm your settings.
• The installation process may take a while but once done, you may launch the application or launch it through the quick launch menu.
• After installation, the firewall prompts you to grant permission for the newly installed program to access your network, which can be found in hidden taskbar icons or the Windows start menu.
• The hue of the symbol relates to the server's current status: Green Icon (WAMP is running correctly), Yellow Icon (Some services are not working), Red Icon WAMP is not working.
• Navigate to http://localhost to ensure successful installation, and if the URL works, check the port for further assistance.

WAMP vs XAMPP.

• XAMPP works on Windows, Mac OS and Linux, while WAMP works on Windows only, more flexible but complex.
• XAMPP is better for developers and WAMP is better for Windows users who need a simple set up.
• Performance for XAMPP is slightly heavier and WAMP is Lightweight.

Writing in Server-Side Scripts

• Server-side scripting is a crucial aspect of web development as it enables dynamic interactions.
• Allows to process user interaction or request, interact with databases, and to generate content.
• Server-side scripts in PHP, Python (Flask/Django), and Node.js can be written.

PHP (Classic Server-Side Language)

• PHP is a widely used server-side scripting language embedded in HTML.
• It handles tasks such as form processing, database interaction, and generating dynamic content.

PHP Steps

• Step One: Download and install XAMPP.
• Step Two: Go to XAMPP folder, to the following directory htdocs then create a directory called myphp inside htdocs, create two PHP files index.php and process.php

PYTHON (FLASK)

• Python is favored for its readability, large community, and versatility.
• Python is widely used for server-side scripting, with frameworks like Flask (lightweight) and Django (full-featured) for web development.

Python (Flask) Instructions

• Install Python at http://python.org/downloads/
• Install flask by opening a command prompt:
• pip install flask
• Create a folder named project then create a new project and name if test.py
• Open the folder on the Visual Code or any other platform.
• Step Four: Open the terminal, then type python test.py.
• Step Five: Open your browser and copy the url to your browser.

NODE.JS

• Node.js is a server-side runtime environment executing JavaScript.
• It makes lightweight and efficient for real-time applications by building APIs, real-time applications like chat apps, and handling asynchronous operations.

Node.js Instructions

• Install node.js at nodejs.org/en
• Install express by opening a command prompt.
• Create a folder for the source code, adding e.g., server.js.
• Open the folder on the Visual Code or any other platform
• Add the code for server.js
• Open the terminal, then type node server.js
• Now open the browser and input http://localhost:3000/

Dynamic Web Applications (DWA)

• A dynamic web application (DWA) requires javascript to deliver content to the browser, uses technologies such as PHP, Java, or Python, and uses a back-end API.
• A DWA, A DWA is a type of application that can change its content, appearance, and functionality in response to user input, system events, and information.
• A DWA can be built either as a single-page application or as a more traditional website with multiple pages and multiple levels of site navigation.
• Examples are YouTube and X (Twitter).

Dynamically Handling Data.

• Javascript is required to deliver content to the browser
• Java, PHP, and Python technologies used when building backend API
• Single or mulit-page applicaitons.
• Applications can alter content and functionality per each user

More About Form Data

• Web form allows visitors to enter data, including personal information, collected by a server for processing.
• Data entered in web forms are classified as form data, and when placed in a web application, handling involves sequences.

Sessions

• A session is a temporary storage container that holds data while a user is actively interacting with a website, and it is how online stores remember items in your cart.
• Sessions maintain user data across different pages, personalize content based on user preferences, and keep users authenticated while they browse.

Session Storage Mechanisms

• Session data stored on a server includes memory, a database and a distributed cache, while the session ID is sent to the client as a cookie.
• Cookies are small pieces of data stored on the client's browser, and a session cookie contains the session ID.

Server Side Storage of Sesssions

• Pros: Better control over session data, potential for larger data storage, mitigates some cookie-related vulnerabilities.
• Cons: Increased server-side resource usage and requires careful management for scalability.

Cookies on the Client

• Pros: Simple to implement; client-side storage reduces some server load.
• Cons: Storage size limits on cookies, potential security vulnerabilities.

How Cookies Work

• Send a \login request
• Store the session id to the session.
• Save cookie to the user
• The client checks the existing session
• Sends response

MVC Architecture

• MVC is an architectural pattern dividing an application into three main logical components: Model, View, and Controller.
• These components are for developing user interfaces.

Popular MVC Frameworks

• CakePHP
• Spring
• Django
• RUBY on RAILS
• LARAVEL

Key components divided into logical groups

• Model component = manages the data, application logic, and rules. Responsible for data retrieval storage, and modification.
• View component = is used for the Ul logic of the application. Presents information in a readable format and generates a user interface for the user.
• Controller component = handles the user input and interactions and works as intermediary between the Model and the View.

The Interaction Between MVC

• Firstly a user interacts with the View
• Secondly, the Controller receives the user's input
• Then, the Controller communicates with the Model, which fetches or updates data.
• the Model updates its state and notifies the View of any changes.
• The View then displays the updated data to the user.

Advantages of MVC Architecture

• MVC provides a clear separation of business logic, UI logic and input logic, therefore there is less complexity.
• This logical component enables readability and modularity making testing more efficient.
• Components of MVC can be developed simultaneously, allowing multiple developers to work on different components without interference.
• The MVC model component can be tested separately, helps to test components making all classes and objects independent of each other.
• MVC facilitates creation to develop new applications and and new features can be added to some parts of the application.

Disadvantages of MVC Architecture

• MVC is not suitable for building small applications and can be cumbersome.
• MVC introduces new layers, leading to developers needing to adapt to the MVC structure.
• MVC applications can suffer from performance issues which can lead to performance issues due to poorly structured code.

MVC in Web Applications

• Modern frontend frameworks help developers build efficient, visually appealing web apps by structuring code, reusing components, and integrating built-in functionalities.
• Angular JS, developed by Google follows a MVC principles, making it easier to build and maintain complex web applications with HTML, CSS, and JavaScript.