Create Autoloader using Composer

How to create an autoloader using composer?

  • Create a new file composer.json in the main folder and insert the just curly brackets
{

}
  • Run, to generate the autoload structure :
$ composer install
{
        "autoload" : {
            "psr-4": {
                    "Acme\\" : "src"
            }
        }
}

Acme is a example of Company/Project name, and src is the directory that contains all the files we want include in our project.

  • Run, to generate the psr-4 autoload file, the command:
$ composer dump-autoload

The content of the file will be the following one:

<?php

// autoload_psr4.php @generated by Composer

$vendorDir = dirname(dirname(__FILE__));
$baseDir = dirname($vendorDir);

return array(
    'Acme\\' => array($baseDir . '/src'),
);
  • Require the file autoload.php in your main project file (e.g.: index.php):
require 'vendor/autoload.php';
  • Use namespaces Acme in your project for the file not in subfolder but just in src: So for example if you have the class Test.php in src you just need to use this.
//Test.php
namespace Acme; //in your class called Test

class Test
{

}

//index.php
use Acme\Test; //to use the class Test

You don’t need to use src in your namespace because the autoload has the $basedir on src.

The general rule is >>> what is inside the namespace + Class Name

So for example if you have the folder User in src for the class Person:

You must have the following code structure:

Class Person.php in src/User/:

<?php

namespace Acme\User; //Use Acme + User

class Person
{
    protected $name;

    /**
     * @return name
     */
    public function getName(): string
    {
        return $this->name;
    }

    public function setName(string $name)
    {
        $this->name = $name;
        return $this->name;
    }
}
  • index.php:
<?php

    require 'vendor/autoload.php';

    use Acme\User\Person; //Use the namespace + the class name

    $person1 = new Person();
    $person1->setName('John Doe');
    echo $person1->getName();

Read a JSON file with php

Json file, how to read it using php?

Most importantly, get the JSON content using file_get_contents() and to not avoid warnings specify the sources:

To read the file with an http request specify http/https:

$jsonData = file_get_contents('http://www.sitename.io/data/jsondata.JSON');

To read the file form the filesystem:

$config = file_get_contents(__DIR__ . '/config.json');

decode the JSON using json_decode():

$data = json_decode($config, true);

Use var_dump or print_r to understand the data structure. Having this data:

{
  "databaseOne": {
    "dbhost": "localhost:8889",
    "dbname": "dev_db_1",
    "dbusername": "root",
    "dbpassword": "root"
  },
  "databaseTwo": {
    "dbhost": "localhost:8889",
    "dbname": "dev_db_2",
    "dbusername": "root",
    "dbpassword": "root"
  }
}

To print the database name of databaseOne:

echo $data['databaseOne']['dbname'];

Use this code to loop through the array:

foreach ($data['databaseOne'] as $field => $value) {
    echo $field . ':' . $value . '</br>';
}

This is an example to show how to print the database name for each entries:

foreach ($$data as $content) {
        if($content) {
            foreach ($content as $key => $value) {
                if ($key === 'dbname'){
                    echo ($value . '</br>');
                }
            }
        }
    }

Composer basics

Here a basics list of Composer commands to retrieve the most used one.

Start new php project:

composer init

Install a new packages with:

composer require packageName

Use https://packagist.org/ to find the exact component name

In order to get the latest versions:

composer update

Uninstall packages from composer:

composer remove packageName

Search package from composer:

composer search packageName

Shows a list of installed packages that have updates available:

composer outdated

You should always run the validate command before you commit your composer.json file:

composer validate

Docker ubuntu 16.0.4 on QNAP Container

Create and setup the container

Change the root password:

passwd root

to know the ip address we need to launch the command ifconfig but is not installed by default.

Install networks tool:

apt-get update
apt-get install net-tools
apt-get install openssh-server
apt-get install ufw

To allow connection from terminal enable ssh launch the command:

Install also:

apt-get install sudo
apt-get install vim
apt-get install software-properties-common

sudo service ssh restart

Docker: docker-container

Launch the commands from the container folder

  • Install the machine docker-compose build
  • Start the services docker-compose up -d
  • Stop the services docker-compose stop
  • Stop and remove containers, networks, images, and volumes docker-compose down
  • See active containers docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                    NAMES
27378c53e98a        eedtest_app             "docker-php-entrypoi…"   5 minutes ago       Up 5 minutes        0.0.0.0:8899->80/tcp     eedtest_app_1
68dfd5c7abde        mysql                   "docker-entrypoint.s…"   5 minutes ago       Up 5 minutes        0.0.0.0:3306->3306/tcp   eedtest_db_1
b18824235e76        phpmyadmin/phpmyadmin   "/run.sh phpmyadmin"     5 minutes ago       Up 5 minutes        0.0.0.0:8080->80/tcp     eedtest_phpmyadmin_1

doing this you can understand the port to see the webserver.

Clone this repo if you need a LAMP webserver

Media Query

Media Query

Mobile

Mobile portrait

@media only screen and (max-width: 767px){
  /* STYLES GO HERE */
}

Mobile landscape

@media only screen 
and (min-width: 320px) 
and (max-width: 767px)
and (orientation: landscape){
  /* STYLES GO HERE */
}

Tablet

Tablet in portrait and landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
  /* STYLES GO HERE */
}

Note: use just min-width if you want use for responsive.

Tablet in landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  /* STYLES GO HERE */
}

Tablet in portrait (iPad)

@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { 
  /* STYLES GO HERE */ 
}`

Mobile first approach

You should use min-width and then raise the pixels for different viewport:

@media (min-width: 40em) {
  /* STYLES GO HERE */
}

NO Mobile First

@media only screen and (max-width : 768px) {
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px), screen and (max-height: 680px){
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
  /* STYLES GO HERE */
@media only screen and (max-width: 1440px) {
  /* STYLES GO HERE */
}

Target IE with media query

@media all and (-ms-high-contrast:none){
  /* STYLES GO HERE */
}

Fontawesome icons inside a palaceholder

This is one way to use fontawesome icons inside a palaceholder:

in the CSS you have to use this code for the class fontAwesome:

.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}

After that in the HTML you have to add the **fontawesome class** first and then the **fontawesome icon code** inside the placeholder:

<input class="fontAwesome" name="emailAddress" type="text" placeholder="[insert-fa-code-here;] insert email address ..." />

and it’s done!!!

You can simply apply the class every time inside your input with the relative code in the placeholder.

And even more, you can use this method by entering the code into a generic element such as a link or a simple text using the same class “fontAwesome” used for the placeholder:

<a class="fontAwesome" href="#">[insert-fa-code-here;] Great job!!!</a>

You can see the result or read the post from my codePen post.

See the Pen FontAwesome and placeholders by Massimiliano Ranauro (@huckbit) on CodePen.