windowsでウェブサイト開発入門 PHPでプログラミング 1 概要

シェアする

こんにちは。

プログラミングの第一歩として、windowsパソコン上に、サーバー環境を構築して、簡単なプログラムを作って、ブラウザで表示するウェブプログラミング入門の記事を書いていこうと思います。

どんなプログラマも、最初はゼロから学んだわけで、まったくやったことのないプログラミング未経験でも、ウェブサイト開発の体験ができる内容にしようと思います。

windowsでウェブサイト開発入門 PHPでプログラミング概要

概要は下の表のとおりです。

講座の概要

windowsでウェブサイト開発入門 概要
対象

プログラミング経験がほとんどない、プログラミングをやりたい人

参加条件

インターネット接続できるWindows10のパソコンを持っていること

達成すること ウェブプログラミングを体験すること。2進数→10進数変換ツール、簡単な数字あてゲーム を作り、Windows上にサーバー環境を構築して動作させ、ブラウザで表示させる。
使うツール
サーバー環境 XAMPP
エディタ  Visual Studio Code
ブラウザ google Chrome
使う言語 html、CSS、PHP、javascript

その後の展開としては、データベース・フレームワーク・デザインを学び、本格的なウェブサイトを作ったり、レンタルサーバーを借りてウェブサイトを公開。

それから、ソフトウェアハウスへ就職・転職して腕を磨いてもよいですし、自分で仕事を受けるフリーランスとなってもよいと思います。

そのための第一歩となるので、ぜひ、挑戦してみてください。

あなたがまだプログラミング未経験の場合、プログラミングでできることを体験して、自分に向いているか判断するのにもよいと思います。

講座の内容

この講座は、次のような10回の講座を予定してます。

  1. 概要とウェブサイトの表示される仕組み(この記事)
  2. XAMPPのインストールとウェブサーバー起動
  3. Visual Studio Code(エディタ、略してVS code)のインストール
  4. XAMPPの動作確認とVS codeでのプログラムコードの入力
  5. HTML、CSSを理解する
  6. phpを理解する
  7. 2進数から10進数への変換ツールの制作
  8. 上記コードを理解
  9. 応用編 数字あてゲームの制作
  10. 上記コードを理解(まだこの段階では理解できなくてもよいかも)

ウェブサイトの表示される仕組み

では、第一回目の授業として、ウェブサイトの表示される仕組みを説明します。

この仕組みの中で、html、CSS、PHP、Javascriptというプログラミング言語や、マークアップ言語の役割も説明します。具体的な言語の内容は、次回以降に紹介していきますね。

サーバーとはサービスを提供する者

ウェブサイトの内容を提供するコンピュータを「ウェブサーバー」ということをどっかで聞いたことありますか?

実は、クラウドという言葉が流行るずいぶん前、インターネットができたばかりのころから、なにか、サービスを提供するものをサーバーと呼んでました。サーブとは、召し使いをするとか、奉仕するという意味です。で、奉仕する相手は、クライアント、つまりお客様です。

サービスを提供するサーバーアプリケーションと、そのサービスを利用するクライアントアプリケーションがネットワーク上で通信をして、クライアントアプリのすぐ近くにいるサービスユーザーがサービスを利用していました。

サーバーの例

サーバーにはいろんな種類があります。

ウェブサイトの内容を提供するウェブサーバーがこの講座で扱うサービスですが、ほかにも、例えば、

  • 画面表示をするXサーバー
  • メール送受信をするメールサーバー
  • データを処理するデータベースサーバー
  • ファイルの保存・読み出しを行うファイルサーバー
  • プリンタから印刷するプリンタサーバー

どれも、ユーザーが使っているクライアント(アプリケーション)が、サーバーにサービスを要求して、やってもらってるんです。

クライアントとサーバーにアプリを分けたクライアントサーバーモデル

特に、多くの人が同じサービスを使いたいとき、1つのコンピューターで1つだけサーバーアプリケーションを動かして、いろんなコンピュータのクライアントアプリケーションからアクセスするっていうのが、便利だったんです。

このようなアプリケーションの作り方を、クライアントサーバーモデルと名前がついているほどです。

例えば、会社で1台のプリンタに対して、10人の社員が印刷したいって時、プリンタに内蔵されているサーバーアプリケーションに、それぞれのパソコンのクライアントアプリからアクセスするんですよ。

クラウドとは、サーバーがどこか遠く雲の向こうにある状態

クラウドコンピューティングとは、サーバーがどこにあるのかわからない状態を指してます。

本当は、データーセンターという工場みたいなところに、コンピュータをいっぱい並べて、そこでサーバーアプリケーションを動かしているのですが、サーバーがあるところがどっかよくわからないところという意味で、クラウド(つまり雲の向こう)と名付けたようですよ。

ウェブサーバーとクライアント(ブラウザ)の関係

サーバーとブラウザのやり取りの内容

ブラウザにユーザがURL(https://で始まるアドレス)を入力したり、リンクをクリックします。

ブラウザは、URLが示すウェブーページの内容をサーバーに要求します。

URLがドメイン名で書かれていた場合、ドメイン名がIPアドレスに変換されてから、IPアドレスが示すサーバーまで要求がたどり着きます。

サーバーは要求に対するウェブページのデータを、ブラウザに向かって送ります。

イメージ:

ブラウザ:要求:GET https://example.com/hige/

サーバー:返答 ページの内容

ブラウザ:要求:POST https://example.com/hige/add データ

サーバー:データの処理と 返答:ページの内容

コンピュータが分かれてても、同じコンピュータでもよい

上の例では、インターネットに要求を出すといいましたが、ローカルコンピュータを表すIPアドレスを使えば、自分自身のサーバーに要求を出すことができます。

アプリケーションを区別するポート番号

コンピュータを指定するのにIPアドレスを使うのですが、コンピュータにサーバー機能を持つアプリが1つしか起動してないってことはあまりないです。

例えばインターネットサービスを提供しているサーバーコンピュータには、ウェブサーバーアプリ、FTPサーバーアプリ、メールサーバーアプリなどが起動している場合があります。

そこで、実は、コンピュータ内のアプリケーションまでを区別するためにポート番号を使ってます。

クライアントがサーバーに要求を出すとき、何のサーバーアプリに要求を出すかは、ポート番号で指示します。

ポート番号は、マンションでいう部屋番号、会社でいう部署名のようなものですね。

ポート番号は、それぞれのサーバーアプリで好きな番号を使うこともできるのですが、クライアントがポート番号を知らないと要求することができませんよね。

なので、有名なサービスには、慣習として使うポート番号がきめられています。

例えば、ウェブサーバーは、暗号化なし通信は80番、SSLで暗号化された通信は443番と決められているため、普段ブラウザからウェブページを見るときには、ポート番号の指定を省略してもよいことになってるんです。

あえて指定してアクセスしても問題なく、例えば、

https://kekaku.addisteria.com:443/wp/

などのように指定してアクセスすることもできます。

ウェブサーバーとブラウザの両方が分担して処理をしてます

ウェブページを構成して、表示するために、ウェブサーバーとブラウザで以下のような処理分担をしています。

ウェブサーバーではプログラム言語PHPで処理して HTML、javascriptを送信

ウェブサイト開発で使うプログラミングも種類はいっぱいありますが、PHP、HTML、javascriptを使った開発の場合、サーバー側でPHPが実行され、実行結果をHTML、javascriptのプログラムコードに変換して、ブラウザに送ります。

例えば、沢山顧客のいるサービスのマイページの表示をする場合、該当するユーザーの情報だけをまとめてページを作ったりするのは、サーバー側で行います。

ブラウザではHTMLに沿ったレイアウトで情報表示

ブラウザ側では、HTMLの指示に従って、ウェブサイトをレンダリング(文字の大きさや飾りなどでレイアウトして表示)します。

例えば、htmlタグに応じて、見出しを大きく表示したり、色を付けたり、箇条書きにしたり、表にしたり、です。

javascriptはプログラム言語、ブラウザ上で実行されます

HTMLの中に、javascriptのコードがあると、ブラウザが実行します。動きのあるウェブサイトは、PHPではなく、javascriptで動きをプログラミングしています。

例えば、アラート(警告)のポップアップウィンドウを表示させたり、ウェブサイトの中でグラフ表示を切り替えたり、ユーザーのマウス操作やキーボード操作にすぐに追従することが必要な処理は、javscriptで実現されています。

まずはPHP、HTML、CSS、javascriptで基礎を固めましょう

今回の講座では、サーバー側のプログラム言語にPHPを使い、ブラウザ側では、HTML、CSS、javascriptを使います。でも、それだけじゃなくて、世の中にはいろんな言語があります。

でも、基本を学び、また、実践的な仕事をするうえでも、まずは、PHP、HTML、CSS、javascriptを学んでおくのが、よいと思います。

学びやすいし、基本が十分身に付きますので。

この講座を終えたら、次はデータベースMySQLも学んで、そこまでをセットにして、実践的なウェブサイトを作れるまで経験を高めていくのがよいでしょう。

早くからいろんな言語をつまみ食いするより、一つ極めておけば、ほかの言語でもすぐに対応することができますよ。

まとめ

この記事では、ウェブサイト開発入門講座の概略と、ウェブサーバーの仕組みについて説明しました。

次回から、まずは、環境づくりを行っていきます。

次回もよろしくお願いします。

一覧

第1回:概要とウェブサイトの表示される仕組み
第2回:XAMPPのインストールとウェブサーバー起動

この記事が気に入ったら
いいね ! しよう