Project Structure
pet_adoption/
│
├── app.py # Main application file
├── templates/ # HTML templates
│ ├── index.html
│ ├── add_pet.html
│ └── pet_details.html
├── static/ # Static files (CSS, JS, images)
│ └── styles.css
└── pets.db # SQLite database
Step 1: Set Up the Environment
- Install Flask:bashCopy code
pip install Flask - Set up SQLite (it usually comes with Python, but you can install it if necessary):bashCopy code
pip install sqlite3
Step 2: Create the Database
Create a file named database.py to set up the SQLite database:
import sqlite3
def init_db():
conn = sqlite3.connect('pets.db')
c = conn.cursor()
c.execute('''
CREATE TABLE IF NOT EXISTS pets (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
breed TEXT NOT NULL,
age INTEGER NOT NULL,
description TEXT NOT NULL
)
''')
conn.commit()
conn.close()
if __name__ == '__main__':
init_db()
Run this file once to create the database.
Step 3: Create the Main Application
Create a file named app.py:
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
# Database helper functions
def get_db_connection():
conn = sqlite3.connect('pets.db')
conn.row_factory = sqlite3.Row
return conn
@app.route('/')
def index():
conn = get_db_connection()
pets = conn.execute('SELECT * FROM pets').fetchall()
conn.close()
return render_template('index.html', pets=pets)
@app.route('/add', methods=('GET', 'POST'))
def add_pet():
if request.method == 'POST':
name = request.form['name']
breed = request.form['breed']
age = request.form['age']
description = request.form['description']
conn = get_db_connection()
conn.execute('INSERT INTO pets (name, breed, age, description) VALUES (?, ?, ?, ?)',
(name, breed, age, description))
conn.commit()
conn.close()
return redirect('/')
return render_template('add_pet.html')
@app.route('/pet/<int:pet_id>')
def pet_details(pet_id):
conn = get_db_connection()
pet = conn.execute('SELECT * FROM pets WHERE id = ?', (pet_id,)).fetchone()
conn.close()
return render_template('pet_details.html', pet=pet)
if __name__ == '__main__':
app.run(debug=True)
Step 4: Create HTML Templates
1. 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='styles.css') }}">
<title>Pet Adoption</title>
</head>
<body>
<h1>Pet Adoption Platform</h1>
<a href="/add">Add a Pet</a>
<h2>Available Pets</h2>
<ul>
{% for pet in pets %}
<li>
<a href="{{ url_for('pet_details', pet_id=pet['id']) }}">{{ pet['name'] }} ({{ pet['breed'] }})</a>
</li>
{% endfor %}
</ul>
</body>
</html>
2. 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">
<title>Add a Pet</title>
</head>
<body>
<h1>Add a Pet</h1>
<form method="post">
<label>Name:</label><br>
<input type="text" name="name" required><br>
<label>Breed:</label><br>
<input type="text" name="breed" required><br>
<label>Age:</label><br>
<input type="number" name="age" required><br>
<label>Description:</label><br>
<textarea name="description" required></textarea><br>
<input type="submit" value="Add Pet">
</form>
</body>
</html>
3. templates/pet_details.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ pet['name'] }}</title>
</head>
<body>
<h1>{{ pet['name'] }}</h1>
<p>Breed: {{ pet['breed'] }}</p>
<p>Age: {{ pet['age'] }} years</p>
<p>Description: {{ pet['description'] }}</p>
<a href="/">Back to Home</a>
</body>
</html>
Step 5: Create a CSS File
Create a file named static/styles.css for basic styling:
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
a {
text-decoration: none;
color: blue;
}
ul {
list-style-type: none;
padding: 0;
}
Step 6: Run the Application
- Initialize the database:bashCopy code
python database.py - Run the Flask app:
python app.py- Open your browser and go to
http://127.0.0.1:5000/.
Leave a Reply