2019.12.31こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。(※女性割引は現在新規募集はしておりません)プログラミング学習を開始して早くも250日以上経過しました。現在はlaravelの学習として作っている掲示板で、プロフィール画像をアップロード&変更する、という機能を実装しています。﻿こんな感じで、初期値はnoimageという画像が表示される設定で、マイページからプロフィール画像を簡単に変更できる仕様です。ブラウザで表示について、参考になったサイトや実際書いたコードについてまとめています。全てのコードは載せておりませんので、もしまだlaravelを触ったことのない方でしたら、こんな感じで書けばこうなるんだなーくらいで見ていただければ幸いです。今回の実装をするにあたり参考させていただいたサイト様を先にご紹介します。画像のライブプレビュー機能・・・ウェブカツのウェブサービス部laravelでの画像アップロード・・・Laravelで画像をアップロードする方法laravelで画像のパスをDBに保存・・・Laravelで画像ファイルアップロードをする簡単なサンプル主に2つめのむちょこさんの記事から、アップロードの流れや細かなコードをお借りしています。今回はデータベースを使いたかったので、3つめのサイト様からデータベース保存のコードをお借りしました。画像ライブプレビューのJSコードはウェブカツで学んだことをそのまま実装しています!laravel(PHP)で画像保存とは先に、私自身が画像を保存することについてちゃんと理解していなかったので、簡単にまとめてみます。画像のパスをDBに保存します。画像自体をデータベースに保存することもできますが、データサイズが大きい画像をデータベースにあげることは良いことではないようです。Imageと書かれた画像が表示されるように設定します。デフォルト画像を用意する(今回はnoimage.png)public配下の任意のフォルダに画像を入れておくユーザー登録時、自動でデフォルト画像のパスが保存されるようにするこの流れを実現させるためには、以下のように設定してゆきます。1テーブルに画像パス保存用のカラムを追加usersテーブルにパスを保存するためのカラムを作成します。add_my_pic_to_users_tableというコマンドで(ファイル名は任意)カラム追加用のマイグレーションファイルを作成しました。いうデータを与える設定ができました。downは、my_picカラムがあったら消す、という記述のみ。;});}モデルにも追記します。'my_pic',];‘my_pic’,を追加。コントローラーも修正。app/Http/Controllers/Auth/RegisterController.phpにユーザー登録に関わるコントローラーの内容が記載されているので、その中のcreate(データベース登録)の部分に追記。'noimage.png',]);}最後の行で、’noimage.png’が入るよう指定しています。画像のライブプレビューはウェブカツで学んだそのまんまなのでコードはここに載せませんが、HTML構造?的な部分だけをまとめておきます。最初何がどうなっているのか理解できなかったので・・・こんな感じでformタグに囲まれたタグ達がレイヤーになっていて(position:absolute;でレイヤーにする)、それぞれのタグで役割が別れています。ポイントは画像ファイルを受け取るインプットタグ。下に配置してしまうとドラッグアンドドロップができなくなってしまうので、z-indexでちゃんと一番上にくるようにします。オレンジ色のプレビュー画面を表示するタグですが、このsrc=””にはjsでライブプレビュー用の一時的なパスを挿入する仕様です。そのためのJSのコードはウェブカツのそのまんま。>>>『オンラインプログラミング学習スクール・ウェブカツ!』の詳細を見るアフィリエイトリンクではありませんディレクトリに保存&DB登録ブラウザから画像を受け取るための、inputタグを改めて見てゆきます。上記インプットタグから受け取った画像データは以下の流れで処理されます。いうコントローラーの処理を通る、という意味です。いうコントローラーの記述はこんな感じ。フラッシュメッセージのデータも一緒に。ダンプできます)"public/profile_images/520191228112710.jpg"このように、ディレクトリ+ファイル名の文字列が入っています。最後のファイル名の部分のみを取得し、my_picカラムに代入。いう部分だけ拾ってる、ということになります。カラムに「520191228112710.jpg」を代入しています。basenameについてはこちらDBへの保存に関しては、こちらの記事を参考にさせていただきました。Laravelで画像ファイルアップロードをする簡単なサンプルバリデーション画像をポストするときにバリデーションを行う場合、コントローラーにバリデーションを記述してもいいですが、以下のようにカスタムリクエストクラスにファイルを作成して、そちらにバリデーション内容を書くほうが後々良いそうです。上で載せているコントローラーの処理は、すでにリクエストクラスに紐付け済みです。ProfileRequestと入力すると作成できます。)に対してバリデーションを指定しています。エラー表示バリデーションでひっかかったらエラー表示をしてほしいてますよね。こちらはむちょこさんのコードをそのままお借りしています。HTMLコードを貼るだけでちゃんとエラー表示してくれるなんて、larvalすごい。}}">表示したい場所に、このようにimgタグのsrcにディレクトリとDBのファイル名を挿入ればOKです。画像を保存&表示できるようになりました・・・!>>>『オンラインプログラミング学習スクール・ウェブカツ!』の詳細を見るアフィリエイトリンクではありませんドキュメント読もう色々なところからコードをお借りしてなんとか作成した状態なので、リファクタできる要素が十分にあるのではないかと思います。気になる点としては、DBのデータ(画像ファイル名)は新しく保存するたびに上書きされて消えるけど、フォルダに保存した画像ファイルはどんどん溜まってしまうこと。最新のだけ残してあとは自動で削除されるようにしたい。ドキュメント読んで理解してゆかないと、です。リクエストの取得ドキュメントはなんだか読みにくくてあまり好きではないのですが、そうも言ってられない...>>>『オンラインプログラミング学習スクール・ウェブカツ!』の詳細を見るアフィリエイトリンクではありませんプログラミング学習を始める前はlaravelもVueも知るよしもなく、ただプログラミングができれば色々楽しそう〜!というだけだったのですが、今はできること、やりたいことの幅がリアルに広がった感じがして、とても楽しいです。エラーやわからないことだらけで「もういやだ〜」とうんざりする事もありますが、サイトの見える部分だけじゃなく後ろで動く仕組みが作れるって、なかなかすごい事ですよね。ウェブカツはこの12月末で退部となりますが、ほんとウェブカツを選んで良かったなーと感じています。今はもうなき女性割引で、月2万円(!)でこれだけのプログラミングスキルを学べたことはほんとに感謝です。プログラミングのスクールや商材はたくさんあるし、実際入ってみないと分からないこともあるとは思いますがウェブカツは教えてくれてる内容だけじゃなくて、在席生どうしが繋がれるのも大きなメリットだと思います。始める前は想像もしてなかった良い刺激になりました。今まででありがとうごさいました!ウェブカツ生ではなくなりますが、これからも私とプログラミングの関係は変わらないので、今後ともよろしくお願いします(^o^)プログラミング勉強シェアするTwitterFacebookはてブPocketLINEコピーmiyaむちむちコード関連記事プログラミング勉強ウェブカツでプログラミング学習!半年で作ったもの色々まとめこんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。今回の記事は今までの総まとめ的な感じで、アウトプットとして作ったものをまとめてみようと思います。これからプログラミングを学習したいけど、どのスクールが...プログラミング勉強ウェブカツでプログラミング学習!選んだ理由と、2週間たった感想を。ウェブカツでプログラミングを勉強して2週間経ちました!ざっくりした感想や、気になることなどをシェアします。ウェブカツプログラミング学習記録こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。下からにょきっと出てくる「トップへ戻る」ボタン縦長のページでよくある「トップへ戻る」ボタン。走りつつもちょっと伸び悩み。ウェブカツ!女性割引にてプログラミング学習中のみや***です。プログラミング学習を開始してから、137日経過しました。他のウェブカツ生の方が素敵なアウトプット記事を書かれているのを見て、私も学んだことを自分の言葉...プログラミング勉強スプレッドシートのデータをcsvでphpMyAdminからDBへインポートする流れ(とりあえず)スプレッドシートで作成したデータをMySqlに流し込みたい。スプレッドシートのマクロをいじってスマートにデータの連携を図りたい。ターミナルをいじってみるも挫折。初心者からプログラミング学習。ウェブカツ!こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。ウェブカツで学習を開始してから、もう半年が経過しました。ウェブカツプログラミング学習記こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。先日、フロントエンドエンジニアのアルバイト面接に行ってきました。フロントエンドの採用において未経験者と実務経験者の壁はとても厚いといいますし、そろそろ...プログラミング勉強クリックした要素から近いdata属性の値を取得(children使用)要素をクリックしたら、クリックした直近要素のdata属性の値を取り出したい。ウェブカツ!プログラミング学習記こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。最近ウェブカツでの学習は少し横に置いて、ワードプレスのカスタマイズを行っていました。gulp使わず済ませたいホームプログラミング勉強About管理人:みやウェブサイト作ってる人です。ワードプレスでブログを始めたのがきっかけでウェブの世界へ。マイナー言語学習のための健全なマッチングサイトを作るのが2020年の目標。ウェブカツプログラミング学習記2019.10.30初心者からプログラミング学習。コード.メニューHOMEプログラミングワードプレスお問い合わせホーム検索トップサイドバーAbout管理人:みやウェブサイト作ってる人です。ワードプレスでブログを始めたのがきっかけでウェブの世界へ。マイナー言語学習のための健全なマッチングサイトを作るのが2020年の目標。ウェブカツプログラミング学習記2019.10.30初心者からプログラミング学習。ウェブカツ!2019.10.142019.10.16スポンサーリンクタイトルとURLをコピーしました。