First Commit

onggiabayluon · Nov 3, 2021 · 44ac3d5 · 44ac3d5
commit 44ac3d5
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 0 deletions.
diff --git a/.flaskenv b/.flaskenv
@@ -0,0 +1,2 @@
+export FLASK_APP=saleapp
+export FLASK_ENV=development
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+venv/
+
+*.pyc
+__pycache__/
+
+instance/
+
+.pytest_cache/
+.coverage
+htmlcov/
+
+dist/
+build/
+*.egg-info/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "python.linting.enabled": true
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,14 @@
+# Install Dependency
+1. pip install Flask 
+2. pip install python-dotenv
+
+# Chạy File bằng cách gõ câu lệnh bên dưới vào command line
+Flask run
+
+[Link Localhost](http://127.0.0.1:5000/)
+
+# File .flaskenv đã được config environment variables đường dẫn đến thư mục gốc là saleapp ( nếu muốn sửa tên thư mục gốc là src thì sửa lại FLASK_APP=src )
+
+FLASK_APP=saleapp
+FLASK_ENV=development
+
diff --git a/requirements.txt b/requirements.txt
diff --git a/saleapp/__init__.py b/saleapp/__init__.py
@@ -0,0 +1,4 @@
+from flask import Flask
+app = Flask(__name__)
+
+import saleapp.routes
diff --git a/saleapp/data/categories.json b/saleapp/data/categories.json
@@ -0,0 +1,10 @@
+[
+    {
+        "id": 1,
+        "name": "mobile"
+    },
+    {
+        "id": 2,
+        "name": "tablet"
+    }
+]
diff --git a/saleapp/data/products.json b/saleapp/data/products.json
@@ -0,0 +1,26 @@
+[
+    {
+        "id": 1,
+        "name": "iPhone 7 Plus",
+        "description": "Apple, 32GB, RAM: 3GB, iOS13",
+        "price": 17000000,
+        "image": "https://cdn.tgdd.vn/Products/Images/42/78124/iphone-7-plus-gold-400x460-400x460.png",
+        "category_id": 1
+    },
+    {
+        "id": 2,
+        "name": "iPad Pro 2020",
+        "description": "Apple, 128GB, RAM: 6GB",
+        "price": 37000000,
+        "image": "https://cdn.tgdd.vn/Products/Images/522/221775/ipad-pro-12-9-inch-wifi-128gb-2020-xam-400x460-1-400x460.png",
+        "category_id": 2
+    },
+    {
+        "id": 3,
+        "name": "Galaxy Note 10 Plus",
+        "description": "Samsung, 64GB, RAML: 6GB",
+        "price": 24000000,
+        "image": "https://cdn.tgdd.vn/Products/Images/42/214909/samsung-galaxy-note-10-lite-chi-tiet-1-400x460.png",
+        "category_id": 1
+    }
+]
diff --git a/saleapp/routes.py b/saleapp/routes.py
@@ -0,0 +1,54 @@
+from flask.templating import render_template
+from flask import request
+from saleapp import app, utils
+import sys, json
+
+@app.route('/')
+def home():
+    # Load all Products
+    products = utils.load_data("data/products.json")
+    return render_template(
+        "./pages/home.html",
+        title="Tất cả sản phẩm",
+        products=products,
+        categories=utils.load_data("data/categories.json")
+    )
+
+
+# products Route
+@app.route('/products', methods=['GET'])
+def products():
+    # get parameters
+    _id = int(request.args.get('category_id')) if request.args.get('category_id') else None
+
+    # Transform json input to python objects
+    input_products = utils.load_data("data/products.json")
+
+    # Filter python objects with list comprehensions
+    output_products = [product for product in input_products if product["category_id"] == _id ]
+
+    return render_template(
+        "./pages/products.html",
+        title="Products",
+        products=output_products,
+    )
+
+# search Route
+@app.route('/search', methods=['GET'])
+def search():
+    # get parameters
+    keyword = request.args.get('keyword').lower()
+
+    # Transform json input to python objects
+    input_products = utils.load_data("data/products.json")
+
+    # Filter python objects with list comprehensions
+    output_products = [
+        product for product in input_products if product["name"].lower().find(keyword) >= 0 
+    ]
+
+    return render_template(
+        "./pages/products.html",
+        title='%s Giá tốt nhất' % keyword,
+        products=output_products,
+    )
diff --git a/saleapp/static/css/style.css b/saleapp/static/css/style.css
diff --git a/saleapp/templates/base.html b/saleapp/templates/base.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {% block head %}{% endblock head %}
+</head>
+<body>
+    {% include './layout/navbar.html' %}
+    {% block body %}{% endblock body %}
+    {% block scripts %}{% endblock scripts %}
+</body>
+</html>
diff --git a/saleapp/templates/layout/navbar.html b/saleapp/templates/layout/navbar.html
@@ -0,0 +1,35 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="/">ĐiệnMáyXanhLè</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="/">Tất cả <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="./products?category_id=1">Điện thoại di động <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="./products?category_id=2">Máy tính bảng <span class="sr-only">(current)</span></a>
+            </li>
+        </ul>
+        <form class="form-inline my-2 my-lg-0" action="/search">
+            <input 
+            list="suggestion"
+            class="form-control mr-sm-2" 
+            name="keyword" type="search" 
+            placeholder="Search" aria-label="Search">
+            <datalist id="suggestion">
+                <option value="iPad Pro 2020">iPad Pro 2020</option>
+                <option value="iPhone 7 Plus">iPhone 7 Plus</option>
+                <option value="Ipad">Ipad</option>
+            </datalist>
+            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+    </div>
+</nav>
+
diff --git a/saleapp/templates/pages/home.html b/saleapp/templates/pages/home.html
@@ -0,0 +1,41 @@
+{% extends 'base.html'%}
+
+{% block head %}
+<title>{{ title }}</title> 
+<!-- bootstrap -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<!-- main css -->
+<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" />
+{% endblock head %}
+
+
+{% block body %}
+<main class="main" id="main">
+    <section class="products container mt-4" id="products">
+        <h1>Bán hàng trực tuyến</h1>
+        <div class="row mt-4">
+            {% for product in products %}
+            <div class="col-6 col-sm-6 col-md-4 col-lg-3 p-4">
+                <div class="card">
+                    <img class="card-img-top" src="{{ product.image }}" alt="Card image cap">
+                    <div class="card-body">
+                    <h5 class="card-title">{{ product.name }}</h5>
+                    <p class="card-text">{{ product.description }}</p>
+                    <a href="#" class="btn btn-primary">Details</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+</main> 
+{% endblock body %}
+
+{% block scripts %}
+<!-- bootstrap scripts -->
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+
+{% endblock scripts %}
diff --git a/saleapp/templates/pages/products.html b/saleapp/templates/pages/products.html
@@ -0,0 +1,45 @@
+{% extends 'base.html'%}
+
+{% block head %}
+<title>{{ title }}</title> 
+<!-- bootstrap -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<!-- main css -->
+<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" />
+{% endblock head %}
+
+
+{% block body %}
+<main class="main" id="main">
+    <section class="products container" id="products">
+
+        <div class="row mt-4">
+            {% if products %}    
+            {% for product in products %}
+            <div class="col-6 col-sm-6 col-md-4 col-lg-3 p-4">
+                <div class="card">
+                    <img class="card-img-top" src="{{ product.image }}" alt="Card image cap">
+                    <div class="card-body">
+                    <h5 class="card-title">{{ product.name }}</h5>
+                    <p class="card-text">{{ product.description }}</p>
+                    <a href="#" class="btn btn-primary">Details</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+            {% else %}
+            <h3 class="col-12 text-center"> Không tìm thấy kết quả nào </h3>
+            {% endif %}
+        </div>
+    </section>
+</main> 
+{% endblock body %}
+
+
+{% block scripts %}
+<!-- bootstrap scripts -->
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+{% endblock scripts %}
diff --git a/saleapp/templates/readme.md b/saleapp/templates/readme.md
@@ -0,0 +1,2 @@
+# Folder structure
+Note: This saleapp [templates Folder structure] Similar to [sass folder structure]
diff --git a/saleapp/utils.py b/saleapp/utils.py
@@ -0,0 +1,17 @@
+import json
+import os
+
+from saleapp import app
+
+
+# Read Json file
+def read_json(path):
+    with open(path, "r") as file:
+        return json.load(file)
+
+# load data
+def load_data(dataPath): 
+    return read_json(os.path.join(app.root_path, dataPath))
+
+# Transform python object back into json
+# output_json = json.dumps(output_products)
diff --git a/setup.py b/setup.py
@@ -0,0 +1,10 @@
+from setuptools import setup
+
+setup(
+    name='saleapp',
+    packages=['saleapp'],
+    include_package_data=True,
+    install_requires=[
+        'flask',
+    ],
+)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export FLASK_APP=saleapp
		export FLASK_ENV=development
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Folder structure
		Note: This saleapp [templates Folder structure] Similar to [sass folder structure]