Procurando um produto pelo celular

Frank K Hosaka · Agosto 28, 2022

Em 2020, eu consegui resolver o problema da conexão do notebook com o celular com a ajuda do WampServer e ngrok. Aqui em 2022, eu consegui hospedar o meu banco de dados na internet, mas ainda está em fase experimental. É uma ferramenta bem melhor que o meu notebook, mas eu recebo muitas mensagens de erro, que ainda não sei como consertar.

Faço tudo na base da tentativa e erro, e o resultado é um monte de tempo perdido e um monte de telas horrorosas (estou anexando duas telas, um sem Bootstrap, outro com Booststrap).

Nenhuma delas resolve o problema principal: como o usuário vai localizar um produto pelo celular se ele nem sabe ler e escrever?

Para resolver esse problema, o WampServer tem duas soluções chamada PHP e MySQL, um é para guardar todos os produtos e o outro é para mostrar os produtos na tela do celular através da linguagem HTML. A linguagem HTML é um conjunto imenso de marcadores, mas eu só sei usar 2% do marcador <input>. Graças ao fórum Script Brasil, eu consegui até arrancar um calendário de um <input>.

Com a ajuda do Google e o Script Brasil estou no pré-primário do HTML. O Google me ajudou a usar o marcador <link> e assim consegui trazer a beleza do Bootstrap para as minhas apresentações. Hoje, o Google me ensinou a diminuir o espaço das linhas da classe "table table-striped" do Bootstrap, usando esse outro marcador:

<style>tr {line-height: 25px; min-height: 25px;height: 25px;}</style>

No entanto, isso é só maquiagem. Desde 1999 eu venho fazendo a pergunta "como colocar os produtos na tela do celular?", e ontem finalmente encontrei a resposta no Google: jQuery AJAX Autocomplete – Country Example - Phppot, fiz o download na pasta wamp64/www/astudy, fiz o teste e ele não funcionou, não consegui ver nenhum país, mas eu fiz uma gambiarra aqui e ali para ver se ele podia mostrar os produtos, e eu consegui! O programa é muito engenhoso! Claro que o usuário precisa saber ler e escrever, mas a beleza desse programa consiste exatamente nisso, ele vai procurar o produto usando como critério o que o usuário digitar no teclado!

Editado Agosto 28, 2022 por Frank K Hosaka

Frank K Hosaka · Agosto 29, 2022

O tutorial que encontrei na internet vem com quatro arquivos e seleciona um país pela letra.

Eu reduzi tudo para dois arquivos, e ele busca o produto e também traz o preço de venda.

O interessante no código é que ele mostra como usar o código PHP na hora de enfrentar o dilema das aspas simples e aspas duplas. A dica é simplesmente sair fora do código PHP e usar o máximo de HTML. Essa é uma solução engenhosa que eu não consegui compreender nesses dois últimos anos. Faz tempo que ouço falar de Jquery e Ajax, mas só hoje é que consegui fazer eles funcionarem. O meu sonho é mandar um json do PHP para o JavaScript, mas ainda estou apanhando bastante.

Esse autocomplementar do Jquery Ajax é fora de série, ele vai ajudar bastante a melhorar o meu projeto. O código que segue é apenas um esboço, falta melhorar muita coisa, ele ainda não é prático.

astudy.php
-----------------------------------------------
<html>
<head>
<!-- algoritmo baseado em https://phppot.com/jquery/jquery-ajax-autocomplete-country-example/ -->
<head>
<style>
body{width:610px;}
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#listaproduto{float:left;list-style:none;margin-top:-3px;padding:0;width:390px;position: absolute;}
#listaproduto tr{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#listaproduto tr:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$("#cxbusca").keyup(function(){
		$.ajax({
		type: "POST",
		url: "astudy2.php",
		data:'tecla='+$(this).val(),
		success: function(data){
			$("#cxsugestao").show();
			$("#cxsugestao").html(data);
			$("#cxbusca").css("background","#FFF");}});});});

function selectCountry(prod,venda) {
$("#cxbusca").val(prod);
avenda.innerHTML=venda;
$("#cxsugestao").hide();}
</script>
</head>
<body>
<table class=frmSearch><tr><th>Produto<th>Venda
<tr><td><input id="cxbusca" placeholder="Produto" size=40><td><a id=avenda></a>
</table>
<div id="cxsugestao"></div>
</div>
</body>
</html>
  
astudy2.php
---------------------------------------------
<?php
$mysqli=new mysqli("localhost","root","","diario");
if(!empty($_POST["tecla"])) {
	$query=$mysqli->query("select * from tbprod where prod like '%".$_POST['tecla']."%' order by prod limit 100");
	if(!empty($query)) {
		echo "<table id='listaproduto'>";
		foreach($query as $row) {
			$prod=$row['prod'];
			$venda=$row['custo']*1.3
			?>
			<tr onClick="selectCountry('<?=$prod?>','<?=$venda?>')">
			<?php 
			echo "<td>$prod<td>$venda"; }
		echo "</table>"; } }

Editado Agosto 29, 2022 por Frank K Hosaka

Entrar

Procurando um produto pelo celular

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades