7/2-2014 Guide til at lave din egen hjemmeside Maria, Mads, Morten Sebastian og Marc Kommunikation/IT 14
Indhold Opsætning af webserver... 2 Secure Shell - PuTTY... 2 Ændring af kodeord... 3 Installation af Apache med PHP... 4 Installation af MySQL... 5 Installering af FTP server... 6 Ændring af standard-sti for FTP serveren... 7 Installering af phpmyadmin... 9 Opsummering... 10 Opsætning af vores HTML... 11 Målgruppen... 12 Farver... 12 Layout... 12 Side 1 af 12
Opsætning af webserver Til opsætning af webserveren har vi brugt en Raspberry Pi med operativsystemet NOOBS installeret. Secure Shell - PuTTY Kobl din Raspberry Pi op til et ethernet kabel (medmindre du bruger Wi-Pi eller anden Wifiadapter), strømforsyning, tastatur og en skærm. Når din RPi har startet op, logger du ind. Standard login-oplysninger er: Username: Password: Pi Raspberry Du skal ikke tage dig af at du ikke kan se det når du taster kodeordet, bare fortsæt. Når du er inde skriver du bare ifconfig uden. Aflæs RPi ens internetprotokol-adresse (IP) ud for inet addr: formen burde være noget i stil med xxx.xxx.x.xx, hvor x er tal. Skriv tallene ned. Du kan nu trække skærmstikket fra RPi en. OBS! Du skal aflæse adressen på ny, hvis du genstarter RPi en. Når det er gjort, logger du på din Windows eller IOS computer. Når du er klar, skal du hente en SSH-software der hedder PuTTY på følgende link: http://www.chiark.greenend.org.uk/~sgtat ham/putty/download.html Når du har PuTTY (kræver ingen installation) kører du bare filen. Det meste er som det skal være, så det eneste du skal gøre er at skrive IP en ind (du skrev den ned før), og ændre port -feltet til 22, hvis det ikke allerede er det. Når du har indtastet de nødvendige oplysninger, klikker du bare på Open. Nu har du så det man kalder remote access til din RPi. Med andre ord kan du fjernstyre dens terminalsystem. Hvis du for en advarselsmeddelelse skal du bare trykke ja, yes, fortsæt eller andet der lyder positivt. Du logger ind på din RPi gennem din SSH-session, med de samme login-oplysninger som du brugte tidligere. Side 2 af 12
Ændring af kodeord Mens vi er i vores SSH-session (PuTTY) skriver vi kommandoen: sudo i herefter: passwd pi Herefter skriver vi det kodeord vi gerne vil bruge fremover. Eks: RozenQuest Og så skal vi skrive det en til gang for at bekræfte det: RozenQuest Side 3 af 12
Installation af Apache med PHP For at installere Apache lægger vi ud med at skrive: sudo apt-get update Hvis du får en fejlkode prøver du bare igen. Det næste vi gør er egentlige bare at hente Apache og PHP. Skriv følgende: sudo apt-get apache2 php5 libapache2-mod-php5 Den spørger nok om du vil fortsætte. I så fald trykker y (y = yes = ja) og derefter enter. Det tager nok et lille stykke tid at hente det hele, så du kan roligt hente en ny kop kaffe. Når du er færdig har du forhåbentligt fået en fejlkode. For at fikse det har du nok lyst til at skrive: Herefter: sudo groupadd www-data sudo usermod g www-data www-data Du burde nu kunne finde standardindekset (en html-side) hvis du navigerer til RPi ens IP i din browser. Nu ændrer vi konfigurationen af apache. Skriv: sudo nano/etc/apache2/sites-enabled/000-default Der popper nu en masse tekst op. Find det afsnit der hedder </Directory> og naviger (med piltasterne) op til det sted i afsnittet der hedder: Og ændr det til Allowoverride None Allowoverride ALL Tryk nu ctrl + x og derefter y (yes) for at gemme ændringer i Apache-konfigurationen. Skriv herefter: sudo service apache2 restart Dette genstarter apache og anvender dermed ændringerne. Side 4 af 12
Installation af MySQL Fortsæt i sessionen, eller start en ny hvis du har lukket den (halvleg?). Installer MySQL (kort sagt er det en database) ved at skrive følgende kommando: sudo apt-get install mysql-server mysql-client php5-mysql Tryk y og enter. Det tager nok et stykke tid at hente. Når den er færdig vil den bede dig om at indtaste et password for MySQL s root -bruger. Man kan eksempelvist bruge: og bekræfte ved at indtaste det igen: tryk enter vent lidt og du er færdig. mrsisgod mrsisgod Side 5 af 12
Installering af FTP server Vi installerer nu en FTP server (file transfer protocol server), så vi kan overføre filer fra vores almindelige computer til vores web server (RPi en). Vi benytter vsftpd, men inden vi installerer det vil vi gerne lige lov til at lægge ting ind i vores webdata (www-mappen). Skriv følgende: Nu installerer vi så vores FTP: sudo chown R pi /var/www sudo apt-get vsftpd Nu skal vi bare lige ændre et par småting i vsftpd s konfiguration. Skriv: sudo nano /etc/vsftpd.conf Dette burde bringe en side frem med noget tekst hvoraf de fleste linjer starter med #. Naviger (med piltasterne) hen til linjen: anonymous_enable=yes og omskriv den til: anonymous_enable=no Naviger nu til: #local_enable=yes og omskriv den til: local_enable=yes Og til sidst skal du navigere til: #write_enavle=yes og omskrive den til: write_enable=yes (hint: på de 2 sidste skal du bare slette # ). Inden vi er helt færdig skriver vi lige en ny linje i vsftpd-konfigurationen. Naviger til nederst på dokumentet og skriv: Force_dot_files=YES Tryk ctrl + x efterfulgt af y. Tryk enter. Genstart nu vsftpd. Skriv: sudo servce vsftpd restart Ændringerne er nu taget i brug, og risikerer ikke at blive overskrevet af programmet selv. Side 6 af 12
Ændring af standard-sti for FTP serveren Som det er lige nu vil du se trætoppen af filsystemet når du logger ind på FTP en. For at ændre dette låner vi lidt root-magi. Skriv: efterfulgt af: sudo i passwd root Indtast et password for root -brugeren. Dette er kun midlertidigt. Eks: Bekræft det: alice alice Nu lukker vi den SSH session vi er i og starter en ny (lukker PuTTY). IP en og porten er den samme. Log ind med root -brugeren. Username: Password: root alice OBS! Passwordet er det du selv skrev. Skriv kun alice hvis du har fulgt guiden 100 %. Når du så er inde skal du egentlig bare skrive: Usermod d /var/www pi Så brugeren pi (som du hele tiden har brugt) automatisk bliver henvist til www -mappen når du logger ind på FTP-klienten. Side 7 af 12
Luk PuTTY igen og start en ny session op hvor du logger ind med: Username: Password: (Det kodeord du selv valgte. Vi brugte RozenQuest ) Skriv: Herefter: pi RozenQuest sudo i usermod L root og til sidst det midlertidige kodeord du selv satte for root -brugeren. Vi brugte alice. Nu er FTP serveren sådan set klar. alice Du kan forbinde til den gennem en FTP klient med følgende oplysninger: Hostname: RPi ens IP adresse (husk den ændrer sig) Username: pi Password: det kodeord du selv valgte. Vi brugte RozenQuest Port: 21 (Hint: det er de samme oplysninger som du bruger når du vil starte en SSH session med PuTTY, bortset fra at vi i FTP en bruger port 21 frem for 22). Et godt eksempel på en FTP klient er FileZilla, som kan downloades her: https://filezilla-project.org/download.php Interfacet burde være nogenlunde intuitivt hvis man har lidt erfaring med computere. En brugervejledning kan findes på: https://wiki.filezilla-project.org/filezilla_client_tutorial_(en) Bare husk at du skal bruge de loginoplysninger, som står angivet ovenfor. Side 8 af 12
Installering af phpmyadmin Til at slutte af vil vi gerne installere phpmyadmin, som er et PHP-script som kan bruges til at se og redigere MySQL databaser, som vi også selv installerede på serveren tidligere. Det første vi vil gøre er at downloade phpmyadmin fra: http://www.phpmyadmin.net/ Når du har hentet zip-filen skal du pakke den ud til en placering du kender. Ved at højreklikke på den og trykke Pak ud eller Extract. (Hvis du ikke kan skal du hente og installere WinRAR: http://www.rarlab.com/download.ht m) Når du har pakket filen ud skal du åbne din FTP klient (vi foreslog FileZilla), hvis du ikke har hentet den bør du gøre det nu. Når du har åbnet din FTP klient forbinder du til din RPi, med de oplysninger du fik på forrige side (side 7). Eftersom vi har bedt den om det burde din RPi allerede være navigeret til www -mappen, så du skal bare finde det sted på din PC, hvor du lagde phpmyadmin. Når du har fundet phpmyadmin -mappen skal du bare højreklikke og trykke på upload, og så burde den selv uploade mappen til www -mappen. Nu har du faktisk installeret phpmyadmin på din Raspberry Pi Web Server. På din webbrowser kan du nu logge ind på phpmyadmin, ved at navigere til: xxx.xxx.x.xx/admin Hvor x erne naturligvis repræsenterer din RPi s IP adresse. Du logger ind med de loginoplysninger som du fastsatte for din MySQL root -bruger. Username: root Password: din egen. Vores var mrsisgod Side 9 af 12
Opsummering Du har nu alt hvad du skal bruge for at begynde på din egen webserver, og måske endda mere end du overhovedet ved kan bruges hvis du er ny til det. Din webserver inkluderer: - SSH - Apache web server - PHP5 - MySQL server - VSFTP FTP server - phpmyadmin Hvis du planlægger at ligge vigtige filer på serveren, eller generelt bare gøre den mere offentlig anbefales det stærkt at du installerer en firewall på din server. Som altid, hvis du har brug for nogen som helst information står internettet altid til rådighed. Undervurder aldrig et Linuxorienteret forum. Held og lykke med din nye webserver! Side 10 af 12
Opsætning af vores HTML Vi fandt en template på www.templateworld.com, og rettede og ændrede derefter i HTML koden, så vi fik det som vi selv ville have det. Vi valge at hente et template, da endnu ikke er gode nok til selv at lave layoutet så fint som vi gerne ville have det, så i stedet satte vi os ind i hvordan dette færdiglavede layout var sat op. Dette kan vi jo også bruge i fremtiden, da vi så nu har et bedre indblik i hvordan fede layout hænger sammen, og hvordan og hvilke kommandoer man kan bruge til at lave dem. I billedet ovenover kan du se hvordan vores kode til forsiden ser ud, du vil også kunne se at flere af linksne refererer til about.html, service.html og så videre, men alligevel hedder Info eller Bestil. Dette er grundet at vi valgte ikke at ændre i filerne, men i stedet bare ændre teksten som man ser på hjemmesiden til dansk. Alle kommandoer er jo også lavet til at skulle skrives på engelsk, og derfor giver det så også bedre sammenhæng når man kigger i HTML koderne. På den originale forside var der et flot java-script, hvor den selv skiftede billeder hver 5. sekund, dette har vi dog fjernet, og i stedet indsat et fast billede som man kan se. Vi valgte at fjerne javascriptet da det var for avanceret at rode med, og vi ikke har de rigtige programmer til at ændre i koderne til det. Vi brugte derfor koden: Denne kode bruges til at indsætte billeder, src= images/innocouch forside.jpg referere til vores billede, så hjemmesiden ved hvor den skal gå hen for at finde det billede vi vil have den til at indsætte. Width og height bruges til at justere størrelsen på billedet, så det altså passer bedst muligt ind. Side 11 af 12
Måden vi har lavet vores opsætningsside på, er at vi har lavet en kopi af vores info side, og derefter sat et link ind til den i bunden, hvor vi så har skiftet navn på info, og ændret den så den nu er klar og kan bruges til opsætning. Koden vi har brugt til at linke til opsætningssiden ser ud som følgende: Denne kode bruger vi til at lave vores download brochure -knap samt download guide -knap. Id identificere hvilken slags det er, her er skrevet downloadlink, da vores knap skal kunne downloade vores brochure og guide. Href er vores henførelses kode, som at fortælle hvilken fil vi skal bruge, i dette tilfælde vores.pdf er. application/octet stream er en applikation som gør at man kan hente en fil. Her igen fortæller vi koden, hvilken fil der skal hentes og til sidst hvilken class det skal være, her en brochure. Målgruppen Målgruppen for hjemmesiden er unge midt i 20 erne. Målgruppen er typisk nået til det punkt i livet hvor de skal ud og finde et sted at bo, og dermed skal købe en sofa. I og med sofaen er kombineret 3 i 1, nemlig sofa, køleboks og højtaler, sparer man også plads i lejligheden eller boligen. Derfor passer sofaen perfekt til den målgruppe, da studerene ofte bor i mindre lejligheder med mangel på plads. Vores hjemmeside design er meget stilrent, neutralt og flydende. Farver Farverne på hjemmesiden er valgt med omhug. Farven blå, giver typisk følelsen af ro, samt fysisk og mentalt afslapning og koncentration, dermed er den rigtig god til en vejs kommunikation. Hvid og ligeså lyseblå giver en god kontrast i de mørkefarver, som grå. Farven grå er elegant, nedtonet og beroligende. Grå er stilet og dermed skaber forventninger. Grå er ligeledes en metallisk farve, som der afspejler teknologi. Teknologi afspejler ungdom og derfor mener vi at hjemmeside vil tiltale unge mænd. Layout Layoutet er holdt simpelt og med en rød tråd igennem de forskellige sider. Dette er for at afspejle det stilrene og moderne i sofaen. Ligeledes er det også med tilt at hjemmesiden appellerer mere til målgruppen. Målgruppen er som sagt mænd mellem 20 og 30 år, typisk mænd i det blå segment af Minerva-modellen. http://notatwiki.dk/index.php?title=minerva-modellen. Side 12 af 12