ABOUT ME

Păvă | Alexandru Păvăloi

ABOUT YOU

TEAM

tehnologii Web

πŸ”₯Β  @FIIΒ  πŸ”₯

Β 

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

😭

😎

OR

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 😊

πŸ’” Β  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>
  1. 😎 ID
  2. πŸ˜‰ Class
  3. 😊 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 😊

πŸ’š Β  css #2 Β  πŸ’™

Week #3

CSS Dinner

Debugging CSS

BOX model

layout

πŸ†•πŸ†• Grid 
πŸ†• Flexbox
πŸ§“ Position
  • STATIC
  • RELATIVE
  • ABSOLUTE
  • FIXED
πŸ§“ Position
πŸ§“ 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 🈹
πŸ‘©β€πŸ’» Ex πŸ‘©β€πŸ’»
#1
#2

responsive design

πŸ“±Β  > πŸ’»

.profile {
  display: inline-block;
}

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

THANK'S 😊

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>

πŸš€ LEt's code πŸš€

  1. Write just the HTML
  2. Move the menu outside the screen
  3. Move the menu on-screen when a new class is added
  4. 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

THANK'S 😊

πŸ”₯ 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

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 😊

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

THANK'S 😊

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>
EX #0
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 😊

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
Ex #3
Write a XML which respects the XSDπŸ”₯

THANK'S 😊

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
 #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 😊

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

  1. Front-end

  2. Back-End

  3. API DEV #1

  4. 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

THANK'S 😊

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 😊

πŸ’– 🀘 πŸ₯‡ πŸ’ͺ

πŸ‘ πŸ”₯ πŸš€ 😎

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

BUTTON  + JavaScript = πŸ’–

References

Web Technologies | Laboratories

By Pava

Web Technologies | Laboratories

Slides for the Web Technologies laboratories I teach at UAIC University, Iasi.

  • 921
Loading comments...

More from Pava