Php - vi lager web med nyheter, telleapparat og gjestebok!

[Gjest dorian]

Ja, du leste riktig!

Php kan faktisk brukes til noe, og er ikke laget bare for å se vanskelig ut

Men før vi begynner å bake må vi ha alle ingrediensene, så her er listen:

Du trenger:

- en webserver som støtter php (f.eks. start)

- et html-program som ikke tar kvelden når siden heter php (f.eks. dreamweaver eller homesite eller hydraphp. Du kan gjerne ha en grafisk editor først, siden vi skal lage ren html til å bruke som mal.

- et ftp-program som støtter filrettigheter (chmod)

Skal komme tilbake til dette siste, men her er noen av programmene du kan bruke

Hydraphp - phpeditor med fargekoding

http://boomdesign.no/files/exe/hydraphp.exe

Smartftp - en ftpklient som støtter ovenfornevnte:

http://boomdesign.no/files/exe/SFTPSetup.exe

2020 - et lett grafikkprogram som er gratis

http://boomdesign.no/files/exe/2020s.zip

For å finne ut om serveren din støtter php:

Legg dette inn i en fil og lagre som f.eks. test.php:

<?PHP

phpinfo();

?>

Last den opp til serveren og gå til filen i browseren din. Hvis den skriver ut en masse greier, støtter serveren php.

OK.

Slik lager vi en web:

Vi begynner med designet, og der står man jo fritt. Jeg kommer allikevel til å legge et par bindinger: maks bredde på webben og bredde på innholdet som er interaktivt.

Dette er fordi det er lettere å designe når man vet hvor ting begynner og slutter :blunke:

Når du skal publisere stoff over internett er det viktig at ikke andre kan komme inn å kødde med teksten din. Den letteste måten å unngå dette på er å bruke databaser, men det er det ikke så mang som har tilgang på, så vi bruker tekstfiler i stedet.

For å gjøre disse filene utilgjengelig for andre, legger vi dem utenfor/u]

webkatalogen. Siden vi skal hente ut/putte inn tekst i disse tekstfilene med script, er det viktig at dere (alle ) lager samme struktur på disse katalogene som ligger utenfor.

Men, det er ikke vanskelig!

Når du logger deg inn med ftp-programmet kommer du til en katalog. Inni den katalogen ligger en katalog som er webkatalogen (den heter typisk public_html eller noe lignende). Dette er webkatalogen din, og alt som ligger inni denne kan sees av alle.

Derfor legger vi katalogene med tekstfilene utenfor denne.

Vi skal også legge inn bilder via web, men der legger vi dem inni webkatalogen - hvis ikke måtte vi lage et eget php-script for å vise frem bildene (og det gidder vi ikke, gidder vi vel?? ).

Jeg har jo allerede en side liggende på start, så i mitt tilfelle kalles webkatalogen for root (og den ligger heller ikke utenfor webkatalogen, men dette er for eksemplets skyld).

Slik ser katalogstrukturen ut der du logger inn:

Hvis vi går inn i webkatalogen ( i dette tillfellet root) ser strukturen slik ut:

Jadda, lett som fot i hose

Fylgj med i neste bolken folkens! Dette vert spanande!

dorian

[Gjest Terje]

Kjempebra, driver lite med PhP selv.

Vet du om et gratis program/addon for automatisk skalering av bilder?

[Gjest doriansen]

Erm.. automatisk skalering av bilder som i "mange bilder på en gang"?

Hvis du bare skal skalere mange bilder ned til en bestemt størrelse kan du bruke Photoshop, med Automate på fil-menyen. Der tar du opp en action (macro) med et test-bilde, og siden kan du kjøre denne på hele kataloger med bilder.

Bruker denne mye når jeg skal legge ut store mengder bilder på internett

dorian - japp, det er meg som tar alle de fæle nachspiel-bildene

[Gjest dr. ian]

Litt design sånn utpå onsdagen...tam-di-dam...

Jeg begynner som regel et design i Photoshop, med et bilde som jeg lager i ca. 760px bredde og ca. 600-800px høyde.

Sånn:

http://boomdesign.no/files/px/des_ps1.jpg

Så er det egentlig bare å fylle inn innhold. Det eneste som er fastsatt er totalbredden (760px) samt bredden på publiseringsscriptet/nyhetsscriptet, som er 340px.

Siden jeg er veeeeldig glad i bilder av meg selv lager jeg først et lite "hode" på siden, med bilde øverst til venstre og fortsetter med masse smileys:

http://boomdesign.no/files/px/des_ps2.jpg

Det viktigste her er jo ikke designet, men å få plassert dette nyhetsscriptet inni en html-side.

Så slenger jeg inn noen linker og en linje:

http://boomdesign.no/files/px/des_ps3.jpg

Så vart jeg litt usikker på om den blå gusje-greia øverst ikke ble for dominerende, så jeg gjorde den grå. I tillegg har jeg laget linker, holdt av plass til nyheter/innhold, samt laget en liten boks til høyre som skal inneholde telleapparat og link til gjestebok, og litt kontaktinfo om meg:

http://boomdesign.no/files/px/des_ps4.jpg

Nå begynner det å bli nok ferdig til å lage html av (synes jeg - det kan jo hende at du vil lage det enda mere detaljert før du lager html av det), og begynner å klippe opp bilde-filen slik at jeg kan hente ut de tingene jeg trenger. I mitt tilfelle (siden dette er php-kyrs og ikke design-kyrs), bruker jeg kun den øverste delen (hodet) på bildet, og lagrer det som en jpg-fil.

http://boomdesign.no/files/px/des_ps5.jpg

Som oftest klipper vi jo opp denne i mindre biter som vi legger i en tabell, men for enkelthets skyld skal jeg bare bruke hele bildet, som er 760px bredt og 124px høyt. Dette skal jo komme øverst på hver side, og jeg legger det inn i en include (sammen med toppen av html-siden) som jeg kaller top.php.

For å lage html bruker jeg nå dreamweaver. Først må vi ha en tabell med en rute. Denne skal kun ha som formål å inneholde hele websiden. Siden bakgrunnsfargen på siden er grå, gir denne tabellen oss anledning til å spesifisere en annen bakgrunnsfarge akkurat inni denne tabellen.

Slik laget jeg tabellen:

http://boomdesign.no/files/px/des_dw1.jpg

Når den tabellen er vel på plass merker jeg den av, og velger hvit som bakgrunn:

http://boomdesign.no/files/px/des_dw2.jpg

Nå har vi tatt hånd om bakgrunnsfargen, og alt vi legger inn i denne webben skal ligge inni denne første tabellen, slik at det blir liggende oppå den hvite bakgrunnen.

Vi legger inn en tabell til det fine bildet som skal være toppen på siden, og legger bildet inni den:

http://boomdesign.no/files/px/des_dw3.jpg

For enkelthets skyld har jeg laget en kant rundt tabellen (border="1") - denne fjerner vi senere, men er der for å vise at det er en tabell rundt bildet.

Så må vi lage en tabell der selve innholdet skal ligge. Siden vi designet denne webben slik vi gjorde, vil vi da legge innholdet omtrent slik:

meny ---- nyheter/innhold ---- kontaktinfo/statistikk/gjestebok-link

Dette deler greia i tre bolker, sant? Men for å få det pent, vil vi jo gjerne ha et fast mellomrom mellom hver bolk, samt mellomrom på hver side. Det er flere måter å få til dette på, men jeg pleier å lage en tabell der hver bolk får sin egen rute, og alle mellomrom sin rute. Dette gir en tabell med 7 ruter:

http://boomdesign.no/files/px/des_dw4.jpg

Til slutt lager jeg en tabell nederst som skal inneholde en liten copyright og navnet mitt, og andre ting det er naturlig å ha nederst på en side:

http://boomdesign.no/files/px/des_dw5.jpg

That's it!

Eller, hehe, den ser jo ikke så ultrafantastisk ut ennå, men resten av designet gjør vi med styles. Og da går vi inn i koden, og er ferdige med dreamweaver.

dorian