idCardApp

An app to create custom ID cards

Basic Functionality

The app should create an ID Card in real time and export the information to JSON.

Basic task List

• Follow the design proposed by the image case_study_2017_demo.png.
• Preview Area:
  • Shows the changes in real time.
• Drop Images Area:
  • Drop Photo: The user can drop one image and the image should appear on the profile image of the Preview area.
  • Drop Background: The user can drop one image and the image will update the background image of the preview area.
• Text Fields Area:
  • The data entered on the input fields will update in real time the corresponding text on the preview area.
  • The Background Size Selector updates the background style on the preview area.
  • The Generate JSON button generates one JSON object and updates the Output area.
• Outpu Area:
  • Outputs the JSON generated on the Text Field Area.

Extra task List

• Text Fields Area:
  • Add the option to change the text color in real time.
  • Add the option to add colors in hexadecimal code.
  • Save the colors on a database for future use.
• Save Cards:
  • Create a database to save the cards created.
  • Save the images uploaded to the server.
  • The homepage should have the ability to show the cards saved if any.
  • Show the cards saved without reloading the page.
  • Update the card information without reloading the page.
  • Create a new card based on a previous saved card.
  • The user can create a background directly on the app, with the canvas or simply by choosing a solid color.
• Users:
  • Create a new user before using the app
  • Users Login and Logout
  • Save the cards for each user
  • Only show the cards created by the user
• Design of the app
  • Create a new design
  • Add responsive design
  • Give some configuration options to the user

STEP 1: Design

• index.html (entry page of the app)
• reset.css (reset some annoying browser styles)
• main.css (main styles of the app)
• default_avatar.jpeg (just a placeholder for the preview Photo)
• drag_and_drop.gif (An animated image for the drop areas)

STEP 2: Basic Functionality

• cardprocess.js (JS script that executes the basic functionality)

STEP 3: Extra Functionality

New App Folder Structure

• database folder
  • idcards.sql(SQL commands to generate the database)
  • idcards.db(The generated database using SQLITE3)
• images folder
  • This is the location of all the images of the application even the uploaded images;
• includes folder
  • db_connection.php(Connection to the database);
  • init.php(Includes all the necessary files for the application)
  • session.php(File to add functions to handle sessions)
• templates folder
  • This folder has all the frontend templates of the app.
• index.php(This is now the entry point of the app)
• action_saveid.php (The action to save a new card to the database)
• action_updatecard.php (Gets the information from the database and returns a JSON file)

Things to improve

• The user should be able to save a card without a background image;
• Save the values entered when the page reloads after and error;
• Keep the image format when uploading (using the MIME type provided by the base64 string);
• Improve the AJAX tasks and functions;
• Create the database directly on the app to avoid problems with relocation;