Carrusel dinámico con Material Design y Bootstrap

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

Carousel Bootstrap dinámico 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:

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 */;

-- 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 */;

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());
    }
?>

<?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());

}

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>

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

<?php

$title="Carousel dinámico con Material Design - Bootstrap - PHP - MySQL";

/* Llamar la Cadena de Conexion*/

include ("config/conexion.php");

$active="active";

<!DOCTYPE html>

<head>

</head>

</div>

</div>

<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>

</li>

</ul>

</nav>

</header>

<main>

<?php

$sql_slider=mysqli_query($con,"select * from slider where estado=1 order by orden");

$nums_slides=mysqli_num_rows($sql_slider);

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

<?php

$active="active";

while ($rw_slider=mysqli_fetch_array($sql_slider)){

<img src="img/slider/<?php echo $rw_slider['url_image'];?>" class="img-fluid" alt="">

</div>

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

<span class="sr-only">Anterior</span>

</a>

<span class="sr-only">Siguiente</span>

</a>

</div>

</div>

</section>

<h2 class="h2-responsive">CAROUSEL DINAMICO PHP & MYSQL</h2>

</div>

</div>

</main>

</div>

</footer>

// SideNav init

$(".button-collapse").sideNav();

var el = document.querySelector('.custom-scrollbar');

Ps.initialize(el);

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

<?php

$title="Configuración de Slider";

/* Llamar la Cadena de Conexion*/

include ("config/conexion.php");

$active="active";

<!DOCTYPE html>

<head>

</head>

<body>

<?php include("top_menu.php");?>

<li><a href="sliderslist.php">Slider</a></li>

<li class="active">Listado</li>

</ol>

<a href='slidesadd.php' class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> Agregar Slide</a>

</div>

<br>

</div>

</div>

<?php include("footer.php");?>

<!-- Bootstrap core JavaScript

================================================== -->

</body>

</html>

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

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

<strong>Aviso!</strong> <?php echo $message;?>

</div>

<?php

}

if (isset($error)){

<strong>Error!</strong> <?php echo $error;?>

</div>

<?php

}

//loop through fetched data

if ($numrows>0) {

<?php

while($row = mysqli_fetch_array($query)){

$url_image=$row['url_image'];

$titulo=$row['titulo'];

$descripcion=$row['descripcion'];

$id_slide=$row['id'];

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

<?php

}

</div>

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

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>

<head>

</head>

<body>

<?php include("top_menu.php");?>

<li><a href="sliderslist.php">Slider</a></li>

<li class="active">Agregar</li>

</ol>

<h3 ><span class="glyphicon glyphicon-edit"></span> Editar slide</h3>

<label for="titulo" class="col-sm-3 control-label">Titulo</label>

<input type="hidden" class="form-control" id="id_slide" value="<?php echo intval($id_slide);?>" name="id_slide">

</div>

<label for="descripcion" class="col-sm-3 control-label">Descripción</label>

</div>

<label for="texto_boton" class="col-sm-3 control-label">Texto del boton</label>

</div>

<label for="url_boton" class="col-sm-3 control-label">URL del boton</label>

</div>

<label for="texto_boton" class="col-sm-3 control-label">Color del boton</label>

</div>

<label for="orden" class="col-sm-3 control-label">Orden</label>

</div>

<label for="estado" class="col-sm-3 control-label">Estado</label>

<option value="0" >Inactivo</option>

<option value="1" >Activo</option>

</select>

</div>

<button type="submit" class="btn btn-success">Actualizar datos</button>

</div>

</form>

</div>

<h3 ><span class="glyphicon glyphicon-picture"></span> Imagen</h3>

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

<p class="text-primary text-center">Tamaño recomendado es de 1800 x 795 píxeles.</p>

</div>

</form>

</div>

</div>

<?php include("footer.php");?>

<!-- Bootstrap core JavaScript

================================================== -->

</body>

</html>

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>

$("#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
}
}
?>

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

<strong>Error!</strong>

<?php

foreach ($errors as $error){

echo"<p>$error</p>";

}

</div>

<?php

}

if (isset($messages)){

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

<?php

$title="Configuración de Slider";

/* Llamar la Cadena de Conexion*/

include ("config/conexion.php");

$active="active";

<!DOCTYPE html>

<head>

</head>

<body>

<?php include("top_menu.php");?>

<li><a href="sliderslist.php">Slider</a></li>

<li class="active">Listado</li>

</ol>

<a href='slidesadd.php' class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> Agregar Slide</a>

</div>

<br>

</div>

</div>

<?php include("footer.php");?>

<!-- Bootstrap core JavaScript

================================================== -->

</body>

</html>

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

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

<strong>Error!</strong>

<?php

foreach ($errors as $error) {

echo $error;

}

</div>

<?php

}

if (isset($messages)){

<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

Blog

Carrusel dinámico con Material Design y Bootstrap

Carrusel dinámico

Administración del Carousel

¿Necesitas un sitio web Autoadministrable?

Sigue el siguiente enlace: Catálogo web Autoadministrable

También te puede interesar:

Cómo Importar una Base de Datos Grande en Windows con MySQL

Cómo trabajar con fechas y horas en PHP

Crea una calculadora de interés compuesto mensual con PHP

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes