diff --git a/FLASK PROJECTS/E-commerce/app.py b/FLASK PROJECTS/E-commerce/app.py index 53f5b508..f4b3a878 100644 --- a/FLASK PROJECTS/E-commerce/app.py +++ b/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""" + + diff --git a/FLASK PROJECTS/E-commerce/flask.png b/FLASK PROJECTS/E-commerce/flask.png new file mode 100644 index 00000000..d4bbc6e2 Binary files /dev/null and b/FLASK PROJECTS/E-commerce/flask.png differ diff --git a/FLASK PROJECTS/E-commerce/readme.md b/FLASK PROJECTS/E-commerce/readme.md new file mode 100644 index 00000000..9bb9ecf8 --- /dev/null +++ b/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 + + + +](https://github.com/tarenjk24) + + +--- \ No newline at end of file diff --git a/FLASK PROJECTS/E-commerce/requirements.txt b/FLASK PROJECTS/E-commerce/requirements.txt new file mode 100644 index 00000000..1e9cc3dc --- /dev/null +++ b/FLASK PROJECTS/E-commerce/requirements.txt @@ -0,0 +1,4 @@ + +Flask +Flask-Session +requests \ No newline at end of file diff --git a/FLASK PROJECTS/E-commerce/shop.db b/FLASK PROJECTS/E-commerce/shop.db new file mode 100644 index 00000000..1b1279b4 Binary files /dev/null and b/FLASK PROJECTS/E-commerce/shop.db differ diff --git a/FLASK PROJECTS/E-commerce/templates/apology.html b/FLASK PROJECTS/E-commerce/templates/apology.html new file mode 100644 index 00000000..a414a390 --- /dev/null +++ b/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 %} diff --git a/FLASK PROJECTS/E-commerce/templates/cart.html b/FLASK PROJECTS/E-commerce/templates/cart.html new file mode 100644 index 00000000..5bcd681b --- /dev/null +++ b/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 %} diff --git a/FLASK PROJECTS/E-commerce/templates/checkout.html b/FLASK PROJECTS/E-commerce/templates/checkout.html new file mode 100644 index 00000000..b7f3d350 --- /dev/null +++ b/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> + </div> + + + <!-- Submit button for the check-out form --> + <button class="button-35" type="submit">Submit</button> + </span> + </form> + </div> +</div> +{% endblock %} diff --git a/FLASK PROJECTS/E-commerce/templates/index.html b/FLASK PROJECTS/E-commerce/templates/index.html index e69de29b..3a517b55 100644 --- a/FLASK PROJECTS/E-commerce/templates/index.html +++ b/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 %} diff --git a/FLASK PROJECTS/E-commerce/templates/layout.html b/FLASK PROJECTS/E-commerce/templates/layout.html new file mode 100644 index 00000000..51aac114 --- /dev/null +++ b/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/bootstrap@5.2.3/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> diff --git a/FLASK PROJECTS/E-commerce/templates/login.html b/FLASK PROJECTS/E-commerce/templates/login.html new file mode 100644 index 00000000..0828b901 --- /dev/null +++ b/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 %} + diff --git a/FLASK PROJECTS/E-commerce/templates/payment.html b/FLASK PROJECTS/E-commerce/templates/payment.html new file mode 100644 index 00000000..66172d1f --- /dev/null +++ b/FLASK PROJECTS/E-commerce/templates/payment.html @@ -0,0 +1,38 @@ +{% extends "layout.html" %} + +{% block title %} + Payment +{% endblock %} + +{% block main %} +<!-- Link to external CSS file --> +<link href="/static/form.css" rel="stylesheet"> + +<!-- Stack area and center div --> +<div class="stack-area"> + <div class="center" id="div"> + <!-- Payment form section --> + <div class="payment-form"> + <form action="/payment" method="post" class="payment-form"> + + <span class="section"> + <!-- Head section for payment method selection --> + + <div class="head">Select a Payment Method:</div> + <span class="inputf"> + <!-- Payment option for cash on delivery --> + <div class="payment-option"> + <a href="{{ url_for('checkout') }}"> <label for="cash" class="cash">Pay Cash on Delivery</label></a> + </div> + + <!-- Payment option for other payment methods --> + <div class="payment-option"> + <a href="{{ url_for('comingsoon') }}"> <label for="other" class="cash">Pay by Other Methods</label></a> + </div> + + </span> + </div> + </form> + </div> +</div> +{% endblock %} diff --git a/FLASK PROJECTS/E-commerce/templates/productdetails.html b/FLASK PROJECTS/E-commerce/templates/productdetails.html new file mode 100644 index 00000000..0e9863e8 --- /dev/null +++ b/FLASK PROJECTS/E-commerce/templates/productdetails.html @@ -0,0 +1,74 @@ +{% extends "layout.html" %} + +{% block title %} + productdetails +{% endblock %} + +{% block main %} + +<!-- Link to external CSS file --> +<link href="/static/productdetails.css" rel="stylesheet"> + +<!-- Stack area and center div --> +<div class="stack-area"> +<div class="center" id="div"> +<div class="container mt-5"> + {% for detail in details %} + + <!-- Product name --> + <h1>{{ detail.name }}</h1> + <!-- Icon for navigating back with an attached event handler --> + <i class="fa-solid fa-reply" style="color: #000000; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="goBack()"></i> + + <!-- JavaScript function to navigate back --> + <script> + function goBack() { + window.history.back(); + } + </script> + <!-- Row for product details --> + <div class="row mt-4"> + <!-- Column for product image --> + <div class="col-md-6"> + <img src="{{ detail.cover }}" alt="{{ detail.title }}"> + </div> + <!-- Column for product details --> + <div class="col-md-6"> + <h2>Details:</h2> + <h5>{{ detail.description }}</h5> + <h2>Price: <h5>{{ detail.price|usd }}</h5></h2> + {% if session["user_id"] %} + <!-- Form for adding product to the cart --> + <form method="POST" action="/addtocart/{{ detail.id }}" > + <h2>Quantity:</h2> + <div class="form-group"> + <div class="row-md-6"> + + <!-- Input field for quantity --> + <input type="number" id="frequency" name="frequency" class="form-control" min="1" required placeholder="0"> + <input type="hidden" name="id" value="{{ detail.id }}"> + + <!-- Button to add to cart --> + <button type="submit" class="btn">Add to Cart</button> + <!-- Link to checkout page --> + <a href="/payment" class="btn "> Check Out</a> + {% else %} + <a href="{{ url_for('login') }}"><p>Click here to log in and add the product to your cart. + *</p></a> + {% endif %} + {% endfor %} + + </div> </div> + + </form> + + </div> + </div> + + <hr> + + +</div> +</div> +</div> +{% endblock %} diff --git a/FLASK PROJECTS/E-commerce/templates/profile.html b/FLASK PROJECTS/E-commerce/templates/profile.html new file mode 100644 index 00000000..c8ac8428 --- /dev/null +++ b/FLASK PROJECTS/E-commerce/templates/profile.html @@ -0,0 +1,89 @@ +{% extends "layout.html" %} + +{% block title %} + Profile +{% endblock %} + +{% block main %} +<!-- Link to external CSS file for styling the page --> +<link href="/static/profile.css" rel="stylesheet"> + +<!-- Container for profile information --> +<div class="center"> + <div class="area"> + <div class="left"> + <div class="info"> + <h2 class="text-center my-4">Personal Information</h2> + <!-- Displaying username --> + <p><strong>Username:</strong> {{ user_data["username"] }}</p> + + <!-- Table for displaying personal information --> + <table class="table table-grey table-hover"> + <thead> + <tr> + <th class="text-start">address</th> + <th class="text-end">city</th> + <th class="text-end">postal code</th> + <th class="text-end">phone number</th> + </tr> + </thead> + <tbody> + <!-- Check if there is no information available --> + {% if not orders %} + <tr> + <td colspan="5">No information available.</td> + </tr> + {% else %} + <!-- Iterate through the information --> + {% for order in orders %} + <tr> + <td class="text-start">{{ order.address }}</td> + <td class="text-end">{{ order.city }}</td> + <td class="text-end">{{ order.postal_code }}</td> + <td class="text-end">{{ order.phone_number }}</td> + </tr> + {% endfor %} + {% endif %} + </tbody> + </table> + + </div> + <div class="info"> + <h2>Your Order History</h2> + <!-- Table for displaying order history --> + <table class="table table-grey table-hover"> + <thead> + <tr> + <th>Order Number</th> + <th>Order Date</th> + <th>Total Amount</th> + </tr> + </thead> + <tbody> + <!-- Check if there is no order history available --> + {% if not orders %} + <tr> + <td colspan="3">No order history available.</td> + </tr> + {% else %} + <!-- Iterate through the order history --> + {% for order in orders %} + <tr> + <td>{{ order.id }}</td> + <td>{{ order.history }}</td> + {% endfor %} + + <td>{{ total_amount|usd }}</td> + </tr> + {% endif %} + </tbody> + </table> + <!-- Links for removing account and checking the cart --> + <p><a href="/remove">Remove Account</a></p> + <p><a href="/cart">Check cart</a></p> + </div> + </div> + </div> +</div> + +{% endblock %} diff --git a/FLASK PROJECTS/E-commerce/templates/register.html b/FLASK PROJECTS/E-commerce/templates/register.html new file mode 100644 index 00000000..43251030 --- /dev/null +++ b/FLASK PROJECTS/E-commerce/templates/register.html @@ -0,0 +1,43 @@ +{% extends "layout.html" %} + +{% block title %} + register +{% endblock %} + +{% block main %} +<!-- Link to external CSS file for styling the page --> +<link href="/static/form.css" rel="stylesheet"> + +<!-- Form for user registration --> +<div class="stack-area"> + <div class="center" id="div"> + <form action="/register" method="post"> + <span class="section"> + <div class="head">Sign up</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> + + <!-- Input field for password confirmation --> + <span class="inputf"> + <label for="password" class="label"> Confirm your password: </label> + <input class="form-control mx-auto w-auto" name="confirmation" placeholder="Password (again)" type="password" required=""> + </span> + + <!-- Button to submit the registration form --> + <span class="btn"> + <button class="button-35" type="submit">Sign up</button> + </span> + </form> + </div> +</div> +{% endblock %} diff --git a/README.md b/README.md index dea7b86d..8505b537 100644 --- a/README.md +++ b/README.md @@ -122,4 +122,6 @@ guide [HERE](https://github.com/larymak/Python-project-Scripts/blob/main/CONTRIB | 73 | [Logging Helper](https://github.com/larymak/Python-project-Scripts/tree/main/OTHERS/add-multiprocessing-logger) | [Jerry W.](https://github.com/Jerry0420) | | 74 | [Notepad](https://github.com/larymak/Python-project-Scripts/tree/main/PYTHON%20APPS/Notepad) | [Annarhysa Albert](https://github.com/Annarhysa) | | 75 | [Quadratic Equation Solver](https://github.com/larymak/Python-project-Scripts/tree/main/GUI/Quadratic-Equation-Solver) | [Akinfenwa Ezekiel](https://github.com/Ezek-iel) | -| 76 | [Internet Connectivity Monitor](https://github.com/larymak/Python-project-Scripts/tree/main/AUTOMATION/InternetConnectivityMonitor) | [Prince Khunt](https://github.com/princekhunt) | \ No newline at end of file +| 76 | [Internet Connectivity Monitor](https://github.com/larymak/Python-project-Scripts/tree/main/AUTOMATION/InternetConnectivityMonitor) | [Prince Khunt](https://github.com/princekhunt) | +| 76 | [E-commerce](https://github.com/larymak/Python-project-Scripts/tree/main/FLASK%20PROJECTS/E-commerce) | [Eter Nada](https://github.com/tarenjk24) | +