J. Mick's questions

To protect the ads, I thought of creating a protective layer, that is, a divtransparent one that activates after there are two or three clicksgiven by the same user and thus avoid more clicksfrom the same visitor.

But, of course, this can't be enough, so in addition to creating a layer, I would have to delete all the links that the link(s) contains iframeand iframethat my container has <div class="ads"></div>.

$(document).ready(function() {

   $(".ads iframe").load(function() {
      $(".layer-protect").hide();
   });
});

.ads {
    position: relative;
}
.layer-protect {
    position: absolute;
}
iframe {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ads">
    <iframe src="https://es.stackoverflow.com/"></iframe>
</div>
<div class="layer-protect">
   <p>Hi! Testing...</p>
</div>

iframeI cannot modify the links within a , as you will already know that it is impossible.

The idea is to only allow the user to click on those ads only two or three times, for this you must create a type of click counter and store them in localStoragesince it is not recommended to use cookieit because it can overload my server.

Storage localStoragemust be secure and last for a limited time of 24 or 48 hours, after that time that data is deleted, it is important that this expiration function works or not for the online user.

At the moment I have the following jQuery code:

let i = 0;
$("iframe *").each(function() {
    this.pos = i;
    $(this).on("click", (e) => {
        if (localStorage.getItem("link"+i) == null) {
                localStorage.setItem("link"+i, 1);
        } else {
           let clicks = localStorage.getItem("link"+i);
           if (clicks >= 3) {
               if (typeof e.target.getAttribute("href") == "string" && e.target.getAttribute("href").toLowerCase().search(location.hostname.toString().toLowerCase()) == -1) {
                  e.preventDefault();
               }
           } else {
             localStorage.removeItem("link"+i);
             clicks++;
             localStorage.setItem("link"+i, clicks);
           }
        }
    });
i++;
});

But it doesn't work, I've tried creating a page with the following structure:

<div>
    <a href="https://example.com" target="_black">1</a>
    <a href="https://example.com" target="_black">2</a>
    <a href="https://example.com" target="_black">3</a>
    <a href="https://example.com" target="_black">4</a>
    <a href="https://example.com" target="_black">5</a>
    <a href="https://example.com" target="_black">6</a>
    <a href="https://example.com" target="_black">7</a>
    <a href="https://example.com" target="_black">8</a>
</div>

And, I have wrapped/called it in a iframegiving more than 4 clicks on said links, but they have not been removed or disabled.

How can I correctly employ this problem? Can you explain me how to solve it.

I have been looking at some references:

• https://stackoverflow.com/questions/59573181/adsense-click-tracker-not-working-on-mobile-devices
• https://forum.jquery.com/topic/how-to-make-a-button-disabled-after-3-clicks

Tengo desarrollado un simple Wizard, el funcionamiento es como el uso de un tabs, que solamente oculta y muestra el div en el paso que se encuentra.

<div id="step1" class="step">
</div>
<div id="step2" class="step">
</div>
<div id="step3" class="step">
</div>

The content is displayed according to the step through var step = <?php echo $step ?>;if the variable javascript/jqueryhas the following information var step = 3;, the content of the id step3is going to be displayed, that is, the following:

<div id="step3" class="step">
</div>

To save the steps that the user is currently in and thus avoid going backwards, I am using sessions PHPto show the user the step where I am left and not start from the beginning, for this I have three files PHP:

saveTemp.php

<?php
    session_start();
    $step =  isset($_GET['step']) ?  $_GET['step'] : 1;
    $_SESSION['datos_form'] = $_POST;

    include 'php/libs/validate.php';

    header('Content-Type: application/json');

    $json =  array(
        'radio'     => $radio,
        'step'      => $step
    );

    echo json_encode($json);
?>

wizard.php

<?php
    //session_start();
    if (isset($_GET['p'])) {
        session_destroy();
        session_start();
    }

    include  'validate.php';

    $r =array(
        1 => 'Transferencia Bancaria',
        2 => 'PayPal',
        3 => 'Tarjeta de credito',
    );
?>

validate.php

<?php
    $datosForm = (isset($_SESSION['datos_form']) && is_array($_SESSION['datos_form'])) ? $_SESSION['datos_form'] :array();
    $sPaso = isset($datosForm['__step__']) ? $datosForm['__step__'] : 1;
    $step = isset($step) ? $step : $sPaso;
    $radio   = isset($datosForm['radio']) ? $datosForm['radio'] : 1;
    $_SESSION['datos_form']['__step__'] = $step;
?>

I now recover the saved steps in the following way:

<script type="text/javascript">
    var step = <?php echo $step ?>;
    var radio = <?php echo $radio ?>;
</script>

The problem that I am presenting is at the end of the purchase, where I am trying to delete the sessions of the steps $stepto restart them at step 1, using the function unset:

if($payment === 'Completed'){
    session_start();
    unset($_SESSION['datos_form']);
    unset($_SESSION['__step__']);
    unset($_SESSION['formid']);
    unset($_SESSION['sPaso']);
    unset($_SESSION['Pending']);
    unset($_SESSION['radio']);
    unset($_SESSION['p']);
    unset($_SESSION['step']);
    unset($step);
    unset($radio);
}

I have done one var_dump($_SESSION);and one print_r($GLOBALS);obtaining the following information:

[_SESSION] => Array
    (
        [datos_form] => Array
            (
                [__step__] => 3
            )

        [4b228aaae2a6a7ce403bc4ecbc481de6] => ../libro.pdf
        [cart] => Array
            (
                [0] => 11
            )

        [qty] => Array
            (
                [0] => 1
            )

        [formid] => 64da7c62c643f40684f573acffb144eba6bfaf63
        [id_user] => 1
    )

)

var_dump

array(6) { ["datos_form"]=> array(1) { ["__step__"]=> string(1) "3" }

When I go to step 1 I get the following change:

[datos_form] => Array
    (
        [__step__] => 1
    )
array(6) { ["datos_form"]=> array(1) { ["__step__"]=> string(1) "1" }

When I go to step 2 I get the following change:

[datos_form] => Array
    (
        [__step__] => 2
    )
array(6) { ["datos_form"]=> array(1) { ["__step__"]=> string(1) "2" }

I have a pagination that works correctly, even the filter to paginate more rows on the same page, that is to say that through the filter I can show 10 or 50 rows or more.

The small defect that the code has is that the page is reloaded, changing the number of rows that are displayed and the same thing happens in the pagination buttons.

This is my code, everything is working on the same page index2.php

<div id="wrapper">
    <div class="container">
        <div id="news-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search-bar">
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
                    </div>
                    <div class="actions btn-group">
                        <?php
                            $select_quantity = '';
                            if (isset($_POST['amount_show'])) :
                                $select_quantity = $_POST['amount_show'];
                            endif;
                        ?>
                        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                            <select id="amount_show" name="amount_show" onchange="this.form.submit()">
                                <option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
                                <option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
                                <option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
                                <option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?php
            if (isset($_GET['page'])) :
                $page = $_GET['page'] ?: '';
            else :
                $page = 1;
            endif;

            if (isset($_POST['amount_show'])) :
                $records_by_page = $_POST['amount_show'];
            else :
                $records_by_page = 10;
            endif;

            $localization_sql = ($page-1) * $records_by_page;

            $sql = "SELECT id,name,email
                    FROM users
                    ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows>0) :

            echo '<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>';

            $stmt->bind_result($id,$name,$email);
            while ($stmt->fetch()) :
                echo '<tr>
                    <td>'.$id.'</td>
                    <td>'.$name.'</td>
                    <td>'.$email.'</td>
                    <td>Edit</td>
                </tr>';
            endwhile;
            echo '</tbody>';
            echo '</table>';
            $stmt->close();

    /**
    *
    * Botones ATRAS / SIGUIENTES
    *
    */

            $sql = "SELECT * FROM users";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();

            $BD_records = $stmt->num_rows;
            $stmt->close();
            $con->close();

            $total_page = ceil($BD_records / $records_by_page);
            $prev = $page - 1;
            $next = $page + 1;
            echo '<div class=pagination>
            <ul class="pagination">';
            if ($prev > 0) :
                echo "<li><a href='index2.php?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
                echo "<li><a href='index2.php?page=$prev'><i class='icon-angle-left'></i></a></li>";
            endif;

            for ($i=1; $i<=$total_page; $i++) :
                if ($page==$i) :
                    echo "<li><a class=active>". $page . "</a></li>";
                else :
                    echo "<li><a href='index2.php?page=$i'>$i</a></li>";
                endif;
            endfor;


            if ($page < $total_page ) :
                echo "<li><a href='index2.php?page=$next'><i class='icon-angle-right'></i></a></li>";
                echo "<li><a href='index2.php?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
            endif;

            echo '</ul></div>';

            else :
                $stmt->close();
            endif;

        ?>
    </div>
</div>

I have made the following configurations due to the recommendations of JSON, which have been recommended to me.

ajax.php

if (isset($_GET['page'])) :
                $page = $_GET['page'] ?: '';
            else :
                $page = 1;
            endif;

            if (isset($_POST['amount_show'])) :
                $records_by_page = $_POST['amount_show'];
            else :
                $records_by_page = 10;
            endif;

$sql = "SELECT id,name,email
FROM users
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$result = $con->query($sql);
$data_rows = array();
$result = $con->query($sql);
while($row = mysqli_fetch_assoc($result)) {
    $data_rows[] = $row;
}

echo json_encode($data_rows, JSON_PRETTY_PRINT);

I found an ajax code which I have called script.js, and throughajax

$(document).ready(function() {  
 $.ajax({
            type: "GET",
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                tableRows = '';
                for (let i = 0; i < data.length; i++) {
                    tableRows += `
                    <tr>
                        <td>${data[i].id}</td>
                        <td>${data[i].name}</td>
                        <td>${data[i].email}</td>
                        <td>Edit<td>
                    </tr>`;
                }
                $("#tbody-insert").html(tableRows);
            }
    });              
});

I display the data with no problem.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody-insert">

    </tbody>
</table>

Now my problem is, how to show pagination buttons and filter show more result row.

How do I have to send this information to ajax and display the sent information?

can you explain to me

In my system they have the possibility of registering their access data in lowercase or uppercase or varied and the records have no problem if not in the user and email verification filter.

Let's see how the problem occurs:

If we send an email to the following email addresses:

Email: -> [email protected]       o usuario: ->    Jose
Email: -> [email protected]       o usuario: ->    JoSe
Email: -> [email protected]
Email: ->[email protected]   o usuario: ->    JOSE

All the information will arrive at the same mail because for the mail servers that information remains the same regardless of the order of lowercase and uppercase.

Now in my system. If the user uses that same mechanism in my registration system, the system lets them register.

How did he pass a filter through PHP, that checks both data in lower case regardless of how the data is registered or how the user has sent it, the important thing is that both data is checked in lower case.

My current checks:

if($email == $emailDB){
     echo "email utilizado";
}
if($username == $usernameDB) {
   echo "usuario no disponemos";
}

I have the following code that takes the data from the URL itself, specifically the referrer code site.com/register/?ref=1234.

<?php
    session_start();
    $url_referred = $_GET['ref'];
    setcookie("referred", $url_referred);
    //Reference time 86400 = 1 day && 60*60*24*90 = 90 days && 30 * 24 * 60 * 60 = 30 days
    setcookie('referred', $url_referred, time() + (86400 * 30), '/');
    $referred = isset($_COOKIE["referred"]) ? $_COOKIE["referred"] : '';
    //setcookie("referred", "", time()-(86400 * 30));
?>

Now I can read the reference code either through echo $_COOKIE["referred"];I have it defined in the following way to read it:

if($referred != ""){
    echo $referred;
} else {
    $referred = "0000";//Defaul for my site
}

The cookiedoes not seem to work, when reopening the site twice, but this time if in the reference data the reference site.com/register/code is no longer shown.

And I think I know why, firstly because the cookieestablished one is easily replaced by another one in the previous case by an empty one or null data, because the one that happens to show is the default reference data, and if I do site.com/register/?ref=123the following it shows me the following data 123and If I do the following again but with a different reference site.com/register/?ref=123456, it shows me the consequent again, 123456eliminating the previous one.

So, how can I define certain parameters and conditions to a cookie, if a user first arrives at my site without any referral link, the data to register in the cookiewill be the default value 0000, and if he goes and returns with a referral link that this not be valid, because the user already knew my site for his own purposes and not for a reference link.

And if a user arrives by the following referral link site.com/register/?ref=123that registers in the cookievalue 123and yes they leave and come back with another referral link site.com/register/?ref=123456that continues to show the value 123unless the user has returned with that referral link after 30 days , there if the following value is registered and displayed 123456.

How can I do it and have the following conditions in my cookie?

soda

A. Cedano said in a comment that I don't particularly like num_rowsto know if there are rows in a result, sometimes it's not sure, and there are other better ways to know... but this is beside the point now, or maybe it is?

There is a question and an answer HERE but in PDO

I have two examples where I use num_rowsbased on the security that A. Cedano mentions and that there are other ways to know.

How can I display result rows safely using object oriented mysqli

What are the other better ways to find out?

examples

In the following code I use a num_rows;to check if record exists or not to insert or update.

  $result = $con->prepare("SELECT attempts FROM failed_attempt WHERE ip=? AND datetime BETWEEN DATE_SUB( NOW() , INTERVAL 1 DAY ) AND NOW()");

  $result->bind_param("s",$addres);
  $result->execute();
  $result->store_result();

  //Variable para saber si existe registro o no para insert o update.
  $check_result = $result->num_rows;
  if ($result->num_rows===1) { 
    //Obtenemos datos para comparar intentos y para resetear intentos por su ultimo fecha.
    $result->bind_result($failed_login_attempt);
    $result->fetch();
    $result->close();
  } else {
    $result->close();
    $failed_login_attempt=0;
  }

In the code below I fetch the entered user, and also use anum_rows;

  if(count($_POST)>0 && $captcha == true) {
    $username = $_POST["username"] ?: '';
    $password = $_POST["password"] ?: '';    
//Buscar usuario ingresado - INICIO
$sql = $con->prepare("SELECT id_user,username,password,logindatetime, CASE WHEN logindatetime BETWEEN DATE_SUB( NOW() , INTERVAL 2 MINUTE ) AND NOW() THEN '1' ELSE '0' END as logueado FROM users where username=? AND active=? LIMIT 1");
$sql->bind_param("si",$username,$active);
$active=1;
$sql->execute();
$sql->store_result();
if ($sql->num_rows===1) {
    $sql->bind_result($id_userBD,$usernameBD,$passwordDB,$logindatetime,$activeBD);
    if ($sql->fetch()){
        if (password_verify($password, $passwordDB)) {
            $check_password = true;
        } else {
            $check_password = false;
        }
    } $sql->close();
  } else {
    $sql->close();
    $check_password = false;
  }

I have an error in displaying the results correctly

The errors, the problem that I am presenting

I get the one id_seriesfrom the serial table and through the related id it shows me the data from the chapters table. so far it's perfect.

• 2017 series
• 2016 series

Now the problem is that it shows me the same videos (video 1, video 2) in both chapters (2017 series, 2016 series),

To solve it, I must pass a new condition to the query not to show the same videos in both chapters, that is, video 1, video 2, must belong to the 2017 series, and in the 2016 series there are no chapters, it must not show me any index of the videos.

I think I should add the one id_chaptersfrom the chapters table to the videos table

id_videos    title_video    description_video      multimedia    id_series    id_chapters

The other error is that in chapter 2 it shows me the + button and this button should not be shown because the detail of the video itself does not exist in the description_video column, thisNULL

Database structure

Boards

series.

id_series      title           detail     author
   1        New serie 1      Serie 2017   anónimo
   2        New aventure 2   Serie 2016   anónimo

chapters.

id_chapters     chapters     id_series
    1          Serie 2017        1
    2          serie 2016        1

videos.

id_videos    title_video    description_video      multimedia    id_series
   1         video 1        En este capitulo...    video1.mp4        1
   2         video 2         NULL                  video2.mp4        1

I get the idof the series to display the data related to the series.

  if (isset($_GET['id'])){
    $id = $_GET['id'];
    $sql = "SELECT * FROM series WHERE url='".$id."'";
    $result = mysqli_query($con, $sql);

    if(mysqli_num_rows($result) > 0){
        while ($row = mysqli_fetch_array($result)) {
            $id = $row['id_series'];
        }
    }
  }

Example:

I show on the page premieres.php all the data from the table serieswhen clicking on one of the series, it goes to the page detail.php where by means of its id I show the results related to the rest of the tables.

Expanding the body container in Introduction displays the content of all videos.

Now the error is in expanding the video detail of the following video title:

audio video audio video audio video +

If you click on more detail of the video, that is, on the (+) you will observe that there is an overflow, a total disorder when you expand in the detail of the video, the preview of the time of the video , the play image, everything overflows, moves.

Now in the text of the video detail it does not have a margin a set width the text is hidden.

When making responsive the detail of the text is not shown, it is hidden in its entirety, showing a certain part of the text.

In this image I show the errors, when executing my code you will see the problem that I have mentioned.

The solution, ideally what I want is that my code is displayed in this way as I show in this image

How can I correct the mentioned errors, fix them as shown in this image. is what I want to apply to my code?

full code

  jQuery(document).ready(function ($) {
$('.accordion').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");
$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('.panel').removeClass('show');
$this.parent().parent().find('.panel').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
});


$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.removeClass("active");

$this.next().slideUp(350);
  } else {
$this.addClass("active");

$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
  }
  });});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion.active,
.accordion:hover {
  background-color: #ddd;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 10px;
}

.accordion.active:after {
  content: "\2212";
}

.panel {
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.toogle {
  float: left;
}

.toggle:after {
  content: '\002B';
  margin-left: 5px;
}

.toggle.active:after {
  content: "\2212";
}

.inner {
  display: none;
  overflow: hidden;
}

ul .inner.show {
  /*display: block;*/
}

.label:empty {
  display: none;
}
.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover{
  background:#f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items:center;
  /*justify-content:space-between;*/
}

.play { 
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width:60%;
  white-space: normal !important;
}

.view-preview,.length {
  color: #000;
  text-align:center;
}

.view-preview{
  width:23%;
}

.length {
  width:10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Introducción</button>
<div class="panel">
  <div class="chapters">
<ul class="view">
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="vid.mp4">audio video audio video audio video</a><span class="toggle"></span>
        <ul class="inner">
          <li>Lorem ipsum dolor sit amet, Lorem ipsum Lorem ipsum.Integer varius est vitae iaculis suscipit. Integer sed rutrum lectus</li>
        </ul>
      </div>
      <div class="view-preview"><a href="vid.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
  <li>
    <div class="rows">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title"><a href="video2.mp4">audio video audio video audio video</a></div>
      <div class="view-preview"><a  href="video2.mp4">&nbsp;Vista Previa</a></div>
      <div class="length">&nbsp;02:34</div>
    </div>
  </li>
</ul>
  </div>
</div>

I have the list of links, of the index of 100% responsive videos adapted to the help of Risa__B .

In my previous question it was a big problem to adapt it, even though it was only a few small changes to the stylescss

I don't want the responsive adaptation to get lost and return to the same old problem, but that's not the problem for this purpose.

To the list of videos I want to be able to add an Expand to show and hide the contents as can be seen in the image in - Section 1 and add the same effect, one could say, by adding a description to each of the videos, which is Activate an arrow when a video contains a description and if there is no description, do not show the arrow.

Example:

How could I add the same functionality of the image example, to my video listing?

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover{
  background:#f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items:center;
  /*justify-content:space-between;*/
}

.play { 
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width:60%;
  white-space: normal !important;
}

.view-preview,.length {
  color: #000;
  text-align:center;
}

.view-preview{
  width:23%;
}

.length {
  width:10%;
}

<div class="chapters">
  <ul class="view">
   <li>
   <a class="rows" href="video.mp4">
   <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
   <div class="video-title">audio video audio video audio video</div>
   <div class="view-preview">&nbsp;Vista Previa</div>
   <div class="length">&nbsp;02:34</div>
   </a>
   </li>
   <li>
   <a class="rows" href="video2.mp4">
   <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
   <div class="video-title">audio video audio video audio video</div>
   <div class="view-preview">&nbsp;Vista Previa</div>
   <div class="length">&nbsp;02:34</div>
   </a>
   </li>
 </ul>
</div>

Line breaks in PHP "\n" with double quotes works perfectly.

echo "Primera linea php a separar de la segunda"."\n";

But with single quotes, it doesn't work

echo 'Primera linea php a separar de la segunda"."\n';

It throws the following error message

Parse error: syntax error, unexpected '\' (T_NS_SEPARATOR), expecting ',' or ';' in C:\xampp\jobs\index.php on line 38

Secure system access analyzes of different Google Payoneer platforms among other financial platforms.

In the following analyzes I found these characteristics:

• On the first failed attempt it shows the captcha code.
• After 5 attempts the user's account is blocked for 15 minutes.
• When you have access whether or not the fault history exists, you must answer a security question to continue.
• Does not allow double logging.

Other References: create secure login script

I have managed to fix my old code.

Note: Please edit my question to avoid possible duplicate question.

The corrections:

It ipwill continue to be blocked, it will not affect anything because being blocked ipwill only show the captcha code.

I have created a new fail_attempt table with the following columns: something like my idea.

id_fail_attempt   id_user   attempt   ip       datetime                 time
      1              1        5      ::1   2017-08-23 17:57:46   2017-08-23 18:12:46 

The following table login_attemptslists the failed attempts of theip

  id         ip        attempts        datetime               
  1         ::1           2       2017-08-23 17:57:46    

The boardusers

id   username   email   password   lastname  active
1     Hola      hola@    Hola        Hola      1

How can I insert in the table fail_attemptthe iduser, the failed attempts, the iptime in which the user will be blocked access and how to control the double login of the same user in the same system.

Full PHP code

How do I add new features and create a secure system?

login.php

<?php
session_start();
$message="";
$captcha = true;

//
$con =  @new mysqli('localhost', 'root', '', 'systemuser');

  if(count($_POST)>0 && isset($_POST["vcode"]) && $_POST["vcode"]!=$_SESSION["vcode"]) {
    $captcha = false;
    $message = "Los caracteres escritos no coinciden con la palabra de verificación. Inténtalo de nuevo.";
  }

  $ip = $_SERVER['REMOTE_ADDR'];

  //Bloqueamos la ip por un día
  $result = mysqli_query($con,"SELECT * FROM failed_login WHERE ip='$ip' AND date BETWEEN DATE_SUB( NOW() , INTERVAL 1 DAY ) AND NOW()");
  $row  = mysqli_fetch_assoc($result);
  //Obtenemos datos para comprar intentos y para resetear intentos por su ultimo fecha.
  $failed_login_attempt = mysqli_real_escape_string($con,$row['attempts']);
  //Liberamos memoria.
  mysqli_free_result($result);

  if(count($_POST)>0 && $captcha == true) {
    $username = mysqli_real_escape_string($con, $_POST["username"]);
    $password = mysqli_real_escape_string($con, $_POST["password"]);
    $username = htmlentities($username);
    $password = htmlentities($password);
    $save_passw = sha1($password);
    $sql = "SELECT * fROM users where username='$username' AND password='$save_passw' AND active='1' ";
    $query = mysqli_query($con, $sql);

    $rowU  = mysqli_fetch_assoc($query);
    $UsernamaDB = mysqli_real_escape_string($con, $rowU["username"]);
    $passwordDB = mysqli_real_escape_string($con, $rowU["password"]);

    if($failed_login_attempt <1) {
            //Si es su primer intento fallido, incluimos el primer registro en la BD
            $con->query("INSERT INTO failed_login (ip,attempts,date) VALUES ('$ip', 1, NOW())");
            } else {
                if($failed_login_attempt <2){
                //En caso de ya estar en la BD, sacamos el valor y agregamos +1
                $contador = $row['attempts'] + 1;
                $con->query("UPDATE failed_login SET attempts='$contador', date=NOW() WHERE ip = '$ip'");
            }
        }


        if (empty($_POST) === false) {
            $username = $_POST['username']; $password = $_POST['password'];
            if (empty($username) === true || empty($password) === true) {
                $message = "Es necesario introducir un nombre de usuario y contraseña";
             } elseif ($username != $UsernamaDB) {
                $message = "El 'Usuario' que has introducido no coincide. ";
             } elseif ($save_passw != $passwordDB) {
                $message = "Tu 'Contraseña' introducido no coincide. ";
             } elseif($save_passw == $passwordDB && $username == $UsernamaDB) {
                $_SESSION["id_user"] = 1;
                $con->query("DELETE FROM login_attempts WHERE ip = '$ip'");
             }
            }
        }
        if(isset($_SESSION["id_user"])) {
            header("Location:http://localhost/index.php");
        }
?>
<h1><?php if($message!="") { echo $message; } ?></h1>
<form name="frmUser" method="post" action="">
  <input type="text" name="username" placeholder="Usuario">
  <input type="password" name="password" placeholder="Contraseña">
  <!-- captcha-->
  <?php if (isset($failed_login_attempt) && $failed_login_attempt >= 1) { ?>
    <br><img src="image.php" id="phoca-captcha"/>
  <input name="vcode" type="text" placeholder="Codigo captcha">
   <?php } ?>
  <!-- fin-->
  <input type="submit" value="Iniciar sesión" id="button-login">
</form> 

How can I show the percentage in percent %of how much is the value that the product discount is being applied with the current price and the previous price.

Example:

If in the database I have the following records in the tableproducts

id_pro     price     price_old
  1        50.00      100.00

The next message to show on the card would be $50.00 / 50% discount

I perform the query as follows:

Note: The query code PHPis above theHTML

  if (isset($_GET['id'])){
    $id = $_GET['id'];
    $sql = "SELECT * FROM products WHERE url='".$id."'";
    $result = mysqli_query($con, $sql);

    if(mysqli_num_rows($result) > 0){
        while ($row = mysqli_fetch_array($result)) {
            $id = $row['id_pro'];
            $price = $row['price'];
            $price_old = $row['price_old'];
        }
    }
  }

I show the results of the query as follows, within any content HTML.

<?php echo $price; ?>

My idea is to be able to take the value of the two variables $priceand $price_oldthrough them show what percentage of discount is being made.

Note: Always taking into account whether or not there is a previous price registered in the table, some products will not have a previous price registered in that case there would not be a discount percentage in price_oldthe table columnproducts

My idea would be something like this, but I have problems in the approach of the code PHPto show the percentages taking into account the current price and the previous price.

}else{
  echo "Aquí el porcentaje -> 50% de descuento";
}else {
  echo "No existe descuento -> En este caso no se mostrara un texto, quedara un echo vació";
}

How can I prevent it from overlapping and overlapping other links when there is a link title that is too long and preserve the distance of the Preview links and the 02:20 timing of the audio & videono matter how short or long the link is.

What I want to achieve.

When adapting to mobile / responsive devices, how to respect your spaces of the content of the links without overlapping one after the other, avoid cluttering the links, in the same way keep the Preview distance and the 02:20 time of the audio & videowithout matter how long or short the link is.

What I want to achieve.

UPDATE Comment by Diego Martin

The problem will be shown to the naked eye since my code is executed, it can be seen that in the full screen of the browser with links that are too long, it protrudes from what is desired of the images. In this case, the ideal would be that it be attached as the first image, now changing from size (responsive) of the browser none of the structured links respect their space ideally it would be docked as the second image.

My layout code about list audio& linksvideo

.views {
  width: 100%;
  border-top: none;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.views .view-links {
  list-style-type: none;
  margin: 0;
  padding: 0 0px;
  font-size: .99em;
}

.views .view-links li {
  padding: 9px 20px 9px 20px;
  border-top: 1px solid rgb(230, 230, 230);
}

.views .view-links li div {
  display: inline;
}

.views .view-links li div a {
  text-decoration: none;
  display: block;
}

.view-preview {
  color: #000;
  float: right;
  left: -160px;
  position: relative;
  top: -16px;
}

.length {
  color: #000;
  float: right;
  position: relative;
  top: -16px;
  /*-ms-transform: translateY(-90%);
  -webkit-transform: translateY(-90%);
  transform: translateY(-90%);*/
}

<div class="views">
  <ul class="view-links">
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video
          audio video audio video audio video audio video audio video audio video audio video audio video audio video
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
    <li>
      <div>
        <a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
          <div class="length">&nbsp;02:34</div>
        </a>
      </div>
    </li>
  </ul>
</div>

I have the idea of ​​displaying in the query results the name of the category that the product is related to.

This design is suggested to me by @Lixus in his comment...

This table layout would be ideal for just one related product category.

Category table

id_cat       title     
  1           PHP
  2         MYSQLI
  3         JQUERY         

But if the product is related to more than one category, the ideal would be to add the product to the categoryid_pro table

id_cat       title    id_pro   
  1           PHP       1
  2         MYSQLI     NULL
  3         JQUERY     NULL
  4          HTML       1

And so to be able to show a result in this way:

product table

  id_pro          title          categoria
    1           live glypicon        1

As can be seen in the categories table in the column id_prois the number 1that is based on the number 1of the productsid_pro table .

And in the products table is the number 1in the column categoriathat is referring to the name of the category it belongs to.

NOTE: I don't know if the design of the database and the tables are correct, but my idea is to be able to show the following result of the image. Bearing in mind that the product may be related to more than one category as shown in the first image where there were two categories for the same product PHP&HTML

My query:

function newpro(){
    global $con;
    $sql = "Select * from products where id_product and active='1' order by id_product ASC limit 1";
    $rows = mysqli_query($con, $sql);
    $new_products = mysqli_num_rows($rows);

    if($new_products==0){
        echo"No hay cursos nuevos para mostrar";
    }else{
        while ($pro = mysqli_fetch_array($rows)) {

            for ($i=0; $i<8; $i++) {

            echo '<div class="four-column middle-pro">
        <div class="frame-item">
          <a href="'.$pro['url'].'">
            <img src="assets/img/upload/image/'.$pro['image'].'" alt="'.$pro['title'].'" />
          </a>
          <div class="all-description">
            <div class="women">
              <h2><a href="#">'.$pro['title'].'</a></h2>
              <h3><a href="">'.$pro['subtitle'].'</a></h3>
              <h6><a href="">AQUI QUIERO MOSTRAR LA CATEGORIA</a></h6>
            </div>
            <div class="price align-right">
              <p><label>$'.$pro['price_old'].'</label><em class="item_price">$'.$pro['price'].'</em></p>
                          <!--<div class="clearfix"></div>-->
            </div>
            <!--<div class="center add">
              <a href="#">más información...</a>
            </div>-->
          </div>
        </div>
      </div>';
        }}
    }
}

I need to display the products from the second product onwards. To get the idea, I show an example of the database layout.

id     product
1       One
2       Two
3       there
4       Four
5       Five

I need to show the products starting from id -> 2onwards.

I have tried this way, but it only shows me the product of id -> 2and not the rest of the products.

Select * from products where id = 2 and active='1' order by id ASC limit 16

In Google Chrome there is a wide variety of extensions to download background videos or at the same time use the developer tools and sources , you can view the links with the website.

But for some reason there is a chain encoding with javascript that does not allow to find the video, it is a very good technique.

In this link you can better visualize the code, and in this link you can visualize the background video.

Can you explain to me how you can read a javascript encoding or string

!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("object"==typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function b(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;g>h&&(c=f[h],-1===c.search(/^(http|https|ftp):\/\//)&&-1!==c.search(":"));h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||("false"===e?!1:e)),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function c(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;b>d;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function d(b,c){var d=function(){c(this.src)};a('<img src="'+b+'.gif">').load(d),a('<img src="'+b+'.jpg">').load(d),a('<img src="'+b+'.jpeg">').load(d),a('<img src="'+b+'.png">').load(d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d,this.init()}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0};e.prototype.init=function(){var b,e=this,g=c(e.settings.position),h="";e.$wrapper=a("<div>").css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":g.x+" "+g.y}),b=e.path,"object"==typeof e.path&&(e.path.poster?b=e.path.poster:e.path.mp4?b=e.path.mp4:e.path.webm?b=e.path.webm:e.path.ogv&&(b=e.path.ogv)),"detect"===e.settings.posterType?d(b,function(a){e.$wrapper.css("background-image","url("+a+")")}):"none"!==e.settings.posterType&&e.$wrapper.css("background-image","url("+b+"."+e.settings.posterType+")"),"static"===e.$element.css("position")&&e.$element.css("position","relative"),e.$element.prepend(e.$wrapper),"object"==typeof e.path?(e.path.mp4&&(h+='<source src="'+e.path.mp4+'.mp4" type="video/mp4">'),e.path.webm&&(h+='<source src="'+e.path.webm+'.webm" type="video/webm">'),e.path.ogv&&(h+='<source src="'+e.path.ogv+'.ogv" type="video/ogv">'),e.$video=a("<video>"+h+"</video>")):e.$video=a('<video><source src="'+e.path+'.mp4" type="video/mp4"><source src="'+e.path+'.webm" type="video/webm"><source src="'+e.path+'.ogv" type="video/ogg"></video>'),e.$video.prop({autoplay:e.settings.autoplay,loop:e.settings.loop,volume:e.settings.volume,muted:e.settings.muted,defaultMuted:e.settings.muted,playbackRate:e.settings.playbackRate,defaultPlaybackRate:e.settings.playbackRate}).css({margin:"auto",position:"absolute","z-index":-1,top:g.y,left:g.x,"-webkit-transform":"translate(-"+g.x+", -"+g.y+")","-ms-transform":"translate(-"+g.x+", -"+g.y+")","-moz-transform":"translate(-"+g.x+", -"+g.y+")",transform:"translate(-"+g.x+", -"+g.y+")",visibility:"hidden"}).one("canplaythrough."+f,function(){e.resize()}).one("playing."+f,function(){e.$video.css("visibility","visible"),e.$wrapper.css("background-image","none")}),e.$element.on("resize."+f,function(){e.settings.resizing&&e.resize()}),e.$wrapper.append(e.$video)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$video[0].videoHeight,b=this.$video[0].videoWidth,c=this.$wrapper.height(),d=this.$wrapper.width();this.$video.css(d/b>c/a?{width:d+2,height:"auto"}:{width:"auto",height:c+2})}},e.prototype.destroy=function(){this.$element.off(f),this.$video&&this.$video.off(f),delete a[f].lookup[this.index],this.$element.removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize."+f,function(){for(var b,c=a[f].lookup.length,d=0;c>d;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload."+f,function(){return!1}),a(document).find("[data-"+f+"-bg]").each(function(b,c){var d=a(c),e=d.data(f+"-options"),g=d.data(f+"-bg");d[f](g,e)})})});

I am parsing my website with some tools like for example validator.w3 among others to get a much faster execution of the website without errors or execution delays.

The Google PageSpeed ​​Insights tool tells me to specify browser cache by displaying the following warning message.

Specify browser cache Setting an expiration date or maximum age in the HTTP headers of static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

It details a number of things to correct, based on the theme, it tells me in each image / css / js that I must specify the cache in each of them.

Searching Stack Overflow among other articles indicate an example like this:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>

Now if the cache spec is based on that example it would have a too long .htaccess I have too many images on the website.

I found another example in English SO much more optimized and very simple, but I don't know if it is valid.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 year"

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"
    </FilesMatch>
</IfModule>

I have a file directory js/css/imgstructured like this:assets/css/style.css

Meanwhile my .htaccess

# Activamos mod_rewrite
RewriteEngine on

# Seleccionamos el directorio base     para el RewriteRule
RewriteBase /project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/" y subdirectorios previstos
RewriteCond %{REQUEST_URI} assets/(css|fonts|js|img)/(.+)$
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ assets/%1/%2 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ video.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]

Now my question is? How to specify browser cache in a more optimized way.

The problem with adding pluginor video URLs to my website is that the video content of the URLs or the Plugins generates external links to another website, so I wanted to try to see if I jQuerycould prevent these links from being generated.

The idea is to comment the links <!-- -->or remove them but not all, you could create a condition that all links that do not have the id="nobloquear"comment or remove them using jQuery

I'm not very proficient in jQuery very basic knowledge.

The only thing that has been achieved is to be able to eliminate a specific content of the document of the page, that is, the content of the class .deleteeliminates only if there is a word or a specific content in this example it will be the word hello .

 $( ".delete" ).remove( ":contains('Hello')" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div>
     <div class="delete">Hello</div>
     <div class="delete">No se elimina porque este div no existe la palabra hola en inglés, a pesar de ser la misma clase .delete</div>
  </div>

This example doesn't really delve into my idea, which is to remove or comment out the links that the class doesn't have: class="nobloquear"

Could you help me

Following the recommendations of Google on redirección 301which it indicates in its articles that it can happen that the pages are available both with a slash / slash at the end (/)and without it. For example:

• http://www.example.com/pagina
• http://www.example.com/pagina/

If so, in this case it is a duplicity that can only be resolved by redirecting one version to the other.

Now my question?

• How to redirect all pages without slash/slash to version with trailing slash/slash?

I tried adapting this code to my file .htaccessbut there were problems adapting it.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule (.*) http://www.example.com/$1/ [R=301,L,QSA]

Important: In my file , .htaccessthe URLs work both ways without problems, both with a slash/slash at the end (/)and without it.

My .htaccess file

# Activamos mod_rewrite
RewriteEngine on

# Seleccionamos el directorio base     para el RewriteRule
RewriteBase /project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/" y subdirectorios previstos
RewriteCond %{REQUEST_URI} assets/(css|fonts|js|img)/(.+)$
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ assets/%1/%2 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ video.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]

On the other hand I do not know if it is correct to allow or not to enter the specific URL example: example.com/online.php or redirect to the personalized URLexample.com/online/video/hd/free/

I have a website that is too large to edit the URLs of the styles cssand files js, imágenesit would take too much time.

I am testing working on localhost

localhost/project/index.php

The friendly URLs I want:

localhost/project/index/

If the user modifies the URLs like this:localhost/project/index

redirect to:localhost/project/index/

Redirect any modified URLslocalhost/project/online/video/hd/free without a slash to URLs with a trailing slashlocalhost/project/online/video/hd/free/

from plain urls

localhost/project/online.php

Show it like this:

localhost/project/online/video/hd/free/

I have tried with these Examples: .htaccess

Note: in these first few examples .htaccessthe styles css, and files js, imágenesare shown without any problem.

#Eliminar la extensión php/html
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php
#RewriteRule ^([a-zA-Z0-9-/]+)$ index.php

RewriteRule ^online-video-en-hd-gratis$ online.php [L,NC,QSA]

Result:

http://www.example.com/index
http://www.example.com/online-video-en-hd-gratis

The problem is to use a trailing slash /or several additional ones /../when using the slashes the styles are lost css, among the other files js, imágenes.

Example one: (adding a trailing slash /)

http://www.example.com/index/

Example two: (adding multiple bars /)

RewriteEngine on
RewriteRule ^online/video/hd/aventuras/$ online.php [L,NC,QSA]

Result:

http://www.example.com/online/video/hd/aventuras/

Important:

I have looked at this website http://crazycafe.net/demos/seo/ and it's source code, the styles cssare kept like this: <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">without adding an absolute url to the styles cssand their files jsand they imagenesload without problem.

I found this question on Stack Overflow on Inlges, how to preserve CSS styles.

Some of his examples were:

RewriteRule ^images/(.+)?$ images/$1 [NC,L]
RewriteRule ^js/(.+)?$ js/$1 [NC,L]
RewriteRule ^topnav/(.+)?$ topnav/$1 [NC,L]
RewriteRule ^common-style\.css$ common-style.css
RewriteRule ^jquery\.js$ jquery.js
RewriteRule ^script/js/(.+)?$ script/$1 [NC,L] 

But I really don't quite understand the secrets of .htaccess

My file directory( folder ) is:

assets/css/style.css
assets/js/app.js
assets/fonts/icons/image.png
assets/fonts/ttf/roboto.ttf
assets/img/system/image.png
assets/img/logo.png

Now my question is?

There is a possibility to fix these errors directly from the .htaccess file without having to change the files path css, js, imágenesto an ( absolute ) path.

I hope this question is not considered too long, please edit my question to MCVE recommendations