Figyelem: ez az oldal jelenleg még készülőben van! Lehet, hogy még befejezetlen mondatok is vannak benne! A stabil, de potenciálisan elavult változat itt található.

PHP és HTML programozás: az alapvető parancsok

Az "alap" HTML kód

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>A dokumentum címe</title> </head> <body> </body> </html>

Hogy jelenítsünk meg szöveget?

Nyilvánvaló, hogy egy leíró nyelv legfontosabb része a szöveg megjelenítése. Kattints ide, majd a megjelenő szövegmezőbe írd be a következőt:

<p>Szia!</p>

Ha mindent jól csináltál, megjelenik a "Szia!" szöveg. Most ugyanide írd be a következőt:

<p>Szi- <br />a</p>

Most így mindez 2 sorban jelent meg.

A linkek

A linkek nagyon hasznosak, sok gépelést tesznek fölöslegessé. Gépeljük be a fönti parancssorba a következőt:

<a href="https://hu.wikipedia.org/wiki/Kezdőlap">Wikipédia</a>

Ha minden jól sikerült, akkor egy link fog megjelenni "Wikipédia" szöveggel. Kattintsunk rá! Meg fog jelenni a magyar Wikipédia kezdőlapja.

JavaScript

Bár eredetileg nem volt célom kitérni a JavaScript használatára, rájöttem, hogy ez elengedhetetlen lépés lesz. A JavaScript alapszintű parancsaival együtt lesznek a formok, és
a PHP.~~Mindenkit kétségbe akarok ejteni.~~ Senkit se akarok kétségbeejteni, de igen, ebben a fejezetben 2 nyelvet is elkezdünk.

A formok használatához először telepítsünk egy programszerkesztőt. Én az ingyenesek közül a Notepad++-ot javaslom Windowsra. Gyors, és rengeteg programnyelvet támogat. Hátránya, hogy
hajlamos az adott fájlban beírt szövegeket utasításként megjegyezni. A Notepad++-ot itt lehet letölteni: https://notepad-plus-plus.org/downloads/. Válasszuk ki a nekünk megfelelőt, majd
~~töröljük ki az egészet~~ kattintsunk a Download gombra. Ha letöltött a telepítő, kövess-
ük az utasításokat, majd nyissuk meg a Notepad++-ot, a Nyelv menü H almenüjében pedig válasszuk ki a HTML menüpontot. Ezután írjuk be a fönt említett alapkódot, (Remélem, hogy emlékszel rá)
majd a <body> és </body> tegek közé írjuk be a következőt:

<form action="">
<input type="button" onClick="alert ('Ez egy JavaScript program, amit egéreseménnyel hívunk meg.');" value="Kattints ide!" />
</form>

Ezután mentsük el a fájlt .html kiterjesztéssel, és gépeljük be az elérési útját a böngészőbe. Ha mindent jól csináltunk, egy gomb jelent meg, Kattints rám szöveggel.
Kattintsunk a gombra. Megjelent egy felugró ablakban a következő szöveg: Ez egy JavaScript program, amit egéreseménnyel hívunk meg. A JavaScriptben az alert('szöveg' + változónév)
parancssal jeleníthetünk meg felugró ablakot.

A PHP - Szerveroldali programozás

Ahhoz, hogy a PHP-t használni tudjuk, szükségünk lesz egy webszerverre. Az egyik, "minden egyben" csomag a XAMPP (X - ?, Apache, MySQL, PHP and Perl). A XAMPP-ot itt tölthetjük le: https://www.apachefriends.org/hu/download.html. Írjuk be a Start menü keresőmezőjébe a
következőt: XAMPP Control Panel. Kattintsunk rá a XAMPP Control Panel menüpontra (Itt van az ikon). Ezután kattintsunk a megjelenő ablakban Az Apache sor melletti Start gombra. Ezután nyissuk meg a kedvenc böngészőnket, és írjuk be a következőt: localhost. Ekkor meg fog jelenni egy angol nyelvű leírás a nem tudom, hogy miről. Látjuk a problémát: átirányít a dashboard mappába. Ekkor nyissuk meg a Fájl-
kezelőt, vagy a fájlböngészésre használt egyéb programunkat, és nyissuk meg benne a XAMPP telepítési mappáját. Itt nyissuk meg a htdocs mappát, és hozzunk benne létre egy index.php nevű fájlt. Meg fogja kérdezni a program, hogy felülírjuk-e az eredetit; ez esetben szeretnénk. Kattintsunk jobb egérgombbal az index.php fájlunkra, és válasszuk ki az "Edit with Notepad++" lehetőséget. Ezután írjuk be a következőt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">

 </head>
 <body>

 <p>Select language:</p>
 

 <a href="en/">English</a>
 

 <a href="hu/">Hungarian</a>
 

 </body>

Ezután nyissuk meg a böngészőnket, majd írjuk be a következőt:

localhost/

Elvileg megjelent a "Select language:" felirat, alatta a következő linkekkel:

English

Hungarian

De akármelyikre is kattintunk, valami ilyesmi fog megjelenni:

Ezt a problémát mindenképp javítani kell. Ehhez csináljunk egy en, és egy hu mappát, méghozzá a htdocs mappában.

Mindkettőben hozzunk létre egy fájlt, index.php néven. Az en mappa index.php fájljába a következőt írjuk:

<!DOCTYPE html> <html> <head> <meta charset="utf8" /> </head> <body> <h1>Select tool</h1> <p>There is no program here yet.</p> </body> </html>

Ezután a hu mappa index.php fájljába írjuk a következőt:

<!DOCTYPE html> <html> <head> <meta charset="utf8" /> </head> <body> <h1>Program kiválasztása</h1> <p>Itt még nincs program.</p> </body> </html>

Ezután hozzunk létre egy black mappát (A htdocs mappába!), és azon belül egy testphp.php fájlt, abba pedig írjuk a következőt:


<?php echo ('Szia!'); ?>

Ezután a böngészőnk címsorába írjuk be a következőt:

localhost/black/testphp.php

Ha mindent jól csináltunk, megjelenik a "Szia!" szöveg. Ekkor kattintsunk a jobb egérgombbal a lapon, és kattintsunk a "Lap forrása", vagy a "lap forrásának megtekintése" gombra!
Meg fogunk lepődni: egy p elemben van az egész "Szia!" szöveg. De ez miért van?

Kliensoldali vagy szerveroldali?

Biztosan emlékszünk a fejezet címére: A PHP -szerveroldali programozás. A kulcs az, hogy a PHP-kódot a webszerver feldolgozza, és HTML formájában küldi a kliensnek.¹

Viszont a JavaScript kliensoldali, tehát a böngésző futtatja. Ezért nem tanácsos jelszóellenőrzésnél JavaScriptet használni, hiszen a böngészőben megtekinthető a programkód (A féltve őrzött jelszóval együtt).

PHP űrlapfeldolgozás

A PHP-t gyakran használják weblapok feldolgozására. Ehhez viszont meg kell ismerkednünk néhány új dologgal. Először csináljunk egy áttekintést, hogy a HTML-ben mit használhatunk a PHP-re küldéshez.

Attribútum neve	Leírás
name	Formok elemeinek megkeresését teszi lehetővé a PHP számára, bármelyik űrlapelemnek adhatunk name attribútumot.
method	Azt adja meg, milyen metódussal továbbítsa az adatokat a PHP számára. Csak a teljes form elemnek adhatunk.
target	Azt adja meg, hogy hol jelenjen meg a válasz. Gyakran használt lehetőségek: _blank (Új lap, vagy ablak), _self (Ugyanazon a lapon).

Azt hiszem, a method bővebb kifejtést igényel. A lehetőségek:

POST - A háttérben, a hálózati adatforgalomban küldi az adatokat. De vigyázat! Attól még, hogy a háttérben mennek át az adatok, lehallgathatók!
GET - Az URL-be ágyazva küldi az adatot. Példa: zalan.withssl.com/en/HTML_command_prompt/index.php?input=Szia!. Nem javasolt vele nagyobb mennyiségű adatot küldeni.

Jegyzetek

¹A PHP HTTP-fejlécüzeneteket is képes küldeni a header() függvény segítségével.