Endnu en WordPress-blog

Category Archives: webprogrammering

  1. Home / 
  2. Archive by category "webprogrammering"
dec 16, 2024

SSL i XamPP

Hvis du har fået Virtual Host til at fungere, så er websiden stadigt usikker, og det er fordi at den benytter sig af http – protokollen som lytter på port 80. Det er muligt at oprette en sikkerhedscertifikat og tilhørende nøgle på XamPP, men det kun til den lokale maskine. Man kan ikke bruge det på et webhotel. Det skal konfigureres af webhotellets administration, eller ved brug af WordPress, så et SSL plugin.

I Apache findes der en bat-fil, hvor man kan oprette certifikat og nøgle, men desværre mangler der mulighed for at specificere domæner. Batfilen ser således ud.
 
@echo off
set OPENSSL_CONF=./conf/openssl.cnf

if not exist .\conf\ssl.crt mkdir .\conf\ssl.crt
if not exist .\conf\ssl.key mkdir .\conf\ssl.key

bin\openssl req -new -out server.csr
bin\openssl rsa -in privkey.pem -out server.key
bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

set OPENSSL_CONF=
del .rnd
del privkey.pem
del server.csr

move /y server.crt .\conf\ssl.crt
move /y server.key .\conf\ssl.key

echo.
echo -----
echo Das Zertifikat wurde erstellt.
echo The certificate was provided.
echo.
pause
 
Der mangler at læse ind en parameter, der angiver tilknytning mellem DNS og adresserne. Dette skal opbevares i en fil. en fil ved navn V3.ext

og desuden ønsker vi at certifikatet gælder lidt længrere end i et år. Vi kan bruge hvilket som helst antal dage, men jeg har valgt 1825, ca 5 år. Batfilen skal vide, at den skal læse en ext-fil ind, så derfor tilføjer vi -extfile v3.ext, så bin\openssl x509  – linjen laver vi om som følger:

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 1825 -extfile v3.ext

Oplysningerne om domæne i v3.ext filen skal se ud som følger ( vores tilfælde)
 
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage =digitalSignature, nonRepudiation, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = *.dev.kfmh.dk
DNS.3 = dev.kfmh.dk
DNS.4 = 127.0.0.1
DNS.5 = 127.0.0.2
 
Gem denne fil  og den ændrede batfil – og kør batfilen. Når man gør det, skal man angive en adgangskode. Det skal være en, der er let at huske, for den får man brug for senere. Derefter beder programmet om forskellige oplysninger, som er lige ud ad landevejen, indtil man kommer til angivelse af navn. Her skal man skrive det domæne, som skal gøres sikkert. I vores tilfælde bliver det dev.kfmh.dk. Alle oplysningerne skal stå som ovenstående. En lille trykfejl vil resultere i at vi ikke får genereret det rigtige certifikat og eller, at Apache ikke starter op ved genstart, men går i fejl.  Hvis alt dette går godt, så skal en virtual host med port 443 oprettes.

 

Vi opretter en ny virtual host, som følger
 
<VirtualHost *:443>
   ServerAdmin webmaster@dev.kfmh.dk
      DocumentRoot "/xampp/apps/xampp-portable-windows-x64-8.2.12-0-VS16/xampp/htdocs/kfmh"
   ServerName dev.kfmh.dk
   ServerAlias kfmh
   ErrorLog "logs/dev.kfmh.dk-error.log"
   CustomLog "logs/dev.kfmh.dk-access.log" common
   SSLEngine on
   SSLCertificateFile "conf\ssl.crt\server.crt"
   SSLCertificateKeyFile "conf\ssl.key\server.key"
   ##check with openssl req –noout –text –in dev.kfmh.dk.csr
</VirtualHost>
 
Så gemmer man filen, og genstarter Apache serveren. Og hvis den går i fejl, kan der være en trykfejl

Når man opretter et certifikat ved makecert.bat så bliver certifikatet lagt i en fil med stien “conf\ssl.crt\server.crt” og nøglen i stien
“conf\ssl.key\server.key” For at få det hele til at virke skal man så specificere SSLEngine on og så de to filnavne som i det grøn-markerede linjer i ovenstående definition af Virtual Host. Memh.dk n hvis den virker korrekt, og man taster https://dev.kfmh.dk i browserens adressefelt, så  burde man komme til siden via port 443 som en sikker forbindelse.

Herefter mangler vi kun at sørge for at vi altid lander på https siden. Og det skal vi gøre i den virtuelle host for port 80. Vi tilføjer linjer  så specifikationen for de virtuelle host er som følger:
 

<VirtualHost *:80>
    ServerAdmin webmaster@dev.kfmh.dk
    DocumentRoot "/xampp/apps/xampp-portable-windows-x64-8.2.12-0-VS16/xampp/htdocs/kfmh"
    ServerName dev.kfmh.dk
    ServerAlias kfmh
    ErrorLog "logs/dev.kfmh.dk-error.log"
    CustomLog "logs/dev.kfmh.dk-access.log" common
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =www.dev.kfmh.dk [OR]
    RewriteCond %{SERVER_NAME} =dev.kfmh.dk 
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI}[END,NE,R=permanent]
</VirtualHost>

 
Vi skal omdirigere alle forespørgsler via www.dev.kfmh.dk og dev.kfmh.dk, som jo går via http og port 80 til at blive omdirigeret til https serveren. Først starter man RewriteEngine, så specificerer man tilfældene, hvor der skal omdirigeres, og til sidst en RewriteRule som siger at de skal gå via https. Specielt de grønne linjer skal stå præcist sådan, for ellers kan man ikke genstarte Apache.
 
Så gemmer man filen, og genstarter Apache serveren. Og hvis den går i fejl, kan der være en trykfejl.
 
Men hvis man kommer igennem, så skulle dev.kfmh.dk altid vises som en sikker forbindelse via SSL.

More Details
dec 16, 2024

Virtual Host på portabel XamPP

Når man har anskaffet sig XamPP server på et USB stik til at oprette et udviklingsmiljø for hjemmesider, vil man jo gerne have, at web-adressen ligner den, som den hjemmeside, der kører på et webhotel med en sikker forbindelse.

Hvis fx den hedder kfmh.dk, ligger det nærved at kalde den lokale dev.kfmh.dk (som de 3 første bogstaver i “developing”). Da XamPP er født med enten “localhost” eller 127.0.0.1, skal opsætningen ændres.

Dette gøres ved at oprette en såkaldt virtual host. Og hvis man vil installere WordPress med den adresse, – så er det nok bedst at foretage oprettelsen af den virtuelle server først og derefter installere WordPress med den nye adresse. Ellers skal man ind i WordPress-databasen og ind i tabel Options for at rette siteurl og home adresserne til virtual host adressen.

 

Virtual host

For at oprette en virtuel server i XamPP skal man ind mappen \xampp\apache\conf\extra og åbne filen httpd-vhosts.conf med et editeringsprogram, fx Notepad++

I denne fil står der 2 eksempler til virtualhost, og den sidste som følger:

##<VirtualHost *:80>
##   ServerAdmin webmaster@dummy-host2.example.com
##   DocumentRoot "/xampp/apps/xampp-portable-windows-x64-8.2.12-0-VS16/xampp/htdocs/dummy-host2.example.com"
##   ServerName dummy-host2.example.com
##   ErrorLog "logs/dummy-host2.example.com-error.log"
##   CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>

I dette eksempel skal du så ændre, så det passer til din installations indstillinger og din virtuelle serveradresse. Her vil vi bruge dev.kfmh.dk som serveradresse (eller den virtuelle server), og dokument roden bliver så htdocs/kfmh. Og fden virtuelle host kommer så til at se ud som følger:

<VirtualHost *:80>
ServerAdmin webmaster@dev.kfmh.dk
DocumentRoot "/xampp/apps/xampp-portable-windows-x64-8.2.12-0-VS16/xampp/htdocs/kfmh"
ServerName dev.kfmh.dk
ServerAlias kfmh
ErrorLog "logs/dev.kfmh.dk-error.log"
CustomLog "logs/dev.kfmh.dk-access.log" common
</VirtualHost>

Her er ServerAlias valgfrit. For Windows (10 eller 11) skal vi fortælle Windows at vi bruger en ny server. Det vil sige, at vi skal opdatere Windowsfilen hosts med den nye server. Denne fil findes i C:\Windows\System32\drivers\etc. Denne fil kan åbnes med Notepad++, som skal have administrationsrettigheder. Filen indeholder tilknytninger af IP-adresser til værtsnavne. Og til at starte med indeholder den tilknytning af 127.0.0.1 til localhost, hvilket angives som følger:

127.0.0.1       localhost

Nu tilføjer vi så to linjer, en, der er tiltænkt KFMH, og en til Spillefolk.dk, sådan at der i alt står:

127.0.0.1       localhost
127.0.0.1       dev.kfmh.dk
127.0.0.1       dev.spillefolk.dk

 

Hvor vi så har tilknyttet to nye navne til 127.0.0.1, – gemt filen (husk administratorrettigheder). For at få de nye indstillinger til at træde i kraft skal man genstarte Apache serveren, og så kan man åbne siden med adressen dev.kfmh.dk. Hvis du har lavet en trykfejl, så kan du ikke starte Apache serveren, men får i stedet for en fejlmeddelelse. Dette stammer mest fra trykfejl i angivelsen af VirtualHost.

 

Hvis du var så uheldig, at have installeret WordPress, først skal du måske ind i tabel option for at rette i adressen for række, siteurl og række home fra localhost/kfmh til http://dev.kfmh.dk i modsat fald får man et mærkeligt resultat, når man indtaster dev.kfmh.dk i browseren.

 

Når man er færdig, så burde WordPress siden vises korrekt.

More Details
okt 14, 2024

WP-funktioner og hvad de gør

 

Funktion Hvad den gør bemærkninger
site_url(‘/relative_url’) henter adressen  til en specifik under-adresse
have_posts() while (have_posts()),  sålænge der er flere poster Noter i single, er er nøjagtig een post
the_permalink() : Indsætter link til en side eller indlæg i loopen link til side eller indlæg, bruger single.php
the_title() indsætter titlen på siden eller indlægget Både single og posts/pages
the_content(); Indholdet af siden eller posten fortrinsvis single.php
get_header() Henter header (fra header template)
wp_head() Henter wordpress head sektion i header filen
get_footer() Henter footer-filen
wp_footer() I footer filen  lige inden </body><html> i filen footer.php Henter WP footer sektion og admin menu-bar
get_stylesheet_uri() henter adressen for stylesheet filen i temamappen Filen hedder som regel
get_theme_file_uri(relativ sti til fil) henter stien til den fil, der skal bruges Bemærk at funktionen med tom parenteser  peger på tema-mappen. og i html skal man “echo” sti til tema + sti i tema til fil
add_theme_support(‘title-tag’) Sørger for at plugins og tema kan styre dokumentets titel tag. Noter, at den skal erklæres i functions.php og skal hookes på after_setup_theme
wp_get_post_parent_id(get_the_ID()) Returnerer side ID for forælder siden,  hvis den eksisterer. (Ellers 0)
get_the_ID() Returnerer sideID for siden
wp_list_pages() Lister alle sider og udskriver dem man bruger det til filtrere  blandt sider
get_pages() returnerer alle sider bruges til at tjekke om en side har børn
language_attributes() Sætter lang attrbuten til det sprog wordpress er installeret i i html tagen
bloginfo skriver oplysninger fx bloginfo(‘charset’) kan skrive UTF-8
get_bloginfo() Returnerer oplysninger
body_class() skriver klasse i body-tag fx hvilken template, om man er logget ind, side id, child eller parent, hvis child, så side nr for parent etc.
paginate_links();
 returnerer pagination,  udskriv: echo …, å at man får link til næste/forrige side bruges i index.php lige inden sidste div
the_archive_title() Udskriver titlen indlæg i arkivet, alt efter om det kategory, forfatter eller tid Bruges i archive.php i titel feltet
the_archive_description() skriver ud det man skriver i “beskrivlse feltet” under kategory,  eller forfatter Btuges i archive.php lige under titelfeltet

 

WordPress hooks Hvad den gør Bemærkninger
add_action(‘hvad og hvornår’,’Navn på
funktion’)		 hooker funktionen i henhold hvårnor det skal
ske, og type af funktion (fx indlæse fil eller
udføre et script)		 Fundamental programmeringsmåde i WordPress
add_action(‘wp_enqueue_
script’, ‘university_files’)		 Udførsel af funktionen university_files() i filen functions Tema-mappen indelholder en fil, som hedder functions
wp_enquue_style(name,uri to css file) indlæs fra css fil med den givne uri-værdi Det kan være sti til en fil eller extern resource
w+_enqueue_script(name, uri to script file) indlæs fra script fil med den givne uri-værdi Noter her kun enkel script navn til udførsel,
add_action(‘after_setup_theme’, ‘name of function’) Her beder vi wordpress at udføre funktionen efter at html siden er indlæst

funktions filen udføres inden konstruktion af html siden, der kommer ud, idet html siden skal udføres ved hjælp af de angivne resourcer

More Details
aug 15, 2020

Øge maksimum filstørrelse for upload i XAMPP

Hvis du vil importere en stor databasefil, støder du måske på en fejlmeddelelse, som siger,
Du har sandsynligvis forsøgt at overføre en fil som er for stor. Se venligst dokumentationen for måder at omgå denne begrænsning. For at give tilladelse til at importere større filer skal du

  1. Åbne php mappen i XAMPP
  2. Åbn filen php.ini i notesblok
  3. Find linje med post_max_size= 8M, sæt den til fx 256M
  4. find linje med upload_max_filesize=2M, sæt den til fx 128M
  5. Noter at upload_max_filesize <= post_max_size
  6. Gem filen med disse ændringer

Nu skulle du kunne uploade filer op til 128MB

More Details
jun 19, 2020

Brug af JQuery til vise og lukke rammer i WordPress

Grundlæggende

Man har nogle gange nogle ting i rammer, som man vil kunne vise eller ikke vise. I det følgende vil jeg beskrive, hvordan man kan bruge jQuery til at skifte mellem vise og skjule iFrames.

jQuery er en special form for JavaScript, hvor man har samlet en del funktionalitet i en speciel sprogkonstruktion. Som det hedder i w3Schools “jQuery is a lightweight, “write less, do more”, JavaScript library.” Det vil sige, at når man bruger jQuery, skal man også have adgang til biblioteket. Dette bibliotek er (b.l. andre) indlæst i WordPress i forvejen.

jQuery er ment til at gøre JavaScript programmer simplere, og den grundlæggende syntaks er:

$(selector).action()

  • $ til at definere/tilgå  jQuery biblioteket ($ er et alias for jQuery)
  • En (selektor) til at formulere en forespørgsel eller finde  HTML elementer
  • En JQuery action() til at udføre en handling på de fundne elementer. Action kan her også være en event, fx muse klik,

Et eksempel er som følger

$(“button”).click();
$(“p”).hide(); 

Dette skjuler alle HTML elementer som er <p> type, (men ikke “p.dontHide”,  som udtrykkes ved <p class=”dontHide”>) Selektoren her er “p”, en anden selektor er “p#identitet” eller “p.specielKlasse”

Når man vil bruge jQuery, så skal hele dokumentet være færdig-indlæst, det specificerer man ved at indlejre alle jQuery sætningerne som følger:

$(document).ready(function(){
  // jQuery funktion erne skrives her…
});

og den første funktion specificerer, at JQuery først går i gang, når dokumentet er indlæst.

Funktioner og events i jQuery

Funktionerne i jQuery handler altså om finde selektorer og udføre handlinger på dem, der møder søgekriterierne. Der er også begivenheder, som når man klikker på en knap. I jQuery har de fleste begivenheder (events) en tilsvarende jQuery funktion,  som i *.click() eksemplet oven for. Og vi vil gerne kunne handle på det. Her er en beskrivelse taget fra w3shcools

$(“p”).click(function(){
  // Handling specificeres her!!
});

Eksempel:

$(“p”).click(function(){
  $(this).hide();
});

Noter at vi definerer handlingen i en ny funktion. Her betyder dette, at hvis vi klikker på en p-tag, så skal vi skjule denne. Det kunne også være en en <span> element, der ved et klik får p-elementet til at blive skjult.  Så ville der stå

$(“span”).click(function(){
  $(“p”).hide();
});

Her skal der noteres, at jQuery skjuler ALLE p-tags, eftersom de møder søgekriterierne.  Hvis man vil specificere handlinger for flere events, så kan  man bruge on-funktionen. Et eksempel på det som nedenstående:

$(“p”).on({
  mouseenter: function(){
    $(this).css(“background-color”, “lightgray”);
  },
  mouseleave: function(){
    $(this).css(“background-color”, “lightblue”);
  },
  click: function(){
    $(this).css(“background-color”, “yellow”);
  }
});

Her defineres der forskellige funktioner for 3 forskellige events. Hvor baggrundsfarven for p-elementet bliver lysegråt, når man flytter musen henover elementet, – lyseblåt, når man fjerner musepilen fra elementet, og når man klikker på den, bliver den gul. Den ender med at blive lyseblå til sidst, da man jo skal ud med musepilen.

Vise og skjule iFrames

Foruden hide og show funkktionerne, har vi også en funktion, som hedder “toggle”. Den kan bruges til at skiftes til at vise og skjule et element. Et eksempel på dette er, som følger. Et eksempel på dette er

$(“button”).click(function(){
      $(“p”).toggle();
});

Dette vil vi gerne anvende på en iFrame element, som ligger ved siden af et span-element. I iFrame elementet indlæses et nyt indhold, som følger

<span class=”iframe”><strong>Når man klikker her skiftes iFrame til at være synlig og ikke synlig</strong></span>
<iframe style=”display: none;” src=”/wp-content/KFMH-Nyt/nyt/2011/nyt20110810.html” width=”100%” height=”400px”></iframe>

Og vores jQuery script kunne se ud som følger:

$(document).ready(function(){
   $(“.iframe”).click(function() {
      $(“iframe”).toggle(); 
   });
});

Denne funktion vil skiftevis vise og skjule iFrame-elementet,  når man klikker (span) elementet af klasse “iFrame”. Noter, også at den vil vise og skjule ALLE iFrames, som den finder ved selektor “iFrame”.

Hvis man nu forestiller sig, at man har en liste af overskrifter, – hvor man kan hente indhold, skjule indhold ved at klikke på overskriften. Så kan man netop benytte denne funktion. Men her skal der en mekanisme til, så at ikke alle iFrames åbnes på en gang.  Derfor giver vi vores iFrames en entydig identitet, og noterer det oppe i overskriften, så kun dette iFrame vises og ikke de andre, når man klikker på overskriften. Det bliver til

<td>&nbsp;<span class=”iframe” name=”d20110810″><strong>Vis iFrame med identitet #d20110810 og ikke andre</strong></span><iframe id=”d20110810″ style=”display: none;” src=”/wp-content/KFMH-Nyt/nyt/2011/nyt20110810.html” width=”100%” height=”400px”></iframe></td>

Og tilsvarende jQuery script:

$(document).ready(function(){
    $(“.iframe”).click(function() {
       var id = “#” + $(this).prop(“id”); //dan identitet
       $(“iframe”+id).toggle(); //iFrame med den identitet
    });
});

Man bør også kunne bruge id i stedet for name i identifikationen af span-elementet, men i one.com WordPress virker det kun for name. Hvis du installerer WordPress på din egen maskine, kan du også bruge id i stedet for name.  Du kan også risikere en fejl (der sker intet, når du klikker på overskriften). Det kan være, at der er opstået en konflikt situation i WordPress. En mulighed for at rette på det er at bruge sætningen

$ = jQuery.noConflict(true);

i starten, og så håbe, at fejlen forsvinder. I alt bliver vores jQuery script så som følger

$ = jQuery.noConflict(true);
$(document).ready(function(){
    $(“.iframe”).click(function() {
       var id = “#” + $(this).prop(“id”); //dan identitet
       $(“iframe”+id).toggle(); //iFrame med den identitet
    });
});

Hvis du så oplever, at der er et andet sted i websiden, der bruger jQuery, så den går i fejl i stedet for, så kan du prøve at erstatte $ med jQuery, og ikke udføre nonConflict sætningen.

More Details
maj 29, 2020

Bootstrap grid

For at forstå hvordan man formater sine hjemmesider responsivt skal jeg gennemgå kort, hvad bootstrap grid er og hvordan det bruges. Man inkluderer predefinerede css, JavaScript og JQuery filer. Her nogle begreber

viewport: er metadata, eksempel på det er som følger:

<meta name="viewport" content="width=device-width, initial-scale=1">

Her skal indholdet fordele sig over hele enheds-bredden med enheds-skala 1. Grunden til, at man også skal have JavaScript ses af følgende figur.

 

Bootstrap Grid er css + JavaScript formatering, der er samlet sammen, så man ikke behøver ligesom at opfinde hjulet igen.  Specielt kan der nævnes klassen, container, som sætter en webside (html) pænt op. Man laver en div af klassen container, <div class=”container”> ….  </div>
Derudover har man bl. a. klasse “row” og col, med forskellige attributter, sådan at man kan lave pæne kolonner. Grunden til at det hedder Bootstrap Grid er at man kan have 12 kolonner, som man kan få sat pænt op.  Desuden findes der en række css formatering til afsnit, media etc.

Bootstrap anvendes i forbindelse med HTML5, hvor der også findes flere tags, som så som Article,  side, caption etc.  Dette vil jeg beskrive senere.

More Details