Types of User Data

  • Personal Information: This includes a user's name, age, gender, email address, phone number, address, etc.
  • Behavioral Data: This includes a user's browsing history, search queries, clickstream data, and other user interactions with the web application.
  • Transaction Data: This includes a user's purchase history, payment information, and other transactional data.
  • Social Data: This includes a user's social media activity, such as likes, shares, comments, and other user-generated content.

Collecting User Data in Web Applications

For simplicity purposes, we are going to solely focus on personal information. Many of you, for your hacks, may even be inclined to trickle into the transaction data (if you would like to go above and beyond for full credit :))

There are different ways of collecting user data in web applications, and some of the most common methods include:

HTML Forms: HTML forms allow users to enter their personal information, such as name, email, phone number, etc. into fields provided by the web application. This data is then sent to the server for processing and storage (JavaScript)

Cookies: Cookies are small text files that are stored on the user's computer by the web application. Cookies can be used to track user behavior, such as login status, browsing history, and other user interactions.

Web Beacons: Web beacons are small, invisible images embedded in web pages that allow web applications to track user behavior, such as clickstream data and other interactions.

Third-Party APIs: Third-party APIs allow web applications to collect user data from other platforms, such as social media sites, payment gateways, and other web applications.

Step 1: Creating an HTML Form

The first step in collecting user data is to create an HTML form. An HTML form consists of one or more input fields that allow the user to enter data. There are several types of input fields, such as text, password, email, and file upload fields. Here's an example of a simple HTML form:

In this form, we have three input fields for the user's name, email, and password. We also have a submit button that the user can click to submit the form.

Step 2: Validating User Input with JavaScript

After the user submits the form, we need to validate the user's input to make sure it meets certain criteria. For example, we might want to make sure the user's email is in a valid format or that their password is at least 8 characters long.

We can use JavaScript to validate the user's input before submitting the form. Here's an example of how we can validate the email input field:

<form onsubmit="return validateForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <div id="emailError"></div>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
  let email = document.getElementById("email").value;
  let emailError = document.getElementById("emailError");

  if (!email.match(/^[^@]+@[^@]+\.[^@]+$/)) {
    emailError.innerHTML = "Please enter a valid email address";
    return false;
  } else {
    emailError.innerHTML = "";
    return true;
  }
}
</script>

In this example, we have added an onsubmit event to the form that calls the validateForm() function. Inside the validateForm() function, we get the value of the email input field and check if it matches a regular expression that represents a valid email address. If it doesn't match, we display an error message and return false to prevent the form from being submitted. If it does match, we clear the error message and return true to allow the form to be submitted.

We can add similar validation logic for the other input fields as well.

Step 3: Processing User Input with Python and Flask

Now that we have collected user input, we need to process and store it on the server side. We will use Python and Flask to accomplish this.

Import Flask and create a new Flask app:

from flask import Flask, request
app = Flask(__name__)

Create a route for your form submission:

@app.route('/submit-form', methods=['POST'])
def submit_form():
    # Process user input here
    return 'Form submitted successfully!'

Inside the submit_form function, use request.form to retrieve the submitted data:

@app.route('/submit-form', methods=['POST'])
def submit_form():
    name = request.form['name']
    email = request.form['email']
    message = request.form['message']
    # Store data in database or file
    return 'Form submitted successfully!'

Finally, we can store the data in a database. For example, using SQLite:

import sqlite3
conn = sqlite3.connect('mydatabase.db')
c = conn.cursor()

@app.route('/submit-form', methods=['POST'])
def submit_form():
    name = request.form['name']
    email = request.form['email']
    message = request.form['message']
    c.execute("INSERT INTO messages (name, email, message) VALUES (?, ?, ?)", (name, email, message))
    conn.commit()
    return 'Form submitted successfully!'

This code creates a new SQLite database file named mydatabase.db and inserts the submitted data into a table called messages.

Good progress!

Conclusion:

Collecting user data is an important part of building any web application. It allows us to understand our users and their needs, and provides us with valuable information to improve our products and services. To collect user data, we can create an HTML form and use JavaScript to validate user input before submitting the form data to the server. On the server side, we can use Python and Flask to process the user data and store it in a database, such as SQLite.

For your homework assignment, you will be building an HTML form that allows users to submit their contact information, including their name, email address, phone number, and a message. You will need to use JavaScript to validate user input and ensure that all required fields are filled out correctly before submitting the form data. You will also need to develop a database schema to store user data, including profile pictures, and implement it using SQL.

To show proof of your work, you can provide a screenshot or video recording of your HTML form in action, demonstrating the validation of user input and successful submission of data. Additionally, you can provide a screenshot or code snippet of your SQL schema and implementation.

HACKS

  • Build an HTML form that allows users to submit their contact information, including their name, email address, phone number, and a message. Use JavaScript to validate user input and ensure that all required fields are filled out correctly before submitting the form data. Must show proof (0.5)

  • Develop a database schema to store user data, including profile pictures, and implement it using SQL (0.4+)