Jak są zbudowane profesjonalne strony internetowe?

Jak są zbudowane profesjonalne strony internetowe?
Fi3rce
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 9 lat
  • Postów:423
0

Witam. Po wejściu na poziom semi intermediate z HTML5, CSS3, JavaScript (jQuery), PHP/MySql zacząłem się zastanawiać jak się w praktyce tworzy serwisy internetowe. Wszystko fajnie, potrafię zbudować coś, co jakoś tam wygląda, ale jak to zebrać do kupy? Mam podstawy podstaw Zenda, więc wiem mniej więcej jak taka aplikacja wygląda, ale co z resztą? Przypuszczam, że jest milion możliwości i chciałbym je poznać. Jak np. wygląda budowanie strony nie opartej na Zendzie, co z widokami? Jak jest to porozdzielane? Jakie są inne techniki budowy takiej aplikacji ? Przypuszczam, że nie przepisujemy np. ogólnego layoutu strony milion razy w każdym pliku html itd. Jak wygląda przykładowa struktura katalogów itd

Jeżeli macie jakieś linki to walcie śmiało, ja niestety nic nie potrafiłem sensownego znaleźć w tym temacie.


„Every Pro was once an amateur, every expert was once a beginner.”
edytowany 2x, ostatnio: Fi3rce
katelx
  • Rejestracja:prawie 10 lat
  • Ostatnio:4 miesiące
  • Lokalizacja:Hong Kong
2

Wszystko zalezy od konwencji uzywanej w danym frameworku, wiekszosc tutoriali i chyba kazda ksiazka do popularnych frameworkow php powinna to dobrze wyjasnic. Dodatkowo znajdz sobie zrodla jakiejs popularniejszej aplikacji (np. na sourceforge, github, google :) i zobacz jak to wyglada w praktyce.

drorat1
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 2 lata
  • Lokalizacja:Krasnystaw
  • Postów:1181
1
Fi3rce napisał(a):

Przypuszczam, że nie przepisujemy np. ogólnego layoutu strony milion razy w każdym pliku html itd. Jak wygląda przykładowa struktura katalogów itd

Jasne że czegoś takiego się nie robi, chyba że w stary sposób (proceduralnie np.) ale to już przeżytek. Teraz się robi master layout, do którego wstrzykujesz po prostu później content dla określonej podstrony, to jest zresztą pewien wzorzec. W ASP.NET to się nazywa Master Page i też tam jest coś w rodzaju content placeholder.

Co framework to określona struktura katalogów i określone założenia, ten temat jest tak rozległy że sporo można by o tym pisać. Dla Kohana np. może być tak:

Kopiuj
application
  classes
    controller
    kohana
    model
  config
  i18n
  logs
  messages
  views
    template
  bootstrap.php
assets
  js
  css
  images
modules
system
uploads
vendor
index.php  
.htaccess
robots.txt      

To co za co odpowiada to jest jasno określone w dokumentacji Kohana i na forach dyskusyjnych, to jest tak rozległy temat że nie da się tego tak tutaj opisać w kilku zdaniach :-)

edytowany 1x, ostatnio: drorat1
Fi3rce
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 9 lat
  • Postów:423
0

Czaje, czaje, chodziło mi właśnie o rozwianie moich wątpliwości co do kodu itd., bo kiedyś się tym troche zajmowałem jak byłem małym smrodem i moja wiedza na ten temat jest daleko za murzynami. Z tego co widzę, to teraz wszystko jest oparte na takim czy innym frameworku. Mi są znajome tylko frameworki php, a np. frameworki js? Jakbyś mógł mi nakreślić wykorzystanie tego i tego, bo ogladajac tutoriale na yt natknalem sie wlasnie na cos takiego jak framework js (chyba to był Node.js). Tak samo zastanawia mnie wykorzystanie frameworków php, bo kojarzy mi się to własnie z sytuacją w której musimy pobierać coś z bazy itd., a gdybym chciał prostą stronę złożoną z kilku stron statycznych o jakiejś tematyce (np. o kotach w/e) to co wtedy? Czy trzeba strzelać do muchy z armaty, wszystko na jedno kopyto tylko nie korzystamy z "pełnych możliwości" np. Zenda?

Pytanie trochę poza tematem. Załóżmy, że nauczę się jakiegoś frameworka MVC, to czy przejście później na jakiś inny framework jest okupione ogromnym wysiłkiem, czy może jest to tak jak z programowaniem, gdy posiadłem podstawową wiedzę z zakresu Javy chłonąłem jak gąbka js/php itd. ? A może jest tak, że z Symfony/Zenda jest się łatwo przerzucić na inne fw, a odwrotnie już ciężej?


„Every Pro was once an amateur, every expert was once a beginner.”
edytowany 6x, ostatnio: Fi3rce
drorat1
  • Rejestracja:ponad 15 lat
  • Ostatnio:około 2 lata
  • Lokalizacja:Krasnystaw
  • Postów:1181
0

Nie korzystałem jak dotąd z Node.js czy Angulara bo nie miałem takiej potrzeby, nie znam tego więc się tu nie wypowiem. Co do prostej strony z kilkoma podstronami, a kto tu mówi o takich kombajnach jak Symfony czy Zend?

Sprawa jest dość prosta. Kohana np. jest dość prostym i szybkim frameworkiem, są też i inne jak CodeIgnither, CakePHP, Phalcon i są one w miarę przejrzyście zbudowane więc i łatwe do nauki. Łatwo będzie przejść na inne o podobnej konstrukcji. W samym tylko HTML, CSS zrobisz tylko statyczną stronę, wiadomo że teraz żeby móc aktualizować treść to trzeba mieć jakiś CMS, więc łączysz się po prostu z taką MySQL czy PostgreSQL.

Zaletą frameworków jest to, że mają np. wbudowane już zabezpieczenie przed SQL Injection czy XSS, CSRF więc nie musisz już implementować tego, są po prostu albo biblioteki albo np. coś jak Query builder, także konfiguracja jest dość prosta, bo masz odpowiednie pliki do tego.

Kohana ma np. wbudowany system sprawdzania błędów, więc jak się w czymś walniesz to Ci się wyświetli w ognie przeglądarki informacja i nawet fragment kodu ze wskazaniem gdzie ten błąd mniej więcej jest. To jest dobre rozwiązanie nawet do prostej stronki, zresztą to się tylko tak może wydawać że to prosta robota a tak naprawdę jak chcesz zadbać o zabezpieczenia i łatwość w utrzymaniu czy rozbudowy, to sobie wybierasz co Cię interesuje (ja tu nawet nie będę sugerował Kohana, podaję tylko jako przykład). Do wyboru, do koloru.

Te kombajny jak symfony to raczej do czegoś poważniejszego, choć w Kohana, CI, Phalcon, CakePHP też można napisać coś poważnego.

TD
W sumie to nie wiem czemu ktoś miałby nie używać Symfony2 do choćby prostej strony. Potem strona się niespodziewanie rozrośnie i będzie burdel. A jeżeli już koniecznie ma być coś prostego to polecam Laravel.
drorat1
Pytanie jest zasadnicze: jakie wymierne korzyści daje użycie takiego kombajnu? Ja z Kohana w przypadku rozbudowy nawet prostej strony do rangi poważnego serwisu nie widzę tu problemu (no ale to dużo roboty). I wcale nie będzie burdelu, to pod warunkiem zachowania wszelkich (a przynajmniej tych bardziej istotnych) zasad co do organizacji kodu.
TD
Symfony jest prawdopodobnie obecnie najlepszym frameworkiem PHP, z mnóstwem 'bundli', dobrą społecznością, świetną dokumentacją etc. Również zachowanie czystego kodu w S2 nie jest trudne. Pytanie powinno brzmieć więc inaczej. Dlaczego NIE używać S2?
kaczus
  • Rejestracja:około 10 lat
  • Ostatnio:3 minuty
  • Lokalizacja:Łódź
  • Postów:1402
0

Jest podobnie - frameworki różnią się w szczegółach (niektore są wręcz odgałęzieniami innych), ale zasada co do podziału ect jest podobna - wtedy raczej się orientujesz co gdzie i w jaki sposob (czasem w jakim języku) możesz napisać, tudzież co masz gotowego, a co musisz stworzyć sam.


Ogólnie na prace domowe mam stawki zaporowe. Czasem coś o programowaniu znajdzie się na mojej stronie
bus45
  • Rejestracja:około 10 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Polska
  • Postów:52
1

Polecam książkę o Symfony 2 napisaną przez polskiego autora
http://helion.pl/ksiazki/symfony-2-od-podstaw-wlodzimierz-gajda,symfo2.htm

mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
1

node.js to to nie jest sprawa frontendu tylko backendu. node.js to normalny serwer www, z tym, że przetwarza kod napisany w javascript. Stosuje się go głównie do operacji ze stałym połączeniem np chat. Czyli cała stronę piszesz np w php ale livechat nie działa na php tylko "obok" na node.js bo będzie to dużo wydajniejsze.

A co do prostych stron to jak przedmówcy, najlepiej postawić na jakimś prostym lekkim frameworku (ja stworzyłem swój), ale nie zmienia to faktu, że strony z 5 podstronami to w 95% wordpress..


It's All About the Game.
edytowany 1x, ostatnio: mr_jaro
bus45
  • Rejestracja:około 10 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Polska
  • Postów:52
0

@mr_jaro Czat internetowy z wykorzystaniem node.js jest wydajniejszy od np. jquery i ajaxa? Mam zamiar napisać aplikacje czata i znam rozwiązanie z wykorzystaniem node.js z książki o tym frameworku. Jak byś napisał aplikacje czata obsługującą 300 - 400 czatujących w tym samym czasie + plus prywatne rozmowy, wiele czatroomów i inne funkcjonalności. Większość znanych mi czatów jest zaimplementowana w Java, ale w moim przypadku Java odpada. Na jakim hostingu można by testować czat z wykorzystaniem node.js?

mr_jaro
ogólny backend w php, backend chatu w node.js, frontend standardowo, ale zamiast ajaxa/jquery do samej komunikacji bym wykorzystał websockety.
Wizzie
  • Rejestracja:prawie 11 lat
  • Ostatnio:ponad 7 lat
0

Czat internetowy z wykorzystaniem node.js jest wydajniejszy od np. jquery i ajaxa?

node.js to to nie jest sprawa frontendu tylko backendu.

bus45
  • Rejestracja:około 10 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Polska
  • Postów:52
0

@mr_jaro napisał też:

Czyli cała stronę piszesz np w php ale livechat nie działa na php tylko "obok" na node.js bo będzie to dużo wydajniejsze.

Wiem,że node.js to backend. Jesli pisze się aplikacje czata z node.js po stronie serwera, to klienta, czyli frontend też można napisać w JavaScript.
Moje rozwiązanie bazuje na php i mysql po stronie serwera i na jquery i ajax po stronie klienta. Moje zainteresowanie wzbudziła możliwość wykorzystania node.js, bo jest bardziej wydajne czyli szybsze i pewnie nie ma opóźnień, ale trudno zrobić taki czat dla ok. 300 czatujących. Może @mr_jaro ma jakieś ciekawe opinie na ten temat.

mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
3
bus45 napisał(a):

@mr_jaro napisał też:

Czyli cała stronę piszesz np w php ale livechat nie działa na php tylko "obok" na node.js bo będzie to dużo wydajniejsze.

Wiem,że node.js to backend. Jesli pisze się aplikacje czata z node.js po stronie serwera, to klienta, czyli frontend też można napisać w JavaScript.
Moje rozwiązanie bazuje na php i mysql po stronie serwera i na jquery i ajax po stronie klienta. Moje zainteresowanie wzbudziła możliwość wykorzystania node.js, bo jest bardziej wydajne czyli szybsze i pewnie nie ma opóźnień, ale trudno zrobić taki czat dla ok. 300 czatujących. Może @mr_jaro ma jakieś ciekawe opinie na ten temat.

Prosta sprawa, co najbardziej opóźnia i zjada zasoby podczas komunikacji klient-serwer w chacie? Łączenie. I teraz sobie pomyśl o tym, że siedzi ci 400osób i o co sekundę (albo i mniej) wysyłają żądanie do serwera (komunikacja ajax + php). W tym momencie taki hostingowy serwer zdycha. Na tę mała ilość userów musisz wykupywać silny vps lub najlepiej dedykowany serwer. Jak to rozwiązać, żeby były mniejsze koszty? Używać websocketów po stronie klienta które umieją trzymać dwustronne połączenie z serwerem (websockety to nic innego jak część html5 której używasz poprzez js). Ale serwer php tego nie obsłuży więc potrzebujesz serwera node.js wraz z kodem serwerowym w js dla tego serwera, który takie połączenie umie utrzymać po stronie serwera. Co zyskujemy? Bardzo szybki chat, na który starczy na te 400 osób tańszy vps.

http://ahoj.io/nodejs-and-websocket-simple-chat-tutorial przykład chata w websocketah i node.js
http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php benchmark


It's All About the Game.
edytowany 1x, ostatnio: mr_jaro
bus45
Dzięki za info. Poczytam o websockets,ale z php też nie mogę całkowicie zrezygnować.
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)