readme file preparing for the script

FLASK PROJECTS/E-commerce/app.py

@@ -25,7 +25,7 @@
 Session(app)
 
 # Configure CS50 Library to use SQLite database
-db = SQL("sqlite:///library.db")
+db = SQL("sqlite:///shop.db")
 
 
 @app.after_request
@@ -370,4 +370,10 @@ def cart():
     return render_template("cart.html", rows=rows)
 
 
+# payment methods
+@app.route("/productdetails/<int:id>", methods=["GET", "POST"])
+def methods(id):
+    """ methods for payment"""
 
+
+

FLASK PROJECTS/E-commerce/readme.md

@@ -0,0 +1,27 @@
+# Shop
+<p align="center">
+  <img src="/flask.png" alt="alt text">
+</p>
+
+---
+## Description
+Hi, this my attempt to build a script for an e-commerce web app using Flask.
+### Templates:
+
+* The index template serves as the catalog for the shop's products. 
+* Cart template deal with user's transactions 
+* Payment template
+* The products template displays all products . 
+
+### other files:
+
+* Database.
+* helpers-- functions that help.
+* App-- main script
+
+
+
+![github](https://img.shields.io/badge/github-000000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/tarenjk24)
+
+
+---

FLASK PROJECTS/E-commerce/requirements.txt

@@ -0,0 +1,4 @@
+
+Flask
+Flask-Session
+requests

FLASK PROJECTS/E-commerce/templates/apology.html

@@ -0,0 +1,10 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Apology
+{% endblock %}
+
+{% block main %}
+    <!-- https://memegen.link/ -->
+    <img alt="{{ top }}" class="border img-fluid" src="http://memegen.link/custom/{{ top | urlencode }}/{{ bottom | urlencode }}.jpg?alt=https://i.imgur.com/CsCgN7Ll.png&width=400" title="{{ top }}">
+{% endblock %}

FLASK PROJECTS/E-commerce/templates/cart.html

@@ -0,0 +1,46 @@
+{% extends "layout.html" %}
+
+{% block title %}
+   Cart
+{% endblock %}
+{% block main %}
+
+<!-- Link to external CSS file for styling the page -->
+<link href="/static/profile.css" rel="stylesheet">
+
+<!-- Container for the cart information -->
+<div class="center">
+    <div class="area">
+      <div class="left">
+            <div class="info">
+          <!-- Heading for the cart section -->
+          <h2 class="text-center my-4">Your Cart</h2>
+            <!-- Table for displaying cart information -->
+            <table class="table table-grey table-hover">
+            <thead>
+              <tr>
+                <th class="text-start">Cover</th>
+                <th class="text-end">Product Name</th>
+                <th class="text-end">Quantity</th>
+                <th class="text-end">Price</th>
+              </tr>
+            </thead>
+             <!-- Iterate through the cart  -->
+            <tbody> {% for row in rows %}
+                <tr>
+                <td class="text-start">
+                  <img src="{{ row.cover }}" alt="{{ row.title }}">
+                </td>
+                <td class="text-end">{{ row.name }}</td>
+                <td class="text-end">{{ row.quantity }}</td>
+                <td class="text-end">{{ row.price }}</td>
+              </tr> {% endfor %}
+            </tbody>
+          </table>
+        <!-- Link to navigate back to the catalog page or to check out -->
+        <a href="/payment">Check Out</a>
+        <a href="/">Back to Catalog</a>
+      </div>
+    </div>
+</div>
+{% endblock %}

FLASK PROJECTS/E-commerce/templates/checkout.html

@@ -0,0 +1,57 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Check Out
+{% endblock %}
+
+{% block main %}
+<!-- Link to external CSS file for styling the form -->
+<link href="/static/form.css" rel="stylesheet">
+
+<!-- Container for the check-out form -->
+<div class="stack-area">
+    <div class="center" id="div">
+        <!-- Form for checking out -->
+        <form action="/checkout" method="post">
+            <span class="section">
+                <!-- Heading for the check-out section -->
+                <div class="head">Check Out</div>
+
+                <!-- Form input fields for the city, state, address, postal code, phone number, and delivery note -->
+                <span class="inputf">
+                    <label for="city">City:</label>
+                    <input name="city" placeholder="e.g. Razi" type="text" autofocus class="form-control mx-auto w-auto">
+                </span>
+
+                <span class="inputf">
+                    <label for="address">Address:</label>
+                    <input name="address" placeholder="e.g. Street name - House number - State - Tunisia" type="text" autofocus class="form-control mx-auto w-auto">
+                </span>
+
+                <span class="inputf">
+                    <label for="postal_code">Postal Code:</label>
+                    <input name="postal_code" placeholder="e.g. 1240" type="text" autofocus class="form-control mx-auto w-auto">
+                </span>
+
+                <span class="inputf">
+                    <label for="phone_number">Phone Number:</label>
+                    <input name="phone_number" placeholder="e.g. 216+" type="text" autofocus class="form-control mx-auto w-auto">
+                </span>
+
+
+
+                <!-- Links for additional information and creating a new account -->
+                <div class="info">
+                    <a href="/delivery_information"><span>Delivery Information!</span></a>
+                    <hr>
+                    <a href="/register"><span>No account? Create one!</span></a>&nbsp;&nbsp;&nbsp;
+                </div>
+                &nbsp;&nbsp;
+
+                <!-- Submit button for the check-out form -->
+                <button class="button-35" type="submit">Submit</button>
+            </span>
+        </form>
+    </div>
+</div>
+{% endblock %}

FLASK PROJECTS/E-commerce/templates/index.html

@@ -0,0 +1,51 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Index
+{% endblock %}
+
+{% block main %}
+<!-- Link to external CSS file for styling the page -->
+<link href="/static/products.css" rel="stylesheet">
+
+<!-- Section for displaying featured books -->
+<section id="product1" class="section-p1">
+  <!-- Heading for the featured books section -->
+  <div class="title-1">Featured Products</div>
+
+
+
+    <!-- Container for the product items -->
+    <div class="pro-container">
+      <div class="part">
+          <ul class="row">
+          <!-- Icon for navigating back to the previous page -->
+  <i class="fa-solid fa-reply" style="color: #000000;cursor: pointer;display: flex; justify-content: space-between; align-items: center;"  onclick="goBack()"></i>
+
+  <!-- Script for the goBack function to navigate back in the browser history -->
+  <script>
+      function goBack() {
+          window.history.back();
+      }
+  </script>
+
+        <!-- Loop through each book in the list of books -->
+        {% for product in products %}
+          <li class="col-xs-6 col-md-3">
+            <div class="pro">
+              <!-- Display the book cover and name -->
+              <img src="{{ product.cover }}" alt="{{ product.name }}">
+              <div class="des">
+                <span>{{ product.category }}</span>
+                <h5>{{ product.name }}</h5>
+                <h4>{{ product.price }}</h4>
+                <a href="{{ url_for('productdetails', id=product.id) }}"> details </a>
+              </div>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
+</div>
+</section>
+{% endblock %}

FLASK PROJECTS/E-commerce/templates/layout.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <!-- Bootstrap CSS and Font Awesome CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <!-- Your stylesheet -->
+    <link href="/static/styles.css" rel="stylesheet">
+
+    <title>shop {% block title %}{% endblock %}</title>
+
+  </head>
+  <body>
+
+    {% if get_flashed_messages() %}
+    <!-- Flash messages -->
+    <div id="header">
+     <div class="alert alert-primary mb-0 text-center" role="alert">
+       {{ get_flashed_messages() | join(" ") }}
+     </div>
+   </div>
+   {% endif %}
+
+<!-- Top Navigation Bar -->
+<div class="bar">
+  <div class="navbar" id="navbar">
+    <!-- Navigation items for logged-in users -->
+    {% if session["user_id"] %}
+    <ul >
+      <li>
+        <a class="button-52" href="/">Home</a>
+      </li>
+
+      <li>
+        <a class="button-52" href="/products">Products</a>
+      </li>
+      <li>
+        <a class="button-52" href="/profile">Profile</a>
+      </li>
+        <li>
+          <a class="button-52" href="/logout">Log Out</a>
+        </li>
+        <li>
+          <a c href="/cart"><i class="fa-solid fa-cart-shopping fa-beat" style="color: #1f1f1f;"></i></a>
+        </li>
+    </ul>
+
+
+
+    <!-- Navigation items for non-logged-in users -->
+    {% else %}
+    <ul>
+      <li>
+        <a class="button-52" href="/">Home</a>
+      </li>
+
+      <li>
+        <a class="button-52" href="/products">Products</a>
+      </li>
+
+      <li>
+        <a class="button-52" href="/login">Log In</a>
+      </li>
+
+    </ul>
+    {% endif %}
+
+  </div>
+
+  </div>
+
+    <!-- Hero Section -->
+    <div id="hero"></div>
+    {% if request.path == '/' %}
+    <!--Featured functions section-->
+    <div>
+
+
+
+
+    {% endif %}
+
+    <!-- Main Content Section -->
+    <div class="main"> {% block main %}{% endblock %} </div>
+
+    <!-- Footer Section -->
+    <footer class="section-p1">
+
+   <!-- Copyright information -->
+         <div class="copyright"> ©2024 </div>
+    </footer>
+  </body>
+</html>

FLASK PROJECTS/E-commerce/templates/login.html

@@ -0,0 +1,44 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Log In
+{% endblock %}
+
+{% block main %}
+<!-- Link to external CSS file for styling the page -->
+<link href="/static/form.css" rel="stylesheet">
+
+<!-- Form for user login -->
+<div class="stack-area">
+  <div class="center" id="div">
+    <form action="/login" method="post">
+      <span class="section">
+        <div class="head">Sign in</div>
+
+        <!-- Input field for username -->
+        <span class="inputf">
+          <label for="username" class="label"> Enter your username: </label>
+          <input autofocus class="form-control mx-auto w-auto" id="username" name="username" placeholder="Username" type="text" required>
+        </span>
+
+        <!-- Input field for password -->
+        <span class="inputf">
+          <label for="password" class="label"> Enter your password: </label>
+          <input class="form-control mx-auto w-auto" id="password" name="password" placeholder="Password" type="password" required="">
+        </span>
+
+        <!-- Link to the registration page for creating a new account -->
+        <div class="info">
+          <div class="info">
+            <a href="/register">No account? Create one!</a>
+          </div>
+        </div>
+
+          <!-- Button to submit the form -->
+          <button class="button-35" type="submit">Sign in</button>
+      </span>
+    </form>
+  </div>
+</div>
+{% endblock %}
+