今さら聞けないHTML　2023年02月18日

Lappinna技術部始動！

# 初めに！
皆さん始めまして！Lapinna技術部のしゃちょ～（仮）です！
このアカウントについての説明をさせていただきます！（やるとは言っていない）


※上記イラストに深い意味はありません。よろしくお願いいたします。

## 記事概要
このアカウントは、初心者向けの記事を投稿するアカウントとなっております。
現職でIT企業に勤めているプロのエンジニアが中心となって記事を上げていく予定となっております！（頑張ってね！

# 投稿予定
## AI関係（機械学習・深層学習/ニューラルネットワーク）
・AIに必要な画像処理技術をまとめてみた（仮）

## WEB開発（PHP/Laravel・HTML・CSS・JS）
・プロのエンジニアが初心者のためのWEBページ作成指導書作ってみた（仮）

## ゲーム関係
・Unityでインベーダー

formの値（連想配列）を受け取ってデータベース（MySQL）へ保存するまでの流れまとめ

# HTML、、ライブラリ取得用php、.env、使い回し用php、DB保存用phpを作成

# HTML
formの項目ごとにdivタグで囲む。
labelタグのfor要素と、inputタグ等のname要素が紐付いている。
id要素は複数の値があるタグ（radioやselect）で個別化できる。
昔と違い、今はsubmitはbuttonタグがあって楽。

# ライブラリ取得用php
使用するライブラリをPHP Composerが管理しており自動生成。
PHPファイルの冒頭でrequireして本ファイルを呼び出す。

# 環境変数を登録した.envファイル
DB接続情報が漏洩するとデータが盗まれてしまう。セキュリティのため、DB接続情報は環境変数化する。
PHPファイルでDB接続記述をする際、環境変数を記述するためDB接続情報の中身は見えない。

```
DB_HOST="mydb"
DB_USERNAME="myuserame"
DB_PASSWORD="mypassword"
DB_DATABASE="mydatabase"
```

# 使い回し用php
ライブラリをrequir

【Docker環境】.envファイルに保存したDB接続情報の環境変数を用いてデータベースへ接続し、HTMLのformから受け取った値をDBへ保存する

# Dockerをスタンバイ

## Dockerアプリを起動

## コードのディレクトリへ cd で移動

## docker-composeを開始
```
docker-compose up
```

# HTMLを書く

## formの項目ごとにdivタグで纏める
例1
```

会社名

```

例2
各ラジオボタンはid名で区別
```

選択肢1

選択肢2

```

## formのactionに移動

CKEditor5の開発環境を構築する

- CKEditor5の開発環境を構築する
```bash
$ git clone -b stable https://github.com/ckeditor/ckeditor5
$ cd ckeditor5/packages/ckeditor5-build-classic
$ npm install
$ yarn run build

# 動作確認用にHTTPサーバを立ち上げる
# ※ インストールされていない場合はインストール
# npm install http-server -g
$ cd sample
$ http-server
```
- 日本語化する
- ckeditor5/packages/ckeditor5-build-classic/webpack.config.js
```diff
plugins: [
new CKEditorTranslationsPlugin( {
// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format

【JavaScript】フォームのinputタグでURLパラメータを取得する方法

先日、フォームのinputタグでURLパラメータを取得する実装を行いました。
備忘録のためにメモ残しておきます。

## 背景
- 広告の流入元を知るため、以下3つのパラメータを取得したい
- utm_source
- utm_medium
- utm_campaign
- 取得したパラメータをフォームで送信したい

## URLパラメータとは
プログラムに情報を送信するため、URLの末尾についた文字列

```
https://hogehoge.co.jp?○○○=×××
```

## パラメータの種類（？）
utm_source：どこからの流入なのかを分類
utm_medium：どのメディアからの流入なのかを分類
utm_campaign：メルマガなど広告を条件ごとに絞って分析する
utm_term：有料検索での「キーワード」を分析
utm_content：一つの広告に同一のURLを複数入れている場合、どの「コンテンツ」から流入したかを分類

## 実装内容
### 大まかな流れ
1. HTMLでinputタグを作成
1. JavaScriptでパラメー

お問い合わせフォームのレイアウト

input, textarea
- input 要素は１行のテキスト入力を受け取るための要素。
- textarea 要素は複数行のテキスト入力を受け取るための要素。
- input 要素は終了タグが不要な点に注意してください。


#### 送信ボタンを作ろう
- 送信ボタンにも、要素を用いる。
input 要素にはtype属性を指定することができ、type属性にsubmit を指定すると、入力欄ではなく、下の図のような送信ボタンになる。
ボタンに表示されるテキストは、日本語のブラウザ

Django テンプレートタグに空白を入れると認識してくれません

# 目的

こんなことで時間を使わないようにしましょう。という意味合いで投稿します。
この投稿の内容は **Djangoのツボとコツがゼッタイにわかる本［第2版］** を元に作成しています。

# 画面遷移がうまくいかない

本書では本棚アプリ作成することを目標としています。
個別に用意された本のページから一覧、編集、削除画面へ遷移することができる。

**全体**

**個別ページの例**

個別ページにて各ボタンを押下してもPage not found (404)が発生

``` console
Pag

10の倍数の差が2以内で条件分岐する方法

復習しアウトプットします。

```ruby:
正の整数を入力し、その整数が、10の倍数（10,20,30...）からの差が2以内であるときはTrueそれ以外はFalseを出力するメソッドを作成
>出力例：
near_ten(12)→True
near_ten(17)→False
near_ten(19)→True
```

```ruby:自身の回答
def near_ten(num)
if num_x = num % 10
num_x <= 2 || num_x >= 8
puts "True"
else
puts "False"
end
end
```
```ruby:模範解答
def near_ten(num)
quotient = num % 10
if quotient <= 2 || quotient >= 8
puts "True"
else
puts "False"
end
end
```

惜しい。。。。惜しいい！！！！！
悔しい。笑

# アプトプット解説
```diff_ruby:
def

docker環境のローカルで、PHPで作成したHTMLファイルをブラウジングする際のURLの意味

# docker環境もXAMP等と同じく、localhostでブラウジングできる

## トップページのURL

```
http://localhost:50080/
```

上記URLのlocalhostは自身のパソコンを指す。
50080の部分はポート番号を指し、何のアプリケーションを指すか？を示している。
この番号はapacheであり、これでdockerのappコンテナ内のapacheにアクセスしていることになる。
その設定はdocker-compose.ymlファイルに記述してある。
以下、その記述箇所

```
ports:
- "50080:80"
```

上記の :80 の箇所はapacheがデフォルトで決めてある番号で、URLにはここまで記述しなくてもapacheが起動するようになっている。