Bootstrap Mysql PHP

Carrusel dinámico con Material Design y Bootstrap

Obed Alvarado 26 min de lectura
Compartir

Carrusel dinámico

En un articulo anterior he publicado como crear un Carrusel dinámico de imágenes, con la capacidad de administrar dicho carrusel, agregando funciones de creación, edición y eliminación de diapositivas al Carrusel, usando PHP, MySQL y Boostrap

http://obedalvarado.pw/blog/carousel-bootstrap-dinamico-con-php-y-mysql/

En esta ocasión quiero compartir otro fragmento de código para realizar un Carrusel de imágenes, pero esta vez el diseño lo haremos con Material Design y Boostrap, para ello seguiremos los pasos siguientes:

  1. Creación de la base de datos: 
    -- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 02-03-2017 a las 04:03:52
-- Versión del servidor: 10.1.19-MariaDB
-- Versión de PHP: 7.0.13
    

    SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
    

    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
    

    --
-- Base de datos: `test_slider`
--
    

    -- --------------------------------------------------------
    

    --
-- Estructura de tabla para la tabla `slider`
--
    

    CREATE TABLE `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 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=5;
/*!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 */;

     

  2. 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.

    <?php
$DB_HOST="localhost";//Servidor donde se encuentra alojada nuestra base de datos
$DB_NAME= "test_slider";// 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());
    }
?>

     

  3. Creación del archivo index.php: El cual se encargara de mostrar el carrusel de imágenes dinámicas. 
    <?php
$title="Carousel dinámico con Material Design - Bootstrap - PHP - MySQL";
/* Llamar la Cadena de Conexion*/ 
include ("config/conexion.php");
$active="active";
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><?php echo $title;?></title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.css" rel="stylesheet">
</head>
<body class="hidden-sn purple-skin animated">
    <!--Double navigation-->
    <header>
        <!--Navbar-->
        <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">
           <!-- SideNav slide-out button -->
            <div class="float-xs-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
            </div>
            <!-- Breadcrumb-->
            <div class="breadcrumb-dn">
                <p><?php echo $title; ?></p>
            </div>
            <ul class="nav navbar-nav float-xs-right">
				<li class="nav-item ">
                    <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
                </li>   
            </ul>
		</nav>
        <!--/.Navbar-->
    </header>
    <!--/Double navigation-->
    

        <!--Main layout-->
    <main>
        <div class="container">
            <!--Section: Main carousel-->
            <section>
                <div class="row">
                    <div class="col-md-12">
                        <!--Carousel Wrapper-->
                        <div id="carousel-example-2" class="carousel slide carousel-fade" 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);
						?>
                            <!--Indicators-->
                            <ol class="carousel-indicators">
								<?php 
									for ($i=0; $i<$nums_slides; $i++){
    

    										if ($i==0){
											$active="active";
										} else {
											$active="";
										}
										?>
										<li data-target="#carousel-example-2" data-slide-to="<?php echo $i;?>" class="<?php echo $active;?>"></li>
										<?php
    

    									}
								?>
    

                                </ol>
                            <!--/.Indicators-->
                            <!--Slides-->
                            <div class="carousel-inner" role="listbox">
								<?php
									$active="active";
									while ($rw_slider=mysqli_fetch_array($sql_slider)){
								?>
								<!--Second slide-->
                                <div class="carousel-item <?php echo $active;?>">
                                    <!--Mask color-->
                                    <div class="view hm-black-light">
                                        <img src="img/slider/<?php echo $rw_slider['url_image'];?>" class="img-fluid" alt="">
                                        <div class="full-bg-img">
                                        </div>
                                    </div>
                                    <!--Caption-->
                                    <div class="carousel-caption">
                                        <div class="animated fadeIn">
                                            <h3 class="h3-responsive"><?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>
												<br><br>	
									   </div>
                                    </div>
                                    <!--Caption-->
                                </div>
								<?php 
								$active="";
								}
								?>
                            </div>
                            <!--/.Slides-->
                            <!--Controls-->
                            <a class="left carousel-control" href="#carousel-example-2" role="button" data-slide="prev">
                                <span class="icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Anterior</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-2" role="button" data-slide="next">
                                <span class="icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Siguiente</span>
                            </a>
                            <!--/.Controls-->
                        </div>
                        <!--/.Carousel Wrapper-->
    

                        </div>
                </div>
            </section>
            <!--/Section: Main carousel-->
            <!--Divider-->
            <div class="divider-new">
                <h2 class="h2-responsive">CAROUSEL DINAMICO PHP & MYSQL</h2>
            </div>
           <hr class="between-sections">
   </div>
    </main>
    <!--/Main layout-->
    <!--Footer-->
    <footer class="page-footer center-on-small-only">
      <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                &copy; <?php echo date('Y')?> Copyright: <a href="http://obedalvarado.pw"> Sistemas Web </a>
            </div>
        </div>
        <!--/.Copyright-->
    </footer>
    <!--/.Footer-->
    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <!-- Tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>
   <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <script>
        // SideNav init
        $(".button-collapse").sideNav();
        var el = document.querySelector('.custom-scrollbar');
        Ps.initialize(el);
    </script>
    <script>
        new WOW().init();
    </script>
</body>
</html>

    Administración del Carousel

    Para la administración del carrusel de imagen con Material Design y Bootstrap  estaremos usando los mismos archivos fuentes que encontramos en el articulo: Carousel Bootstrap dinámico con PHP y MySQL

    Vamos administrar el carrusel con los siguientes archivos: sliderslist.php

    <?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 

    <?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
	}
}
?>

    slidesadd.php 

    <?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 1800 x 795 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

     

    <?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">&times;</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">&times;</span></button>
	  <strong>Aviso!</strong> 
	  <?php
	  foreach ($messages as $message){
		  echo"<p>$message</p>";
	  }
	  ?>
	</div>
	<?php
}
}
?>

    sliderslist.php

    <?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/editar_slide.php

    <?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">&times;</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">&times;</button>
					<strong>¡Bien hecho!</strong>
					<?php
						foreach ($messages as $message) {
								echo $message;
							}
						?>
			</div>
			<?php
		}
    

    }
?>

    Espero que este pequeño fragmento de código te sea de utilidad. Si tienes alguna duda o sugerencia háznosla saber dejando un comentario.

    DESCARGAR ARCHIVOS

     

     ¿Necesitas un sitio web  Autoadministrable?

    Sigue el siguiente enlace: Catálogo web Autoadministrable

     

 

Obed Alvarado

Sobre el autor

Artículo redactado por Obed Alvarado. Comparto experiencias prácticas sobre PHP, MySQL, aplicaciones web, instalación en hosting y herramientas para negocios.

También te puede interesar

Comentarios