LESSON 1: INTRODUCTION TO WEB SYSTEM - controlling the workflow of individual staff

members and project groups.

WEB SYSTEMS AND TECHNOLOGIES - refer to the
combination of software, hardware, protocols, and EXAMPLE OF A WEB APPLICATION
standards.
1. Front-end - This is what users see and interact with.
- the foundation of the modern digital landscape. It's built using HTML, CSS, and JavaScript.
2. Back-end - This is the behind-the-scenes part of the
WEB-BASED APPLICATIONS - are a particular type of
application. It's responsible for handling data storage,
software that allows users to interact with a remote
processing, and communication.
server through a web browser interface.
3. Database - Web applications often rely on
OVERVIEW OF WEB SYSTEMS AND TECHNOLOGIES databases to store and retrieve data efficiently.

1. Client-Server Architecture - follow the client-server 4. Web Server - serves HTML files, images, videos,

model, where clients request and display web content. and other resources to users' browsers when they request

2. Web Browsers - software applications that allow users them.

to access and view web content. 5. APIs (Application Programming Interfaces) - APIs

3. Web Servers - computers or software that store and allow different software components to communicate

serve web content to clients. with each other.

4. HTTP and HTTPS: HyperText Transfer Protocol - THE ADVANTAGES OF USING WEB-BASED APPLICATIONS
foundation of data communication on the web. FOR BUSINESS
5. HTML, CSS, and JavaScript - are fundamental
- cross-platform and universally accessible.
technologies for building web content.
- allow you to invest less money in software
CURRENT TRENDS AND TECHNOLOGIES IN WEB development.

1. Responsive Design - ensures web content looks and - highly scalable.

functions well across different screen sizes and - great at storing your data.

orientations. - secure.

2. Progressive Web Apps (PWAs) - combine the best of - deployment is easy, cost-effective, and fast.

web & mobile apps and offer fast loading, offline access. - easy to update and maintain.

3. Single Page Applications (SPAs) - load a single HTML

page and dynamically update content.
4. WebAssembly - WebAssembly enables running high- WEB SYSTEM PARTS

performance code on web browsers.

5. Serverless Architecture - approach abstracts server LOGIN PAGE - is a crucial component of many online

management, allowing developers to focus solely on applications that require user authentication and access

writing code. control.

6. WebRTC (Web Real-Time Communication) - enables User Interface (UI) - displays the login form, which

real-time audio and video communication. prompts users to enter their credentials to gain access to

7. Security Improvements - evolving to enhance security, the system.

including HTTPS adoption, content security policies. Credentials - provide their credentials include a
combination of a username or email address and a
WHAT CAN A WEB-BASED APPLICATION DO?
password.
- tracking performance records of individual workers. Data Submission - users submit the information by
- managing passenger or cargo transportation. clicking a "Login" button.
- monitoring financial processes. Server-side Validation - server receives the user's
- working with payroll. credentials and performs validation checks.
Authentication - if the provided credentials match the USER REGISTRATION - is a series of steps that allow
records in the database, the system considers the user individuals to create accounts and become users.
authenticated.
Session Management - session token is usually stored in a Registration Form Display - this form collects essential
cookie or as part of the web application's state. information from users to create their accounts.
Access Control - the user gains access to specific resources Required Information - The registration form typically
and functionalities based on their assigned permissions and requires users to provide certain mandatory information,
roles. such as:
Security Considerations - implementing secure practices is ✓ Username or email address: This will serve as the
vital to prevent unauthorized access and data breaches. user's unique identifier for logging in.
Failed Login Handling - system might display an error ✓ Password: A secure password that meets specified
message informing the user that the login was criteria to protect the account.
unsuccessful. ✓ Personal details: Depending on the website's
Logout - users can choose to log out of the system, which requirements, this may include name, date of birth,
invalidates their session token and revokes their access to gender, etc.
restricted areas. Optional Information - fields for optional details, such as
profile pictures, contact information, interests, and
preferences.
HOMEPAGE/LANDING PAGE - is the initial webpage that Email Verification - users submit the registration form, they
users encounter when they visit a website. often receive an email containing a verification link.
Header and Navigation - contains the website's logo, Account Activation - verifying the user's identity through a
branding elements, and a navigation menu. phone number or an additional security step.
Hero Section - often includes a captivating image, video, or Password Security - strong passwords, and the system
visual element. should enforce password complexity requirements.
Value Proposition - features a concise and compelling Privacy and Terms Acceptance - required to accept the
statement that outlines the main benefits. website's terms of use and privacy policy.
Features or Services Showcase - section highlighting the Validation and Error Handling - validation checks to ensure
key features, products, or services the website provides. that the entered information is in the correct.
Testimonials and Social Proof - testimonials, reviews, or Confirmation Message - users are typically shown a
user success stories add credibility to the website's claims. confirmation message or redirected to a welcome page.
Call-to-Action (CTA) Buttons - encourage visitors to take Login Option - given the option to log in immediately using
specific actions. the credentials they just created.
About Us or Company Information - its mission, values, and Account Management - where they can update their
team member. profile information, change passwords, and manage
Featured Content or Blog Posts - recent blog posts, articles, communication preferences.
or other relevant content. Security Measures - the system should implement security
Visual Elements and Imagery - high-quality images, icons, measures such as CAPTCHA to prevent automated spam
and graphics help create an appealing and visually engaging registrations.
homepage.
Contact Information - displaying contact details, such as an
email address, phone number, or a contact form. AUDIT TRAIL / LOG HISTORY - is a record of all activities,
Social Media Links - links to the website's social media events, and transactions.
profiles. Event Logging - an audit trail captures a wide range of
Footer - typically contains additional navigation links, events, including user logins, data modifications, file
copyright information, privacy policy links. uploads.
User Activity Tracking - audit trail keeps track of user Key Performance Indicators (KPIs) - KPI widgets that
interactions, allowing administrators to see who performed highlight the most critical metrics for the user's goals or
what actions and when. responsibilities.

Timestamps - is associated with a timestamp that indicates Drill-down Capability - some widgets may allow users to drill
the exact date and time when the event occurred. down into more detailed data.

Event Details - includes detailed information about the

event, such action performed, user or system component.

User Identification - identities of users who initiated actions.

IP Address and Location - include the IP address and location

from which each action originated.

Data Before and After - this is particularly useful for tracking

changes and rollbacks. LESSON 2: PHP CONNECTION TO DATABASE

Retention and Archival - retained for a specified period, PHP Data Objects (PDO)

which can vary depending on regulatory requirements. - is a PHP extension that provides a consistent interface for
Access Control - restricted to authorized personnel to accessing databases.
prevent tampering or unauthorized modifications.
- PDO is an acronym for PHP Data Objects.
Search and Reporting - allow administrators to filter and
- It's an extension in PHP that provides a consistent and high-
query logs based on different criteria.
level interface for connecting to databases.
Alerts and Notifications - configured to trigger alerts or
- PDO allows you to use a unified set of functions for
notifications for specific types of events, such as failed login
interacting with various databases.
attempts or critical system changes.
MySQL Database
Integration with Security Tools - provide a centralized view
of events across the entire IT infrastructure. - is an open-source relational database management system.

- It's widely used for storing and managing structured data.

MySQL uses tables to organize data, and each table contains
rows (records) and columns (fields).
DASHBOARD - is a user interface component within a web
- PHP can communicate with MySQL databases to perform
application that provides users with an overview.
operations like inserting, updating, retrieving, and deleting
Widgets or Modules - representing a specific piece of data.
information or metric. Each widget is designed to display a
• Host: The hostname or IP address where your MySQL
particular data set or insight.
server is running.
Customization - users often can customize their dashboard
• Database Name: The name of the database you want
layout and content.
to connect to.
Data Integration - pull data from various sources, such as
• Username: A valid MySQL username with
databases, APIs, external services, or real-time data streams.
appropriate privileges.
Real-time Updates - ensure users have access to the latest
• Password: The password for the MySQL username.
information as it becomes available.
PHP PDO CONNECTION SYNTAX
Visual Representations - graphs, and heatmaps help users
quickly grasp trends, patterns, and relationships in the data.
PHP Data Objects (PDO) Syntax LESSON 3: PHP CRUD & SQL SYNTAX - CREATE SYNTAX

HTML FORM - The form will have input fields corresponding

to the columns of the database table where we want to insert
data.

SETTING UP THE MYSQL DATABASE

PHP SCRIPT (CREATE.PHP) - will handle the data submitted

from the form and insert it into the database using PDO.

CREATING A PHP PDO CONNECTION

SETTING UP THE MYSQL DATABASE

QUERYING THE DATABASE

SQL SYNTAX FOR INSERTION

LESSON 4: PHP CRUD & SQL SYNTAX - READ SYNTAX LESSON 5: PHP CRUD & SQL SYNTAX - UPDATE SYNTAX

PHP SCRIPT (READ.PHP) - that retrieves data from the HTML Form
database and displays it.
The provided code is a PHP script that connects to a
database, retrieves data from a table named "users," and
displays the data in an HTML table on a web page.

PHP SCRIPT (UPDATE.PHP) - that processes the

form data and updates the corresponding data in
the database.
Retrieving Data from the Form:
Here, a PDO instance is created to establish a connection to
the database. It sets the error handling mode to exceptions.
If there's an error during the connection attempt, the catch
block will catch the exception and display an error message. SQL Query for Updating Data:

Preparing and Executing the Statement:

This section prepares an SQL query to select all columns from

the "users" table. The query is executed using the query()
method on the PDO instance. The fetched data is stored in
the $results array using the fetchAll() method with the
SQL Syntax for Update
PDO::FETCH_ASSOC fetch style, which retrieves rows as
associative arrays.

This section is the HTML part of the script. It creates an

HTML table with headers for "Username" and "Email." The
PHP foreach loop is used to iterate through the fetched
results and populate the table rows with data from each
row of the "users" table.

SQL Syntax for Selection

LESSON 6: PHP CRUD & SQL SYNTAX - DELETE SYNTAX LESSON 7: PHP CRUD & SQL SYNTAX - SEARCH SYNTAX

HTML Form
HTML Form

PHP SCRIPT (SEARCH.PHP) - that processes the search term

PHP SCRIPT (DELETE.PHP) - that processes the form data and
and retrieves matching data from the database.
deletes the corresponding data from the database.
Retrieving Search Term from the URL:
SQL Query for Deleting Data:

SQL Query for Searching Data:

Preparing and Executing the Statement:

Preparing and Executing the Statement:

HTML Output:
SQL Syntax for Delete