Wamp - osnove i prvi koraci u kreiranju vašeg veb sajta

Submitted by Давид Филиповић on 16/02/2013 - 21:33

w

WAMP je softverski paket koji  predstavlja skraćenicu od Windows, Apache, MySQL, a P se može odnositi na PHP, Python ili Perl. Pored verzije za Windows, postoji i LAMP (Linux), MAMP (Macintosh) i WIMP, gde I označava IIS veb server. U ovom tekstu ću se držati WAMP-a, jer je on najzastupljeniji i najčešće se koristi od svih.

Dakle, čemu WAMP služi? Ukratko, WAMP vam omogućava da na svom računaru simulirate rad internet servera, i da za vaš sajt, prezentaciju ili šta god nameravate da okačite na internet proverite sve funkcionalnosti koje ste u njega implementirali, i uverite se da sve radi kako treba.

Objasnimo prvo osnovne delove WAMP-a. Već smo rekli da W označava Windows operativni sistem, dok se A odnosi na Apache, veb server koji omogućava da se na vašem računaru nalazi istovremeno i korisnik (browser) i lokalni server. MySQL je sistem za upravljanje relacionim bazama podataka, dok je PHP skriptni jezik koji služi za izradu dinamičng veb sadržaja, i koji generiše novu veb stranu svaki put kada korisnik prustipi serveru. Takođe, u paketu mogu biti uključeni i dodatni programi, kao što je phpMyAdmin, kreiran u PHP-u, koji između ostalog služi za kreiranje, modifikovanje i brisanje baza podataka, tabela, kolona i redova, koristeći SQL programski jezik.

Znam da će vam ovo možda delovati malo konfuzno ako se niste pre susretali sa ovim terminima, ali ne brinite, sad ide zabavniji deo, a do kraja ovog kratkog tutorijala uspećete i da sami kreirate svoj prvi sajt i videćete da to nije teško, a ume da bude veoma zabavno.

 

Instaliranje WAMP-a

Ono što je jako interesantno kod WAMP-a je da je kao i veliki broj dobrih i korisnih programa potpuno besplatan, i možete ga preuzeti na ovoj adresi. Nakon preuzimanja instalacionog fajla, pratite upustva za instalaciju, i zapamtite gde ste ga instalirali, jer ce nam kasnije trebati taj folder u koji se WAMP smešta. Po default podešavanjima lokacija je c:\wamp, mada vi naravno možete izabrati lokaciju za instaliranje po zelji. E sad, pošto smo završili i taj tehnički deo, pokrenite WAMP klikom na Start/All Programs/WampServer/Start WampServer ili duplim klikom na ikonicu ako ste je postavili na desktopu. Sačekajte par sekundi, da WAMP ikonica koja će se pojaviti u donjem desnom uglu promeni boju iz crvene u zelenu, i WAMP server je pokrenut.

Sledeće što treba uraditi je kliknuti levim klikom na ikonicu u donjem desnom uglu i ugledaćete sledeći prozor:

w

 

 

Kao što možete videti, u meniju se nalaze sve komponente WAMP-a koje smo gore opisali, a nas će za sad da interesuje samo Localhost, koji se nalazi na vrhu menija. Klikom na Localhost, u vašem pretraživaču bi trebalo da se pojavi nešto ovako:

1

 

(kliknite na fotografiju za uvećani prikaz)

 

Za sada se ovde nećemo mnogo zadržavati, nego se prebacujemo na samo kreiranje sajta i njegovo pokretanje preko WAMP-a. Ali pre toga, kratak uvod o tome kako se sajt pravi koristeći HTML. 

 

Ukratko o HTML-u

HTML je skraćenica od HyperText Markup Language i predstavlja standardizovani jezik koji koristi za opis veb stranica. Predlog za pravljenje HTML jezika, kao pojednostavljena verzija SGML jezika, je došla od strane nikoga drugog do Tim Berners Li-a, čoveka koji je saslužan za internet kakvog ga danas poznajemo. Prvi put u javnosti se spominje još 1991. godine, dok je prva zvanična verzija HTML 2.0 izašla 1995. godine. Poslednja verzija koja je zvanično u upotrebi je HTML 4.01 a nju održava Konzorcijum za veb (W3C, World Wide Web Consortium) čiji je direktor Tim Berners lično.

HTML jezik se sastoji od elemenata sastavljenih od tagova, kao što su naslovi, paragrafi, citati i tako dalje. U principu HTML se sastoji iz dva dela, onog koji opisuje to kako će veb strana izgledati, i drugi koji predstavlja sadržaj te strane. Većina tagova počinje sa početnim tagom, npr. <html> i krajnjim tagom </html>. Svi tagovi se smeštaju u ivičaste zagrade, < >, sa tim što se u krajni tag ubacuje i simbol sleš, /, koji označava kraj elementa. U principu, svrha veb pretraživača je da pročita HTML dokument, i da to prikaže korisniku. Sam pretraživač ne prikazuje tagove, nego ih samo interpretira a prikazuje korisniku ono što se nalazi između tagova.

Svaki HTML dokumenat se kao što sam već pomenuo sastoji iz dva dela, i to onog koji opisuje HTML dokument i koji se smešta između <head> i </head> tagova, i dela koji predstavlja sadržaj dokumenta a koji se smešta između <body> i </body> tagova. Unutar <head> taga imamo i tagove <title> i </title> između koji se stavlja naslov sajta. I na kraju, svaki HTML dokument mora da počne i da se završi sa <html> i </html> tagovima. Sve će ovo biti jasnije kada pogledamo sledeći primer, u kome su sadržana 4 najosnovnija taga u HTML dokumentu:

<html>

<head>

<title>Moj prvi sajt</title>

</head>

<body>

<h1>Naziv paragrafa</h1>

<p>Ovo je jedan pragraf</p>

</body>

</html>

 

Kao što vidimo na primeru, između <html> i </html> tagova se nalazi ceo HTML dokument, između <head> i </head> se nalazi naslov dokumenta, dok se između <body> i </body> nalazi sadržaj našeg sajta. Tag <h1> služi za naslov u okviru <body> dela, i može imati vrednosti od h1 do h6 (što je broj veći, to je naslov manji). Oznaka <p> služi za obeležavanje jednog paragrafa, tj. pasusa u okviru našeg HTML dokumenta. Još neki od najosnovnijih tagovu u HTML-u su:

 

<!-- Komentar --> je oznaka za komentar, ovo se neće prikazati na sajtu, već služi samo kao beleška onoga ko piše kod, a može biti korisno pri objašnjavanju delova koda u slučaju da na jednom sajtu radi više ljudi.

 

<br> predstavlja prosti tag, što znači da za njega ne postoji krajnji tag oblika </br>. Služi za prebacivanje teksta u novi red (eng. break line).

 

<ul>, </ul> je oznaka za ulančanu listu, u kojoj se nalaze elementi liste, npr:

 

<ul>

<li> Prvi element liste </li>

<li> Drugi element liste </li>

<li> Treći element liste </li>

</ul>

 

<table>, </table> je tag koji se koristi za kreiranje tabela u dokumentu. Primer koji je naveden pravi tabelu koja ima 2 reda, i 2 kolone:

 

<table>

  <tr>

       <td>Vrednost 1. reda, 1. kolone  </td>

        <td> Vrednost 1. reda, 2. kolone  </td>

   </tr>

   <tr>

        <td> Vrednost 2. reda, 1. kolone  </td>

        <td> Vrednost 2. reda, 2. kolone  </td>

   </tr>

</table>

 

1. red, 1. kolona

1. red, 2. kolona

2. red, 1. kolona

2. red, 2.kolona

 

<a href=“”>, </a> je tag koji se koristi za linkovanje, a između znaka navoda se stavlja adresa sajta na koji link vodi, npr:


<a href=“https://www.google.rs/”> Idi na Google </a>

 

 

Tagovi za formatiranje teksta:

 

<b>podebljana slova</b>

 

<i>iskošena, kurziv slova</i>

 

<u>podvučen tekst</u>

 

<del>precrtana slova</del>

 

<big>velika slova</big>

 

<small>mala slova</small>

 

<sup>gornji indeks</sup>

 

<sub>donji indeks</sub>

 

 

Sada, pošto smo prešli najosnovnije stvari u HTML-u, možemo da pređemo na konkretnu primenu svega naučenog. Dakle, sledeće što treba uraditi je da odete u folder www, koji se nalazi u wamp folderu, a koji se pojavio prilikom instaliranja WAMP-a. Po default-u, ta putanja bi bila c:\wamp\www, ali ukoliko ste WAMP instalirali u nekom drugom folderu, samo treba da se prisetite gde se on nalazi. Drugi, lakši način, je da kliknete levim klikom na ikonicu WAMP-a u donjem desnom uglu, i da kliknete na www directory, kao što je pokazano na slici ispod:

2

 

Nakon što kliknete na www directory, otvoriće vam se folder www u okviru foldera wamp i u njemu treba da napravite novi folder proizvoljnog naziva, na primer Moj prvi sajt. Zatim, otvorite bilo koji tekstualni editor, na primer notepad, notepad ++,[1] i kopirajte u njega sledeći HTML tekst, koji je malo modifikovanija verzija primera kojeg smo koristili ranije:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Moj prvi sajt</title>

</head>

<body>

<CENTER><h1>Dobrodosli na moj sajt</h1>

<br><!-- Ovde ce da bude prazan red; inace, ovo je komentar, i on se nece videti na sajtu -->

<br>

<p>Ovo je jedan pragraf</p>

<i>Ovaj tekst je napisan kurzivom, </i><b>a ovaj boldom.</b>

<h3>Ovo je tekst srednje velicine, </h3>

<u>a ovo je podvuceni tekst.</u>

<br>

<p>Na kraju, ubacimo i jedan link</p>

<a href="http://www.youtube.com/">Ovaj link vodi na You Tube</a>

</body>

</html>

 

Novo u ovom dokumentu je <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> i ova linija govori vašem pretraživaču da je reč o HTML 4.01 standardu,  i poželjno je da stoji na počektu svakog vašeg HTML dokumenta. Tag <CENTER> poravnjava ceo tekst sajta na sredinu.

Nakon što kopirate ceo kod u tekstualni editor po izboru, sačuvajte ga u vašem vašem folderu kojeg ste upravo kreirali (koji se nalazi unutar www foldera; u mom slučaju to je folder Moj prvi sajt), i nazovite ga index.html. Zatim, ukucajte u adresnu liniju (addres bar) vašeg pretraživača localhost, ili kliknite na ikonicu WAMP-a i izaberite Localhost, kao što je objašnjeno ranije u tekstu. Sada, trebalo bi da dobijete ovako nešto:

3

 

(kliknite na fotografiju za uvećani prikaz)

 

Kliknite na ikonicu Moj prvi sajt koja se nalazi ispod naslova Your Projects, i ako ste sve lepo uradili, trebalo bi da vam se u vašem pretraživaču otvori sajt, koji izgleda ovako: 

4

 

(kliknite na fotografiju za uvećani prikaz)

Ta da, upravo ste kreirali vaš prvi sajt, za koji znam da nije ništa posebno, ali je za početak sasvim dovoljan. Ovo je naravno bio samo kratak uvid u ono što WAMP i HTML predstavljaju, i nadam se da sam ovim tekstom uspeo da vas zaintrigriram da nastavite dalje da se bavite sa dizajniranjem i kreiranjem sajtova, a sve pomoću besplatnih progaram koje možete naći na internetu.

Naravno, za ozbiljniji rad na sajtu potrebno je dobro proučiti HTML tagove, njihove funkcije i način implementacije, zatim rad sa css stilovima, kreiranje dinamičkih veb strana pomoću php-a, pravljenje baze koristeći phpMyAdmin, a za sve to postoji gomila odličnih sajtova, na primer w3schools, na kome se nalazi velika baza tutorijala za kreiranje sajtova i rad sa HTML-om. Što se tiče programa, među najpoznatijim je Dreamweaver, koji donosi niz olakšica za rad, kao što je npr. uporedo kucanje koda i posmatranje promena koje se dešavaju na sajtu, zatim, za svaki novi fajl koji se kreira već su implementirani osnovni tagovi u njemu itd. ali mana mu je ne baš mala cena, tako da to odvlači potencijalne korisnike. S druge strane, postoje i besplatni programi za kreiranje veb strana, kao što je Kompozer, ali njihova mana je da često „baguju“ i da nisu veoma pouzdani, mada se i sa njima mogu realizovati dobri sajtovi, uz malo više strpljenja. Na kraju, uvek možete da se vratite starom dobrom notepadu i u njemu realizujete sajt. Tako da, u zavisnosti od afiniteta, ostaje vam još samo da se odlučite između programa, i da polako zagazite u dizajnerske vode.

 

 

Napomena: 
Nijedan deo materijala ne sme biti reprodukovan bez prethodnog odobrenja autora ili redakcije portala. Nećemo objavljivati uvredljive, nepristojne i netolerantne komentare.
Podeli: 

Comments

Marina's picture
Submitted by Marina on 19/06/2013 - 18:46
Odličan tekst. Samo ću dodati to, da za rad u Dreamweaver-u treba dobro poznavati HTML ,CSS i ostalo. Na primer, za kontakt - formu na sajtu rađenom u Dremweaveru- potrebno je znati PHP. Isto tako, krajnji korisnik neće umeti sam da ažurira svoj sajt. Hoće, ako mu se uradi mali CMS za postojeći sajt, koji će mu neki od kolega uraditi za ne baš "male pare". :)