He decidido crear un Carousel de imágenes con la capacidad de poder administrar el mismo en donde se podrá: listar, crear, editar y eliminar las imágenes del carousel, por lo que en este tutorial voy a mostrar cómo crear un Carousel de imágenes y para ello utilizare el Carousel de Bootstrap para obtener imágenes, el título y la descripción de la base de datos y mostrarlos a manera de diapositivas de imágenes. He creado un slider muy simple y fácil de entender usando PHP y MySQL para la consulta de datos. Además el proyecto cuenta con un pequeño panel de administración para que podamos administrar las imágenes que deberán mostrarse en el carousel.
Carousel Bootstrap dinámico con PHP y MySQL
Diseño de la base de datos
Para este ejemplo hemos creado una base de datos llamada carousel la cual tiene la estructura siguiente, para hacer funcional este script, se deberá crear manualmente la base de datos MySQL, luego ejecutar la consulta siguiente en la base de datos que hemos creado.
|
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 |
-- -- Base de datos: `carousel` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `slider` -- CREATE TABLE IF NOT EXISTS `slider` ( `id` int(11) NOT NULL, `titulo` varchar(50) NOT NULL, `descripcion` varchar(100) NOT NULL, `url_image` varchar(255) NOT NULL, `texto_boton` varchar(50) NOT NULL, `url_boton` text NOT NULL, `estilo_boton` varchar(30) NOT NULL, `estado` int(1) NOT NULL, `orden` int(2) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=84 DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `slider` -- INSERT INTO `slider` (`id`, `titulo`, `descripcion`, `url_image`, `texto_boton`, `url_boton`, `estilo_boton`, `estado`, `orden`) VALUES (1, 'Captura el momento', 'Enamórate de la versatilidad y el diseño retro de tu NX3300', 'promo2.png', 'Ver Ahora', 'producto/15/smart-camera-nx3300', 'info', 1, 4), (2, 'El rey de los selfies', 'Diseño metálico premium en atractivos colores', 'promo3.png', 'Comprar Ahora!', '', 'warning', 1, 0), (3, 'La mejor experiencia!', 'Su pantalla WXGA (1.280 x 800) de 10.1 pulgadas y formato 16:10 te permite disfrutar de una imagen. ', 'promo1.png', 'Comprar Ahora!', 'producto/6/galaxy-tab-4-101-4g', 'primary', 1, 1), (4, 'Galaxy A3 (2016)', 'El nuevo smartphone Galaxy A3 2016 tiene un diseño que combina elegancia.\r\n ', 's3.png', 'Comprar Ahora!', 'producto/10/televisor-60-j6200-led-full-hd-smart-tv', 'info', 1, 3); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `slider` -- ALTER TABLE `slider` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `slider` -- ALTER TABLE `slider` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=84; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
Conexión a la base de datos
Para conectarnos a la base de datos creada en el paso anterior debemos editar el archivo config/conexion.php, y luego colocar los datos de conexión según corresponda a nuestro servidor de base de datos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $DB_HOST="localhost";//Servidor donde se encuentra alojada nuestra base de datos $DB_NAME= "carousel";// Nombre de la base de datos $DB_USER= "root";//Usuario de la base de datos $DB_PASS= "";//Contraseña del usuario de la base de datos # conectare la base de datos $con=@mysqli_connect($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME); if(!$con){ die("imposible conectarse: ".mysqli_error($con)); } if (@mysqli_connect_errno()) { die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error()); } ?> |
Archivo index.php
El archivo index.php contiene el código necesario para poder mostrar nuestras slide dentro del carousel, las cuales son cargadas desde nuestra base de datos MySQL
|
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 |
<?php $title="Carousel Bootstrap 3 con PHP y MySQL"; /* Llamar la Cadena de Conexion*/ include ("config/conexion.php"); $active="active"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title><?php echo $title;?></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <hr> <div class="row-fluid"> <div class="container"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-9"> <div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> <?php $sql_slider=mysqli_query($con,"select * from slider where estado=1 order by orden"); $nums_slides=mysqli_num_rows($sql_slider); ?> <ol class="carousel-indicators"> <?php for ($i=0; $i<$nums_slides; $i++){ $active="active"; ?> <li data-target="#carousel-example-captions" data-slide-to="<?php echo $i;?>" class="<?php echo $active;?>"></li> <?php $active=""; } ?> </ol> <div class="carousel-inner" role="listbox"> <?php $active="active"; while ($rw_slider=mysqli_fetch_array($sql_slider)){ ?> <div class="item <?php echo $active;?>"> <img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="img/slider/<?php echo $rw_slider['url_image'];?>" data-holder-rendered="true"> <div class="carousel-caption"> <h3><?php echo $rw_slider['titulo'];?></h3> <p><?php echo $rw_slider['descripcion'];?></p> <a class='btn btn-<?php echo $rw_slider['estilo_boton'];?> text-right' href="<?php echo $rw_slider['url_boton'];?>"><?php echo $rw_slider['texto_boton'];?></a> </div> </div> <?php $active=""; } ?> </div> <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <h4 class='text-center'>Sistema de cotizaciones</h4> <a href="http://obedalvarado.pw/cotizador-web/" target="_blank"><img src="http://obedalvarado.pw/img/cotizador-banner.png" class="img-responsive"></a> <hr> <h4 class='text-center'>Sistema de inventario</h4> <a href="http://obedalvarado.pw/sistema-de-control-de-inventario/" target="_blank"><img src="http://obedalvarado.pw/img/sistema-control-inventario.png" class="img-responsive"></a> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body> </html> |
Administración del Carousel
Para la administracion de l carousel se ha creado el archivo sliderslist.php, el cual hace de una llamada al archivo ajax/slider_ajax.php, el código es el siguiente:
|
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 87 88 89 90 91 92 93 94 |
<?php $title="Configuración de Slider"; /* Llamar la Cadena de Conexion*/ include ("config/conexion.php"); $active="active"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../images/ico/favicon.ico"> <title><?php echo $title;?></title> <!-- Bootstrap core CSS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Custom styles for this template --> <link href="css/navbar-fixed-top.css" rel="stylesheet"> </head> <body> <?php include("top_menu.php");?> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="row"> <ol class="breadcrumb"> <li><a href="sliderslist.php">Slider</a></li> <li class="active">Listado</li> </ol> <div class="row"> <div class="col-xs-12 text-right"> <a href='slidesadd.php' class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> Agregar Slide</a> </div> </div> <br> <div id="loader" class="text-center"> <span><img src="./img/ajax-loader.gif"></span></div> <div class="outer_div"></div><!-- Datos ajax Final --> </div> </div> <!-- /container --> <?php include("footer.php");?> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> <script> $(document).ready(function(){ load(1); }); function load(page){ var parametros = {"action":"ajax","page":page}; $.ajax({ url:'./ajax/slider_ajax.php', data: parametros, beforeSend: function(objeto){ $("#loader").html("<img src='./img/ajax-loader.gif'>"); }, success:function(data){ $(".outer_div").html(data).fadeIn('slow'); $("#loader").html(""); } }) } function eliminar_slide(id){ page=1; var parametros = {"action":"ajax","page":page,"id":id}; if(confirm('Esta acción eliminará de forma permanente el slide \n\n Desea continuar?')){ $.ajax({ url:'./ajax/slider_ajax.php', data: parametros, beforeSend: function(objeto){ $("#loader").html("<img src='./img/ajax-loader.gif'>"); }, success:function(data){ $(".outer_div").html(data).fadeIn('slow'); $("#loader").html(""); } }) } } </script> |
ajax/slider_ajax.php
|
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 87 88 89 90 91 92 93 94 95 96 97 |
<?php /* Llamar la Cadena de Conexion*/ include ("../config/conexion.php"); $action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:''; if($action == 'ajax'){ //Elimino producto if (isset($_REQUEST['id'])){ $id_slide=intval($_REQUEST['id']); if ($delete=mysqli_query($con,"delete from slider where id='$id_slide'")){ $message= "Datos eliminados satisfactoriamente"; } else { $error= "No se pudo eliminar los datos"; } } $tables=" slider"; $sWhere=" "; $sWhere.=" "; $sWhere.=" order by orden"; include 'pagination.php'; //include pagination file //pagination variables $page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1; $per_page = 12; //how much records you want to show $adjacents = 4; //gap between pages after number of adjacents $offset = ($page - 1) * $per_page; //Count the total number of row in your table*/ $count_query = mysqli_query($con,"SELECT count(*) AS numrows FROM $tables $sWhere "); if ($row= mysqli_fetch_array($count_query)) { $numrows = $row['numrows']; } else {echo mysqli_error($con);} $total_pages = ceil($numrows/$per_page); $reload = './productslist.php'; //main query to fetch the data $query = mysqli_query($con,"SELECT * FROM $tables $sWhere LIMIT $offset,$per_page"); if (isset($message)){ ?> <div class="alert alert-success alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Aviso!</strong> <?php echo $message;?> </div> <?php } if (isset($error)){ ?> <div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Error!</strong> <?php echo $error;?> </div> <?php } //loop through fetched data if ($numrows>0) { ?> <div class="row"> <?php while($row = mysqli_fetch_array($query)){ $url_image=$row['url_image']; $titulo=$row['titulo']; $descripcion=$row['descripcion']; $id_slide=$row['id']; ?> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/slider/<?php echo $url_image;?>" alt="..."> <div class="caption"> <h3><?php echo $titulo;?></h3> <p><?php echo $descripcion;?></p> <p class='text-right'><a href="slidesedit.php?id=<?php echo intval($id_slide);?>" class="btn btn-info" role="button"><i class='glyphicon glyphicon-edit'></i> Editar</a> <button type="button" class="btn btn-danger" onclick="eliminar_slide('<?php echo $id_slide;?>');" role="button"><i class='glyphicon glyphicon-trash'></i> Eliminar</button></p> </div> </div> </div> <?php } ?> </div> <div class="table-pagination text-right"> <?php echo paginate($reload, $page, $total_pages, $adjacents);?> </div> <?php } } ?> |
Agregar una nueva diapositiva al carousel
El archivo slidesadd.php, mediante el uso de dos funciones JavaScript realiza: la actualización en la base de datos de un slide y sube al servidor una nueva imagen para que esta sea mostrada en el carousel.
|
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 |
<?php $title="Agregar Slide"; /* Llamar la Cadena de Conexion*/ include ("config/conexion.php"); //Insert un nuevo producto $imagen_demo="demo.png"; $insert=mysqli_query($con,"insert into slider (url_image, estado) values ('$imagen_demo','0')"); $sql_last=mysqli_query($con,"select LAST_INSERT_ID(id) as last from slider order by id desc limit 0,1"); $rw=mysqli_fetch_array($sql_last); $id_slide=$rw['last']; $active_config="active"; $active_slider="active"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../images/ico/favicon.ico"> <title><?php echo $title;?></title> <!-- Bootstrap core CSS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Custom styles for this template --> <link href="css/navbar-fixed-top.css" rel="stylesheet"> <link href="css/preview-image.css" rel="stylesheet"> </head> <body> <?php include("top_menu.php");?> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="row"> <ol class="breadcrumb"> <li><a href="sliderslist.php">Slider</a></li> <li class="active">Agregar</li> </ol> <div class="col-md-7"> <h3 ><span class="glyphicon glyphicon-edit"></span> Editar slide</h3> <form class="form-horizontal" id="editar_slide"> <div class="form-group"> <label for="titulo" class="col-sm-3 control-label">Titulo</label> <div class="col-sm-9"> <input type="text" class="form-control" id="titulo" value="" required name="titulo"> <input type="hidden" class="form-control" id="id_slide" value="<?php echo intval($id_slide);?>" name="id_slide"> </div> </div> <div class="form-group"> <label for="descripcion" class="col-sm-3 control-label">Descripción</label> <div class="col-sm-9"> <textarea class="form-control " rows="5" id="descripcion" required name="descripcion"></textarea> </div> </div> <div class="form-group"> <label for="texto_boton" class="col-sm-3 control-label">Texto del boton</label> <div class="col-sm-9"> <input type="text" class="form-control" id="texto_boton" name="texto_boton" value="Comprar ahora!"> </div> </div> <div class="form-group"> <label for="url_boton" class="col-sm-3 control-label">URL del boton</label> <div class="col-sm-9"> <input type="text" class="form-control" id="url_boton" name="url_boton" value=""> </div> </div> <div class="form-group"> <label for="texto_boton" class="col-sm-3 control-label">Color del boton</label> <div class="col-sm-9"> <button type="button" class="btn btn-info btn-sm"><input type="radio" name="estilo" value="info" checked> </button> <button type="button" class="btn btn-warning btn-sm"><input type="radio" name="estilo" value="warning"> </button> <button type="button" class="btn btn-primary btn-sm"><input type="radio" name="estilo" value="primary"> </button> <button type="button" class="btn btn-success btn-sm"><input type="radio" name="estilo" value="success"> </button> <button type="button" class="btn btn-danger btn-sm"><input type="radio" name="estilo" value="danger"> </button> </div> </div> <div class="form-group"> <label for="orden" class="col-sm-3 control-label">Orden</label> <div class="col-sm-9"> <input type="number" class="form-control" id="orden" name="orden" value="1"> </div> </div> <div class="form-group"> <label for="estado" class="col-sm-3 control-label">Estado</label> <div class="col-sm-9"> <select class="form-control" id="estado" required name="estado"> <option value="0" >Inactivo</option> <option value="1" >Activo</option> </select> </div> </div> <div class="form-group"> <div id='loader'></div> <div class='outer_div'></div> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-success">Actualizar datos</button> </div> </div> </form> </div> <div class="col-md-5"> <h3 ><span class="glyphicon glyphicon-picture"></span> Imagen</h3> <form class="form-vertical"> <div class="form-group"> <div class="col-sm-12"> <div class="fileinput fileinput-new" data-provides="fileinput"> <div class="fileinput-new thumbnail" style="max-width: 100%;" > <img class="img-rounded" src="./img/slider/<?php echo $imagen_demo;?>" /> </div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 250px; max-height: 250px;"></div> <div> <span class="btn btn-info btn-file"><span class="fileinput-new">Selecciona una imagen</span> <span class="fileinput-exists" onclick="upload_image();">Cambiar imagen</span><input type="file" name="fileToUpload" id="fileToUpload" required onchange="upload_image();"></span> <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Cancelar</a> </div> </div> <div class="upload-msg"></div> </div> <p class="text-primary text-center">Tamaño recomendado es de 900 x 500 píxeles.</p> </div> </form> </div> </div> </div><!-- /container --> <?php include("footer.php");?> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="js/jasny-bootstrap.min.js"></script> </body> </html> <script> function upload_image(){ $(".upload-msg").text('Cargando...'); var id_slide=$("#id_slide").val(); var inputFileImage = document.getElementById("fileToUpload"); var file = inputFileImage.files[0]; var data = new FormData(); data.append('fileToUpload',file); data.append('id',id_slide); $.ajax({ url: "ajax/upload_slide.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: data, // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { $(".upload-msg").html(data); window.setTimeout(function() { $(".alert-dismissible").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 5000); } }); } function eliminar(id){ var parametros = {"action":"delete","id":id}; $.ajax({ url:'ajax/upload2.php', data: parametros, beforeSend: function(objeto){ $(".upload-msg2").text('Cargando...'); }, success:function(data){ $(".upload-msg2").html(data); } }) } </script> <script> $("#editar_slide").submit(function(e) { $.ajax({ url: "ajax/editar_slide.php", type: "POST", data: $("#editar_slide").serialize(), beforeSend: function(objeto){ $("#loader").html("Cargando..."); }, success:function(data){ $(".outer_div").html(data).fadeIn('slow'); $("#loader").html(""); } }); e.preventDefault(); }); </script> |
ajax/upload_slide.php
|
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 if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_FILES["fileToUpload"]["type"])){ /* Llamar la Cadena de Conexion*/ include ("../config/conexion.php"); $id_slide=intval($_POST['id']); $target_dir = "../img/slider/"; $carpeta=$target_dir; if (!file_exists($carpeta)) { mkdir($carpeta, 0777, true); } $target_file = $carpeta . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { $errors[]= "El archivo es una imagen - " . $check["mime"] . "."; $uploadOk = 1; } else { $errors[]= "El archivo no es una imagen."; $uploadOk = 0; } } // Check if file already exists if (file_exists($target_file)) { $errors[]="Lo sentimos, archivo ya existe."; $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 524288) { $errors[]= "Lo sentimos, el archivo es demasiado grande. Tamaño máximo admitido: 0.5 MB"; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { $errors[]= "Lo sentimos, sólo archivos JPG, JPEG, PNG & GIF son permitidos."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { $errors[]= "Lo sentimos, tu archivo no fue subido."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { $messages[]= "El Archivo ha sido subido correctamente."; $ruta=$_FILES["fileToUpload"]["name"]; $update=mysqli_query($con,"UPDATE slider SET url_image='$ruta' WHERE id='$id_slide'"); } else { $errors[]= "Lo sentimos, hubo un error subiendo el archivo."; } } if (isset($errors)){ ?> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Error!</strong> <?php foreach ($errors as $error){ echo"<p>$error</p>"; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Aviso!</strong> <?php foreach ($messages as $message){ echo"<p>$message</p>"; } ?> </div> <?php } } ?> |
ajax/editar_slide.php
|
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 |
<?php if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST["titulo"])){ /* Llamar la Cadena de Conexion*/ include ("../config/conexion.php"); // escaping, additionally removing everything that could be (html/javascript-) code $titulo = mysqli_real_escape_string($con,(strip_tags($_POST['titulo'], ENT_QUOTES))); $descripcion = mysqli_real_escape_string($con,(strip_tags($_POST['descripcion'], ENT_QUOTES))); $texto_boton= mysqli_real_escape_string($con,(strip_tags($_POST['texto_boton'], ENT_QUOTES))); $url_boton = mysqli_real_escape_string($con,($_POST['url_boton'])); $estilo = mysqli_real_escape_string($con,($_POST['estilo'])); $orden = intval($_POST['orden']); $estado = intval($_POST['estado']); $id_slide=intval($_POST['id_slide']); $sql="UPDATE slider SET titulo='$titulo', descripcion='$descripcion', texto_boton='$texto_boton', url_boton='$url_boton', estilo_boton='$estilo', orden='$orden', estado='$estado' WHERE id='$id_slide'"; $query = mysqli_query($con,$sql); // if user has been added successfully if ($query) { $messages[] = "Datos han sido actualizados satisfactoriamente."; } else { $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con); } if (isset($errors)){ ?> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <?php foreach ($errors as $error) { echo $error; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>¡Bien hecho!</strong> <?php foreach ($messages as $message) { echo $message; } ?> </div> <?php } } ?> |
Editar una diapositiva al carousel
El archivo slidesedit.php, se encarga de mostrar el formulario para la actualización de datos de una slide o diapositiva.
|
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 |
<?php $title="Editar Slide"; /* Llamar la Cadena de Conexion*/ include ("config/conexion.php"); //Insert un nuevo producto $imagen_demo="demo.png"; $id_slide=intval($_GET['id']); $sql=mysqli_query($con,"select * from slider where id='$id_slide' limit 0,1"); $count=mysqli_num_rows($sql); if ($count==0){ header("location: sliderslist.php"); exit; } $rw=mysqli_fetch_array($sql); $titulo=$rw['titulo']; $descripcion=$rw['descripcion']; $texto_boton=$rw['texto_boton']; $url_boton=$rw['url_boton']; $estilo_boton=$rw['estilo_boton']; $url_image=$rw['url_image']; $orden=intval($rw['orden']); $estado=intval($rw['estado']); $active_config="active"; $active_slider="active"; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../images/ico/favicon.ico"> <title><?php echo $title;?></title> <!-- Bootstrap core CSS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Custom styles for this template --> <link href="css/navbar-fixed-top.css" rel="stylesheet"> <link href="css/preview-image.css" rel="stylesheet"> </head> <body> <?php include("top_menu.php");?> <div class="container"> <!-- Main component for a primary marketing message or call to action --> <div class="row"> <ol class="breadcrumb"> <li><a href="sliderslist.php">Slider</a></li> <li class="active">Editar</li> </ol> <div class="col-md-7"> <h3 ><span class="glyphicon glyphicon-edit"></span> Editar slide</h3> <form class="form-horizontal" id="editar_slide"> <div class="form-group"> <label for="titulo" class="col-sm-3 control-label">Titulo</label> <div class="col-sm-9"> <input type="text" class="form-control" id="titulo" value="<?php echo $titulo;?>" required name="titulo"> <input type="hidden" class="form-control" id="id_slide" value="<?php echo intval($id_slide);?>" name="id_slide"> </div> </div> <div class="form-group"> <label for="descripcion" class="col-sm-3 control-label">Descripción</label> <div class="col-sm-9"> <textarea class="form-control " rows="5" id="descripcion" required name="descripcion"><?php echo $descripcion;?></textarea> </div> </div> <div class="form-group"> <label for="texto_boton" class="col-sm-3 control-label">Texto del boton</label> <div class="col-sm-9"> <input type="text" class="form-control" id="texto_boton" name="texto_boton" value="<?php echo $texto_boton?>"> </div> </div> <div class="form-group"> <label for="url_boton" class="col-sm-3 control-label">URL del boton</label> <div class="col-sm-9"> <input type="text" class="form-control" id="url_boton" name="url_boton" value="<?php echo $url_boton;?>"> </div> </div> <div class="form-group"> <label for="texto_boton" class="col-sm-3 control-label">Color del boton</label> <div class="col-sm-9"> <button type="button" class="btn btn-info btn-sm"><input type="radio" name="estilo" value="info" <?php if ($estilo_boton=="info"){echo "checked";}?>> </button> <button type="button" class="btn btn-warning btn-sm"><input type="radio" name="estilo" value="warning" <?php if ($estilo_boton=="warning"){echo "checked";}?>> </button> <button type="button" class="btn btn-primary btn-sm"><input type="radio" name="estilo" value="primary" <?php if ($estilo_boton=="primary"){echo "checked";}?>> </button> <button type="button" class="btn btn-success btn-sm"><input type="radio" name="estilo" value="success" <?php if ($estilo_boton=="success"){echo "checked";}?>> </button> <button type="button" class="btn btn-danger btn-sm"><input type="radio" name="estilo" value="danger" <?php if ($estilo_boton=="danger"){echo "checked";}?>> </button> </div> </div> <div class="form-group"> <label for="orden" class="col-sm-3 control-label">Orden</label> <div class="col-sm-9"> <input type="number" class="form-control" id="orden" name="orden" value="<?php echo $orden;?>"> </div> </div> <div class="form-group"> <label for="estado" class="col-sm-3 control-label">Estado</label> <div class="col-sm-9"> <select class="form-control" id="estado" required name="estado"> <option value="0" <?php if($estado==0){echo "selected";} ?>>Inactivo</option> <option value="1" <?php if($estado==1){echo "selected";} ?>>Activo</option> </select> </div> </div> <div class="form-group"> <div id='loader'></div> <div class='outer_div'></div> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-success">Actualizar datos</button> </div> </div> </form> </div> <div class="col-md-5"> <h3 ><span class="glyphicon glyphicon-picture"></span> Imagen</h3> <form class="form-vertical"> <div class="form-group"> <div class="col-sm-12"> <div class="fileinput fileinput-new" data-provides="fileinput"> <div class="fileinput-new thumbnail" style="max-width: 100%;" > <img class="img-rounded" src="./img/slider/<?php echo $url_image;?>" /> </div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 250px; max-height: 250px;"></div> <div> <span class="btn btn-info btn-file"><span class="fileinput-new">Selecciona una imagen</span> <span class="fileinput-exists" onclick="upload_image();">Cambiar imagen</span><input type="file" name="fileToUpload" id="fileToUpload" required onchange="upload_image();"></span> <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Cancelar</a> </div> </div> <div class="upload-msg"></div> </div> <p class="text-primary text-center">Tamaño recomendado es de 900 x 500 píxeles.</p> </div> </form> </div> </div> </div><!-- /container --> <?php include("footer.php");?> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="js/jasny-bootstrap.min.js"></script> </body> </html> <script> function upload_image(){ $(".upload-msg").text('Cargando...'); var id_slide=$("#id_slide").val(); var inputFileImage = document.getElementById("fileToUpload"); var file = inputFileImage.files[0]; var data = new FormData(); data.append('fileToUpload',file); data.append('id',id_slide); $.ajax({ url: "ajax/upload_slide.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: data, // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { $(".upload-msg").html(data); window.setTimeout(function() { $(".alert-dismissible").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 5000); } }); } function eliminar(id){ var parametros = {"action":"delete","id":id}; $.ajax({ url:'ajax/upload2.php', data: parametros, beforeSend: function(objeto){ $(".upload-msg2").text('Cargando...'); }, success:function(data){ $(".upload-msg2").html(data); } }) } </script> <script> $("#editar_slide").submit(function(e) { $.ajax({ url: "ajax/editar_slide.php", type: "POST", data: $("#editar_slide").serialize(), beforeSend: function(objeto){ $("#loader").html("Cargando..."); }, success:function(data){ $(".outer_div").html(data).fadeIn('slow'); $("#loader").html(""); } }); e.preventDefault(); }); </script> |
Bien ahora puedes actualizar fácilmente las imágenes y mostrarlos en Carousel, este código podría ser útil para los desarrolladores web y diseñadores web que deseen una solución rápida para mostrar imágenes con control deslizante en algún sitio web.
Esperamos que les guste este tutorial. Si tienes alguna duda háznosla saber dejando un comentario.
Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales:
[sociallocker]
Demostración frontend Demostración backend Descargar
[/sociallocker]
