Workshop-KommIT-A-Basic-Client-Server

From rtgkomArkiv
Jump to: navigation, search

Hvad er det?[edit]

Client/server teknologi betyder et samarbejde mellem to programmer, hvor det ene, "clienten", kan spørge efter- og få data fra det andet, "serveren". Det kan man have glæde af i rigtig mange sammenhæng bl. a. i webapplikationer, hvor brugeren gives mulighed for at lægge information ind og hente information ud (søgefunktion, telefonbog, gæstebog, fora, chat m.v.). Client/server-modellen er i det hele taget central for den måde de fleste computernetværk fungerer på. http://compnetworking.about.com/od/basicnetworkingfaqs/a/client-server.htm

Hvordan gør man?[edit]

En måde at etablere client/server funktionalitet på er ved hjælp af PHP, MySQL og Apache, hvor PHP er et scriptsprog (til at skrive webprogrammer med), MySQL et databaseprogram og Apache er en webserver (der kan eksekvere PHP og SQL).

Man kan hente og installere disse værktøjer til sin egen maskine fra en samlet pakke fra fx: MAMP (til mac) og XAMPP (mac/Lin/Win). Sidstnævnte har en udvikling af mySQL, de kalder "MariaDB", der i det væsentligste skulle være kompatibel med mySQL (dog ikke testet i skrivende stund)

Der er også WinLamp (kun windows)


!Bemærk!

Hvis du i WinLamp bliver nægtet adgang til phpMyAdmin, kan følgende trin måske være en løsning:

  • Gå ind i php.ini filen (start>all programs>WinLamp>Configure>Edit PHP php.ini file)
  • tryk Ctrl+F og søg på "mysql.default_user"
  • Tilføj " 'root'" (Husk mellemrummet)
  • Find mysql.default_password et par linjer længere nede, og tilføj " 'mysql'" (Igen husk mellemrummet)
  • Gem filen og prøv igen

!Bemærk!

Man kan også komme ud for, at Apache ikke vil starte. Det skyldes ofte en portkonflikt (Apache vil gerne brug port 80, som så kan være optaget af andre kørende programmer). Løsningne er enten at dræbe de konfliktende processer eller at omkonfigurere Apache så den "lytter" til en anden port.

Hands on:[edit]

  • Begynd med at sikre dig, at du har Apache, MySql og PHP installeret på din maskine. Og at både PHP og MySQL virker. Det gør du ved at taste http://localhost/ ind i URL feltet i browseren (adressen kan være lidt forskellig afhængig af hvad man har installeret). Hvis Apaches velkomstside vises (afhængig af, hvad du har installeret, vil du få en startside vist med en velkomst og evt. links til lidt forskelligt), så virker Apache. Dernæst prøver du http://localhost/phpmyadmin/ og hvis du får kontakt med phpmyadmin programmet og kan browse databaserne i MySQL, ja så virker MySQL også.
  • Nu kan du lege lidt med php. Et sted at starte kunne være her: http://dk.php.net/manual/en/tutorial.firstpage.php eller også http://www.w3schools.com/php/default.asp (som nok er mere pædagogisk) - du gemmer dine php-filer i webserverens dertil indrettede mappe. Bruger du WinLAMP, hedder stien C:\Program Files\WinLAMP\Apache2\htdocs. Når du så skal have det, som du fx har kaldt "test.php", vist i browseren skriver du http://localhost/test.php i URL-feltet.

En simpel prototype[edit]

  • Nedenfor gennemgås et eksempel på et simpelt produkt, der benytter database. Det består af 3 filer, "simpletagwall.php", "handleinput.php" og "show.php". Eksemplet forudsætter, at der er oprettet en database med en tabel på den server, den skal køre på. Det kan kan du gøre ved hjælp af phpmyadmin (hvis altså ikke du vil binde an med manuelle SQL-kommandoer), hvor du klikker "New" og indtaster navn på databasen og derefter klikker "Create" . I dette eksempel kaldte vi databasen "tagwall" og oprettede derefter en tabel ved navn "tagwallinput". I tabellen skal du oprette 3 rækker ("columns(!)): "navn", "datotid" og "kommentar". Det skal se således ud i phpmyadmin:


<html> <img src="http://rtgkom.dk/~jan/billeder/databasetagwall.png" border="1"> </html>

(Hold øje med, at type og collation står rigtigt)


Start - input fra gæst:[edit]

I "simpletagwall.php", som er startsiden, ligger en række html-formularer, som brugeren har mulighed for at skrive i (her gengivet uden tags til layout): <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </head>

<form id="form1" name="form1" method="post" action="handleinput.php"> Hvad hedder du?
<input name="navn" type="text" id="navn" size="40" />

Hvad har du at sige?
<textarea name="kommentar" cols="40" rows="3" id="kommentar"></textarea> <input type="submit" name="Submit" value="Tilføj!" /> <input type="reset" name="Submit2" value="Tøm felt!" /> </form>

</html> </source>

Husk at gemme filen i htdocs-mappen (bruger du XAMPP, vil den sandsynligvis kunne findes ...Programmer/XAMP/xamppfiles/htdocs (mac))

Gem input:[edit]

I "handleinput.php", som er den fil der peges på ovenfor i "action"-attributten, og som indeholder det script, der skal behandle gæstens inputs, etableres der kontakt til databasen og brugerens input gemmes pg fordeles i de rækker, der oprettet til dem. Scriptet svarer, om operationen er gået godt (bemærk, at host, brugernavn, passwd mv. er/kan være anderledes hos dig - XAMPP kommer som udgangspunkt med blankt mysql-password): <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </head> <?php $host="localhost"; // Host name - som oftest "localhost" $username="root"; // Mysql username $password="root"; // Mysql password $db_name="tagwall"; // Navnet på din database (som forudsættes oprettet) $tbl_name="tagwallinput"; // Navnet på din tabel (som ligeledes forudsættes oprettet)

// Opretter forbindelse til database og vælger tabel. mysql_connect("$host", "$username", "$password")or die("cannot connect server "); mysql_select_db("$db_name")or die("cannot select DB");

$datotid=date("d/m/y - H:i:s"); //dato og tid

$navn = $_POST["navn"];//navnet, der er intastet $kommentar = $_POST["kommentar"];//kommentaren

$sql="INSERT INTO $tbl_name(navn, kommentar, datotid)VALUES('$navn', '$kommentar', '$datotid')"; $result=mysql_query($sql);

//check if query successful if($result){ echo "Din kommentar blev tilføjet!"; echo " "; echo "<a href='show.php'>Vis kommentarer</a>"; // link til siden med selve tagwallen }

else { echo "Ups.... fejl"; }

mysql_close(); ?> </html> </source>


Vis resultat:[edit]

I "show.php" forbindes der (igen) til databasen hvorfra de gemte inputs fra gæsterne så hentes og skrives ved hjælp af en "while-løkke" d.v.s. den tager række for række i tabellen indtil der ikke er flere: <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </head> <?php

$host="localhost"; $username="root"; $password="root"; $db_name="tagwall"; $tbl_name="tagwallinput";

// Connect to server and select database. mysql_connect("$host", "$username", "$password")or die("cannot connect server "); mysql_select_db("$db_name")or die("cannot select DB");

$sql="SELECT * FROM $tbl_name"; $result=mysql_query($sql);

while($rows=mysql_fetch_array($result)){ ?> <?php echo $rows['datotid']; ?>


<?php echo $rows['navn']; ?>:

<?php echo $rows['kommentar']; ?>

<?php }

mysql_close(); //close database ?>

<a href="simpletagwall.php">Skriv kommentar</a>

</html>

</source>

Bemærk at der i kodeeksemplet ikke er gjort noget ud af det grafiske. Det kan tilføjes med supplerende html- og css-kodning. Bemærk desuden, at eksemplet formentlig ikke vil virke med PHP-versioner senere ende 7.0

Bemærkninger[edit]

Du kan lave nogle forsøg ud fra ovenstående på din egen maskine - med en lokal webserver - og blive fortrolig med nogle dele af disse værktøjer. Vær opmærksom på, at det er et meget råt eksempel, hvor der ikke er taget højde for sikkerheden - hvis du oploader den til vores webserver, bliver den tilgængelig for alverdens spambots m.v. Derfor rådes du til at vente med at lægge denne type funktion op på dit StudieWeb til du er så godt inde i teknologien, at du kan stå inde for en rimelig sikkerhed. Rådfør dig med vejleder.