Chapter 1: Introduction
This chapter lays the foundational knowledge for building interactive websites. You'll learn to
distinguish between different types of websites, understand the technology behind them, and set
up your development environment.
Learning Objectives
By the end of this chapter, you'll be able to:
Distinguish between static and dynamic websites, understanding their core differences
and use cases.
Understand the distinct roles of server
server-side and client-side
side scripting languages in web
applications.
Identify and explain the essential components that make a dynamic website function.
Set up and configure the key tools necessary for PHP and MySQL development.
1.1 Static vs. Dynamic Websites
The web is made of two fundamental types of websi websites:
tes: static and dynamic. Their primary
difference lies in how their content is generated and served to the user.
What is a Static Website?
A static website is like a printed brochure or a set of unchangeable documents. Each page is a
fixed file, typically written in HTML and CSS that resides on a web server. When a user requests
a page, the server simply sends that exact file back. The content of a static page is hard-coded
and remains the same for every visitor, regardless of their location, time of day, or any other
user-specific
specific information. The only way to update the content is by manually editing the HTML
file itself and re-uploading
uploading it to the server.
Characteristics
Fixed Content: The content is constant. A page about a company's "About Us" section
will
ll show the exact same text to everyone.
1
Technologies: Primarily built with HTML and CSS.. JavaScript may be used for simple
animations or UI interactions, but it doesn't change the page's core content.
No Server-Side
Side Processing: The server's only job is to deliver the pre-made
made files. There
is no logic or computation performed on the server.
Performance: They load very quickly because there is no processing delay. The browser
gets the file and renders it immediately.
Examples: Simple portfolios, brochure sit sites,
es, or landing pages that don't need regular
updates or user interaction.
Example:
Imagine a static HTML file for a personal blog post. The title, text, and images are all embedded
directly into the HTML code.
<!DOCTYPE html>
<html>
<head>
<title>My First Static Blog</title>
</head>
<body>
<h1>My Favorite Hobbies</h1>
<p>I enjoy hiking and reading books. This content never changes.</p>
</body>
</html>
This page will appear identical to every visitor who accesses it. If you wanted to add a new
hobby, you would have to manually open this file, add a new line of text, and save the changes.
What is a Dynamic Website?
A dynamic website is like a constantly
constantly-updating
updating newspaper that can be personalized for each
reader. The web pages aren't pre
pre-built; they're constructed on-the-fly
fly each time a user requests
them. This is made possible by server-side scripting languages that process information and
generate the final HTML output. Dynamic websites can interact with a database to retrieve and
display specific
ic content, respond to user input (like a form submission or a login), and serve
personalized information.
2
Characteristics
Generated Content: Content is assembled at the moment of the request. A blog's
homepage, for example, might pull the latest ten blog posts from a database and
dynamically build the HTML page.
Technologies: Uses a combination of server-side languages (like PHP, Python, or
[Link]), a database (like MySQL or PostgreSQL), and client-side technologies
(HTML, CSS, JavaScript) to display the output.
Server-Side Processing: The web server runs a script to perform tasks such as querying
a database, processing form data, or checking a user's login status before sending the
completed HTML page to the browser.
Interactivity: Enables rich, personalized experiences like user accounts, e-commerce
shopping carts, search functions, and content management systems (CMS).
Example:
A dynamic PHP file that displays a user's name from a database:
<?php
// A dynamic website can retrieve information from a database
$database_connection = new mysqli("localhost", "user", "password", "my_db");
$result = $database_connection->query("SELECT name FROM users WHERE id = 1");
$user_data = $result->fetch_assoc();
$username = $user_data['name'];
echo "<h1>Welcome back, " . htmlspecialchars($username) . "!</h1>";
?>
In this example, the PHP script connects to a database, pulls the user's name, and then generates
an HTML <h1> tag with that name. The content of the <h1> tag changes depending on the data
in the database.
Comparison Table
Feature Static Website Dynamic Website
Content Fixed, hard-coded in HTML Generated on-the-fly by a server-side script
User Interaction Minimal or none Rich, personalized, and data-driven
Technologies HTML, CSS PHP, MySQL, Python, [Link], and others
Automated through a backend interface (e.g., a
Update Process Manual file editing
CMS)
Simple portfolios, small E-commerce, social media, blogs, web
Use Case
business sites applications
Generally faster (no Depends on server load, script efficiency, and
Performance
processing delay) database speed
3
Exercise 1.1
1. Static HTML Page: Create a file named [Link] that contains a simple message
like, "Welcome to my static page. The time is now 10:00 AM."
2. Dynamic PHP Page: Create a file named dynamic_welcome.php. In this file, use PHP to
display the current date and time. Use the date() function to achieve this. Your page
should look something like, "Welcome to my dynamic page. The time is now [current
time]."
Challenge: How would you modify the dynamic page to greet a user by name, as shown in the
original example? (Hint: research $_GET and URL query strings.)
1.2 Server-Side vs. Client-Side Scripting Languages
Web development is a conversation between the user's browser (the client) and the web server.
This conversation is facilitated by two distinct types of scripting languages, each with a different
role.
Client-Side Scripting
Client-side scripting runs directly inside the user's web browser. The server sends the HTML,
CSS, and JavaScript files to the browser, and the browser executes the code locally on the user's
machine. This is what makes a website feel responsive and interactive without needing to
constantly communicate with the server. Think of it as the website's "front-end" brain.
Common Languages & Roles
JavaScript: The primary language for client-side scripting. It's used for manipulating
the Document Object Model (DOM), creating animations, validating form input before
submission, and handling user events (like button clicks).
HTML/CSS: Though not scripting languages, they are integral to the client side. HTML
provides the page structure and content, while CSS handles the styling and layout.
Limitations & Security
No Server Access: Client-side scripts cannot directly access files on the web server or
interact with databases. This is a critical security measure.
Visible Code: The source code is downloaded by the browser, meaning anyone can view
it. This makes it unsuitable for sensitive operations like handling passwords or processing
secure transactions.
Example:
4
This JavaScript code validates a form field to ensure it's not empty before the form is submitted
to the server.
<form onsubmit="return validateForm()">
<input type="text" id="username">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let username = [Link]("username").value;
if (username === "") {
alert("Please enter a username!");
return false; // Prevent form submission
}
return true; // Allow form submission
}
</script>
Server-Side Scripting
Server-side scripting runs on the web server, not the user's browser. It acts as the "back-end"
brain of the website. When a user requests a dynamic page, the server executes the script, which
might involve tasks like:
1. Processing data submitted from a form.
2. Connecting to a database to retrieve or store information.
3. Generating a complete HTML page based on the results.
The final HTML output is then sent to the browser, which simply renders it. The user never sees
the original server-side code.
Common Languages & Advantages
PHP: Our focus for this course, it's one of the most popular server-side languages for
web development.
Python (with frameworks like Django/Flask): Excellent for complex applications and
data processing.
[Link]: A JavaScript runtime that allows you to use JavaScript on the server.
Java (JSP), Ruby, etc.
Advantages
Database Interaction: Only server-side scripts can securely connect to and manipulate a
database.
5
Security: The code is hidden from the user, making it the ideal place for sensitive logic,
such as user authentication, payment processing, and API key management.
Scalability: Enables websites to handle large amounts of data and personalized content
for millions of users.
Example:
This PHP script checks if a user is logged in before displaying a dashboard.
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header("Location: [Link]"); // Redirect to login page if not logged in
exit();
}
// If user is logged in, continue to display the dashboard
echo "<h1>Welcome to your personal dashboard!</h1>";
?>
Key Differences
Feature Client-Side Scripting Server-Side Scripting
Execution
User's web browser Web server
Location
Visible to the user (via "View
Code Visibility Hidden from the user
Source")
Limited to client-side data (e.g.,
Access to Data Full access to server files and databases
cookies)
User Interface (UI) and Data processing, security, database
Primary Role
interactivity management
Common
JavaScript PHP, Python, Ruby, [Link]
Languages
1.3 Components of a Dynamic Website
A dynamic website isn't a single entity; it's a stack of interconnected components that work
together to deliver content. This is often referred to as a LAMP (Linux, Apache, MySQL, PHP)
or WAMP/MAMP/XAMPP stack. Understanding these components is crucial to understanding
the entire development process.
6
1.3.1 Web Server
A web server is a piece of software (like Apache or Nginx) that sits on a physical computer and
acts as a listener. When a user types a website address into their browser, the browser sends an
HTTP request to the web server's address. The web server's job is to receive this request and
send back the appropriate response, whether it's a static file (like an image) or the output from a
server-side script.
Role: The web server is the orchestrator. It executes PHP scripts, manages connections,
and serves all the different files (HTML, CSS, images, etc.) that make up a website.
Common Servers: Apache is the most widely-used open-source web server, known for
its flexibility and robust feature set. Nginx is another popular choice, praised for its high
performance and efficiency in handling many concurrent connections.
1.3.2 Scripting Language
The scripting language (in our case, PHP) is the engine that drives the dynamic content. It's the
part of the system that contains all the business logic.
Role: PHP processes user input from forms, generates dynamic content by
communicating with the database, and handles essential features like user sessions and
cookies.
Example: A simple PHP script might take a user's name from a form, check it against a
database, and then display a personalized "Hello, [Name]!" message.
1.3.3 Database
The database is where all the structured data for a dynamic website is stored. Instead of hard-
coding every piece of content, you can store it in a database and use your server-side script to
retrieve it when needed. We'll be using MySQL, a powerful and widely-used relational
database management system (RDBMS).
Role: Stores everything from user accounts and blog posts to product inventories and
order details. It provides a structured way to organize information.
How it works: Data is organized into tables with rows and columns, similar to a
spreadsheet. You use a special language called SQL (Structured Query Language) to
perform CRUD operations: Create, Read, Update, and Delete data.
Example SQL Query:
To fetch all the articles written by a specific author from an articles table, you would use a query
like this:
SELECT title, content FROM articles WHERE author_id = 123;
7
This simple query tells the database to find all articles where the author_id is 123 and return their
titles and content.
1.4 Tools Used in Development
To make all these components work together seamlessly, you'll use a suite of tools that bundle
everything you need into a single, easy-to-use package.
XAMPP / WAMP / MAMP
XAMPP (eXampp) is a free and open-source bundle that includes the core components
of a dynamic website: Apache, MariaDB (a MySQL fork), PHP, and Perl. It's designed
to be cross-platform, meaning it works on Windows, macOS, and Linux.
WAMP is a similar bundle for Windows, and MAMP is for MacOS. Using these tools
lets you run a web server, a database, and PHP locally on your machine, so you can
develop and test your websites without needing a live server.
phpMyAdmin
phpMyAdmin is a free, web-based tool that provides a graphical user interface (GUI) for
managing your MySQL database. Instead of writing SQL queries in a command line, you can
use phpMyAdmin to:
Create and manage databases and tables.
Insert, edit, and delete data.
Run SQL queries and see the results instantly.
Code Editors
A good code editor is essential for writing clean, efficient code. Modern editors like Visual
Studio Code, Sublime Text, and Atom provide features that make development easier:
Syntax highlighting: Color-codes your code to make it easier to read and spot errors.
Code autocompletion: Suggests code snippets as you type, saving time and reducing
typos.
Integrated terminal: Allows you to run commands without leaving the editor.
Extensions: A vast library of plugins that add functionality for PHP, SQL, and other
languages.
Browser with Developer Tools
Your browser is your primary testing tool. All modern browsers (Chrome, Firefox, Edge) include
a powerful suite of Developer Tools that you'll use constantly. These tools allow you to:
Inspect HTML and CSS: See how your page is structured and debug layout issues.
Debug JavaScript: Set breakpoints to step through your client-side code and find bugs.
8
Monitor network requests: See what files are being loaded, how long they take, and
whether the server is responding correctly.
Exercise 1.2
1. Install XAMPP: Download and install XAMPP from the official website. Start the
Apache and MySQL modules from the XAMPP Control Panel.
2. Install Visual Studio Code: Download and install Visual Studio Code from the official
website. Start Visual Studio Code.
3. Create a test file: Navigate to the htdocs folder inside your XAMPP installation
directory. This is the root folder for your local web server. Create a new file named
[Link] and add the following code:
<?php
phpinfo();
?>
4. Access the file: Open your browser and navigate to [Link] You should
see a detailed page with information about your PHP installation. This confirms that your
web server is running and can successfully process PHP files.
Review Questions
1. What is the fundamental difference between a static website and a dynamic website in
terms of how content is delivered?
2. Explain the roles of client-side and server-side scripting languages and provide a specific
example for each.
3. Describe the three main components of a dynamic website stack and their individual
functions.
4. Why is a database essential for a dynamic website but not for a static one?
5. What is the purpose of a software bundle like XAMPP, and what core tools does it
provide?