プログラミング学習ログ

WEBアプリケーション個人開発を目指す32歳公務員

近況報告(まちの情報冊子のWEB版作ります!)

お久しぶりです。シンヤです。 最近、学習の進捗報告が滞っているな、、、 そんな風に思っておられた方。(もし、いらっしゃったら)ありがとうございます。 最近、新しい動きが個人的にございましたので、本日は近況報告です。 結論から申し上げると、「ま…

#25 ここまでの復習(WEB版タスク管理ツールの作成)

前回、ターミナル上で動作するタスク管理ツールを作成しました。 shinya-tech.com 今回はこれまで(#12〜#24)の復習を兼ねて、WEB版のタスク管理ツールの作成を行いました。 実装した内容はタスクの登録とタスク一覧の表示のみ。 削除及び修正は実装してい…

#24 Web版読書ログサービスの作成 ~ 読書ログの一覧表示(デザイン化)~

前回作成した読書ログ一覧ページにBootstrapでデザインをあてました。 ↓デザインをあてた後のページ 参照したサイト一覧 Cards 文字の装飾 関連の過去記事 書いたコード 参照したサイト一覧 Cards getbootstrap.jp 文字の装飾 v4.bootstrap-guide.com 関連の…

#23 Web版読書ログサービスの作成 ~ 読書ログの一覧表示(XSS対策含む) ~

前回、登録ページと一覧ページのHTMLに共通する箇所を共通化させました。 その際、HTMLをベタ打ちで書いていた箇所をPHPでデータベースからデータを取得し、一覧表示できるようにしました。 テーブルにデータがない状態を再現する方法とXSS(クロスサイトス…

独学エンジニアで1カ月学習してみた感想

R4.2.6から山浦清透さんが運営されている学習サービス「独学エンジニア」にて、学習を始めて1カ月が経過しました。 結論から申し上げますと、 こんな良質で、良心的な価格のサービスを利用させていただいていることに感謝しております。 まだコンテンツが全…

#22 Web版読書ログサービスの作成 ~ HTMLのレイアウト部分を共通化させる ~

前回までで、読書ログの登録ページを作成しました。 次に、読書ログの一覧ページを作成するにあたり、HTMLのhead部分が共通するため、レイアウトの共通化を行いました。 なぜ どのように 書いたコード views/layout.php views/index.php index.php なぜ DRY…

#21 Web版読書ログサービスの作成 ~ Bootstrapを使ってデザイン ~

前回#21にて、Bootstrapくささを取る下処理を行ったので、今回はBootstrapで定義されているクラスをHTMLにあててデザインを行いました。 shinya-tech.com 参照した公式ドキュメントのページ一覧 margin, padding navbar shadow h1, h2 ... text-reset contai…

#21 Sassを用いてBootstrapをカスタマイズ ~ Bootstrapのくさみを下ごしらえする ~

Bootstrapをデフォルト設定のまま使用すると、いかにも"Bootstrapを使って作成した"感が出てしまうので、今回はBootstrapをカスタマイズする方法を学びました。 gyazo.com カスタマイズの流れ 1. Sassのコンパイラをインストールする ライブラリを選ぶポイン…

#20 Sassの概要を把握した

Bootstrapをカスタマイズしていくにあたり、Sassを用いると簡単にできるため、今回はSassの概要を把握しました。 Sassとは 背景 メリット Sassの基本的な使い方 Sassの特徴 ①ネスト CSSの書き方 Sassの書き方 ②変数 CSSの書き方 Sassの書き方 ③親セレクタの…

#19 Bootstrapの概要、インストール方法、必読ドキュメント

CSSでスタイルを整えるにあたり、Bootstrapを活用していこうと思います。 Bootstrapとは Bootstrapを使っても独自性のあるオシャレなサイトは作れる。 Bootstrapのインストール bootstrap.cssとbootstrap.min.cssの違いについて HTMLのヘッダーにリンクを書…

#18 Web版読書ログサービスの作成 ~ バリデーションエラーの際に入力値を残す ~

前回、Web版読書ログサービスについて、バリデーション処理を施しましたが、バリデーションエラーとなった場合、フォームに入力された値が全てリセットされてしまう仕様となっていました。 そこで、今回はエラーとなっていない箇所の入力値を残すように修正…

#17 Web版読書ログサービスの作成 ~ バリデーション処理 ~

#14 でHTMLのフォーム欄を作成し、#15 でフォームへの入力をデータベースに格納できるようにしました。 shinya-tech.com shinya-tech.com 今回は、フォームに入力された値をチェックして、意図しない値の場合、エラーメッセージが表示されるようバリデーショ…

#16 PHPで日付の入力をチェックする方法

フォーム欄にユーザが入力を行う際、作り手の意図に沿わない入力が行われる可能性があります。 そこで、作り手の意図に沿わない入力が行われた際に、アラートメッセージを表示し、処理が進まないようにする必要があります。(バリデーションと言います。) …

#15 Web版読書ログサービスの作成 ~ データの登録 ~

前回、Webページが表示される仕組みを学び、HTMLにて登録ページの骨格を作成しました。 今回は読書ログのデータを登録できるようにします。 (バリデーション処理は次回行います。) shinya-tech.com PHPの定義済み変数 マジック定数 外部ファイルの読み込み…

#14 Web版読書ログサービスの作成 ~ 表示の仕組み, HTMLで骨格を記述 ~

これまでターミナル上で動く読書ログサービスを作成してきましたが、今回からいよいよHTMLを用いて、Webアプリケーション化していきます。 Webページが表示される仕組み ApacheがHTMLを返す仕組み /var/www/html以下にファイルを置くには? HTMLでのフォーム…

#13 Composer, ライブラリを使って環境変数を管理する

これまでデータベースへの接続情報をソースコードにベタ書きしていました。 しかし、ソースコードを誰かに見られた場合、機密データが漏洩し、データが流出する危険性があります。 そこで、ライブラリを使用して、機密データを別途管理できる仕組みを取り入…

#12 PHPからテーブルを作成する方法

前回まではターミナル上で動くアプリケーションを作成しました。 いよいよ読書ログサービスのWebサービス版を作成していきます。 作るアプリケーションのページ構成 Webサービス版を作成する順序 テーブルをPHPから作成する 現状の課題 SQL文を直接実行する…

#11 ここまでの復習(PHP-MySQL接続・データ追加・取得、バリデーション処理)

ここまでに学んだ内容を基に、タスク管理ツールをバージョンアップしていきます。 タスク管理ツールについて、これまでに行ったこと 今回バージョンアップする内容 追加で学んだこと 書いたコード 備忘録(詰まった点) データベースのカラム名に予約語を使…

#10 PHPからMySQLのデータを取得する方法

ここまでの学習で読書ログサービスのデータベースへの対応について 読書ログを保存するテーブルを作成する PHPからデータベースに接続する 読書ログをデータベースに登録する ということができるようになりました。 今回は、読書ログをデータベースから表示…

#9 バリデーション処理

ユーザが予期せぬ値を入力した際に、セキュリティ上問題が生じたり、変なデータがデータベースに保存され、プログラムが不具合を起こす可能性をなくすため、バリデーション処理を行いました。 バリデーションとは よくあるバリデーションの条件 バリデーショ…

#8 PHPからMySQLにデータを追加する方法

SQLのINSERT文でテーブルにデータを登録する SQL分実行時にエラーがあった場合、エラーメッセージを表示するようにしておく 複数行にまたがる文字列はヒアドキュメントで表記する サンプルコード 読書ログサービスへの実装 備忘録(つまずいた点) 今回はPHP…

#7 PHPからMySQLに接続する方法

PHPからMySQLに接続する方法を学び、読書ログサービスに実装しました。 PHPからMySQLに接続する方法 MySQLに接続するにはmysqli_connect関数を使う MySQLに接続できないケースを想定して、対策する なぜ? PHPからMySQLとの接続を切断方法 読書ログサービス…

#6 データベースについて学んだこと

読書ログサービスの登録データを保存できるようにデータベースと接続します。 その前にデータベースについて学習した内容をアウトプットします。 データベースについて データベースの必要性 データをファイルで管理するのには限界がある そこで登場するのが…

#5 ここまでの復習をする(タスク管理アプリ_テキスト版の作成)

#1〜#4 にてテキスト版(ターミナル上で動作する)読書管理ログを作成しました。 今回は復習として、ここまでに学習したことを振り返りながら、タスク管理アプリ(テキスト版)を作成しました。 shinya-tech.com shinya-tech.com shinya-tech.com shinya-tec…

#4 読書ログサービス作成(テキスト版)その4

やったこと 独学エンジニア レッスン4.25-28 関数 前回までに作成した読書ログサービスのコードについて、関数を用いて、リファクタリングした。 shinya-tech.com 学んだこと 関数の使い方 関数は、定義→呼び出しで使用する。 関数の定義の仕方 function 関…

#3 読書ログサービス作成(テキスト版)その3

やったこと 独学エンジニア レッスン4.23-24 foreach文 前回、複数の読書ログを登録できるようにしたが、表示も複数できるようにした。 shinya-tech.com 学んだこと 配列・連想配列の全要素をループするときはforeachを使う。 foreach 配列の全要素それぞれ…

#2 読書ログサービス作成(テキスト版)その2

やったこと 独学エンジニア レッスン4.18-22 配列 前回書いたコードでは読書ログを複数登録できない。(上書きされる) そこで、配列を使って複数の値を格納できるようにした。 shinya-tech.com 学んだこと 配列の基本操作 1.配列を初期化する $配列名 = [値…

#1 読書ログサービス作成(テキスト版)

やったこと 独学エンジニア レッスン4.1-4.18 学んだこと PHPの特徴・歴史 PHPはWEBサイトの作成を目的としたオープンソースのプログラミング言語。 WEBサイトの解析用ツールからスタートし、「手学にWebサイトを構築したい」というユーザーの要望に合わせて…

今日から学習ログを付けていきます。

はじめまして。WEBアプリケーションの個人開発に向けて、プログラミング学習を行なっているシンヤと申します。学習のアウトプット目的で当ブログを開設しました。よろしくお願いします。 何のために プログラミング学習のログをつけるため。 どんな効果を狙…