WEB Course

Web programming

There is a lot of knowledge and things that would not be relevant if they were added in a language-specific (security, adaptability, tools, SEO, the HTTP protocol, the developers' tools, the FTP protocol, setting up a server, etc.), hence they will be explained here. Web programming can be viewed from 3 perspectives

  • the client-side, Front-End: interface between the back-end and the client
    • HTML: the code of the page
    • CSS: the design/style, you may use CSS frameworks (ex: Bootstrap)
    • JS: adding scripts
  • the server-side, Back-End: how the request of the client is handled
    • PHP: the code generating the HTML or provide an API to your services? You may look for PHP Frameworks (Symfony, Laravel, etc.)
    • SQL: or NoSQL/..., the data of your application
    • Node.js: an alternative to PHP
  • Full-Stack: handling both Front and Back-End
    • React Native (mobile)
    • Electron (desktop)

The HTTP protocol

You are using the HTTP protocol, when your browser is requesting something from a server. For instance, when you request https://duckduckgo.com/, you are asking the server to GET the page for this URL. We are currently in HTTP2.0 (caniuse, article), but a lot of persons are still using HTTP1.1 (and some HTTP1.0).

Webserver root and root URL
  • when settings up a server, you will make a folder available at a URL. Let's say you made it like this
    • webserver root: /path/to/www/
    • base/root URL: https://myurl.com/
  • As you could guess, this is working like a path, so you could write https://myurl.com/folder/my_file.html for /path/to/www/folder/my_file.html
    • A lot of programmers are using routers, so this won't always be the case (ex: this website)
    • By default, if you don't write a file in the URL, then index.html (or php, or index.extension, according to the list in your configuration) will be loaded (if you got one in the folder associated with the current URL)

For instance, https://duckduckgo.com/ is the same as https://duckduckgo.com/index.html.

The HTTP protocol (or HTTPS for HTTP Secure) API is allowing us to use
  • GET URL: get a resource from the SERVER (ex: see a page, make a search)
  • POST URL: create a resource on the server (ex: create an account)
  • PUT URL: modify a resource on the server (ex: update user's data, or add it, if it didn't have it)
  • PATCH URL: same as PUT, but can't create a new resource, up to 1 field
  • DELETE URL: delete a resource on the server (ex: delete account)

Why did we learn this? Well, you will use this a lot (HTML forms, WEB APIs, etc.). In HTML, you will make forms (search, create users, etc.). You need to know whether they are GET (search, ...) or POST (create user, update user 🙄, delete user 🙄, etc.).

For Web APIs, this is usually written in the documentation, but you should be able to guess too. For instance, you got a route /user/{id} (ex:/user/5), according to if you are using the method GET/PUT/DELETE/..., the server will expect data (or not) and do something different.

Note about GET

When requesting a webpage, you are calling GET URL. But you can add parameters. Let's say you are searching something, you can tell us when requesting the page, what's the user is searching for using this syntax ?name=value&another=value&... such as GET URL?q=hello%20World (encoded version of "Hello{space}World"). Anyone can share this URL, and it will open the same page, because the query is inside the URL.


WebServer

As you will read in the HTML course, you don't need a server, and you may use the file protocol (same for CSS/JS), but for PHP, you will need a server. You may also use it in HTML, as this may be easy to set up.

Sometimes some students don't want to set up a server and directly work on the remote server. You will need to upload using the FTP protocol (or SCP) your files every time you changed something. Some IDEs such as PHPStorm or VSCode that are automatically updating the files on a remote server when you changed something. Anyway, I think you should work on local, for security-related purposes.

You will use the FTP protocol (or the command SCP) to send files to a remote server. I'm using a software on Windows, called FileZilla.
  • once started, go to File > Site Manager
  • New site (give it a name in the left column)
    • SFTP (use ssh credentials to login)
    • host (ex: pedago-etu.ensiie.fr, the server's URL)
    • check "ask for password"
    • user (ex: firstname.lastname)
    • ok and close
  • Then now that the config is saved,

Then every time you want to upload files

  • click on the right arrow near the logo below "File"
  • click on the configuration name
  • connect, click on "yes" (if this is the first connection)
  • then you should be able to browser, open, send/get files on your remote server

Developers' tools (or Devs Tools) 😍

This is most likely the most important thing. Either by pressing F12 (sometimes), {Left-click} > Inspect, or Settings > ... tools > development tools, or one of the shortcuts below, you can open it.

  • Tools > elements or CTRL+SHIFT+I: see the HTML code of the page, you can edit it, and you can see the CSS
  • Tools > or CTRL+SHIFT+C: easily find the code of something, by clicking on it after the mode was triggered
  • Tools > or CTRL+SHIFT+M: you can preview the appearance of your website on a phone/tablet/... (responsive design in CSS)
  • Tools > Console: you can execute some JavaScript, try 5+5.
  • Tools > Sources: see the code source of the page (and at the bottom of Tools > Application)
  • Tools > Application: see the localStorage (JS), the cookies (PHP), etc.
  • Tools > Problems: you can see problems using webhint
  • Tools > LightHouse: you can see the evaluation of a page by LightHouse (Google)

Note: you may not have every menu that I listed here. Some are available after you enabled them (the + in edge, the "... > more tools" in chrome, etc.).


Security

I'm still learning, but here is my list

Injections

You will get more notes in the Cybersecurity course.


Accessibility


Performance and best practices

  • Content delivery network (CDN): they are making your website faster (because they are faster than loading local resources)
  • you may use images .webp images instead of PNG/JPG
  • imagekit.io: proposing services to handle your images (optimization, etc.) for free up to 20Gb of bandwidth/month (not tested 😶)
  • I'm not too familiar with this, but this article about HTTP Cache is good

Search Engine Optimization (SEO)


Bunch of tools

It's better when everything is automated, right? Here is my list of links that may provide tools (mostly free 🤑, as you are the product)

Code-only

Make more than one kind of check on a page/the whole website

SEO-only

Security-only

  • Snyk (my buddy 😏)

Others


Sources