ABOUT ME

Păvă | Alexandru Păvăloi

iampava.com

pava@iampava.com

ABOUT YOU

TEAM

tehnologii Web

🔥 @FII 🔥

Official Web Page

the web is

@m@5ing

By the end of the course you:

🔥 will have acquired confidence to start basic Web projects on your own

🚀 will have worked on a personal project which showcases your skills

🎈 will have worked with multiple colleagues and thus grow your team-work skills

1. work on something you ❤

RECIPE

for

success ❤

🚀 the start-up way 🚀

2. VALIDATE IT 👍

3. pROTOTYPE | WEEK #5 🤘

4. ARCHITECTURE | WEEK #11 💪

5. fINAL SOLUTION | EXAM WEEK 🚀

6. WORLD DOMINATION 😎

Helpful tools

or

RECIPE

for

disaster

🔥 pick a boring as hell project
😠 pair with people who find it just as boring
👩‍💻 try and work on it
😭 realize that it's BORING AS F***!!!
😡 blame me!
😡😡 blame Prof. Buraga
😞 quit...

requirements

😎

😊

😞

😭

NO FRAMEWORKS

😭

😎

if you no choose,

we choose for you 😈

PF = P * 0.2 + A * 0.2 + S * 0.5 + T * 0.2

🔍 More info here

internet & the web

CLIENT SERVER

Java
PHP
JavaScript
etc...

STATE OF FRONT-END

HTML

🚀 LET'S CODE 🚀

Till next time:

1. Read How it feels to learn JavaScript in 2016
2. Make a team & decide on projects (top 2). If you don't like any project, than propose one
3. HTML structure of YouTube

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

Set up a Twitter and follow these people

```
Addy Osmani
```
```
Jake Archibald
```
```
Monica Dinculescu
```
```
Brendan Eich
```
```
Dan Abramov
```
```
CSS Tricks
```
```
Sarah Drasner
```
```
Alex Russell
```
```
Mike North
```
```
Wes Bos
```
```
freecodecamp
```
```
JavaScript Daily
```

THANK'S 😊

iampava.com/tw

💔 css 💖

Week #2

let's be honest...

I don't like CSS that much 😞

BUT...

I ❤ THE RESULT


img {
     border: 5px solid black;
}

property

value

selector

syntax

Where do we put it?

1. INLINE

<p style="font-weight: bold"> 
    A simple styled paragraph...
</p>

2. <style> tag

<style> 
    h1 {
        text-align: center;
    }
</style>

3. external

<!-- index.html -->

   <link rel="stylesheet" 
         href="style.css" />

<!-- style.css -->

    footer {
        color: #000;
        background-color: #fff;
    }

Selectors

#ID to the rescue

i want to select a specific element from the page

<p id="hello"> 
    A simple styled paragraph...
</p>

<style>
    #hello {
        font-weight: bold;
    }
</style>

.class to the rescue

i want to select similar elements from the page

<button class="btn round"> 
    Log In
</button>

<style>
    .btn{
        border-radius: 10px;
    }
</style>

tag to the rescue

i want to select same-tag elements from the page

<h1> 
    Who is BuBu?
</h1>

<style>
    h1{
        font-size: 50px;
    }
</style>

<!-- index.html -->

<img class="round-image" id="profile" 
    src="user.jpg" />


<style>
    img {
        border: 1px solid black;
    }
    
    .round-image {
        border: 5px dotted yellow;
    }
    
    #profile {
        border: 2px solid blue;
}
</style>

```
😎 ID
```
```
😉 Class
```
```
😊 Tag Name
```

💥 !important

Selectors #2

& rule

parent rule

.valentines.in-love {
    // both "valentines" & "in-love" 
    //      classes
    text-decoration: make-up;
}

.raining .human {
    /* "human" class inside "raining"-class 
             elements
    */
    display: hidden; 
    position: under-blanket;/
}

.raining.valentines .in-love {
    color: red;
}

faculty.in-iasi.state-owned .b4 #gicu {
    display: none;
}

Priority #2

<div class="card">
    <p class="card__header"> Amsterdam </p>
    <img class="card__image round" id="home" 
        src="duck.jpg"/>
</div>

<style>
    .card__image { border-color: black; }
    
    .card .card__image { border-color: red; }

    .card .card__image.round {
        border-color: green;
    }
    
    #home { border-color: blue; }

    .card #home { border-color: white; }
    .card__image#home { border-color: brown; }
</style>

🚀 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/

Debugging CSS

BOX model

layout

🆕🆕 Grid

🆕 Flexbox

🧓 Position

```
STATIC
```
```
RELATIVE
```
```
ABSOLUTE
```
```
FIXED
```

🧓 Position

Documentation

🧓 Position Practice

https://glitch.com/edit/#!/position-practice

#1: relative

Move all the grades closer to the Week #no

Ex #2: absolute

Move the grades in the bottom-right corner of the Week box

Ex #3: fixed

Fix the footer in the bottom-right of the screen

```
BLOCK
```
```
INLINE-BLOCK
```
```
INLINE
```
```
🧓 TABLE
```
```
🆕 FLEXBOX
```
```
🆕 GRID
```

🈹 Display 🈹

Why are tables bad?

👩‍💻 Ex 👩‍💻

#1

#2

responsive design

📱 > 💻

.profile {
  display: inline-block;
}

@media (max-width: 600px) {
  .profile {
    display: block;
  }
}

THANK'S 😊

iampava.com/tw

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

Week #4

🎁 wrap-up 🎁

HTML

```
Hyper Text Markup Language
```
```
HTML --> DOM tree
```

the structure of Web Pages

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    
    <body>

    </body>
</html>

💖 CSS 💖

```
Cascading Style Sheets
```
```
inline | <style> | external
```
```
#id | .class | tag
```

priority?

POSITION 🚩

DISPLAY 💻

&

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style1.css" />
        <link rel="stylesheet" type="text/css" href="style2.css" />
    </head>
    <body>
        <p> what color do I have </p>
    </body>
</html>

/** style1.css */

p {
    color: black;
    text-align: center;
}

/** style2.css */

p {
    color: red;
    font-size: 22px;
}

BEM: block element modifier

<body>
    <section class="question">
        <p class="question__body"> 
            Do you even bike?
        </p>
        <p class="question__answer">
            No
        </p>
        <p class="question__answer 
            question__answer--selected">
            Yes
        </p>
    </section>
</body>

🔗 getbem.com

🚀 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

HTTP Protocol

HEADer

BODY

1) HTTP methods

2) http status codes

🔗 Status Dogs

🔗 Methods @MDN

GET

POST

PUT

DELETE

...

🚀 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

<?pHP ?>

variables

```
Number
```
```
String
```
```
Boolean
```
```
Array
```
```
Object
```
```
NULL 
```

<?php
    $tw = NULL;
    echo $tw;
    
    $tw = 22;
    $tw = 'Amu is String';
    
    class Human {
        public $name = 'Bob';
    }
    $tw = new Human();
    echo $tw->name;
?>

Syntax

if

for

while

foreach

<?php
    $tw = NULL;
    
    if($tw === NULL) {
        echo "it's null";
    }
    if($tw == FALSE) {
        echo "it's also false!!!";
    }
    
    $tw = [1,2,3];
    foreach($tw as $index => $e) {
        echo "at $index is $e <br/>";
    }
?>

😎 functions 😎

<?php
    function sumMeBaby($param1, $param2) {
        return $param1 + $param2;
    }
    
    class Human {
        public function buyFood() { }
    }
?>

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

The software architecture of a system depicts the system’s organization or structure, and provides an explanation of how it behaves.

In other words, the software architecture provides a sturdy foundation on which software can be built.

[...]

Decisions...

Decisions

EVERYWHERe!!!

😎 Programming language(s)
🚀 Libraries & Frameworks
🔥 3rd party services
💾 Database(es)
💻 Design Patterns
...

demo app #2

MVC

Controller(s)

Model(s)

view(s)

👨‍🏭

Controller(s)

Model(s)

view(s)

```
renders the UI
```
```
what the users sees and interacts with
```

the data layer: Objects, files, Database

has functionality which stores and retrieves this data

```
where the s*** happens
```

responds to user actions by getting/storing data in the Model and showing an appropriate View

db structure

users

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

   todos

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

 done_todos

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

auth

🍪 cookies

&

💾 Sessions

Bob

Login

Login
Controller

Auth
Model

Check

Credentials

store

🍪 username & pass

🍪 token

aPI [RAML]

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

XML

Week 9

Extensible Markup Language

<?xml version="1.0" encoding="UTF-8"?>
<produse>
    <produs stare="deteriorat">
        <nume> Pink Uinix </nume>
        <ofertant> http://www.pinfuin.info </ofertant>
     </produs>
     <produs>
        <nume> Sosete Colorate </nume>
        <ofertant> https://www.iampava.com </ofertant>
    </produs>
</produse>

tag

attribute

<?xml version="1.0" encoding="UTF-8" ?>
<produse>
    <produs stare="deteriorat">
        <produsXML:nume> Pink Uinix </produsXML:nume>
        <ofertant>
            <nume> pinguini.ro </nume>
            <adresa> Strada Polul Nord, 22 </adresa>
        </ofertant>
     </produs>
     <produs>
        <!-- ... -->
    </produs>
</produse>

🔗 https://codebeautify.org/xmlvalidator

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 changing towns but you're not taking your books with you. So, you take your PC and decide to create an XML file which represents your entire collection.

1. Make sure this XML file is self-explanatory for a human.

INDICATIONS

10 mins

EX #1

Solution #1

Document Object Model

Modelling HTML, SVG and XML documents as objects. 

[...]

The DOM model represents a document with a logical tree.

💻 Let's create the XML we did in the last exercise in PHP! Using DOM 🔥🔥🔥

10 mins

EX #2

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 ⚡

break...

🔥 node access 🔥

CSS

Xpath

💻 to the code

querySelector vs querySelectorAll

CSS

XPath is a query language for selecting nodes from an XML document. In addition

$x function

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

⭐⭐⭐⭐⭐⭐⭐

ratings on
The Web

 THE USECASE...

 #1 Web Scrapping

😭😡😞👿

 #2 Web Services

A Web service is a software system designed to support inter-operable machine-to-machine interaction over a network.

 Examples

```
TrendsMap 
```
```
Authentication with Social Media
```

 #2 SOAP: 
    Simple Object Access Protocol

messaging protocol for exchanging structured data to & from a webservice

SOAP = RPC la nivel de Web

int getSum

(int, int)

float convert

(float)

SOAP Enpelope

SOAP Header

SOAP Body

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

REpresentational 
State Transfer

The computational results are actually resource representations

1

each resource representation has an associated URL

2

clients interact with those resources via http verbs

3

https://demo.app/v3/users

https://demo.app/v3/users/1234

GET

{
  "users": [{
    "username": "iampava",
    "avatar": "https://demo.app/avatar.png"
  }]
}

{
  "username": "iampava",
  "avatar": "https://demo.app/avatar.png"
}

📄 Accept: application/json

⬅

➡

https://demo.app/v3/users/1234/settings

PUT

{
  "theme": "light-gray",
  "notifications": false
}

➡

⬅ 201

https://demo.app/v3/users/

Post

➡

⬅

{
  "username": "iampava",
  "avatar": "https://demo.app/avatar.png"
}

{
  "username": "iampava",
  "avatar": "https://demo.app/avatar.png",
  "userId": 1234
}

https://demo.app/v3/users/1234

delete

⬅ 200

⬅ 404

or

💻 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 🔥

👨‍💻👩‍💻 Teams of 4

Bookmark

management app

Front-end
Back-End
API DEV #1
api dev #2

CLIENT

SErver

REST API

{

get all the bookmarks
add a bookmark
update a bookmark
delete a bookmark

{

receives the client requests
forwards them to the API
responds with the API's response
aka: acts as a proxy

{

CRUD on the bookmark collection

FrontEnd

HTML
CSS
AJAX
DOM Update

BackEnd

listen to requests
call the REST service
respond with the result

API DEV #1

{

listen to requests
call the DB layer
respond with result

API DEV #2

{

expose DB functions
select, insert, update

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"];
}

GO!!!

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

💖 🤘 🥇 💪

👍 🔥 🚀 😎

the web in 2018

🔥 JavaScript 🔥

Brendan Eich

1995
JS
creation

1997
ECMA
standard

2007
V8 project starts

2008 - 2010
Race for speed

2009
AngularJS

2013
React

2009
NodeJS

2014
VueJS

2018
> 5B
devices

Extended history video

Desktop

Mobile

Server

Browser

variables

```
Number
```
```
String
```
```
Boolean
```
```
Object
```
```
Null 😲
```
```
Undefined 😲😲
```
```
Symbol*   😲😲😲
```

var tw;
console.log(typeof tw);

tw = 22;

console.log(tw);

tw = 'Amu is String';

Syntax

if

for

while

single-thread'ed

asynchronous

control flow

🚀

to the Code

😎 functions 😎

They are First Class citizens!

LEt's code #2

Can I Use?

BUTTON  + JavaScript = 💖

ABOUT ME

ABOUT YOU

TEAM

tehnologii Web

🔥 @FII 🔥

the web is

@m@5ing

By the end of the course you:

1. work on something you ❤

RECIPE

for

success ❤

🚀 the start-up way 🚀

2. VALIDATE IT 👍

3. pROTOTYPE | WEEK #5 🤘

4. ARCHITECTURE | WEEK #11 💪

5. fINAL SOLUTION | EXAM WEEK 🚀

6. WORLD DOMINATION 😎

Helpful tools

or

RECIPE

for

disaster

🔥 pick a boring as hell project

😠 pair with people who find it just as boring

👩‍💻 try and work on it

😭 realize that it's BORING AS F***!!!

😡 blame me!

😡😡 blame Prof. Buraga

😞 quit...

requirements

😎

😊

😞

😭

NO FRAMEWORKS

😭

😎

if you no choose,

we choose for you 😈

PF = P * 0.2 + A * 0.2 + S * 0.5 + T * 0.2

internet & the web

CLIENT SERVER

STATE OF FRONT-END

HTML

🚀 LET'S CODE 🚀

Till next time:

THANK'S 😊

💔 css 💖

let's be honest...

I don't like CSS that much 😞

BUT...

I ❤ THE RESULT

syntax

Where do we put it?

1. INLINE

2. <style> tag

3. external

Selectors

#ID to the rescue

i want to select a specific element from the page

.class to the rescue

i want to select similar elements from the page

tag to the rescue

i want to select same-tag elements from the page

Selectors #2

& rule

parent rule

Priority #2

🚀 demo exercise 🚀

🚀 practice #1 🚀

Till next time:

THANK'S 😊

💚 css #2 💙

CSS Dinner

Debugging CSS

BOX model

layout

responsive design

📱 > 💻

**M* user interaction**