URL Shortener Application

—

by

Step 1: Set Up the Project Structure

Create a new directory for your project and create the following files and folders:

arduinoCopy codeurl_shortener/
│
├── app.py
├── database.py
├── templates/
│   └── index.html
└── static/
    └── styles.css

Step 2: Create the Database Module

Create a file named database.py to handle the SQLite database:

pythonCopy codeimport sqlite3

def init_db():
    """Initialize the database."""
    conn = sqlite3.connect('urls.db')
    cursor = conn.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS urls (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            original_url TEXT NOT NULL,
            short_url TEXT NOT NULL UNIQUE
        )
    ''')
    conn.commit()
    conn.close()

def add_url(original_url, short_url):
    """Add a URL to the database."""
    conn = sqlite3.connect('urls.db')
    cursor = conn.cursor()
    cursor.execute('INSERT INTO urls (original_url, short_url) VALUES (?, ?)', (original_url, short_url))
    conn.commit()
    conn.close()

def get_original_url(short_url):
    """Retrieve the original URL from the database."""
    conn = sqlite3.connect('urls.db')
    cursor = conn.cursor()
    cursor.execute('SELECT original_url FROM urls WHERE short_url = ?', (short_url,))
    result = cursor.fetchone()
    conn.close()
    return result[0] if result else None

Step 3: Create the Flask Application

Create a file named app.py and add the following code:

pythonCopy codefrom flask import Flask, request, redirect, render_template
import string
import random
import database

app = Flask(__name__)

# Initialize the database
database.init_db()

def generate_short_url(length=6):
    """Generate a random short URL."""
    characters = string.ascii_letters + string.digits
    return ''.join(random.choice(characters) for _ in range(length))

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        original_url = request.form['url']
        short_url = generate_short_url()
        database.add_url(original_url, short_url)
        return render_template('index.html', short_url=short_url)
    return render_template('index.html', short_url=None)

@app.route('/<short_url>')
def redirect_to_url(short_url):
    original_url = database.get_original_url(short_url)
    if original_url:
        return redirect(original_url)
    return "URL not found", 404

if __name__ == "__main__":
    app.run(debug=True)

Step 4: Create the HTML Template

Create a file named index.html inside the templates folder and add the following code:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <h1>URL Shortener</h1>
        <form method="POST">
            <input type="text" name="url" placeholder="Enter your URL here" required>
            <button type="submit">Shorten</button>
        </form>
        {% if short_url %}
            <h2>Short URL: <a href="{{ short_url }}">{{ request.host_url }}{{ short_url }}</a></h2>
        {% endif %}
    </div>
</body>
</html>

Step 5: Create the CSS Styles

Create a file named styles.css inside the static folder and add the following code:

cssCopy codebody {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

input[type="text"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

Step 6: Run the Application

Open your terminal (or command prompt).
Navigate to the directory where you saved the project.
Run the application using the command:bashCopy codepython app.py
Open your web browser and go to http://127.0.0.1:5000/.

Comments

Leave a Reply Cancel reply