2

Tengo un pequeño inconveniente... Desarrollo un pequeño CRUD con PHP puro, en el cuál trato de generar una URL Amigable por medio del .htaccess .

La URL Amigable es para realizar una búsqueda en un formulario. Deseo que la URL se vea de la siguiente forma:

De

misitioweb.com/buscar?b=jose

a

misitioweb.com/buscar/jose

Hasta ahora he logrado obtener el dato enviado por GET, pero no logro definir bien la estructura de la URL deseada. (Tengo una sección template que trae todo el contenido de la página de búsqueda ?content=buscar).

HTML

<form method="GET" action="/panel-control-mysql/buscar">        
    <input type="search" id="buscar" placeholder="Escribe algo..." name="buscar" >
    <button type="submit">Buscar</button>
</form>

.htaccess

RewriteRule panel-control-mysql/buscar$ ?content=buscar [QSA]
RewriteRule panel-control-mysql/buscar/(\w+)  ?buscar=$1

Saludos.

1 respuesta 1

2

Cuando envías formularios por método GET automáticamente se agregan datos en URL ?variable=valor, tal vez pudieras manejar alguna redirección en .htaccess, algo como:

# Con botón submit en URL
RewriteRule ^/panel-control-mysql/buscar?buscar=(.*)&(.*)$ /panel-control-mysql/buscar/$1 [L,NC,R=301]
# Sin botón submit en URL
RewriteRule ^/panel-control-mysql/buscar?buscar=(.*)$ /panel-control-mysql/buscar/$1 [L,NC,R=301]

Explicación:

  • El formulario tiene como acción la URL /panel-control-mysql/buscar
  • Se va a agregar el campo buscar y, probablemente, el botón submit a la URL
  • En la primera regla se captura con valor de buscar, que se toma después con $1, y botón submit, que se ignora. En la segunda no se consideran variables adicionales
  • En ambos casos, se va a redirigir a la URL que deseas con [L,NC,R=301]
    • L Aplica la redirección
    • NC Es para no diferenciar mayúsculas y minúsculas, tal vez no sea necesario, pero tampoco afecta el rendimiento
    • R=301 Es para enviar encabezado de redirección permanente, para que los motores de búsqueda no indexen la URL original con parámetros

Para saber más de las opciones del módulo Rewrite, visita la documentación.

Otra opción es capturar el evento submit del formulario en Javascript y desde ahí hacer las modificaciones necesarias:

// Obtener formulario
let frmBusca = document.querySelector('#frm-buscar');
// Asignar evento
frmBusca.addEventListener('submit', e => {
     // Evitar envío de formulario
     e.preventDefault();
     // Obtener valor desde campo y eliminar espacios ' jose ' quedaria como 'jose'
     let busca = frmBusca.querySelector('input').value.trim();
     // Verificar que no esté vacío
     if(busca == '') {
         alert('Teclea algo para buscar');
         return;
     }
     // Cambiar a minúsculas y remplazar espacios con guiones
     // 'Jose Perez' quedaría como 'jose-perez'
     busca = busca.toLowerCase().replaceAll(' ', '-');
     // Crear la nueva URL:
     let url = '/panel-control-mysql/buscar/' + busca;
     // Puedes borrar la siguiente línea, es solo para ver que genera la URL correcta
     console.log(url);
     // Descomenta la siguente línea para ir a la página de búsqueda
     // location.href = url;
});
<!-- Agrega ID al formulario para obtenerlo más fácilmente -->
<form method="GET" action="/panel-control-mysql/buscar" id="frm-buscar">        
    <input type="search" id="buscar" placeholder="Escribe algo..." name="buscar" >
    <button type="submit">Buscar</button>
</form>

11
  • Muchas gracias por la respuesta. En la primera parte de la respuesta, en el código del RewriteRule, las URLs no deberían estar al revés? Para que el resultado final fuera misitioweb.com/buscar/jose. O crees que se tendría que cambiar la URL del Action del formulario?
    – EDG_DGK
    el 9 mar. 2022 a las 19:38
  • A que te refieres con Con o Sin botón submit en URL ?
    – EDG_DGK
    el 10 mar. 2022 a las 4:48
  • Sigo sin tener el resultado esperado, sea como sea sigo recibiendo en la URL ?buscar=valor
    – EDG_DGK
    el 10 mar. 2022 a las 5:36
  • Probé con el script de Javascript (generando la URL y redireccionándolo), e ingresando esto en el .htaccess RewriteRule panel-control-mysql/buscar/(\w+) ?content=buscar?buscar=$1, y nada.
    – EDG_DGK
    el 10 mar. 2022 a las 5:46
  • 1
    @EDG_DGK, funcionan igual, pero me gusta más querySelector() porque te permite usar selectores CSS como los declaras en hojas de estilo y, además, son menos mayúsculas para escribir.
    – Triby
    el 11 mar. 2022 a las 15:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.