PYTHONではじめてのWEBサイトを作成 8

2024年5月28日 17:22

今までの流れ、PYTHONのdjangoでWEBサイトを作っています。

どうせならベトナムと縁の深いバインミー（ベトナムサンドイッチ）
のサイトを作ろうとしています。

Google Mapをトップページに表示
近くのバインミーショップを検索
Google Places APIでショップリストを表示
Googleのレビューでランキングを作成
までやってきました。

この後は
ランキングをHTMLで表示
店舗数などをヒートマップで表示
NEWオープンを取得して表示
SNSからバインミタグを拾ってきて表示
Google ADも貼ってみようかな

AWSにデプロイして本番化

まだ先は長いですが楽しみながらいってみましょう！

ランキングをHTMLに表示

SQliteに書き込んだ加重スコアとレビュー数を多い順から降順で表示
20位までをrank.htmlに表示します。

ランキング関数をviewsに設定

def national_ranking(request):
    # 全国の店舗をweighted_scoreの降順で取得し、レビュー数で並び替え
    national_stores = Store.objects.order_by('-weighted_score', '-review_count')[:20]
    
    # ランキングの順位を付与
    for idx, store in enumerate(national_stores):
        store.rank = idx + 1

    return render(request, 'banhmilove_app/rank.html', {'stores': national_stores})

views.national_rankingをrank.htmlに表示させるコードをurls.pyに書く

from django.contrib import admin
from django.urls import path
from banhmilove_app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
    path('rank/', views.national_ranking, name='rank'),  # ランキングページのURLパターン
    path('new_store/', views.new_store, name='new_store'),
    path('analysis/', views.analysis, name='analysis'),
    path('news/', views.news, name='news'),
    path('about/', views.about, name='about'),
    path('about_us/', views.about_us, name='about_us'),
    path('store_list/', views.store_list, name='store_list'),
]

じゃ・じゃーん

http://127.0.0.1:8000/rank/

style.cssにテーブルを設定

テーブルを設定
シンプルに
static/styles.css

.container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.ranking-table th, .ranking-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.ranking-table th {
    background-color: #f2f2f2;
    color: black;
}

.ranking-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.ranking-table tr:hover {
    background-color: #f1f1f1;
}

.ranking-table td.index {
    background-color: #e0f7fa; /* インデックス列の背景色を変更 */
}

.ranking-table tr {
    border-bottom: 1px solid #eee; /* 罫線を薄くする */
}

まとめ

ランキングが表示されました！
今回は簡単。
ちょっとノってきたのでもう少し進めます！

分析ページに5月の店舗数を表示します。
その前に全国のデータを取得しようかしら

https://onetech.jp/service/vr-ar-mr-development