CphBusiness - Datamatiker uddannelsen
2. semester foråret 2020
Lyngby og Bornholm
Denne side indeholder en samling af videoer, som skal understøtte undervisningen. Indholdet giver først og fremmest mening for de studerende, som har fulgt 1. semester i Lyngby eller på Bornholm, men alle der har interesse er selvfølgelig velkomne til at kigge med.
| Emne | Titel/video | Indhold |
|---|---|---|
| Introduktion | Introduktion (17:39) | Gennemgang af det faglige indhold på 2. semester |
Brugergrænseflader
Følgende videoer er lavet til at understøtte undervisning i brugergrænseflader
| Emne | Titel/video | Indhold |
|---|---|---|
| Introduktion | UX & UI for udviklere (9:06) | Introduktion til temaet om brugergrænseflader |
| Prototyper | Adobe XD for udviklere (29:42) | Lav dine egne protyper på baggrund af en use case |
Følgende videoer handler om front-end-udvikling med HTTP, HTML, CSS og Bootstrap
| Emne | Titel/video | Indhold |
|---|---|---|
| HTTP | HTTP og brugergrænseflader (14:26) | Kort forklaring af hvad der sker, når du henter en webside via en browser. |
| HTML | HTML og brugergrænseflader (31:24) | Lær at anvende de hyppigst benyttede html-tags. |
| CSS | CSS og brugergrænseflader (38:50) | Lære at pimpe din HTML med CSS og styling. |
| Bootstrap | Bootstrap og brugergrænseflader] (57:55) | Lær at lave responsive websites og effektiv styling |
Linux, MySQL og Tomcat i skyen
Følgende videoer er lavet til at understøtte undervisning i opsætning af en virtuel Ubuntu Server med MySql og Tomcat.
| Emne | Titel/video | Indhold |
|---|---|---|
| Intro | Intro til modulet og materialerne (6:01) | Oversigt over hele installationsprocessen |
| Cloud Computing | Hvad er Cloud Computing? (23:49) | Alle snakker om skyen, men hvad er det? |
| Virtualisering | Hvad er en virtuel maskine (24:14) | Forstå grundprincipperne bag virtualisering |
| Installation af VM | Opsætning af Linux server og SSH (46:21) | Installer en virtuel maskine hos Digital Ocean og forbind til den via SSH |
| FTP | Installation af Filezilla og forbindelse til Droplet (7:39) | Lær at overføre filer til din Droplet via sFTP |
| MySql Database | Installation af MySQL server 8 (26:00) | Installer en MySql server på din droplet og forbind til den via Workbench og SSH |
| Tomcat webserver | Installation af Tomcat 9 (32:03) | Installation og konfigurering af en web server / servlet container. Lær også hvordan man kan deploye et html/css website via Tomcats manager |
Java webstack BMI tutorial
Her følger en 2-delt videoserie, hvor I bliver taget i hånden fra A-Z og først koder et lille website, som kan beregne et BMI tal. Bagefter udvides funktionaliteten af websitet til at omfatte dynamisk genererede formularer gennem facade og datamappers. Nedenstående tegning bruges i videoerne og viser hvordan kommunikationen mellem websiderne via front controlleren fungerer.
BMI Del 1: Et simpel website til beregning af BMI
| Emne | Titel/video | Indhold |
|---|---|---|
| 1. Mockup | Intro til opgave og mockup i Adobe XD (13:05) | Der laves en mockup i Adobe XD |
| 2. HTML og Bootstrap | Mockup laves i html og bootstrap (19:07) | Adobe XD mockup’en konverteres til en html udgave, der kan vises i en browser |
| 3. Java web projekt | Opsætning af java web projekt (11:46) | Vi sætter projektet op i IntelliJ |
| 4. Includefiler | Brug af include-filer (3:15) | Gør dine jsp-filer mere overskuelige ved hjælp af header og footer include-filer. |
| 5. Ny JSP-side | Resultatsiden tilføjes (22:49) | Vi udvider vores website med en ny jsp-side og tilføjer et nyt command-objekt. |
| 6. Beregninger | Beregninger (13:21) | Vi beregner BMI i execute metoden og fisker de nødvendige parametre ud af requestobjektet |
| 7. Refaktorisering | Refaktorisering (7:20) | Så gøres koden mere test-bar ved at flytte bmi beregninger ud i nogle selvstændige hjælpefunktioner |
| 8. Håndtering af links | Links og Redirection (13:03) | En ting er at hoppe fra en jsp til en anden via klik på en knap i en formular, en anden ting af at bruge et <a href="...."> link. Her gives et bud på hvordan vi kan gøre det - og samtidig stryge forbi FrontControlleren |
| 9. Opsummering | Kogebogsopskrift (7:26) | Projektet afrundes og forenden af regnbuen ligger en opskift på 4 trin, der skal gennemføres hver gang en ny jsp-side skal tilføjes |
| 10. Initialisering | Initialisering af data (13:52) | Første gang man rammer index.jsp kan man godt have brug for at befolke sine datastrukturer fra en database etc. Se her hvordan. |
BMI Del 2: Dynamiske formularer og persistens
| Emne | Titel/video | Indhold |
|---|---|---|
| 11. Dynamiske formularer | Introduktion formularer (5:20) | Introduktion til dynamisk generering af formularer. Hvordan befolker man en dropdownliste med tekster og id’er fra en database? Hvordan redigerer man tekster i en database i en webformular og meget mere. Altsammen implementeret via Kasper command-pattern skabelon. |
| 12. Udvidet mockup | Præsentation af ny prototype (3:39) | BMI web applikationen udvides med ny funktionalitet. |
| 13. HTML form | Formularen laves i HTML (12:35) | Textbokse, radio knapper, checkbokse og dropdown-lister bygges i html og styles med bootstrap klasser. Samtidig sættes name- og value attributter, så formulardata kan modtages i backend’en. |
| 14. Form parametre | Modtagelse af form-parametre (8:45) | Modtagelse af diverse form-parametre ved post-request. Blandt vises hvordan checkbokse håndteres som en liste af værdier |
| 15. Test af parametre | Test af form-parametre (6:35) | Når form-parametrene er modtaget fra et post-request, afprøves om vi får de forventede værdier. |
| 16. EER diagram | Databasen modelleres (5:07) | Databasen udvides i henhold til de nye krav til web applikationen |
| 17. Implementering af EER diagram | Tabellerne laves i MySql Workbench (8:41) | På baggrund af EER-diagrammet implementeres tabellerne i MySql Workbench |
| 18. Datamapper og facade | Datamapper og facade implementeres (16:20) | Data til dropdown-liste og checkbokse hentes via facade og datamapper. |
| 19. Initialisering | Dynamisk generering af formular (18:17) | Initialisering af datastrukturer og dynamisk generering af formular |
| 19. Persistens | BMI data gemmes i database (31:39) | BMI data gemmes i databasen via facade og datamappers |
| 20. Aktive form-knapper | Knapper gøres aktive i generet formular (36:02) | Efter at have genereret en formular gøres fjern og ret knapperne aktive, så de knyttes til enkelte rækker med unikke id’er |
| 21. Rediger tekstfelt | Rediger et tekst formularfelt (19:35) | Redigering af sportsinteressse kategori tekstfelt via en formular. |
| 22. Fjern og opdater | Fjern og opdater kategori i database (16:37) | Fjern og rediger indhold af tekstfelt i formular implementeres via facade og datamapper. |
| 23. Refaktorisering | Afpudsning af kode (18:53) | Koden strammes op og diverse småmangler udbedres. Problemer med danske tegn (UTF-8), ny side til fejlmeddelelser og meget mere. |
BMI Del 3: Deployment
| Emne | Titel/video | Indhold |
|---|---|---|
| 24. Deployment | Introduktion til deployment (8:44) | Hvordan får vi vores Java Web Applikation til at køre på en Droplet? Her er en plan. |
| 25. Deployment af database | Overførsel af database (10:41) | Vores database på localhost skal overføres til MySql serveren på PROD. Dvs, på vores droplet. Det kræver lidt forarbejde. |
| 26. Credentials og setenv.sh | Håndtering af JDBC bruger, password og connection string (4:50) | MySql serveren på PROD har selvfølgelig ikke de samme credentials som på localhost. For at undgå at udstille sine brugernavne og kodeord på GitHub, anvender vi miljøvariabler i filen setenv.sh på Tomcat. |
| 27. Connection klassen | Brug af miljøvariabler i Connection klassen (6:04) | Java klassen “Connector” udvides til at finde ud af om vores webapp afvikles på localhost (DEV) eller PROD vha miljøvariabler. |
| 28. Deployment og debugging | WAR-fil bygges og uploades til Tomcat (9:55) | WAR-fil bygges i IntelliJ og uploades til Tomcat. Vi tager også et kig på Tomcats logfiler, hvor vigtig info til debugging findes. |
BMI Del 4: JavaDoc
| Emne | Titel/video | Indhold |
|---|---|---|
| 1. JavaDoc i IntelliJ | Sådan genererer du JavaDoc i IntelliJ (12:15) | Automatisk generering af dokumentation i Javaprojekter med JavaDoc på Package, Class og Method - niveau |
| 2. JavaDoc på GitHub Pages | Flyt JavaDoc til GitHub Pages (11:42) | Sådan får du lagt din JavaDoc på GitHub pages. Se også hvordan du genererer JavaDoc via Maven. |
UML: Diagrammer og objektorienteret design
Her kan du lære lidt om UML, hvornår og hvordan man bruger hvilke diagrammer, og hvordan du tegner dem i PlantUML.
| Emne | Titel/video | Indhold |
|---|---|---|
| 1. UML intro | Introduktion til UML-diagrammer (10:43) | En kort introduktion til UML diagrammer og deres anvendelse |
| 2. UML Navigationsdiagram | Tilstands/navigationsdiagram (35:30) | UML anvendes til at illustrere navigationen på et website. Tegnes i hånden og kodes i PlantUML |
| 3. UML Sekvensdiagram | Sekvensdiagram (43:59) | PlantUML anvendes til at tegne et sekvensdiagram for Kaspers Command Pattern skabelon |
| 4. UML Use Case diagram | Use Case Diagram (12:37) | Lær kunsten at designe Use Case Diagrammer sammen med en kunde |
| 5. UML Use Case diagram | Tegn i PlantUML (8:21) | Lær at tegne Use Case diagrammer i PlanUML |
| 6. UML Domænemodel | OOD Domænemodel (16:31) | Lær den endnu finere kunst, at designe domænemodeller før der er kodet en linie endnu |
| 7. UML Domænemodel | Tegn i PlantUML (10:00) | Lær at tegne domænemodelleri PlantUML |
| 8. UML Aktivitetsdiagram | Teori og PlanUML (16:32) | Lær at tegne aktivitetsdiagrammer i PlanUML og forstå værdien af dem |
SVG Workshop
| Emne | Titel/video | Indhold |
|---|---|---|
| 1. Intro | Introduktion til SVG og vektorgrafik (33:41) | Workshop om SVG, som er skræddersyet til 2. semester på datamatikerstudiet i Lyngby og på Bornholm foråret 2020. |
| 2. Simple tegninger | Tegning af flag og simple elementer (23:08) | Kom i gang med at tegne. Rektangler og simple elementer. |
| 3. Øvelse | Gennemgang af øvelse (13:35) | Se en løsning på tegning af svensk flag og cirkler. |
| 4. Carport I | Tegning af simpel carport (7:20) | Forslag til hvordan man kan tegne en meget simpel carport. GIST |
| 5. Carport II | Indlejret tegning med målestok (12:04) | Der tilføjes måleangivelser på carport-tegningen. GIST |
| 6. Java/JSP | SVG i Java webstack (dynamiske tegninger) (9:24) | Forslag til hvordan man kan generere tegninger i Java backend og præsentere dem som SVG på JSP-sider. GitHub Repo |
Test Workshop
| Emne | Titel/video | Indhold |
|---|---|---|
| 1. Intro | Introduktion til test (8:24) | Om at udvikle det rigtige vs. udvikle rigtigt |
| 2. Teori | Gennemgang af pensum (39:12) | Et kig på 2. semesters emner om test |
| 3. Strategi | Strategi for test af Fog Carport Projekt (20:21) | Forslag til hvordan man kan angribe Fog opgaven |
| 4 Unit test | Unit test af SVG klasse (20:30) | Kodegennemgang. GitHub Repo |
| 5. Integrationstest | Integrationstest af datamapper (25:34) | Kodegennemgang. GitHub Repo |
IDE: IntelliJ (work in progress)
På 1. og 2. semester har vi valgt primært at anvende IntellJ fra firmaet JetBrains, som IDE (Integrated Development Environment). Hvis ikke du allerede har installeret IntelliJ, så kan du erhverve dig en gratis licens for studerende her. Bagefter skal du downloade og installere IntelliJ i Ultimate Edition og indtaste den tilsendte licenskode. Hvis du hellere vil anvende Netbeans eller et andet IDE er det også fint, men videoerne på denne side er baseret på IntelliJ.
Følgende videoer er en introduktion til IntelliJ. Det er vigtigt at du har fået installeret Ultimate Edition.
| Emne | Titel/video | Indhold |
|---|---|---|
| Introduktion | Hvad er IntelliJ? (mm:ss) | Kort introduktion og lidt baggrundsinfo |
| Kom i gang | Nyt Java-projekt (mm:ss) | Begynd på et nyt Java-projekt (1. semester style) |
| JDBC | Brug af JDBC (mm:ss) | Få hul igennem til din MySql database |
| Brug af Maven | Maven (mm:ss) | Få styr på dine dependencies med Maven |
| Webprojekter og Tomcat | Webprojekt og Tomcat (mm:ss) | Sådan starter du et webprojekt og deployer til Tomcat |
| Unit-test og Debugging | Unit-test og debugging (mm:ss) | Se hvordan du kan teste og debugge dine programmer |
| Git | Git og IntelliJ (mm:ss) | Anbefalinger til brug af Git sammen med IntelliJ projekter |