Ako vytvoriť vlastnú web stránku v PHP a MySQL čo má responzívny dizajn za 7 dní?

Behom pár dní sa naučíte tajné zákutia, ako prebieha tvorba webových stránok

 Modul #1: Bleskový úvod: Nastavenie vývojového prostredia pre tvorbu webu na počítači



• Dynamické stránky: prečo si zvoliť práve PHP?

  Prečo PHP doslova valcuje iné programovacie jazyky, ktoré sa snažia byť veľmi dômyselné a sofistikované? Proti PHP nemajú šancu. Rovnako je to tak aj z databázou MySQL, ktorá je jednoduchá, skvelá, rýchla zábavná. Celé to zaštiťuje webový server Apache, ktorý je free a zároveň veľmi výkonný a spoľahlivý. Dostávate do ruky webovú zbraň, ktorá má takmer neobmedzené možnosti.

• Aká je architektúra moderného webu so smiešnymi režijnými nákladmi?

  V tejto časti sa dozviete, ako funguje moderný web ako napr. internetový obchod. Ktoré celky sú potrebné nato, aby web fungoval? Koľko približne stoja a aké sú možnosti šetrenia nákladov pre začínajúce startupy? Je možné využiť Linux a free databázu MySQL? Dozviete sa v tomto videjku.

• Ako rozbehať webový server Apache?

  Predstavte si, že máte notebook a ešte zatiaľ nemáte a ani nevlastníte žiadne servery z architektúry webu, ktorá je popísaná v predchádzajúcej časti. Ako teda začať bez toho, aby sme hneď museli niečo kupovať? V tejto časti si ukážeme, ako rozchodiť prostredie pre lokálny vývoj s notebookom, na ktorom je nainštalovaný operačný systém Windows.

• Ako funguje dynamika webu?

  Statické webové stránky sú dobré ako moderná náhrada nástenky v školskej jedálni. My potrebujeme niečo viac. Potrebujeme dynamiku webu nato, aby sme vedeli ľahko vytvárať internetové obchody, webové appky, webové portály a predajné stránky. Celý princíp dynamického webu je zhrnutý v tejto časti.

• Ako urobiť najjednoduhšiu dynamickú stránku v PHP?

  Už je to tu – začíname programovať web stránku. Vytvoríme si prvú dynamickú webovú stránku. Programátori s radosťou označujú tento počin ako vytvorenie si tzv. „Hello world“ aplikácie, čo je najjednoduchší príklad dynamickej webovej stránky napísanej v PHP s podporou dynamického webového servera Apache. Programovanie je hlavne o praxi, preto prosím, pre váš vlastný progres si dané ukážky skúšajte – buď hneď, alebo po skončení videjka alebo po skočení modulu. Hlavne si to skúste nakódiť sami, tak sa najviac naučíte...

• Ako si prispôsobiť konfiguráciu servera dynamických stránok v PHP?

  Tu si ukážeme, ako si prispôsobiť resp. konfigurovať webový server Apache tak, aby sa vám dobre pracovalo. Spomenieme httpd.conf, zmeníme konfiguráciu php.ini, pohráme sa z reštartom webového servera.

• Základy debugovania alebo ako si nájsť chybu v kóde?

  Bugy sú chyby v kóde, ktoré robí úplne každý programátor. Hovorí sa, že programovanie je z 10% o robení bugov a z 90% percent o opravovaní bugov, tzv. debugging :) Zmysel tohto videjka je vám ukázať, ako nakonfigurovať Apache tak, aby vám ukazoval chyby. Je to veľmi dôležité, bez tohto upozornenia na chyby je programovania ako veštenie z kryštálovej gule...
Začať študovať zadarmo

Pred týmto modulom sa neočakáva, že by ste niekedy programovali alebo tvorili weby. Ak ste programovanie mali na výške alebo na strednej škole, budete postupovať rýchlejšie. Cieľom tohto modulu je vám dať úvodné informácie z tvorby moderného webu tak, aby ste boli uvedený do problematiky a aby ste si vedeli nastaviť prostredie napríklad na vašom laptope, z ktorého si pre účely vývoja urobíte aj plnohodnotný webový server.

 Modul #2: Ako vyskladať nosnú štruktúru webu v HTML



• Ako obaliť dynamický PHP kód do HTML?

  Tu sa dozviete úplné minimum zo značkovacieho jazyka HTML (HyperText Markup Language) nato, aby ste vedeli robiť dynamické webové stránky v PHP. V tejto kapitole si prejdeme základnú kontru jednoduchého súboru HTML a výsledok si ukážeme v source code editore webového prehliadača Chrome.

• Ako vytvoriť hlavičky a odseky v HTML?

  V tejto časti sa dozviete, ako vytvoriť štruktúru HTML dokumentu v časti medzi HTML tagmi body. Ukážeme si tvorbu odstavcov (odsekov), a hlavičiek (headingov), ako napr. H1 alebo H2.

• Ako vytvoriť tabuľku v HTML kóde?

  Tu si ukážeme, ako vytvoriť tabuľku v HTML aj s hlavičkou a štruktúrou tela tabuľky.

• Ako pridať obrázok do HTML kódu?

  Tu si ukážeme presnú syntax obrázkov v HTML, samozrejme, aj na konkrétnej ukážke. Nemenej dôležité ako obrázok je aj jeho metatext pre účely indexácie vyhľadávačmi (ako napr. Google). Ako pridať taký metatext pre obrázky? Ukážeme si v tejto kapitole.

• Ako vyrobiť zoznam v HTML kóde?

  Príchodom responzívnych frameworkov sa v HTML začali vo väčšom množstve používať zoznamy. Táto kapitola vás zasvätí do tvorby zoznamov v HTML.

• Ako pridať do HTML odkaz a ako urobiť odkaz na tú istu stránku?

  Tu si ukážeme ako pridať na našej stránke interné a externé odkazy do HTML. Interné HTML odkazy odkazujú na tú istú stránku, na ktorej sme, len na inú časť stránky. Externé odkazy odkazujú na iné HTML stránky. Existuje možnosť ako ich napísať tak, aby sa otvárali aj v novom okne, čo si predvedieme.

• Ako vytvoriť formulár a čo je get a post?

  Chcete mať webovú stránku interaktívnu? Jedna z možností takejto interakcie je vytvoriť webový formulár. Veľmi dôležitá kapitola, ktorá vám ukáže ako vytvoriť formulár v HTML. Ukážeme si rôzne možnosti akcií po odoslaní formuláru: GET a POST ako aj princíp činnosti.

• Ako vložiť zaškrkávacie tlačítka (checkboxy) do formulára?

  Táto časť sa venuje checkboxom alebo ak chcete zaškrtávacím tlačítkam a ich možností integrácie s HTML formulárom, samozrejme, s praktickou ukážkou.

• Ako použiť radiobuttony vo formulari?

  Radio buttony slúžia na formulári nato, aby ste si vždy vybrali iba jednu ponúkanú možnosť. Napr. buď je žena tehotná alebo nie je. Nemôže byť trochu tehotná. Na takéto otázky je vhodné použiť radio button: Áno/Nie

• Hidden prvky v HTML formulári

  Niekedy nechceme, aby v HTML formulári bolo vidieť, čo pašujeme, napr. IDčka používateľov alebo iné systémové záležitosti. Pokiaľ vás zaujíma ako v HTML formulári prepašovať skryté prvky, tak ste tu správne.

Tento modul vás zasvätí do toho, ako urobiť základnú štruktúru statického webu v HTML. Chceme túto štruktúru v HTML postaviť tak dobre, aby vaša webová stránka chutila vyhľadávačom ako napr. google, yahoo alebo bing. Ak im bude veľmi chutiť, tak vaše stránky budú vysoko indexované a zobrazované na prvých stránkach v týchto vyhľadávačoch. Nutný predpoklad k tomu úspechu je práve vedieť ako vytvoriť dobre štruktúrované HTML, ktoré bude navyše správne pripravené grafickú vrstvu CSS a Boostrap, ktoré preberáme v ďalších moduloch.

 Modul #3: Ako sa stať dizajnérom webu v CSS na jeden deň



• Úvod do dizajnu webu v CSS

  Web design vás volá! Toto je základné videjko o tom, čo sú štýlovací jazyk kaskádových štýlov CSS (Cascading Style Sheets) a čo vám prinášajú.

• Odhaľujeme interaktívny editor CSS, ktorý má každý prehliadač

  Tu si ukážeme ako vám pomôže webový prehliadač – v ukážke Google Chrome na vývoj web dizajnu. Každý webový prehliadač má v sebe zabudované nástroje na efektívnu tvorbu web dizajnu. Poďme si ich ukázať.

• Inline CSS ako najjednoduhšia forma zmeny vzhľadu stránky

  V tejto kapitole zmeníme vzhľad webovej stránky najjednoduchšie ako je to možné. A to pomocou inline CSS.

• Ako vytvoriť interné CSS: pokročilejšia forma vývoja dizajnu stránky

  V tejto časti si vytvoríme interné CSS v PHP súbore, čo je pokročilejší spôsobov, ako pridať webovú grafiku do HTML kódu.

• Ako oddeliť CSS do samostatného súboru: profesionálna forma vývoja dizajnu webu

  Skutočne najlepšie a najprofesionálnejšie riešenie predstavuje vytvorenie samostatného (resp. dedikovaného) CSS súboru, ktorý bude slúžiť výlučne na tvorbu webovej grafiky. V tejto kapitole si na praktickom príklade ukážeme ako na to.

• Ako zarovnať HTML objekty cez margin a padding v CSS?

  Táto časť je venovaná na zarovnávanie HTML objektov pomocou dvoch možností, ak to je margin a padding. Tieto dve možnosti sa pletú aj niektorým profesionálnym webovým dizajnérom (žiaľ smutno-nepekný poznatok z praxe). Poďme si teda veľmi rýchlo rozlúsknuť čo je čo.

• Ako používať triedy (class) v CSS?

  Tvorba CSS súborov prestavuje úplný základ tvorby v jazyku kaskádových štýlov. Napr. chceme, aby všetky tabuľky vyzerali jednotne, všetky tlačítka vyzerali jednotne a všetky paneláky vyzerali šedo-sivo-jednotne.... no možno to posledné už ani nie :)

• Ako prideliť HTML elementu jednoznačný identifikátor pre jedinečné naštýlovanie dizajnu?

  Ak nejaké HTML elemente vyčnievajú z radu, napr. majú špecifický dizajn alebo funkcionalitu, ktorá sa viaže iba k nim, tak je vhodné im prideliť jednoznačný identifikátor pre účely ďalšej tvorby.

• Ako naštýlovať skupiny (bloky) HTML elementov?

  Divízie v HTML predstavujú bloky HTML elementov aj pre účely jednotného štýlovania CSS. Predstavujú tiež podporný prostriedok pre interaktívnu funkcionalitu na úrovni ReactJS alebo Angularu. V tejto časti si ukážeme, ako napísať taký HTML blok.

• Ako štýlovať prvky medzi blokmi HTML elementov?

  Ako štýlovať maličké časti HTML kódu, ktoré sú tak malé, že nie je vhodné použiť divíziu HTML (blok HTML)? Riešenie nájdete v tejto kapitole.

Ako sa naučiť kaskádové štýly CSS za jeden deň? Kaskádové štýly CSS predstavujú najdostupnejšiu možnosť, ako si prispôsobiť vizuál webu vašim predstavám. V tomto module získate základ CSS ktorý využijete neskôr tak, že si budete upravovať responzívny grafický framework boostrap podľa vašich špecifických požiadaviek, napr. keď budete tvoriť svoj vlastný e-shop.

 Modul #4: Ako urobiť stránku responzívnu pre mobily, tablety a počítače v Bootstrape?



• Čo je bootstrap a na čo je dobrý?

  Bootstrap je CSSkový framework, ktorý je prirodzene responzívny. Výsledkom je, že stránky, ktoré sú písané v bootstrape sa pekne zobrazujú vo webových prehliadačoch na počítačoch, tabletoch ako aj mobilných telefónoch bez väčšej námahy webového vývojára. V tejto dobe patrí medzi najsťahovanejšie projekty na GitHube a niet sa čomu diviť :)

• Ako nainštalovať bootstrap do nášho projektu?

  Ako použiť resp. nainštalovať bootstrap do existujúceho HTML/PHP projektu? Ukážeme si v tejto kapitole. Možnosti sú dve: buď použijete externé odkazy na free cloud, na ktorom leží bootstrap alebo si ho priamo naimportujete do projektu. Viac dané možnosti rozoberieme v tejto kapitole.

• Základný princíp bootstrapových tried a filozofia kontainerov

  Ako fungujú kontajnery v bootstrape? Ich pochopenie je predchádza samotnej tvorbe v boostrape. V tejto kapitole si prakticky ukážeme ich využitie

• Gridový systém bootstrapu a koncept responzivity stránky

  Grid alebo mriežka predstavuje rozmiestnenie medzi objektov na HTML stránke v bootstrape tak, aby bola HTML stránka prirodzene responzívnaa. Grid sa považovať za jedno zo základných know-how bootstrapu. Viac ako aj praktickú ukážku využitia gridu uvidíte v tejto kapitole.

• Ako urobiť stránku responzívnu na rôznych typoch zariadení?

  V tejto časti si prakticky ukážeme ešte väčší stupeň responzivity v bootstrape. Dorobíme si aj stredný stupeň responzivity napr. na tablety.

• Plne automatický responzívny bootstrap, ktorý necháme na boostrap

  V tejto časti si prakticky ukážeme ešte väčší stupeň responzivity v bootstrape. Dorobíme si aj stredný stupeň responzivity napr. na tablety. Konkrétne ide o štýlovanie textových stĺpčekov tak, že sa automaticky prispôsobia podľa veľkosti okna.

• Ako vytvárať krásne responívne tabuľky v bootstrape?

  Táto kapitola je mega. Po pobozkaní Boostrapom sa z pôvodných hnusných HTML tabuliek stávajú responzívne perly internetovej stránky. Toto musíte vidieť :)

• Štýlovanie responzívnych obrázkov v bootstrape

  Obrázky dokážu v responzivite urobiť poriadku šarapatu. V tejto časti si na praktickom príklade ukážeme ako zahrnúť do responzivity obrázky a aké sú možnosti reponzivity obrázkov. Dôležitosť tejto kapitoly podtrhuje aj výber obrázku najvýkonnejšieho žigulíka svojej doby, a to milovaný VAZ 2106.

• Responzívne zoznamy v bootstrape

  Pôvodné zoznamy v HTML boli také škaredé kačiatko. Zoznamy v Boostrape predstavujú krásnu inováciu, kedy sa nimi budete môcť pýšiť na vašej stránke. Viac v praktickej ukážke nájdete tejto kapitole.

• Ako vytvoriť reponzívne formuláre v bootstrape?

  Formuláre v HTML opäť nevyzerali nič moc. Bootstrap ich premení na krásne polia, ktoré budú používatelia s radosťou vypĺňať. A to všetko ešte aj s pridaním responzivity tak, aby sa napr. vaše formuláre zobrazovali perfektne aj na mobile.

Grafický framework Bootstrap predstavuje jedinečnú možnosť, ako urobiť pekný dizajn pri minimálnom úsilí a pritom taký, ktorý je prirodzene reponzívny pre počítače, tablety ako aj mobilné zariadenia. Je to priemyselný štandard dnešnej tvorby webu, ktorý má v životopise spomenutý každý skutočný web developer. V kombinácií s CSS predstavuje obrovskú silu moderného grafického dizajnu webu. V tomto module ho zvládnete od základov tak, aby ste ho vedeli využiť pri tvorbe ďalších dynamických stránok.

 Modul #5: Ako vytvoriť dynamický web v PHP bez predchádzajúcich znalostí



• Ako definovať premennú v PHP a ako komentovať kód?

  Táto kapitola vás prevedie základmi programovania v PHP a to základnou prácou s premennými a ukáže vám ako dokumentovať kód. Pochopíte aj základ správania sa hypertextového preprocesora PHP.

• Ako pracovať s premennýmni a základné aritmetické operácie

  V tejto časti si ukážeme práce s premennými v PHP v podobe základných aritmetických operácií, ktoré využijete veľmi často na vašej ďalšej ceste v kódení dynamických webových stránok v PHP, a ktoré obalíme do HTML kódu v Bootstrape.

• Ako dostať údaje z webového formulára do PHP?

  Kľúčová kapitola: ukáže vám, ako prepojiť statický HTML formulár s dynamickým PHPčkom. Vysvetlíme si celý princíp činnosti, ktorý si v ďaľších kapitolách naimplementujeme.

• Poďme nakódiť spracovanie obsahu formuláru v PHP!

  V tejto časti si naimplementujeme poznatky uvedené v predchádzajúcich kapitolách. Ideme implementovať spracovanie HTML formulára v PHP.

• Šikovné spracovanie hodnôt formuláru cez ternárny operátor

  Toto je malý hack ako rýchlo a prehľadne spracovať obsahy HTML elementov formuláru do premenných v PHP. Ternárny operátor je známy už od jazyka C, a tu v PHP má skvelé praktické využitie.

• Vetvenie programu a prihlasovací formulár

  Sme dobrí. Poďme si klásť podmienky! V tejto kapitole si na praktickom príklade ukážeme, akým spôsobom položíme a nakódime podmienky v PHP aj s praktickým využitím. Pomocou podmienok určíme, či sú alebo nie sú správne prihlasovacie údaje používateľa.

• Ako spracovať dropdown s pokročilou podmienkou vetvenia

  Často sa vám v programovaní bude stávať, že budú podmienky zložitejšie, resp. že ich bude vedľa. Existuje zabudované riešenie v jazyku PHP, ktoré vám umožní zjednodušenie podmienok. V tejto časti si ho predvedieme na praktickom príklade, kedy budeme vyšetrovať hodnotu dropdownu na HTML formulári.

Skriptovancí jazyk PHP (čo znamená PHP: Hypertext Preprocessor) predstavuje silu moderného webu, ktorý vie bez väčšej námahy programátora generovať dynamický obsah. V PHP bol robený aj facebook. V priebehu tejto kapitoly vás pravdepodobne prekvapí, ako jednoduché je vytváranie webových stránok v PHP a aký obrovský potenciál má PHP. Pôjdeme od úplných začiatkov. Nie je vyžadovaná žiadna úroveň programovania. Tu sa naučíte, ako programovať v PHP.

 Modul #6: Dynamika webu v PHP: Tvorba dynamických tabuliek a základných algormitov



• Najjednoduhšia ukážka cyklu a najjednoduhší cyklus while

  Počítače by mali slúžiť ľuďom! A v prvom rade tak, že budú mechanicky počítať manuálne práce podľa zadania, čím uľahčia život ľudom. Jedným z priamych možností, ako im pripraviť takého zadanie, je naprogramovať cykly, ktoré budú počítače spracovávať 10, 200 a možno aj miliónkrát, podľa vášho zadania. V tejto kapitole si ukážeme najjednoduchší spôsobom, ako naprogramovať cyklus v PHP.

• Ako dynamicky vyplniť riadky bootstrapovej tabuľky?

  Tu si ukážeme ako využiť PHP nato, aby dynamicky doplnilo riadky Boostrapovej tabuľky. Je to jednoduché a veľmi efektívne.

• Dynamické naplnenie tabuľky s konfigurovateľným vstupom

  V tejto kapitole si pridáme do cyklu aj parameter, ktorý bude dynamicky konfigurovateľný cez HTML formulár. Celé si to prakticky naimplementujeme v tejto kapitole.

• Dynamická tabuľka prevodov kilometrov na míle s cyklom for

  V tejto kapitole si ukážeme ako aj prakticky nakódime cyklus for, ktorý ma v sebe vstavanú indexáciu. Praktický príklad bude prevodová tabuľka kilometrov za hodinu na míle za hodinu.

• Efektivita kódu: Vnorený cyklus for

  Cykly vieme do seba vnárať. V tejto kapitole si ukážeme praktickú ukážku ako na to. Pomocou dynamického PHP vyplníme riadky aj stĺpce v dynamickej tabuľke v Bootstrape v HTML.

• Interaktivita a validácia vstupných parametrov formulára

  V tejto kapitole pridáme možnosť dynamicky meniť počty iterácií cyklu a vnoreného cyklu priamo cez HTML formulár aj s ošetrením (validáciou) vstupu.

• Ako spracovať jednorozmerné pole a cyklus foreach?

  Polia a cykly predstavujú silné programátorské zbrane. V tejto časti si zadefinujeme pole v PHP a budeme ho dynamicky prechádzať pomocou cyklov for a aj si ukážeme nový a veľmi prakticky cyklus foreach.

• Ako spracovať asociatívne pole - hash?

  Asociatívne pole alebo hash predstavuje veľmi praktickú dátovú štruktúru, v ktorej si pre vami definované kľúče viete ukladať hodnoty. Ako ich zadefinovať a naprogramovať v PHP? Ako ich dynamicky predchádzať a spracovávať? To si ukážeme v tejto kapitole.

V tomto module sa dozviete ako cykliť programy v PHP a ako spracovať základne programátorské štruktúry ako sú polia a asociatívne polia, tzv. hashe. Spomenieme aj efektivitu kódu a ukážeme si praktické využitie cyklov v programovaní webových stránok.

 Modul #7: Spojenie s webu s databázou MySQL: od základov po tvorbu databázovej appky



• Ako rozchodiť MySQL server a ako sa na neho pripojiť cez konzolu?

  MySQL je úžasná relačná databáza typu open-source, ktorá dokáže pracovať s údajmi o veľkosti stoviek gigabajtov. Určite s prehľadom postačí na priemerný e-shop. V tejto časti si ukážeme ako rozchodiť MySQL sever a ako sa pripojiť na jeho konzolu. Vyskúšame si aj základné príkazy v konzole MySQL.

• Ako vytvoriť novú databázu v MySQL?

  V tejto časti si v MySQL konzole prakticky ukážeme, ako vytvoriť novú databázu, ako zmazať existujúcu MySQL databázu ako sa v nej poobzerať v konzole pomocou SQL príkazov špecifických pre MySQL.

• Ako vytvoriť novú tabuľku v MySQL?

  V tejto časti si prezradíme, akým spôsobom nadizajnovať jednoduchú relačnú tabuľku a ako ju vytvoriť pomocou SQL príkazu špecifického pre MySQL v konzole MySQL.

• Ako naplniť tabuľku údajmi?

  Pre účely ďalšej práce by sme potrebovali, aby sme si vytvorenú tabuľku naplnili údajmi. V tomto videjku si ukážeme ako prakticky použiť vstavané MySQL príkazy na pridanie nových záznamov do existujúcich tabuliek.

• Vyberanie údajov z databáz: SQL klauzuly where a order by

  MySQL má pre výber údajov vstavané príkazy, ktoré si ukážeme v tejto kapitole. Po skončení tejto kapitoly by ste mali vedieť, ako vybrať údaje z tabuliek pomocou základného vstavaného SQL filtra a SQL zoradenia.

• Ako napojiť dynamický web v PHP na databázu a vybrať obsah tabuľky?

  Ako napojiť PHP na relačnú databázu MySQL? Ako z nej vytiahnuť údaje a vypísať ich do HTML pomocou PHP? Praktickú ukážku máte v tejto kapitole.

• Transformácia výsledkov do tabuľky pre účely vytvorenia malej db appky

  V tejto kapitole si transformujeme existujúci demonštračný PHP program pre prístup do MySQL databázy, ktorý sme doteraz vytvorili, na databázovú webovú appku. Danú transformáciu zužitkujeme v ďalších kapitolách.

• Ako urobiť db appku, ktorá pridáva údaje do databázy?

  Doteraz nám naša db webová appka iba vyberala údaje z databázy. V tejto kapitole si prakticky ukážeme, ako do nej pridať formulár a ako spracovať tento formulár tak, aby pridával údaje do databázy MySQL.

• Ako dorobiť do appky vyhľadávač?

  Pridajme si do našej db webovej appky! Táto kapitola vám cez praktickú implementáciu ukáže ako pridať do existujúcej appky vyhľadávací formulár ako filter tabuľka ako podľa neho ho napojiť tak, aby sa podľa neho dalo vyhľadávať v databázy.

• Cesta k profesionálnemu web developerovi: Refactor db appky

  Poďme po cestách profesionálnych programátorov a urobme refaktor kódu db webovej appky. Tým nepridáme žiadnu novú funkcionalitu, iba učešeme program tak, aby sa v ňom v budúcnosti ľahšie orientovalo a aby sa ľahšie hľadali prípadné bugy, a aby sa ľahšie pridávala nová funkcionalita.

Tento modul vás uvedie do tajov profesionálneho programovania webových stránok. Napojíme sa na produkčnú databázu MySQL, vytvoríme jednoduchú relačnú databázu, a vytvoríme vlastnú responzívnu databázovú webovú appku. A urobíme si aj refaktorizáciu kódu tak, aby naša appka prešla code-review :)