Es muy interesante cambiar los estilos de un sitio web dinámicamente. En muchos sitios web, los usuarios pueden cambiar el color de fondo del sitio dinámicamente. Por eso, en este tutorial aprenderemos a cambiar el color de fondo de un sitio web de forma dinámica utilizando el color picker de Bootstrap, y lo guardaremos en una tabla de la base de datos MySQL utilizando PHP. En este tutorial, utilizaremos el plugin Color Picker de Bootstrap para que los usuarios puedan escoger un color.
Así que, vamos al meollo. Para este proyecto, utilizaremos la siguiente estructura de archivos para cambiar el color de fondo de un sitio web dinámicamente usando el color picker de Bootstrap.
- index.php
- save_change.php
- scripts.js
Incluir el plugin color picker de Bootstrap
Como he dicho antes utilizaremos el Color Picker de Bootstrap para crear el selector de color, por lo que necesitamos incluir la librería en el fichero index.php. También incluiremos el fichero scripts.js para nuestras propias funciones.
<script src="bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script> <link href="bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet"> <script src="scripts/scripts.js"></script>
Crear el HTML del selector de color
En index.php, crearemos el HTML para selector de color que cambiará el color de fondo y también, para resetearlo.
<div class="container"> <h2>Change Background Color Dynamically using Bootstrap Color Picker</h2> <div class="row"> <div class="col-md-4 col-md-offset-2 well"> <a class="btn btn-default" id="change-color">Change background color</a> <a class="btn btn-default" id="reset-color">Reset Default</a> </div> </div> </div>
Cambiar el color de fondo dinámicamente
Ahora en nuestro scrips.js, gestionaremos las funciones para cambiar el color de fondo dinámicamente basándonos en el color escogido en el color picker. Enviaremos mediante Ajax al archivo save_change.php el color escogido para almacenarlo en nuestra base de datos MySQL.
$('#change-color').colorpicker().on('changeColor', function(e) {
console.log( e.color.toString('rgba'));
var background_color = e.color.toString('rgba');
$('body')[0].style.backgroundColor = background_color;
$.ajax({
method: "POST",
url: "save_change.php",
data: { change_color:1, background: background_color}
})
.done(function(response) {
// display change color message
});
});
También gestionaremos la función para hacer reset del color de fondo cuando se haga clic en el botón Reset Default. Enviaremos mediante Ajax al archivo save_change.php el color por defecto para almacenarlo en nuestra base de datos MySQL.
$( "#reset-color" ).click(function() {
$('body')[0].style.backgroundColor = "";
$.ajax({
method: "POST",
url: "save_change.php",
data: {change_color:1, background: "#fff"}
})
.done(function(response) {
});
});
Guardar el color de fondo en la base de datos
Finalmente, en save_change.php almacenaremos el color de fondo o el color por defecto que se nos enviará mediante Javascript mediante POST.
<?php
include_once("../db_connect.php");
if(isset($_POST['change_color'])) {
// Write update MySQL query to update background color in MySQL database table
}
?>
Fuente: phpzag.com