Alexandru Păvăloi

An open platform

for building apps, games & awesomeness

🔨

😎

🔗

Shareable with just a link

🔥 tehnologii Web 🔥

 

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 

This course is not about:

Front-end
Learning frameworks

#1 work on something you

RECIPE

for

success!

#2 pROTOTYPE | WEEK #5 🤘

#3 ARCHITECTURE | WEEK #11 💪

#4 fINAL SOLUTION | EXAM WEEK 🚀

#5 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...

no frameworks!

😎

😊

😞

😭

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

T - 3 teste optionale, neanuntate la curs, maxim 10pct
E - 3 teste optionale, neanuntate la seminar, maxim 10pct
✅ To pass

P

A

S

E

}

> 5

One last stop...

VS Code
Chrome
glitch.com
codepen.io

Every Saturday I'll post in-advance exercises for the next lab!

internet & the web

CLIENT              SERVER

  • Java
  • PHP
  • JavaScript
  • etc...

I need a volunteer!

<BR />

This

is

HTML ▶

HTML doesn't look good, but works good!

⬇ HTML elements/tags ⬇

<img>
<p></p>
✅ Self-closing
✅ Need a closing tag!
<img src="bob.png">
<p>
  Hi!
  <img src="bob.png">
</p>
Elements can have attributes!
Or contain other elements!
<!DOCTYPE html>
<html>
  <head>
    <title> My page </title>
  </head>

  <body>
    <h1> Hello! </h1>
  </body>
</html>

Let's code!

#1 who to follow

#2 Twitter Header

THANK'S!  🙏

💔   css   💖

Week #2

Q&A 🤔

✅ always validate your HTML here: https://validator.w3.org/

✅ don't choose an HTML tag for it's style

✅ `action` and `method` attributes on form

label for each input

<label for="usernameInput"> Username </label>
<input type="text" id="usernameInput" required >

✅ `type` and `required` attributes

✅ <select> or  radio input for the gender

✅ if you can click on it, it's a <a> or a <button>

<button type="button"> ❤ </button>
<footer>
  <nav>
    <ul>
        <li> <a href=""> Privacy </a> </li>
        <li> <a href=""> Terms </a> </li>
    </ul>
  </nav>
</footer>

#2 what you had to do

<img srcset="
https://iampava.com/PICTURES/tw-2019/bike-fullhd.jpg 1980w,
https://iampava.com/PICTURES/tw-2019/bike-medium.jpg 1000w,
https://iampava.com/PICTURES/tw-2019/bike-small.jpg 480w"

sizes="100vw"
src="bike-50.jpg"
alt="bikes"
/>

let's be honest...

sometimes css is a pain in the a**

but it can also be... AMAZING!

🔥🔥🔥 AMAZING 🔥🔥🔥

If you wrote CSS before, implement this mini btn library


??? {
     border: 5px solid black;

     background: blue;
}
property
value
selector

syntax

@media screen and (max-width: 500px) {
  ??? {
     border: 5px solid black;
     background: blue;
  }
}

@media screen and (orientation: landscape) {
  ??? {
     background: red;
  }
}

based on Device

Where do we put it?

1. external

<!-- index.html -->
<link rel="stylesheet"  href="style.css" />


<!-- style.css -->
footer {
    color: #000;
    background-color: #fff;
}

2. same file via <style> tag

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

3. INLINE

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

Selectors

tag to the rescue

i want to select same-tag elements from the page

<p> 
    Who is Batman?
</p>

<p>
    ...uhm, Bruce Wayne?
</p>

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

.class to the rescue

i want to select similar elements from the page

<button type="button"> Log In </button>
<button type="button"> Register </button>
<button type="button"> Sign Out </button>
<button type="button" class="btn-round"> 
    Log In 
</button>
<button type="button" class="btn-round"> 
    Register 
</button>

<button type="button"> Sign Out </button>
<style>
    .btn-round {
        border-radius: 10px;
    }
</style>

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

It's all about how specific you are!

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

<style>
    img {
        border: 1px solid black;
    }
    
    .round-image {
        border-radius: 50%;
        border: 5px dotted red;
    }

    .square-image {
        border-radius: 0;
        border: 5px dashed green;
    }
    
    #profile {
        border: 2px solid blue;
}
</style>
  1. 😎 ID
  2. 😉 Class
  3. 😊 Tag Name
💥 !important

Selectors #2

parent  rule

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

& rule

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

I need a volunteer!

code #1

code #2

code #3

THANK'S!  🙏

css #2  

Week #3

Q&A 🤔

<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1"
>
Without this it won't be responsive on mobile devices...
Bonus

CSS Dinner

layout

  • STATIC
  • RELATIVE
  • ABSOLUTE
  • FIXED
  • Sticky
{ position: ? }
  • BLOCK
    
  • INLINE-BLOCK
  • INLINE
    
  • 🧓 TABLE
  • ❤ FLEXBOX
  • 🆕 GRID
{ display: ? }

BOX Model

Transforms

#logo {
    tranform: scale(1.1) rotate(35deg);
}
#logo {
    transform: scale(1.1) rotate(30deg);
    transform-origin: 0 0;
}

/* transform-origin: center | top left | top right | ... */

TRANSITIONS

🔴

🔴

.5 sec
#logo {
  transition: transform .5s ease-in;
}

#logo:hover {
  transform: scale(1.1);
}
property
timing
function
duration

But they can work with more properties...

#logo {
  transition: all .5s ease-in;
}

#logo:hover {
  opacity: 0;
  transform: scale(2);
  /* ... */
}

Let's build one of the most popular Web interactions!

Animations

🔴

🔴

A
A

🔴

A

🔴

A
#logo {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg)
  }
}
duration
name
timing
function
iteration count

THANK'S!  🙏

Week #4

Q&A 🤔

🎁 wrap-up 🎁

HTML

<label for="email">
  Email*
</label>
Tag
Attribute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta 
      name="viewport" 
      content="width=device-width, 
      initial-scale=1.0
    ">
    <title>Document</title>
    <!-- Meta data - aka: data about data -->
</head>
<body>
    <!-- Actual content of the page -->
</body>
</html>
Must have for responsiveness

CSS

.header .logo {
    border: 5px solid black;
    position: relative;
    left: 50px;
}
Selector
Property
Value

#where do we put it?

✅ external
👎 in-page
👿 inline

#priority

ID

#bob {
  color: red;
}

Class

.fii {
  font-weight: bold;
}

Tag

student {
  background: #abcdef;
}
If same selectors, then the last one in the stylesheet wins!
Practical Recommendation
  1. visualize your website like a series of componets. Examples are: the login form, the header, footer, a product card, etc...
  2. give each of these "components" a unique class name
  3. style themselves and their content based on this class name to avoid conflicts

#display

<div>
<p style="display: block">

I'm small but important! Give me all this space!

<p style="display: inline-block">
<p style="display: inline-block">

I'just need this much :)

I'just need this much :)

Highly highly recommend learning and using it in the project! 🔥

❤ Flex

#position 🚩

static

Default - aka - nothing special.

relative

Relative to it's static position.

{ top: 20px; left: 15%; }

{ bottom: 3em; right: 5px; }
absolute

Relative to the first ancestor with a non-static position

{ top: 20px; left: 15%; }

{ bottom: 3em; right: 5px; }
fixed

Relative to the first ancestor with a transform property

{ top: 20px; left: 15%; }

{ bottom: 3em; right: 5px; }

deploy on Github  pages

<Br />

Week #5 

🎨 HTML & responsive CSS for:

B) Main functionality

M) + user interaction

🤔 Do you have all the project's pages implemented?

🤔 Have you implemented most of the user-interactions? Sliding menus, pop'ups, etc...

❗ Validate all your HTML - https://validator.w3.org/

❗ Every team-member will be marked according to his contribution to the project as seen in the public GitHub repo!

❗ Having all the pages is not enough. Make sure you've written quality HTML & CSS

Evaluation timetable soon on: https://iampava.com/tw

Q&A projects? 🤔

💪 Practice some more HTML & CSS

OR

🏠 go home

THANK'S!  🙏

Week #6

back-end development

Download and install XAMPP if you've chosen PHP!

Server
3rd party API's
DB
Microservices
Client
Server
Browser
Math operations

✅ PHP intro

✅ Add 2 numbers using a Form

✅ Decide order based on checkbox

Add dropdown to choose betweeen

Users

✅ Read users from JSON and show on screen

Insert users into that JSON via a form!

Implement "Delete users" functionality!

THANK'S!  🙏

Sessions & storage

Week #7

Q&A 🤔

Feedback results

  • Prea putin timp la test
  • Enunt la test, nu doar un GIF/Video
  • Mai multe "joculete" gen CSS Dinner

?

Poate ar trebui pe viitor sa acorzi mici puncte bonus pentru exercitiile corecte trimise pe platforma.
Poate ca nu ar trebui sa fie doua designuri diferite care sa faca diferenta la teste si putin mai mult timp. La celelalte grupe, nu am auzit sa fie acelasi principiu de notare.
Obligarea studentilor sa foloseasca git pentru a publica laboratoarele. Si dupa sa fie corectate

SQL + XAMPP =

<?php 
  $CONFIG = [
    'servername' => "localhost",
    'username' => "root",
    'password' => '',
    'db' => 'test'
  ];

  $conn = new mysqli($CONFIG["servername"], $CONFIG["username"], $CONFIG["password"], $CONFIG["db"]);

  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  } else { 
    echo "Successfully connected to DB";
  }
?>
Query'ing the DB

We're using Prepared Statement to prevent this 👇

Query'ing the DB
<?php 
 $username = "Bob";
 $pass = "12345";

 $insertStatement = $conn -> prepare("INSERT INTO users VALUES(?, ?)");
 $insertStatement -> bind_param("ss", $username, $pass);

 $insertStatement -> execute();
 $insertStatement -> close();
?>

Inserting data

<?php 
  $getUsersStatement = $conn -> prepare("SELECT * FROM users WHERE username = ?");
  $getUsersStatement -> bind_param("s", $username);
  $getUsersStatement -> execute();

  $users = $getUsersStatement -> get_result();

  foreach($users as $row) {
      echo $row['username'];
      echo ' -- ';
      echo $row['password'];
      echo '<br/>';
  }
?>

SELECTING data

🍪 cookies

&

💾 Sessions

Bob
Login
Login
Controller
Auth
Model
Check
Credentials
store
🍪 session id
🍪 username & hashed pass

JWT

<?php    

 /** START - Persist session for 2 hours, 
     even after closing the browser 
 */
 
 $TWO_HOURS = 60 * 60 * 2;
 ini_set('session.cookie_lifetime', $TWO_HOURS);
 ini_set('session.gc_maxlifetime', $TWO_HOURS);
 /** END - Needs to be called only once, 
     when starting the server 
 */

 session_start();

 if(isset($_SESSION['count'])) {
   $_SESSION['count'] ++;
 } else {
   $_SESSION['count'] = 1;
 }

 echo $_SESSION['count'];
?>

sessions

Login/Register

Logout

THANK'S!  🙏

Week #8

Architecture

Descrieți arhitectura aplicației via diagrame/desene/info-grafice/text etc...

 

Acest pas pregătește următoarea etapă: soluția finală. Scopul vostru e să descrieți cât mai în detaliu ce și cum se întâmplă, pentru a face implementarea o simplă formalitate.

 

PS: nu trebuie sa scrieți cod pentru această evaluare.

#0 Use-case flows

Prezentați - eventual via diagrame Use case - cele mai importante flow'uri ale aplicației.

#1 DB

În cazul unei baze de date relaționale, prezentați structura și relațiile între toate tabelele necesare aplicației - PK/FK/1-to-1/1-to-many/many-to-1 etc.

În cazul unei baze de date No-SQL, prezentați structura acesteia și oferiți argumente pentru a motiva alegerea.

#2 MV*

Detaliați design-pattern'ul principal folosit în aplicație.

 

De exemplu, în cazul MVC, prezentați:

  • view'ul aferent fiecarei pagini din proiect
  • modelele, impreuna cu eventualele clase pe care le veti folosi
  • controllerele aplicatiei: ce view-uri si modele leagă + la ce cereri raspunde fiecare

Check out și tutorial ăsta.

#3 Autentificare

Descieți metoda aleasă pentru a persista utilizatorii logați. De exemplu, la DevDrive eu folosesc un JSON Web Token in care criptez ID'ul unic al utilizatorului logat.

 

Acesta expira dupa 2 ore pentru a preveni atacuri ce au la baza "furtul" JWT'ului.

#4 API'uri externe

Dacă aplicația se va folosi de diverse API'uri externe, prezentați pentru fiecare endpoint:

 

  • metoda folosită (GET/POST/...)
  • body'ul cererii
  • formatul și structura răspunsului

 

Recomand formatul RAML.

Dacă aplicația va expune un API REST, documentați cele de mai sus pentru API'ul oferit.

#5 Microservicii

Decideți care sunt microserviciile în care veți împărți proiectul. Acestea trebuie sa fie total independente unele de altele, inclusiv BD'uri separate.

 

 

Apoi, pentru fiecare microserviciu, descrieți toate cele enunțate mai sus.

#6 Bonus

Orice alt aspect arhitectural care contribuie la produsul final.

Spor, si dacă aveți orice fel de întrebări/nelămuriri, știți unde să-mi scrieți 😉

REST

WEB SERVICES

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

Usecase

⭐⭐⭐⭐⭐

online ratings about the book

Book review Blog

#1 Web Scrapping

😞

#2 Web Services

😎

SOAP

REST

REpresentational 
State Transfer
REST
=

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

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/iampava/settings

PUT

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

⬅ 201

⬅ 401

⬅ 403

...

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

Post

{
  "username": "iampava",
  "avatar": "https://demo.app/avatar.png"
}
{
  "username": "iampava",
  "avatar": "https://demo.app/avatar.png",
  "id": 1234
}
https://demo.app/v3/users/1234

delete

⬅ 200

⬅ 401

⬅ 404

...

📄 let's read the docs of a real rest api

Client

server

🔑 REST SERVICE 🔑

Who talks with the Service?

AND/OR

I code

  • Expose simple GET endpoint
  • Expose POST endpoint
  • Extend previous endpoint to return the result in HTML or JSON

<BR />

Install this 👇

You code

/got_api/key

GET

{
  "key": "ZO5zFDWk"
}

Retrieve a secret key which allows you to call this API 5 times.

/got_api/character/${name}

GET

📄 Bearer: {secret_key}

⬅ 200

Get details about that GOT characters

⬅ 401

or

⬅ 404

or

/got_api/season/${s_no}/episode/${e_no}

PUT

📄 Bearer: {secret_key}

Add details to that episode

{
  "title": "Battle of the bastards",
  "length": 60.23
}

⬅ 201

⬅ 400

or

⬅ 401

or

/got_api/season/${s_no}/episode/${e_no}

GET

📄 Bearer: {secret_key}

Get details about an episode in the requested format

⬅ 200

⬅ 401

or

⬅ 404

or

📄 Accept: application/json || text/html

Graph QL

A query language for your API

THANK'S!  🙏

REST

WEB SERVICES #2

ful
Week #11
<?php
  
  $endpoint = $_SERVER['REQUEST_URI'];
  $method = $_SERVER['REQUEST_METHOD'];
  $requestHeaders = getallheaders();
  $requestBodyAsString = file_get_contents('php://input');

  // check which endpoint it is via Regular Expressions
  preg_match('/^\/api\/users\/(.+)$/', $endpoint, $matches)
  
  // to set Response Headers
  header('Content-type: application/json'); 
  http_response_code(201);
  // to set Response Body
  echo $body;
  
?>
RewriteEngine On
RewriteBase /

RewriteRule ^got_api/.+$ ./my_file.php [NC,L] 

.htaccess flags:

NC - no case

L - last (stop if the rule matches)

/got_api/key

GET:

{
  "key": "ZO5zFDWk"
}

⬅ 200

Request an API key which allows you to call this API 5 times.

📝 Content-type: application/json

#1
/got_api/episodes

GET:

[{
  "title": "Winterfell",
  "duration": 60
}]

⬅ 200

Get all episodes

📝 Content-type: application/json

#1
#2

Create/override an episode

/got_api/season/{s_no}/episode/{e_no}

PUT:

{
  "title": "Battle of the bastards",
  "duration": 61
}

      📝 Bearer: {key}

201 Created

401 Key invalid

{
  "reason": "Invalid"
}

401 Key Expired

{
  "reason": "Expired"
}

400 BODY invalid

#3
/got_api/season/{s_no}/episode/{e_no}

GET:

Get info about an episode!

      📝 Bearer: {key}

200

401 Key invalid

{
  "reason": "Invalid"
}

401 Key Expired

{
  "reason": "Expired"
}
{
  "title": "Battle of the bastards",
  "duration": 61
}

404 Episode doesn't exist

#4

Update parts of an episode

/got_api/season/{s_no}/episode/{e_no}

POST:

     📝 Bearer: {key}

{
  "title": "The red wedding"
}

200 Updated

401 Key invalid

{
  "reason": "Invalid"
}

401 Key Expired

{
  "reason": "Expired"
}

404 Episode doesn't exist

400 BODY invalid

#5
/got_api/season/{s_no}/episode/{e_no}

delete:

Delete all information about a specific episode!

📝 Bearer: {key}

200 Delete successfull

401 Key invalid

{
  "reason": "Invalid"
}

401 Key Expired

{
  "reason": "Expired"
}

404 Episode doesn't exist

DONE? 😎

#6

Write a tiny app which consumes this API via a nice User Interface.

<?php 
    $req = curl_init("http://iampava.com/got_api/episodes");

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

    $body = array(
        "title" => "1234",
        "duration" => 12344
    );

    curl_setopt($req, CURLOPT_CUSTOMREQUEST, 'GET');
    // curl_setopt($req, CURLOPT_HTTPHEADER, $headers);
    // curl_setopt($req, CURLOPT_POSTFIELDS, json_encode($body));
    curl_setopt($req, CURLOPT_RETURNTRANSFER, 1);

    
    $responseBody = curl_exec($req);
    $responseCode = curl_getinfo($req)['http_code'];
    
    curl_close($req);


    // echo $responseCode;
    echo json_encode($respAsJson);
    // echo $responseBody;
    // echo gettype($respAsJson);

?>

THANK'S!  🙏

Week #12

Text

Web Technologies | 2019

By Pava

Web Technologies | 2019

Slides for the Web Technologies laboratories I teach at the local Computer Science faculty. More info here: https://iampava.com/tw

  • 1,682
Loading comments...

More from Pava