How To create a dynamic stylesheet Using PHP MySQL
To create dynamic CSS using PHP and MySQL, you can follow these steps:
1. Database Setup
First, create a MySQL table to store the styles. For example, you could have a table named styles:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Create database css CREATE TABLE styles ( id INT AUTO_INCREMENT PRIMARY KEY, element VARCHAR(50), property VARCHAR(50), value VARCHAR(100) ); INSERT INTO styles (element, property, value) VALUES ('body', 'background-color', '#f0f0f0'), ('h1', 'color', '#333'), ('p', 'font-size', '16px'); |
Database Connection – config.php
Ensure your config.php file has the correct database connection details:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // Database connection $servername = "localhost"; $username = "root"; $password = ""; $dbname = "css"; $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } ?> |
Fetch Styles with PHP
Use PHP to fetch the styles from the database and dynamically generate a CSS file:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php // Include database connection include 'config.php'; // Fetch styles from the database $sql = "SELECT element, property, value FROM styles"; $result = $conn->query($sql); if ($result->num_rows > 0) { header("Content-type: text/css"); // Output dynamic CSS while($row = $result->fetch_assoc()) { echo $row['element'] . " { " . $row['property'] . ": " . $row['value'] . "; }\n"; } } else { echo "/* No styles found */"; } $conn->close(); ?> |
Linking the Dynamic CSS
You can then link this PHP file as a stylesheet in your HTML:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic CSS Example</title> <link rel="stylesheet" href="fetch.php"> </head> <body> <h1>Hello, World!</h1> <p>This is a dynamically styled paragraph.</p> </body> </html> |
Admin Page – HTML Form
Update the admin.php file to include a color picker for any fields that are intended for color values:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<?php // Include database connection include 'config.php'; // Fetch existing styles $sql = "SELECT * FROM styles"; $result = $conn->query($sql); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Admin - Edit Styles</title> <!-- Include Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { margin-top: 50px; width: 400px; } .card { padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .form-group label { font-weight: bold; } button { padding: 10px 20px; border-radius: 5px; font-weight: bold; } .page-title { }margin-bottom: 30px; color: #343a40; text-align: center; font-size: 1.5em; </style> </head> <body> <div class="container"> <div class="card"> <div class="page-title"> <h1>Edit Styles</h1> </div> <form action="update_styles.php" method="post"> <?php if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo '<div class="form-group">'; echo '<label for="value_' . $row['id'] . '">' . ucfirst($row['element']) . ' - ' . $row['property'] . '</label>'; // Check if the property is related to color and use a color picker $inputType = strpos($row['property'], 'color') !== false ? 'color' : 'text'; echo '<input type="' . $inputType . '" class="form-control" id="value_' . $row['id'] . '" name="values[' . $row['id'] . ']" value="' . $row['value'] . '">'; echo '</div>'; } } else { echo '<p>No styles found.</p>'; } ?> <button type="submit" class="btn btn-primary">Update Styles</button> </form> </div> </div> <!-- Include Bootstrap JS and dependencies --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> |
Update Styles – PHP Script
Create a update_styles.php file to handle form submission and update the styles in the database:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php // Include database connection include 'config.php'; // Check if form is submitted if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['values'])) { foreach ($_POST['values'] as $id => $value) { $id = intval($id); $value = $conn->real_escape_string($value); // Update the value in the database $sql = "UPDATE styles SET value='$value' WHERE id=$id"; $conn->query($sql); } } // Redirect back to the admin page header("Location: admin.php"); exit; ?> |
Admin Page Workflow
- Load the Admin Page:
admin.phpwill load all existing CSS properties from thestylestable and display them in a form where each property can be edited. - Submit the Form: When you submit the form,
update_styles.phpwill process the data and update the corresponding entries in thestylestable. - Dynamic Application: The styles will be dynamically applied whenever the linked CSS is fetched in your main application.
