【挫折させないWebアプリ講座⑥】ユーザー管理の第一歩、HTMLからデータを受け取ろう

コードを書きたい皆さん。お待たせしました今日からコーディング編がスタートしますよ。 まず初めにこちらで用意した簡単なサンプルプログラムをCloud9上に作っていきましょう。 動画解説はコチラ 開発環境(Cloud9)のセットアップがまだの方はコチラ 【挫折させないWebアプリ講座④】プログラミング初心者が挫折する開発環境を3分でゲットする方法2017.04.29 この記事で扱う範囲 以前の記事でWebアプリの全体像を説明したのは覚えていますか? 【挫折させないWebアプリ講座①】プログラミング初心者必見!Facebookで学ぶWebアプリの仕組み2017.05.05 その中で今日はHTMLとPHPの連携によってユーザーからデータをもらうサンプルアプリを作っていきましょう! 今日の目標 HTMLとPHPの連携でデータを受け取る Webアプリはユーザーからもらうデータを使って動いています。 なので、Webアプリを作るにはまずユーザーからデータを受け取る処理が必要ですね。 その処理はHTMLの知識も必要となるので、まとめて解説しましょう。 まずはHTMLから解説 HTMLはタグ(↓こんなのです)によって様々な挙動を示すように設計されてます。 <h1>これは見出し</h1> <p>これは本文</p> <form>フォームタグ→今日の重要部分</form> formタグでPHPと連携 HTMLの中にはformタグなるものがあります。これはサーバーへデータを送るフォームを作るタグで、たとえばTwitterへログインする時もこのフォームからメールアドレスとパスワードが送られて、データベースのものと一致するか確認されているんです。 じゃあ実際にフォームから名前を送ってPHPで受け取るプログラムを作っていきましょう。   YUMA僕は根性論なんて言わないので、サンプルコードをコピペして使ってくださいね。 [crayon-5d87bb2e84c27274173875/] こちらが完成形のHTMLです。これを解説していきますね。 formタグの解説 formタグに囲われた部分がフォームになるので、まずはフォームタグを書きましょう。 さて、formの後にあるaction=""はデータが送信された後の遷移ページを示しています。今回のプログラムは別のページに移動するわけではないので、空でOK。 その後のmethod="post"はデータの送信方法を選んでいます。postとgetがあるんですが、今回はややこしいので説明しません。しばらくはpostを使えば問題ないので、気にせずいきましょう。 次のinputタグが入力画面になります。type="text"というのは文字列を意味していて、日本語の名前なんかも送信できるタイプになってます。 そして次のnameは重要だからよく読んでくださいね。これは送信されるデータの名前を自分で決められるのです、PHPで受け取るときに使うので、覚えておきましょう。 さて、ここまでがフォームの見える部分の解説でした。   最後にデータ送信の設定を決めるのが<input...
2017年5月16日0 DownloadsDownload