Script de cardápio QR e site para cafeteria

Nota sobre os idiomas

A interface do site e do painel administrativo vem em turco e inglês. Você escolhe o idioma do site e o idioma do painel separadamente em “Site ayarları” (Configurações do site); também pode trocar o idioma do painel pelo ícone de globo no canto superior direito do painel.

É possível adicionar mais idiomas: copie o arquivo en.php da pasta dil do pacote e traduza-o (os passos estão em dil/OKUBENI.txt). O idioma adicionado aparece automaticamente nas listas de idiomas das configurações do site, e as atualizações não mexem nos seus arquivos de idioma. Os textos não traduzidos aparecem em inglês; se preferir, podem ser exibidos em turco.

Os conteúdos que você publica (produtos, categorias, páginas, posts do blog etc.) não são traduzidos; permanecem no idioma em que você os escreve. As mensagens de aviso e os formatos de data e de valor seguem o idioma escolhido. Os e-mails de formulário enviados a você são redigidos no idioma do painel.

Quando esta página cita uma seção do painel ou do site, o nome é dado como aparece na interface em turco, entre aspas, seguido da tradução entre parênteses; na interface em inglês, as mesmas seções aparecem com seus nomes em inglês.

Para quem é

Feito para cafeterias, restaurantes, confeitarias e casas de café, e para as agências que criam sites para eles. Seu cliente escaneia com a câmera do celular o código QR da mesa ou da porta, e o cardápio, dividido em categorias, abre com os preços no telefone. Quando você atualiza o cardápio e os preços no painel administrativo, o código QR impresso abre o mesmo cardápio; você só reimprime o código se o endereço do seu site mudar.

Você gera os códigos QR no painel: códigos prontos para a página inicial, para o cardápio inteiro e para cada categoria são baixados em PNG ou SVG, ou impressos como cartão de mesa junto com o seu logotipo. Com o código vem um site de cafeteria completo: slider de abertura, produtos populares, blog, página Sobre nós, horário de funcionamento e formulário de contato com caixa de consentimento da KVKK (a KVKK é a lei turca de proteção de dados pessoais).

Você não precisa saber programar. O assistente no navegador faz a instalação e você insere o conteúdo no painel administrativo.

Escopo

Este script é um site de cardápio QR e de apresentação de cafeteria. Os produtos do cardápio são exibidos com o preço; o site não tem carrinho, pagamento on-line, pedido on-line, chamada de garçom nem gestão de mesas. Um código QR abre um único endereço de cardápio: você usa o mesmo código de cardápio em todas as mesas e nenhum código específico para cada mesa é gerado. Os códigos de categoria podem ser impressos à parte (por exemplo, um cartão separado para bebidas). Recomendamos ver a demonstração antes de decidir.

Recursos do site

Página do cardápio

• Um cardápio fácil de percorrer no celular: na página do cardápio, as categorias são listadas seção por seção, uma abaixo da outra. A faixa de categorias no topo permanece no alto da tela durante a rolagem, desliza para os lados e marca a categoria em que você está conforme desce. Tocar no nome de uma categoria leva a essa seção. Em telas pequenas, os produtos aparecem em cartões de duas colunas; o número de colunas aumenta conforme a tela fica mais larga.
• Página de categoria: cada categoria tem um endereço que mostra apenas os seus produtos; o código QR da categoria abre essa página. Os produtos publicados cuja categoria foi excluída ou nunca foi escolhida aparecem em “Diğer” (Outros) no cardápio completo.
• Cartão de produto: imagem, nome do produto, descrição curta e preço. As imagens são carregadas conforme a página é rolada; um produto sem imagem aparece com um ícone neutro.
• Página do produto: tocar na imagem abre uma visualização ampliada. A página mostra o nome do produto, um link para a categoria, a descrição curta, o preço, as etiquetas (por exemplo, vegano, picante) e “Ürün Detayları” (Detalhes do produto) com texto formatado; abaixo aparecem até quatro produtos semelhantes da mesma categoria. Um produto com o status “Taslak” (Rascunho) não aparece no site.
• Preços: são inseridos e exibidos em liras turcas (₺). Um produto cujo preço fica vazio ou em 0 é exibido sem preço.
• Ordem: você organiza categorias e produtos com o campo “Sıra” (Ordem); o número menor vem primeiro.

Página inicial

• Ordem na página inicial: slider de abertura, produtos populares, cardápio com abas de categorias, cartões de categorias e últimos posts. Uma seção sem registros não aparece.
• Slider de abertura: você adiciona slides no painel; cada slide tem título, subtítulo, texto e link do botão, ordem e imagem. O botão só aparece se o texto e o link estiverem preenchidos. Com mais de um slide, as setas e os pontos indicadores funcionam e os slides passam sozinhos. No máximo dez slides são exibidos.
• Produtos populares: os produtos aos quais você dá a “Popüler işareti” (Marca “Popular”) aparecem na página inicial em um carrossel com nome, imagem e preço. Em dispositivos com a configuração de reduzir movimento ativada, o carrossel não avança sozinho.
• Cardápio com abas de categorias: há uma aba para cada categoria que tem produtos; se você marcou produtos populares, a primeira aba é “Öne Çıkanlar” (Destaques). Em cada aba os produtos são listados como cartões; os botões “Kategoriyi aç” (Abrir categoria) e “Tüm menüyü gör” (Ver todo o cardápio) levam à página do cardápio.
• Cartões de categorias: a imagem, o nome e o número de produtos da categoria aparecem em um carrossel; tocar em um cartão abre o cardápio dessa categoria.
• Últimos posts: os três posts mais recentes do blog são exibidos com imagem, data, autor e descrição curta.
• Títulos das seções: você escreve no painel, com suas próprias palavras, o título e o subtítulo de cada seção da página inicial. Um título que você deixa vazio não aparece no site.

Blog, páginas e contato

• Blog: você publica posts com título, categoria, status, autor, etiquetas, descrição curta, imagem e texto formatado. A lista é filtrada com chips de categoria; a coluna lateral de um post mostra as categorias e os últimos posts. Um post com o status “Taslak” (Rascunho) não aparece no site.
• Páginas adicionais: você adiciona no painel quantas páginas quiser (por exemplo, informações sobre alérgenos, aviso de privacidade da KVKK, política de privacidade). Para cada página, você escolhe se ela aparece no menu superior (em “Sayfalar”, Páginas) e no rodapé do site.
• Sobre nós: uma página de apresentação do seu negócio formada por título e texto formatado.
• Página de contato: um formulário com os campos nome, e-mail, telefone e mensagem (todos obrigatórios); ao lado, a breve apresentação do negócio, o endereço, um telefone que inicia uma ligação ao ser tocado, o e-mail, o horário de funcionamento e o mapa (código de incorporação do Google Maps ou do OpenStreetMap). As informações e o mapa que você deixa vazios não aparecem.
• Horário de funcionamento: você insere um texto para cada dia da semana (por exemplo, 08:00 - 22:00, ou “Kapalı” (Fechado) para um dia de folga). O texto é mostrado ao visitante como você o insere; um dia deixado vazio não é exibido. Os horários aparecem na página de contato e no rodapé do site.
• E-mail para você: depois que você configura “E-posta ayarları” (Configurações de e-mail) e ativa as notificações, cada mensagem do formulário de contato também chega a você por e-mail. Quando você responde ao e-mail, a resposta vai para o endereço do visitante. Mesmo sem configurar o e-mail, as mensagens são listadas no painel. Nenhum e-mail é enviado ao visitante.
• Caixa de consentimento da KVKK: obrigatória no formulário de contato. O link do aviso de privacidade leva à página que você escolhe no painel; o mesmo link aparece no rodapé do site. O texto que acompanha o conteúdo de exemplo é apenas um exemplo; você precisa preparar o seu próprio aviso de privacidade.

Aparência e mecanismos de busca

• Tema claro e escuro: com o botão do menu superior, o visitante escolhe a aparência clara ou escura; a escolha fica guardada no navegador dessa pessoa.
• Cor principal: você escolhe uma cor principal no painel. Ela é aplicada aos botões, ao fundo do slider de abertura, aos itens ativos ou selecionados do menu e das faixas, aos links e aos preços. A cor do texto sobre a cor é escolhida automaticamente para continuar legível.
• Logotipo, ícone do site e rodapé: você envia o seu logotipo e o ícone do site (favicon); se não enviar logotipo, o nome do negócio aparece como texto. O rodapé reúne a apresentação do negócio, links de categorias, um menu rápido, dados de contato e horário de funcionamento.
• Redes sociais: seus links do Facebook, X (Twitter), YouTube, Instagram e WhatsApp aparecem como ícones no rodapé. Um ícone que você não preencheu não é desenhado.
• Ligar e desligar seções: você liga ou desliga Sobre nós, Blog, a página de contato, o slider da página inicial, os produtos populares, os cartões de categorias e o horário de funcionamento em uma única página. Uma seção desligada some do menu e da página inicial; o endereço de uma seção que tem página também não abre.
• Assinatura do rodapé: você pode alterar ou remover o texto “TiklaWeb tarafından geliştirildi” (Desenvolvido por TiklaWeb) no fim do site.
• Adaptado ao celular: o site se adapta a telas de celular, tablet e computador; em telas pequenas, o menu vira um painel que se abre pela lateral, e um botão “voltar ao topo” aparece ao rolar a página.
• Título e descrição próprios de cada página: cada página tem o seu título (“Página | Negócio”), a sua descrição e as etiquetas de compartilhamento em redes sociais (Open Graph). Nas páginas de produto e de post, a imagem de compartilhamento vem da imagem do produto ou do post. Você insere o título, a descrição e as palavras-chave do site em “Site ayarları” (Configurações do site).

Painel administrativo

• “QR Kod” (Código QR): uma caixa separada para a página inicial, o cardápio inteiro e cada categoria: pré-visualização, endereço que o código abre e botões de download. O código é baixado em PNG nos tamanhos de 512, 1024 e 2048 pixels e em SVG. A visualização de impressão para cartões de mesa vem em A6, A4 e quatro cartões A6 em uma folha A4 (para recortar); o cartão mostra o seu logotipo (ou o nome do negócio, se não houver logotipo), o código QR, uma linha de texto e o endereço do site. O texto do cartão (padrão “Menüyü görmek için okutun”, Escaneie para ver o cardápio) é alterado na tela de impressão.
• Endereço do QR: os códigos levam o endereço do seu site a partir do qual o painel foi aberto. Se o endereço mudar, você precisa baixar e imprimir os códigos novamente; também pode digitar o endereço manualmente e atualizar os códigos.
• “Özet” (Resumo): número de mensagens não lidas, de produtos do cardápio publicados, de categorias e de posts do blog, um atalho para a página Código QR e as últimas mensagens. O número de mensagens não lidas aparece como um selo no menu lateral.
• “Mesajlar” (Mensagens): as mensagens do formulário de contato ficam reunidas em uma lista. Nome, telefone, e-mail, data e status de leitura aparecem na lista; nos detalhes você lê a mensagem e o horário do consentimento da KVKK, e pode excluir o registro. A lista tem busca e ordenação.
• Gestão do cardápio: para os produtos, você insere nome, categoria, preço, ordem, status (publicado ou rascunho), a “Popüler işareti” (Marca “Popular”), descrição curta, etiquetas, descrição detalhada e imagem. Para as categorias, você insere nome, ordem e imagem. As listas têm busca e ordenação.
• Blog e páginas: os posts do blog, as categorias do blog e as páginas adicionais são adicionados, editados e excluídos. Nos campos de texto formatado, usa-se o editor Summernote.
• “Site içeriği” (Conteúdo do site): slider da página inicial, “Ana sayfa başlıkları” (Títulos da página inicial), “Hakkımızda” (Sobre nós), “Çalışma saatleri” (Horário de funcionamento), links de redes sociais e “Bölümleri aç/kapat” (Ligar/desligar seções).
• Envio de imagens: são enviados arquivos JPG, PNG ou WebP (até 8 MB). Se a extensão GD estiver ativa no servidor, as imagens são convertidas para WebP e as que têm o lado maior acima de 1600 pixels são reduzidas; assim o cardápio aberto no celular carrega mais rápido.
• “E-posta ayarları” (Configurações de e-mail): depois que você insere os dados SMTP e ativa a notificação, os e-mails de contato funcionam. Você testa as configurações com o botão “Deneme e-postası gönder” (Enviar e-mail de teste).
• “Site ayarları” (Configurações do site): título, descrição e palavras-chave do site, nome do negócio, telefone, link do WhatsApp, e-mail, endereço, breve apresentação do negócio, linha de direitos autorais, cor principal, página do aviso de privacidade da KVKK, mapa, logotipo, ícone do site, idioma do site e idioma do painel.
• Usuários e permissões: você adiciona contas de administrador e de editor. O editor gerencia as mensagens, a página Código QR e as seções de conteúdo; “Site ayarları”, “E-posta ayarları” e “Kullanıcılar” (Usuários) são exclusivos do administrador. As permissões são verificadas no servidor. Cada usuário altera o próprio nome e a própria senha na página “Profil ve şifre” (Perfil e senha).
• Esqueci a senha: a senha é redefinida por e-mail pelo link do login do painel (se “E-posta ayarları” estiver configurado). O link de redefinição vale por 1 hora e pode ser usado uma vez.
• Código personalizado: em “Site ayarları” você adiciona o seu próprio código (por exemplo, um script de estatísticas) no cabeçalho do site, no início do corpo e no fim da página. Esses campos são exclusivos do administrador.

Instalação e atualizações

• Assistente de instalação em cinco etapas: requisitos, licença, banco de dados, dados do site e do administrador, conclusão. O próprio assistente verifica o seu servidor.
• Idioma da instalação: turco ou inglês é escolhido no canto superior direito do assistente. Com uma instalação em inglês, o conteúdo inicial e de exemplo também vem em inglês.
• Instalação com conteúdo de exemplo ou vazia: você pode começar com o site preenchido como a demonstração e editá-lo, ou inserir o conteúdo do zero. A lista “Mesajlar” (Mensagens) começa vazia nos dois casos.
• Atualização pelo painel: você baixa o pacote zip da nova versão no seu painel de cliente do tiklaweb.net e o envia na página “Güncelleme ve lisans” (Atualização e licença) do painel administrativo. Antes da operação, é feito um backup dos arquivos e do banco de dados. Se ocorrer um erro, o site volta ao estado anterior. As imagens que você enviou, as suas configurações e o seu conteúdo são preservados.
• Pacotes verificados: a assinatura do pacote de atualização é verificada; só são instalados pacotes baixados do tiklaweb.net.

O guia de instalação detalhado vem no pacote que você baixa, como o arquivo KURULUM.html (escrito em turco).

Licença

Cada licença vale para um único nome de domínio, que você informa ao fazer o pedido. A alteração do nome de domínio é paga e feita por meio de uma solicitação de suporte. A licença não é transferida gratuitamente. O site não abre em um nome de domínio sem licença, e o visitante é redirecionado para uma página de aviso de licença. Para usá-lo em outro nome de domínio, é necessária uma licença separada.

Características técnicas

• PHP 8.2 ou superior, MySQL ou MariaDB
• Base: PHP puro, PDO e consultas preparadas. Site: Bootstrap 5, jQuery, Slick, Font Awesome Free 6; a fonte (Raleway) fica armazenada localmente no pacote e nenhum serviço externo de fontes é chamado. Painel: Bootstrap 4, DataTables e o editor de conteúdo Summernote
• Os códigos QR são gerados no seu servidor com a biblioteca chillerlan/php-qrcode, licenciada sob MIT e Apache-2.0; nenhuma requisição vai a um serviço de QR externo. O arquivo PNG é escrito sem a extensão GD
• Nos códigos QR são escritos apenas os endereços do próprio site; um endereço de site digitado manualmente é transportado com links assinados
• O e-mail é enviado com o PHPMailer 6.9; a senha SMTP é armazenada criptografada. O registro do formulário é gravado primeiro no banco de dados; se o servidor permitir, o e-mail é enviado depois que o visitante recebe a resposta
• Os textos da interface ficam nos arquivos de idioma do pacote (turco e inglês prontos, novos idiomas podem ser adicionados)
• Token de formulário assinado e campo armadilha oculto no formulário de contato, verificação CSRF nas ações do painel; limite de tentativas no login do painel, na redefinição de senha e no formulário de contato
• O tipo das imagens enviadas no painel é verificado a partir do conteúdo (JPG, PNG, WebP; até 8 MB); o PHP não é executado na pasta de envios
• Os campos de texto formatado do painel são filtrados no servidor ao salvar (HTMLPurifier); o painel administrativo envia um cabeçalho de política de segurança de conteúdo (CSP); as senhas dos administradores são armazenadas com hash
• O campo de mapa aceita apenas endereços de incorporação do Google Maps e do OpenStreetMap
• Os dados do banco de dados e os backups ficam, se a hospedagem permitir, em uma pasta fora da raiz web
• Cabeçalhos de segurança, HSTS em HTTPS; fuso horário Europe/Istanbul
• Antes da venda, foi realizada uma auditoria de segurança composta por revisão de código e testes de ataque ao vivo

Demonstração

Você pode explorar o site e o painel administrativo em uma demonstração somente leitura. A demonstração está instalada em turco; no painel administrativo, você pode trocar o idioma do painel para inglês pelo ícone de globo no canto superior direito (essa escolha fica guardada apenas no seu navegador). O nome do negócio, os produtos, os preços, os posts e as fotos da demonstração são todos conteúdo de exemplo. No painel da demonstração, você pode abrir a página “QR Kod” (Código QR), baixar os códigos e testar a visualização dos cartões de mesa; os códigos levam o endereço do site de demonstração. Na lista “Mesajlar” (Mensagens), você vê alguns registros de exemplo. O WhatsApp, os links de redes sociais e o mapa ficam vazios na demonstração; eles aparecem no site quando você os preenche no painel.

• Site: https://018.tiklaweb.net
• Painel administrativo: https://018.tiklaweb.net/admin
• E-mail da demonstração: demo@tiklaweb.net
• Senha da demonstração: demo1234

Na demonstração não é possível salvar alterações; o formulário de contato não grava registros e não envia e-mail. A demonstração é redefinida toda noite. Páginas sensíveis, como configurações de e-mail, usuários e formulários de senha, não podem ser vistas no modo de demonstração, e “Esqueci a senha” fica desativado na demonstração. Esses dados de acesso valem apenas para o site de demonstração. Na instalação que você comprar, a conta de administrador é definida por você.

Suporte

Se travar em alguma etapa, você pode abrir uma solicitação de suporte no seu painel de cliente do tiklaweb.net ou escrever para destek@tiklaweb.net.