Code Monkey home page Code Monkey logo

businesscardqr's Introduction

BusinessCardQR

QR Code Image Generator Este projeto é uma ferramenta simples para gerar códigos QR personalizados com informações de contato. Ele consiste em uma página HTML com um formulário onde o usuário pode inserir seu nome, link do LinkedIn e link do GitHub. Ao clicar no botão "Generate Imagem", um código QR é gerado com as informações inseridas e pode ser salvo pelo usuário para ser compartilhado com outras pessoas.

Tecnologias usadas Este projeto foi construído usando HTML, CSS e JavaScript para o front-end e PHP para o back-end. Ele também utiliza a biblioteca qrcode.js para a geração dos códigos QR.

Instruções de uso Para usar esta ferramenta, siga os seguintes passos:

Clone o repositório em sua máquina local. Certifique-se de que possui um servidor web instalado em sua máquina.

Navegue até o diretório do projeto em seu servidor web. Abra a página index.html no seu navegador.

Preencha os campos do formulário com suas informações de contato. Clique no botão "Generate Imagem" para gerar o código QR.

Salve o código QR gerado ou escaneie-o com um aplicativo de leitor de QR para visualizar suas informações de contato. Arquivos

Este projeto contém os seguintes arquivos:

index.html: a página HTML principal com o formulário e a exibição do código QR gerado.

css/style.css: o arquivo CSS para estilizar a página HTML. js/main.js: o arquivo JavaScript com o código para gerar o código QR e lidar com eventos na página HTML.

js/qrcode.min.js: a biblioteca qrcode.js para a geração do código QR. api.php: o arquivo PHP para lidar com as solicitações POST do formulário e salvar os dados do usuário.

card.php: o arquivo PHP para exibir as informações do usuário em uma página de perfil.

Notas adicionais

Este projeto foi construído apenas para fins de demonstração e não foi testado em ambiente de produção. Ele pode conter vulnerabilidades de segurança e outros problemas que não foram abordados aqui. Por favor, use-o com cuidado e por sua própria conta e risco.

PS: Este projeto foi desenvolvido usando o XAMPP, que é um pacote de software livre que contém o Apache, o MySQL e o PHP. Ele pode ser usado para criar um servidor web em seu computador local e, assim, executar este projeto. Portanto, antes de usar este projeto, você deve garantir que tenha instalado e configurado corretamente o XAMPP em seu sistema.

PS_2:

Você terá que mudar o arquivo main.js, caso queira utilizar localmente

// Constrói a URL para a página api.php com os parâmetros desejados var api_url = "http://localhost/BusinessCardQR/api.php?name=" + encodeURIComponent(name) + "&linkedin=" + encodeURIComponent(linkedinUrl) + "&github=" + encodeURIComponent(githubUrl);

// Constrói a URL amigável para a página card.php usando o nome do usuário var card_url = "http://localhost/BusinessCardQR/" + encodeURIComponent(name);

E retirar o projeto php da pasta vercel-php e colocar na raiz do projeto.

Olhar os comentarios do arquivo api.php e card.php para funcionar no localhost da sua máquina.

Pois como estou usando o vercel para hospedar, ele só aceita de forma estática.

O projeto está públicado: https://business-card-qr.vercel.app/

Lembrando que o qrcode está clicável, pois ele está salvando o armazenamento do cookie. Se você fizer pelo computador, ele vai gerar e vai mostrar o resultdo. Mas caso você faça no computador e dê o scan pelo celular, não vai informações, para isso teria que está em um banco de dados.

businesscardqr's People

Contributors

motavg avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.