2014InfB23

From rtgkomArkiv
Jump to: navigation, search

Contents

Aflevering af projektet og evaluering af undervisningen- Gkb 14:54, 18 May 2015 (CEST)[edit]

Projektet skal afsluttes i dag. Rapport og produkt skal afleveres på Lectio og på gruppernes projektbruger på rtgkom.dk.

Afleveringen på Lectio[edit]

Der er oprettet en opgave til afleveringen på Lectio. Bemærk at denne gang skal I aflevere både rapport og produkt på Lectio. Det er både for at sikre at vi har en backup og også for at træne proceduren som vi bruger i slutningen af 3. år, hvor I på samme måde som 3. års eleverne i år, nok skal aflevere i de tre systemer, nemlig Fronter (ikke produktet), Lectio og på rtgkom.dk. Det er for at slippe for at lave fysiske eksemplarer på papir, og det er anden gang vi laver helt digital aflevering i InfB og PrgC. Censor får så adgang til rapporterne fra InfB og journalerne fra PrgC på Fronter.

Her er teksten som jeg har skrevet som vejledning til opgaven på Lectio:

Aflever rapport og produkt.
Rapporten skal være i PDF format. Upload også orginalfilen, altså typisk en DOCX eller ODT fil.
Hvis produktet består af flere filer, så skal det aflevers som en ZIP fil. 
Det skal afleveres således at både koden kan ses og kompileres og videreudvikles, samt således at 
det færdige produkt kan afprøves umiddelbart (hvis det er muligt). 
Hvis produktet ikke kan uploades på grund af størrelsen, så afleveres det kun på projektbrugeren på rtgkom.dk.

Aflevering på en projektbruger på rtgkom.dk[edit]

Jeg har nu oprettet projektbrugere for alle seks grupper. Husk at I bruger jeres normale brugernavn og password til at logge på med Filezilla eller WinSCP og så browser I til web-mappen for jeres projektbruger som ligger i /files/projects/projektbrugerens_navn/public_html. For nærmere vejledning se posteringen fra 30. april, hvor jeg har beskrevet i relativt store detaljer hvordan I bruger jeres gruppes projektbruger.

Aflever både rapport og produkt.

Rapporten[edit]

Det gælder lige som på Lectio at rapporten skal afleveres i PDF format og at orginalfilen skal også uploades, -i tilfælde af at PDF filerne ikke virker efter hensigten.

Nogle gange laves de således at de kun ser godt ud på den maskine de er lavet på. Test derfor gerne på andre maskiner. Dette kan vistnok ske f.eks. hvis man har brugt en lidt speciel font som ikke findes på alle computere. Skriftsnittets definition inkluderes nemlig ikke altid automatisk i selve PDF filen, og så bruger fremvisningsprogrammet (evt. Acrobat Reader) en eller anden font som findes på computeren hvor vi åbner PDF filen.

  • Derfor, aflever en PDF fil og også orginalfilen, typisk DOCX eller ODT filer, ikke?
  • Vær venlig og pak ikke rapprten i en ZIP fil eller andet komprimeringsformat.

Produktet[edit]

Det gælder lige som på Lectio at hvis produktet består af mange filer, så skal det afleveres pakked i en ZIP fil som gør det lettere eventuelt at downloade det og pakke ud og afprøve det. Dette er mest relevant hvis man har brugt udviklingsværktøjer som bruger et projektkoncept til at holde sammen på mange forskellige filer i mange mapper. Det kan f.eks. være Qt Creator, Lazarus IDE, Unity 3D eller Visual Basic.

Hvis produktet er et client-server webprodukt som kan køre på vores webserver, så skal det også afleveres i kørende stand, således at det kan afprøves i selve afleveringsmappen (public_html). Hvis produktet f.eks. består af en enkelt PHP fil, så skal php filen bare lægges i default_html mappen. Derimod hvis der er både en PHP fil og en CSS fil, evt. i et subdirectory, så skal der både være en produkt.zip fil (vælg navn som er relevant for projektet) og den køreklare version.

Evaluering af undervisningen[edit]

Vi diskuterede evaluering af undervisningen i faget. Der publiseres i dag kl. 17:00 et evalueringsskema i Lectio hvor I anonymt kan svare på nogle afkrydsningssprøgsmål og skrive fri tekst. Spørgeskemaet lukker kl. 17:00 i morgen, og resultaterne publiseres kl. 18:00.

Jeres evaluering af undervisningen indgår som en del af beslutningsgrundlaget når vi planlægger hvordan vi skal gennemføre undervisningen og hvordan vores laboratorielokaler skal udstyres og indredes. Det er derfor vigtigt, hvis du kan bruge lidt tid på at give os gode råd.

Projektbrugere for grupperne, Flask på rtgkom.dk - Gkb 17:40, 30 April 2015 (CEST)[edit]

Det var kun to af grupperne som nåede at vælge titel og undertitel for sine projekter sidste gang. Jeg oprettede derfor kun projektbrugere for disse to grupper, men jeg glemde vist at forklare hvordan I uploader jeres produkt til projektbrugerens web-publiseringsmappe.

Projektbrugere for grupperne[edit]

For at jeg kan lave en projektbruger så skal I have registreret både titel og undertitel for jeres projekt i tabellen her nedenfor i wikiartiklen. Når jeg har oprettet en projektbruger for jeres gruppe så kan I bruge den som bekrevet her:

  • Log på rtgkom.dk med FileZilla eller WinSCP eller noget andet godt FTP program. Brug jeres normale brugernavn og password og brows til projektbrugerens home-directory. I det ligger flere mapper og en af dem er public_html, og det er den som I skal aflevere rapport og produkt i.
  • Alle projektbrugere har home-directory i mappen /files/projects. For den første gruppe i tabellen nedenfor har jeg oprettet en projektbruger med navnet 2014InfB23LaeringsproduktGr01. Den har altså home-directory i /files/projects/2014InfB23LaeringsproduktGr01/ og vores Apache webserver, serverer filer som ligger i mappen /files/projects/2014InfB23LaeringsproduktGr01/public_html.
  • Husk at I logger på med jeres normale brugernavn og password. Når vi opretter projektbrugeren for jeres gruppe, så giver vi jer rettigheder til at skrive i mappen public_html.
  • For at browse jeres aflevering, så kan I bruge den liste over alle projektbrugere som er oprettet i systemet, den ligger her: http://www.rtgkom.dk/prpub2.php.
  • Vi kalder den funktionalitet som viser alle vores projekter for Project publisher og på http://rtgkom.dk er der en link, Projekt publisher, http://www.rtgkom.dk/prpub2.php, som fører til denne liste.
  • I kan også indtaste URL'en for jeres projektbruger direkte, f.eks. http://www.rtgkom.dk/~2014InfB23LaeringsproduktGr01/.
  • Der ligger fire tomme filer i web-mappen (public_html). De hedder about.txt, thumb1.jpg, thumb2.jpg og thumb3.jpg. Det er meningen at Project Publisher funktionen skal bruge disse filer til at præsentere jeres projekt når nogen klikker på det i den store liste over projektbrugere. about.txt skal indeholde et kort resume af hvad jeres projekt handler om og de tre billedfiler skal indeholde nogle fotografier eller skærmdumps som hjælper gæster på rtgkom.dk til at forstå hvad jeres projekt handler om.

Vi så på projektoren hvordan man logger på og browser til en projektbrugers home-directory. Her er et screendump som viser det. Bemærk at du kan klikke på billedet for at se en ukomprimeret version af skærmdumpen. Læg mærke til vejen til projektbrugerens home-directory og at web-mappen hedder public_html!.

http://rtgkom.dk/~gkb/billeder/Projektuser_FileZilla_overbliksbilled_800x512.png

Flask på rtgkom.dk[edit]

De fleste grupper har vistnok valgt at implementere client-server funktionaliteten i deres læringsprodukter ved hjælp af PHP og MySQL, - og det er fint. Et par grupper har valgt at teste Flask modulet til Python, og da I skal aflevere jeres produkter på projektbrugerne på rtgkom.dk, - ja, så bliver vi nødt til at forsøge at få Flask til at virke på rtgkom.dk.

Vi søgte lidt inspiration på nettet og valgte at bruge http://developer.codero.com/community/installing-flask-on-ubuntu/ som støtte ved installationen. Vi lavede følgende, sådan omtrendt:

  1. sudo apt-get update
  2. sudo apt-get install python-pip
  3. sudo pip install Flask
  4. vi helloworld.py
  5. cat helloworld.py

Og programmet som vi lånte fra http://developer.codero.com/community/installing-flask-on-ubuntu/ så altså sådan ud:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run()

Vi eksekverede nu programmet med kommandoen

gkb@fs:~$ python helloworld.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

og håbede at kunne se teksten "Hello World!" i en browser ved at gå til URL'en http://rtgkom.dk:5000, men det virkede ikke.

Vi prøvede så i en anden Pytty terminal mod rtgkom.dk at starte den tekstbaserede browser Lynx på selve webserveren med kommandoen

gkb@fs:~$  lynx 127.0.0.1:5000

og så så fik vi det ønskede svar og nu vidste vi at der var "hul i gennem", altså at vores installation af Flask var lykkedes og at den kunne servere websider til browsere. Følgende billed viser den gode nyhed.

http://rtgkom.dk/~gkb/billeder/Flask_Hello_World_med_Lynx.png

Men der var altså noget i vejen som gjorde at vi ikke kunne browse nå Flask's webserver fra andre maskiner på vores netværk.

Gustav huskede så at han har tilføjet nogle parametere i app.run() kommandoen og når vi indførte dem, så kunne vi også browse Flask's webserver både fra andre maskiner på vores netværk og fra internettet.

Hvad var det for nogle parametre, Gustav?

Følgende kopi fra terminalen som vi køret vores Python program i, viser hvordan to forskellige computere på vores netværk henvender sig til Flask serveren.

gkb@fs:~$ python helloworld.py
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
10.0.0.121 - - [30/Apr/2015 13:22:41] "GET / HTTP/1.1" 200 -
10.0.0.121 - - [30/Apr/2015 13:22:41] "GET /favicon.ico HTTP/1.1" 404 -
10.0.0.131 - - [30/Apr/2015 13:22:44] "GET / HTTP/1.1" 200 -
10.0.0.131 - - [30/Apr/2015 13:22:44] "GET /favicon.ico HTTP/1.1" 404 -
10.0.0.121 - - [30/Apr/2015 13:22:54] "GET / HTTP/1.1" 200 -
10.0.0.121 - - [30/Apr/2015 13:22:54] "GET /favicon.ico HTTP/1.1" 404 -

Det ser ud for at vi nu kan bruge Flask både inde på vores netværk og hjemmefra. Nærmere afprøvning behøves dog nok.

Arbejde med første prototype og dokumentation i rapporten - gkb, 27. April 2015[edit]

I dag skal vi arbejde videre med udvikling af den første prototype til produktet og vi skal dokumentere i rapporten at vi har arbejdet med alle de fem systemudviklingsaktiviteter som indgår i en iteration i vores systemudviklingsmetode.

Aflevering af første prototype og udkast til rapport[edit]

  • Prototypen skal afleveres som et website for projektgruppens projektbruger. Den kan oprettes når tabellen nedenfor, i posten fra 14. april, indeholder både titel og undertitel for projektet.
  • Rapporten (udkastet) afleveres på Lectio.

Systemudvikling og arbejde med udvikling af første prototype - gkb, 23. April 2015[edit]

Vi havde et plenummøde hvor vi diskuterede systemudvikling generelt, og så kiggede vi lidt nærmere på Extreme Programming og hvordan begrebet user story bruges i den metode. Undervejs diskuterede vi lidt programmeringssprogenes udvikling og så diagrammer over den. Se lignende diagram her http://rigaux.org/language-study/diagram.html og mere information her http://en.wikipedia.org/wiki/History_of_programming_languages og her http://archive.oreilly.com/pub/a/oreilly//news/languageposter_0504.html.

Projektbeskrivelsen, fortsat arbejde med - Gkb 15:10, 21 April 2015 (CEST)[edit]

I dag arbejder vi videre med projektbeskrivelsen. Husk at den skal indeholde alle de afsnit som jeg har beskrevet i min skabelon, se her: http://www.rtgkom.dk/wiki/Guide:Projektbeskrivelse_og_rapport

I rigtige projekter laves laves der ikke kun en projektbeskrivelse. Der laves også en kontrakt som ofte i store detaljer beskriver betingelserne for hvordan køber betaler for produktet. I softwareprojekter laver man ofte en plan for f.eks. tre versioner af produktet (tre prototyper) som hver for sig indeholder nogen funktionalitet som brugerne kan genkende som en løsning på nogen af de problemer systemet skal løse for dem eller deres organisation.

Nu er vores projekt ikke et rigtigt projekt hvor vi skal sælge produktet for penge. Vores projekter er skoleprojekter og jeres eksamensprojekter erstatter projektbeskrivelsen egentlig kontrakten.

Derfor er den et vigtigt dokument.

Projektbeskrivelsen skal afleveres i Lectio og der er afsat én time af elvtid.

Læsestof[edit]

Læs følgende materiale som forberedelse for det fortsatte arbejde med projektet.

Projektbeskrivelsen, en slags kontrakt - Gkb 10:18, 16 April 2015 (CEST)[edit]

I dag skal alle projektgrupperne lave en projektbeskrivelse. I eksamensprojektet i InfB skal skolen godkende elevernes projektbeskrivelse i starten af projektforløbet. Det er derfor vigtigt at øve lidt den process at lave en projektbeskrivelse som opfylder de krav som stilles til projektbeskrivelsen i eksamensprojektet. MediaLab har en skabelon for både projektbeskrivelse og rapport som kan bruges i eksamensprojekter i InfB og PrgC.

I dag skal I bruge skabelonen for projektbeskrivelsen til at lave en projektbeskrivelse for jeres projekt. I skal øve brugen af alle de begreber som introduceres i skabelone. Et at dem er begrebet ressourceplan, og her følger en lille vejledning om hvordan I kan komme i gang med at lave den. Denne vejledning har jeg kopieret direkte fra min vejledning for holdet InfB34 som nu er i gang med deres eksamensprojekt.

Resurseplan[edit]

Resurseplanen er en del af projektbeskrivelsen, og den er en tidsplan over hvordan du vil fordele dine resurser på de aktiviteter som du kan se at du skal udføre i projektet.

Brug gerne et rigtigt planlægningsprogram til at lave denne planlægning, f.eks. Planner eller GanttProject.

Jeg har lavet et udkast til en skabelon for resurseplanlægning med GnattProject, hvor jeg har brugt navnene på aktiviteterne i vores systemudviklingsmodel til definere Tasks, og jeg har defineret forgænger for hver task, således at Gnatt diagrammet begynder at se lidt rigtigt ud.

Tiden for hvert task skal I selv indtaste, ligesom jeg ikke definerede subtasks for aktiviteterne i 2. iteration. Jeg har brugt forkortelser for aktiviteterne i 2. iteration, men de skulle være til at afkode ved at se på navnene på aktiviteterne i 1. iteration, hvor jeg har noteret forkortelsen sidst i navnet på aktiviteterne.

I må gerne bruge denne skabelon som udgangspunkt for resurseplanlægningen i jeres eksamensprojket.

Jeg har kun defineret tasks for to iterationer (udviklingen af to prototyper), og jeg har ikke defineret tiden for hvert task. Jeg har heller ikke defineret resurserne, -det vil normalt være jer selv.

Her er et link til skabelonen, som er en XML fil: http://rtgkom.dk/~gkb/pubdoc/Generisk_model_for_resurseplanlaegning_for_projekter_i_RTG_MediaLab.gan, og her er et billed som viser hvordan den ser ud i programmet.

http://rtgkom.dk/~gkb/billeder/generisk_resurseplan_473x365.png

Webbaseret læringsprodukt, et client-server produkt - Gkb 14:13, 14 April 2015 (CEST)[edit]

Vi starter nu et projektforløb hvor vi designer og implementerer et webbaseret læringsprodukt baseret på client-server funktionalitet. Produkterne skal kunne hjælpe en afgrænset målgruppe til at lære nogle afgrænsede dele af pensum i folkeskolen, gymnasiet eller andre skoler eller skoletrin.

Produktet skal lagre nogen data om brugeren og dennes anvendelse af produktet i en SQL database på webserveren, således at disse overlever fra en session til en anden.

Der arbejdes i projektgrupper med to eller tre elever.

Der kan bruge hvilken som helst værktøjer, f.eks. Python og modulet Flask (http://flask.pocoo.org/), eller Apache, PHP og MySQL, f.eks. vha. Wamp Server (http://www.wampserver.com/en/), MAMP (https://www.mamp.info/en/) eller LAMP (http://en.wikipedia.org/wiki/LAMP_%28software_bundle%29).

Udviklingsarbejdet kan laves lokalt på gruppemedlemernes arbejdsstationer, men det skal afleveres på MediaLab's webserver og derfor kan det være en god idé løbende at teste at produktet faktisk fungerer i det miljø.

MediaLab's systemudviklingsmetode skal bruges til planlægning, gennemførelse og dokumentation af projektarbejdet. Se her http://www.rtgkom.dk/wiki/MediaLab:_Systemudviklingsmetode. Det indebærer blandt andet (i lidt tilfældig orden) at:

  • Der skal allerede i begyndelsen af forløbet laves en ressourceplan ved hjælp af et program som f.eks. GanttProject (http://www.ganttproject.biz/ eller http://sourceforge.net/projects/ganttproject/).
  • Efter analyse og problemformulering skal mindst to til tre forskellige værktøjsuafhængige løsningforslag beskrives. De tre løsningsforslag skal være funktionsmæssigt og designmæssigt forskellige, men det skal alle med rimelighed kunne forventes at de inoget omfang vil kunne løse problemet. Se nærmere i vejledningen om projektbeskrivelsen.
  • Det valgte løsningsforslag skal beskrives nærmere, både det indre desogm og det ydre design. Se nærmere i sektionen om designaktiviteten i voeres systemudviklingsmetode.
  • I rapportens afsnit om design skal vores to designmodeller bruges til at strukturere diskussionen af produktets design. Se nærmere i beskrivelsen af designaktiviteten i voeres systemudviklingsmetode.
  • At der skal laves spike solutions for kerneproblemerne i projektet inden arbedjet med fremstilling af første prototype påbegyndes. Kerneproblemerne og arbejdet med de tilhørende spike solutions skal beskrives i dokumentationen (rapporten).

MediaLab's vejledning om projektbeskrivelse og rapport skal bruges. Se her http://www.rtgkom.dk/wiki/Guide:Projektbeskrivelse_og_rapport.

Projektperioden er fra tirsdag d. 14 April til mandag d. 18. Maj.

  • Projektbeskrivelsen skal afleveres tirsdag d. 21. April.
  • Prototype nr. 1 af produktet og udkast til rapporten skal afleveres mandag d. 27. April.
  • Rapport og produkt skal afleveres mandag d. 18 Maj.

Arbejdsgrupper[edit]

Hold: 2014InfB23 - Webbaseret læringsprodukt - registrering af arbejdsgrupper
Udfyld nedenstående skema...
Gruppenr. Gruppemedlemmernes navne Links til afleveringsmapperne Problemformulering Titel Undertitel Afsender Budskab Modtager (målgruppe) Kanal (medie) Effekt hos modtageren Tools
0 Karl Bjarnason http://www.rtgkom.dk/~gkb/2013_afsluttende_opgave/ Det problem som jeg vil forsøge at løse i mit projekt er at mange gymnasieelever har svært at forstå betydningen af størrelsen og fortegnet på konstanterne a, b og c i en andengradsligning. Stor eller lille, positiv eller negativ Konstanternes betydning i en andengradsligning Forlaget Virtuel Læring AS Du kan godt lære matematik, du kan lære på egen hånd, ... Gymnasieelever i Danmark Program som formidles over WWW. Bedre kundskaber om andengradsligningen og deraf bedre selvtillid og ... Lazarus (open source efterligning af Delphi!)
1 Ali, Simon A og Victoroo Det problem vi har tænkt os at løse er et vedvarende problem i folkeskolen, hvor unge elever gennem længere tid har haft besvær med at lære matematik. Matematik-Quiz Anvendelse af matematik i mellemskolingen Unge IT-studerende Mellemskolingen Webside på world wide web, modulet flask installeret i python Læring af matematik
2 Daniel,Gustav & Andreas ”Det problem som vi vil forsøge at løse i vores projekt er at ordblinde folkeskoleelver der går i 4-6 klasse har svært ved addition, substitution og multiplikation.” Matematik for ordblinde lær addition, substitution og multiplikation på nettet 3 elever fra htx i roskilde
3 Simon.P, Thananat og Arkadii Matematik Quiz Et unvervisningsværktøj til folkeskolen
4 Marcus, Lukas og Jack Matematik Quiz Matematik quiz En quiz til folkeskole elever
5 Frederik, Peter og Joakim Det problem som vi/vi vil forsøge at løse i dette projekt er at producere et online produkt der kan være med til at hjælpe mennesker med matematisk fobi Matematikquiz En matematikquiz til folkeskoleelever for at afværge matematisk fobi En gruppe af gymnasieelever Vores budskab er at matematik skal være sjovt og ikke skræmmende Folkeskoleelever Internettet At forhindre matematisk fobi Php, HTML, Matematik D-F
6 Mathias og Samuel Grammatik og ordklasser Identificering af stavefejl, rettelse af nutids-r og at sætte ord i den korrekte ordklasse. Dansk Sprognævn At lære og oplyse om korrekt grammatik. Folkeskoleelever på mellemskoleniveau. Internettet Bedre grammatisk forståelse.
7
8
9

Client-Server med PHP, Apache, MySQL fortsat, Gkb 10:30, 19 March 2015 (CET)[edit]

Vi fortsætter arbejdet med at oprette en databse og en tabel med phpMyAdmin. Se posten fra 17. mars nedenfor. Der har jeg beskrevet et eksempel på hvordan vi kan brue en SELECT query til at hente alle records fra tabellen og vise dem i en webside. Jeg er så også begyndt på et eksempel på hvordan vi kan bruge en INSERT query til at tilføje en record til tabellen. Du skal nu gøre følgede:

  • Afprøv Eksempel på en SELECT query på din webserver lokalt på din egen computer!
  • Afprøv Eksempel på en INSERT query på din webserver lokalt på din egen computer!

Client-Server eksempel med PHP, Apache og MySQL, Gkb 14:45, 17 March 2015 (CET)[edit]

Oprettelse af en tabel[edit]

Log ind i MySQL med phpMyAdmin og opret en database og en tabel og tre records i tabellen.

  • Databsen skal hedde: dbKontakt
  • Tabellen skal hedde: tblPersoner
  • Felterne i den skal hedde: id, Fornavn, Efternavn, Telefonnr
    • Datatyperne for felterne skal være INT for det første felt og VARCHAR med længde på f.eks. 50 for de tre sidste. Læse gerne om datatyperne her http://dev.mysql.com/doc/refman/5.7/en/char.html.
    • For feltet id skal INDEX sættes til PRYMARY og A_I skal checkes af.

Gem tabellen og indsæt (Insert) f.eks. tre records i den. Brug evt. følgende data:

Peter, Petersen, 12345678
Ole, Olsen, 45671234
Anders, Andersen, 8765432

Eksempler[edit]

Eksempel på en SELECT query[edit]

Nu prøver vi at lave et PHP script som henter alle rækkerne (records) fra tabellen tblPersoner i databasen dbKontakt på serveren localhost.

Fra http://php.net/manual/en/mysql.examples-basic.php henter vi kildekode som vi kan bruge til dette formål. Vi skal bare indsætte brugernavn, password, servernavn, databasenavn og tabelnavn på de rigtige steder i scriptet.

Scriptet ser sådan ud inden vi laver noget om. Kopier det og gem med navnet hent_alle_records.php i webmappen under WAMP på din computer.

<?php
// Connecting, selecting database
$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password')
    or die('Could not connect: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('my_database') or die('Could not select database');

// Performing SQL query
$query = 'SELECT * FROM my_table';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

// Printing results in HTML
echo "<table>\n";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
    echo "\t<tr>\n";
    foreach ($line as $col_value) {
        echo "\t\t<td>$col_value</td>\n";
    }
    echo "\t</tr>\n";
}
echo "</table>\n";

// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link);
?>

Når jeg havde indført de ændringer i kildekoden som omtales ovenfor, browsede jeg til http://localhost/hello_world.php og fik noget som lignede følgende resultat i webbrowseren:

Connected successfully
1	Peter	Petersen	12345678
2	Ole	Olsen	45671234
5	Anders	Andersen	87654321

Får du også et resulat som ligner dette? Om ikke, så analyser fejlen og prøv igen indtil du får det til at virke.

Det er interessant at kigge på den HTML kode som ligger til grund for resultatet i browseren, det genereres jo af PHP scriptet. Her er den HTML som min browser modtog fra webserveren:

Connected successfully<table>
	<tr>
		<td>1</td>
		<td>Peter</td>
		<td>Petersen</td>
		<td>12345678</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Ole</td>
		<td>Olsen</td>
		<td>45671234</td>
	</tr>
	<tr>
		<td>5</td>
		<td>Anders</td>
		<td>Andersen</td>
		<td>87654321</td>
	</tr>
</table>

Eksempel på en INSERT query[edit]

I det forudgående eksempel så hentede vi alle records (poster) fra en tabel. Nu vil vi gerne tilføje nye records til tabellen. Vi skal lave en webside som har en form (et FORM element) med inputfelter hvor vi kan indtaste fornavn, efternavn og telefonnumer. Der skal også være en submit-knap som vi kan trykke på når vi er færdige med indtastningen. Derved skal indholdet i felterne sendes til webserveren som skal sende det til behandling i et PHP script som vi skal skrive. Vi kan kalde websiden for webside_med_form.html og PHP scriptet som skal behandle formen kan vi kalde indsaet_en_ny_record.php.

Vi skal bruge et FORM element og da FORM er et HTML element, så søger vi efter information hos http://w3.org som jo har ansvaret for udvikling af HTML. Vi kan f.eks. søge på "HTML5 specs FORM" og så finder vi hurtigt beskrivelsen af FORM elementet i HTML5 specifikationen. Den er her: http://www.w3.org/TR/html5/forms.html.

Det første FORM eksempel som også indeholder attributen action ser sådan ud:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

Dette eksempel viser flere forskellige typer af input elementer. I dette eksempel handler det om en form som bruges til at bestille pizzaer. Når den vises i en webside så ser den sådan ud:

http://rtgkom.dk/~gkb/billeder/pizza_form_50_procent.png

Kopier HTML koden for formen, tilføj den obligatoriske HTML for at danne en korrekt formet HTML fil og gem den med navnet webside_med_form.html.

Husk at et HTML5 dokument skal have følgende grundlæggende struktur (lånt fra http://www.w3.org/TR/html5/single-page.html):

<!DOCTYPE html>
<html>
 <head>
  <META CHARSET="UTF-8">
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

Hvor der kun manglede META taggen hvor vi definerer hvilken encoding vi vil bruge. Jeg fandt også et eksempel på sådan en tag i HTML5 specifikatione. Se evt. resultatet af validering af dette lille HTML5 skelet på http://validator.w3.org, det er her: http://validator.w3.org/check?uri=http%3A%2F%2Frtgkom.dk%2F~gkb%2FA_basic_HTML_document.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Indsæt formen i skeletet og afprøv den resulterende webside på din webserver. Du skal bruge en URL som ligner føgende URL:

http://localhost/webside_med_form.html

Prøv at lege lidt med inputfelterne og radio knapperne og check boksene, og tryk på submit knappen. Hvad sker der?

Ok, vi har nu en webside med en form med mange forskellige brugerflade widgets til interaktion med brugeren. Vi skal kun bruge tre input elementer af typen TEXT og en submit knap som vi kan bruge til at sende det vi har indtastet i formen til et PHP script på webserveren. Så vi sletter og møblerer lidt om i vores form og title indtil HTML koden for siden ser sådan ud:
Filen hedder stadig: webside_med_form.html

<!DOCTYPE html>
<html>
 <head>
  <META CHARSET="UTF-8">
  <title>Kontaktliste</title>
 </head>
 <body>
  <h1>Kontaktliste</h1>
    <form action="indsaet_en_ny_record.php" method="get">
      Fornavn: <input type="text" name="Fornavn"><br>
      Efternavn: <input type="text" name="Efternavn"><br>
      Telefonnr: <input type="text" name="Telefonnr"><br>
      <input type="submit" value="Submit">
    </form>
 </body>
</html>

Vi tester nu følgende PHP kode til at indsætte nogle hardkodede værdier for fornavn, efternavn og telefonnr.
Filen skal hedde indsaet_en_ny_record.php

<?php
// Make a MySQL Connection
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("dbKontakt") or die(mysql_error());

// Insert a row of information into the table "example"
mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES('Timmy Mellowman', '23', '3333333') ") or die(mysql_error());  

echo "Data Inserted!";
?>

Prøv nu at trykke på Submit knappen i websiden. Hvis alt går godt, så indsættes nu en ny række (post) i tabellen.

Gå til phpMyAdmin og kig efter. Er Timmy Mellowman indsat i din tabel?

Nu skal vi tilpasse dette PHP script således at vi henter værdierne (values) som bleve indtastet i formens inputfelter fra den specielle array $_GET som vores PHP script automatisk får tilgang til.

Det viste sig lidt sværere end jeg troede.

Den version af PHP som jeg bruger er: Current PHP version: 5.3.10-1ubuntu3.4 Det har jeg testet med følgende PHP script.

<?php
// prints e.g. 'Current PHP version: 4.1.1'
echo 'Current PHP version: ' . phpversion();

// prints e.g. '2.0' or nothing if the extension isn't enabled
echo phpversion('tidy');
?>

Bemærk at jeg har skiftet metode til POST. Jeg tror at GET virker også, men jeg har læst et sted at den metode ikke virker fra og med version 5.4, passer det?

Her er en pototype til løsning som af nogen anledning kun virker korrekt hvis man indtaster tal i alle tre felter.

Der er fortsat en del debuging kode og jeg har ladet nogel af mine eksperimenter stå udkommenteret i koden så det kan ses hvilke navie forsøg jeg har gjort på at få det til at virke.

<?php
// Make a MySQL Connection
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("dbKontakt") or die(mysql_error());

echo $_POST['Fornavn'], $_POST['Efternavn'], $_POST['Telefonnr'];
echo "<br>";
echo $_POST['Fornavn'], $_POST['Efternavn'], $_POST['Telefonnr'];
echo "<br>";
echo $_POST['Fornavn'], $_POST['Efternavn'], $_POST['Telefonnr'];
echo "<br>";

print_r($_POST);

// Insert a row of information into the table "example"
//mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES("$_GET['Fornavn']", "$_GET['Efternavn']", "$_GET['Telefonnr']")") or die(mysql_error());  
//mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES($_POST['Fornavn'] , $_POST['Efternavn'] , $_POST['Telefonnr'])") or die(mysql_error());  
//mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES($_POST['Fornavn'] , $_POST['Efternavn'] , $_POST['Telefonnr']")) or die(mysql_error());  
//mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES($_POST['Fornavn'] , $_POST['Efternavn'] , $_POST['Telefonnr'])") or die(mysql_error());  
//mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES (" . $_POST['Fornavn'] . $_POST['Efternavn'] . $_POST['Telefonnr'] .")") or die(mysql_error());  
mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES (" . $_POST['Fornavn'] ."," . $_POST['Efternavn'] ."," . $_POST['Telefonnr'] .")") or die(mysql_error());  
//mysql_query("INSERT INTO tblPersoner (`Fornavn`, `Efternavn`, `Telefonnr`) VALUES (" . $_POST[`Fornavn`] ."," . $_POST[`Efternavn`] ."," . $_POST[`Telefonnr`] .")") or die(mysql_error());  


echo "<br>Data Inserted!";
?>

Hvis jeg indtaster talværdier i alle tre felter i formen, så kan jeg i phpMyAdmin se at disse er blevet indsat som en ny record i tabellen.

Når jeg indtaster en stræng med bogstaver i felterne, f.eks. "Hallo", så forsøger MySQL at finde et felt med dette navn i tabellen, -og det findes jo ikke.

Det viste sig at værdierne (values) som vi sender med INSERT skal være omsluttet med gåseøjne, som her:

INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES ("Hello","World","1234")

Det kan opnås ved at tilføje escapede gåseøjne, altså backslash efterfulgt af gåseøjne (\"), som her:

mysql_query("INSERT INTO tblPersoner (Fornavn, Efternavn, Telefonnr) VALUES (\"" . $_POST['Fornavn'] ."\",\"" . $_POST['Efternavn'] ."\",\"" . $_POST['Telefonnr'] ."\")") or die(mysql_error());  

Slet de unødvendige debug statements i koden og test at du kan tilføje en record (post) i tabellen.

DivTips[edit]

<html>
<body>
  <form action="foobar_submit.php" method="post">
    <input name="my_html_input_tag"  value="PILLS HERE"/>

    <input type="submit" name="my_form_submit_button" 
           value="Click here for penguins"/>

    </form>
</body>
</html>

Så kan følgende PHP script hente værdier (values) fra formen og vise dem i en webside:

//Fra http://stackoverflow.com/questions/13447554/how-to-get-input-field-value-using-php
<?php
  echo $_POST['my_html_input_tag'];
  echo "<br><br>";
  print_r($_POST); 
?>

PHP, SQL og MySQL med phpMyAdmin, Joomla på cloudaccess.net, - Gkb 17:36, 10 March 2015 (CET)[edit]

Vi arbejder fortsat med at udforske mulighederne i de værktøjer som vi fik stillet til vores rådighed når vi installerede WAMP/LAMP/MAMP.

Nogle arbejdede med PHP og HTML forms. Flere har lavet en form for regnemaskine som f.eks. adderer to tal som indtastes i to inputfelter i websiden.

Nogle begyndte at udforske brugerinterfacet på phpMyAdmin og bruge det til at oprette databaser og tabeller i MySQL.

Nogle kunne ikke vente og oprettede et Joomla website hos http://cloudaccess.net.

WAMP/LAMP/MAMP - Joomla - Cloudaccess.net, Gkb 12:11, 30 January 2015 (CET)[edit]

Sidste gang installerede vi webudviklingsmiljøet på vores maskiner.

I dag skal vi afprøve lidt hvordan vi kan bruge Apache, PHP og MySQL til at lave nogle enkle "Hello World" websider. Altså websider hvor vi bruger både PHP og MySQL til at lave enkel interaktion mellem brugeren og websiden som demonstrerer at PHP og MySQL faktisk er installeret og virker som de skal.


Lav mapper til disse øvelser i mappen som din webserver serverer websider fra. Den hedder htdocs på Mac, www på Windows og ...

Vi kalder mappen for PHP øvelserne for phptest og senere skal vi bruge en med navnet mysqltest til afprøvning af MySQL.

For at komme i gang med PHP kan vi bruge selve manualen på http://php.net/manual/en/, men den findes også lokalt på din maskine.

Du kan også bruge http://www.w3schools.com/php/. I begge tilfælde skal du lave et antal .php filer hvor du afprøver den grundlæggende funktionalitet i programmeringssproget PHP. Det inkluderer vel som minimum at du tester følgende:

  • "Udskrivning" med echo...
  • Variabler for tal og tekst
  • Kontrolsturkturer som for løkker, while løkker, if-else-elseif

Lav en index.php fil i mappen phptest hvor du linker til dine forskellige små testfiler. For eksempel hvis du vælger at bruge W3Schools turtorial, så lav en PHP fil til hvert eksempel. Det første eksempel viser hvordan echo bruges til at indsætte tekst i websiden.

<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html> 
Lav en fil med navnet echo.php og brows den via din Apache webserver. Linket til filen bliver så:
<pre>
http://localhost/phptest/echo.php

Kontroller at din webbrowser viser ca. det samme resultat som Show PHP funktionen hos W3Schools viser når du trykker på knappen "Run example".

Når du har på denne måde afprøvet flere eksempler, så skal du bruge PHP til at løse en 2. gradsligning.

Løsning af 2. gradsligning med PHP[edit]

asdf asdf asdf

Når du har l Når ud synes du


Joumla[edit]

Når du er færdig med det, så installer CMS systemet Joomla og lav en "Hello World" website via administrations-brugerfladen på Joomla.

Socket programmering med Python, Gkb 13:52, 9 January 2015 (CET)[edit]

Dokumentationsarbejdet i forbindelse med Netkit-øvelsen er nu være ved at færdigt og vi behøver en frisk vinkel på netværkskommunikation. I den forbindelse valgte vi at se lidt på hvordan man kan bruge Python til at lave programmer som sender data over netværk, ofte kaldt socket programming.

Her er resultaterne som jeg fik når jeg afprøvede det første client-server eksempel på websiden https://docs.python.org/2/library/socket.html.

Fælgende billed viser situationen efter afprøvning af de to programmer server_v1.py og client_v1.py. Her kører begge programmer, både client og server, på samme computer. Næste skridt i afprøvningen kunne være at køre dem på hver sin computer på netværket.

  • Først blev server-programmet startet i terminalvinduet til venstre.
  • Så blev client-programmet kørt i terminalvinduet til venstre.
  • Server-programmet modtog beskeden "Hello, world" og lagde strængen "asdf" til og returnerede den til clienten.
  • Client-programmet modtog beskeden "Hello, worldasdf" og skev den ud i terminalvinduet, og vi kan således konstatere at serveren faktisk har modtaget og modificeret og sendt beskeden til clienten.

http://rtgkom.dk/~gkb/billeder/server1_client1_640x512.png

Afprøv selv de andre eksempler på websiden.

Netkit, Dokumentationsarbejdet fortsat, 2015-01-06, tirsdag[edit]

Vi fortsatte arbejdet med at dokumentere hvordan vi brugte Netkit.

Vi oprettede en mappe, netkit, i html-mappen hos alle elever i klassen. Der skal dokumentationen lægges.

Vi diskuterede hvordan Seymor Papert og Jacob Nielsen har været vigtige forbilleder for vores arbejde i RTG-MediaLab i flere år. Vi så billeder af begge og vi nåede kort at diskutere Jacob Nielsens Alert Box artiker. Vi så på et konkret eksempel, nemlig http://www.nngroup.com/articles/top-10-mistakes-web-design/.

Netkit, Dokumentation i StudieWebbet, 2014-12-19, fredag[edit]

I dag skal I dokumentere arbejdet med Netkit i jeres StudieWeb med nogle skærmbilleder og forklaringer om hvordan I har installeret og brugt Netkit.

I behøver ikke dokumentere i detaljer jeres arbejde med Netkit øvelserne, men I kunne f.eks. publisere en sekvens af skærmbilleder som viser procesen når I i "Two hosts"-øvelsen, http://wiki.netkit.org/netkit-labs/netkit-labs_basic-topics/netkit-lab_two-hosts/netkit-lab_two-hosts.pdf, bruger tcpdump til at dumpe tcp trafiken til en logfil på den fysiske host (maskine) og hvor I bruger Wireshark til at åbne filen, og hvor I bruger Wireshark til at kigge lidt ind i datapakkerne.

Bemærk hvordan instruktionen vejleder os til at bruge tcpdump for anden gang til at lave logfilen.


I installerer Wireshark med apt-get kommandoen, sådan:

sudo apt-get install wireshark

Hvis kommandoen ikke kan finde en wireshark pakke til at installere så kan I prøve

sudo apt-get updagte

som opdaterer pakkeinformationen på maskinen ved at hente den igen fra de sources som er angivet i /etc/apt/sources.list. Prøv så at installere igen. Hvis dette ikke virker, så sammenlign kilderne i sources.list med kilderne i samme fil på en af de andre computere hvor installationen virker. Rediger filen, gem den og prøv igen. For at redigere filen kan I bruge:

sudo gedit /etc/apt/sources.list

Når Wireshark er installeret, så åbn logfilen og bemærk at der er pakker af to typer, flere ICMP pakker og nogle få ARP pakker. Slå disse to protokoller op i wikipedia og bemærk specielt den visuelle fremstilling af indholdet i datapakkerne. Brug følgende to artikler i Wikipedia:

Bemærk også at Wireshark viser IP adresserne for afsender og modtager.

Bemærk hvor disse protokoller er placeret i den såkaldte OSI model, som beskrives her:

Skriv også gerne lidt om de basic linux/unix commands som I skulle bruge for at installere og bruge Netkit. Husk det var blandt andre:

  • cd
  • cd ..
  • cp
  • rm
  • ls og ls -al
  • tar
  • ./ til at eksekvere check_configuration.sh
  • export

God jul!

Netkit, VisualNetkit, øvelser, 2014-12-18, torsdag[edit]

I dag kunne grupperne bruge hele eller det meste af modulet til at gennemføre øvelserne. Vi blev først færdige med de forskellige installationsproblemer i modulet i fredags i sidste uge og vi har byttet lokaler med Jens således at grupperne kan bruge de samme Ubuntu-arbejdsstationer som de brugte i sidste uge. De skulle kun definere miljøvariablerne igen (export ...) for at komme i gang.

http://www.rtgkom.dk/~gustavnmn13/billeder/visualnetkit.png

Netkit, installering og afprøvning, 2014-12-12, fredag[edit]

Netkit, installering og afprøvning, 2014-12-11, torsdag[edit]

Netværk, fortsat afprøvning af Netkit fra http:netkit.ort, Gkb 08:27, 28 November 2014 (CET)[edit]

Netværk, Netkit fra http:netkit.ort, Gkb 08:27, 28 November 2014 (CET)[edit]

Vi afprøvede netværkssimuleringssystemet Netkit fra http://netkit.org. Dokumentationen og øvelserne, Labs, virkede meget tiltalende, så vi besluttede at afprøve systemet. Installeringen tog lidt tid da der tilsyneladende ikke findes en Ubuntu eller Debian pakke for systemet.

Vi installerede på en enkelt maskine og nåede at afprøve oprettelse af et par virtuelle PC'er.

Netværk, Warriors of The Net og tcpdumpGkb 10:01, 21 November 2014 (CET)[edit]

I dag har vi startet et forløb hvor vi arbejder med temaet netværk på flere forskellige måder.

Warriors of The Net[edit]

Som indledning til netværkstemaet så vi en tegnefilm, Warriors of The Net, om hvordan internettet virker. Se her http://www.warriorsofthe.net/movie.html og evt. også her https://www.youtube.com/watch?v=Ve7_4ot-Dzs.

tcpdump[edit]

Efter filmen, hvor hovedaktøren var en TCP pakke, testede vi kommandoen tcpdump som dumper alle TCP pakker til og fra vores computer til computerens skærm (terminalvindue). Tcpdump er en Linux/Unix kommando, men vi som bruger Windows kan installere et program som efterligner den fra http://www.tcpdump.org/. Husk at opdatere og aktivere dit antivirusprogram inden du installerer!

Her er flere kommandoer som du gerne skal afprøve:

  • ping
  • traceroute (tracert på Windows?)
  • route
  • netstat

Se her, http://technet.microsoft.com/en-us/library/cc757819%28v=ws.10%29.aspx, hvordan Microsoft præsenterer de vigtigste netværkskommandoer for Windows.

Og her, http://www.tldp.org/LDP/GNU-Linux-Tools-Summary/html/c8319.htm, er et godt overblik over de vigtigste netværkskommandoer i Linux og Unix.

Wiki-rapport og multimediepræsentation, fortsat arbejde, Gkb 09:39, 31 October 2014 (CET)[edit]

Billeder kan inkluderes i wikiartiklerne med en URI link til billedet som I kan lægge på jeres StudieWeb, f.eks. i en mappe som I kan kalde billeder.

Wiki-rapport og multimediepræsentation, Gkb 10:00, 30 October 2014 (CET)[edit]

I dag og i morgen skal vi færdiggøre en wiki-rapport og en multimediepræsentation om studieturen til Island.

Wiki-rapporten skal indeholde følgende:

  • Indledning og nødvendig information til at læseren kan orientere sig og forstå sammenhængen som denne wiki-artikel, altså wiki-rapporten, er blevet til i.
  • GPS-dagbogen, som på en eller anden måde viser vha. GPS tracks på kort og vha. billeder hvor I har været hver dag på rejsen.
  • Afsnit om de to besøg, på Reykjavik University og til Marel, hvor billeder og tekst bruges til at forklare noget fagligt og teknisk ved begge besøg.
  • Teoriafsnit, hvor I skriver om alle eller nogen af de særlige fokuspunkter som nævnes i projektoplægget. Helt oplagt indhold i dette afsnit kan være:
    • Udsnit af, eller hele jeres GPX data, både som billeder og tekst som kan kopieres og som en fil som kan downloades.
    • Beskrivelse af de programmer (tools) som I har anvendt til trackingen og bearbejdning og publisering af jeres GPS data.
    • Info om koordinatsystemet, lat-long-alt osv. Evt. anvisning af hvordan man kan udregne afstanden mellem to punkter osv.
  • Konklusion hvor I reflekterer over hvad I har fået ud af turen og over hvor godt eller dårligt de faglige mål, som angives i projektoplægget, er opfyldt.


Multimediepræsentationen:

  • Den skal indeholde en brugervenlig version af indholdet i wiki-rapporten, evt. med flere billeder og lidt mindre tekst, men det bestemmer I selv.
  • Præsentationen skal laves vha. et værktøj som kan bruges til at lave en præsentation som kan downloades fra webserveren og afvikles lokalt vha. programmer som f.eks. Open Office Impress eller PowerPoint.
  • Den skal uploades til jeres StudieWeb.
  • Den skal linkes til fra wiki-rapporten.


Her er links til gruppernes wiki-rapporter:

Tirsdagsplan, Island, Gkb 23:35, 6 October 2014 (CEST)[edit]

Her er et link til planen for vores gåtur i Reykjavik tirsdag den. 7. oktober: https://www.google.com/maps/d/edit?mid=zESwgb7PWz8s.kTqmTfg45t2M

GPS og GPX og GIS, Gkb 15:06, 16 September 2014 (CEST)[edit]

Tre forkortelser som vi skal få lidt mere styr på inden studieturen til Island. Vi har tænkt at lave lidt GPS tracking der og derfor skal vi øve os lidt inden.

Gør i første omgang følgende:

  1. Gå til http://freegis.org og se jer rundt, der er mange åbne systemer til at lave kort og lignende med.
  2. Installer GRASS fra http://grass.osgeo.org/ og test lidt.
  3. Find en app til din telefon som gør at du kan optage en track og lagre den som en tekstfil, gerne i formatet GPX.
  4. Brug http://www.openstreetmap.org/ til at uploade jeres datafil, så vi kan se jeres track på deres kort.

3D modellering med Visual, fortsat, Gkb 15:02, 4 September 2014 (CEST)[edit]

Vi fortsatte øvelserne med Visual og Python. Opgaven skal afleveres fredag i næste uge, så nu er det en god idé at begynde at lave dokumentationen.

Arbejdet med Visual går godt, men der er altid nogle udfordringer eller problemer som skal løses. Her kommer et par fra modulet i dag.

Hvordan dræber man hængende grafikvinduer fra Visual på Ubuntu[edit]

Hvis man arbejder på vores Ubuntu arbejdsstationer, så sker det nogle gange (ofte) at grafikvinduet som Visual laver ikke lukkes når man kører programmet næste gang. Man må altså selv manuelt lukke dem, og så holder de også ofte op med at reagere på det når man forsøger at lukke dem. Og da vi kører vores programmer igen og igen under udviklingsprocessen, så kan man hurtigt have mange vinduer som hænger. For at dræbe dem kan vi bruge følgende kommandoer i en terminal.

  • ps -A | grep python Finder PID nummer (process ID nummer) for alle processer som har noget med Python at gøre.
  • kill -s 9 PID (eventuelt sudo kill -s 9 PID) til at dræbe process med processnummeret PID.

Spike solution for animering af cyklisk ændring af længden på næsen[edit]

Et af de problemer som vi løste var hvordan man kan animere næsen på vores robot/snemand så længden på den cykliskt vokser og mindsker. Her er kildekoden for en lille spike solution som demonstrerer en måde at lave dette på.

# -*- coding: cp1252 -*-
import visual
import math
visual.sphere()
naese = visual.cylinder(pos=(0,0,0), axis=(0,0,2), color=(1,1,0), radius=.1)
t=0 #tiden, f.eks. kan vi forestille os at den måles i sekunder.
while True:
    visual.rate(7)
#    naese.axis=(0,0,t)
    naese.axis=(0,0,1+math.sin(t))
    t=t+1

http://rtgkom.dk/~gkb/billeder/naese_spike_for_animation_af_en_naese_med_visual_gkb_v01_215x225.png

3D modellering med Visual, fortsat, Gkb 14:40, 2 September 2014 (CEST)[edit]

Vi startede med at se en lidt uformel men interessant demonstration af en lille bateridreven helicopter, http://www.banggood.com/Wholesale-Hubsan-H107D-FPV-X4-RC-Quadcopter-RTF-With-5_8G-FPV-6CH-Transmitter-p-68571.html. Det var Jan Place Jakobsen fra PrgC33 som denonstrerede. Pris ca. 800 DKK og levering ca. 10 dage, sagde han, ikke?

Vi fortsatte så modellering og animation med Visual.

Spike solution for animation ad cirkelbueformet bane[edit]

Vi så på projektoren hvordan vi kan få enden af en cylinder til at bevæge sig ad en cirkelformet bane. Dette kan tilpasses lidt og bruges til at lade vores robot eller snemand løfte en arm og sænke den igen. Her er koden.

import visual

x_akse=visual.cylinder(pos=(0,0,0), axis=(10,0,0), color=visual.color.red, radius=0.05)
y_akse=visual.cylinder(pos=(0,0,0), axis=(0,10,0), color=visual.color.green, radius=0.05)
z_akse=visual.cylinder(pos=(0,0,0), axis=(0,0,10), color=visual.color.blue, radius=0.05)

left_hand=visual.sphere()
left_arm=visual.cylinder(pos=(1,0,0), axis=(0,2,0), radius=0.1)
theta=0

while True:
    visual.rate(10)
    left_arm.axis=(0,2*visual.cos(theta),2*visual.sin(theta))
    theta = theta + 0.1
#

Og her er et billed som viser et stilbilled fra animationen.

http://rtgkom.dk/~gkb/billeder/animation_ad_cirkelformet_bane_215x225.png

3D modellering med Visual, Gkb 15:26, 28 August 2014 (CEST)[edit]

Vi fortsatte udforskningen af mulighederne i Visual og nogle har ikke kunnet vente og er begyndt at lege med Pygame, -godt!

Der var flere store og små problemer som belv løst i det dynamiske samarbede som vi har på holdet, men her er et par stykker som ikke blev testet helt færdigt inden afslutningen af modulet:

  • Anvendelse af et fotografi, eller bare en BMP/PNG/JPG fil, som en texture på et objekt i Visual. For at komme i gang, se her http://vpython.org/contents/docs/materials.html.
  • Glidende animation af et vink med en arm (cylinder) ved at ændre to af parametrene for dens axis() vha. cosinus og sinus funktionerne.

3D Modellering og animation med Visual og Python, Gkb 10:35, 26 August 2014 (CEST)[edit]

Opgavens indhold[edit]

Vi diskuterede sidste gang at vi kan bruge resultaterne af vores leg med Visual og Python til en opgave som I skal aflevere. Her er en plan for indholdet i opgaven.

Følgende skal laves:

  • 3D model af en snemand eller en robot lavet med kugler og cylindre. Du har stor kunstnerisk frihed til selv at vælge nærmere hovrdan roboten skal være. Du kan f.eks. gerne bruge flere af 3D objekterne i Visual.
  • Animation, hvor roboten bevæger en hånd, en fod eller hovedet.
  • Dokumentation af udvikingsarbejdet og det færdige resultat (kildekode og grafik) lægges på Studiewebb'et. Her er nogle nærmere detaljer:
    • Upload til mappen 3d_modellering_og_animation_med_visual_og_python, som jeg opretter for jer til dette formål.
    • Skriv ca. 100 til 1000 ord hvor du beskriver hvad du gjorde, hvordan du gjorde det og hvilke problemer der opstod og hvilket resultat der kom ud af arbejdet. Hvis du mangler inspiration til hvad du kan skrive om, så kan du evt. bruge denne link, http://rtgkom.dk/wiki/2011PrgC34#Generelle_krav_til_dokumentation_af_projektopgaver_i_Programmering_C.2C_2011-10-04.2C_Gkb, men husk at det ikke er noget krav i denne opgave.
    • Brug gerne flere skærmbilleder som viser forskellige detaljer i arbejdsprocessen.
    • Der skal linkes til denne dokumentation fra menuen på forsiden (home page) på jeres StudieWeb.
    • Du skal bruge almindelig HTML (plain HTML) til dokumentationen. Brug ikke .doc, .docx, .pdf, .rtf, .odt eller andre filformater som ikke umiddelbart kan læses med en webbrowser. Hvis du vil, så kan du ud over HTML også uploade dokumentationen i andre filformater.
  • Opgaven skal "afleveres" på Lectio ved upload af en lille tekstfil (plain tekst, tak!!!) med to ting i, nemlig:

Følgende optionelle delopgaver kan også laves hvis du synes du har tid og lyst:

  • En video i god opløsning (1920x1080) som viser animationen. Du kan lægge lydspor på, men så skal du selv lave lyden/musiken. Til denne del af opgaven, som altså er helt optionel, kan du bruge følgende tools:
    • Modulet Povexport som kan hentes fra vpython.org, til at konvertere hver rendereret frame til en POV-Ray Scene Description Language kode. Der ligger en link til en zip fil for modulet her http://vpython.org/contents/contributed.html. Der findes en nærmere beskrivelse af fremgangsmåden på FAQ siden på vpython.org, se her http://vpython.org/contents/FAQ.html.
    • POV-Ray, fra http://www.povray.org, til at rendere hver frame i HD resolution. Vælg bare BMP som filformat, -vi skal ikke tabe noget her.
    • Bink2 fra http://radgametools.com, http://www.radgametools.com/bnkmain.htm, fra til at splejse BMP billederne sammen til en videofil. Før har vi brugt Smacker og Bink1 fra samme firma. Smacker var vistnok den gang bedre at bruge hvis vi vil mixe lyd på, men Bink2 skulle være meget bedre og har vistnok afløst Smacker. Hvis I kender til et andet gratis og måske mere frit værktøj til opgaven så brug gerne det.

3D robot, Torsdag d. 21. sept, gkb[edit]

Vi fortsatte arbejdet med modellering af en robot eller snemand i Python vha. modulet Visual.

Vores visualisering af akserne i koordinatsystemet blev forbedret, således at vi tegnede ti cylindre i hvert plan.

Koordinatsystemet i Visual, En model af en robot, Tirsdag d. 19. sept, gkb[edit]

Koordinatsystemet i Visual[edit]

Vi lærte at orientere os i koordinatsystemet ved at placere tre cylindre ud ad x, y og z akserne, med farverne rød, grøn og blå.

En model af en robot[edit]

Vi var nu klar til at begynde at modellere vha. de objekter som er predefineret i Visual, som f.eks. kugler, cylindre, kegler, bokse osv.

Vi besluttede at forsøge at bygge noget som ligner lidt en robot (eller en snemand) med kugler og cylindre. Det er individuelt arbejde med stor kunstnerisk frihed!

Info om faget, 3D modellering med Python, Torsdag d. 14. sept, gkb[edit]

Info om faget[edit]

Vi gennemgik fagbilaget for faget i grove træk på projektoren, og diskuterede i plenum hvad faget går ud på og hvordan det er anderledes end f.eks. Kommunikation/IT C.

3D modellering med Python[edit]

Vi startede et forløb hvor vi laver lidt 3D modellering med programmeringssproget Python. Vi bruger modulet Visual oprindelig lavet af David Scherer i år 2000, som tillader os på en relativt enkel måde at lave 3D modeller med lidt interaktionsmuligheder via musen (zoom og rotate). Et eksempel ses her:

import visual
visual.sphere()

Vi installerede Python ved hjælp af information fra http://vpython.org/contents/download_windows.html, selv om vi normalt ville gøre det direkte fra https://www.python.org/. Der er nogle problemer med at anvende udviklingsmiljøet IDLE i standardversionen af Python sammen med modulet Visual, og derfor bruger vi VIDLE som installeres når vi installerer Visual. Eller brug hvilken som helst anden god programeditor og kør dine scripts direkte på kommandoprompten (i terminalen).

Visual er ikke opdateret til at virke med version 3 af Python, så derfor bruger vi version 2.7.4. Du kan have flere versioner af Python samtidig på din computer, men det kan føre til misforståelser.

Dokumentationen som vi bruger mest her til at begynde med, er her http://vpython.org/contents/docs/index.html, men der er masser af anden god info på websitet. Se for eksempel nogle af videoerne som de linker til her http://vpython.org/contents/doc.html, eller gå direkte til Youtube her http://www.youtube.com/vpythonvideos.

I forbindelse med at installere og komme i gang med 3D modelleringen så var der lidt forskellige småproblemer, f.eks. i forbindelse med version 3 af Python, 32 versus 64 bit, IDLE versus VIDLE.

Når vi fik Python og Visual til at virke, så skulle vi lige lære at bruge musen til at navigere i det grafiske vindue.