Sziasztok! Kezdő PHP tanuló vagyok. Unatkoztam, így megalkottam ezt a számológépet egy kis dizájnnal, illetve HTML kóddal körülölelve. A végére egy teljesen használható, gombos számológépet szeretnék megalkotni. Egyelőre űrlapokkal oldottam meg. Készítési idő: kb. 30 perc (a kivitelezés ötletezésével együtt).
Használat: Szerezz be egy webszervert, például: Apache, Wampserver, stb. (persze, ha még nincs). Mentsd el a fájlt Notepad++-szal, vagy egyéb szövegszerkesztő programmal <b>szamologep.php</b> néven. Írd be a böngésződ címsorába: <b>localhost/szamologep.php</b>. Ha ez meg van, akkor saját magad is tesztelheted, hogy működik-e.
Ha a lejjebb található designt is fel szeretnéd használni, akkor mentsd el egy szövegszerkesztővel az alább található CSS kódot <b>style.css</b> néven, és helyezd ugyanabba a mappába, ahol a <b>szamologep.php</b> fájlod van.
v1.1
<b>HTML, PHP kód</b>
<!DOCTYPE html>
<head>
<title>Számológép v1.1</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"author\" content=\"ElektroN\" />
<link rel=\"stylesheet\" href=\"style.css\" />
</head>
<body>
<h1 class=\"h1\">Összeadás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"osszeadas1\" value=\"\" /> + <input type=\"text\" name=\"osszeadas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<?php
if(isset($_POST[\"osszeadas1\"]) && ($_POST[\"osszeadas2\"]))
{
print \'<span class=\"a\">Eredmény: </span>\';
print $_POST[\"osszeadas1\"]+$_POST[\"osszeadas2\"];
}
?>
</form>
<br />
<hr />
<h1 class=\"h1\">Szorzás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"szorzas1\" value=\"\" /> * <input type=\"text\" name=\"szorzas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<?php
if(isset($_POST[\"szorzas1\"]) && $_POST[\"szorzas2\"])
{
print \'<span class=\"a\">Eredmény: </span>\';
print \'<span class=\"a\">\'.$_POST[\"szorzas1\"]*$_POST[\"szorzas2\"].\'</span>\';
}
?>
</form>
<br />
<hr />
<h1 class=\"h1\">Kivonás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"kivonas1\" value=\"\" /> - <input type=\"text\" name=\"kivonas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<?php
if(isset($_POST[\"kivonas1\"]) && ($_POST[\"kivonas2\"]))
{
print \'<span class=\"a\">Eredmény: </span>\';
print $_POST[\"kivonas1\"]-$_POST[\"kivonas2\"];
}
?>
</form>
<br />
<hr />
<h1 class=\"h1\">Osztás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"osztas1\" value=\"\" /> : <input type=\"text\" name=\"osztas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<?php
if(isset($_POST[\"osztas1\"]) && ($_POST[\"osztas2\"]))
{
print \'<span class=\"a\">Eredmény: </span>\';
print $_POST[\"osztas1\"]/$_POST[\"osztas2\"];
}
?>
</form>
<br />
<hr />
<div id=\"footer\">
<?php
print \'<h3 id=\"footer\">© \'.date(\"Y\").\' - Számológép by <a id=\"footer\" href=\"http://sampforum.hu/index.php?action=profile;u=14525\"><b id=\"b\">Elektron</b></a></h3>\'; // Ne tüntesd el!
?>
</div>
</body>
</html>
<b>CSS kód</b>
body {
background-color: #686868 ;
}
h1.h1 {
text-align: center;
color: white;
font-family: courier;
}
span.imp {
margin: 0 500px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
background-color: #ccc;
}
input[type=submit] {
color: black;
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
}
input[type=text]:hover {
box-shadow: 4px black;
}
span.a {
margin: 0 300px;
color: #ccc;
}
div#footer {
background-color:
}
h3#footer {
color: white;
font-family: courier;
text-align: center;
}
b#b {
color: black;
}
a#footer {
text-decoration: underline;
}
v1.2
A v1.2 annyiban különbözik a v1.1-től, hogy egy feldolgozó formba van téve az összes művelet, így egyszerre dolgozza fel az összeadást, kivonást, szorzást, osztást. Magyarul ha minden mezőbe írsz valamit, akkor alul kiírja az összeset. A v1.1-ben csak azt a mezőt írta ki, amelyik formhoz tartozó gombot nyomtad meg. Mostmár alul írja ki az eredményt. Élesben kipróbálhatod:
http://os-rp.ml/szamologepv12.php<b>HTML, PHP kód</b>
<!DOCTYPE html>
<head>
<title>Számológép v1.2</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"author\" content=\"ElektroN\" />
<link rel=\"stylesheet\" href=\"stylev12.css\" />
</head>
<body>
<h1 class=\"h1\">Összeadás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"osszeadas1\" value=\"\" /> + <input type=\"text\" name=\"osszeadas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<h1 class=\"h1\">Szorzás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"szorzas1\" value=\"\" /> * <input type=\"text\" name=\"szorzas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<h1 class=\"h1\">Kivonás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"kivonas1\" value=\"\" /> - <input type=\"text\" name=\"kivonas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<br />
<h1 class=\"h1\">Osztás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"osztas1\" value=\"\" /> : <input type=\"text\" name=\"osztas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<br />
<h1 id=\"answers\"><u>Megoldások</u></h1>
</form>
<?php
if(isset($_POST[\"osszeadas1\"]) && ($_POST[\"osszeadas2\"]))
{
print \'<h3 class=\"answers\">Összeadás eredménye: </h3>\';
print $_POST[\"osszeadas1\"]+$_POST[\"osszeadas2\"];
}
print \'<br />\';
if(isset($_POST[\"szorzas1\"]) && ($_POST[\"szorzas2\"]))
{
print \'<h3 class=\"answers\">Szorzás eredménye: </h3>\';
print $_POST[\"szorzas1\"]*$_POST[\"szorzas2\"];
}
print \'<br />\';
if(isset($_POST[\"kivonas1\"]) && ($_POST[\"kivonas2\"]))
{
print \'<h3 class=\"answers\">Kivonás eredménye: </h3>\';
print $_POST[\"kivonas1\"]-$_POST[\"kivonas2\"];
}
print \'<br />\';
if(isset($_POST[\"osztas1\"]) && ($_POST[\"osztas2\"]))
{
print \'<h3 class=\"answers\">Osztás eredménye: </h3>\';
print $_POST[\"osztas1\"]/$_POST[\"osztas2\"];
}
?>
</body>
</html>
<b>CSS kód</b>
body {
background-color: grey;
}
h1.h1 {
text-align: center;
color: white;
font-family: courier;
}
span.imp {
margin: 0 500px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
background-color: #ccc;
}
input[type=submit] {
color: black;
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
}
input[type=text]:hover {
box-shadow: 4px black;
}
span.a {
margin: 0 300px;
color: #ccc;
}
div#footer {
background-color:
}
h3#footer {
color: white;
font-family: courier;
text-align: center;
}
b#b {
color: black;
}
a#footer {
text-decoration: underline;
}
h1#answers {
color: white;
font-family: courier;
margin: 0 550px;
font-size: 40px;
}
h3.answers {
color: white;
}
span.answers {
margin: 0 500px;
}
v1.3
A v1.3 eltérései a v1.2-től:
<b>Nincs megadva művelet</b> ág hozzárendelve, viszont ez úgy került megoldásra, hogy amikor rámész az oldalra, akkor kiírja az összes művelet nevét, és alá írja, hogy <b>nincs megadva művelet</b>. Ha írsz egy műveletet az űrlapba, akkor kiírja az adott művelet alá az eredményt, viszont amelyikhez nem rendeltél hozzá műveletet, annál változatlanul marad a <b>nincs megadva művelet</b> felirat.
<b>HTML, PHP kód</b>
<!DOCTYPE html>
<head>
<title>Számológép v1.3</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"author\" content=\"ElektroN\" />
<link rel=\"stylesheet\" href=\"stylev12.css\" />
</head>
<body>
<h1 class=\"h1\">Összeadás:</h1>
<form method=\"post\" action=\"\">
<span class=\"imp\"><input type=\"text\" name=\"osszeadas1\" value=\"\" /> + <input type=\"text\" name=\"osszeadas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<h1 class=\"h1\">Szorzás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"szorzas1\" value=\"\" /> * <input type=\"text\" name=\"szorzas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<h1 class=\"h1\">Kivonás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"kivonas1\" value=\"\" /> - <input type=\"text\" name=\"kivonas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<br />
<h1 class=\"h1\">Osztás:</h1>
<span class=\"imp\"><input type=\"text\" name=\"osztas1\" value=\"\" /> : <input type=\"text\" name=\"osztas2\" value=\"\" /> <input type=\"submit\" value=\"=\" /><br /></span>
<br />
<hr />
<br />
</form>
<h1 id=\"answers\"><u>Megoldások</u></h1>
<?php
if(isset($_POST[\"osszeadas1\"]) && ($_POST[\"osszeadas2\"]))
{
print \'<h3 class=\"answers\">Összeadás eredménye: </h3>\';
print $_POST[\"osszeadas1\"]+$_POST[\"osszeadas2\"];
}
else
{
print \'<h3 class=\"answers\">Összeadás eredménye: </h3>\';
print \'Nincs megadva művelet.\';
}
print \'<br />\';
if(isset($_POST[\"szorzas1\"]) && ($_POST[\"szorzas2\"]))
{
print \'<h3 class=\"answers\">Szorzás eredménye: </h3>\';
print $_POST[\"szorzas1\"]*$_POST[\"szorzas2\"];
}
else
{
print \'<h3 class=\"answers\">Szorzás eredménye: </h3>\';
print \'Nincs megadva művelet.\';
}
print \'<br />\';
if(isset($_POST[\"kivonas1\"]) && ($_POST[\"kivonas2\"]))
{
print \'<h3 class=\"answers\">Kivonás eredménye: </h3>\';
print $_POST[\"kivonas1\"]-$_POST[\"kivonas2\"];
}
else
{
print \'<h3 class=\"answers\">Kivonás eredménye: </h3>\';
print \'Nincs megadva művelet.\';
}
print \'<br />\';
if(isset($_POST[\"osztas1\"]) && ($_POST[\"osztas2\"]))
{
print \'<h3 class=\"answers\">Osztás eredménye: </h3>\';
print $_POST[\"osztas1\"]/$_POST[\"osztas2\"];
}
else
{
print \'<h3 class=\"answers\">Osztás eredménye: </h3>\';
print \'Nincs megadva művelet.\';
}
?>
</body>
</html>
<b>CSS kód</b>
body {
background-color: grey;
}
h1.h1 {
text-align: center;
color: white;
font-family: courier;
}
span.imp {
margin: 0 500px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
background-color: #ccc;
}
input[type=submit] {
color: black;
border: 2px solid black;
border-radius: 4px 4px 4px 4px;
}
input[type=text]:hover {
box-shadow: 4px black;
}
span.a {
margin: 0 300px;
color: #ccc;
}
div#footer {
background-color:
}
h3#footer {
color: white;
font-family: courier;
text-align: center;
}
b#b {
color: black;
}
a#footer {
text-decoration: underline;
}
h1#answers {
color: white;
font-family: courier;
margin: 0 550px;
font-size: 40px;
}
h3.answers {
color: white;
}
span.answers {
margin: 0 500px;
}
A teszthez
kattints ide!