CABO DE ENXADA => Cabo de Enxada

Frank K Hosaka · Abril 2, 2022

<?php
// o nome desse scrypt é padronizadescricao.php
// essa rotina transforma descrição do tipo "CABO DE ENXADA" em "Cabo de Enxada"
echo "<form action='padronizadescricao.php'>";
echo "<input name='texto'>";
echo "</form>";
$texto = $_GET['texto'] ?? null;
if (empty($texto)) {;} else {
	echo "$texto<br>";
	$texto = strtolower($texto);
	$vetor = explode(" ",$texto);
	echo $texto; 
	echo "<pre>"; print_r($vetor); echo "</pre>";
	foreach ($vetor as $key => $subtexto) { 
		if (in_array($subtexto,["de","da","do"])) {;} else
				{ $vetor[$key] = ucfirst($subtexto);
				echo "$subtexto => $vetor[$key]<br>"; }}
	$texto = implode(" ",$vetor);
	echo "<br>-----------<br>";
	echo $texto;}

lowys · Abril 3, 2022

Muito legal!
Vou deixar minha sugestão aqui também!

Segue formulário de exemplo com dois inputs
o de cima é formatado em tempo real, enquanto o user digita
o input de baixo não é formatado no frontEnd, somente no backend: em php

Submeta o form sem preencher nada e veja o resultado
Depois preencha os dois campos comente com caracteres maiúsculos, submeta novamente o form e veja o resultado.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Padroniza Descrição</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body>
<div class='container'>
  <h1>Padroniza Descrição</h1>
  <form action='api' method='post'>
    <div class='row'>
      <div class='col-12'>
        <label for=''>Descrição <small>(formatada em tempo de digitação)</small></label>
        <input name='descricao' class='form-control' data-js='padroniza'>
      </div>
      <div class='col-12 my-3'>
        <label for=''>Description <small>(sem formatação frontEnd)</small></label>
        <input name='description' class='form-control'>
      </div>
      <div class='col-12 text-end'>
        <button class='btn btn-success'>Enviar</button>
      </div>
    </div>
  </form>
  <div class='row py-5'>
    <div class='col response'></div>
  </div>
</div>
<script src='assets/js/app.js'></script>
</body>
</html>

app.js

const eForm = document.querySelector('form')
const eInput = eForm.querySelector('[data-js="padroniza"]')
const eResponse = document.querySelector('.response');

const maskIt = {
  padroniza(e){
    const maskedText = this.value
      .toLowerCase()
      .replace(/([a-z\u00E0-\u00FC]{4,})/g, function (letter) {
        return letter.charAt(0).toUpperCase() + letter.slice(1)
      })

    this.value = maskedText
  },
}

eInput.addEventListener('input', maskIt.padroniza)
eForm.addEventListener('submit', async (e) => {
  e.preventDefault()

  const formData = new FormData(eForm);
  const response = await fetch(eForm.action+'/index.php', {
    method: eForm.method,
    body: formData
  });

  const jsonData = await response.json();

  eResponse.innerHTML='';
  const eMessenger = document.createElement('code')
  eMessenger.classList.add(jsonData.type)
  eMessenger.innerText = JSON.stringify(jsonData, null, 2)
  eResponse.appendChild(eMessenger)
})

api/index.php

<?php
// essa rotina transforma descrição do tipo "CABO DE ENXADA" em "Cabo de Enxada"
  if (isset($_POST['description']) && !empty($_POST['description'])) {

    $formattedDescription = explode(' ', ucwords(strtolower($_POST['description'])));

    foreach ($formattedDescription as $index => $word) {
      if (strlen($word) < 4) $formattedDescription[$index] = strtolower($word);
    }

    $formattedDescription = implode(' ', $formattedDescription);

    die(json_encode([
      'type'        => 'text-success',
      'message'     => 'Description was receiver',
      'description' => $_POST['description'],
      'formated'    => $formattedDescription
    ]));

  }

  die(json_encode([
    'type'    => 'text-danger',
    'message' => 'Description is missing'
  ]));

Frank K Hosaka · Abril 5, 2022

Isso é coisa de profissional!

O problema é que eu não entendo nada de HTML e CSS, você pode notar que os meus scripts são pobres e bem rudimentares. A minha preocupação é fazer com que tudo caiba dentro do celular, de preferência no modo retrato. Enfim, estou fazendo só gambiarra com o PHP.

Por exemplo, eu chamei index.html de _3.php, app.js de _2.php e api de _1.php. É óbvio que eu precisei fazer um monte de martelada. No _3.php mudei o <form action='_1.php' method='post'> bem como <script src='_2.php'>. Certamente, isso é uma tremenda violação da boa prática de programação, claro que a principal vítima sou eu mesmo, mas como o computador aceita qualquer coisa, eu vou dando asas para as minhas fantasias.

Gostei do CSS da formatação da digitação em tempo real, ele é muito engenhoso. Também gostei do api (eu chamei de _1.php), não sabia que o php podia chamar o json com o verbo die e apresentar a resposta na mesma tela do front-end. Isso abre um enorme universo de possibilidades, uma vez que é impossível fazer paineis na tela só com o PHP.

Enfim, quero agradecer pelos códigos, certamente isso me incentiva a estudar o HTML e o CSS.

lowys · Abril 5, 2022

👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
Um dia bom é o dia em aprendemos algo novo!

Entrar

CABO DE ENXADA => Cabo de Enxada

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades