山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[N予備校]【2019年度】プログラミング入門 Webアプリ その 16

【2019年度】プログラミング入門 Webアプリ

フォルダの設定をいじったので、環境構築をする必要がありました。

第3章 サーバーサイドプログラミング

25. 管理者機能の実装

管理者による投稿の削除や投稿者を区別できるようにします。

管理者以外のユーザでは誰が投稿したかどうかわ分からず、1日だけのIDで区別されます。

26. デザインの改善

ファビコンやスタイルを修正していきます。

また、Bootstrap を使ってデザインをします。

inujini.hatenablog.com

Boostrap の入門的なものがあるんですね。他の学習サイトでもやってみようかと思います。

写経していたはずなのに、スタイルが崩れるなと思ったら、インデントがずれていました。

doctype html
html(lang="jp")
  head
    meta(charset="UTF-8")
    link(rel="stylesheet",
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
    ntegrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm",
    crossorigin="anonymous")
    title 秘密の匿名掲示板
  body.container
    div.my-3
      a(href="/logout").btn.btn-info.float-right ログアウト
      h1 秘密の匿名掲示板
    h2 新規投稿
    form(method="post" action="/posts")
      div.form-group
        textarea(name="content" rows="4").form-control
      div.form-group
        button(type="submit").btn.btn-primary 投稿
    h2 投稿一覧
    each post in posts
      div.card.my-3
        div.card-header
          - var isPostedByAdmin = (post.postedBy === 'admin')
        if isPostedByAdmin
          span #{post.id} : 管理人 ★
        else
          span #{post.id} : ID:#{post.trackingCookie}
        div.card-body
          p.card-text!=post.content
        div.card-footer
          div 投稿日時: #{post.createdAt}
          - var isAdmin = (user === 'admin')
          if isAdmin
            div 投稿者: #{post.postedBy}
          - var isDeletable = (user === post.postedBy || user === 'admin')
          if isDeletable
            form(method="post" action="/posts?delete=1")
              input(type="hidden" name="id" value=post.id)
              button(type="submit").btn.btn-danger.float-right 削除

    script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js")
    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
    crossorigin="anonymous")

Pug はインデントでネストされるので、慣れるまで大変ですね。HTMLでいいじゃんと思ったんですが、if 文とかを使えたり、コード量が少なくて済むのがメリットなんでしょうか。

27. 脆弱性

き、脆弱性

OS コマンド・インジェクション について学びます。

28. XSS脆弱性の対策

投稿文に JavaScript が書かれているとそれを実行してしまうのを防ぐために、エスケープ処理をします。

感想

あいまいな理解で進めているところが多々あるので、別の学習サイトでも似たようなことをやってみたいですね。ブログ以外のWebサイトを作りたいと思っているので、最近はWeb関連のモチベーションが上がり、なんとか続けられています。

関係ないですけど、ここ最近ずっとノドの調子が悪いので龍角散とトローチをなめていますが、治りません。