Dúvida para gravar para URL amigável

Marxrj · Setembro 9, 2018

Galera, estou com uma dúvida mas não sei direito por onde começar, Preço gravar um nome no banco de dados para URL amigável, então se quero gravar no banco um nome com acento e sobrenome. Exemplo: Maísa Gonçalves, eu tenho de gravar também em outro campo maisa-goncalves.

Então eu teria de ter o campo nome no bd e outro sendo nome_url por exemplo, mas como consigo gravar esse segundo nome com minusculas, sem acentos e com o traço?

washalbano · Setembro 9, 2018

Olá!
Normalmente esse campo é chamado slug.
Você trata a string do nome(converter em minúsculas, remover acentuação, trocar espaços por sinal de menos), para gerar uma slug e só então persistir no database.
Houve uma discussão aqui mesmo sobre isso, veja se te ajuda:

https://forum.imasters.com.br/topic/456141-resolvido função-para-criar-slug/

Marxrj · Setembro 9, 2018

Vou dar uma olhada. Obrigado

Marxrj · Setembro 9, 2018

Cara, até consegui, mas não sei porque no sistema ele da esse erro,
ele faz a separação na boa e tudo mais, mas se eu colocar um acento ele coloca o traço

Se eu colocar Maria Andrade fica maria-andrade. Mas seu eu coloco Maria Caçula
e da maria-ca-ula se fosse Maria Angélica ele da maria-ang-lica

O código: Funciona bem assim, mas quando coloco no sistema da esse erro,
não sei se pode ser alguma codificação ou incompatibilidade com outro arquivo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Teste gravar URL</title>
        
        <script src="src/slugify.js"></script>
        <script src="src/slugify_test.js"></script>
        <!-- Removing access to jQuery and $. But it'll still be available as _$, if
             you REALLY want to mess around with jQuery in the console. REMEMBER WE
             ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
        <script>window._$ = jQuery.noConflict(true);</script>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		  <script src="src/slugify.min.js"></script>
		  <script src="src/speakingurl.min.js"></script>
		  
<script>
jQuery(function($) {
  $('#slug-target,#slug-target-span').slugify('#slug_source'); // Type as you slug
});
</script>
	
    </head>
    <body>
        <div>
            <input type ="text" value="" id="slug_source"/>
        </div>
        <div>
            <input type ="text" value="" id="slug_target"/>
        </div>
        
    </body>
</html>

tetsuo · Setembro 9, 2018

Olá!
Mostre-nos o trecho onde você trata os caracteres especiais

Marxrj · Setembro 9, 2018

Está nos arquivos js, então é complicado eu ver isso, mas como eu disse, ele está funcionando perfeitamente, porém no meu sistema da o erro.Estou vendo o que pode haver de errado.

Omar~ · Setembro 10, 2018

Veja... nunca se deve deixar a responsabilidade de caracteres no javascript.

Qualquer um pode pressionar ctrl+shifit+i e editar-lo.

Não que não possa usar como em algo para facilitar, deixar mais agradável a experiência do usuário na aplicação, para isso usamos a própria máquina do usuário através do javascript. Mas quando for passar para o back-end onde a "mágica acontece" sempre quem deve fazer as coisas é o sistema que trabalha do lado do servidor.

Fiz algo só para explicar (Não testei, pois estou escrevendo direto aqui, mas funciona)

<?php
function formartarTexto($string) {
    $arr = [];
    $arr['A'] = 'áÁéÉíÍóÓúÚ çÇ';
    $arr['B'] = 'aAeEiIoOuU-cC';
    $retorno = strtr(utf8_decode($string), utf8_decode($arr['A']), $arr['B']);
    return $retorno;
}

$nome = 'Maísa Gonçalves'; // Nome para formatar

echo formartarTexto($nome); // A saída será Maisa-Goncalves

echo strtolower(formartarTexto($nome)); // A saída será maisa-goncalves

Se deu para entender criei um array com 2 índices A e B. Onde quando existirem os caracteres do A serão substituídos pelos do índice B. No mais o resto você ajeita da melhor forma que desejar.

Marxrj · Setembro 10, 2018

Entendi, só não funcionou aqui, não sei se implantei direito no input

        <div>
            <input type ="text" value="" id="nome"/>
        </div>
        <div>
            <input type ="text" value="" id="nome2"/>
        </div>

Pois no caso tenho de inserir a cópia no nome2, mas quando escrevo no campo 1 o nome, nada acontece

Omar~ · Setembro 10, 2018

Como disse, você pode usar o javascript para facilitar ou interagir com o usuário.

Ou seja tenho o input 1 o que eu digitar ele também é escrito no 2.

Mas pelo que entendi sua pergunta era para gravar o nome sem acento e sem espaço no banco, então mostrei uma função que vai tratar o campo (só usei poucos caracteres de demostração) para fazer tal coisa quando o sistema do servidor é executado.

A propósito não vejo razão para ao digitar em um input escrever em outro a mesma coisa só que com texto formatado.

Fiz alguma brincadeira aqui, não está completa pois agora não estou me recordando como barrar outras teclas sem apelar para muitas camadas de verificação.

Veja;

Isso seria o javascript

Spoiler


var Exemplo = function (inputEntrada, inputSaida) {
    var entrada = document.getElementById(inputEntrada);
    var saida = document.getElementById(inputSaida);
    entrada.value = null;
    saida.value = null;

    entrada.addEventListener('keypress', formatar, false);

    function formatar(e) {
        var tecla = e.key;
        var formatado =
                tecla.toString()            // qualquer entrada deve ser STR mesmo que seja INT
                .replace(/[ÁáàãÀÂÃ]/, 'a')  // letra A acentuada
                .replace(/[ÉéÈèÊê]/, 'e')   // letra E acentuada
                .replace(/[ÍíÌìÎ]/, 'i')    // letra I acentuada
                .replace(/[ÓóÒòÔôÕõ]/, 'o') // letra O acentuada
                .replace(/[ÚúÙù]/, 'u')     // letra U acentuada
                .replace(/[Çç]/, 'c')       // letra C acentuada
                .replace(/^-+/, '')         // traços para nada
                .replace(/\s+/g, '-');      // todos espaços para traço
        saida.value += formatado.toLowerCase();
    }
};

Então digamos que esse seja o html

Spoiler


<input type ="text" id="input_A"/>

<input type ="text" id="input_B"/>

<script>
    var filtro = new Exemplo('input_A', 'input_B'); // Chamamos a classJS passando os IDs dos inputs
</script>

Só repassando, como disse acima que não vejo utilidade/benefício de tal ação, uma vez que um usuário mal intencionado com certeza porque esses não faltam por aí, vai abrir o inspetor > editar > e submeter esses dados modificados como ele bem quis para seu sistema.

O que deve sempre entrar em ação é o tratamento de todo tipo de dado que entra na sua aplicação.

Se fosse meu caso só pegaria o input nome da pessoa e criaria no back os dados que desejo para minha aplicação a partir desse nome que ela inseriu já tratados e limpos... bla... bla... bla....

Enfim fiz só um básico do que seria a função que executaria esse negócio de inserir no input e tal.

No mais vi que está usando jQuery que uma coisa que passo longe, porque detesto.

Marxrj · Setembro 10, 2018

Resolvi!!! Agradeço a ajuda de todos

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
		<script src="jquery.slugify.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			$().ready(function () {
				$('.nome2').slugify('#nome');
			
				var pigLatin = function(str) {
					return str.replace(/(\w*)([aeiou]\w*)/g, "$2$1ay");
				}
			
				$('#pig_latin').slugify('#nome', {
						slugFunc: function(str, originalFunc) { return pigLatin(originalFunc(str)); } 
					}
				);
			
			}); 
		</script>

<input type="text" name="nome" value="" id="nome">
  
<input type="text" name="nome2" id="nome2" value="" class="nome2">

Arquivado

Dúvida para gravar para URL amigável

Recommended Posts

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tetsuo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marxrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Fóruns

Tempo Real

Informação importante