Segítség kellene html5 és css3 chet rendszer kialakításában?

A HTML(5) - CSS(3) csak a jéghegy csúcsa.

Kell hozzá JavaScript, szerver oldali program nyelv, adatbázis...

Ezekből mi az amit használtál már, és tudod is!?

Aztán jönnek majd az eljárások meghívása különféle eseményekre, azt WebSocket vagy fapadosabb megoldásként AJAX -al lekommunikálni a szerverrel...

Neked nem segítség kellene (mert fingod nincs róla), hanem egy fejlesztő, aki megcsinálja.

Összetettségtől függően 2-3 millió forinttól indul a projekt, 10-20 millióig.

Na csak, hogy legyen egy jó napod.

Ezt te soha nem fogod tudni leprogramozni, de nincs veszve semmi. A megoldás: OXWALL! Mindent tud amit szertnél, sőt még többet is, és ingyen is van.

Sok sikert!

Nem kell feltalálni a spanyolviaszt.

[link]

Szia! Egy kicsit megpróbálom körbejárni a témát neked, így meg fogod érteni.

Ahogy nézem, amit Te akarsz, az egy közösségi média oldal, kb olyan F@ceBooK szerű.

Én több mint egy éve kezdtem a webprogramozást, és csak most, egy év után mondhatom el, hogy van rálátásom a dologra, és főleg a tapasztalatok után mondhatom el, hogy amit szeretnél megvalósítani, az NAGY munka.

Amely hibába a legtöbben beleesnek, az az, hogy azt hiszik, hogy egy "kisebb" weboldal elkészítése (úgy, hogy nem használsz előre megírt sémákat, mint a wordpress, joomla, stb), nem nagy munka, és nem időigényes, könnyen megy.

Nos, egy 20 éve programozó embernek talán már könnyen megy, de Neked (feltehetően 0 tapasztalattal), nem fog könnyen menni.

Én, csak most, egy év után tudom kategorizálni, hogy milyen kívánt eredményt, hogy lehet elérni, milyen webprogramozási nyelvvel, és hogyan. Ebbe most írok egy kis betekintőt, de előtte leszögezem, hogy noha vannak módszerek, melyeket érdemes használni, ettől függetlenül mindig vannak, és lesznek emberek, akik máshogy csinálják, és soha nem fogod egyöntetűen azt hallani, hogy "igen, azt csak úgy lehetett megoldani".

Elöljáróban, hogy megértsd: minden webprogramozási "nyelvnek" vannak előnyei, és hátrányai. Vannak "hatások, célok", amiket el lehet vele érni, és van, amit nem lehet elérni, vagy csak korlátozottabban. Minden "nyelvnek" megvan, hogy mire érdemes használni, és mire nem, vagy mire nem is lehet.

Először is: milyen webprogramozási nyelvek vannak? A programozási nyelvek listája nagyon hosszú, mert a legismertebbeken kívül sok más, kevésbé ismert is létezik.

A legismertebbek: HTML, PHP, CSS, Javascript, Ajax, JQuery, SQL - a teljesség igénye nélkül.

Mit mire érdemes használni? Mit mire lehet használni?

Ez már fogósabb kérdés, és főleg tapasztalati úton lehet megtudni, de igyekszek betekintőt engedni.

A webprogramozás alapnyelve - ha lehet így mondani - a HTML. Ez a programnyelvet - véleményem szerint - tényleg csak a weboldal szerkezeti felépítésére érdemes, szükséges használni, pl.: a böngészőfülön megjelenő cím megadásához, a weboldal néhány technikai beállításához, pl: hogy milyen karakterkészlet legyen használva, vagy a weboldal elrendezésének előre beállításához, táblázatos elrendezés létrehozásához, stb. Ez a nyelv igazából - ha csak ezt használod - valóban csak arra alkalmas, hogy szöveget, képet, videót, linkeket jelenítsd meg, teljesen alap szinten, kb. mondjuk mint egy sima könyv szövege. Megjelenés is állítható be egy kevés: pl.: betűszín, háttérszín, méret, stb, de ez már közelít a másik programnyelvhez, a CSS-hez.

A CSS, Cascading Style Sheets, már kifejezetten a megjelenési stílusok nyelve. A CSS3 már animálást, és egyéb nyalánkságokat is tud, beúszó képeket, eltűnő szövegeket, stb.

Ez a nyelv csak erre való, semmi egyébre, de nem is kell, hogy másra legyen használva.

Ha ezzel a két nyelvvel építesz egy weboldalt, akkor az még (néhány linkre kattintás lehetőségén kívül) nem fog működni. Ezekkel önmagukban nem lehet bejelentkező rendszert építeni, vagy hasonlót, semmi megosztás, vagy profilkép-beállítás. Eddig igazából a front-end oldalról néztük a dolgot.

Ahhoz, hogy egy weboldal "működjön", ahhoz meg kell csinálni a háttérben lefutó kódokat is, amelyek működtetik a kívánt módon. Ez a nehezebb feladat (szerintem).

Először is: minden weboldalnak, amely információkat tárol, kell egy adatbázis. A egyik leggyakoribb adatbázis rendeszer a MySQL, amelynek van egy többé-kevésbé grafikus felülete (de a munkát jelentősen megkönnyítő) felülete, a PhpMyAdmin. Ha bérelt tárhelyre töltöd fel a weboldaladat, akkor általában már biztosítanak - még az ingyenes tárhelyekhez is - sql adatbázist, melyhez kapsz hozzáférést.

Az SQL egy adatbázisrendszer. A PhpMyAdmin táblázatos formában jeleníti meg az adatokat, megkönnyítve a munkát.

Egy olyan oldal létrehozásához, amit leírtál, elengedhetetlen, hogy legyen egy adatbázis működtetve.

Amikor egy tag regisztrál, akkor a weboldal felületén beírt adatok (rendszerint technikai ellenőrzés után) ebbe a háttérben lévő - a felhasználó számára nem látható - adatbázisba kerül be.

Bejelentkezés során szintén ebből az adatbázisból kerül lekérésre minden adat, amit a felhasználó profiljára vonatkozik. A képek, posztok, beírt szövegek, stb, mind itt kerülnek feljegyzésre (noha a képet magát nem érdemes adatbázisba menteni, csak az elérési utat, hogy hova lett feltöltve a szerverre, melyik mappába, stb).

Erre, és ilyen adatbáisos feladatokra (is) van, a PHP nyelv.

A PHP nyelv már főleg a logikai rendszer kiépítésére való (szerintem), pl.: ha az adatbázisban nem lett profilkép mentve, és a weboldal lefuttatása során be kellene tölteni a profilképet, de az nincs, akkor más kód fusson le, és hogy milyen kép legyen helyette, stb. Ez a nyelv egyfajta rendszerező, a háttérben lefutó működés egyik alapnyelve. Ezzel is lehet html szerkezetet kiiratni, vagy szöveget, de ezek, és még sok más, csak plusz.

A másik fő dolog amire használni szokták, az a böngészőben létrejövő sütik (Cookie) kezelése.

Manapság már nem nagyon találsz olyan weboldalt - hacsak nem csupán egy kis szöveg, sima html alapon - ami nem használ sütiket, sőt, a sütik használatát már törvényben is szabályozzák, és a weboldalnak kötelező figyelmeztetést tartalmazni, amit biztos Te is jól ismersz: "Azzal, hogy folytatja a böngészést, beleegyezik a sütik használatába" - vagy valami hasonló.

A sütik adatok, melyek a böngészőben vannak tárolva, a böngészés idejére - rossz esetben ott is maradnak, ami biztonsági kockázat. Mivel a sütikben tárolt információk valójában FÁJLOK a gépen, érzékenyek lehetnek, pl.: felhasználónév + jelszó, ezért érdemes gyakran üríteni a sütiket a böngészőből, mert előfordulhat, hogy hozzáértő kezek hozzáférve ehhez, be tudnak lépni a profilodba, vagy netBank számládra, és pénzzel károsítanak meg. Ez csak egy példa.

A PHP tehát a háttárben való működésre való leginkább, valamint a weboldal és az adatbázisod közötti adatcsere lebonyolítására.

Önmagában ez már sokat dob a weboldal működésén, és a lehetőségek tárháza is kiszélesedik, de vannak korlátai. Elég megbízható programnyelvnek mondható.

Korlát például, hogy nem nagyon lehet valós idejű interakciókat végrehajtani a weboldalon: pl.: a "kattintok és megjelenik a lájkom a poszt alatt" már egy összetettebb, több programnyelv kombinálásából létrejövő eredmény.

A kezelőfelület működtetését már érdemesebb Javascript-tel csinálni.

A Javascript olyan lehetőségeket hordoz magában, amit simán HTML-lel vagy PHP-val nem feltétlenül lehet végrehajtani. Pl.: van egy kép az oldaladon, és kattintva elsötétedik a kép, és megjelenik a kép nagyban, egy - weboldaladon felugró kisablakban, és mellette a lájkok, és kommentek sora, mint a FaceB00k-on, ahhoz már elengedhetetlen a javascript, vagy jquery.

Ennél a nyelvnél is lehet logikai struktúrát kiépíteni, variánsokat (változókat) megadni, kezelni, de html tartalmakat létrehozni is, vagy stílust módosítani, de az adatbázissal való adatforgalom lebonyolítását nem lehet végrehajtani vele. Tehát más a prioritása.

Egy szemléletes példa: Tegyük fel, hogy ki van írva a weboldaladra, hogy "2+2 =", és azt akarjuk, hogy rákattintva megjelenjen mögötte az, hogy "4". Ez lehetséges PHP-vel is, meg lehetséges Javascripttel is. A NAGY KÜLÖNBSÉG, hogy php-vel csak úgy lehet ezt elérni, hogy közben ÚJRATÖLT az oldal, javasciprttel pedig nem kell, hogy újratöltsön az oldal. Gondolj bele, milyen lenne a faceb00k, ha minden Like gomb megnyomása után újratöltene...

De javascripttel lehet megjeleníteni egy létező html tartalmat is: pl.: már a html szerkezet kialakításánál csináltunk egy kockát, amit szürke kerettel bír, és kék a háttere. De megadtuk a stílus-beállításainál, hogy ne látszon alapból. A weboldalon felül van egy szöveg, hogy "katt ide a kocka megjelenítéséhez", és ha kattintunk, akkor a kocka (div) megjelenik újratöltés nélkül. Ezt úgy lehet elérni, hogy a szöveghez társítva van egy javascript kód, ami akkor fut le, ha kattint a felhasználó, és a kód maga módosítja a fentebb említett kocka láthatóságát a láthatatlanról láthatóra.

És ez csak egy apró példa.

Ami nagy előny manapság: tele van a net ingyenes leírásokkal, és felhasználható kódokkal.

Én, egy évvel ezelőtt egy y0utube-os tutoriallal kezdtem, amikor még fogalmam sem volt ezekről. A srác közzétett egy komplett kódot - persze nagyon alap, és azóta részben elévült - kódot, ami stílusbeállítások nélkül ugyan, de egy közösségi média oldal alapjainak a kódja. Úgy önmagában nem használható, stílust kell írni hozzá, és csak html és php az egész, de kiindulópontnak, hogy eljátsszon az ember a kóddal, arra kiváló.

Ezt itt találod:

https://www.youtube.com/watch?v=NG_FhztzoyU

Közben, ránézve az oldalra, látom, hogy van egy új sorozat:

https://www.youtube.com/watch?v=6ADiz3Dj_nQ

De van sok más érdekes videója is a srácnak.

A fenti link leírásában van a teljes kód letöltésének linkje is.

Haszons linkek még:

W3Schools - a fentebb írott programnyelvek kódjainak leírásai, az egyik legismertebb ingyenes oldal:

[link] (nem csak javascript kódok - nézd meg felül a menüt)

jsFiddle - programkódok online tesztelése:

[link]

StackOverflow - az egyik legismertebb netes fórum, amelyben kódokkal kapcsolatban kérhet segítséget az ember, és találhat komplett működő, vagy csak kicsit módosítandó kódot az ember:

[link]

(pl.: ha az ember google-zik valami kódra, mert nem jó, akkor is a leggyakrabban ezt az oldalt dobja ki, pl.: "php login wrong" - nézd meg a találatokat)

Hasznos lehet még egy jó szerkesztő program, az egyik leggyakoribb a NotePad++, amivel akár közvetlen kapcsolatot is lehet fenntartani a szervereddel, és úgy fejleszteni, hogy közvetlenül a weboldalad frissül a módosított kóddal. Ez a kis program azért is nagyon jó, mert megkönnyíti a kódok közötti böngészést, keresést, és már a kódok maguk is színrendszerrel vannak rendszerezve. Egy feltuningolt notepad. Sokan használják.

[link]

---

Remélem sikerült egy kicsit körbevezetni, rávilágítani a webprogramozás alapjaira, noha elismerem, ez még messze nem minden, és lehet hogy más jobban el tudta volna magyarázni. Azt még a végére azért leírom, hogy fontos, hogy tudd, hogy a programozás folyamata nem mindig úgy megy, ahogy "meg van írva", és előfordulhat, hogy olyan kód, ami másnak megy, neked nem fog. Soktényezős a dolog. Nagy a hibaszázalék, és sokszor leszel ideges, ha nem vagy nyugodt természet. Főleg az elején, amikor jönnek majd a hibakódok.

Tehát még ami fontos: a hibakezelés. Mert hiba mindig lesz programozás közben. Az egyik legalapabb fejlesztési módszer a debugging módszer, azaz csak akkor fejleszted tovább a weboldalad, ha az addigi hibák ki vannak javítva. Ha jön egy hiba kijavítod, és akkor folytatod. Ez viszont nem minden esetben könnyű, mert sokszor még hibakód sincs, vagy konkrét megnevezése a hibának. PHP esetében pl.: érdemes olyan logikai struktúrát kiépíteni, amely során folyamatosan nyomon tudod követni az eseményeket, és kiiratni először mindent, vagy logolni mindent.

Utoljára még hangsúlyozom: sok esetben ugyanazt a kívánt eredményt el lehet érni többféleképen is. Kiirathatod hogy "hello" html-el is, php-val is, javascripttel is, stb. De helyzetfüggő, hogy épp mit érdemes használni. Ez már valóban inkább a tapasztati szint.

---

Ha mégis úgy döntesz, hogy nem vágsz bele, akkor sem kell teljesen feladni. Manapság sok ingyenes tárhely van, ahol még weboldalt is kapsz készen, persze nem feltétlenül olyat, mint amilyet szeretnél, de ha pontosabb elképzeléseid vannak, akkor használhatsz (ez most hülyén fog hangzani) weboldal-készítő-weboldalt, azaz olyan előre elkészített sémát, mellyel grafikusan, lényegesen leegyszerűsítve saját weboldalt tervezhetsz, és készíthetsz, ilyen a Joomla, vagy a Drupal, vagy a Wordpress, stb.

A linkjeiket itt találod:

Wordpress: [link]

Joomla: [link]

Drupal: [link]

---

Annyit tudok még tanácsolni, hogy mielőtt egy komoly weboldal fejlesztésébe belevágnál, tájékozódj megfelelően. Nem kis munka, és ami a legfontosabb, hogy könnyen járhatsz úgy, hogy hetekig szenvedsz, mire elérsz valamit, amit szeretnél, pl.: építesz egy login rendszert, de később, hónapok mulva visszanézve, tapasztaltabban, azt fogod látni, hogy úgy rossz az egész, ahogy van, vagy hogy ha most csinálnád, akkor biztos, hogy máshogy csinálnád. Ne akarj egy komplett, komplex weboldalt azonnal elkészíteni, főleg ne 0 tudással, mert csak idegeskedés lesz a vége. Ezért jól gondold meg, mielőtt belekezdesz.

Tehát még egyszer: amit leírtam, ezek az alapok. Mindegyik programnyelvnek véges lehetőségei vannak, és véges számú alapkódok állnak rendelkezésre. A nagyobb munka az, hogy ezeket hogyan hozod össze, hogyan kombinálod.

Érdemes feljegyezni, hogy milyen szempontok fontosak neked a weboldalad szempontjából, pl.: jól nézzen ki, legyen biztonságos, milyen funkciói legyenek, stb.

A szerver-kliens oldal viszonyról is érdemes olvasgatni előtte.

Remélem sikerült kicsit betekinteni a webfejlesztésbe. Sok sikert a döntéshez!