Django - MTV (Part 3.)


MTV pattern


MTV pattern Part 2.の延長線です.
前の部分と内容は少し違うかもしれませんが、全体の脈絡は一貫しています.

Part 3. MTV PatternにURLを接続する

  • settings.py -> templates (HTML) -> views.py -> urls.py
  • urlは
  • の上の操作順に接続されます.
  • 😀 1.入力値を受信できるページを作成する(index.html)


    🎈 (1) template (app/templates/index.html)


    まずapp内のtemplatesにinputラベルを含むページを作成します.
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <div style="text-align: center">
          <h1>사용자의 이름을 입력해주세요</h1>
          <br />
          <form action="">
            // 나중에 이 action에 들어갈 값은 url로 지정해 줄 것이다. (이 때
            urls에서 정해주었던 name만 적어줘도 그 페이지로 이동할 수 있게 된다.)
            <label for="nameInput">이름 : </label>
            <input id="nameInput" name="name" />
            <input type="submit" value="제출" />
            // type이 submit이면 click시 action에서 정해진 대로 요청된다.
          </form>
        </div>
      </body>
    </html>
  • の上のワックスのようにページを生成します.
  • 🎈 (2)viewsで関数を作成する(app/views.py)


    テンプレートに作成したhtmlに基づいてview関数を記述します.(以前とほぼ同じ)
    def welcome(request):
        return render(request, "index.html")

    🎈 (3)urlsでパスを指定する(project/urls.py)


    view関数を作成した場合は、プロジェクトフォルダにURLを指定します.
    from myapp import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', views.welcome, name="welcome"),
    ]

    😀 2.inputの値を渡すページを作成する(hello.html)


    🎈 (1) template (app/templates/hello.html)

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <div style="text-align: center">
          <h1>반갑습니다 [여기에는 입력값이 들어갈 예정]님!</h1>
        </div>
      </body>
    </html>

    🎈 (2)viewsで関数を作成する(app/views.py)


    テンプレートに作成したhtmlに基づいてview関数を記述します.(以前とほぼ同じ)
    def hello(request):
        userName = request.GET['name']  # 이러한 방식으로 Input 박스의 값을 가져올 수 있다. & 그것을 userName이라는 변수에 할당
        return render(request, "hello.html", {'userName' : userName})
        # 딕셔너리의 형태{key : value}로 hello.html에 데이터(userName)를 전달한다.

    🎈 (3)urlsでパスを指定する(project/urls.py)


    view関数を作成した場合は、プロジェクトフォルダにURLを指定します.
    from myapp import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', views.welcome, name="welcome"),
        path('hello/', views.hello, name="hello"),
    ]
    

    🎈 (4)テンプレートの修正

  • (4)-1 index.html:formのaction属性値
  • urlのパスを直接書くことができますが、urlsのnameプロパティも使用できます!
  • <form action="hello">
      // 이렇게 urls에서 지정해주었던 name의 값을 넣어준다!
      <label for="nameInput">이름 : </label>
      <input id="nameInput" name="name" />
      <input type="submit" value="제출" />
      // type이 submit이면 click시 hello를 name의 속성 값으로 갖는 url로 이동한다.
      // (name이라는 데이터를 가지고)
    </form>
  • (4)-2 hello.html:テンプレート言語を使用して、さっきのビューにディック形式に指定された変数を追加します.
  • テンプレート言語を使用する方法:カッコで囲まれます.{{내용}}
  • <div style="text-align: center">
      <h1>반갑습니다 {{userName}}님!</h1>
    </div>

    データ(userName)はhelloです。htmlによく惹かれる様子が見られます。



    📒 Part 3の内容を整理する

  • appにはinputラベルのindexが含まれています.htmlを作成し、view関数を作成し、urlsのパスを指定します.
  • app内でinputタグ情報のhelloが受信される.htmlを作成し、view関数を作成し、urlsのパスを指定します.
  • 2でview関数を定義すると、データの受信方法(userName=request.GET["name"])と、データの転送方法(render(request,hello.html,{'userName})が学習されます.
  • urlsで指定したname(hello)をフォームタグのaction属性の属性値(action=「hello」)として使用すると、urlに移動します.
  • はまた、html内で受信したデータ(userName)を何らかの方法で表現するテンプレート言語を学習した.(かっこ:)