文系出身でも・未経験でも・プロのプログラマーを目指すブログ

ウェブカツ‼︎でのプログラミング学習進捗を報告します

自作サービス着手しました(画面構成・WF・テーブル設計・データベース作成)

 こんにちは。

文系出身でも・未経験でも・プロのプログラマーを目指すブログ

略して「プロプロ」

あんまん(@aaii0123)です。

 

まだまだ、プロのプログラマーには程遠いワタクシですが、

ついに自作webサービスの制作に着手いたしました!

 

これから、できるだけその過程を記録していこうと思います!!

 

使用言語

PHP

フルスクラッチ制作

 

何から手をつけていいやら状態ですが、まずはウェブカツのwebサービス

「よくわかるPHPの教科書」(たにぐちまこと、マイナビ)を参考に、

・画面構成の検討

・XDによるWF作り

・テーブル設計

・データベース作成

 を行いました!

画面構成

画面構成は、紙に手書きでどんな画面が必要かと、

それぞれの画面の関係性を図式しました。(一番上のclear:both;は無関係(笑))

 

f:id:iolwloi:20190929232242j:plain

 

ウェブカツの動画を見よう見まねで書き出しましたが、

ログインしたらマイページではなく、コンテンツ一覧画面に推移させ、

マイページはコンテンツ一覧から表示させる部分に

若干のオリジナリティーを入れました!

 

画面は全部で12画面+入力内容確認画面(新規登録時などの)の

13画面の予定です!

 

XDでWFづくり

続いて、XDをダウンロードしてWFを作成しました。

XDを使うのは初めてだったので、XDのチュートリアル

https://helpx.adobe.com/jp/xd/how-to/beginners-tutorial-1.html

をさらっと視聴し、こちらも見よう見まねで挑戦・・!

 

制作の途中経過・・

f:id:iolwloi:20190929233257j:plain

 

まだ、これから変更を加える予定ですが、

なんとなく各画面の要素のイメージはできました!

 

テーブル設計&データベース作成

そして、テーブル設計とデータベース作成まで一気に行いました!

テーブル設計は、これから作るサービスでどんなデータを扱うのかを

まず、MACのメモ帳機能に書き出しました。

f:id:iolwloi:20190929234024j:plain



そして、それを見ながら慎重にデータベースを作っていきました。

 

f:id:iolwloi:20190929234124j:plain



他のウェブカツ生の方のツイートに、

初めのデータベース設計に失敗するとあとが大変

という内容を見かけたので、多少の不安がありますが

とりあえず、進んでいこうと思います!!

 

今日の学び

  • DB作成時、varchar型は忘れずに照合順序(utf8_general_ci)を指定する
  • オートインクリメントを設定する際はインデントにプライマリーを指定する
  • XDの簡単な操作

 

明日は、WFの微調整と画面モック作りに取り組みたいと思います!