Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 1 - Úvod do PHP a webových aplikací

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u první lekce kurzu PHP, který je určen pro úplné začátečníky. Budeme zde vytvářet jednoduché dynamické webové doplňky, jako např. emailový formulář, anketu nebo knihu návštěv. Ukážeme si také, jak generovat stránky pomocí PHP do připravené šablony. Pokud již máte znalosti HTML a CSS, máte výhodu. Pokud ne, budete to mít trochu těžší, ale určitě to zvládnete i tak.

PHP se v čase velmi vyvíjí a mění. Tento tutoriál je moderní a je psán tak, aby vás naučil programovat správně a bezpečně. Také vás připraví na další seriály, které se věnují pokročilejšímu objektově orientovanému programování nebo MVC architektuře.

Než začneme se samotným programováním, udělejme si obecný úvod do webových aplikací. Když máme s PHP pracovat, měli bychom vědět jak funguje :)

Výhody webových aplikací

Není náhoda, že se většina dnešních aplikací píše pro web. Je to z toho důvodu, že webové aplikace mají oproti klasickým (desktopovým) mnoho výhod a jejich vývoj je výhodnější a také vydělají obvykle více peněz nebo přitáhnou více uživatelů.

Abychom tyto výhody a principy pochopili, udělejme si krátkou odbočku do historie a vysvětleme si, co ke vzniku webových aplikací vůbec vedlo.

Mainframy

Když se počítače poprvé dostávaly mezi lidi a do firem, byly velmi drahé. Bylo nepředstavitelné, že by měl každý zaměstnanec svůj počítač. Z toho důvodu se zakoupil jeden centrální počítač (který byl na tu dobu velmi výkonný) a k tomuto centrálnímu počítači se jednoduše řečeno připojilo několik klávesnic a monitorů. Všichni zaměstnanci pracovali současně na tomto jednom počítači, který je obsluhoval.

Kdyby se tedy např. jednalo o kancelářskou aplikaci Word, každý uživatel by měl na mainframe nějakou svou složku s dokumenty a všichni by pracovali s tím jedním Wordem, který je na mainframu nainstalovaný.

Architektura mainframu

Výhody této architektury jsou následující:

  • Snadná správa - Aby mohli uživatelé používat nějakou aplikaci, stačí tu aplikaci nahrát na mainframe. V tu chvíli je přístupná všem uživatelům. To samé platí pro aktualizaci, aktualizujeme mainframe a všichni již používají novou verzi aplikace.
  • Vysoká bezpečnost - Všechna data jsou uložena v databázi na mainframu, nikoli na stanicích zaměstnanců. To samé platí o samotných aplikacích, k jejich kódu se nikdo nedostane.

Máme tu samozřejmě i nevýhody:

  • Nízký výkon a vysoká cena - Mainframe vyžaduje vysoký výkon a zpracovává úplně všechny úlohy aplikace. Jeho provoz je nákladný.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Mainframy se již téměř nepoužívají, ale dodnes ještě v některých podnicích fungují.

Desktopové aplikace

Jak se počítače začaly rozšiřovat mezi menší firmy a potom dokonce i do domácností, začala samozřejmě klesat jejich cena. Osobní počítač si již mohl dovolit každý. Mainframům odzvonilo a nebyl důvod, aby každý zaměstnanec nebo obecně uživatel neměl svojí aplikaci ve svém počítači.

Když opět použijeme náš příklad s Wordem, zde má každý uživatel své dokumenty a svůj Word ve svém počítači (desktopu).

Architektura desktopových aplikací

Výhody desktopových aplikací:

  • Vysoký výkon - Veškerý výkon aplikace zajišťuje klientský počítač. Někdy v tomto případě hovoříme o tzv. tlustém klientovi. Tehdy aplikace komunikuje se serverem, který se stará jen o zasílání dat a neřeší např. vykreslování formulářů, což za něj dělá právě aplikace.

Nevýhody:

  • Složitá správa - Pokud vydáme novou verzi naší aplikace, musíme zajistit, aby si každý klient aktualizoval svůj počítač. To se nám samozřejmě nepodaří a proto řešíme problémy se starými verzemi. Instalace a stahování aplikací je pro uživatele otravná.
  • Nízká bezpečnost - Jelikož je u klienta přítomná celá aplikace, může se ji snažit disassemblovat (hackovat), což není u dnešních vysokých jazyků příliš velký problém. Může nám z aplikace ukrást části zdrojových kódů nebo nějaká data.

Webové stránky

S rozšířením internetu nejprve vzniklo obrovské množství statických webových stránek. Určitě jste si nějaké webové stránky někdy zkusili vytvořit, jedná se o textový soubor, kde pomocí značek označíte určitou část jako nadpis, odstavec, obrázek a podobně. Výsledná stránka je (jak již bylo řečeno) statická. Nemůže se tedy měnit, je to pouze elektronický dokument, který můžeme jen číst.

HTML stránky (HTML je značkovací jazyk) jsou jednoduše uložené na serveru. Jakmile klient (uživatel s webovým prohlížečem) pošle požadavek na server, server mu jednoduše vrátí přesně tu stránku, co má uloženou. Této architektuře se říká klient-server.

Architektura klient-server

Určitě jste si všimli, že se architektura nápadně podobá mainframu. Vracíme se tedy ke kořenům a získáváme následující výhody:

  • Malá zátěž - Server pouze zasílá HTML stránky a již neřeší jejich zobrazení, ovládání klávesnice uživatele, jeho monitoru a podobně. To vše se děje na klientském počítači.
  • Snadná správa - Jakmile změníme obsah na serveru (např. přidáme nějaký dokument), uvidí ho tam okamžitě všichni uživatelé.
  • Vysoká bezpečnost - Pokud chceme zakázat přístup k nějakým dokumentům, klient se k nim prostě nemá jak dostat, jelikož jsou na serveru.

Nevýhodou je samozřejmě to, že server umí zasílat jen statické HTML stránky. Není způsob, jak serveru odeslat nějaká data a na jejich základě dostat výstup (třeba nechat na stránce vzkaz v diskuzi, hlasovat v anketě nebo zobrazit ve stránce kdo má dnes svátek).

Webové aplikace

Po obrovském rozmachu internetu a webových stránek se hledaly způsoby, jak do stránek přidávat nějakou dynamickou funkčnost. Tyto pokusy došly postupem času tak daleko, že v dnešní době jsme schopni dosáhnout toho, aby se webová stránka chovala úplně stejně, jako desktopová aplikace (třeba MS Word z desktopu je na webu dostupný jako Office 365 nebo např. přes Google Docs). Takové webové stránce se říká webová aplikace.

Webové aplikace fungují tak, že se klient zeptá serveru na určitý dokument. Na serveru ale běží tzv. CGI skript, což je program, který dokáže vygenerovat do stránky to, co uživatel požaduje. Stránka tedy na serveru již neleží, ale je dynamicky vytvářena podle toho, co uživatel chce. Právě PHP je nejpoužívanějším CGI skriptovacím jazykem, ve kterém se webové aplikace píší.

Architektura webových aplikací v PHP

Často je scénář následující:

  1. Uživatel vyťuká do prohlížeče URL adresu (třeba eshop.cz/tiskarna-epson-123) a tím pošle požadavek serveru
  2. Server zavolá PHP modul
  3. PHP modul zpracuje požadavek (zde chce uživatel vypsat informace o tiskárně). Připojí se k databázi a načte data, která chce klient. Na základě dat vygeneruje webovou HTML stránku.
  4. Hotová stránka je zaslána klientovi. Ten vidí již jen statickou webovou stránku, která však byla dynamicky vytvořená podle jeho požadavku.

Všechna data jsou v databázi a webová aplikace, zde v příkladu nějaký eshop s IT, má rozhraní, přes které může personál jednoduše přidávat nové produkty, upravovat jejich cenu a podobně. Je vám asi jasné, že kdyby data nebyla v databázi, ale každý produkt měl svou statickou HTML stránku, tak by bylo extrémně obtížné takovou spoustu stránek spravovat. Navíc by se potom nedalo pomocí skriptu třeba hledat podle ceny, psát k produktům komentáře a podobně.

Právě jsme si tedy popsali princip dynamického webu a také jeho příklad. Jaké jsou tedy výhody webových aplikací?

  • Snadná správa - Novou verzi aplikace nahrajeme a v tom okamžiku ji používají úplně všichni.
  • Vysoká bezpečnost - Web i databáze jsou na serveru a pokud neobsahuje nějaké bezpečnostní chyby, je velmi nesnadné aplikaci ukradnout.
  • Vysoká uživatelská základna - Lidé jsou líní stahovat a instalovat. U webové aplikace jen kliknou na odkaz a již s ní pracují. Uživatelů, kteří by používali tu samou aplikaci, kdyby byla na desktopu místo na webu, by bylo podstatně méně. A právě kvůli uživatelům aplikace přeci píšeme. Ať jsou zadarmo nebo jsou placené, vždy chceme, aby je používalo co nejvíce lidí. Toto je hlavní důvod, proč se v poslední době dělá v podstatě veškerý software webový.
  • Vysoká kompatibilita - Jelikož na web přistupujeme přes webový prohlížeč, vůbec nás nezajímá operační systém klienta, naše aplikace funguje prakticky všude, dokonce i na mobilu.
  • Přetrvávají také výhody klientského počítače, tedy že server není zatěžován např. vlastním zobrazováním stránek, to dělá webový prohlížeč.

Je vidět, že webové aplikace jsou budoucnost. A kdo je umí, ten se bude mít dobře.

Jejich asi jedinou nevýhodou je, že jejich vývoj je o něco náročnější, než u aplikací desktopových. Je to z toho důvodu, že web byl zprvu navržen pro statické dokumenty a existují určitá omezení, která se musí obcházet. Nicméně technologie se stále vyvíjejí a mnoho věcí jde oproti minulosti již podstatně snadněji. Mohou za to zejména nové standardy HTML 5 a CSS 3.

Složitější webové aplikace jsou většinou ještě doplněny dalším programovacím jazykem - JavaScriptem. Ten běží v klientském počítači a zpracovává vizuální část aplikace. Zde na ITnetworku je v JavaScriptu naprogramované např. navigační menu. JavaScript slouží spíše pro takové doplňky v uživatelském rozhraní a je podstatný až u složitých webových aplikací.

To by bylo do úvodu vše. V příští lekci, Instalace Apache, MySQL a PHP na Windows a první PHP skript, si nainstalujeme PHP a vytvoříme svou první webovou aplikaci.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
120 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Základní konstrukce jazyka PHP
Miniatura
Následující článek
Instalace Apache, MySQL a PHP na Windows a první PHP skript
Aktivity (7)

 

 

Komentáře
Zobrazit starší komentáře (41)

Avatar
Patrik Pastor:8. května 13:17

2:53:58 PM [Tomcat] Problem detected!
12:53:58 PM [Tomcat] Port 8080 in use by "C:\xampp\apache\bin\ht­tpd.exe"!
12:53:58 PM [Tomcat] Tomcat WILL NOT start without the configured ports free!
12:53:58 PM [Tomcat] You need to uninstall/disa­ble/reconfigu­re the blocking application
12:53:58 PM [Tomcat] or reconfigure Tomcat and the Control Panel to listen on a different port

tohle mi vypise xampp, nevite nekdo proc soubor httpd.exe mi bere 8080 port?
Kdyz jsem si nasel co to je za soubor, je to console, ale nechapu, k cemu potrebuje console vubec nejaky port, jak ji mam disable aby mi nebrala port 8080?

 
Odpovědět 8. května 13:17
Avatar
Odpovídá na Patrik Pastor
Tomáš Novotný:8. května 13:22

httpd je apache tj. webserver, defaultně by ti měl jet na portu 80, pokud není obsazen nebo si to nepřenastavoval...
takže cílem by mělo být, aby ti xamppový webserver běžel na 80, problém s Tomcat 8080 se tím vyřeší sám..

Editováno 8. května 13:23
Odpovědět 8. května 13:22
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Odpovídá na Tomáš Novotný
Patrik Pastor:8. května 15:55

upravoval jsem port v apache\config souboru, na jiny port, protoze mi v IDE (netbeans) po startu projektu, hodi url: localhost/pro­jekt/index ALE nevygeneruje mi localhost:8080/... tedy musel bych manualne dopsat 8080 do localhostu. (pri kazdem projektu, coz je dost otravne), proto jsen si port prenastavil, ale prave proto nechapu, proc mi XAMPP hazi ten errorz kdyz ani ten port80 nepouziva (kdyz sem to zmenil), nedava mi to smysl uz vubec

 
Odpovědět 8. května 15:55
Avatar
Odpovídá na Patrik Pastor
Patrik Pastor:8. května 15:57

protoze je v config souboru prikaz: Listen 8080 . A i bez tohoto prikazu mi IDE hodi url localhost bez portu defaultne, a ja to nechcu pokazde dopisovat, jak z toho ven?

 
Odpovědět 8. května 15:57
Avatar
Odpovídá na Patrik Pastor
Tomáš Novotný:8. května 16:29

nechápu proč localhost:8080? proč nepoužít jen localhost (tím je myšleno localhost:80, port si prohlížeč doplní sám, nemusí se psát) který je v xamppu namapován na htdocs... podle tvých slov ani tvé IDE s portem 8080 nepočítá, tak proč si na něj přenastavil webserver (apache)? ... když bys nic neměnil fungovalo by to na 80tce jak má...
nebo snad na localhostu máš puštěno ještě něco na portu 80, že kvůli tomu vše přenastavuješ?
pokud se ti apache nerozjede na 80tce, tak je potřeba najít co na tom portu běží a nemá.... prý to je někdy skype, nebo nějaké jiné windows programy, které na tomto portu nemají co dělat...

Editováno 8. května 16:30
Odpovědět 8. května 16:29
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Tomáš Novotný
Patrik Pastor:9. května 18:57

kdyz jsem podle clanku napsal do IDE echo("neco"), a zmacknul IDE default browser, napsal mi localhost toto:

Object not found!

The requested URL was not found on this server.If you entered the URL manually please check yourspelling and try again.

If you think this is a server error, please contact the webmaster.

Error 404

localhost
Apache/2.4.39 (Win64) OpenSSL/1.1.1b PHP/7.3.5

Tedy na Apache se dostanu, ty na tomto.localhostu jsou (posledni veta, je odkaz na jejich domovskou stranku), al3 to mi prd platne, kdyz chcu aby mi jel kod z IDE. Takze zampp/apache jede, ale vlastne nejede (ne tak jak chcu - tj. videt vysledek z netbeans IDE), co potom udelat?

 
Odpovědět 9. května 18:57
Avatar
Odpovídá na Patrik Pastor
Tomáš Novotný:9. května 19:37

Nepoužívám netbeans, ale podle té hlášky serveru patrně nemáš správně nastavenu cestu k tvému projektu... pokud používáš xampp, apache očekává, že tvůj projekt bude uložen někde.... C:\xampp\htdoc­s\tvujProjekt čemuž v URL prohlížeče bude odpovídat adresa localhost/tvuj­Projekt

Odpovědět 9. května 19:37
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Odpovídá na Tomáš Novotný
Patrik Pastor:9. května 20:40

Co teda pouzivas za IDE? Netbeans me pekne sere, chapu ze to je mozna starsi editor, ale jelikoz jsem zvykly delat ve visual studiu, kde je vsechno "uhledne", ale neni to editor pro php, tak si zvykam na netbeans. Pry nic lepsiho zadarmo neni

 
Odpovědět 9. května 20:40
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Patrik Pastor
Jaroslav Smrž:9. května 21:04

Možných příčin je více. Možná máš jen špatný název projektu - neměl by obsahovat mezery.

  • zkontroluj umístění projektu (c:/xampp/htdoc­s/NazevProjek­tu)
  • zkontroluj funkčnost a spuštění apache v Xampp Control Panelu
  • zkus zadat v prohlížeči adresu localhost - musí ti vypsat všechny projekty
Odpovědět 9. května 21:04
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Stivko
Člen
Avatar
Stivko:2. června 20:22

Super, skvěle, přehledně a stručně vysvětleno.

Odpovědět 2. června 20:22
Nikdy není pozdě začít s něčím novým
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 51. Zobrazit vše