【XAMPP】設定と対処法
こんにちは。ダイスケです。
本日は、以前この記事で書いたXAMPPの細かい設定と、
エラーなどの対処法をご紹介していきたいと思ってます。
それでは早速進めていきましょう！
本日の内容
データベースの設定
XAMPPではサーバーと一緒にデータベースをインストールします。
アプリケーションからデータベースに接続できるようにしていきます。
今回はWindowsでの設定を書いていきます。
１．環境変数PATHを設定
環境変数とは、サーバー環境上で元から設定された設定値のことです。
これを設定しておくと、コマンドの所在を検索できるようになります。
まずスタート画面で[コントロールパネル]→[システムとセキュリティ]
→[システム]→[システムの詳細]から[環境変数]ボタンをクリックします。
この画面が現れたら環境変数をクリックして設定します。
次の画面に移ったら、システム環境変数欄の「PATH」(小文字の場合もある)を選択、
OKをクリックします。クリックしたら変数値のところに、
「C:¥xampp¥mysql¥bin」を追加します。
※元から書かれている値を消さずに「；」で区切って値の後ろに追加します。
２．rootユーザーのパスワードを設定する
Windowsスタート画面からコマンドプロントを開き、次のコマンドを実行します。
>mysql -u root password
New password: 11111 ←11111とパスワードを設定
Confirm new password: 11111 ←パスワードを再度入力
３．新しいデータベースを作成
Enter password:11111 ←パスワード11111を入力
Welcome to the MariaDB...(省略)
MariaDB[(none)] > CREATE DATABASE practice CHARACTER SET utf8;
↑ practiceデータベースを作成
Query OK, 1 row affected (0.02 sec)
MariaDB[(none)] >exit; ←MariaDBを終了
Bye
※やじるしは入力しない
これでデータベースの設定は終わりです。
Apacheのエラー対処法
ApacheとはXAMPPをインストールするとパッケージされているサーバーです。
Apacheが上手く起動しない場合は以下のような原因が考えられます。
１．Apacheが単体でインストールされている
以前Webアプリケーションを作成したり、
他の言語の環境を整えている方に多いです。
その場合は先にインストールしたApacheをアンインストールしてください。
MariaDBの場合も同じです。
２．ポート80を他のサービスが利用している
その場合には利用しているサービスを停止してください。
IISを停止する方法は、コントロールパネルの[システムとセキュリティ]
→[管理ツール]→[インターネットインフォメーションサービスマネージャー]で、
→[プログラムと機能]→[Windowsの機能の有効かまたは無効か]をクリックして、
IISにチェックしてOKをクリックします。
終わりに
今回はデータベースの設定とApacheのエラー対処法を書きました。
初めての方にとってエラーや設定は挫折の原因になると思います。
僕の経験の中で感じたエラーなどは解決策と共に共有していきます。
一緒に乗り越えていきましょう！
最後までご購読ありがとうございました！
【PHP】PHPを始める手順
こんにちは。ダイスケです。
本日はPHPを利用するための準備を書いていきます。
HTML&CSSと違って本格的な言語になります。
少しだけ複雑になりますが、一緒に進めていきましょう。
本日の内容
本日のゴール
"PHPの開発環境が準備できる" です。
PHP学習のスタートができます。
一緒に見ていきましょう！
PHPを始めるメリット
まずPHPを始めるメリットをご紹介します。
１．サーバーサイドを扱う言語の中では比較的習得が簡単であることです。
初心者にとっても始めやすく、プログラミングの経験がある人ならば、
そんなに時間がかからず習得できると思います。
２．ドキュメントが豊富であることです。
使われる歴史も長く、多くの人が参考書やネットに無料でソースコードを上げるなど、
情報が多くあり、挫折しにくいメリットもあります。
３．利用できる環境が多いことです。
PHPは使えるプラットフォームが幅広いです。
その点ではJavaも劣らないのですがレンタルサーバーの数においては、
PHPが上回っています。技術面ではないですが、
作成したアプリをすぐに試す／公開するという点ではメリットになります。
学習が始めやすい面ばかりになりましたが、
技術面でもメリットはたくさんあります。
少しずつご紹介していきますのでお楽しみに！
開発環境の準備
PHPを使うためには環境を整えなければなりません。
必要なものは、Webサーバー・PHP本体・データベースサーバーです。
データベースサーバーは必ずしも必要ではありませんが、
アプリ開発をするならあってもいいと思うので用意しましょう。
これらを1つずつ準備するのはインストールの時間などが多くなってしまいます。
なので、これらをまとめてインストールできるXAMPP(ザンプ)を使います。
XAMPPの詳しいインストールの方法は別の記事で書いてるので参考にしてください！
使い方
まず初めに、XAMPPからApacheとMySQLを起動します。
起動したら、エディターを開き新規文章を作成し、次のコードを入力しましょう。
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<title>練習</title>
</head>
<body>
<?php
// print命令は文字を出力する命令です。
print 'HELLO WORLD! <br />';
print 'HELLO PHP! <br />';
?>
</body>
</html>
使うエディターはWindows標準のメモ帳以外ならほぼなんでも大丈夫です。
僕の方でもエディターを紹介してますのでご覧ください(^^)
入力したら、名前を付けて保存します。
名前は「start.php」としておきましょう。
保存する場所は、local Disk(C:) の中、xampp→htdocsで、
その中に新規ファイル「practice」を作りその中に保存します。
保存ができたらブラウザを確認しましょう。
http://localhost/practice/start.php
で検索します。
このように表示されると思います。
この1連の流れが出来たらPHPの準備が整いました。
※表示されない場合の原因例
・XAMPPを起動してない
・検索用のスペルが間違っている
・「start.php」がXAMPPフォルダの中に保存されていない
終わりに
ここまででPHPの開発環境が出来たと思います。
いよいよ本格的な学習が始めれますね！
共有できることはどんどん書いていきますのでぜひ参考にしてみてください！
最後までご購読ありがとうございました！
【PHP】XAMPPとは何なのか？
こんにちは。ダイスケです。
本日はPHPを始めようとしている方なら耳にしたことがあるかもしれません。
それは「XAMPP」です。
本日は、「XAMPP」というものについて書いていこうと思います。
本日の内容
本日のゴール
"XAMPPをインストール、起動が出来る" です。
「XAMPP」が何なのか理解して、実際に起動するまでやっていきましょう！
XAMPPとは？
XAMPPとはPHP開発に必要な[サーバー]、[データベース]、[PHP本体]を、
まとめてインストールできるパッケージとなっています。
今回はWindowsでのインストール方法を書いていきます。
XAMPPのインストール方法
XAMPPはXAMPP本家のダウンロードページから、
インストールができます。
https://www.apachefriends.org/jp/download.html （XAMPPのインストールサイト）
クリックしたら、一番上にある項目をダウンロードします。
※バージョンによって表示が異なります。
ここからは順番に説明していきます。
１．インストールすると警告の画面が出てきます。
Question表示はYesを、次のWarning表示はOKをクリックします。
２．インストールするソフトウェアを選択。
Setup表示はNextを、次のSelect Components表示も何も変更せずにNextをクリック。
３．インストール先を選択してインストールする。
Installation folder表示になったら、
インストール先フォルダーを選択します。
選択先はデフォルトの「C:￥xampp」のままで変更しないでください。
そしたらNextをクリックし、インストールをします。
４．Bitnami for XAMPPの画面になったら、
チェック項目のチェックを外してNextをクリック、
次の画面もNextをクリックして終わったらFinishをクリックして終わりです。
５．4番が終わったら言語選択画面が出ます。
アメリカ国旗の方を選択してSaveをクリックします。
こちらで作業は終わりです。
XAMPPの起動方法
先ほどの工程でインストールが終わったら、起動してみましょう。
Windowsのスタート画面から[XAMPP Control Panel]をクリックします。
上の画面がコントロールパネルです。
ApacheとMySQLの文字の横のStartをクリックすると、
サーバーとデータベースが起動できます。
PHPのコードを書くときは必ずこちらを起動しながら作業してください。
終わりに
これでXAMPPをインストール、起動が出来たと思います。
XAMPPをインストール出来たらPHPが起動できますので、
早速PHPの開発を始めてみてもいいですね！
僕と一緒に進めていきましょう！
最後までご購読ありがとうございました！
【基本】PHPとはどんな言語？
こんにちは。ダイスケです。
本日はPHPの記事を書いていこうと思います。
PHPという言葉は知っているけど、
実際どんなものか知らないという人向けに解説していきます！
本日の内容
本日のゴール
"PHPの機能が理解できる" です。
PHPがどのような動きをして、
どんな役割を担うのか基本的なことが理解できます。
一緒に見ていきましょう！
PHPとは
PHPを一言で説明すると、Webアプリケーションを開発するための技術です。
Webアプリケーションとは具体的に出すと、GoogleやYahoo!のような検索エンジンや、
皆さんが良く使用するサイトもWebアプリケーションが多いのではないでしょうか。
Webアプリケーションは、インターネット経由でアクセス可能なサービスなどのことを指します。
PHPで押さえておきたい基本概念
まず押さえておきたい概念の1つは、クライアントとサーバーです。
クライアントとは、簡単に言うと情報を受け取るコンピューターの事です。
具体例を挙げると、safariやGooglechromeなどのブラウザですね。
他方のサーバーとは、クライアントに情報を提供するコンピューターの事です。
サーバーはブラウザと違って私たちの目には見えません。
ネットワーク上に常に待機していて、
ユーザーにサービスを提供できるようになっています。
次にHTTPという概念です。
こちらもよく耳にしますが、何のことか知らない方も多いと思います。
HTTPとはプロトコルといい、
コンピューター同士がデータのやり取りを行う上での約束事です。
人間に例えたら、日本では公共語として日本語を扱っています。
この"日本語で言葉を表すよ"という約束がコンピューターでいうHTTPです。
このHTTPでは、
クライアントからの要求に対してサーバーが応答する
というシンプルなやり取りを行っています。
最後は静的なページと動的なページという概念です。
言葉の通りですが、静的なページは要求されたページをサーバーに伝え、
サーバーに保存されているページを何も加工せずに返すものを指します。
サーバー側で動きが無いのでこう呼ばれています。
動的なページは、ページが要求された時に、
サーバー側でページを加工して返します。
例で挙げると、応募フォームなどは動的なページです。
応募内容を記入し、送信すると確認ページが返ってきます。
記入した内容が載ったページに加工して返すという動きが行われています。
PHPの動き
PHPを使用すると、サーバーサイドにプログラムを書くことができます。
さきほども出した例ですが、応募フォームでは次のような動きがあります。
- [クライアントサイド] 応募フォームページに内容を記入する。
- [サーバーサイド] 記入されたデータを保存し、応募確認ページに飛ばして、受け取ったデータを表示するプログラムが実行される。
- [サーバーサイド] 応募確認ページをブラウザに送信する。
このように、クライアントによって受け取るデータが変わるため、
もとから応募確認ページを用意しといて、そのページを返すという動きが出来ません。
そこで、PHPのようなサーバーサイドの言語でプログラミングをして、
クライアントごとに適した返しが出来るように設定します。
PHPはコンテンツそのものを作るのではなく、
コンテンツを生成するための仕組みをつくる言語なのです。
例えば、
「ようこそ！〇〇さん！」というコンテンツの骨格と、
クライアントから送られたデータ「ダイスケ」という文字を組み合わせる仕組み
を作成します。
もしクライアントが「ダイスケ」ではなく、「マーク」という名前を記入しても、
「ようこそ！マークさん！」と表示できるのです。
繰り返しですが、PHPではこのような仕組みを作ることができます。
おわりに
本日はPHPの基本的な解説を書きました。
HTML&CSSと違ってネットの仕組みを理解する必要があるので、
難しく感じるかもしれません。
なので、僕がなるべく簡単に砕いた説明でサポートしますので、
よかったら一緒に進めていきましょう。
最後までご購読ありがとうございました！
【HTML】HTMLの基本的なタグ
こんにちは。ダイスケです。
本日はHTMLをより便利に使うために、
様々な性能を持つタグをご紹介します。
本日の内容
本日のゴール
"タグにどんな機能があるか知識が付く" です。
今回で紹介しきれないほど種類はありますが、
その中でも良く使うタグをご紹介します。
基本タグの役割
まず全体を構成する<html>タグです。
この<html>タグの中に全て記入します。
イメージは大きな箱のようなものです。
さらに<html>タグの中に<head>,<body>のタグがあります。
この2つは<html>タグの大きな箱の中に、
<head>,<body>の2つの箱が入っているイメージです。
<head>タグはコンピューターが読み取るデータを記入します。
なのでブラウザなど可視化できません。
<body>タグは、私たちが良く見るサイトの中身を記入する場所です。
この中に様々なタグを記入できます。
ウェブサイトの基本構成はこの3つのタグで出来ています。
タグの種類
こちらでは良く使うタグをご紹介します。
[headタグに記述するタグ]
<title> : ウェブサイトのタイトルを表記します。
<meta> : 文字コード(日本語用)などのデータを記入します。
<link> : 他のファイルデータなどを参照するときのリンクデータを記入します。
<style> : CSSをここのタグに記入してデータを反映することができます。
[bodyタグに記入するタグ]
<p> : 文章の段落を表すタグです。
<h1>~<h6> : 見出しを表すタグです。h1が一番大きくh6が一番小さい見出しです。
<div> : 特別な意味は持ちませんが、このタグで囲まれたものをまとまりとして扱えます。
これらは頻繁に使うタグなのでしっかり覚えていきましょう。
次から実際にタグを使って機能を見ていきます。
下の画像はエディターの編集画面です。
このように記入したら、サイトには次のように反映されます。
上から順に見ていきましょう。
<title>タグに書かれたものは、左上の所に表示されます。
練習サイトと表記されてるのが分かります。
次に<body>タグの中に記入している<h1>~<h6>タグに書かれた、
"プログラミング"の文字を見てください。
1~6で文字の大きさが変わっているのが分かります。
見出しの重要度で使い分けていきましょう。
その下の<p>タグを見てください。
こちらは主に文章などを書くときに使用します。
こちらは見たそのままで反映されるので理解しやすいと思います。
次のグレーで囲まれた文字を見てください。
こちらは見た目で分かりやすいように色を付けています。
<div>タグはこのように他のタグを箱のように囲むタグとなっています。
グループでまとめたいときに役立ちます。
終わりに
今回は簡単な説明でしたが、
HTMLでよく使うタグについて書いていきました。
プログラミングを始めるにおいて、
結果が目に見える方がモチベーションも上がります。
なので一緒にこの記事を読んで学習をすすめてみてはいかがですか？
では、最後までご購読ありがとうございました！
【HTML】HTMLのコードの書き方
こんにちは。ダイスケです。
本日はHTMLを使って、
簡単なウェブサイトの作成を行っていきたいと思います。
本日の内容
本日のゴール
"HTMLのコードを書いてウェブサイトに文字を書くことができる" です。
コードの書き方を書いていきます。
この記事を読んでいただけたら、
ウェブサイトに文字を書くことができるようになります。
ぜひトライしてみてください！
HTMLの仕組み
始めに、HTMLの仕組みを理解するところから始めていきます。
HTMLはタグ：<h1>~</h1> というものを書いてサイトを構成します。
このタグには様々な種類があり、文字や画像を記入する印となっています。
セレクタ名の種類を変えることで、文字や画像をウェブサイトに記入できます。
例えば、<p></p>というタグには文字があるよ！と記す印の意味があり、
<p>プログラミング</p>とエディターに記入すると、
ウェブサイト上には→プログラミングと表示されます。
表示されるのはタグで囲った中だけです。
コードの書き方
実際に書いてみましょう！
文字をサイトに反映させるためのアプリ(エディター)、Atomを開きます。
↓Atomのダウンロード方法はこの記事を参考にしてください。
開いたら、次の画面が出てくるので下のコードをコピーして貼り付けてください。
＜コード＞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>練習サイト</title>
</head>
<body>
<h1></h1>
</body>
</html>
貼り付けたら、左上のファイル→別の名前で保存をクリックし、
practice.htmlと入力してドキュメントに保存しましょう。
ファイルに保存したら、ファイルからpractice.htmlをブラウザで開きます。
すると真っ白なサイトが出てきます。
次の作業はAtomで行います。
<h1></h1>のタグの中に、画像のように"プログラミング"と入力しましょう。
入力したら、Ctrlキー+sキーを同時に押して上書き保存をします。
操作が終わったら先ほど開いたサイトを更新してみましょう。
画像のように文字が出てきたと思います。
<h1></h1>の中の文字を変えれば他の文字を表示することができます。
終わりに
ここまでの過程でウェブサイトに文字を表示することができました。
HTMLには他にも様々な機能があります。
僕の記事でも少しずつ紹介していきますので、
知識を一緒に増やしていきましょう！
最後までご購読ありがとうございました！
【プログラミング入門】HTML&CSSとは？
こんにちは。ダイスケです。
本日は僕がプログラミングを始めるにあたって、
最初に勉強を始めたHTMLとCSSという言語について書いていきます。
シンプルな言語なので、興味のある方はぜひ見てみてください。
本日の内容
本日のゴール
"HTMLとCSSの基本が理解できる" です。
最後まで読んでいただけたら、HTMLとCSSはどういうものか、
それを使って何が出来るのかが理解できます。
一緒に進めていきましょう！
「HTML」と「CSS」はどんなものか？
「HTML」は「hyper text markup language」の略語で、
ウェブサイトの見た目の骨格を組み立てる言語です。
例えば、ここは見出しを置く場所ね！
ここは画像を置く場所ね！
と太字の様になにでウェブサイトを構成するか印づけるイメージです。
「CSS」は「Cascading style sheet」の略語で、
ウェブサイトに書かれた文字などを装飾する言語です。
例えば、ここの文字は赤色に指定する。
ここの文字にはアンダーラインを引く。
と、文字の色やアンダーラインなどの見た目の施しを指定するイメージです。
どんなものが作れるのか？
HTML&CSSを使うと、静的なウェブサイトを作ることができます。
静的とは、このブログサイトのように文字や画像が載っている、
動きのないサイトのことです。
このサイトは僕が作成したサイトです。
HTMLとCSSのみですが、シンプルでモダンなサイトが作れます。
言語の使い方
この言語はエディターというアプリを使って使用します。
僕が使っているエディターはAtomというアプリです。
※Atomのダウンロード、操作方法などは別の記事で取り上げています。
よろしければ参考にしてください。↓
エディターを開いたら、下のような画面が出てきます。
まず初めに、ファイル(サイト)を作成・保存します。
①左上のファイル→新規ファイルをクリック。
②次に新規ファイルを開いたら、左上のファイル→別名で保存をクリックして、
名前を付けて好きな場所に保存しましょう。
(ドキュメントに保存した方が管理しやすいです。)
これでコードを書く準備ができました。
ここにHTML&CSSで決められたコードを書くことで、
サイトを構成することができます。
本日はHTML&CSSの基本の説明だけなので、
次回からHTML&CSSのコードの書き方を書いていきます。
少しずつ知識を増やして一緒に歩んでいきましょう！
終わりに
ここまで読んでいただけたら、HTML&CSSはどんなものか、
何が出来る言語かなどの基本が理解できたと思います。
実際に使うには言語知識が必要ですが、
僕が初めての方でも分かりやすいように記事にまとめていきたいと思ってます。
気軽に参考に見てください。
最後までご購読ありがとうございました！
