Skip to content

Commit fd931fb

Browse files
larymaklarymak
authoredJul 19, 2024
Merge pull request #393 from tarenjk24/main
readme file preparing for the script
2 parents d661777 + f3c9d98 commit fd931fb

16 files changed

+589
-2
lines changed
 

‎FLASK PROJECTS/E-commerce/app.py

+7-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
Session(app)
2626

2727
# Configure CS50 Library to use SQLite database
28-
db = SQL("sqlite:///library.db")
28+
db = SQL("sqlite:///shop.db")
2929

3030

3131
@app.after_request
@@ -370,4 +370,10 @@ def cart():
370370
return render_template("cart.html", rows=rows)
371371

372372

373+
# payment methods
374+
@app.route("/productdetails/<int:id>", methods=["GET", "POST"])
375+
def methods(id):
376+
""" methods for payment"""
373377

378+
379+

‎FLASK PROJECTS/E-commerce/flask.png

107 KB
Loading

‎FLASK PROJECTS/E-commerce/readme.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Shop
2+
<p align="center">
3+
<img src="/flask.png" alt="alt text">
4+
</p>
5+
6+
---
7+
## Description
8+
Hi, this my attempt to build a script for an e-commerce web app using Flask.
9+
### Templates:
10+
11+
* The index template serves as the catalog for the shop's products.
12+
* Cart template deal with user's transactions
13+
* Payment template
14+
* The products template displays all products .
15+
16+
### other files:
17+
18+
* Database.
19+
* helpers-- functions that help.
20+
* App-- main script
21+
22+
23+
24+
![github](https://img.shields.io/badge/github-000000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/tarenjk24)
25+
26+
27+
---

‎FLASK PROJECTS/E-commerce/requirements.txt

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
Flask
3+
Flask-Session
4+
requests

‎FLASK PROJECTS/E-commerce/shop.db

44 KB
Binary file not shown.

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{% extends "layout.html" %}
2+
3+
{% block title %}
4+
Apology
5+
{% endblock %}
6+
7+
{% block main %}
8+
<!-- https://memegen.link/ -->
9+
<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 }}">
10+
{% endblock %}

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

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{% extends "layout.html" %}
2+
3+
{% block title %}
4+
Cart
5+
{% endblock %}
6+
{% block main %}
7+
8+
<!-- Link to external CSS file for styling the page -->
9+
<link href="/static/profile.css" rel="stylesheet">
10+
11+
<!-- Container for the cart information -->
12+
<div class="center">
13+
<div class="area">
14+
<div class="left">
15+
<div class="info">
16+
<!-- Heading for the cart section -->
17+
<h2 class="text-center my-4">Your Cart</h2>
18+
<!-- Table for displaying cart information -->
19+
<table class="table table-grey table-hover">
20+
<thead>
21+
<tr>
22+
<th class="text-start">Cover</th>
23+
<th class="text-end">Product Name</th>
24+
<th class="text-end">Quantity</th>
25+
<th class="text-end">Price</th>
26+
</tr>
27+
</thead>
28+
<!-- Iterate through the cart -->
29+
<tbody> {% for row in rows %}
30+
<tr>
31+
<td class="text-start">
32+
<img src="{{ row.cover }}" alt="{{ row.title }}">
33+
</td>
34+
<td class="text-end">{{ row.name }}</td>
35+
<td class="text-end">{{ row.quantity }}</td>
36+
<td class="text-end">{{ row.price }}</td>
37+
</tr> {% endfor %}
38+
</tbody>
39+
</table>
40+
<!-- Link to navigate back to the catalog page or to check out -->
41+
<a href="/payment">Check Out</a>
42+
<a href="/">Back to Catalog</a>
43+
</div>
44+
</div>
45+
</div>
46+
{% endblock %}

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

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{% extends "layout.html" %}
2+
3+
{% block title %}
4+
Check Out
5+
{% endblock %}
6+
7+
{% block main %}
8+
<!-- Link to external CSS file for styling the form -->
9+
<link href="/static/form.css" rel="stylesheet">
10+
11+
<!-- Container for the check-out form -->
12+
<div class="stack-area">
13+
<div class="center" id="div">
14+
<!-- Form for checking out -->
15+
<form action="/checkout" method="post">
16+
<span class="section">
17+
<!-- Heading for the check-out section -->
18+
<div class="head">Check Out</div>
19+
20+
<!-- Form input fields for the city, state, address, postal code, phone number, and delivery note -->
21+
<span class="inputf">
22+
<label for="city">City:</label>
23+
<input name="city" placeholder="e.g. Razi" type="text" autofocus class="form-control mx-auto w-auto">
24+
</span>
25+
26+
<span class="inputf">
27+
<label for="address">Address:</label>
28+
<input name="address" placeholder="e.g. Street name - House number - State - Tunisia" type="text" autofocus class="form-control mx-auto w-auto">
29+
</span>
30+
31+
<span class="inputf">
32+
<label for="postal_code">Postal Code:</label>
33+
<input name="postal_code" placeholder="e.g. 1240" type="text" autofocus class="form-control mx-auto w-auto">
34+
</span>
35+
36+
<span class="inputf">
37+
<label for="phone_number">Phone Number:</label>
38+
<input name="phone_number" placeholder="e.g. 216+" type="text" autofocus class="form-control mx-auto w-auto">
39+
</span>
40+
41+
42+
43+
<!-- Links for additional information and creating a new account -->
44+
<div class="info">
45+
<a href="/delivery_information"><span>Delivery Information!</span></a>
46+
<hr>
47+
<a href="/register"><span>No account? Create one!</span></a>&nbsp;&nbsp;&nbsp;
48+
</div>
49+
&nbsp;&nbsp;
50+
51+
<!-- Submit button for the check-out form -->
52+
<button class="button-35" type="submit">Submit</button>
53+
</span>
54+
</form>
55+
</div>
56+
</div>
57+
{% endblock %}

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{% extends "layout.html" %}
2+
3+
{% block title %}
4+
Index
5+
{% endblock %}
6+
7+
{% block main %}
8+
<!-- Link to external CSS file for styling the page -->
9+
<link href="/static/products.css" rel="stylesheet">
10+
11+
<!-- Section for displaying featured books -->
12+
<section id="product1" class="section-p1">
13+
<!-- Heading for the featured books section -->
14+
<div class="title-1">Featured Products</div>
15+
16+
17+
18+
<!-- Container for the product items -->
19+
<div class="pro-container">
20+
<div class="part">
21+
<ul class="row">
22+
<!-- Icon for navigating back to the previous page -->
23+
<i class="fa-solid fa-reply" style="color: #000000;cursor: pointer;display: flex; justify-content: space-between; align-items: center;" onclick="goBack()"></i>
24+
25+
<!-- Script for the goBack function to navigate back in the browser history -->
26+
<script>
27+
function goBack() {
28+
window.history.back();
29+
}
30+
</script>
31+
32+
<!-- Loop through each book in the list of books -->
33+
{% for product in products %}
34+
<li class="col-xs-6 col-md-3">
35+
<div class="pro">
36+
<!-- Display the book cover and name -->
37+
<img src="{{ product.cover }}" alt="{{ product.name }}">
38+
<div class="des">
39+
<span>{{ product.category }}</span>
40+
<h5>{{ product.name }}</h5>
41+
<h4>{{ product.price }}</h4>
42+
<a href="{{ url_for('productdetails', id=product.id) }}"> details </a>
43+
</div>
44+
</div>
45+
</li>
46+
{% endfor %}
47+
</ul>
48+
</div>
49+
</div>
50+
</section>
51+
{% endblock %}

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

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<!-- Bootstrap CSS and Font Awesome CSS -->
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10+
<!-- Your stylesheet -->
11+
<link href="/static/styles.css" rel="stylesheet">
12+
13+
<title>shop {% block title %}{% endblock %}</title>
14+
15+
</head>
16+
<body>
17+
18+
{% if get_flashed_messages() %}
19+
<!-- Flash messages -->
20+
<div id="header">
21+
<div class="alert alert-primary mb-0 text-center" role="alert">
22+
{{ get_flashed_messages() | join(" ") }}
23+
</div>
24+
</div>
25+
{% endif %}
26+
27+
<!-- Top Navigation Bar -->
28+
<div class="bar">
29+
<div class="navbar" id="navbar">
30+
<!-- Navigation items for logged-in users -->
31+
{% if session["user_id"] %}
32+
<ul >
33+
<li>
34+
<a class="button-52" href="/">Home</a>
35+
</li>
36+
37+
<li>
38+
<a class="button-52" href="/products">Products</a>
39+
</li>
40+
<li>
41+
<a class="button-52" href="/profile">Profile</a>
42+
</li>
43+
<li>
44+
<a class="button-52" href="/logout">Log Out</a>
45+
</li>
46+
<li>
47+
<a c href="/cart"><i class="fa-solid fa-cart-shopping fa-beat" style="color: #1f1f1f;"></i></a>
48+
</li>
49+
</ul>
50+
51+
52+
53+
<!-- Navigation items for non-logged-in users -->
54+
{% else %}
55+
<ul>
56+
<li>
57+
<a class="button-52" href="/">Home</a>
58+
</li>
59+
60+
<li>
61+
<a class="button-52" href="/products">Products</a>
62+
</li>
63+
64+
<li>
65+
<a class="button-52" href="/login">Log In</a>
66+
</li>
67+
68+
</ul>
69+
{% endif %}
70+
71+
</div>
72+
73+
</div>
74+
75+
<!-- Hero Section -->
76+
<div id="hero"></div>
77+
{% if request.path == '/' %}
78+
<!--Featured functions section-->
79+
<div>
80+
81+
82+
83+
84+
{% endif %}
85+
86+
<!-- Main Content Section -->
87+
<div class="main"> {% block main %}{% endblock %} </div>
88+
89+
<!-- Footer Section -->
90+
<footer class="section-p1">
91+
92+
<!-- Copyright information -->
93+
<div class="copyright"> ©2024 </div>
94+
</footer>
95+
</body>
96+
</html>

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% extends "layout.html" %}
2+
3+
{% block title %}
4+
Log In
5+
{% endblock %}
6+
7+
{% block main %}
8+
<!-- Link to external CSS file for styling the page -->
9+
<link href="/static/form.css" rel="stylesheet">
10+
11+
<!-- Form for user login -->
12+
<div class="stack-area">
13+
<div class="center" id="div">
14+
<form action="/login" method="post">
15+
<span class="section">
16+
<div class="head">Sign in</div>
17+
18+
<!-- Input field for username -->
19+
<span class="inputf">
20+
<label for="username" class="label"> Enter your username: </label>
21+
<input autofocus class="form-control mx-auto w-auto" id="username" name="username" placeholder="Username" type="text" required>
22+
</span>
23+
24+
<!-- Input field for password -->
25+
<span class="inputf">
26+
<label for="password" class="label"> Enter your password: </label>
27+
<input class="form-control mx-auto w-auto" id="password" name="password" placeholder="Password" type="password" required="">
28+
</span>
29+
30+
<!-- Link to the registration page for creating a new account -->
31+
<div class="info">
32+
<div class="info">
33+
<a href="/register">No account? Create one!</a>
34+
</div>
35+
</div>
36+
37+
<!-- Button to submit the form -->
38+
<button class="button-35" type="submit">Sign in</button>
39+
</span>
40+
</form>
41+
</div>
42+
</div>
43+
{% endblock %}
44+

0 commit comments

Comments
 (0)
Please sign in to comment.