Eindopdracht iminor. Inhoud

Eindopdracht iminor Invulformulier ....................................................................................................... 2 Definiëren van de veldgegevens invulformulier ....................................................... 2 Tabelbeschrijving ............................................................................................. 2 Invulformulier. ...................................................................................................... 3 Maken van de invulformulier in Dreamweaver ........................................................ 3 Maken van database in Wampserver via PHPMYADMIN ............................................ 3 Maken van invulformulier in PHP ........................................................................... 3 Maken van invulformulier-mysql.php .................................................................. 3 Maken van invulformulier-email.PHP................................................................... 3 Het invulformulier moet een 2 emails versturen. .................................................. 3 Aanpassen invulformulier via een eigen CSS-bestand .............................................. 4 De banner.......................................................................................................... 4 De twee PHP-documenten aan elkaar plaatsen..................................................... 4 Het ID ophalen uit de mysql in variabele plaatsen ................................................ 4 ID-variabele in de mail plaatsen en op het scherm ............................................... 4 Tweede invulling opdracht Joomla ........................................................................... 5 De rede ............................................................................................................. 5 Een eigen website ............................................................................................... 5 Joomla iMinor website ............................................................................................ 5 De componenten ................................................................................................ 6 Gastenboek ..................................................................................................... 6 AddToAny ....................................................................................................... 7 Fotogallery ...................................................................................................... 8 Bepaalde Fotoalbums afschermen ...................................................................... 9 WYSIWYG editors ............................................................................................10 Help help help!!! ik kreeg een groot probleem. .........................................................11 JCE-editor ......................................................................................................11 Eyesite ..........................................................................................................12 Backup ..........................................................................................................12 Statistics Module .............................................................................................12 Todolist .........................................................................................................13 Kalender ........................................................................................................13 Template aanpassen .............................................................................................13 Hoofdmenu verplaatsen ......................................................................................13 In de template.css ..........................................................................................14 Kruimelpad .......................................................................................................14 In het templatedetails.XML ...............................................................................14 In template.css ...............................................................................................14 In templatedetails.XML de extra JPG's gedefinieerd .............................................15 Kleur aanpasen .................................................................................................15 In de template.css moet ik dit oplossen. ............................................................15 Conclusie.............................................................................................................16

Elly Donders

pagina 1/16

Eindopdracht Iminor 2009-2010

Inhoud

Invulformulier Definiëren van de veldgegevens invulformulier titel naam email stud. Nr. slb ingangsdatum

veldnaam

tab volgorde

omschrijving

ID

prim veld met sleutel 1 2

wordt automatisch gevuld nummering invullen naam student invullen emailadres student

3 4

invullen studentennummer invullen naam van je studieloopbaanbegeleider invullen ingangsdatum

naam - textveld email – textveld (spry) met email notatie stdnr - textveld slb - textveld

5

opleiding

ingangsdatum (spry)- textveld met datumnotatie JJJJMM-DD opleiding - keuzelijst

profiel

profiel - keuzelijst

7

blok

blok - keuzelijst

8

1. bestuurlijke of organisatorische activiteiten 2. curriculumaanvullende activiteiten beschrijving activiteiten

VRs selectievakje

9

10

leerdoelen te verwachten klokuren

beschActivi textarea doel – textarea uren – textveld

opdrachtgever

opdGev – textveld

13

contactpersoon

contPer – textveld

14

telefoon contactpersoon

tel – textveld

15

email contactpersoon eisen randvoorwaarden

emailCont - textveld eisen – textarea

16 17

beknopt pva hoe aangetoond

18 19

bewijsvoering

pva – textarea aangetoond – textarea bewijs – textarea

knop verzenden

verzenden

21

6

11 12

20

timestamp

Elly Donders

keuze menu uit de opleidingen bouw, Civiel en Vastgoed keuze menu uit de verschillende profielen kies de juiste keuzemenu kies hier de fase waar je nu in zit selecteer hier de soort opdracht voor je vrije ruimte. Er is maar een keuze mogelijkheid bij deze 2 soorten vrije ruimte invulling beschrijf in het kort je activiteit beschrijf hier je leerdoel type hier de uren die je verwacht uit te voeren type hier de opdrachtgever of de naam van het project type hier de naam van je contactpersoon telefoon van contactpersoon email van contactpersoon type hier je randvoorwaarden in voor je vr type hier een beknopt PVA pas invullen als VR is afgerond pas invullen als uitgevoerd is wordt formulier verzonden wordt automatisch gevuld met datum en tijd, van invulling of wijziging

pagina 2/16


Tabelbeschrijving

Invulformulier. Maken van de invulformulier in Dreamweaver Formulier gedefinieerd in Dreamweaver. Daar ben ik al een poosje zoek mee geweest. Het formulier bestaat uit een aantal gegevens die je kunt groeperen. De gegroepeerde gegevens staan samen in een tabel De tabellen heb ik eigen ID's gegeven. Bij het definiëren van velden rekening gehouden met de soort inhoud wat ingevuld moet worden. De datum-veld en email-veld zijn via spry gedefinieerd om de gebruiker te dwingen het juiste in te vullen Maken van database in Wampserver via PHPMYADMIN Nieuwe database gedefinieerd met een tabel. Beide zijn eindopdracht genoemd. Primaire key ingesteld ID-veld. Dit veld wordt tevens gebruikt om de unieke gegeven terug te sturen naar de invuller en beoordelaar. Nog een extra veld timestamp gedefinieerd om later bepaalde gegevens uit de database te kunnen lezen. Maken van invulformulier in PHP Uiteindelijk komt er EEN invulformulier.PHP, maar ik hak dit in tweeën. EEN invulformulier voor het invullen van MYSQL en EEN invulformulier voor het versturen van de email. Werkwijze om stap voor stap dit uit te voeren. Eerst contact met database. Via INSERT met twee velden begonnen om te testen of de gegevens in de database terecht komen. De keuzeveld uitgeprobeerd, (was niet in de vorige les behandeld) ging ook goed De datumveld uitgeprobeerd, hier ging het moeilijker. Kreeg melding dat de gegevens in de database gevuld waren. Als ik ging kijken was de waarde 0000-00-00 dus niets ingevuld. In het invulveld de notatie aangepast in jjjj-mm-dd. Na diverse pogingen nog niet gelukt. Wat had ik nu fout gedaan  Bij het definiëren van de veld TIMESTAMP kreeg ik een foutmelding bij het aanmaken dat de veldnaam DATUM al bestond. Klopte want ik had een datumveld gebruikt. Dus ik moest een andere naam verzinnen. Dus ik had de veld-naam verandert en niet meer aangepast in mijn invulformulier. Dom dom dom.  De andere velden gedefinieerd.  Ander struikelblok kwam ik ook tegen. In de database had ik veldnamen gedefinieerd met een minstreepje tussen twee woorden. Op het moment dat je de database maakt krijg je geen foutmelding. Op het moment dat je gegevens in de database wilt toevoegen krijgt je foutmelding dat de gegevens niet opgeslagen kan worden.  Dus de oplossing in de database de streepjes weghalen en het wordt met een hoofdletter beginnen. Probleem opgelost. Maken van invulformulier-email.PHP Dit was eigenlijk niet zo moeilijk. In de les hebben we dit ook al gedaan. Hier werd het formulier naar de beheerder gestuurd (ik). E-mailadres van de beheerder van deze site is: [email protected]. Om dit uit te proberen maak ik eerst een nieuw PHP-bestand invulformulierVR-email.PHP. In dit PHP-bestand ga ik eerst het e-mailen met drie invulvelden uitproberen, Naam – Email en Ingangsdatum. Dit was niet zo moeilijk omdat ik dit voor een gedeelte over kan nemen van de "les PHP 4". Het invulformulier moet een 2 emails versturen. Naar de invuller van het invulformulier (student). Het email-adres is ingevuld in het invulformulier, nu moet deze gegevens uitgelezen worden. Ik heb zo geredeneerd: als je een email kunt versturen dan kun je er ook twee

Elly Donders

pagina 3/16


Maken van invulformulier-mysql.php

of meerdere versturen. Via een punt kun je meerdere acties achter elkaar zetten. Het volgende heb ik gebruikt en het lukte:
Aanpassen invulformulier via een eigen CSS-bestand Een eigen CSS-bestand maken heb ik nog nooit gedaan. Alleen maar over gehoord "dat het zo handig is" en natuurlijk zijn deze begrippen tijdens de lessen ook besproken. Normaal gebruik ik in de office omgeving ook altijd mijn eigen sjablonen dus moeilijk kan het niet zijn. Maar hoe pak ik dit nu aan? Eigenwijs dat ik ben begin ik gewoon hiermee, moeilijk kan het niet zijn. Maar tot mijn schrik versprong mijn hele opmaak van mijn invulformulier.. Dit moest ik weer in de CSS-bestand proberen op te lossen. Zoals altijd val ik altijd in de valkuilen die er zijn, dus hier ook weer Het is gelukt en ben tros op mijn eerste resultaat. De banner Voor de moest ik in de tamplate zijn. Ik wilde een kleine flash-bestand maken met twee of drie afbeeldingen die dat automatisch na elkaar zullen verschijnen. Eerste heb ik in photoshop twee afbeeldingen gemaakt. Van 234 px X 60 px. Deze afbeeldingen zijn in Flash ingelezen (bibliotheek) en daar een beweging in geplaatst. Na wat uitproberen wat ik het mooiste vind, ben ik tot de conclusie gekomen om het eenvoudig te houden. De twee PHP-documenten aan elkaar plaatsen De PHP-document om de gegevens in MYSQL-database te plaatsen wordt als eerste gebruikt, daarom is de PHP-document voor het afhandelen van de mail geplakt. Het stukje om het ID op te halen staat hiertussen.

ID-variabele in de mail plaatsen en op het scherm Hier komt de code voor de mail: $message = $message . "Wat is je bewijsmateriaal: " . $_POST["bewijs"] . "\n"; $message = $message . "Dit is je unieke reserveringscode: " . $IDregel;

Elly Donders

pagina 4/16


Het ID ophalen uit de mysql in variabele plaatsen

Hier komt de code voor het scherm // Hier gaan wij de gegevens weergeven... echo "
Dit heb je ingevuld
"; echo "
Dit is je unieke reserveringsnummer: " . $IDregel . "
";

Tweede invulling opdracht Joomla De rede De rede om deze iMinor te volgen was: dat ik in mijn vrije tijd bezig ben met het uitzoeken over Joomla. Hiermee was ik ruim een jaar geleden mee begonnen. Nog in de versie Joomla 1.01 Engelse versie. Op een oefenwebsite van mijn schoonzoon. http://ellydonders.wijgaantrouwen.net (bestaat niet meer) Een eigen website Nu is er een eigen naam geclaimd http://nicoellydonders.nl. Op deze site wordt een familiesite. Wij zijn nog aan het brainstormen wat er exact op moet komen, de inhoud de lay-out enz. Dus het is nog te vroeg om zelf een template te ontwikkelen, maar pas een template naar mijn eigen wensen aan. Ik ga nu wel onderzoeken welke componenten ik wil gebruiken binnen de website.

Joomla iMinor website

Schermafdruk:Modulebeheer.



Voor meer instellingen kun je dubbel op klikken en daarin wordt de standaard configuratie geregeld. Instellingen voor de gegevens, menu toewijzing en parameters.

Elly Donders

pagina 5/16


In deze website ga ik de opdracht uitwerken. Voordat ik iets online zet, probeer ik het eerst uit in een aparte zandbak. Op mijn laptop heb ik nog een offline joomlasite staan. Sommige onderdelen zijn eenvoudig te implementeren de aantal standaard handelingen zijn voor ieder onderdeel hetzelfde.  Via internet een onderdeel uitzoeken  Zip-bestand downloaden.  Via Extensies > Extensiebeheer Installeer > bladeren > Upload bestand/installeer Als de installatie gelukt is moet je het nog activeren en in sommige gevallen nog configureren. Het activeren:  Via modulebeheer > achter de juiste module op “Geactiveerd” zetten.

schermafdruk: instellingen component

De componenten

Schermafdruk: Phoca guestbook controle paneel



Aan de voorkant ontsluiten via een knop in hoofdmenu.

Elly Donders

pagina 6/16


Gastenboek Gastenboek van phoca met captcha beveiliging: http://download.joomlacommunity.eu/index.php?option=com_rokdownloads&view=file&Itemid=56&id= 76:com_phocaguestbook_v1-3-1_beta-dutch  De eerste handelingen zoals hierboven beschreven.  Eerste instellingen via controle paneel

Schermafdruk: hoofdmenu

AddToAny AddToAny is een plugin waarmee je via een geïnstalleerde icoon een stuk tekst uit je website kunt delen met een van de vele sociale netwerken van internet.  Installeren op de manier zoals hierboven staat beschreven.  Plugin activeren en configureren


Schermafdruk: instellingen

Schermafdruk: active addtoany

Elly Donders

pagina 7/16

Fotogallery Fotogallery met beheer: PHOCA  Het installeren gaat zoals hierboven beschreven.  Component activeren en eventueel instellen

Schermafdruk: Phoca gallery controle paneel

In dit paneel beheer je je foto’s en categorieën. Je maakt eerst een categorie aan. Daarna ga je foto’s plaatsen in een bepaalde categorie. Ik beschouw een categorie als een fotoalbum.

Schermafdruk: categorieën

 

Aan de voorkant ontsluiten via een knop in het hoofdmenu “Fotoalbums”. Zie scherm “schermafdruk: hoofdmenu”. Een submenu maken om de fotoalbums te tonen. Dit gaat via modulebeheer > nieuw > menu. Nieuw aangemaakt “Fotogallery”

Elly Donders

pagina 8/16




Schermafdruk: nieuw menu “Fotogallery”

Bepaalde Fotoalbums afschermen

Schermafdruk: hoodfcategorie prive

  

In het hoofdmenu een nieuwe menuitem gedefinieerd "Fotoalbums" met als menu-item type een fotogallery optie. Bij parameters component de optie "toon niet toegankelijke categorieën” op "Nee" Dit menu-item komt links in het scherm, alleen zichtbaar in hoofdmenu "fotoalbums" en module parameter "fotogallery". In dit menu kan ik nu alle fotoalbums definiëren op het moment dat een fotoalbum op publiek staat kan iedereen hen zien. Zet ik een fotoalbum op geregistreerd dan kan alleen een geregistreerde beide fotoalbums zien.

Het ziet er zo uit aan de voorkant:

Elly Donders

pagina 9/16


Voor de fotogallery wil ik een aantal fotoalbums alleen beschikbaar stellen voor geregistreerde bezoekers. Hoe heb ik dit aangepakt:  Hoofdcategorie Publiek: voor iedere bezoeker van de site  Hoofdcategorie Prive: alleen voor geregistreerde bezoekers van de site  Alle categorieën worden onder een van de twee hoofdcategorieën geplaatst. (zie schermafdruk: categorieën)  Als je hoofdcategorie alleen toegang geeft voor geregistreerde gebruikers, dan zien alleen de geregistreerde bezoekers die fotoalbums.

Schermdruk: gewone bezoeker

Schermafdruk: geregistreerde bezoeker

WYSIWYG editors WYSIWYG editors: eerst FCK-editor uiteindelijk JCE editor  Installeren editor joomla FCK zoals hierboven is beschreven  Activeren zoals gebruikelijk via plugin de editor activeren  De editor als standaard kiezen in de website en voor de schrijvers van de site

Schermafdruk: aanpassen per gebruiker

Probleem met deze FCK-editor: die kun je niet naar eigen wensen instellen. Je krijgt een piepklein icoontje bij 2 menuinstelleningen Nieuw artikel plaatsen en bij blog in lijst weergave. De oplossing is om een menu-item te maken voor het toevoegen van nieuwe artikelen. Dit heb ik gedaan onder hoofdmenu “beheer”.

Elly Donders

pagina 10/16


Schermafdruk: instellen als standaard editor

Help help help!!! ik kreeg een groot probleem. Op donderdagavond 7 januari kreeg ik een foutmelding op mijn website. De website kon niet geopend worden.

Ik was even echt in paniek.

JCE-editor  Het installeren gaat zoals hierboven beschreven.  Het instellen als standaard-editor en gebruikers-editor gaat op dezelfde manier als bij FCKeditor Wat is nu het voordeel? Je kunt groepen aanmaken. Iedere groep krijgt zijn eigen rechten. Dus zo kun je een auteur een ander layout meegeven dan een administrator.

Schermafdruk: JCE group manager

Elly Donders

pagina 11/16


Het reconstrueren wat ik die dag op school gedaan had, de veranderingen enz. Op internet gezocht naar oplossingen, maar ik werd niet veel wijzer. (soms nog banger). Dus wat kon ik doen? Alle wijzigingen die ik die dag gedaan heb, het ik teniet gemaakt. Daarna kon de website nog niet geopend worden. De redder in nood, Jeroen was online op msn. Samen even achter de website gekeken en toen zagen we het probleem. Wat had ik gedaan: ik had een artikel categorie verwijderd. Er stond nog een artikel in deze categorie die op de home-pagina getoond werd. Dus de website kon geen artikel laten zien, vandaar die foutmelding. Ik kreeg ook geen foutmelding tijdens het verwijderen, dat is eigenlijk wel vreemd. Maar nu moest ik alles weer in orde brengen. Over de editor was ik niet tevreden dus ging ik opzoek naar een andere. Het werd JCE-editor.

Schermafdruk: instellen van een groep

Eyesite Eyesite, http://sourceforge.net/projects/eyesite/ Eyesite houdt een oogje op uw website, waarschuwt u per e-mail als er bestanden zijn toegevoegd, veranderd, of verwijderd. Eyesite scant mappen structuren, en slaat de details van ieder bestand op in een database tabel. De opgeslagen details bevatten de datum/tijd, grootte, en md5 checksom van het bestand. Dit is tijdens de paniek gedeinstelleerd en op dit moment nog niet toegevoegd. Dus ik kan geen schermafdruk laten zien. Backup De backup verhaal is tijdens een les uitgelegd en geïnstalleerd.

Schermafdruk: module beheer activeren Joomlawatch



Iedere component kun je apart instellen. Wel of niet aan de voorkant en bezoekers overzicht en uit welke landen dat ze komen

Elly Donders

pagina 12/16


Statistics Module Statistics Module: Chart Statistics Module van PHOCA. Later heb ik een betere ontdekt Joomlawatch  Installatie is hierboven beschreven.  Voordat je kunt installeren moest je de zip-bestand eerst unzippen op je eigen PC Hierin stonden weer 3 zip-bestanden die je appart moest installeren.  De componenten activeren, is hierboven beschreven.

Schermafdruk: statestieken bij mij nog erg weining ondat het pas geinstalleerd is.

Schermafdruk: instellingen Joomlawatch met verschillende tabbladen

Todolist

Schermafdruk: todolijst

Kalender 

Kalender / evenementen: (wel onderzocht in de zandbak, maar niet meer online uitgewerkt. Dit is door privé omstandigheden gebeurd)

Template aanpassen Het mainmenu in de grijze onderbalk onder de banner plaatsen. Deze User3 is te laag gedefinieerd. In de template wordt hier niets geladen. Hoofdmenu verplaatsen

Elly Donders

pagina 13/16


Een todolist is voor beheerders van de website gekozen Foobla-TODO  De installatie is hierboven beschreven  Het activeren van de todolist ook activeren zoals hierboven beschreven.

Orgineel schermafdruk: geen mainmenu in user3 mogelijk en geen kruimelpad in template opgenomen.

Schermafdruk: Mainmenu gedefinieerd in User3 met titel, wordt te laag geplaatst

Mainmenu gedefinieerd in user 3 zonder titel

In de template.css De hoogte verandert en naar boven geplaatst. .navbar {

.nav

background:url(../images/navline.jpg) no-repeat; height:40px;

} { margin: 0px; padding-left:30px; padding-top:10px; }

Kruimelpad In het templatedetails.XML De breadcrumbs gedefinieerd <position>breadcrumbs


In module-beheer het kruimelpad gedefinieerd.

Schermafdruk: kruimelpad definieren

In template.css .breadcrumbs {

Elly Donders

padding-top:10px; padding-left:60px; font-size:12px; font-weight: bold; color:#243515; text-decoration:none;

pagina 14/16

.secbar { background:url(../images/secline.jpg) no-repeat; height:40px; } In index.php

<jdoc:include type="module" name="breadcrumbs" />

In templatedetails.XML de extra JPG's gedefinieerd images/secline.jpg images/arrow.png

Schermafdruk: Hoofdmenu en kruimelpad gereed

Kleur aanpasen Het woordje home heeft een witte kleur en de linken in user1 en user2 worden wit van kleur als ze eenmaal geactiveerd hebt. Dit moet ik nu oplossen In de template.css moet ik dit oplossen. .module div div div li a { color:#66392E; } .column li a, .column li a:visited { display:block; margin: 0px; padding: 3px; border-bottom: solid 1px #aeaeae; color: #000; width:93%; font-weight:bold; padding-left: 10px;

Elly Donders

pagina 15/16


Deze documenten eerst in Photoshop en Fireworks aangepast Kruimelpad gedefinieerd en aangepast aan mijn wensen op de laptop, daar ziet alles er goed uit. Gekopieerd via ftp naar de website. Op de server zijn de css-bestand beveiligd, die moet ik bij iedere sessie weer aanpassen.

text-decoration:none; } .module_menu li a:hover { background: url(../images/left_nav_bg.jpg) repeat-x; color: # 243515; }

Schermafdruk: resultaat kruimelpad en links

Conclusie Het volgen van de iMinor heeft veel opgeleverd. Ik heb een ander inzicht gekregen over Joomla. Ik zeg niet dat het makkelijk is, maar ik beheers nu toch zoveel kennis dat ik een eigen site kan gaan maken. Het was erg leerzaam en heb ook met veel plezier de lessen gevolgd, de opdrachten gemaakt. Bedankt voor de uitleg en we zien elkaar zeker nog in de gangen van Avans.


Groetjes Elly Donders

Elly Donders

pagina 16/16

Eindopdracht iminor. Inhoud

Recommend Documents

Dit heb je ingevuld

Dit is je unieke reserveringsnummer: " . $IDregel . "