Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I create dynamic websites using PHP/javascript/HTML/CSS?
Dynamic websites allow users to send requests from the client side to the server, where data is processed and rendered back to the user. PHP serves as the server-side scripting language, while HTML, CSS, and JavaScript handle the frontend presentation and user interactions.
Prerequisites: Download and install XAMPP server from the official website. Start the Apache server to run the website locally. Create a folder named "dynamicWeb" inside the "htdocs" directory of your XAMPP installation.
Basic Structure
A dynamic website typically consists of two main files
index.php Contains the HTML form and frontend styling
data.php Handles the server-side processing and data rendering
Example: Creating a Technology Learning Portal
Let's create a dynamic website where users can request information about different technologies. The frontend will collect user input, and the backend will process and return relevant content.
Frontend File (index.php)
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Web</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
width: 400px;
}
.header {
text-align: center;
color: #333;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
input[type="text"] {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.tech-list {
background: #f8f9fa;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.tech-list label {
color: #e74c3c;
font-weight: bold;
}
button {
width: 100%;
padding: 12px;
background: #27ae60;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #219a52;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Technology Learning Portal</div>
<form action="data.php" method="post">
<div class="form-group">
<input type="text" placeholder="Enter your name" name="name" required>
</div>
<div class="form-group">
<input type="text" name="tech" placeholder="Choose your technology">
</div>
<div class="tech-list">
<label>Available Technologies:</label>
<ul>
<li>Frontend</li>
<li>Backend</li>
<li>Database</li>
</ul>
</div>
<button type="submit">Get Learning Content</button>
</form>
</div>
</body>
</html>
Backend File (data.php)
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$tech = strtolower(trim($_POST['tech']));
class TechContent {
public function frontend($username) {
echo "<h2>Hello " . $username . ", here's your Frontend content:</h2>";
echo "<ul>";
echo "<li>HTML - Structure and markup</li>";
echo "<li>CSS - Styling and layout</li>";
echo "<li>JavaScript - Interactivity</li>";
echo "<li>React - Component-based UI</li>";
echo "<li>Bootstrap - Responsive design</li>";
echo "</ul>";
}
public function backend($username) {
echo "<h2>Hello " . $username . ", here's your Backend content:</h2>";
echo "<ul>";
echo "<li>PHP - Server-side scripting</li>";
echo "<li>Node.js - JavaScript runtime</li>";
echo "<li>Express.js - Web framework</li>";
echo "<li>API Development - RESTful services</li>";
echo "<li>Authentication - User security</li>";
echo "</ul>";
}
public function database($username) {
echo "<h2>Hello " . $username . ", here's your Database content:</h2>";
echo "<ul>";
echo "<li>MySQL - Relational database</li>";
echo "<li>MongoDB - NoSQL database</li>";
echo "<li>PostgreSQL - Advanced SQL</li>";
echo "<li>Redis - In-memory storage</li>";
echo "<li>Database Design - Schema planning</li>";
echo "</ul>";
}
}
if (in_array($tech, ['frontend', 'backend', 'database'])) {
$content = new TechContent();
$content->$tech($name);
} else {
echo "<h2>Hello " . $name . "!</h2>";
echo "<p>The technology '" . htmlspecialchars($_POST['tech']) . "' content will be available soon.</p>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #f4f4f4;
}
.content {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.back-btn {
background: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="content">
<button class="back-btn" onclick="history.back()">? Back to Home</button>
</div>
</body>
</html>
How It Works
User fills the form with their name and technology choice
Form data is sent via POST method to data.php
PHP processes the request and creates appropriate content
Dynamic content is rendered based on user's selection
User can navigate back to the main form
Testing the Website
Open your browser and navigate to http://localhost/dynamicWeb/ to access the website. Enter your name and a technology (frontend, backend, or database) to see the dynamic content generation in action.
Conclusion
This example demonstrates the fundamentals of dynamic web development using PHP for server-side processing and HTML/CSS for frontend presentation. The combination allows for interactive user experiences where content is generated based on user input and server-side logic.
2K+ Views
