Hvordan man Code En hjemmeside fra bunden! 5 enkle trin
Lucas Bennett
⚡ Smart opsummering
At kode en hjemmeside fra bunden betyder at bygge dens sider direkte med HTML, CSS og ofte JavaScript og PHP, i stedet for at bruge en builder. Det dækker HTML-struktur, CSS-styling, editorer og hvornår et framework eller WordPress er et bedre valg.
Hvad er de forskellige typer programmeringssprog?
Programmeringssprog til websteder falder i to hovedkategorier, nemlig Frontend og backend. Sprogbrugen til at programmere en webside til frontend er HTML, CSS og JavaManuskript.
Frontend-sprog inkluderer
- HyperText Markup Language (HTML) – Dette sprog bruges til at formatere websider og organisere elementer på en webside. Den består af åbne- og lukketags, der hver har en bestemt opgave. For eksempel bruges title-tagget til at skrive websidens titel i adresselinjen.
- Cascading Style Sheets – Som navnet antyder, bruges CSS til at style websider. For eksempel kan du bruge CSS til at definere hjemmeside skrifttype, skriftstørrelse, farver osv. CSS kan skrives i én fil og genbruges igen og igen på adskillige elementer på en webside.
- JavaScript (JS) - JavaScript bruges til at gøre hjemmesider mere interaktive. Lad os sige, at du har oprettet en knap, og du vil have den til at vise en besked, når der klikkes på den. Du kan bruge JavaScript til at skrive den funktionalitet.
Backend sprog
Backend kan kodes i ethvert sprog, der understøtter webudvikling. Du kan bruge JavaScript på serversiden ved hjælp af NodeJS, Python, Ruby eller PHP. Et af de mest brugte programmer til udvikling af websteder er PHP. I denne guide vil vi fokusere på PHP som scriptsprog.
PHP:
PHP står for Hypertext Preprocessor. I modsætning til frontend-teknologier, der udføres i webbrowseren, udføres PHP på webserveren. Det bruges almindeligvis til at udføre aktiviteter såsom at registrere brugere, autentificere brugere, sende e-mails osv.
Hvordan man Code en hjemmeside – en komplet begynderguide
I denne omfattende guide vil vi lære dig, hvordan du laver en hjemmeside fra bunden og selv skriver al koden, eller du kan bruge en eksisterende platform som WordPress eller Joomla mv.
Vi vil dække følgende emner i denne komplette guide.
- Skab fra bunden vs. ved hjælp af et Content Management System
- Oprettelse af et websted fra bunden ved hjælp af et framework (PHP MVC Framework)
- Oprettelse af en hjemmeside ved hjælp af et Content Management System (WordPress)
Det grundlæggende koncept for HTML
Et HTML-dokument er en tekstfil, der indeholder HTML-tags og -elementer, og som normalt ender med en .html filtypenavn.
HTML kan også indlejres i andre scriptsprogs filtypenavne såsom *.php, *.jsp eller *.asp.
Webbrowsere parser HTML-dokumenter for at vise websider. Du kan se den HTML, der udgør websiden, i webbrowseren.
Her er trin, der hjælper dig med at oprette et websted:
Trin 1) Højreklik på websiden for at få vist pop op-menuen.
Trin 2) Vælg Vis sidekilde.
Trin 3) HTML-koden vil blive vist i almindelig tekst, og du kan se HTML-tags og elementer, der udgør siden.
Du kan også se nogle CSS og JavaScript enten indlejret eller inkluderet som separate eksterne filer.
Webbrowserens funktion er at oversætte HTML-dokumentet til et format, der kan læses af mennesker. Browseren behandler også JavaScript, der er inkluderet på websiden.
Forstå HTML-dokumentstruktur
Antag, at du har oprettet et word-dokument før. I så fald vil det være ret nemt for dig at forstå strukturen af et HTML-dokument. I et word-dokument vil du have dokumentets titel, klikbar indholdsfortegnelse, indholdssektionerne formateret anderledes og sidefoden. Et HTML-dokuments struktur er mere eller mindre den samme som det word-dokument, vi lige har beskrevet.
Alle HTML-dokumenter er indesluttet i HTML-tagget. Inden for HTML-tagget vil du have andre tags såsom hoved og krop. Header-tagget indeholder andre tags, såsom titlen til visning af sidetitlen. Det inkluderer også links til eksterne filer til CSS-stile, JavaScript og metadata. Body-tagget indeholder de elementer, der udgør websiden. Elementerne i body-tagget kan være div, tabeller, lister osv.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to create a website for beginners</title>
<meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
<meta name="author" content="Guru99">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h3>Welcome to my first webpage</h3>
</body>
</html>
Forklaring:
- definerer dokumenttypen, som er HTML
- … definerer HTML-tagget med en sprogattribut, som specificerer webstedets sprog.
- I dette simple eksempel er hjemmesidens sprog engelsk. Indenfor det åbne og afsluttende HTML-tag vil vi have tags som hoved og krop, som igen omslutter andre tags og elementer.
- … definerer head-tagget, der indeholder metadata i det.
- … definerer den krop, der indeholder indholdet af hjemmesiden.
Lær CSS-vælgere at kende
CSS-vælgere vælger elementer på websiden, som du vil formatere baseret på de definerede CSS-regler.
CSS-vælgere er kategoriseret i fem hovedkategorier, nemlig:
- Simple vælgere: Disse vælgere bruges til at vælge elementer baseret på attributter såsom id, navn eller klasse.
- CSS Combinator: Ligesom navnet antyder, vælger denne type vælger et element baseret på en kombination af relaterede elementer. For eksempel kan du bruge denne metode til kun at vælge afsnitselementer, der er inden for div-elementer.
- CSS Pseudo-klasser: Disse vælgere arbejder baseret på tilstanden af et element. Hold f.eks. markøren over et hyperlink. Du kan ændre dens baggrundsfarve for at vise brugeren, hvor de i øjeblikket peger. Så når brugeren flytter musen væk fra hyperlinket, fjernes formateringen automatisk.
- CSS Pseudo-elementer: Denne vælger bruges til at vælge specifikke dele fra et element. For eksempel kan du bruge en pseudo-elementvælger til at forstørre det første bogstav i det første ord i hvert afsnit og lade de andre bogstaver være urørt.
- CSS-attribut: Denne vælger virker baseret på de attributter, der er anvendt på elementerne eller specifikke attributværdier. Du kan f.eks. bruge en CSS-attributvælger til at formatere alle HTML-knapper til den grønne baggrundsfarve, der indeholder attributværdien "submit". Dette vil anvende en grøn baggrundsfarve til de knapper, der har attributværdien indstillet til at indsende.
Sæt et CSS-stilark sammen
Denne sektion vil oprette et simpelt CSS-stildokument, der udfører simpel styling ved at definere følgende stylingregler.
- Centrer tekst baseret på et klassecenter: Denne regel vil centrere teksten og ændre tekstfarven til rød.
- Formater tekst baseret på element-id: Vi vil oprette en stylingregel for id-titlen, der ændrer farven til orange, gør skrifttypevægten fed og ændrer teksten til store bogstaver.
- Formater tekst baseret på overskriftselement nummer 2: Denne regel indstiller tekstfarven på en overskrift til blå og indstiller skriftstørrelsen til 60 pixels.
Følgende kode definerer et CSS-dokument med ovenstående regler.
.center {
text-align: center;
color: red;
}
#title {
color: orange;
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 60px;
color: blue;
}
Forklarer:
- .center {...} – definerer et klasseregelcenter, der justerer teksten i midten og ændrer skriftfarven.
- #title {…} – definerer en titelregel, der ændrer skriftfarven, omdanner alle bogstaver til store bogstaver og ændrer skrifttypevægten til fed.
- h2 {...} – definerer regler, der gælder for alle h3-elementer. Skriftstørrelsen indstilles til 60 pixels, og skriftfarven vil blive opdateret til blå.
Download/installer Bootstrap
Bootstrap er en CSS-ramme, der kommer med en lang række stilarter, som du kan begynde at bruge med det samme. Den indeholder stilarter til layout og formateringselementer.
Du kan skrive dine CSS-stile, der tilpasser standardindstillingerne for bootstrap CSS-rammeværket. Til det kan du enten downloade Bootstrap direkte fra det officielle websted, eller du kan inkludere det i dit HTML-dokument fra indholdsleveringsnetværket (CDN).
Alternativt kan du bruge et pakkehåndteringsværktøj såsom Node Package Manager (NPM) til at installere Bootstrap, men dette er for avancerede webudviklere. At downloade Bootstrap, kan du klikke på dette link her og brug det i dit projekt ligesom enhver anden CSS og JavaScript fil.
Vi vil lære, hvordan du bruger det i afsnittet nedenfor, når vi ser på at oprette din første webside.
Rollen af HTML og CSS
HTMLs rolle er at give struktur til websider. Webbrowsere bruger denne struktur til at vise præsentabelt indhold til brugerne. For det andet bruger søgemaskinespiders HTML-struktur til at navigere på websiden og indeksere den.
CSS's rolle er at give styling til indholdet, så det er visuelt tiltalende for brugerne.
Forstå almindelige HTML-termer
Lad os nu se på nogle af de almindelige HTML-termer, du bør være bekendt med som webudvikler.
| S / N | Semester | Beskrivelse |
|---|---|---|
| 1 | Element | Elementer er nøgleord, der bruges til at definere specifikke strukturer og indhold på websiden. For eksempel bruges elementet H3 til at definere en overskriftsstruktur. Andre eksempler på elementer omfatter afsnit (p), ankre (a) og containere (div) osv. |
| 2 | tag | Tags er etiketter, der markerer begyndelsen og slutningen af et element. Tags inkluderer elementnøgleord i vinkelparenteser. f.eks. Afsnit er et afsnitsmærke hvor er åbningsmærket og er det afsluttende tag. |
| 3 | Attribut | Attributter er egenskaber ved elementer, der giver supplerende information. For eksempel kan vi bruge id-attributten til at give et unikt navn til et element. Id'et kan bruges i CSS eller JavaManuskript. |
| 4 | Hyperlink | Et hyperlink er et klikbart link, der åbner en ny webside. Du kan oprette det ved at bruge ankerelementet. |
| 5 | Hoved | Head-tagget indeholder information skjult for brugeren, men nyttig for webbrowseren og søgemaskinerne. |
| 6 | Fylde | Body-tagget indeholder information, som er synlig for brugeren i webbrowseren. |
| 7 | Sidefod | Footer-tagget indeholder oplysninger, der vises i sidefodssektionen på websiden. |
| 8 | Kommentar | Kommentarer bruges til at dokumentere og forklare HTML-koden, og de ignoreres af browseren, når HTML-dokumentet analyseres. |
| 9 | Div | Div er et containerelement, der bruges til at lave layouts. |
| 10 | Overskrift | Overskrifts-tagget bruges til at oprette HTML-overskrifter. |
| 11 | Linjeskift | Dette element bruges til at oprette et nyt linjeskift. |
| 12 | Links | Links bruges til at inkludere andre filer såsom eksterne CSS-filer i HTML-dokumenterne. |
| 13 | Metadata | Metadata-tagget giver supplerende information om den webside, der er mest nyttig for søgemaskinebots. |
| 14 | Liste | Listemærket bruges til at oprette en liste. Listen kan enten bestilles eller ikke bestilles. |
| 15 | Stk | Paragrafelementet bruges til at vise tekstdata i afsnitsformat |
| 16 | Bordlampe | Dette element bruges til at oprette en tabel |
| 17 | Emne | Ligesom titlen antyder, bruges den til at angive titlen på websiden. |
| 18 | Form | Form-tagget bruges til at lave formularer, som vi kan bruge til at få input fra brugerne. |
| 19 | Script | Script-tagget linker til en ekstern JavaScript eller inline JavaScript-kode i HTML-dokumentet. |
| 20 | AJAX | AJAX står for Asynkron JavaScript og XML. Det er en teknologi, der bruges til at opdatere visse dele af websiden uden at genindlæse hele siden. |
Forstå almindelige CSS-vilkår
Følgende er nogle af de almindelige CSS-udtryk, som du skal være bekendt med.
| S / N | Semester | Beskrivelse |
|---|---|---|
| 1 | Selector | Dette refererer til den CSS, der er ansvarlig for at vælge de HTML-dokumentelementer, som vi ønsker at formatere. |
| 2 | Ejendomme | Egenskaber refererer til attributten for det element, som vi ønsker at indstille en værdi for. |
| 3 | Værdier | Ligesom navnet antyder, tildeler vi ejendommen værdien til stylingformål. |
| 4 | Kommentar | Kommentarer bruges til at dokumentere og forklare CSS-koden |
| 5 | Regelsæt | Refererer til et komplet afsnit af CSS-kode, der består af vælgeren, erklæringsparentesen, egenskaber og respektive værdier. |
| 6 | Erklæring | Dette refererer til en enkelt kodelinje i CSS-dokumentet |
| 7 | Erklæringsblok | Dette henviser til afsnittet i CSS, der definerer stylingreglerne. Den er indesluttet mellem de krøllede beslag. |
| 8 | Søgeord | Dette er et reserveret ord, der har en særlig betydning i CSS. For eksempel har ordet auto en særlig betydning, derfor er det et nøgleord |
| 9 | Attributvælger | Vælgeren vælger et element baseret på attributværdien. |
| 10 | Universalvælger | Denne vælger bruges til at matche alle elementer inden for den givne kontekst. Konteksten anvendes normalt på et overordnet element som en liste, så alle elementer på listen kan arve stilen fra den overordnede |
| 11 | Id-vælger | Denne vælger foretager et valg baseret på elementets id. |
| 12 | Klassevælger | Denne vælger foretager et valg baseret på klasseattributværdien eller -værdierne. |
| 13 | Elementtypevælger | Denne vælger er baseret på den type element, der bruges i HTML-dokumentet. |
HTML-editorer
HTML-editor er et program, der bruges til at skrive og redigere HTML-kode. Du kan bruge enhver teksteditor til at skrive HTML-kode, men HTML-editorer kommer med mange indbyggede funktioner, der gør det nemt at skrive kode.
Lad os se på nogle af de populære valg:
Visual Studio Code
Visual Studio Code er en kodeeditor på tværs af platforme udviklet af Microsoft. Du kan bruge Visual Studio Code at redigere kode for mange sprog, inklusive HTML, CSS, JavaScript og PHP. Visual Studio Code er gratis og kører videre Windows, Mac og Linux.
Sublime Text
Sublime Text er en kodeeditor på tværs af platforme, der også kan bruges til at skrive og redigere HTML, CSS, JavaScript og PHP-kode. Det er et kommercielt produkt, og du skal købe det. Du kan også bruge det gratis i uregistreret tilstand.
Notepad++
Notepad++ er en let kodeeditor, der også understøtter mange sprog. I modsætning til Visual Studio Code og Sublime Text, Notepad++ er ikke på tværs af platforme. Det virker kun på Microsoft Windows perron.
NetBeans IDE
NetBeans er et integreret udviklingsmiljø (IDE), der tilbyder flere funktioner end en almindelig kodeeditor. NetBeans er gratis og på tværs af platforme.
Opbygning af din første webside
Lad os nu lave en simpel webside. Her har vi lavet et simpelt HTML-dokument og anvender lidt styling vha Bootstrap CSS. Vi vil også have en klikbar knap, der viser en simpel besked ved hjælp af JavaManuskript.
Her er trin, der hjælper dig med at lære, hvordan du laver en hjemmeside fra bunden:
Trin 1) Åbn din foretrukne teksteditor.
Her åbner vi notesblok.
Trin 2) Opret en ny fil.
navngivet index.html.
Trin 3) Tilføj følgende kode,
ind i filen index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My First Web Page</title>
<script>
function displayMessage() {
document.getElementById("message").innerHTML = "Greetings from JavaScript!";
}
</script>
</head>
<body>
<div class="container">
<h1>My Web App!</h1>
<p id="message">Your message will appear here.</p>
<button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
</div>
</body>
</html>
Forklaring:
- definerer dokumenttypen.
- … definerer head-tagget, der indeholder de metadata, der er usynlige for brugerne.
- Hovedet indeholder også et script-tag, der indeholder JavaScriptkode, der viser en hilsen.
- Vi læsser også Bootstrap CSS fra et CDN-netværk.
- … definerer vores sides indhold: en overskrift, et afsnit og en knap, der anvender noget styling fra Bootstrap css.
Opret fra bunden vs. ved hjælp af et Content Management System
At lave en hjemmeside fra bunden kræver færdigheder og passende viden. Det tager også mere tid og kan også koste mange penge.
På den anden side behøver du ikke at være en dygtig programmør for at lave din hjemmeside ved hjælp af et Content Management System såsom WordPress. Content Management Systemer ligner applikationer som f.eks Microsoft Word.
Med et Content Management System fokuserer du på at skabe sider, skrive indhold og udgive indholdet, ligesom at oprette dokumenter i ord og udskrive dem til en printer.
Følgende tabel sammenligner de to populære metoder til at oprette websteder.
| S / N | Pro/Con | Oprettelse fra bunden | Brug af et Content Management System |
|---|---|---|---|
| 1 | Tid | Kræver meget tid. | Tager lidt tid. Det kan oprettes på mindre end 24 timer. |
| 2 | Pris | Det kan være dyrt at ansætte en dygtig programmør. | Du kan gøre det selv eller hyre nogen til at lave det for dig. |
| 4 | Skills | Kræver en erfaren og dygtig programmør | Kræver færre færdigheder. Du skal være computerkyndig for at gøre det. |
| 5 | Sikkerhed | Hackere kan ikke nemt finde svagheder i koden til at udnytte. | Hackere kan nemt finde svagheden i koden og udnytte dem. Regelmæssige opdateringer er vigtige af sikkerhedsmæssige årsager. |
| 6 | Speed | Har tendens til at være hurtigere, fordi kun de funktioner, der er nødvendige, indlæses under kørsel. | Har tendens til at være langsommere, fordi Content Management System kommer som en generel løsning, der kan indlæse funktioner, som du ikke nødvendigvis har brug for. |
| 7 | Vedligeholdelse | Nem at vedligeholde, fordi opdateringer kun udføres, når det er nødvendigt | Kræv mere arbejde, da du er nødt til at lave regelmæssige opdateringer til CMS på grund af sikkerhedsmæssige årsager. |
| 8 | Søgemaskineoptimering (SEO) | Kræver mere arbejde, og programmøren skal mindes om, fordi de fleste programmører ikke er SEO-eksperter | De fleste Content Management-systemer kommer med SEO-værktøjer ud af boksen. Ekstra funktioner kan nemt tilføjes ved hjælp af plugins. |
Brug af en Framework (PHP MVC Framework)
I dette afsnit vil vi se på, hvordan vi kan lave vores hjemmeside fra bunden. Hvert websted skal bruge frontend-teknologier såsom HyperText Markup Language (HTML), JavaScript og Cascading Style Sheets (CSS).
Backend har flere muligheder for programmeringssprog. Du kan bruge PHP, Python, Rubin, JavaScript osv. PHP er en af de mest almindelige. Vi vil tale om PHP-teknologier i dette afsnit.
Du kan bruge PHP, da det er en langsom proces, så selv programmører, der opretter hjemmesider fra bunden, skal bruge et udviklingsframework. Det mest populære er Model-View-Controller (MVC) framework. Eksempler på PHP MVC frameworks inkluderer Laravel, CodeIgniter, Cake PHP, Symfony osv.
MVC-rammer giver følgende funktioner:
- Indbygget databaseforbindelse med biblioteker: Dette sparer dig for tid til at skrive kode for at oprette forbindelse til databasen sikkert for at skrive og hente data.
- Indbyggede godkendelsesmoduler: Dette sparer dig for tid til at skrive koden, som kræver, at brugerne logger ind og ud af webstedet, hvis det er nødvendigt.
- Struktureret kode: MVC-designmønster adskiller forretningslogikken fra præsentationen. Dette gør det nemt at have en programmør, der kan arbejde på bagenden, og en webdesigner, der arbejder med frontend-udviklingen.
- pakker: Disse er samlinger af biblioteker, der udfører meget specifikke opgaver. For eksempel kan du bruge eller downloade en pakke til at tilføje funktioner som;
- Tilføjelse af Disqus-kommentarfunktion til dit websted
- Kald en API
- Integrering af en betalingsgateway.
Du kan bruge MVC-rammer til at fremskynde udviklingstiden. Du kan også bruge HTML-skabeloner til at fremskynde frontends udvikling ved at bruge open source HTML-skabeloner. Du kan også købe en kommerciel HTML-skabelon og derefter tilpasse den efter dine krav. Nogle HTML-skabelonproducenter skaber endda specifikke MVC-ramme HTML-skabeloner.
For eksempel kan du købe en HTML-skabelon, der bruger en bladeskabelon, en skabelonmotor indbygget i Laravel MVC-rammeværket.
Oprettelse af en hjemmeside ved hjælp af et Content Management System (WordPress)
I dette afsnit vil vi se på, hvordan du kan oprette en hjemmeside ved hjælp af WordPress:
Downloader WordPress
Du kan downloade WordPress fra den officielle hjemmeside og køre den på din lokale computer, hvis du har en webserver og PHP installeret. Men hvis du allerede har en hostingkonto, kan du installere WordPress direkte fra dit cPanel.
Kom godt i gang med WordPress
Når du har installeret WordPress, kan du begynde at oprette din hjemmeside.
Web hosting:
Før du går i gang, skal du have en domænenavn og webhotel konto. Webhostingkontoen skal have PHP installeret og MySQL som databasemotor. Du kan tage tjenesten af Bluehost, Godaddy, eller du kan hoste med WP Engine, som er specialiseret i at levere administreret WordPress-hosting.
Installation:
De fleste webhostingudbydere har specielle scripts i det administrative panel, der giver dig mulighed for at installere WordPress. Hvis din hostingudbyder bruger cPanel, bør du være i stand til at installere WordPress ved at klikke på WordPress-ikonet som vist på billedet nedenfor:
Når du har valgt ovenstående mulighed, vil du blive præsenteret for Windows følgende for at fuldføre installationen.
Indstillinger:
I indstillingssektionen kan du konfigurere ting som webstedets navn, URL permanente links, tidszone, om nogen kan registrere sig på dit websted osv.
Skabelon:
Skabeloner giver os mulighed for at se, hvordan vores hjemmeside ser ud. WordPress kommer med gratis indbyggede skabeloner, som du kan bruge med det samme. Du kan også downloade skabeloner oprettet af andre. Udover gratis skabeloner kan du også købe premium-skabeloner fra markedspladser som ThemeForest.
Plug-ins:
Plugins giver dig mulighed for at udvide funktionaliteten af WordPress. For eksempel kan du bruge et plugin til at gøre det muligt for dine kunder at betale dig via PayPal fra din hjemmeside. Du kan også bruge plugins til at tvinge brugere til at bruge sikre forbindelser (HTTPS) eller generere sitemaps.
Hjemmesidebyggere:
Hjemmesidebyggere kommer med mange funktioner, der gør det nemt at oprette websteder ved hjælp af træk og slip-metoder. Hjemmesidebyggere er normalt installeret som plugins og kommer med skabeloner, som du kan bruge.
Lad os se på nogle af de mest populære webbyggere:
Astra
Astra er et hurtigt, let og meget tilpasseligt WordPress-tema. Den leveres med starterskabeloner, som du kan bruge til hurtigt at oprette dine websteder. Den har både gratis og premium starterskabeloner.
Elementor:
Elementor er træk og slip hjemmesidebygger til WordPress, som over 5 millioner brugere bruger. Elementor tilbyder både gratis og premium funktioner.
Beaver Builder:
Beaver Builder er en brugervenlig træk-og-slip hjemmesidebygger til WordPress, der giver dig mulighed for hurtigt at skabe professionelt udseende hjemmesider.
WordPress-alternativer
WordPress er ikke det eneste Content Management System, du kan bruge til at bygge din hjemmeside. Du kan også se på alternativer som f.eks
- Joomla: Joomla er et open source content management system, der kan bruges til at publicere indhold, diskussionsfora, e-handelsapplikationer osv. Det bruger PHP som programmeringssprog og MySQL som databasemotor.
- Drupal: Det er et webindholdsstyringssystem, der kan skabe personlige blogs, virksomhedswebsteder eller vidensstyring til forretningssamarbejde. Drupal er skrevet i PHP og JavaManuskript.
- MODX: Det er et open source content management system, der er skrevet i PHP. Og bruger MySQL som databasemotor. Det kan bruges på nettet såvel som på intranettet.
- Konstant Contact: Dette er en webstedsbygger, der giver træk og slip-funktioner. Det kan bruges til at oprette grundlæggende websteder og e-handelsbutikker.
