├── database
    └── db.sql
├── .gitignore
├── utils
    └── db.py
├── static
    └── css
    │   └── main.css
├── Dockerfile
├── index.py
├── requirements.txt
├── config.py
├── templates
    ├── partials
    │   ├── _message.html
    │   ├── _navbar.html
    │   └── _taskForm.html
    ├── layout.html
    ├── update.html
    ├── index.html
    └── about.html
├── models
    └── contact.py
├── docker-compose.yml
├── app.py
├── README.md
└── routes
    └── contacts.py


/database/db.sql:
--------------------------------------------------------------------------------
1 | CREATE DATABASE contactsdb;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | venv
2 | __pycache__
3 | 
4 | static/css/bootstrap.min.css
5 | 
6 | .env


--------------------------------------------------------------------------------
/utils/db.py:
--------------------------------------------------------------------------------
1 | from flask_sqlalchemy import SQLAlchemy
2 | 
3 | db = SQLAlchemy()
4 | 


--------------------------------------------------------------------------------
/static/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: #121212;
3 | }
4 | 
5 | .bg-black {
6 |   background: #090909 !important;
7 | }


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM python:3.8
 2 | 
 3 | ADD . /code
 4 | 
 5 | WORKDIR /code
 6 | 
 7 | RUN pip install -r requirements.txt
 8 | 
 9 | CMD python index.py
10 | 
11 | 


--------------------------------------------------------------------------------
/index.py:
--------------------------------------------------------------------------------
1 | from app import app
2 | from utils.db import db
3 | 
4 | with app.app_context():
5 |     db.create_all()
6 | 
7 | if __name__ == '__main__':
8 |     app.run(debug=True, host="0.0.0.0")
9 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | autopep8==1.6.0
 2 | click==8.0.3
 3 | Flask==2.0.2
 4 | Flask-SQLAlchemy==2.5.1
 5 | greenlet==1.1.2
 6 | itsdangerous==2.0.1
 7 | Jinja2==3.0.2
 8 | MarkupSafe==2.0.1
 9 | mysqlclient==2.0.3
10 | pycodestyle==2.8.0
11 | python-dotenv==0.19.1
12 | SQLAlchemy==1.4.26
13 | toml==0.10.2
14 | Werkzeug==2.0.2
15 | 


--------------------------------------------------------------------------------
/config.py:
--------------------------------------------------------------------------------
 1 | from dotenv import load_dotenv
 2 | import os
 3 | 
 4 | load_dotenv()
 5 | 
 6 | user = os.environ["MYSQL_USER"]
 7 | password = os.environ["MYSQL_PASSWORD"]
 8 | host = os.environ["MYSQL_HOST"]
 9 | database = os.environ["MYSQL_DATABASE"]
10 | 
11 | DATABASE_CONNECTION_URI = f'mysql://{user}:{password}@{host}/{database}'
12 | print(DATABASE_CONNECTION_URI)
13 | 


--------------------------------------------------------------------------------
/templates/partials/_message.html:
--------------------------------------------------------------------------------
 1 | {% with messages = get_flashed_messages() %} {% if messages %} {% for message in
 2 | messages %}
 3 | <div class="alert alert-info alert-dismissible fade show" role="alert">
 4 |   {{message}}
 5 |   <button
 6 |     type="button"
 7 |     class="btn-close"
 8 |     data-bs-dismiss="alert"
 9 |     aria-label="Close"
10 |   ></button>
11 | </div>
12 | {% endfor %} {% endif %} {% endwith %}
13 | 


--------------------------------------------------------------------------------
/models/contact.py:
--------------------------------------------------------------------------------
 1 | from utils.db import db
 2 | 
 3 | 
 4 | class Contact(db.Model):
 5 |     id = db.Column(db.Integer, primary_key=True)
 6 |     fullname = db.Column(db.String(100))
 7 |     email = db.Column(db.String(100))
 8 |     phone = db.Column(db.String(100))
 9 | 
10 |     def __init__(self, fullname, email, phone):
11 |         self.fullname = fullname
12 |         self.email = email
13 |         self.phone = phone
14 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3.9"
 2 | 
 3 | services:
 4 |   flask_app:
 5 |     container_name: "web"
 6 |     build: .
 7 |     ports:
 8 |       - "5000:5000"
 9 |     volumes:
10 |       - .:/code
11 |     links:
12 |       - flask_db
13 |   flask_db:
14 |     container_name: "database"
15 |     image: mysql
16 |     environment:
17 |       MYSQL_ROOT_PASSWORD: root
18 |       MYSQL_DATABASE: contactsdb
19 |     ports:
20 |       - "3306:3306"


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask
 2 | from routes.contacts import contacts
 3 | from flask_sqlalchemy import SQLAlchemy
 4 | from config import DATABASE_CONNECTION_URI
 5 | 
 6 | app = Flask(__name__)
 7 | 
 8 | # settings
 9 | app.secret_key = 'mysecret'
10 | print(DATABASE_CONNECTION_URI)
11 | app.config["SQLALCHEMY_DATABASE_URI"] = DATABASE_CONNECTION_URI
12 | app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
13 | 
14 | # no cache
15 | app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
16 | 
17 | SQLAlchemy(app)
18 | 
19 | app.register_blueprint(contacts)
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Flask SQLAlchemy CRUD
 2 | 
 3 | this project is a CRUD application using flask and mysql using SQLAlchemy
 4 | 
 5 | ### Installation with docker-compose
 6 | 
 7 | ```
 8 | git clone https://github.com/FaztWeb/flask-sqlalchemy-crud
 9 | cd flask-sqlalchemy-crud
10 | docker-compose up
11 | ```
12 | 
13 | ### Manual Installation
14 | 
15 | ##### Requirements
16 | 
17 | * Python3
18 | * Mysql
19 | 
20 | before run the app you must create the following environnment variables:
21 | 
22 | ```
23 | MYSQL_USER=
24 | MYSQL_PASSWORD=
25 | MYSQL_DATABASE=
26 | MYSQL_HOST=
27 | MYSQL_PORT=
28 | ```
29 | 
30 | ```
31 | git clone https://github.com/FaztWeb/flask-sqlalchemy-crud
32 | cd flask-sqlalchemy-crud
33 | pip install -r requirements.txt
34 | python index.py
35 | ```
36 | 


--------------------------------------------------------------------------------
/templates/partials/_navbar.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-expand-lg navbar-dark bg-black">
 2 |   <div class="container">
 3 |     <a class="navbar-brand" href="/">Flask SQLAlchemy CRUD</a>
 4 |     <button
 5 |       class="navbar-toggler"
 6 |       type="button"
 7 |       data-bs-toggle="collapse"
 8 |       data-bs-target="#navbarNav"
 9 |       aria-controls="navbarNav"
10 |       aria-expanded="false"
11 |       aria-label="Toggle navigation"
12 |     >
13 |       <span class="navbar-toggler-icon"></span>
14 |     </button>
15 |     <div class="collapse navbar-collapse" id="navbarNav">
16 |       <ul class="navbar-nav ms-auto">
17 |         <li class="nav-item">
18 |           <a class="nav-link active" aria-current="page" href="/about">About</a>
19 |         </li>
20 |       </ul>
21 |     </div>
22 |   </div>
23 | </nav>
24 | 


--------------------------------------------------------------------------------
/templates/partials/_taskForm.html:
--------------------------------------------------------------------------------
 1 | <form action="/new" method="POST" class="card bg-black text-light">
 2 |   <div class="card-body p-4">
 3 |     <h1 class="h5 mb-4">Add Contact</h1>
 4 | 
 5 |     <div class="mb-3">
 6 |       <label for="fullname">Write your fullname:</label>
 7 |       <input
 8 |         type="text"
 9 |         name="fullname"
10 |         class="form-control rounded-0 bg-dark border-0 text-white"
11 |         placeholder="Write fullname"
12 |         autofocus
13 |       />
14 |     </div>
15 | 
16 |     <div class="mb-3">
17 |       <label for="email">Write your email:</label>
18 |       <input
19 |         type="text"
20 |         name="email"
21 |         class="form-control rounded-0 bg-dark border-0 text-white"
22 |         placeholder="Write your email"
23 |         required
24 |       />
25 |     </div>
26 | 
27 |     <div class="mb-3">
28 |       <label for="phone">Write your phone:</label>
29 |       <input
30 |         type="text"
31 |         name="phone"
32 |         class="form-control rounded-0 bg-dark border-0 text-white"
33 |         placeholder="+12123123123"
34 |       />
35 |     </div>
36 | 
37 |     <button class="btn btn-primary">Save</button>
38 |   </div>
39 | </form>
40 | 


--------------------------------------------------------------------------------
/templates/layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>{% block title %} {% endblock %}</title>
 8 |     <!-- <link
 9 |       rel="stylesheet"
10 |       href="{{url_for('static', filename='css/bootstrap.min.css')}}"
11 |     /> -->
12 |     <link
13 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
14 |       rel="stylesheet"
15 |       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
16 |       crossorigin="anonymous"
17 |     />
18 |     <link
19 |       rel="stylesheet"
20 |       href="{{url_for('static', filename='css/main.css')}}"
21 |     />
22 |   </head>
23 |   <body>
24 |     {% include 'partials/_navbar.html' %}
25 | 
26 |     <div class="container p-2">{% block body %} {% endblock %}</div>
27 | 
28 |     <!-- scripts -->
29 |     <script
30 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
31 |       integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
32 |       crossorigin="anonymous"
33 |     ></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/templates/update.html:
--------------------------------------------------------------------------------
 1 | {% extends "layout.html" %} {% block body %}
 2 | 
 3 | <div class="col-md-4 offset-md-4">
 4 |   <div class="card card-body bg-dark text-white">
 5 |     <h1>Edit Task</h1>
 6 | 
 7 |     <form action="{{url_for('contacts.update', id=contact.id)}}" method="POST">
 8 |       <div class="mb-3">
 9 |         <label for="fullname">Write your fullname:</label>
10 |         <input
11 |           type="text"
12 |           name="fullname"
13 |           value="{{contact.fullname}}"
14 |           class="form-control bg-dark text-white rounded-0"
15 |         />
16 |       </div>
17 |       <div class="mb-3">
18 |         <label for="email">Write your email:</label>
19 |         <input
20 |           type="email"
21 |           name="email"
22 |           value="{{contact.email}}"
23 |           class="form-control bg-dark text-white rounded-0"
24 |         />
25 |       </div>
26 |       <div class="mb-3">
27 |         <label for="phone">Write your phone:</label>
28 |         <input
29 |           type="tel"
30 |           name="phone"
31 |           value="{{contact.phone}}"
32 |           class="form-control bg-dark text-white rounded-0"
33 |         />
34 |       </div>
35 | 
36 |       <button class="btn btn-primary">Update</button>
37 |     </form>
38 |   </div>
39 | </div>
40 | 
41 | {% endblock %}
42 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | 
 3 | {% block title %}
 4 |   Flask SQLAlchemy CRUD | Home 
 5 | {% endblock %}
 6 | 
 7 | {% block body %}
 8 | 
 9 |     <!-- FORM -->
10 |     <div class="row">
11 | 
12 |     <div class="col-md-5 p-5">
13 |       <!-- MESSAGE -->
14 |       {% include 'partials/_message.html' %}
15 | 
16 |       <!-- FORM -->
17 |       {%  include 'partials/_taskForm.html' %}
18 |     </div>
19 | 
20 |     <!-- contacts list -->
21 |     <div class="col-md-7">
22 |       {% for contact in contacts %}
23 |         <div class="card mb-1 bg-black text-white">
24 |           <div class="card-body py-2 px-3">
25 |             <div class="d-flex justify-content-between">
26 |               <h5 class="card-title h6">{{ contact.fullname}}</h5>
27 |               <div>
28 |                 <a href="{{ url_for('contacts.update', id=contact.id) }}" class="btn btn-dark btn-sm rounded-0">Edit</a>
29 |                 <a href="{{ url_for('contacts.delete', id=contact.id) }}" class="btn btn-danger btn-sm rounded-0">Delete</a>
30 |               </div>
31 |             </div>
32 |             <p class="card-text">{{ contact.email }}</p>
33 |             <p class="card-text">{{ contact.phone }}</p>
34 |           </div>
35 |         </div>
36 |       {% endfor %}
37 |     </div>
38 |   </div>
39 |     </div>
40 | 
41 | 
42 | 
43 | 
44 | {% endblock %}
45 | 


--------------------------------------------------------------------------------
/routes/contacts.py:
--------------------------------------------------------------------------------
 1 | from flask import Blueprint, render_template, request, redirect, url_for, flash
 2 | from models.contact import Contact
 3 | from utils.db import db
 4 | 
 5 | contacts = Blueprint("contacts", __name__)
 6 | 
 7 | 
 8 | @contacts.route('/')
 9 | def index():
10 |     contacts = Contact.query.all()
11 |     return render_template('index.html', contacts=contacts)
12 | 
13 | 
14 | @contacts.route('/new', methods=['POST'])
15 | def add_contact():
16 |     if request.method == 'POST':
17 | 
18 |         # receive data from the form
19 |         fullname = request.form['fullname']
20 |         email = request.form['email']
21 |         phone = request.form['phone']
22 | 
23 |         # create a new Contact object
24 |         new_contact = Contact(fullname, email, phone)
25 | 
26 |         # save the object into the database
27 |         db.session.add(new_contact)
28 |         db.session.commit()
29 | 
30 |         flash('Contact added successfully!')
31 | 
32 |         return redirect(url_for('contacts.index'))
33 | 
34 | 
35 | @contacts.route("/update/<string:id>", methods=["GET", "POST"])
36 | def update(id):
37 |     # get contact by Id
38 |     print(id)
39 |     contact = Contact.query.get(id)
40 | 
41 |     if request.method == "POST":
42 |         contact.fullname = request.form['fullname']
43 |         contact.email = request.form['email']
44 |         contact.phone = request.form['phone']
45 | 
46 |         db.session.commit()
47 | 
48 |         flash('Contact updated successfully!')
49 | 
50 |         return redirect(url_for('contacts.index'))
51 | 
52 |     return render_template("update.html", contact=contact)
53 | 
54 | 
55 | @contacts.route("/delete/<id>", methods=["GET"])
56 | def delete(id):
57 |     contact = Contact.query.get(id)
58 |     db.session.delete(contact)
59 |     db.session.commit()
60 | 
61 |     flash('Contact deleted successfully!')
62 | 
63 |     return redirect(url_for('contacts.index'))
64 | 
65 | 
66 | @contacts.route("/about")
67 | def about():
68 |     return render_template("about.html")
69 | 


--------------------------------------------------------------------------------
/templates/about.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.html' %}
 2 | 
 3 | {% block body %}
 4 | 
 5 | <div class="row text-white">
 6 |   <h1>About</h1>
 7 |   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem doloribus molestiae harum in, reprehenderit ipsa architecto totam a blanditiis aut corrupti ratione pariatur delectus quod asperiores, adipisci ipsam veritatis quos animi, necessitatibus sit consequatur. Aliquam quibusdam, laudantium dolore iste aspernatur quaerat, nostrum sequi illum tempore, laborum explicabo nesciunt quasi asperiores officia vitae beatae rem aliquid molestias consectetur exercitationem similique ab? Impedit esse labore dignissimos ut sit, facilis eaque error minima ipsam sint porro hic a atque quaerat excepturi autem perspiciatis dicta officia eum veniam maxime at! Mollitia assumenda ratione atque. Consequatur architecto voluptas esse delectus qui sunt eligendi perferendis, voluptatum, nemo, expedita provident. Corrupti adipisci deleniti sint ullam ut veniam similique ratione ipsam. Qui iste nulla possimus necessitatibus odit magnam laboriosam obcaecati alias ex saepe libero non quos at dignissimos hic neque reprehenderit aut, sit distinctio? Omnis dolor dignissimos autem minus asperiores amet, ipsum animi architecto sit quisquam ab laudantium molestias, sapiente nostrum accusamus quia qui nobis. Sunt reiciendis at, voluptatum similique eius aperiam molestiae nemo rerum, iste qui maxime iusto omnis expedita excepturi vitae aliquam dolorum doloribus commodi. Hic dolores in dolorem tenetur laborum similique error fuga vitae cum! Architecto, odio aut tempore eius autem iure reiciendis corporis perferendis neque veritatis quis sapiente libero ipsa voluptas labore fuga exercitationem alias nobis facilis qui numquam illum. Accusamus, quam nihil illo recusandae pariatur repellendus dolorem aliquid maiores amet ab omnis officiis esse nobis animi magnam dolore corrupti, quidem natus. Illo praesentium corrupti cumque voluptatibus deleniti, hic facilis maiores provident harum unde rem quisquam facere ex ducimus odio. Laborum excepturi voluptatibus dolorem doloribus. Labore corporis non obcaecati blanditiis dolorum facilis sequi, suscipit quam cum. Aliquam vitae voluptatem, consectetur iste repellat nulla fugit odio rerum rem minus architecto tempora, eveniet facilis nam nostrum suscipit? Delectus, consequatur repudiandae eos deserunt omnis modi quos perspiciatis.</p>
 8 | </div>
 9 | 
10 | {% endblock %}
11 | 
12 | 


--------------------------------------------------------------------------------