Portfolio ontwikkeling

Taak 1 Layouts

Deze taak heeft als doel dat jij:

• Weet wat een mappenstructuur en sitelayout is.
• Weet hoe je een mappenstructuur maakt.
• Weet hoe je een float layout maakt.
• Weet hoe je een flex layout maakt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Maak een site mappen- of directory structuur

Overzicht begint met een duidelijke mappenstructuur(scaffolding). De mappen maken we als volgt aan:

portfolio
├── media
│   ├── functions.js
│   └── style.css
├── header.php
├── navbar.php
├── sidebar.php
├── index.php
├── footer.php
└── functions.php

Wat heb je nodig:

Bronnen:

• w3schools Layout

Op te leveren producten:

Taak 2 Navigatie

Deze taak heeft als doel dat jij:

• Weet hoe je een hardcoded Navigatiebalk maakt.
• Weet hoe je een hardcoded Subnavigatiebalk maakt.
• Weet hoe je een dynamische Navigatiebalk functionaliteit ontwikkelt.
• Weet hoe je een dynamische Subnavigatiebalk functionaliteit ontwikkelt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

• w3schools Topnav
• w3schools Responsive Topnav

Op te leveren producten:

Taak 3 Tabel

Deze taak heeft als doel dat jij:

• Weet hoe je een hardcoded Tabel maakt.
• Weet hoe je een dynamische tabel functionaliteit maakt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

• w3schools Tables

Op te leveren producten:

Taak 4 Bestands CMS/CRUD

Deze taak heeft als doel dat jij:

• Weet wat de uitgangspunten CRUD en CMS betekenen.
• Weet hoe je een bestand kan inlezen (Read).
• Weet hoe je een bestand kan maken (Create).

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

• w3schools File Handling

Op te leveren producten:

Taak 5 Bestands CMS/CRUD vervolg

Deze taak heeft als doel dat jij:

• Weet hoe je een bestand kan verwijderen (Delete).
• Weet hoe je een bestand kan wijzigen (Update).
• Weet hoe je een bestand kan uploaden.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 6 Portfoliowerk CMS/CRUD

Deze taak heeft als doel dat jij:

• Weet hoe je een portfoliowerk kan inlezen (Read).
• Weet hoe je een portfoliowerk kan maken (Create).

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 7 Portfoliowerk CMS/CRUD vervolg

Deze taak heeft als doel dat jij:

• Weet hoe je een portfoliowerk kan verwijderen (Delete).
• Weet hoe je een portfoliowerk kan wijzigen (Update).
• Weet hoe je een portfoliowerk bestand kan uploaden.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 8 Contact en Vaardigheden functionaliteiten

Deze taak heeft als doel dat jij:

• Weet hoe je een contact functionaliteit ontwikkelt.
• Weet hoe je een vaardigheden functionaliteit ontwikkelt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 9 Beheer functionaliteit

Deze taak heeft als doel dat jij:

• Weet hoe je een beheer functionaliteit ontwikkelt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 10 Authenticatie cookies

Deze taak heeft als doel dat jij:

• Weet wat authenticatie en autorisatie is.
• Weet hoe je een authenticatie functionaliteit ontwikkelt die gebruik maakt van cookies.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 11 Authenticatie sessions

Deze taak heeft als doel dat jij:

• Weet hoe je een authenticatie functionaliteit ontwikkelt die gebruik maakt van sessions.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 12 Beheer overzichtspagina

Deze taak heeft als doel dat jij:

• Weet hoe je een beheer functionaliteit overzichtspagina maakt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 13 Sticky navigatiebalk

Deze taak heeft als doel dat jij:

• Weet hoe je een navigatiebalk ‘sticky’ maakt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 14 Vervolgkeuzemenu

Deze taak heeft als doel dat jij:

• Weet hoe je een hardcoded vervolgkeuzemenu maakt.
• Weet hoe je een hardcoded klikbaar vervolgkeuzemenu maakt.
• Weet hoe je een dynamische vervolgkeuzemenu functionaliteit ontwikkelt.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

Taak 15 Iconen

Deze taak heeft als doel dat jij:

• Weet hoe je een iconentoolkit kan gebruiken.

Iceland hell of kickstarter green juice jianbing sartorial pug food truck kinfolk wolf hoodie ugh. Snackwave blog literally bitters cronut fam food truck gastropub. Edison bulb marfa four dollar toast man bun ethical flannel vexillologist palo santo. Hoodie cloud bread hashtag, bushwick af seitan post-ironic gastropub.

Opdrachten:

Wat heb je nodig:

Bronnen:

Op te leveren producten:

• w3schools Contact form

• w3schools Login form

• w3schools File upload

• w3schools Zebra table

• w3schools Sticky Elements

• w3schools Contact page

• w3schools About page

• w3schools Google fonts

• w3schools Sticky Navbar

• w3schools Skill bar

Ls1 Intro StarDunks App development

It happens millions of times each week — a customer receives a cookie from a StarDunks waitress — but each interaction is unique. It’s just a moment in time — just one hand reaching over the counter to present a cookie to another outstretched hand. But it’s a connection. We make sure everything we do honors that connection — from our commitment to the highest quality cookies in the world, to the way we engage with our customers and communities to do business responsibly. From our beginnings as a single store over 5 years ago, in every place that we’ve been, and every place that we touch, we’ve tried to make it a little better than we found it. Learn more about Our Company.

This lesson focuses on:

• What is StarDunks offering
• The ERD entity relationship diagram
• The Products table

Enter StarDunks

• StarDunks offers Products
• Customers can Order, for example, Cookies and Something to Drink

Our motto – Keep It Simple and Straightforward (KISS)

We are starting in a simple way with this diagram which shows two Entities without a Relationship. We will elaborate on the Relationships between them and the meaning of the ‘PK’ and ‘FK’ will be explained later on.

Products

I want to convey to you the value of seeing the real world as a Database Schema. It’s always very interesting and adds a challenge as you walk or drive around and think about how you would create a Database Schema for the real world that you can see around you.

• Let’s say we go into StarDunks to get a cookie and something to drink.
• At this point, StarDunks doesn’t know us as a Customer.
• Also we might be doing the office cookie run, and maybe we have with us our Order on a piece of paper.
• These two ‘Things of Interest’, Products and Customer_Orders, are not related until we give our Order.
• Data Modellers commonly describe a Database Schema as an Entity-Relationship-Diagram, or ERD.
• The word ‘Relationship’ is therefore very important.
• However, at this point, we haven’t established a Relationship between the Products and the Customer_Orders.

Ls2 Primary and Foreign Keys and Relationships.

This lesson focuses on:

• What are the type of keys and relationships
• Primary keys
• Primary/Foreign Keys
• Foreign Keys
• One-to-Many Relationships
• Crows-Feet
• Many-to-Many Relationships

Keys

• Primary and Foreign Keys

Relationships

• One-to-Many and Many-to-Many Relationships

Ordering in StarDunks

I would like to start by defining some basic conventions.

Primary Keys.

• These are indicated by ‘PK’ alongside the field in a Table.
• They show the field that identifies the record uniquely.
• For example, the ‘product_id’ for a Product and an ‘order_id’ for an Order.
• The values are usually generated by an ‘Auto-Increment’ field.
• They don’t have any intrinsic meaning and are simply integers generated automatically one after another.

Primary/Foreign Keys.

• These are indicated by ‘PF’ alongside the field in a Table.
• In this case, the field also exists as a Primary Key in another Table.
• In our example, the Primary Key in the ‘Customer_Orders_Products’ Table is a Composite Key, made up of two Fields.
• The ‘product_id’ is the Primary Key in the ‘Products’ Table, and the ‘order_id’ is the Primary Key in the ‘Customer_Orders’ Table.

Foreign Keys.

• These are indicated by ‘FK’ alongside the field in a Table.
• They show a reference to the Primary Key for a record in another Table.
• For example, the ‘customer_id’ in the Customer_Orders Table is linked to a ‘customer_id’ in the Customer Table (not shown).

One-to-Many Relationships.

• One-to-Many Relationships are very common in the real world, and can be read that ‘One’ Parent can have ‘Many’ children.
• In this diagram, One Product can be associated with Many Customer_Orders_Products.
• The line between Products and Customer_Orders_Products is a continuous line (not a dotted line).
• This means that the ‘product_id’ field is a Primary Key in the Customer_Orders_Products Table.
• A dotted line would indicate the existence of a Foreign Key (which is defined above).

‘Crows-Feet’

• At the Customer_Orders_Products end, there is what’s called a ‘Crows-Feet’ symbol.
• This indicates the ‘Many’ aspect of the relationship.
• The little ‘o’ shows that this is an Optional relationship.
• In other words, not every Product has an associated record in the Customer_Orders_Products Table.
• This applies, of course, to Products that nobody orders.
• At the other end of the line there is a small horizontal line. This means that this is essential.
• In other words, every product_id in the Customer_Orders_Products Table must match a product_id in the products Table.
• This means that a Customer cannot order a Product that does not exist.
• In passing, let me say that this is different from the Product not being in stock.
• This aspect is called Inventory Control and is covered by a different Database Schema.
• The Relationship between Customer_Orders and Customer_Orders_Products shows a short horizontal line at each end.
• This indicates that every Order must contain at least one Product.
• It also indicates that Product in every Customer_Orders_Products must be associated with an Order in Customer_Orders.

Many-to-Many Relationships.

• Many-to-Many Relationships are very important in the real world, and we see them all around us every day.
• In our example, many Customers can order the same Product.
• Many Products can be ordered by the same Customer.
• This is called a Many-to-Many Relationship. It cannot be implemented directly in a Table in a Relational Database.
• The solution is to create an intermediate table that records all combinations that exist of Customer and Product.
• For example, if a Customer ordered three Products, then there would be three records for that Customer in this intermediate table.
• The combination of the Primary keys in the parent Tables become the Primary key in this intermediate table.
• We also need to allow for Comments like ‘Make it extra sweet, please’.
• If we get the structure to the Database right, then it’s straightforward to extend it.

Ls3 StarDunk Levels

This lesson focuses on:

• Levels of output
• Wireframe Level 1
• Wireframe Level 2
• Wireframe Level 3
• Wireframe Level 4
• Wireframe Level 5
• Wireframe Level 6
• Wireframe Level 7

Levels of output

I have defined seven LEVELS of source code output. I believe in “Learning Progression” to ensure efficient learning. Below are some wireframes. You can click an image to view the larger version of it.

Algemeen

• Archive or save your code seperate per level in a versioning platform such as GITHUB preferably use branching or create seperate repositories.
• Minimum setup is a responsive CRUD application based on the MVC design pattern.

Wireframe Level 1

• use HTML
• use CSS and Flexbox
• use PHP PDO
• use OOP style

Relevante Jarvis modules

• Front-end Recap
• Database PDO (and previous modules)
• Object Oriented Programming Intro
• HTML/CSS Advanced (and previous modules)

Wireframe Level 2

• place the euro sign
• place the css icons
• create the searchbar
• generate the pagenumbers

Relevante Jarvis modules

• Your Fullstack developer
• Database advanced
• Your Fullstack Framework
• HTML/CSS Advanced (and previous modules)
• CSS Pro

Wireframe Level 3

• add the next element
• create the check(select)boxes
• create the export
• create the selected delete
• show a modal to confirm selected delete
• add a date column
• use a datepicker

Relevante Jarvis modules

• JavaScript Pro
• HTML Pro

Wireframe Level 4

• create the customer orders table
• create the customer orders views
• create a menubar
• add a logo
• add a products pulldown on product type
• add a orders pulldown on order status
• create a styled pagination bar
• add the orderby columns

Relevante Jarvis modules

• CSS Frameworks
• CSS pro

Wireframe Level 5

• add the ability to upload a file
• show the uploaded file in the detail view
• create the even and odd table style

Relevante Jarvis modules

• …

Wireframe Level 6

• add an autosuggest functionality to the search bar
• create a temporary table to optimize shizzle
• create a paging ability to the search results

Relevante Jarvis modules

• …

Wireframe Level 7

• add the inline edit abilities to the input fields
• show a modal when a mouseover or click event occurs depending on the mediaquery
• use userfriendly column names

Relevante Jarvis modules

• …

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et ipsum elit. Integer feugiat magna ipsum, eu interdum ante facilisis sed. Sed euismod dolor sit amet nisi vehicula consectetur vel et urna. Ut condimentum nulla nec tempus lobortis. Fusce rhoncus eu augue eu rhoncus. Vivamus eget faucibus libero, id sollicitudin quam. Integer in erat tellus. Nunc sollicitudin, quam vitae sagittis pellentesque, purus erat dignissim augue, non imperdiet purus risus sed mauris. Nam at condimentum lacus, sit amet sagittis leo. Nullam lacus mi, tincidunt quis magna ac, tempus volutpat libero. Sed sed metus congue, commodo magna in, porta arcu. Ut quis lobortis nisi.

Vestibulum faucibus leo magna, quis laoreet libero volutpat a. Vestibulum laoreet aliquam diam, vitae volutpat nisi dapibus at. Vestibulum eu orci lacus. Integer interdum nibh sed elit efficitur mollis. Morbi eu urna id felis ullamcorper ullamcorper. Nam mattis rutrum volutpat. Vivamus nec risus ut lectus imperdiet posuere. Maecenas id eleifend quam. Nunc semper semper ipsum, pretium tristique sapien dapibus vel. Fusce eget pulvinar odio. Suspendisse potenti.

Pellentesque euismod arcu rhoncus massa malesuada hendrerit. Sed suscipit mi porta, sagittis justo ac, porttitor est. Nulla tincidunt ullamcorper nisi, sed blandit lorem vulputate quis. Sed vitae sapien in lorem ornare vulputate. Morbi dolor quam, gravida a euismod at, vestibulum quis dui. Nunc eu mi tempor lectus consectetur semper. Cras maximus leo ac dictum molestie. Sed molestie maximus lorem, at sodales est imperdiet eu. Aenean sit amet quam in dolor tincidunt pharetra. Phasellus vehicula felis gravida nisl feugiat rhoncus. Quisque ullamcorper laoreet massa, ut eleifend risus elementum et. Integer lectus ante, mattis ut metus sed, mollis accumsan tellus. Vestibulum interdum, nunc sit amet vehicula faucibus, diam est maximus nisi, quis efficitur lacus sem in dolor. Mauris gravida justo metus, eu placerat justo suscipit eu. Vivamus ipsum eros, faucibus eget vulputate eu, consectetur id augue.