goと,HTML/CSS/JavaScript

JavaScriptを追加する

【開発環境】
OS：Win11（64ビット）
go version go1.19.4 windows/amd64
VSCode1.72.2、及びコマンドプロンプト

◆htmlにJavaScriptを追加する
前回のプロジェクトのhtmlに下記のコードを追加する
＜!doctype html＞
＜html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞A static page＜/title＞
　＜！--CSSの設定--＞
＜link rel="stylesheet" href="/styles/styles.css" type="text/css"/＞
＜/head＞
＜body＞
　＜!--javascriptの設定--＞
＜script type="text/javascript" src="/script/test.js"＞＜/script＞
＜h1＞Hello, World＜/h1＞
＜div id="body"＞こんにちわ、CSS＜/div＞
＜/body＞
＜/html＞

◆layoutの直下にscriptフォルダを作り、そこに「test.js」ファイル作る


◆「test.js」ファイルにコードを書く
alert("このページはとても安全です！");

・実行する
PS D:\GO言語\サンプルプログラム\Go-css> go run main.go

・ブラウザでhttp://localhost:8080/にアクセスする

OKボタンを押すと

以上

goとhtmlとCSS

go言語でhtmlとcssを使う

【開発環境】
OS：Win11（64ビット）
go version go1.19.4 windows/amd64
VSCode1.72.2、及びコマンドプロンプト


・フォルダ構造


1.まずはじめに、「Go-CSS」フォルダに、htmlを表示させるプログラム「main.go」を書く事にする。
package main

import (
"log"
"net/http"
)

func main() {
//ディレクトリを指定する
fs := http.FileServer(http.Dir("layout"))
//ルーティング設定。"/"というアクセスがきたら、
//staticディレクトリのコンテンツを表示させる
http.Handle("/", fs)

//引数のメッセージに出力時間と改行を追加して標準エラー出力に書き出す
log.Println("聞いてる？")

// 8080ポートでサーバーを立ち上げる
http.ListenAndServe(":8080", nil)
}

2、「Go-CSS」フォルダ内に「layoutフォルダ」を作り、そのフォルダ内に「index.html」ファイルを作り、htmlを書く


3、「layout」フォルダ内に「styles」ファルダを作り、そこに「styles.css」ファイルを作る
・「styles.css」のコード
#body
{color: #c0392b}


4，「main.go」を実行する
PS D:\GO言語\サンプルプログラム\Go-css> go run main.go

5、ブラウザで、http://localhost:8080/にアクセスする


以上

入力フォームと確認画面

POSTされたデータを受け取って処理する ― 入力フォームと確認画面の作成

【開発環境】
OS：Win11（64ビット）
go version go1.19.4 windows/amd64
VSCode1.72.2、及びコマンドプロンプト

【入力フォームの作成】
1.入力フォームのテンプレート
入力フォーム画面のデザインテンプレートを作成します。
templatesディレクトリにuser-form.gtplファイルを作成する


入力フォームを出力するプログラムを作る
「main.go」
package main

import (
"fmt"
"html/template"
"net/http"
)

// 入力フォーム画面
func HandlerUserForm(w http.ResponseWriter, r *http.Request) {
// テンプレートをパースする
tpl := template.Must(template.ParseFiles("templates/user-form.gtpl"))

// テンプレートに出力する値をマップにセット
values := map[string]string{}

// マップを展開してテンプレートを出力する
if err := tpl.ExecuteTemplate(w, "user-form.gtpl", values); err != nil {
fmt.Println(err)
}
}

func main() {

// "user-form"へのリクエストを関数で処理する
http.HandleFunc("/user-form", HandlerUserForm)

// サーバーを起動
http.ListenAndServe(":8080", nil)
}
・プログラムを実行する
PS D:\GO言語\サンプルプログラム\登録フォーム> go run main.go

・ブラウザでhttp://localhost:8080/user-formにアクセスする


・データ入れて「確認画面へ」ボタンを押す
404 page not foundが表示される

【POST値を受け取る確認画面の作成】
入力フォームからPOSTで受け取った入力値を表示する確認画面を作る
確認画面のテンプレートを作る「user-confirm.gtpl」


【確認画面を出力するプログラムの追加】
GoプログラムでHTTPリクエストのPOST値を受け取るには、net/httpパッケージのRequest.FormValue関数またはRequest.PostFormValue関数を使うが、基本的にはFormValueを使用すれば問題ない！
「main.go」ファイル
package main

import (
"fmt"
"html/template"
"net/http"
)

// 入力フォーム画面
func HandlerUserForm(w http.ResponseWriter, r *http.Request) {
// テンプレートをパースする
tpl := template.Must(template.ParseFiles("templates/user-form.gtpl"))

// テンプレートに出力する値をマップにセット
values := map[string]string{}

// マップを展開してテンプレートを出力する
if err := tpl.ExecuteTemplate(w, "user-form.gtpl", values); err != nil {
fmt.Println(err)
}
}

// 入力内容の確認画面
func HandlerUserConfirm(w http.ResponseWriter, req *http.Request) {
// テンプレートをパースする
tpl := template.Must(template.ParseFiles("templates/user-confirm.gtpl"))

// テンプレートに出力する値をマップにセット
values := map[string]string{
"account": req.FormValue("account"),
"name": req.FormValue("name"),
"passwd": req.FormValue("passwd"),
}

// マップを展開してテンプレートを出力する
if err := tpl.ExecuteTemplate(w, "user-confirm.gtpl", values); err != nil {
fmt.Println(err)
}
}

func main() {

// "user-form"へのリクエストを関数で処理する
http.HandleFunc("/user-form", HandlerUserForm)

// "user-confirm"へのリクエストを関数で処理する
http.HandleFunc("/user-confirm", HandlerUserConfirm)

// サーバーを起動
http.ListenAndServe(":8080", nil)
}

実行結果
1.ブラウザでhttp://localhost:8080/user-formにアクセスする

2.フォームに入力を行い、[確認画面へ]をクリック

3.フォームへ入力した値が確認画面に出力される

4.「入力画面に戻る」を押す

goのテンプレート

テンプレートの記述方法

【開発環境】
OS：Win11（64ビット）
go version go1.19.4 windows/amd64
VSCode1.72.2、及びコマンドプロンプト

【html/templateパッケージ】
Goの標準パッケージの一つであるhtml/templateは、PHPやJavaなどの他言語にもみられるテンプレートエンジンのような機能を提供している。
html/templateパッケージが実装るテンプレートは、コードインジェクション対策が施された安全なHTMLを生成する

【テンプレートの記述方法】
それではまず、HTMLテンプレートの記述方法をみてみましょう。
templatesディレクトリを作成し、その中にsample.gtplというファイルを作成する。
拡張子は任意ですが、ここではgoのテンプレートファイルであることを表すgtplという拡張子にした。


【テンプレート出力に使用するメソッド】
テンプレートを出力するためのGoプログラムを作る。
そのつログラムで、html/templateパッケージの3つのメソッドを利用する。

1.作成済のテンプレートを読み込むために、ParseFilesメソッド
定義
func ParseFiles([テンプレートファイルのパス] string) (*Template, error)

2．テンプレートを格納するオブジェクト変数の初期化するMustメソッド
定義
func Must([テンプレート] *Template) *Template

3.流入するデータを指定してテンプレートを描画するExecuteTemplateメソッド
定義
func (t *Template) ExecuteTemplate([http.ResponseWriter] io.Writer, [テンプレート名] string, [流入するデータ] interface{}) error

【テンプレートを表示するプログラム】
templatesディレクトリに「main.go」も作成する。
package main

import (
"fmt"
"html/template"
"net/http"
)

func gtplHandler(w http.ResponseWriter, r *http.Request) {

// テンプレートをパースする
tpl := template.Must(template.ParseFiles("sample.gtpl"))

// テンプレートに出力する値をマップにセット
values := map[string]string{
"account": "user-0001",
"name": "山田太郎",
"passwd": "sample-pass",
}

// マップを展開してテンプレートを出力する
if err := tpl.ExecuteTemplate(w, "sample.gtpl", values); err != nil {
fmt.Println(err)
}
}

func main() {
// ルートへのリクエストを"gtplHandler"関数で処理する
http.HandleFunc("/", gtplHandler)

// localhost:8080でサーバー処理開始
http.ListenAndServe(":8080", nil)
}

実行
PS D:\GO言語\サンプルプログラム\templates> go run main.go

・ブラウザでhttp://localhost:8080/にアクセスする

JSONファイル

JSON形式で外部設定ファイルを作成・利用する方法

【開発環境】
OS：Win11（64ビット）
go version go1.19.4 windows/amd64
VSCode1.72.2、及びコマンドプロンプト

【JSON形式の設定ファイルの作成】
作成場所


・JSONフォロダーにサンプルコード「main.go」を書く
package main

import (
"fmt"
"strconv"

"JSON/conf" // 実装した設定ファイルパッケージの読み込み
)

func main() {

// 設定ファイルを読み込む
confDB, err := conf.ReadConfDB()
if err != nil {
fmt.Println(err.Error())
}

fmt.Println("取得した設定内容を出力します")
fmt.Println("ホスト名: " + confDB.Host)
fmt.Println("ポート: " + strconv.Itoa(confDB.Port))
fmt.Println("接続先DB名: " + confDB.DbName)
fmt.Println("接続ユーザ名: " + confDB.User)
fmt.Println("パスワード: " + confDB.Pass)

}

・JSONフォロダーにサブフォルダーconfを作成し、そこにjsonファイルを書く
コード
{
"host": "hoge-host",
"port": 3306,
"db-name": "hoge-db",
"user": "hogehoge",
"pass": "fugafuga"
}


・サブフォルダーconfに、jsonファイルを読み込むプログラム「db.go」を書く
package conf // 独自の設定ファイルパッケージ

import (
"encoding/json"
"io/ioutil"
)

// DB設定の構造体
type ConfDB struct {
Host string `json:"host"` // ホスト名
Port int `json:"port"` // ポート番号
DbName string `json:"db-name"` // 接続先DB名
User string `json:"user"` // 接続ユーザ名
Pass string `json:"pass"` // 接続パスワード
}

// DB設定読み込み関数
func ReadConfDB() (*ConfDB, error) {

// 設定ファイル名
const conffile = "conf/db.json"

// 構造体を初期化
conf := new(ConfDB)

// 設定ファイルを読み込む
cValue, err := ioutil.ReadFile(conffile)
if err != nil {
return conf, err
}

// 読み込んだjson文字列をデコードし構造体にマッピング
err = json.Unmarshal([]byte(cValue), conf)
if err != nil {
return conf, err
}

return conf, nil
}

・JSONに「go.mod」を書く
module JSON // モジュール名はディレクトリ名と同じにする

go 1.18

・実行する
PS D:\GO言語\サンプルプログラム\JSON> go run .
取得した設定内容を出力します
ホスト名: hoge-host
ポート: 3306
接続先DB名: hoge-db
接続ユーザ名: hogehoge
パスワード: fugafuga