初心者向け
Pycharmを使う前にやっておきたい設定と覚えておくと良い操作方法
【Django】モデルクラスのfilterメソッドで検索・絞り込みをする
JavaScriptでクエリパラメータを書き換え、GETメソッドを送信する【通販サイトなどの絞り込み検索に有効】
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: JavaScript 初心者向け
クエリパラメータ(クエリ文字列、もしくはクエリストリング)はサーバーサイドだけのデータではない、JavaScriptも操作できる。 これを利用することで、サイトの絞り込み検索を作ることができる。 HTML 下記のように価格帯の入力欄を作る。 <h2>下限</h2> <input class="url_replace" type="text" name="min_price"> <h2>上限</h2> <input class="url_replace" type="text" name="max_price"> そして、次項のJavaScriptを読んでおく。 JavaScript window.addEventListener("load" , function (){ $(".url_replace").on("keydown", function(e) { ...【HUGO】最新版をインストールして、サイトを作り、テーマを当ててビルドするまで
Javaのpackage(パッケージ)の実行方法
Javaのパッケージの実行方法でちょっと詰まったので、覚書としてまとめておく。 【例】ソースコードとディレクトリ構成 ディレクトリ構成は以下の通り、このとき、myprojectのディレクトリ名は任意とする。 myproject ├── vehicle │ └── Car.java └── main └── CarExec.java Car.javaの内容はこちら // vehicle/Car.java package vehicle; public class Car { private String model; public Car(String model) { this.model = model; } public void start() { System.out.println(model + " is starting."); } public void drive() { System.out.println(model + " is driving."); } } CarExec.javaの内容はこちら // main/CarExec.java package main; import vehicle.Car; public ...【Django】OneToOneFieldでつながっているデータの取得方法【モデル名を小文字にした属性名で取得できる】
OneToOneFieldを使う機会は限定されているので、備忘録として。 タイトルから既に(？)な状態かも知れないが、まずは、下記モデルを見てもらいたい。 # 店舗データテーブル class StoreData(models.Model): class Meta: constraints = [ models.UniqueConstraint(fields=["store","date"], name="unique_store_date"), ] store = models.ForeignKey(Store,verbose_name="店舗",on_delete=models.CASCADE) date = models.DateField(verbos ...Laravelで.env(環境変数)に指定した値をチェックする方法【コントローラ・ビュー】
Djangoをやる前に知っておきたいPython構文【オブジェクト指向(class文)と別ファイル読み込み(import文)は特に重要】
Djangoを始める前に知っておきたいPython構文をまとめる。 型 #数値型 score = 100 #文字列型 name = "Taro" #リスト型 numbers = [ 46,77,22 ] #辞書型 topic = { "id":1, "comment":"Hello" } #辞書型のリスト topics = [ { "id":1, "comment":"Hello" }, { "id":2, "comment":"Hi" }, { "id":3, "comment":"こんにちは" }, { "id":4, "comment":"どうも" }, ] 数値型は演算子(+ - * /)のいずれかを使用して計算を行うことができ ...【JavaScript】Chart.jsでグラフを描画する【棒グラフ、円グラフ、折れ線グラフ】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: javascript ウェブデザイン 初心者向け スタートアップシリーズ chart.js
インストールとチュートリアル 最新版のCDNなら以下サイトから入手できる https://www.jsdelivr.com/package/npm/chart.js?path=dist とりあえず試したい場合は下記CDNをインストールする。(※一部仕様が現行バージョンと異なるため注意) <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> 続いて、グラフを表示させたい場所に下記、canvasタグを配置。 <canvas id="graph"></canvas> これで準備完了。後は、次項以降のJavaScriptを発動させ、任意のグラフを描画させる。 棒グラフ 公式から拝借。 実行させるJavaScriptが下記。 const ctx = ...