SCRIPT NOTICIERO CON SCROLL INFINITO

[MesterLum]

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.