Kategoriarkiv: Programmering

Skapa en XML-sitemap manuellt

I ett tidigare blogginlägg tog vi upp hur man skapar en XML sitemap för WordPress automatiskt med hjälp av ett tillägg. Eftersom att många kodar sina webbplatser själva istället för att använda ett publiceringssystem så tänkte vi även kika på hur man kan göra detta manuellt.

Filen vi ska jobba med ska heta sitemap.xml och för en mindre hemsida är det enklast att lägga den direkt i public_html-mappen. Filen ska vara sparad som UTF-8 och detta kan du ställa in i de flesta texteditorer.

Vi börjar med att lägga till följande i filen:

<?xml version="1.0" encoding="UTF-8"?>
     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
</urlset>

Läs mer

Sista chansen att vinna Ipad:en

Det är bara några dagar kvar till Ipad-tävlingens slutdatum är här. Men oroa dig inte… ”du har ju hela helgen på dig!”.

Tisdag (30/3) är alltså sista chansen att skicka in din briljanta funktion som använder sig av LoopiaAPI – för att få chansen att vinna den äppelprydda surfplattan.

Det har kommit in många intressanta bidrag, men vi gissar att vissa av er sitter och filar på koden in i det sista för att lämna från er något som är så bra som möjligt.

För dig som inte redan har satt igång att koda – läs tävlingsvillkoren här och ta chansen att vinna en Ipad även du.

Så fort vi har granskat alla bidragen kommer vi att presentera vinnaren här på bloggen. Sedan börjar bara väntan på att Ipad ska dyka upp i butik här i Sverige så vi kan leverera priset till den lyckliga vinnaren (Enligt uppgift ska den börja säljas i USA 3:e April).

Lycka till!

PHP 5.3.2 är här, kolla din kod nu!

För några veckor sedan förvarnade vi om att vi kommer att uppdatera PHP 5.2 till 5.3 på våra FreeBSD-serverar. Nu har PHP 5.3.2 kommit, och det innebär att vid nästa uppdatering av FreeBSD kommer vi  överge PHP 5.2 till förmån för det modernare 5.3.

Som vi skrev så innebär den nya versionen ganska stora förändringar, vilket gör att det är otroligt viktigt att ni kontrollerar att er kod kommer att fungera även efter uppdateringen.

Nedan hittar du mer information och hjälp kring hur du ska gå tillväga för att övergången från 5.2 till 5.3 ska gå smidigt.

Du som kör tredjepartsprogram som t ex WordPress eller Joomla måste också se över att du har en version som är kompatibel med 5.3. Detta gör du på respektive tillverkares hemsida.

Tyvärr kan vi inte ännu ge något exakt datum för när detta kommer att ske. Men vänta inte längre. Sätt igång att kontrollera din kod nu direkt, då blir den här uppdateringen en smidig övergång till en modernare och bättre kodbas för din sajt.

Ny version av PHP – kolla din kod!

Vi kommer inom en inte allt för avlägsen framtid att uppdatera PHP från 5.2 till 5.3. För våra FreeBSD-servrar så kommer detta att ske i samband med att PHP 5.3.2 släpps. Detta innebär att du behöver se över koden på din sajt då den nya versionen av PHP har en del ganska stora ändringar i sig (läs mer om det via länkarna nedan). Det finns ännu inget officiellt datum från organisationen bakom PHP för när den här uppgraderingen kommer att ske, därför är det bäst att sätta igång att kontrollera koden redan nu.

Se till att dina tredjepartsprogram som t ex WordPress och Joomla är uppdaterade till versioner som hanterar PHP 5.3 (läs mer på respektive tillverkares sida).

Vi återkommer med mer information kring detta här på bloggen och i framtida nyhetsbrev.

DNSSEC-widget för WordPress

Strax efter att vi publicerde vår DNSSEC-check här i bloggen efterfrågade ingo en WP-widget av densamma bland kommentarerna. Markus på drift, ihärdig som han är, tog därför en kafferast och slängde ihop en quick and dirty widget för alla att använda.

Markus DNSSEC-widget kan du ladda ner här.

Installation

Ladda ned widgeten och packa upp den på din dator. Ladda sedan upp mappen wp-dnssectest till wp-content/plugins/ som du hittar under din WordPress-installation på ditt FTP-konto.

Ladda upp din plugin

Logga därefter in i WordPress. Klicka på fliken Tillägg till vänster. Under rubriken Inaktiva tillägg hittar du nu DNSSEC Test. Klicka på länken Aktivera längst till höger (inget händer ännu på din blogg).

DNSSEC-plugin

Klicka därefter på fliken Utseende i menyn till vänster. Välj Widgets. I listan med alla widgets klickar du nu på Lägg till för DNSSEC Test. Nu dyker DNSSEC Test upp i listan över aktiva widgets längst till höger. Klicka på Spara ändringar.

DNSSEC-plugin

DNSSEC-pluginNu är widgeten aktiv och visar DNSSEC-statusen för dina besökare i sidomenyn på din blogg.

I denna version av widgeten är DNSSEC-statusarna och utseendet på dessa hårdkodade i själva widgeten. Du kan dock enkelt ändra utseende och text genom att klicka på Tillägg i vänstra menyn och välja Redigera. Här har du möjlighet att redigera PHP-koden manuellt. Du finner alla utmatningar i funktionen print_DNSSECTestHTML().

Om du lägger upp Markus widget på din blogg, glöm inte att skriva in länken till din blogg som en kommentar till det här inlägget så kan vi nyfikna själar kila in och kolla resultatet. :)

Lycka till!

Snälla, stjäl vår DNSSEC-kod

I vårt förra inlägg här i bloggen berättade vi om finn.no:s upprop att få alla IE6-användare att byta ut sin webbläsare för att på så vis driva utvecklingen av webben framåt.

I samma anda vill vi nu slå ett slag för DNSSEC. Om du DNSSEC-säkrar din .se-domän så vet dina besökare att de slipper bli drabbade av elakheter såsom DNS cache poisoning. Tyvärr är det dock som så att vissa Internet-leverantörer och vissa undermåliga nätverksprodukter ännu inte stödjer DNSSEC.

DNSSEC är en nödvändighet för ett säkrare Internet och därför är det också nödvändigt att alla Internet-leverantörer och tillverkare av nätverksutrustning stödjer standarden.

Vår DNSSEC-kontroll på loopia.seHjälp oss upplysa alla Internet-användare om vad DNSSEC är, betydelsen av DNSSEC och att de kan hjälpa till att påverka sina leverantörer med vår enkla DNSSEC-kontroll. Har du besökt loopia.se sedan slutet av förra året har du säkert använt den ett flertal gånger (du hittar den i vår meny till höger).

Allt du behöver göra är inkludera denna JavaScript-fil i din webbsida och lägga till ett antal div:ar (se steg för steg-instruktioner nedan). En fullt fungerande webbsida som visar DNSSEC-statusen hittar du nedan (klicka här för att se resultatet):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Kontroll av DNSSEC</title>
	<meta http-equiv="Content-Type"
	 	 content="text/html; charset=utf-8">
	<script type="text/javascript" src="loopia_dnssec_test.js">
	 	 </script>
</head>
<body
	 onload="_loopia_dnssectest_startTest('loopia_dnssec_imagediv',
	 'loopia_dnssec_status_div');">
	<div id="loopia_dnssec_status_div" class="init">
		<h3>DNSSEC</h3>
		<p id="dnssec_info_init">
			Just nu kontrollerar vi om DNSSEC fungerar för dig.
		</p>

		<p id="dnssec_info_working" style="display: none;">
			Alla nätverksenheter från din dator till denna
			webbplats stödjer DNSSEC.
		</p> 

		<p id="dnssec_info_not_working" style="display: none;">
			Någonstans på vägen mellan din dator och denna
			webbplats finns någon produkt som INTE stödjer DNSSEC.
		</p>
	</div>
<div id="loopia_dnssec_imagediv"></div>
</body>
</html>

Allt du behöver gör är alltså följande:

  1. Ange <script type="text/javascript" src="loopia_dnssec_test.js"></script> mellan <head> och </head>-taggarna i ditt html-dokument.
  2. Lägg till onload="_loopia_dnssectest_startTest('loopia_dnssec_imagediv', 'loopia_dnssec_status_div');" i din <body>-tagg.
  3. Lägg till den tomma diven <div id="loopia_dnssec_imagediv"></div> innan </body>-taggen.
  4. Lägg till diven <div id="loopia_dnssec_status_div" class="init"> där du vill att DNSSEC-statusen ska dyka upp i ditt dokument.
  5. Innanför ovanstående tagg, lägg till element med nedanstående tre ID:
  6. dnssec_info_init: Visas medan DNSSEC-status kontrolleras.
  7. dnssec_info_working: Visas om DNSSEC stödjs för din besökare.
  8. dnssec_info_not_working: Visas om DNSSEC inte stöjds för din besökare.

Åtta långa punkter, men kikar du på koden ser du att det är lätt som en plätt.

Lycka till och tack på förhand för all hjälp! ;)

Yahoo Pipes vs Fredrik: 1-0

Eftersom Fredrik på vår marknadsavdelning inte behagade att lägga upp en RSS-feed till vår nya, fina och framförallt rättvisa hösttävling så tänkte jag vara en liten show-off med min Internet Kung Fu.

Yahoo Pipes har många av er säkert läst om (visserligen är det svårt att komma ihåg saker från så långt tillbaka i tiden, det lanserades ju för år och dagar sedan), men ni kanske inte är medvetna om riktigt hur tufft det är.

För att visa på möjligheterna med detta välputsade verktyg så har ni här ett exempel som i fyra pricksäkra Kung Fu-sparkar choppar upp Fredriks HTML och spottar ur sig prima RSS som ni sedan kan slänga in i er RSS-läsare för att slippa slita ut F5 (eller kanske snarare Kommando-R).

Länk till exemplet. Länk till RSS-flödet.

Kort genomgång

  1. Hämta vanlig slarvig HTML med Fetch page. Splitta på <div class=”pic”>.
  2. Filtera bort alla poster som inte har en bild-länk i sig, för att bara få de senaste bilderna.
  3. Kopiera resultatet till de fyra fälten som vi bryr oss om i detta exempel (title, description, pubDate och link).
  4. Gör fyra reguljära uttryck som söker fram informationen som vi vill ha ur hela bild-html-snutten och byter ut mot t.ex enbart länken.
  5. Det finns inget femte steg, vi är klara. Men sen kan man spara och publicera sin Pipe för att världen ska bli lite bättre.

Ni kan se källkoden om ni har ett Yahoo-konto och väljer Edit source från länken ovan.

Jag vet att pubDate har fel format, men jag orkade inte konvertera det. Den av er som skickar in ett exempel på hur jag konverterar från Fredriks egenhändigt valda och därför helt ostandardiserade datumformat till korrekt format för RSS vinner fem Loopia-musmattor och eternal fame i och med ett omnämnande här på bloggen.

XML – vad är det?

XML, eller eXtensible Markup Language, är en specifikation för att specialdesigna så kallade märkspråk, som du sedan kan använda till att spara och dela data på ett strukturerat och välformaterat sätt.

Vi har tidigare berört XML i artikeln HTML vs XHTML. Men varför har det blivit så populärt och hur kan du använda det? Läs mer

Din hemsida och säkerheten

Det finns många aspekter av det här med säkerhet när det gäller hemsidor. En av de vi möter varje dag, och som är av yttersta vikt för den som utvecklar en hemsida att tänka på, är hanteringen av indata. Har man inte koll på sin indata öppnar man enkelt för hemskheter som MySQL Injections och Cross-Site Scripting (XSS). Läs mer

Världens bästa påskpyssel med jQuery

Eftersom jag inte fick några kommentarer på min utmärkta SQL-skola så tänkte jag försöka hitta något lite mer hippt och inne att skriva om så här till påskhelgen. ;)

Vad passar då bättre än en artikel om det enormt härliga JavaScript-biblioteket jQuery som på egen hand gjort att klient-baserad programmering på webben har gått från att vara timtal av frustration och nya gråa hårstrån funna under varje kaffepaus, till att frammana mentala bilder av guld, rökelse och myrra.

För att göra det hela ännu roligare så tänkte jag visa hur man på ett enkelt sätt kan använda jQuery för att göra AJAX-baserade sökningar mot en webservice som vi lagt upp så att ni har något att testa mot.

För att använda jQuery så börjar man med att lägga till följande kodsnutt i <head>-sektionen av sitt HTML-dokument:

<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>

En av de fina sakerna med jQuery är alla plugins man kan nyttja. I vårt fall kommer vi använda en plugin som heter jquery.suggest, vilken kräver att man också inkluderar jquery.dimensions.js från jQuery UI, som är ett underprojekt som tillhandahåller en rad med användbara komponenter för att bygga användargränssnitt, så vår kodsnutt för att inkludera allt godis ser ut som:

<link rel="stylesheet" type="text/css"
   href="/js/jquery/jquery.suggest.css" title="" media="screen" />
<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.ui-1.0/jquery.dimensions.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.suggest.js">
</script>

För att sedan göra om ett sökfält som har id=”domainsearch” och finns någonstans på vår sida till en AJAX-sökruta så använder vi följande kodsnutt:

$(document).ready(function() {
   $("#domainsearch").suggest("/search.php", {
      onSelect: function() {
         domain = this.value.replace(/^([^:]*):.*$/, "$1");
         status = this.value.replace(/^[^:]*:\s*(.*)$/, "$1");
         if (status == "ledig") {
            document.location.href =
               'https://www.loopia.se/bestall/bestalldoman/'
                  + domain;
         }
      }
   });
});

Detta exempel visar två koncept som är viktiga i jQuery. Först och främst så är det en bra vana att man lägger till den funktionalitet som man vill utöka sidan med på formen:

$(document).ready(function() {
   ... användbar funktionalitet här
});

När man gör på detta sätt så körs inte koden förrän sidan är helt färdigladdad, vilket oftast är önskvärt.

Det andra konceptet som visas upp är användandet av jQuery’s selector-funktionalitet för att välja vilka element som en eller flera funktioner ska appliceras på.

I detta fallet väljer vi att applicara funktionen suggest() på alla element som matchar (med CSS-syntax, se fullständig dokumentation här) #domainsearch, vilket betyder ”alla element med id satt till domainsearch”.

Funktionen suggest (vilket är vad jquery.suggest lägger till) tar en URL som ska anropas med XMLHttpRequest i bakgrunden samt ett antal parametrar, en av vilka är onSelect. onSelect anger vilken JavaScript-funktion som ska anropas när användaren har valt en rad ur sökresultatet.

Sökresultatet består av utmatningen från den anropade URL:en. Utmatningen ska ha en sökträff per rad.

Vi väljer att returnera sökresultat på formen:

doman.se:  ledig
doman.com: upptagen
doman.nu:  ledig

… och anger sedan i onSelect-funktionen att man ska skickas till vår beställningssida med domänen förvald om man väljer en ledig domän från sökresultaten.

För att mata denna lilla kodsnutt med data så använder vi oss av följande PHP-kod (sparad som search.php):

<?
   try {
      $client = new
         SoapClient('http://ws.loopia.se/LoopiaPublicServices.wsdl');

      $results = $client->search_domain_popular_tlds($_GET['q']);
         if ($results && count($results) > 0) {
            foreach ($results as $result) {
               if ($result->result == "FREE") {
                  echo $result->domain . ": ledig\n";
               } else {
                  echo $result->domain . ": upptagen\n";
               }
            }
         }
      } catch (Exception $e) {
         // Ignore exceptions, this simply means that no
         // results will be echoed to the user.
      }
?>

Ni kan ladda ned ett fullständigt exempel som bör fungera om ni bara packar upp det och laddar upp det i public_html för en domän eller subdomän hos oss.

Exemplet hittar ni också på http://sigint.se/.

Vad kan man mer göra med jQuery då? Ett vanligt användningsområde för JavaScript är att dölja och visa element när användaren gör något, t ex klickar på en knapp.

Istället för att böka med kod som:

var element = document.getElementById('someid');
if (element != null) {
	element.style.display = "none";
}

… och kämpa för att sedan få den att fungera i alla moderna webbläsare så använder man istället:

$("#someid").hide();
$("#someid").show();
$("#someid").toggle();

… med mera.

På så sätt kan man naturligtvis även använda andra selectors som t ex för class och mycket annat användbart.

Så gott som alla funktioner i jQuery, inklusive de ovan, returnerar ett nytt jQuery-object – så det går bra att kedja anropen om man vill göra flera saker med samma element. T ex:

$("#someid").fadeIn("slow").fadeOut("slow");

Vi har inkluderat lite test-animationer i exempelfilen ovan.

Hoppas att detta gett er lite kul inspiration att leka med över ledigheten.

Glad påsk!