shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

2021-02-01から1ヶ月間の記事一覧

7. EJSを使った値の表示(2週目)

EJSを使って値を表示しよう EJSとは HTMLの中にJavaScriptが使えるNode.jsパッケージのことを指す point JavaScriptを使用するには2つの方法がある。 <% %> <%= %> <% %> =を使わない場合、文字が見えなくなる。この際に変数の定義などに使用される。 2.<%= …

6. 一覧画面の作成(2週目)

一覧画面の作成 一覧画面を表示させよう 目標:買い物リストを作成するための準備「一覧画面を表示する」を作る 一覧画面の見た目 app.ejsファイルにindex.ejsファイルのルーティングを作成する indexルーティングコード viewsフォルダにインデックス(index.…

5. CSSの適用と画像の表示(2週目)

CSSを適用しよう 目標:CSSを利用しトップ画面を整える。 CSSを適用するには(1) パブリックフォルダを作成 cssフォルダ及び画像ファイルを入れる場所として作成 このように覚える・ CSSを適用するには(2) cssファイルを作成 パブリックフォルダ内のパス…

4. ページの表示の仕組み(2週目)

表示の仕組みを理解しよう 目標:トップ画面を表示させるルーティングを書き、トップ画面を表示させること トップ画面を表示させるルーティング 全体像 /top って何? /top = リクエストがきた(tpoへ戻る、とかトップボタンを押したという意味)際にップ画…

4. ページの表示の仕組み(2週目)

表示の仕組みを理解しよう 目標:トップ画面を表示させるルーティングを書き、トップ画面を表示させること トップ画面を表示させるルーティング 全体像 /top って何? /top = リクエストがきた(tpoへ戻る、とかトップボタンを押したという意味)際にップ画…

3. サーバーの起動(2週目)

目的:サーバーを起動させること サーバーを起動しよう 起動するための準備: ※app.listen(3000); 起動コード: npm ファイル名 ※app.listen(3000); はローカルホスト3000にて起動するようになる。 ホスト番号は色々あるので、ググりつつ試行錯誤するこ…

2. Expressの導入 (2周目)

目標:メモアプリを完成させる 目的:本日より実用を兼ねたウェブアプリ制作に入ります。実際に作業しつつ並行学習し完成。そしてアプリケーション作成に慣れることです。 2周目は開発記録もしつつブログ編成する。 参考記事:1周目 shinoblog-manabu.hate…

【解決】Node.jsアプリケーションとMySQLを接続できない3日目

できない。 この3日間、色々ググってみて試してみるものの、出来ない。 prog-8.com 上記progate内容に沿って実行しているが、最後まで辿り着くことができなかった。 データベースとテーブルを作成しよう データベースおよびテーブルは作成済み mysql login …

【解決】localhostで接続が拒否されました【問題】

半日かかって解決しました。ローカルホスト起動しなかった問題 答えがこちら node app. js node app.js これがローカルホスト接続起動のカギ! 先生も注意されていました。 再びNode.jsを書き込むには、 Ctrl + C キーを打ち込むこと こうすることで再びVisu…

Node.jsの新規アプリケーションを作ろう!

1. 新規アプリケーションをつくろう 実行したこと 指定されたフォルダ(list-app)を作成 visual studio code インストール 2. コマンドを実行し、パッケージをインストールしよう 実行したこと visual studio code内のTerminal起動 npm init --yes をコマン…

Node.jsの新規アプリケーションを作ろう!

結構手こずった。

Mysql開発環境構築~コマンドプロンプトの起動方法~

Windows10の場合 コマンドプロンプトを起動する 虫めがねアイコン「ここに入力して検索」クリック コマンドプロンプト または cmd と検索 net start mysql57 と入力 開始している場合は上記のように書いてある。 それではここからが本番。 mysql --user=ro…

Mysql開発環境構築~コマンドプロンプトの起動方法~

Windows10の場合 コマンドプロンプトを起動する 虫めがねアイコン「ここに入力して検索」クリック コマンドプロンプト または cmd と検索 net start mysql57 と入力 開始している場合は上記のように書いてある。 それではここからが本番。 mysql --user=ro…

12. ハッシュ化されたパスワードでログインしよう

ハッシュ化されたパスワードでログインしよう 目標:ハッシュ化されたパスワードにてログインすること パスワードを比較しよう 比較に必要な bcrypt.compare() を使用する。 このようなメソッドをcompareメソッドという このように覚える。 ex. bcrypt.compa…

11. パスワードのハッシュ化を導入しよう

パスワードのハッシュ化を導入しよう 目的:パスワードをハッシュ化する方法を学ぶ hashメソッド パスワードをハッシュ化する方法 hashメソッドを使う postメソッドの/signupルーティングの中で使う 定数をpasswordとする 第二引数を10とする(数字が大き…

10. パスワードの安全な取り扱い方を学ぼう  bcrypt(ビークリプト)

パスワードの安全な取り扱い方を学ぼう 目的:パスワードが第三者にもれないようにする 目標:安全なパスワードの取り扱いについて学ぶ 安全性の高いパスワード パスワードの文字列をハッシュ値に変換する ハッシュ値にする方法を学ぶ このように覚える bcry…

4. ユーザー登録と同時にログインしよう

ユーザー登録と同時にログインしよう 今回の目標:ユーザー登録した時点でログインしている状態になること 上記の状態になるよう目指す。 ユーザー名とユーザーIDをセッション情報に保存しよう そのままログインするには? ユーザー名とユーザーIDをセッショ…

3. ユーザー登録処理を作成しよう

ユーザー登録処理を作成しよう 目的 :ユーザー登録処理の為の3つの手順を理解する このように覚える。 ユーザー登録処理の流れを確認しよう ①ユーザー登録画面のフォームを送信 ②ユーザーをデータベースに登録 ③ユーザー登録のあと一覧画面へリダイレクト …

2. ユーザー登録機能を作成する手順

ユーザー登録機能を作成する手順 目的:ユーザー登録機能(全4手順)を覚える ユーザー登録に必要なルーティングを書く ユーザー登録フォームを表示させる ビューファイルの作成(手順に従って新規ファイル登録) ユーザー登録リンクボタンの作成 このよう…

14. 限定記事の閲覧を制限しよう

限定記事の閲覧を制限しよう 今回の目標 :ログアウト状態時、限定記事の表示・表現方法を学ぶ :categoryカラム値とlocal.isLoggedInプロパティを使った制限方法を学ぶ ログイン状態と制限を整理しよう 現状:会員限定であるはずの記事が見られている状態 …

11. ログアウト機能を作成しよう

ログアウト機能を作成しよう 目標:ログアウトボタンの作成 ログアウトとは ログアウト = セッション情報からデータを消すこと ログイン = セッション情報からデータを保存すること ログアウトボタンとルーティングを用意しよう ログアウトボタンの作成方法…

10. ヘッダーを共通化しよう

ヘッダーを共通化しよう 目標:どのページにもユーザー名を表示させる include機能とは 共有ファイルを作ることで画像の共有化を実現 このように覚える ヘッダーを別ファイルに移そう header.ejsファイルを使う(新規ファイル作成) 共通しているヘッダーコ…

9.ユーザー名をヘッダーに表示しよう

ユーザー名をヘッダーに表示しよう 目標:ログイン画面にユーザー名を表示させる ターミナル以外に表示させる方法を学ぶ。 表示を確認しよう 具体的な目標:ヘッダーにログイン状態を表す表示をつくる セッションを使ってユーザー名を管理しよう ヘッダー表…

8. 常にログイン状態を確認しよう  

今回の目標:一覧画面と閲覧画面の両方でログイン状態を確認できるように変える。(ログイン状態の確認をリクエストの度に毎回実行できるようにする) 常にログイン状態を確認しよう app.use関数を使うとどうなるの? 常にログイン状態を確認することができ…

6.セッションを管理しよう

セッションを管理しよう セッション管理ってなんだっけ?? アクセスユーザの管理をすること 参考 www.f5.com www.atmarkit.co.jp e-words.jp セッション管理とは ・クライアントの状態をサーバーが管理する状態を指す ・セッション管理にはSID(セッションI…

5.ユーザー認証の処理を作ろう(2)

ユーザー認証の処理を作ろう(2) 目的:ユーザー認証システムを構築する このように覚える ユーザー認証とは ユーザー認証 = 本人確認のこと メールアドレス パスワード =これらの認証を得ることで「本人確認がとれた」と意味する このように覚える ユー…

ユーザー認証の処理を作ろう(1)

ユーザー認証の処理を作ろう(1) 今回の目標 :フォーム送信 :一覧画面表示 ログイン処理をするルーティングを用意しよう :ユーザー認証の処理をする :ログイン処理を作るルーティングを用意する こう覚える。 手順1 Ex. <form action="/login" method="POST"> このように書く。 手順2. <p></p></form>…

ログイン機能を作ろう

ログイン機能を作ろう 目標:ブログサイトにログイン画面を作る ログイン機能の作成手順 ・ログイン画面を作る ・ユーザー認証画面を作る ・セッション管理の準備をする このように覚える ログイン画面を作成しよう 今回の目標:ログイン画面の作成・表示 こ…

2. ブログサイトの現状を確認しよう 

ブログサイトの現状を確認しよう 確認すること :Node.js :MySQL 上記を使ったブログサイト構築を実施している(する)前提で開始。 ブログサイトの構成を確認しよう 画面構成を確認する:3つの画面によって構成している 各画面のビューファイル 一覧画面 …

ブログサイトを作ろう Node.js学習コースⅤ

ブログサイトを作り始める 確認 :Node.js学習コースI~III を振り返り学習する :スムーズにサイト作りできるように復習 これから作りたいもの 目標:ログイン機能実装されたブログサイトを構築する このレッスンで学ぶこと 工程表確認 ① ログイン機能を作ろ…