![\"\"](\"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/04\/DWoitEUX0AEnrdn-724x1024.jpg\")
<\/figure>\n\n\n\nWyobra\u017amy sobie, \u017ce posiadamy sklep internetowy z systemem rejestracji i sk\u0142adania zam\u00f3wie\u0144.<\/p>\n\n\n\n
Podstaw\u0105 do stworzenia takiego sklepu s\u0105 dwie rzeczy:<\/p>\n\n\n\n
- Warstwa wizualna<\/li>
- Silnik sklepu<\/li><\/ul>\n\n\n\n
To w\u0142a\u015bnie nazywane jest Front-endem i Back-endem. Jak sama nazwa wskazuje – to co jest na Froncie to wszystko to, co widzimy. Zdj\u0119cia, przyciski, napisy, kolory, animacje. Natomiast to co znajduje si\u0119 we wn\u0119trzu strony, z ty\u0142u, czyli Back-end, to ca\u0142y silnik strony. Odpowiada on za sposoby dzia\u0142ania ca\u0142ego sklepu. M\u00f3wi on co ma si\u0119 sta\u0107 gdy naci\u015bniemy przycisk, z\u0142o\u017cymy zam\u00f3wienie, zarejestrujemy si\u0119.<\/p>\n\n\n\n
Powy\u017cszy obrazek doskonale odzwierciedla r\u00f3\u017cnice obu stron. Front-end musi by\u0107 \u0142adny, przyjemny dla oka i zach\u0119caj\u0105cy u\u017cytkownika do korzystania ze strony. Back-end natomiast to ca\u0142y silnik strony, kt\u00f3ry zarz\u0105dza danymi, \u0142\u0105czy si\u0119 z baz\u0105 danych, wykonuje jakie\u015b akcje na serwerze strony.<\/p>\n\n\n\n
Mo\u017ce niekt\u00f3rzy z was zauwa\u017cyli, \u017ce w zak\u0142adce O mnie<\/a> lub w tej\u017ce kategorii na moim Portfolio <\/a>napisa\u0142em, \u017ce chc\u0119 zosta\u0107 Full-stack developerem. Full-stack, jak sama nazwa wskazuje znaczy wszystko, czyli programist\u0105 zajmuj\u0105cym si\u0119 i Front-endem i Back-endem. Osob\u0105, kt\u00f3ra dba i o warstw\u0119 wizualn\u0105 i o spos\u00f3b dzia\u0142ania strony.<\/p>\n\n\n\n
Z czego sk\u0142ada si\u0119 Front-end?<\/h4>\n\n\n\n
G\u0142\u00f3wnymi filarami Front-endu s\u0105:<\/p>\n\n\n\n
- HTML<\/li>
- CSS<\/li>
- JavaScript<\/li><\/ul>\n\n\n\n
Pr\u00f3cz tego wyr\u00f3\u017cniamy preprocesory, biblioteki i frameworki, ale to jest temat na inny wpis i nie b\u0119d\u0119 wam zawraca\u0142 tym g\u0142owy.<\/p>\n\n\n\n
Om\u00f3wmy wi\u0119c pokr\u00f3tce ka\u017cdy podpunkt.<\/p>\n\n\n\n
HTML<\/strong> – jest to j\u0119zyk, kt\u00f3rym definiujemy co ma si\u0119 pojawi\u0107 na stronie. Przyk\u0142adowo zdj\u0119cie, przycisk, prostok\u0105t, napis itp.<\/p>\n\n\n\n
CSS <\/strong>– za jego pomoc\u0105 opisujemy jak ma wygl\u0105da\u0107 tre\u015b\u0107 stworzona w HTML’u. Na przyk\u0142ad zdj\u0119cie ma mie\u0107 rozmiary 300×400 pikseli, przycisk ma si\u0119 powi\u0119kszy\u0107 po najechaniu myszk\u0105, prostok\u0105t ma mie\u0107 czerwony kolor, a napis ma by\u0107 pogrubiony i podkre\u015blony.<\/p>\n\n\n\n
JavaScript<\/strong> – najbardziej rozbudowany segment z wszystkich wy\u017cej wymienionych. Pozwala na zrobienie rzeczy, na kt\u00f3re nie pozwala nam HTML i CSS. Na przyk\u0142ad pozwala po naci\u015bni\u0119ciu przycisku zmieni\u0107 kolor prostok\u0105ta z czerwonego na niebieski, a zdj\u0119cie z krajobrazu Pary\u017ca na portret Jeffa Bezosa.<\/p>\n\n\n\n
Z czego sk\u0142ada si\u0119 Back-end?<\/h4>\n\n\n\n
Tutaj sprawa si\u0119 troch\u0119 bardziej komplikuje, gdy\u017c Back-end jest du\u017co bardziej rozbudowany i nie da\u0142bym rady wypisa\u0107 tu wszystkich j\u0119zyk\u00f3w i technologii, kt\u00f3rych mo\u017cemy u\u017cy\u0107. Wymieni\u0119 jednak te najwa\u017cniejsze, kt\u00f3re wykorzystujemy do tworzenia stron internetowych:<\/p>\n\n\n\n
- PHP<\/li>
- C# .NET<\/li>
- Node.js<\/li>
- MySQL<\/li><\/ul>\n\n\n\n
PHP<\/strong>, .NET<\/strong> i Node.js <\/strong>s\u0105 najpopularniejszymi technologiami na \u015bwiecie je\u015bli chodzi o Back-end. Ich dzia\u0142anie i mo\u017cliwo\u015bci bardzo si\u0119 r\u00f3\u017cni\u0105, ale ka\u017cda technologia odpowiada za to samo, czyli silnik strony. Dzi\u0119ki nim mo\u017cemy \u0142\u0105czy\u0107 si\u0119 z baz\u0105 danych, serwerem, przechowywa\u0107 i pobiera\u0107 dane. Mo\u017cliwo\u015bci s\u0105 ogromne, ogranicza nas tylko kreatywno\u015b\u0107.<\/p>\n\n\n\n
MySQL <\/strong>– jest to system zarz\u0105dzania bazami danych, kt\u00f3re obs\u0142ugiwane s\u0105 w j\u0119zyku zapyta\u0144 SQL. Dzi\u0119ki bazie danych mo\u017cemy przechowywa\u0107 informacje na temat u\u017cytkownik\u00f3w zarejestrowanych na naszym serwisie lub na przyk\u0142ad informacje o produktach dost\u0119pnych w naszym sklepie. Lub posty na blogu, takim jak ten \ud83d\ude42<\/p>\n\n\n\n
I to wszystko, je\u015bli chodzi o og\u00f3lny opis wszystkich najwa\u017cniejszych technologii. Du\u017co tego, to prawda i na pocz\u0105tku mo\u017ce si\u0119 wydawa\u0107 trudne, ale gdy sp\u0119dzimy troch\u0119 czasu z programowaniem to wszystko za\u0142apiemy w kr\u00f3tkim czasie.<\/p>\n\n\n\n
Gdyby kto\u015b nadal mia\u0142 pytania i w\u0105tpliwo\u015bci – zapraszam do kontaktu. Ch\u0119tnie odpowiem na wszystkie pytania.<\/p>\n","protected":false},"excerpt":{"rendered":"
Front-end i Back-end Czym s\u0105? Jakie posiadaj\u0105 r\u00f3\u017cnice? Co je charakteryzuje i kt\u00f3ry kierunek wybra\u0107? W tym wpisie postaram si\u0119 odpowiedzie\u0107 na wszystkie te pytania. Zapraszam \ud83d\ude42 Wyobra\u017amy sobie, \u017ce posiadamy sklep internetowy z systemem rejestracji i sk\u0142adania zam\u00f3wie\u0144. Podstaw\u0105 do stworzenia takiego sklepu s\u0105 dwie rzeczy: Warstwa wizualna Silnik […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\n
Front-end i Back-end | Spyze<\/title>\n<meta name=\"description\" content=\"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front-end i Back-end | Spyze\" \/>\n<meta property=\"og:description\" content=\"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\" \/>\n<meta property=\"og:site_name\" content=\"Spyze\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-18T18:04:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-18T18:09:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/04\/DWoitEUX0AEnrdn-724x1024.jpg\" \/>\n<meta name=\"author\" content=\"Spyze\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Spyze\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\"},\"author\":{\"name\":\"Spyze\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81\"},\"headline\":\"Front-end i Back-end\",\"datePublished\":\"2019-04-18T18:04:57+00:00\",\"dateModified\":\"2019-04-18T18:09:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\"},\"wordCount\":648,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81\"},\"articleSection\":[\"Programowanie\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\",\"url\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\",\"name\":\"Front-end i Back-end | Spyze\",\"isPartOf\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/#website\"},\"datePublished\":\"2019-04-18T18:04:57+00:00\",\"dateModified\":\"2019-04-18T18:09:11+00:00\",\"description\":\"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/www.spyze.pl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-end i Back-end\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/#website\",\"url\":\"https:\/\/www.spyze.pl\/blog\/\",\"name\":\"Spyze\",\"description\":\"Blog programisty\",\"publisher\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.spyze.pl\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81\",\"name\":\"Spyze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/03\/logo.png\",\"contentUrl\":\"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/03\/logo.png\",\"width\":621,\"height\":709,\"caption\":\"Spyze\"},\"logo\":{\"@id\":\"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Nazywam si\u0119 Micha\u0142 Michasi\u00f3w, mam 18 lat i ucz\u0119szczam do trzeciej klasy technikum informatycznego w Bielsku - Bia\u0142ej. Programowaniem interesuj\u0119 si\u0119 od trzech lat. Uwielbiam uczy\u0107 si\u0119 i poznawa\u0107 nowe rzeczy, nie brakuje mi wi\u0119c ch\u0119ci i motywacji do nauki. Moim celem, jak i marzeniem jest zosta\u0107 programist\u0105 Full-Stack, a dok\u0142adnie JavaScript Developerem.\",\"sameAs\":[\"https:\/\/spyze.pl\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front-end i Back-end | Spyze","description":"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/","og_locale":"pl_PL","og_type":"article","og_title":"Front-end i Back-end | Spyze","og_description":"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.","og_url":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/","og_site_name":"Spyze","article_published_time":"2019-04-18T18:04:57+00:00","article_modified_time":"2019-04-18T18:09:11+00:00","og_image":[{"url":"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/04\/DWoitEUX0AEnrdn-724x1024.jpg"}],"author":"Spyze","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Spyze","Szacowany czas czytania":"3 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#article","isPartOf":{"@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/"},"author":{"name":"Spyze","@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81"},"headline":"Front-end i Back-end","datePublished":"2019-04-18T18:04:57+00:00","dateModified":"2019-04-18T18:09:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/"},"wordCount":648,"commentCount":0,"publisher":{"@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81"},"articleSection":["Programowanie"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/","url":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/","name":"Front-end i Back-end | Spyze","isPartOf":{"@id":"https:\/\/www.spyze.pl\/blog\/#website"},"datePublished":"2019-04-18T18:04:57+00:00","dateModified":"2019-04-18T18:09:11+00:00","description":"Front-end i Back-end. Czym s\u0105? Jakie maj\u0105 r\u00f3\u017cnice? W tym wpisie postaram si\u0119 wyt\u0142umaczy\u0107 i opisa\u0107 obie te kategorie w prosty i zrozumia\u0142y spos\u00f3b.","breadcrumb":{"@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.spyze.pl\/blog\/front-end-i-back-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/www.spyze.pl\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-end i Back-end"}]},{"@type":"WebSite","@id":"https:\/\/www.spyze.pl\/blog\/#website","url":"https:\/\/www.spyze.pl\/blog\/","name":"Spyze","description":"Blog programisty","publisher":{"@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spyze.pl\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":["Person","Organization"],"@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/5f48553f2f4bcff90182ae93ce48fc81","name":"Spyze","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/03\/logo.png","contentUrl":"https:\/\/www.spyze.pl\/blog\/wp-content\/uploads\/2019\/03\/logo.png","width":621,"height":709,"caption":"Spyze"},"logo":{"@id":"https:\/\/www.spyze.pl\/blog\/#\/schema\/person\/image\/"},"description":"Nazywam si\u0119 Micha\u0142 Michasi\u00f3w, mam 18 lat i ucz\u0119szczam do trzeciej klasy technikum informatycznego w Bielsku - Bia\u0142ej. Programowaniem interesuj\u0119 si\u0119 od trzech lat. Uwielbiam uczy\u0107 si\u0119 i poznawa\u0107 nowe rzeczy, nie brakuje mi wi\u0119c ch\u0119ci i motywacji do nauki. Moim celem, jak i marzeniem jest zosta\u0107 programist\u0105 Full-Stack, a dok\u0142adnie JavaScript Developerem.","sameAs":["https:\/\/spyze.pl"]}]}},"_links":{"self":[{"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/posts\/179"}],"collection":[{"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":4,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spyze.pl\/blog\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}