THANK'S 😊

💔 css 💖

Week #2


img {
     border: 5px solid black;
}

property

value

selector

syntax

🚀 demo exercise 🚀

🚀 practice #1 🚀

Ex #1: Slider

Ex #2: Badge

Let's style our Twitter-page elements

Till next time:

1. Read about naming your CSS classes
2. Create an HTML & CSS Traffic-light. Details here
3. Finish styling the Twitter elements (no layout yet)


 --- BONUS ---
So you want Bonus work huh? Well, check the lab's website then!

THANK'S 😊

iampava.com/tw

💚 css #2 💙

Week #3

CSS Dinner

https://flukeout.github.io/

layout

🆕🆕 Grid

🆕 Flexbox

🧓 Position

THANK'S 😊

iampava.com/tw

PS: check out the Official CSS resources page. It has loads of cool stuff 😉

🎁 wrap-up 🎁

🚀 LEt's code 🚀

```
Write just the HTML
```
```
Move the menu outside the screen
```

Move the menu on-screen when a new class is added

Apply the transition property so that the movement is fluid

deploy on Github pages

Week #5 suggestions

🔥 Core functionality

👍 SEmantic html

💪 CSS architecture

🚀 RESPONSIVE

**M* user interaction**

🛩 on-air

📝 documented

PRE-PROCESSORS

CSS with superpowers

.header {
    color: #ff22dd;
}

.header.header--expanded {
    /* ... */
}

.header .logo {
    /* ... */
}

$color-primary: #ff22dd;

.header {
    color: $color-primary;

    &.header--expanded {
        /* ... */
    }

    .logo {
        /* ... */
    }
}

usefull links

SASS (Syntactically Awesome Style Sheets)

THANK'S 😊

iampava.com/tw

🔥 Web programming 🔥

Week 6

Server

3rd party API's

DB

Microservices

Client

Server

Browser

🚀 practice app 🚀

Sa se construiasca o aplicatie Web care sa-l asiste pe student in construirea proiectului la disciplina Tehnologii Web.

Aplicatia va oferi un "to-do list" detaliat ce cuprinde toate lucrurile pe care trebuie sa le aiba in vedere pentru promovare. Utilizatorii autentificati vor putea sa marcheze task'urile finalizate pentru a avea o mai buna privire de ansamblu asupra progresului, in timp ce utilizatorii ne-autentificati vor putea doar consulta lista fara a-si salva in nici un fel progresul.

DEMO

Our app will have 2 pages: the login one and the home one. Both of them have the same header.


Let's move the header code in a separate file and include it from there in both pages.

1. Create a header-component.php file which has a getHeader function returning the HTML for the header.

2. Include this component in index & home pages and render the header's HTML using that function

INDICATIONS

7 mins

EX #1

Let's assume only logged in users should see the home page. So, if the credentials match allow them access, if not just keep them on the login page.

1. You will have to add an action to our login form pointing towards php script. 

2. To access the input values use the $_POST array. The keys are the same as the name attribute on the fields

INDICATIONS

EX #2

12 mins

3. If the credentials match redirect to the home page. If not, redirect back to login page

4. To redirect just set the Location header like this `header("Location: google.com")`

We're on the home page but it's empty 😞 Let's read some dummy todo's from a CSV and add them to the page.

1. To read the CSV you can use the file function 

2. By iterating (foreach)over the result we can access each line, as a string.

3. To parse the string line into an array of values use the str_getcsv function

INDICATIONS

EX #3

15 mins

bonus work*

🔥 Instead of getting the ToDo's from a CSV file, get them from a Database.


* in case you didn't manage to implement the previous exercises, do that as well so you get the hang of PHP

THANK'S 😊

iampava.com/tw

Architecture

Week 7

db structure

users

```
username
```
```
password
```

   todos

```
id
```
```
topic
```
```
text
```

 done_todos

```
username
```
```
todo_id
```

Master diagram

Very high level view of all the component parts (Server, Client, Database, Services, Micro Services, Libraries )of this app and the connections between them

Example:

Server

Client

SQL DB

Google
Maps API

QR JS
Library

GitHub
Api

🙈 overview

```
☑ Database structure & relationships
```
```
☑ Design Patterns (MVC recommended)
```
```
☑ Class diagrams
```

☑ Usecase diagrams (at least 1 flow per user category)

```
☑ Master Diagram (see previous slide)
```

usfeull links

```
🎤 Software Architecture vs Code
```
```
📷 MVC in PHP tutorial
```
```
📄 RAML: RESTful API Markup Language
```
```
💻 RAML: How to?
```

THANK'S 😊

iampava.com/tw

EX #0

🔗 iampava.com/about

Let's create an XML file that models the places I've spoken at 😊

1. Make sure this XML file is self-explanatory. If I (a human) read it I should be able to understand what's going on in Pava's speaking life.

🔥👊 XML vs JSON 👊🔥

You're organizing a field-trip with a group of 100 students from the 3 biggest universities in Iasi. Let's model an XML file which details all the participants.

For each participant we care about his name, age, uni and role. (some students have additional responsibilities)

1. Make the XML self explanatory to another human.

INDICATIONS

10 mins

EX #3

Transform the TW-checklist DB from a relational one to a XML based one.

1. You may use one or more XML files. It's up to you

INDICATIONS

10 mins

EX #4

Talking about the same things but in different languages...😞

However...

schema.org

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Founded by Google, Microsoft, Yahoo and Yandex, Schema.org vocabularies are developed by an open community process, using the public-schemaorg@w3.org mailing list and through GitHub.

...

usfeull links

THANK'S 😊

iampava.com/tw

THE DOM

Week 10

Previous lab...

```
XML intro and modelling
```
```
XML serialization using DOM
```

Ex #1

💻 https://github.com/iampava/tw-labs

DOM practice in JavaScript 🔥

⚡ DOM events ⚡

Ex #2

Print a table with the weekdays and their schedule!

🔥 Validating XML's 🔥

DTD's

XSD's

Xml Schema Definition

💻 to the code

🔗 XML + XSD validator

Ex #3

Write a XML which respects the XSD🔥

THANK'S 😊

iampava.com/tw

WEB

Week 12

Ex #1

Write a SOAP Web Service that returns the Weather information for a particular day and use it in a "real" app.

```
client.html
```
```
app.php
```
```
weather-service.php
```

Ex #2

Build on the previous example and return data in XML format! Use the DOM to model it!

Ex #3

Set up a connection with a DB and get the data from there, before converting it to XML.

THANK'S 😊

iampava.com/tw

REST

web services

Week 13

ful

💻 Client 📱

⚒ server ⚒

🔑 REST SERVICE 🔑

Who talks with the Service?

📄 let's read the docs of a rest api

🔗 Chuck Norris API

🔗 Dog Ceo API

🔥 team Exercise 🔥

FrontEnd AJAX

let mockReq = new XMLHttpRequest();
mockReq.open( 'POST', 'https://demo.app/v1/users');

mockReq.addEventListener('load', function onLoad() {
    let jsonResp = JSON.parse(mockReq.response);

    switch (mockReq.status) {
        case 200:
            console.log("Whoooray!");
            break;
        default:
            break;
    }
});

mockReq.addEventListener('error', () => {
   console.error("Oups, something failed!"); 
});

let payload = {
  "username": "iampava",
  "avatar": "https://url.com/png"
};

mockReq.send(JSON.stringify(payload));

REST API call in PHP


$req = curl_init("https://demo.app/api/v1/users");

$headers = array(
    'Content-Type:application/json',
    'Accept: application/json'
);

$body = array(
    "client_id" => "1234",
    "client_pass" => "Secret"
);

curl_setopt($req, CURLOPT_POST, TRUE);
curl_setopt($req, CURLOPT_HTTPHEADER, $headers);
curl_setopt($req, CURLOPT_POSTFIELDS, json_encode($body));
curl_setopt($req, CURLOPT_RETURNTRANSFER, 1);

$respAsJson = json_decode(curl_exec($req));

curl_close($req);

REST listen to requests

switch ($_SERVER['REQUEST_METHOD']) {
    case "POST":
        if(preg_match('/\/api\/v1\/users\/?$/'
                , $_SERVER['REQUEST_URI'])) {
           
            // POST on api/v1/users 
        } else if(preg_match('/\/api\/v1\/users\/(.+)?$/'
                , $_SERVER['REQUEST_URI'])) {
            
            $json_str = file_get_contents('php://input');
            $json_obj = json_decode($json_str);
            
            echo $json_obj -> userId; //respond
            http_response_code(200);
        } else {
            http_response_code(404);
        }
        break;
    default:
        break;
}

DB layer

$conn = new mysqli
            ( "servername", "username", "pass", "db_name");

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

function getUser($username) {
    global $conn;

    $stmt = $conn->prepare('
        SELECT * FROM users 
        WHERE username = ?
    ');

    if (false === $stmt ) {
        die('prepare() failed: ' . htmlspecialchars($conn->error));
    }

    $stmt->bind_param('s', $username);
    $stmt->execute();
    $result = $stmt -> get_result();

    $row = $result -> fetch_assoc();

    return $row["pass"];
}

useful links

[REST] API Collections

https://github.com/toddmotto/public-apis

🔥 Resources to design & implement RESTful API's 🔥

Curl in PHP

THANK'S 😊

iampava.com/tw

ajax

Week 14

[ demo ]

Asynchronous

javascript & xml

let xhr = new XMLHttpRequest();

xhr.open("POST", "https://demo.app/api/v1/users");

xhr.addEventListener("load", function loadCallback() {
    switch (xhr.status) {
        case 200:
            console.log("Success" + xhr.response);
            break;
        case 404:
            console.log("Oups! Not found");
            break;
    }
});

xhr.addEventListener("error", function errorCallback() {
    console.log("Network error");
});

let payload = {
    username: "iampava",
    pass: "1234"
}
xhr.send(JSON.stringify(payload));

consume a rest api through ajax

🐶 dog-ceo api

Create a client-only app with a button.

Upon clicking the button, a new Labrador image should be appended to the page.

insert & delete

Bookmark

management app #2

🔥 FINAL SOLUTION

```
☑ fully functional solution
```
```
☑ uses AJAX
```
```
☑ project report in Scholarly HTML
```
```
☑ instructions manual
```

☑ demonstrative video (for M projects)

🔗 additional details

THANK'S 😊

iampava.com/tw