create a db (not fully finish)

README.md

@@ -1 +1,19 @@
-# Front-end-Design-Project
+# Media library tracker
+a lightweight web application to manage and track progress for Books and TV Shows using a unified SQLite database
+
+# Feature
+- Unified Database: One central hub for all media types using SQL table inheritance.
+
+- Progress Tracking: Track pages read for books and episodes watched for shows.
+
+- Dynamic UI: Responsive HTML info cards that change color/content based on media type.
+
+- SQLite Backend: No complex database setup required—just a single .db file.
+
+# Tech Stack
+
+  Language: Python 3.x
+
+  Database: SQLite3
+
+  Frontend: HTML5, CSS3 (Flexbox/Grid)

app.py

@@ -0,0 +1,27 @@
+from flask import Flask , render_template
+import sqlite3
+
+app = Flask(__name__)
+
+def get_db_connect():
+    conn = sqlite3.connection("./db/my_library.db")
+    conn.row_factory = sqlite3.Row
+    return conn
+
+@app.route('/')
+def index():
+    conn = sqlite3.connection("./db/my_library.db")
+    query = """
+    SELECT m.title, m.type, m.release_year, m.rating,
+            b.author, s.network
+    FROM media m
+    LEFT JOIN books b on m.id = b.books_id
+    LEFT JOIN shows s on m.id = s.shows_id
+    """
+    items = conn.execute(query).fetchall()
+    conn.close()
+
+if __name__ == '__main__':
+    app.run(debug = True)
+
+    

db/BookandMovieDB.py

@@ -0,0 +1,76 @@
+import sqlite3
+
+def init_db():
+    conn = sqlite3.connect('my_library.db')
+    cursor = conn.cursor()
+
+    cursor.executescript('''
+        CREATE A TABLE IF NOT EXISTS media(
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            title TEXT NOT NULL,
+            type TEXT CHECK(type IN ('Book', 'Show')),
+            release_year INTEGER
+            );
+        
+        CREATE A TABLE IF NOT EXISTS books(
+            book_id INTEGER PRIMARY KEY,
+            author TEXT,
+            page INTEGER,
+            FOREIGN KEY (book_id) REFERENCES media (id)
+        );
+
+        CREATE A TABLE IF NOT EXISTS shows(
+            show_id INTEGER PRIMARY KEY,
+            network TEXT,
+            episodes INTEGER,
+            FOREIGN KEY (show_id) REFERENCES media (id)
+        );
+                         ''')
+    conn.commit()
+    conn.close()
+
+def add_book(title , year, author, page):
+    conn = sqlite3.connect('my_library.db')
+    cursor = conn.cursor()
+
+    cursor.execute("INSERT INTO media (title, type, release_year) VALUES (?, 'Book', ?)", (title, year))
+    last_id = cursor.lastrowid
+    cursor.execute("INSERT INTO books (book_id, author, pages) VALUES (?, ?, ?)", (last_id, author, pages))
+
+    conn.commit()
+    conn.close()
+    print(f"Added {title} successfully!")
+
+def add_shows(title , year, network, episodes):
+    conn = sqlite3.connect('my_library')
+    cursor = conn.cursor()
+
+    cursor.execute("INSERT INTO media(title, type, release_year) VALUES (?, 'Show',?)" , (title, year))
+    last_id = cursor.lastrowid
+    cursor.execute("INSERT INTO shows(show_id , network , episodes) VALUES (?,?,?)" , (last_id,network,episodes))
+    conn.commit()
+    conn.close()
+    print(f"Added {title} successfully!")
+
+#fetch 
+def get_all_media():
+    conn = sqlite3.connect('my_library.db')
+    # This line makes results behave like dictionaries (e.g., row['title'])
+    conn.row_factory = sqlite3.Row 
+    cursor = conn.cursor()
+
+    query = """
+    SELECT m.title, m.type, b.author, s.network
+    FROM media m
+    LEFT JOIN books b ON m.id = b.book_id
+    LEFT JOIN shows s ON m.id = s.show_id
+    """
+    
+    rows = cursor.execute(query).fetchall()
+    conn.close()
+    return rows
+
+# Print the results
+for item in get_all_media():
+    print(f"{item['title']} ({item['type']})")
+

main.html

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang = "en">
 <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/d.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Show log</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
 </head>
 <body>
     <div id = "body">
@@ -16,12 +16,25 @@
        <h1>
          Book and Movie log
        </h1>
-       <div id = "navagtor">
+        <div id = "navagtor">
         <!--dashboard-->
        <!--let user add book/ show-->
        <!--consider a toggle for book and show-->
        <!--let user seach for book-->
-       </div>
+          <ul id = "menu">
+            <li>
+              <a href="">Dashboard</a>
+            </li>
+            <li>
+              <a href="">Log</a>
+            </li>
+            <li>
+              <a href="">Stats</a>
+            </li>
+
+          </ul>
+          <!--maybe add a shelve-->
+        </div>
       </div>
       <!--this is where they show the info for the book/ maybe make it into a data base-->
       <div id ="libary">
@@ -67,8 +80,7 @@
         </div>
       </div>
     </div>
-        <!--Bootstrap Bundle with Popper -->
+    <!--Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-
 </body>
 </html>