Project Structure
pet_adoption/
│
├── app.py # Main application file
├── templates/ # HTML templates
│ ├── index.html
│ ├── add_pet.html
│ ├── pets.html
├── static/ # Static files (CSS, JS)
│ ├── style.css
└── pets.db # SQLite database
1. Setting Up the Backend with Flask
First, install Flask:
pip install Flask
app.py
from flask import Flask, render_template, request, redirect, url_for
import sqlite3
app = Flask(__name__)
# Database setup
def init_db():
conn = sqlite3.connect('pets.db')
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS pets (
id INTEGER PRIMARY KEY,
name TEXT NOT NULL,
type TEXT NOT NULL,
age INTEGER NOT NULL,
description TEXT NOT NULL
)
''')
conn.commit()
conn.close()
init_db()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/pets')
def pets():
conn = sqlite3.connect('pets.db')
cursor = conn.cursor()
cursor.execute('SELECT * FROM pets')
pets = cursor.fetchall()
conn.close()
return render_template('pets.html', pets=pets)
@app.route('/add_pet', methods=['GET', 'POST'])
def add_pet():
if request.method == 'POST':
name = request.form['name']
pet_type = request.form['type']
age = request.form['age']
description = request.form['description']
conn = sqlite3.connect('pets.db')
cursor = conn.cursor()
cursor.execute('INSERT INTO pets (name, type, age, description) VALUES (?, ?, ?, ?)',
(name, pet_type, age, description))
conn.commit()
conn.close()
return redirect(url_for('pets'))
return render_template('add_pet.html')
if __name__ == '__main__':
app.run(debug=True)
2. Creating HTML Templates
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Pet Adoption Platform</title>
</head>
<body>
<h1>Welcome to the Pet Adoption Platform</h1>
<a href="{{ url_for('pets') }}">View Pets</a>
<a href="{{ url_for('add_pet') }}">Add a Pet</a>
</body>
</html>
templates/pets.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Available Pets</title>
</head>
<body>
<h1>Available Pets for Adoption</h1>
<ul>
{% for pet in pets %}
<li>
<strong>{{ pet[1] }}</strong> ({{ pet[2] }}), Age: {{ pet[3] }} - {{ pet[4] }}
</li>
{% endfor %}
</ul>
<a href="{{ url_for('index') }}">Home</a>
</body>
</html>
templates/add_pet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Add a Pet</title>
</head>
<body>
<h1>Add a New Pet</h1>
<form action="{{ url_for('add_pet') }}" method="post">
<label>Name: <input type="text" name="name" required></label><br>
<label>Type: <input type="text" name="type" required></label><br>
<label>Age: <input type="number" name="age" required></label><br>
<label>Description: <textarea name="description" required></textarea></label><br>
<button type="submit">Add Pet</button>
</form>
<a href="{{ url_for('index') }}">Home</a>
</body>
</html>
3. Adding Some Basic CSS
static/style.css
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
a {
display: inline-block;
margin: 10px 0;
}
4. Running the Application
- Save the files in the appropriate directories.
- Run the Flask app:bashCopy code
python app.py - Open your web browser and go to
http://127.0.0.1:5000/.