PHPで計算機をビルドする
Prerequisites: HTML and CSS knowledge is helpful but not mandatory
PHPとは
PHPはハイパーテキストプリプロセッサを表します😃 これは、動的なWebアプリケーションを構築する簡単なサーバー側のプログラミング言語です.
あなたが既にHTMLとCSSでウェブサイトを造る方法を知っているならば、それはかなりすごくものすごいです!しかし、あなたがあなたのウェブサイトをよりダイナミックにする必要があると言いましょう、例えば、ログインシステムをつくってください、あるいは、ユーザーが何かを掲示することができる社会的ネットワーク.あなたのウェブサイトのユーザーの詳細と投稿を格納するデータベース管理システムが必要になります.あなたのウェブサイトをデータベースに接続するために、サーバー側のプログラミング言語が必要になります.多くの異なる選択肢がありますが、このレッスンではPHPを使います.
このレッスンでは、データベースに接続したり、ユーザー認証を実行したりしません.これは、電卓を実装するPHP言語の単純な使用されます.
PHPはブラウザでは動作しませんが、サーバ上では「サーバ側」のプログラミング言語と呼ばれています.PHPを使用するには、ファイルをホストするサーバを設定する必要があります.一旦サーバーが我々のPHPコードを実行するならば、それはHTMLの形で出力を送ります、そして、我々はそれから我々のウェブサイトが素晴らしく見えるように、我々はそれを我々の望ましいスタイルを整えることができます.心配しないで.I'll link the code あなたがチェックすることができますし、あなたと比較するので、このレッスンで使用されるすべてに.また、私に言って自由に感じなさい.あなたの計算機を構築する準備ができましたか?レッツゴー!
ローカル環境の設定
PHPを実行するには、サーバーが必要です.あなたのサーバーに我々のPHPコードを実行するには、コンピュータを有効にすることができます.これを行うには、コンピュータにWebサーバーソリューションスタックをインストールします.利用可能なオプションの数が、以下の私の提案リストです.
Windows/Linux :XAMPP
マックMAMP
ソフトウェアをインストールしたら、次のようにします.
Windows/Linux :
マック
次に、htdocsディレクトリに移動する必要があります.次のようになります.
Windows :\xampp\htdocs
Linux/opt/lampp/htdocs/~/デスクトップ/htdocs/
アプリケーション/mamp/htdocs
これはPHPコードを書く場所です.
場合は、この遠くにcongratsすることができます!さあ、コードを書きましょう.
HTMLを書く
基本的なフォームを2つのテキスト入力で表示する簡単なHTMLコードを書いてみましょう.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<h1>Calculator World</h1>
<form>
<input type="text" placeholder="operand 1">
<select>
<option selected>None</option>
<option>Add</option>
<option>Subtract</option>
<option>Multiply</option>
<option>Divide</option>
</select>
<input type="text" placeholder="operand 2">
<button>=</button>
<div>
</div>
</form>
</body>
</html>
あなたは、次は素晴らしいです.我々は我々のページをスタイルします、それで、それはある程度きれいに見えます.スタイリングを気にしない場合は、このセクションをスキップしてください.
CSSによるスタイリング
あなたは、しかし、私はちょうど私のいくつかの基本的なスタイルを与えるよあなたの計算機をすることができます.下記のコードを見てください.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
background: lightgray;
}
h1 {
margin-top: -10%;
margin-bottom: 26px;
font-size: 3.8rem;
font-family: monospace;
}
form {
display: flex;
width: 80%;
justify-content: space-evenly;
align-items: center;
background: whitesmoke;
border-radius: 30px;
}
form input, button, select {
padding: 20px;
font-size: 1.2rem;
border: none;
background: inherit;
}
form input:focus {
outline: 1px solid dimgray;
}
form button {
background: dimgray;
color: whitesmoke;
border-radius: 50%;
}
div {
color: dimgray;
font-weight: 900;
font-size: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 3rem;
}
form {
width: 95%;
padding: 0 5%;
}
form input, button, select {
width: 100%;
margin: 0 5px;
border-radius: 20px;
}
form button {
/*border-radius: 0;*/
/*padding-left: 20px;*/
/*padding-right: 0;*/
width: 10%;
}
}
<link rel="stylesheet" href="./style.css">
さて、いくつかの基本的な計算を実行するには、電卓を有効にしましょう.
機能性の付与
PHPは、これらのタグを使用してHTMLコード内のコードをミックスして一致させることが容易になります
<?php ?> . それらのタグの中で書かれたものは、有効なPHPコードとみなされます.必ずファイルを保存してください.php ファイル拡張子.私たちは、ユーザーが入力された値を任意の
= ボタン.したがって、ボタン要素の直後に、ユーザー入力を計算するためにPHPコードを書きます.ユーザー入力を取得するには、以下のようにフォーム内の各要素に名前を付ける必要があります.
<input type="text" placeholder="operand 1" name="one">
<select name="operator">
...
<input type="text" placeholder="operand 2" name="two">
<button name="equals">=</button>
POST or GET . 後者をコードで使用します.次に、ファイルが送信するフォームを処理するブラウザに指示するaction属性を設定する必要があります.マイファイル名index.php . ファイルを別の名前にする場合は、アクション属性で指定された値と一致することを確認してください.下記の例を見てください. <form action="index.php" method="GET">
<div>
<?php
if(isset($_GET['equals'])){
$operandOne = $_GET['one'];
$operandTwo = $_GET['two'];
switch ($_GET['operator']){
case 'None':
echo 'Select and operator';
break;
case 'Add':
echo $operandOne + $operandTwo;
break;
case 'Subtract':
echo $operandOne - $operandTwo;
break;
case 'Multiply':
echo $operandOne * $operandTwo;
break;
case 'Divide':
echo $operandOne / $operandTwo;
break;
default:
echo 'Nothing was supplied';
break;
}
}else {
echo '0';
}
?>
</div>
<?php PHPタグを起動します.したがって、その中で何を書くかは、有効なPHPコードと見なされます.if(isset($_GET['equals'])){ ボタンをクリックすると、' Equals 'という名前のボタンが$operandOne = $_GET['one']; このステートメントは変数を宣言し、ユーザが' one 'という名前の最初の入力フィールドに渡された値に値を初期化します.$operandTwo = $_GET['two']; 変数を作成し、その値を2番目の入力フィールドに渡された値に初期化します.switch ($_GET['operator']){ 選択要素のユーザーが選択したオプションのswitchステートメント.case 'None': この行は、ユーザーがNoneを選択した場合、次のアクションを実行します.echo 'Select and operator'; この文字列はbreak; switch文を終了するcase 'Add': ユーザーがAddを選択すると、次のアクションを実行します.echo $operandOne + $operandTwo; 両方の値を追加し、ページに合計を印刷しますbreak; switch文を終了するcase 'Subtract': ユーザーが減算を選択した場合は、次のアクションを実行します.echo $operandOne - $operandTwo; 最初の2番目の値を減算し、結果をページに出力しますbreak; switch文を終了するcase 'Multiply': ユーザーが乗算を選択した場合は、次のアクションを実行します.echo $operandOne * $operandTwo; 値を乗算し、結果をページに出力するbreak; switch文を終了するcase 'Divide': ユーザーが分割を選択した場合は、次のアクションを実行します.echo $operandOne / $operandTwo; 番目の値を最初から分割し、結果をページに出力しますbreak; switch文を終了するdefault: 上記のどれも起こらないならば、以下をしてくださいecho 'Nothing was supplied'; 文字列を出力するbreak; プログラムを終了する} スイッチブロック終了}else { その他声明echo '0'; if文がtrueに評価されるまで、スクリーンに文字列を出力する} else文を終了する?> PHPタグを閉じるそれを見る
これを読んでくれてありがとう、この記事を参考にしてください.任意の時点で立ち往生した場合は、上の完全なコードを参照してくださいGithub
Reference
この問題について(PHPで計算機をビルドする), 我々は、より多くの情報をここで見つけました https://dev.to/godswillumukoro/build-a-calculator-with-php-hl4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol