Om Spilnyhed.dk
RSS Feeds
Lav en lille dynamisk hjemmeside
Halløj folkens, længe siden jeg har skrevet herinde.
Jeg kiggede lige forbi og så at lundahl (http://snyd.dk/forum/members/lundahl.html)er i gang med en guide (http://snyd.dk/forum/guides-walkthroughs/3210-lav-dit-eget-windows-program-del-1-a.html) til noget Visual Basic (http://en.wikipedia.org/wiki/Visual_Basic) (keep it up), og tænkte jeg også ville dele lidt viden med jer herinde, så jeg tæ
Halløj folkens, længe siden jeg har skrevet herinde.
Jeg kiggede lige forbi og så at lundahl (http://snyd.dk/forum/members/lundahl.html)er i gang med en guide (http://snyd.dk/forum/guides-walkthroughs/3210-lav-dit-eget-windows-program-del-1-a.html) til noget Visual Basic (http://en.wikipedia.org/wiki/Visual_Basic) (keep it up), og tænkte jeg også ville dele lidt viden med jer herinde, så jeg tænkte jeg ville lave en guide til hvordan man kan lave en lille, dynamisk hjemmeside.
I denne guide vil jeg vise jer hvordan man..
* Opsætter en nogenlunde fornuftig mappe struktur
* Laver "markup"*
* Styler det "markup"*
* Gør siden dynamisk*
* Opsætter en database*
* Henter, redigere og sletter information fra en database*
* Manipulere sit DOM*
(* = ikke skrevet endnu)
Hvad der bruges til dette..
* HTML5
* CSS
* PHP
* MySQL
* JavaScript
I denne guide vil jeg antage at læseren ingen erfaring har, hvad angår programmering og at læseren bruger Windows 7.
Guiden her vil komme op i små bidder, hvornår og hvad vil man kunne finde i en lille "changelog" i bunden af dette indlæg, sammen med en "TODO" liste.
Jeg vil lige starte op med at sige, at jeg på ingen måde officielt er kvalificeret til at fortælle jer hvordan man bør gøre. Alt i denne guide er udelukkende skrevet efter min viden og mine meninger, og i er helt fri til at gøre tingene anderledes end jeg.
Før vi går i gang, vil jeg lige nævne nogle ting der er nødvendige..
*En editor*
En editor, er et stykke software der lader dig indtaste kode, og gemme det som filer.
For at optimere arbejdsprocessen, er det anbefalet at din editor har "syntax highlighting", der farver diverse keywords op, så det er let at gennemskue din kode.
En editor kan også have både FTP, projekt håndtering, debugging mm., disse er foreslået, men ikke nødvendige.
Hvis du vil have en let, hurtig editor, med syntax highlighting (og muligvis de andre ting via. plugins), kan jeg foreslå Notepad++ (http://notepad-plus-plus.org/).
Hvis du vil have en tungere, mere komplet editor med alt jeg har nævnt indbygget og mere til, vil jeg foreslå NetBeans (http://netbeans.org/) - husk at hente PHP versionen.
Jeg vil lige nævne, at jeg vil benytte NetBeans i denne guide, og vil komme med tips til at optimere din oplevelse med dette stykke software.
*En server*
Hvis du har en server der er tilkoblet nettet, er du velkommen til at bruge denne. Men hvis du ikke skulle have sådan en, så kan opsætte en "localhost (http://en.wikipedia.org/wiki/Localhost)", der fungere ligesom en server.
For at gøre dette, kan du benytte dig af f.eks. WAMP (http://www.wampserver.com/en/) eller XAMPP (http://www.apachefriends.org/en/xampp.html).
Jeg vil lige nævnte, at jeg vil benytte XAMMP i denne guide, og vil komme med tips til dette stykke software.
Det er hvad der skal bruges, nu vil jeg hurtigt komme med noget opsætning og opstart til XAMPP (http://www.apachefriends.org/en/xampp.html) og NetBeans (http://netbeans.org/)..
*XAMPP*
XAMPP kommer med en installations wizard, der bør opsætte det det hele for dig. Som standard vil XAMPP ligge på dit C: drev (C:xampp). Gå derind og start programmet "XAMPP Control Panel" (C:xamppC:xamppxampp-control.exe).
Når dette er åbent vil der komme et lille panel i det nederste højre hjørne, her skal du bare trykke på "Start" knapperne ud for de punkter der hedder "Apache" og "MySQL". Når du ser noget tekst med en grøn baggrund hvor der står "Running", vil du vide at disse services køre, og at du nu har en server til at udføre de PHP funktionaliteter vi skal bruge.
Mappen "C:xampphtdocsC:xampphtdocs" vil nu fungere som din server. Alt hvad du finder heri, kan blive funder på din localhost (http://localhost/).
*NetBeans*
NetBeans kommer med en installations wizard, der bør opsætte det hele for dig. Når du har åbnet programmet, så tryk på "Tools" og så på "Options" oppe i toppen af vinduet.
Her kan du lave om på rigtig mange ting ved NetBeans, såsom formatering af koden, såvel som farver mm.. Jeg ville foreslå at gå ind i "Editor" og så ind under "Formatting", og så slå "Expand Tabs to Spaces" fra. Her kan du også lave om på hvor store dine tabs er (default er 4), personligt foretrækker jeg 2. Jeg ville også foreslå at sætte "Right Margin" til 0, da det ikke er nødvendigt, og bare er træls at se på.
Hvis man vil, kan man gå ind under "Fonts & Colors", og lave om på farver på tekst, såvel som baggrund mm., jeg foretrækker meget mørke farver, da de er mere afslappende at se på, hvilket er vigtigt hvis man har tænkt sig at sidde og kigge på kode i længere tid af gangen.
Når tingene er sat som ønsket, kan der startes et nyt projekt. For at gøre dette, trykker du på "File" og så på "New Project".
Bare tryk "Next" ved den første, da vi starter et nyt projekt, og derfor ikke har eksisterende kilder.
"Project Name" er bare hvad projektet skal kaldes i NetBeans, navn på mapper kan selv sættes.
"Sources Folder" skal bare gå ind under "C:xampphtdocsPROJECTFOLDER" (erstat PROJECTFOLDER med projektets mappes navn).
"PHP Version" bør være den nyeste, hvilket er valgt som standard.
"Default Encoding" bør være UTF-8 hvilket også er standard.
Tryk nu på "Next".
Nu kommer vi til der hvor man kan opsætte en forbindelse til sin FTP server (hvis man har en), og på den måde uploade sine filer automatisk, dette bør dog være nemt nok at finde ud af, så det vil jeg ikke dække (dog vil jeg nævne man bør sætte den til at uploade filerne "On Save" og ikke "On Run").
NetBeans er i stand til at åbne din side i din browser, direkte fra editoren (den store grønne knap i toppen af vinduet), dette vil være det såkaldte "Project URL". Bare kald den hvad stien til source mappen er.
Hvis du trykker "Next" igen, vil du få valget om du vil have et framework, dette er ikke noget vi vil bruge i denne guide, men jeg vil nævne det senere.
*Opsætning af hjemmeside*
En hjemmeside, består af en masse filer, der bliver brugt af endten serveren til at løse opgaver, eller browseren til at vise indhold og reagere i forhold til brugeren.
Hvad hver bruges hvor, vil jeg forklare når jeg kommer dertil, lige nu skal i bare forstå, at en hjemmeside er en masse filer, og at det er vigtigt at adskille disse filer, så det giver logisk mening.
Så hvad har vi af filer på vores hjemmeside? Og hvad er deres funktion på siden?
* HTML filer (eller PHP filer) - til fremvisning af siden
* CSS filer - til "styling" af vores HTML
* JavaScript filer - interraktion med brugeren på selve siden, i stedet for på serveren
* Rene PHP filer - til server interraktion (database mm.)
* Andre ressourcer (billeder, film, lyd mm.)Andre ressourcer (billeder, film, lyd mm.)
For at kunne holde styr på alt dette, er det vigtigt at lave en mappestruktur, der giver mening: vi vil f.eks. ikke have vores rene PHP filer, til at rode rundt mellem vores CSS filer.
Her er en simpel struktur, som vi vil bruge på vores lille dynamiske side..
Code:
---------
root/
layout/
css/
images/
pages/
parts/
actions/
admin/
guestbook/
javascript/
lib/
---------
Læg mærke til at jeg navngiver mine mapper og filer på engelsk, dette er ikke nødvendigt, dog ville jeg foreslå at man gør det, da det gør det lettere for andre at overtage din side (det er ikke nødvendigvis en dansker der skal arbejde på det efter os), eller bare finde rundt i dine ting (hvis du f.eks. spørger om hjælp på en engelsk hjemmeside).
Læg også mærke til at jeg holder alt i lowercase, dette er for ikke at skulle bøvle med stier og filnavne senere.
Dette er dog ikke krav, men jeg ville foreslå at man gør det.
Så lad mig forklare hvad hver af disse mapper vil indeholde..
Code:
---------
root/
---------
Dette er vores "rod", med det mener jeg ikke at det er en faktisk folder (det kan dog være det, alt efter din opsætning af server), dette er bare hvor vores hjemmeside ligger.
Denne mappe kommer til at indeholde filerne..
* index.html
Udover den, kan man have ikoner, .htaccess filer mm., men dette vil jeg udelade, for at gøre det simpelt.
Code:
---------
root/
layout/
---------
Dette er hvor alt vores styling kommer til at foregå (mere om dette i undermapperne).
Mappen vil i vores tilfælde kun indeholde to andre mapper, men den kunne sagtens indeholde mere (så længe det har noget med selve sidens udseende at gøre).
Code:
---------
root/
layout/
css/
---------
Dette er hvor vores CSS filer kommer til at ligge. Disse vil bestemme hvordan vores side ser ud, og hvordan den skal forholde sig i forhold til brugeren (i begrænset forstand).
Denne mappe kommer til at indeholde filerne..
* style.css
Jeg kan personligt godt lide, at adskille mine CSS filer under produktionen, for så at samle dem når jeg er færdig, dette kunne gøres således..
* layout.css
* font.css
* mm.
Fordel diverse ting udover flere filer, så man ved hvor man skal lede, hvis man vil rette noget, for så at samle dem til sidst i en fil (dette vil jeg komme ind på senere).
Man kunne også lave en mappe med "værktøjer" (tools) til CSS, såsom et "reset stylesheet" (vil jeg også komme ind på senere), eller et "framework" såsom 960 Grid (dette vil jeg også snakke om senere).
Code:
---------
root/
layout/
images/
---------
Dette er hvor alle billeder, der er ment til at style siden, er placeret. Dette kan f.eks. være baggrundsbilleder, logoer, ikoner, hjørner (vil jeg komme ind på senere) mm..
Denne mappe kommer til at indeholde filerne..
* logo.png
Jeg ville foreslå, at man fordeler diverse typer af billeder ud i hver deres mappe, såsom logoer, ikoner etc., dette vil gøre det lettere at holde styr på det hele, da der hurtigt kommer en del billeder i disse mapper.
Noget der er vigtigt at forstå, er at disse billeder er til faste dele af dit layout, dvs. at billeder som en bruger f.eks. uploader, BØR IKKE lægges ind i denne mappe, kun billeder der bliver brugt i sammenhæng med layoutet, og intet andet. Billeder som brugeren f.eks. uploader, kunne man lave en mappe mere i roden til.
Noget der også er vigtigt at forstå, er hvilke filtyper der bør bruges til hvad og hvor meget de fylder.
* .jpg - faktiske billeder der skal have en god kvalitet, såsom banner mm.
* .png - bør bruges de steder hvor man har brug for en gennemsigtig baggrund, dette er ofte tilfældet med logoer, visse ikoner mm.
* .gif - alt grafik bør være i .gif form, og med det mener jeg ikke .gif animationer (disse bliver oftest set ned på), men ikoner der ikke har brug for en gennemsigtig baggrund, knapper, hjørner mm.
Bemærk at .gif billeder der konstant køre animationer, normalt ikke er en god ting, prøv evt. at se Official HomePage of Promised America (http://www.promised-america.com/)
Som sagt før, har størrelsen også en hel del at sige når vi snakker billeder, da større billeder vil tage en del tid at hente ned og vise, vil det gøre siden langsommere, så prøv at holde billeder så små som mulige, dog uden deres kvalitet bliver så dårlig at man vil bemærke det på skærmen.
Code:
---------
root/ pages/
---------
Dette er mappen, hvori diverse sider som brugeren ser faktisk ligger, dvs. HTML / PHP filer, der består af markup.
Denne mappe kommer til at indeholde filerne..
* home.php
* about.php
* contact.php
* guestbook.php
Code:
---------
root/ pages/ parts/
---------
Mappen her, vil komme til at indholde faste dele af vores sider. Det er meget standard, at alle sider har en "header" og en "footer" (kommer jeg tilbage til senere), der indeholder nogenlunde det samme over alle sider. Grunden til at vi laver seperate filer til disse, er for at undgå den frustration det giver hvis man vil ændre en ting i en af dem, og så er nød til at gå igennem alle sine sider for at rette det (mere om dette senere).
Denne mappe kommer til at indeholde filerne..
* header.php
* footer.php
Code:
---------
root/
actions/
---------
Mappen her vil ikke indeholde nogen filer i sig selv, kun mapper.
Det er i disse mapper, hvori vi har alt vores sides funktionalitet, dvs. filerne her vil ikke vise brugeren noget, men kun fungere som en funktion, der udføre diverse opgaver for os, såsom sletning af noget på en database.
Dette er ikke ligefrem den optimale løsning, men jeg vil forsøge at holde det så simpelt som muligt. Hvad jeg forsøger på her, er at efterligne et MVC design (vil jeg snakke lidt om senere), men med mapper. Dette vil gøre hvad vi vil, men for en større side ville jeg foreslå et andet system.
Code:
---------
root/
actions/
admin/
---------
Mappen her vil indeholde diverse funktioner vi skal bruge som administator af siden.
Denne mappe kommer til at indeholde filerne..
* update_about.php
Code:
---------
root/
actions/
guestbook/
---------
Mappen her vil indeholde diverse funktioner der bruges i vores gæstebog, såsom oprettelse af indlæg, sletning af indlæg og redigering af indlæg.
Denne mappe kommer til at indeholde filerne..
* delete_post.php
* create_post.php
* edit_post.php
Code:
---------
root/
javascript/
---------
Mappen her vil indeholde rene JavaScript filer. JavaScript er det vi bruger, for at lade brugeren ændre sidens udseende ved f.eks. at trykke på en knap. Dette bliver også kaldt for "DOM manipulation" (mere om dette senere) - det skal dog lige siges at JavaScript har mange flere funktioner, og kan også bruges på serveren, dette er dog ikke relevant til denne guide.
Denne mappe kommer til at indeholde filerne..
* main.js
Jeg har valgt at holde det hele i en fil her, da der ikke vil være forfærdeligt meget JavaScript på siden, men jeg ville foreslå at man fordeler sit JavaScript ud over flere filer, for så at samle det i en til sidst (dette vil jeg komme ind på senere) - bemærk at dette er DINE JavaScript filer, dvs. tredjeparts filer såsom "biblioteker", bør være for sig selv, og aldrig mikses med din kode (mere om dette hen ad vejen).
Code:
---------
root/ javascript/ lib/
---------
Mappen her vil indholde tredjeparts JavaScript funktionalitet. Dette er f.eks. frameworks, funktioner mm..
Denne mappe kommer til at indeholde filerne..
* jquery.js
jQuery er et JavaScript framework (muligvis det mest brugte i verden), der går op i at man skrive mindre kode og have mere funktionalitet. jQuery er også super let at gå til, og kræver ikke ret meget viden om JavaScript (dog ville jeg sige man også bør lege med standard JavaScript).
Jeg vil lige nævne at jQuery har et genialt plugin system, med flere plugins end man nogensinde får brug for (og muligheden for at lave sine egne, dog vil jeg ikke komme ind på dette). Dette betyder også at når du først kommer i gang med jQuery, vil jeg foreslå at du opretter en mappe i din denne folder kun til jQuery plugins.
---Quote (Originally by Changelog)---
- Tilføje billeder ved opsætning af XAMPP
- Tilføje billeder ved opsætning af NetBeans
- Tilføje hvordan man ændre på sit NetBeans skin
- Resten af guiden DURH
---End Quote---
---Quote (Originally by Changelog)---
20-2-2012 - Oprettede tråd m/ mappe struktur
---End Quote---
