Kategoriarkiv: Programmering

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!

Dela: Facebooktwittergoogle_pluslinkedinmail

Snakes on a server

Ett av de kanske lite mer ovanliga språken vi har stöd för på Loopia är Python. Python är ett skriptspråk i likhet med exempelvis Perl eller PHP och är ett så kallat general purpose-språk. Detta innebär att Python kan användas till allt mellan himmel och jord. Python används bland annat av NASA, ILM och Astra Zeneca. Ett annat exempel är Eve Online, ett onlinespel, som använder en specialversion av Python (Stackless Python) till stor utsträckning.

Det som gör att jag gillar Python är flera saker. En prominent anledning är att det är så lätt att läsa Pythonkod. En annan anledning är att jag gillar funktionell programmering (tänk exempelvis LISP (SBCL), Haskell och Erlang) och Python har inslag av just det.

Nåväl, talk is cheap så nu är det hög tid för några exempel.

Databashantering

En kort exempel på databashantering (utan felhantering).

import MySQLdb

db = MySQLdb.connect("host", "user", "password", "database")
db_cursor = db.cursor()
db_cursor.execute("SELECT title FROM books")

row = db_cursor.fetchone()
count = 1
while row is not None:
     print count, row[0]
     count += 1
     row = db_cursor.fetchone()

db_cursor.close()
db.close()

Detta ger följande utmatning från min testdatabas:

1 Security Engineering: A Guide to Building Dependable ...
2 Secrets and Lies: Digital Security in a Networked World
3 Hackers and Painters: Essays on the Art of Programming

Sortering av en hash

Sortering av en hash (som heter dictionary i Python) på värdet istället för nyckeln:

data = {'a' : 2, 'b' : 1}
for key in sorted(data.keys(), lambda x, y: cmp(data[x], data[y])):
        print key, data[key]

Detta ger följande utmatning:

b 1
a 2

Annat spännande …

Andra attraktiva funktioner är filter(), map() och reduce(). Dessa används för att filtrera och sammanställa data. Ett något krystat exempel på detta är följande kodsnutt som filtrerar ut alla tal som är större än noll ur en lista, dela dessa med två och sedan summerar:

data = [6, 4, 8, -3, 5, -7]
bigger_than_zero = filter(lambda x: x > 0, data)
half = map(lambda x: x / 2.0, bigger_than_zero)
the_sum = reduce(lambda x, y: x + y, half)
print the_sum

Ger följande utmatning:

11.5

Det härliga med Python är förstås att allt detta kan skapas med endast en (1) rad kod. Denna är förvisso ganska lång och behöver därför radbrytas i detta exempel (med ett \-tecken).

print reduce(lambda x, y: x + y, map(lambda x: x / 2.0, \
filter(lambda x: x > 0, [6, 4, 8, -3, 5, -7])))

Utmärkta introduktioner för dig som programmerat tidigare och som tycker Python verkar intressant hittar du här och här. Lycka till!

Dela: Facebooktwittergoogle_pluslinkedinmail