Joomla! 1.6 udviklingsmiljø del 1.

[Amras]

Lokal test miljø og synkronisering med online site

Der er rigtig mange værktøjer man kan bruge for at skabe et udviklingsmiljø til Joomla! 1.6.
Jeg har tænkt mig i dette indlæg at beskrive hvordan mit lokale/online miljø ser ud. Jeg håber derved at giver andre inspiration til hvordan de kan sætte deres eget op.
Mit udgangspunkt har været at det skulle fungere på flere forskellige platforme her tænker jeg på: Linux, Mac og Windows. samt at det skulle være opensource ligesom Joomla! er. De programmer jeg er kommet frem til som jeg selv bruger både som professionel og i min fritid er:

• Aptana studio 3 (den er i beta pt men har ingen problemer med den). download
• Xampp server pakke som er nem at installere. download
• Firefox webdeveloper en udvidelse til firefox browseren. download
• Firebug udvidelse til firefox. download
• Aptana firebug udvidelse. download

Jeg har tænkt at jeg vil gennemgår hvordan man sætter det hele op fra bunden så alle med interesse kan være med derfor har jeg valgt at lave et udviklingsmiljø på Windows platformen. men man kan meget nemt overføre dette til enten Linux eller Mac.

Installation af Xampp.(serveren)
Jeg har valgt at bruge en lidt ældre version af Xampp (1.7.3) som bruger php 5.3.1 istedet for den nye version 1.7.4 som bruger php 5.3.5, grunden til det er at php 5.3.5 giver nogle installation problemer iforhold til Joomla! 1.6 udvidelser så for at få et stabilt miljø bruger jeg dn lidt ældre version.
Når du har downloade filen “xampp-win32-upgrade-1.7.2-1.7.3.exe” installere du programet ligesom du normalt vel gøre, det er nemmeste at bruge de stier som installationsprogrammet forslår. Når programmet er installeret er du færdig med installationen af xampp.

Installation af Aptana.(editoren)
Når du skal installere Aptana, kan du vælge at download standalone versionen eller hvis du allerede har Eclipse, installere Aptana som et plugin. Det gode ved at bruge Aptana, hvad enten du vælger plugin eller standalone, er at det er bygget ovenen på Eclipse. Ecilpse er et udvikllings værktøj som bliver brugt af udvikler verden over, hvad enten det er C, C#, Java eller web udvikling så kan Eclipse klare det. Aptana Studio 3 beta understøtter HTML 5 og alle de nyeste webteknologier. Jeg har valgt at downloade, standalone versionen og installere den, som en normal windows installation. Når Aptana er installeret er det en god ide at tjekke for opdateringer, det gøres ved at klikke på: Help -> Check for updates , hvis der er opdateringer så opdatere ved at følge vinduerne.

Installation af Firefox, Firebug og Webdeveloper.
Jeg har valgt at bruge Firefox som udgangspunkt for alt webudvikling fordi Firefox tilbyder en hel del værktøjer iform af addons samt den måde den fortolker de forskellige websprog (HTML, Javascript, CSS). Når du har downloade og installeret Firefox, (i skrivende stund er den nyeste version 4.0 som understøtter HTML 5 og CSS 3) skal du gå til “Add-ons for Firefox” og installere Webdeveloper og Firebug som vi kommer til at bruger.

[Amras]

Opsætning af udviklingsmiljøet.
Jeg har delt opsætning op i små afsnit som gerne skulle give et bedre overblik.

• Download filer fra webhotel samt databasedumb.
• kopier webhotel filer til Xampp server mappe.
• Opret et nyt project i Aptana.
• Opret en ny database i Xampp og impotere database fil fra webhotel samt ret configuration.php fil i Aptana.
• Opsætning af forbindelse til lokal server og webhotel.
• Test af lokal server (test server).
• Test af webhotel (produktion server).
• Tips.

Download filer fra webhotel samt database dumb.
Start med at downloade alle dine Joomla! filer fra dit webhotel til en mappe på din computer, det gør du som regel via ftp, hvis du ikke har noget ftp program kan du bruge filezilla. Det næste vi skal er at have taget en kopi af din database, åben phpmyadmin via din webhost(webhotel) og vælge den database som hører til dit Joomla! site, når du har valgt din database tryk på fanebladet export. Som standard skulle alt være sat så du bare skal trykke på den lille knap go nederst i højre hjørne, gem din fil et sted på din computer så du kan finde den igen.

Kopier webhotel filer til Xampp server mappe.
Vi starter med at tænde for serveren, det gør du ved at starte Xampp kontrol panel som ligger under din program menu i windows, når dit kontrol panel er startet skal du starte mysql og apache ved at trykke på deres start knap, i panellet vil du se et grønt running felt hvis de kører som de skal. Nu skal vi have oprettet vores mappe hvor vores webhotel (Joomla!) filer skal lægges i, tryk på explore knappen i Xampp kontrol panel og åben mappen htdocs, i denne mappe opretter du en mappen med navnet “udvikling” og kopiere alle dine filer fra dit webhotel ind i mappen undtagen din database fil.

Opret et nyt project i Aptana.
Nu har vi lagt filerne på vores lokale server og vi skal nu have dem vist i Aptana, start Aptana programmet. Første gang du starter Aptana vil du ser en velkomst skærm tryk på workbench så vi kan komme igang. Nu ser du på Aptana/Eclipse vinduet, til venstre har du App og Project Explorer, i Project Explorer kan du se alle dine filer for alle projekter imens du i App Explorer kun kan se filer fra det projekt du har valgt. Start med at vælge file -> new -> Web project, i projekt vinduet skriv "udvikling" i feltet Project name, klik checkboksen af og browse til mappen udvikling, Xampp mappestien skulle gerne være: “C:/xampp/htdocs/udvikling/” hvis du har installeret serveren direkte på C drevet. Nu skulle du gerne kunne se alle dine filer i Project Explorer vinduet i Aptana.

[Amras]

Opret en database i Xampp og importere database fra webhotel samt ret configuration.php.
Det næste vi skal have gjort er at oprette vores database, i Xampp kontrol vinduet klik på knappen admin ud for MySql, så åbner phpmyadmin, i feltet create new database skriver du “udvikling” og trykker på knappen create. Nu har du oprette din database så skal vi bare importer din database fil fra dit webhotel, i venstre side af phpmyadmin vil du nu ser din database udvikling vælge den og tryk på fanebladet import. På siden import trykker du på knappen choose file og vælger den database fil vi downloadede fra dit webhotel. For at importer den skal du trykke på go knappen, hvis alt er gået som det skulle kan du nu se en grøn tekst, det betyder at importen gik godt. Dit sidste trin vi mangler er at rette i configuration.php filen, så vi kan forbinde sitet med databasen. Åben filen ved at klikken på den i Aptana, du kan se den i Project Explorer vinduet, de steder du skal rette er:

• public $host = 'localhost';
• public $user = 'root';
• public $password = '';
• public $db = 'udvikling';
• public $fromname = 'udvikling';
• public $log_path = 'C:\\xampp\\htdocs\\udvikling\\logs';
• public $tmp_path = 'C:\\xampp\\htdocs\\udvikling\\tmp';

Jeg har allerede skrevet hvad der skal stå, dog kan det være du skal ændre stien i de 2 nedeste, hvis du har installeret Xampp et andet sted på din computer.

Opsætning af lokal/online forbindelse.
Åben Aptana og i Project Explorer klik på den lille pil ud for dit projekt udvikling så det folder sig ud, hvis det ikke allerede er det. I Project Explorer vinduet højreklik på connections og vælge Connection Manager.. , i vinduet klik på plus ikonet og i feltet name skriv “udvikling”.
Under Source skal den være sat til udvikling i project feltet. Under Destination sektionen vælge remote og klik på new.. knappen.
I popup vinduet angiv dine informationer som du har fra din webhost: server(ftp addresse),username og password, klik på test for at se om forbindelsen til dit site er ok ellers kontakt din webhost for at fådisse oplysninger.
Når din forbindelse er iorden luk vinduet og højreklik på din udvikling’s mappe i Project Explorer vinduet og vælge File Transfer -> synchronize.., nu vil Aptana synkroniserer alle dine lokale filer med dit online site så du har en nøjagtig kopi.

Test af lokal server.
Det næst sidste skridt er at opsætte vores lokal test server så den virker når vi trykker på “bille” ikonet lige under menuen i Aptana.
Start med at trykke på pilen lige ved siden af bille ikonet og vælge debug configurations.. , i dette vindue vælge web browser og klik på new ikonet i name feltet skriv “udvikling”. under Browser executable tryk på browse knappen hvis ikke Firefox allerede er angivet, ellers find Firefox.exe filen. I sektionen Start Action lige under vælge Start Url og skriv “http://localhost/udvikling”. det sidste vi mangler er at klikke på fanebladet commen og makere debug/run.
Tryk på apply og run derefter så skulle Firefox gerne starte op og du kan se din lokale server i aktion.

Test af det online site.
Vores sidste skridt er at sætte “play” knappen op den som er til højre for bille knappen. Så når vi klikker på den åbner Firefox og viser vores online site.
Vi starter med at klikke på pilen og vælge Run configurations.. , Browser executable skulle gerne være sat så vi mangler at at vælge start url under Start Action sektionen og angiv stien til vores website. Når det er gjort tryk så på apply og run for at se dit site i action.

Tips! til brug af Aptana/Eclipse.
Tilbage fører en fil som man har rette i imens Aptana har været åben:
Højreklik på filen og vælge Replace with -> local history eller vælge previous local history så vil den vise en list over de sidste rettelse tidspunkter.

Sammenlign to filer:
CTRL+venstreklik for at markere to filer, højreklik på den ene og vælge compare with -> each other.

[Amras]

Efter sitet er sat op kan man oprette en anden mappe i Xampp til udvikling af Komponenter, Moduler eller Plugins.
Udviklingsmiljøet kan også udvides med version kontrol enten med GIT eller Subversion, da det er bygget på Eclipse har man mulighed for at intergrerer projekt management f.eks Jira, IBM eller andet og der er mange flere muligheder.