MesterLum Publicado 17 de Enero del 2017 Reportar Compartir Publicado 17 de Enero del 2017 Hola, que tal a todos, hoy vengo a regalarles una parte de lo que vendria siendo un noticiero, seccion de noticias, como quieran decirle, que algo parecido a esto: Debes iniciar sesión para ver el contenido del enlace en esta publicación. bien, básicamente es un noticiero con scroll infinito empleado ajax y json. es muy básico, por medio de JavaScript solicito datos a travez de ajax a php, php responde y manda a travez de json, JavaScript entiende JSON y plasma el array, en este caso y se refleja en la web. No dare soporte de instalación, y, esta versión no esta terminada del todo. Sí quieres soporte, para adaptarla a tu web, crearle una sección para introducir nuevas noticias etc, entonces en ese caso cobrare servicios. Esto es la conexion, luego veremos como lo utilizaremos. <?php $DB_HOST = "localhost"; $DB_NAME = "host"; $DB_USER = "root"; $DB_PASS = ""; ?> A qui esta la clase de php para la conexión. <?php class conexion{ public static function conection(){ require("daten_inc.php"); try{ $conexion = new PDO("mysql:host=$DB_HOST;dbname=$DB_NAME", "$DB_USER", "$DB_PASS"); $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $conexion->exec("SET CHARACTER SET UTF8"); }catch(Exception $e){ die ("Error al conectar con la base de datos"); echo "Linea: " . $e->getLine(); } return $conexion; } } ?> Aquí esta la parte de la consulta SQL para la llamada (sinceramente la consulta esta mejor con INER JOIN debido que se tiene que extraer con el id_account la id de la cuenta para mostrarlo) <?php class article{ protected $conection; public function __construct(){ require("conection.php"); $this->conection = conexion::conection(); } // End construct public function get_notice($hasta){ $sql = "SELECT * FROM notice ORDER BY date DESC limit $hasta, 3"; $query = $this->conection->query($sql)->fetchAll(PDO::FETCH_ASSOC); $r = count($query); if ($r == 0) $query = array("status" => "Empty"); echo json_encode($query); } //End get_notice } // End class $x = new article(); $hasta = $_POST["hasta"]; $x->get_notice($hasta); ?> Pasamos al lado de JavaScript, en este caso, viene incluido ya con el metodo AJAX var scroll = true; var pag = 0, hasta; function aumento(){ pag++; hasta = pag*3; } $(document).ready(function(){ //Scroll para las noticias del menu if (pag == 0){ var daten = [{name: "hasta", value: 0}]; //console.log(daten); $.ajax({ url: "page/article.php", data: daten, type: "post", dataType: "json", success : function(date){ console.log(date); if (date.status == "Empty"){ scroll = false; } else{ for (var i=0; i<date.length; i++){ $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer class="footer_notices">autor, fecha</footer></article> '); } } } }) .fail(function(){ alert("No se pudo enviar"); }); } $('.contenedor').scroll(function(){ if (($(this).scrollTop() + $(this).height()) == $(this).prop('scrollHeight') && scroll == true){ aumento(); var daten = [{name: "hasta", value: hasta}]; //console.log(daten); $.ajax({ url: "page/article.php", data: daten, type: "post", dataType: "json", success : function(date){ if (date.status == "Empty"){ scroll = false; } else{ for (var i=0; i<date.length; i++){ $('.contenedor').append('<article class="article_notice"><header class="header_notices"><p><strong><i>'+ date[i].tittle + '</strong></p></header><section class="section_notices"><p>'+ date[i].body + '</p></section><footer class="footer_notices">autor, fecha</footer></article> '); } } } }) .fail(function(){ alert("No se pudo enviar"); }); } //if condicion }); }); Como plus, incluire la parte de la hoja de estilos. (no dare información acerca de los selectores ni nada por el estilo) .notices{ float: right; margin: auto; background-color: transparent; width: 50%; height: 200px; margin-right: 6%; } .titulo_notices{ background-color: grey; text-align: center; font-size: 30px; width: 80%; margin: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-color: orange; border-bottom-width: 5px; border-bottom-style: solid; color: white; margin-top: 50px; } .notices .article_notice{ background-color: transparent; background-color: grey; } .notices .contenedor{ background-color: transparent; overflow: auto; height: 230px; width: 80%; margin: auto; } .header_notices{ margin-left: 5px; margin-top: 6px; margin-bottom: 6px; overflow: hidden; font-size: 30px; } .section_notices{ overflow: auto; text-align: justify; margin-left: 13px; margin-right: auto; text-decoration: none; margin-bottom: 10px; } .footer_notices{ margin-left: 5px; } La parte del HTML <!--Noticias--> <div class="notices"> <div class="titulo_notices">NOTICIAS <i class="fa fa-comments" aria-hidden="true"></i></div> <div class="contenedor"></div> </div> y ya para finalizar, la parte SQL Debes iniciar sesión para ver el contenido del enlace en esta publicación.!nNpe8PSy2BXlbwTuHUanAOs2a09ztY_cWdpMQJQmrqM PD:en la sección del javascript se pueden reducir algunas lineas de codigo con la seccion donde es valor == 0. don pancho, Ahmet Zeki Taşgar, rcdcompany y 7 mas reacciono a esto 7 1 2 Citar Enlace para comentar Compartir en otros sitios Mas opciones de compartir...
Mensajes recomendados
Unirse a la conversación
Puedes publicar ahora y registrarte más tarde. Si tienes una cuenta, regístrate para publicar con su cuenta.