顯示具有 Bootstrap 標籤的文章。 顯示所有文章
顯示具有 Bootstrap 標籤的文章。 顯示所有文章

2024年4月2日 星期二

在pythonanywhere設計Django網站的卡片(Card)功能(新增資料庫)

延續文章:在pythonanywhere設計Django網站的卡片(Card)功能(新增For Template)

1.定義資料庫

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from django.db import models

# Create your models here.

class vegetableDB(models.Model):
    image = models.CharField(max_length = 20, null = False)
    title = models.CharField(max_length = 20, blank = True, default='')
    subtitle = models.CharField(max_length = 20, blank = True, default='')

    def __str__(self):
        return self.image

2.修改mysite/myapp/views.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
from django.shortcuts import render
from myapp.models import vegetableDB

# Create your views here.
def index(request):
    slide1 = {'image':'fruits01.jpg', 'active':'active', 'interval':'10000', 'title':'水果01', 'subtitle':'好水果在雲林'}
    slide2 = {'image':'fruits02.jpg', 'active':'', 'interval':'2000', 'title':'水果02', 'subtitle':'好水果在雲林'}
    slide3 = {'image':'fruits03.jpg', 'active':'', 'interval':'3000', 'title':'水果03', 'subtitle':'好水果在雲林'}
    slides = [slide1, slide2, slide3]
    return render(request, 'index.html', locals())

def vegetable(request):
    vegetables = vegetableDB.objects.all().order_by('id')
    return render(request, 'vegetable.html', locals())

def fruit(request):
    return render(request, 'fruit.html', locals())

3.重新Reload並執行,但發生錯誤,是因為沒有資料庫

4. 開啟Bash,下達 python manage.py makemigrations


5.修改mysite/mysite/settings.py,把static拿掉。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
"""
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 4.0.6.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-8c5r7ez2#g2j5n@yxeczdyhw6-zwgj_l64=nark$wc_mn+kf*4'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['cmlin.pythonanywhere.com']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap5',
    'myapp',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR/'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

# default static files settings for PythonAnywhere.
# see https://help.pythonanywhere.com/pages/DjangoStaticFiles for more info
MEDIA_ROOT = '/home/cmlin/mysite/media'
MEDIA_URL = '/media/'
STATIC_ROOT = '/home/cmlin/mysite'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR/'static',
    ]

6.下達下列2個指令,順利完成資料庫的同步作業
python manage.py makemigrations
python manage.py migrate


7.執行後發現蔬菜內的照片全部不見,這是因為資料庫內沒有任何資料。

8.建立超級使用者
python manage.py createsuperuser

9.登入後台
cmlin.pythonanywhere.com/admin

在下圖依然沒有看到資vegetableDB資料

10.為資料庫設定管理者,修改mysite/myapp/admin.py

1
2
3
4
5
6
7
8
9
from django.contrib import admin
from myapp.models import vegetableDB

# Register your models here.

class vegetableAdmin(admin.ModelAdmin):
    list_display=('id', 'image', 'title', 'subtitle')

admin.site.register(vegetableDB, vegetableAdmin)

11.在後台新增一筆資料

12.重新載入




2024年4月1日 星期一

在pythonanywhere設計Django網站的卡片(Card)功能(新增For Template)

延續文章: 在pythonanywhere設計Django網站的卡片(Card)功能


1.修改mysite/templates/vegetable.html的程式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}
  {% load static %}
</head>
<body>
<div class="container">
  <ul class="nav bg-info">
    <li class="nav-item">
      <a class="nav-link link-light" href="/">首頁</a>
    </li>
    <li class="nav-item">
      <a class="nav-link link-light" href="/vegetable/">蔬菜</a>
    </li>
    <li class="nav-item">
      <a class="nav-link link-light" href="/fruit/">水果</a>
    </li>
  </ul>

<h1>蔬菜</h1>
<div class="row">
    {% for vegetable in vegetables %}
        <div class="card" style="width:300px">
            <img class="card-img-top" src="{% static "images/" %}{{ vegetable.image }}" alt="Card image">
            <div class="card-img-overlay">
                <h4 class="card-title" style="color:white;">{{ vegetable.title }}</h4>
                <p class="card-text" style="color:white;">{{ vegetable.subtitle }}</p>
                <a href="#" class="btn btn-primary">說明</a>
            </div>
        </div>
    {% endfor %}
</div>
  {% block content %}
  {% endblock %}
</div>
</body>
</html>

2.修改mysite/myapp/views.py的程式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
from django.shortcuts import render

# Create your views here.
def index(request):
    slide1 = {'image':'fruits01.jpg', 'active':'active', 'interval':'10000', 'title':'水果01', 'subtitle':'好水果在雲林'}
    slide2 = {'image':'fruits02.jpg', 'active':'', 'interval':'2000', 'title':'水果02', 'subtitle':'好水果在雲林'}
    slide3 = {'image':'fruits03.jpg', 'active':'', 'interval':'3000', 'title':'水果03', 'subtitle':'好水果在雲林'}
    slides = [slide1, slide2, slide3]
    return render(request, 'index.html', locals())

def vegetable(request):
    vegetable1 = {'image':'vegetable01.jpg','title':'蔬菜01', 'subtitle':'好蔬菜在雲林'}
    vegetable2 = {'image':'vegetable02.jpg','title':'蔬菜02', 'subtitle':'好蔬菜在雲林'}
    vegetable3 = {'image':'vegetable03.jpg','title':'蔬菜03', 'subtitle':'好蔬菜在雲林'}
    vegetable4 = {'image':'vegetable04.jpg','title':'蔬菜04', 'subtitle':'好蔬菜在雲林'}
    vegetables = [vegetable1, vegetable2, vegetable3, vegetable4]
    return render(request, 'vegetable.html', locals())

def fruit(request):
    return render(request, 'fruit.html', locals())


2021年6月12日 星期六

使用Bootstrap5為電子購物網站換新裝

 前一篇文章我們把Django升級到3.2.4版,本篇文章我們來把Bootstrap3升級為Bootstrap5,步驟如下:

1,安裝dajngo-bootstrap-v5


2.使用pip list檢查安裝的套件,發現bootstrap3以及bootstrap-v5都在shopenv環境中。


3.使用pip uninstall 命令來移除bootstrap3


5.修改設定檔django_shop_tutorial/settings.py,將bootstrap3改為bootstrap5。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap5',
    'shop',
    'cart',
    'orders',
    'paypal.standard.ipn',
    'payment',
]

5.修改樣版

(1)shop/templates/shop/base.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% load static %}
{% load bootstrap5 %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    {% bootstrap_css %}
    {% bootstrap_javascript %}

</head>
<body>

<div class="container">
    <div class="page-header">
        <a href="/"><h1 class="display-1">My shop</h1></a>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            {# call __len__ #}
            {% with total_items=cart|length %}
                {% if cart|length > 0 %}
                    Your cart:
                    <a href="{% url "cart:cart_detail" %}">
                        {# If total_items is 1, the output will be 1 item. #}
                        {# If total_items is 2, the output will be 2 items. #}
                        {{ total_items }} item{{ total_items|pluralize }},
                        ${{ cart.get_total_price }}
                    </a>
                {% else %}
                    Your shopping cart is empty.
                {% endif %}
            {% endwith %}
        </div>
    </div>

    {% block content %}
    {% endblock %}
</div>
</body>
</html>

(2)shop/templates/shop/product/list.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{% extends "shop/base.html" %}
{% load static %}

{% block title %}
    {% if category %}{{ category.name }}{% else %}Products{% endif %}
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-md-3">
            <h3>Categories</h3>
            <ul class="nav flex-column">
                <li {% if not category %}class="nav-item"{% endif %}>
                    <a href="{% url "shop:product_list" %}">All</a></li>
                {% for c in categories %}
                    <li {% if category.slug == c.slug %}class="nav-item"{% endif %}>
                        <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <div class="col-md-9">
            <h2>{% if category %}{{ category.name }}{% else %}Products{% endif %}</h2>
            <div class="row">
                {% for product in products %}
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <a href="{{ product.get_absolute_url }}">
                                <img class="img-thumbnail" src="{% if product.image %}{{ product.image.url }}
                                          {% else %}{% static "img/no_image.png" %} {% endif %}">
                            </a>
                            <a href="{{ product.get_absolute_url }}">{{ product.name }}</a><br>
                            ${{ product.price }}
                        </div>
                    </div>
                {% endfor %}
            </div>


        </div>


    </div>
{% endblock %}

(3)shop/templates/shop/product/detail/html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{% extends "shop/base.html" %}
{% load static %}
{% load bootstrap5 %}

{% block title %}
    {% if category %}{{ category.title }}{% else %}Products{% endif %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6 col-md-4">

            </div>
            <div class="col-md-6 col-md-4">
                <div class="thumbnail">
                    <img class="img-fluid" src="{% if product.image %}{{ product.image.url }}
                              {% else %}{% static "img/no_image.png" %}{% endif %}"
                         class="img-responsive">
                    <div class="caption">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <h3>{{ product.name }}</h3>
                            </div>
                            <div class="col-md-6 col-xs-6 price">
                                <h3>
                                    <label>${{ product.price }}</label></h3>
                            </div>
                        </div>
                        <p>{{ product.description }}</p>
                        <h2><a href="{{ product.category.get_absolute_url }}">{{ product.category }}</a></h2>
                        <form action="{% url "cart:cart_add" product.id %}" method="post">
                            {% csrf_token %}
                            {% bootstrap_form cart_product_form %}
                            {% buttons %}
                                <button type="submit" class="btn btn-success btn-product">
                                    <span class="glyphicon glyphicon-shopping-cart"></span> Add to cart
                                </button>
                            {% endbuttons %}
                        </form>

                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-md-4">

            </div>
        </div>

    </div>


{% endblock %}

(4)cart/templates/cart/detail/html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
{% extends "shop/base.html" %}
{% load static %}
{% load bootstrap5 %}
{% block title %}
    Your shopping cart
{% endblock %}

{% block content %}
    <h1>Your shopping cart</h1>

    <div class="row">
        <div class="col-sm-12 col-md-10 col-md-offset-1">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th class="text-center">Price</th>
                    <th class="text-center">Total</th>
                    <th> </th>
                </tr>
                </thead>
                <tbody>
                {% for item in cart %}
                    {% with product=item.product %}
                        <tr>
                            <td class="col-sm-8 col-md-6">
                                <div class="media">
                                    <a class="thumbnail pull-left" href="{{ product.get_absolute_url }}">
                                        <img class="media-object"
                                             src="{% if product.image %}{{ product.image.url }}
                                                  {% else %}{% static "img/no_image.png" %}{% endif %}"
                                             style="width: 72px; height: 72px;">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading"><a
                                                href="{{ product.get_absolute_url }}">{{ product.name }}</a></h4>
                                        <span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
                                    </div>
                                </div>
                            </td>
                            <td class="col-sm-1 col-md-1" style="text-align: center">
                                <form action="{% url "cart:cart_add" product.id %}" method="post">
                                    {% csrf_token %}
                                    {% bootstrap_field item.update_quantity_form.quantity show_label=False %}
                                    {% bootstrap_field item.update_quantity_form.update %}
                                    {% buttons %}
                                        <button type="submit" class="btn btn-success btn-product">
                                            Update
                                        </button>
                                    {% endbuttons %}
                                </form>
                            </td>

                            <td class="col-sm-1 col-md-1 text-center"><strong>${{ item.price }}</strong></td>
                            <td class="col-sm-1 col-md-1 text-center"><strong>${{ item.total_price }}</strong></td>

                            <td class="col-sm-1 col-md-1">
                                <a href="{% url "cart:cart_remove" product.id %}" class="btn btn-danger">
                                    <i class="glyphicon glyphicon-remove" aria-hidden="true"></i> Remove
                                </a>
                            </td>
                        </tr>
                    {% endwith %}
                {% endfor %}
                <tr>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td><h3>Total</h3></td>
                    <td class="text-right"><h3><strong>${{ cart.get_total_price }}</strong></h3></td>
                </tr>
                <tr>
                    <td>  </td>
                    <td>  </td>
                    <td>  </td>
                    <td>
                        <a href="{% url "shop:product_list" %}" class="btn btn-default">
                            Continue Shopping <i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i>
                        </a>
                    </td>
                    <td>
                        <a href="{% url "orders:order_create" %}" class="btn btn-default">Checkout <i
                                class="glyphicon glyphicon-play" aria-hidden="true"></i>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}