Ticker

6/recent/ticker-posts

Admitir caracteres especiales en PHP

Cómo solucionar el problema de los caracteres especiales que el HTML de la página o sitio (front-end) web, como estándar desde html está preparado para colocar todos los símbolos y tildes que necesitemos,  en base a las siguientes codificaciones:

Códificación HTML para las tildes y eñes:

  • á -> á
  • é -> é
  • í -> í
  • ó -> ó
  • ú -> ú
  • ñ -> ñ
  • à -> à
  • è -> è
  • ò -> ò

Con la lista de codificación se logra visualizar todos los caracteres especiales correctamente, sin embargo, HTML 5 nos facilita la etiqueta <meta charset="UTF-8"que es impriscindible para definir la codificación que tendrá la página o sitio web, es decir, si definimos el valor de utf-8 se mostrarán símbolos como la "ñ", "ç" o los acentos correctamente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="es">  
<head>    
    <title>UTF 8</title>    
    <meta charset="UTF-8">
    <meta name="title" content="Utf Tips">
    <meta name="description" content="Admitir caracteres especiales en PHP">    
    
</head>  
<body>    
    <header>
        <h1>Admitir caracteres especiales en PHP</h1>      
    </header>    
    <nav>
        <a href="http://blog.hadsonpar.com">Tutoriales HadsonPar</a>
    </nav>

    <section>      
        <div class="container">    
       
       <div class="title-home">
          <div class="text-center p-5">
              <h2>Learning Bootstrap</h2>
              <p>Lo que aprenderas en el curso</p>
          </div>
        </div>

          <div class="col-12">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">

                <h3>Elaboramos la primera versión de la base de datos del CMS</h3>
                <p>Desarrollo de una base de datos para la configuración y administración de un sistema de gestión de contenidos o también conocido por las siglas en inglés como CMS (content management system).</p>

                <span>6 Horas</span>
                <span>1 Certificado de finalización</span>

                <div class="text-button">
                  <a href="#">Suscríbete al curso</a>
                </div>
                
              </div>              
            </div>
          </div>
        
      </div>

    </section>

    <aside>
        <h3>Testimonios</h3>
        <p>Me gusta mucho esta página.</p>
    </aside>

    <footer>
        <h4>Redes sociales</h4>
        <a href="https://www.facebook.com/hadsonpar">Facebook</a>
        <a href="https://github.com/Hadsonpar">GitHub</a>
        <a href="https://twitter.com/hadson_paredes">Tiwtter</a>
    </footer>
</body>  
</html>


HTML con <meta charset="UTF-8">



Admitir caracteres especiales en PHP

Ahora bien, que pasa si las información a mostrar en el frontend (desde HTML) son datos que se obtienen desde la base de datos como MariaDB o MySQL, es normal aplicar ciertas configuración en la base de datos para soportar caractaeres especiales al momento de realizar las consultas y devolver los datos a las etiquetas del HTML, sin embargo, que pasa en el caso que no se exista las configuraciones necesarias, una de las maneras más sencillas es declarar header('Content-Type: text/html; charset=ISO-8859-1') en la página a mostrar.


Texto capturado desde la base de datos sin header('Content-Type: text/html; charset=ISO-8859-1')


Adicionar el código charset=ISO-8859-1' en la página HTML para capturar los caracteres especiales desde la base de datos:


<?php
    header('Content-Type: text/html; charset=ISO-8859-1');
?>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!-- Adicionar la pagina php que contiene la conexión a la base de datos -->
<?php require 'dbconfig.php'; ?>

<?php
    header('Content-Type: text/html; charset=ISO-8859-1');
?>

<!DOCTYPE html>
<html lang="es">  
<head>    
    <title>ISO-8859-1</title>    
    <meta charset="UTF-8">
    <meta name="title" content="Utf Tips">
    <meta name="description" content="Admitir caracteres especiales en PHP">    
    
</head>  
<body>    
    <header>
        <h1>Admitir caracteres especiales en PHP</h1>      
    </header>    
    <nav>
        <a href="http://blog.hadsonpar.com">Tutoriales HadsonPar</a>
    </nav>

    <section>      
        <div class="container">    
       
       <div class="title-home">
          <div class="text-center p-5">
              <h2>Learning Bootstrap</h2>
              <p>Lo que aprenderas en el curso</p>
          </div>
        </div>

          <div class="col-12">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">

                <?php 
                    $sql = mysqli_query($con, "SELECT websection_title, websection_subtitle, websection_text_one, websection_text_two, 
                                                      websection_button_url, websection_button_text FROM websection WHERE websection_id = 16");

                    if(mysqli_num_rows($sql) != 0){
                        $row = mysqli_fetch_assoc($sql);
                        echo '
                        <h3>'.$row['websection_title'].'</h3>
                        <p>'.$row['websection_subtitle'].'</p>

                        <span>'.$row['websection_text_one'].'</span>
                        <span>'.$row['websection_text_two'].'</span>

                        <div class="text-button">
                          <a href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a>
                        </div>
                        ';
                    }
                ?>                
              </div>              
            </div>
          </div>
        
      </div>

    </section>

    <aside>
        <h3>Testimonios</h3>
        <p>Me gusta mucho esta página.</p>
    </aside>

    <footer>
        <h4>Redes sociales</h4>
        <a href="https://www.facebook.com/hadsonpar">Facebook</a>
        <a href="https://github.com/Hadsonpar">GitHub</a>
        <a href="https://twitter.com/hadson_paredes">Tiwtter</a>
    </footer>
</body>  
</html>


ISO 8859-1 es la codificación de un solo byte que puede representar los primeros 256 caracteres Unicode y utf-8 es una codificación multibyte que puede representar cualquier Unicode; ambos codifican a nivel ASCII de la misma manera.

Publicar un comentario

0 Comentarios