Starting the App

To set up a local PHP environment and launch our Laravel app we can run the following CLI command inside the project folder:

php artisan serve

Artisan Help!

Type the following command to get all the available Artisan available commands:

php artisan

Using Log for Debugging Emails

If we want to test the Email sending feature in our localhost without involving an actual MAIL-Server we can change the value beside the MAIL_MAILER into => log in the environment variables file .env on the app root directory.

And to check that log file, the route is \storage\logs\laravel.log

Laravel 6.x Directory Structure

Laravel file directory has too many files and folders, above 8700, without node_modules, but only a few of them we need to know and visit a lot during the development stage:

/app_root/.env
/app_root/app/
/app_root/app/Http/Controllers/ 		the home for all controllers
/app_root/app/Http/Middleware
/app_root/config/database.php 			for DB connection details
/app_root/config/filesystems.php		identify services like S3 cloud configuration
/approotdirectory/Database/factories/ 	to create mock data for testing
/approotdirectory/Database/migrations/	to create tables and columns
/approotdirectory/public/				home of the app for public access
/approotdirectory/public/.htaccess 		redirect all traffic to index.php
/approotdirectory/public/index.php 		processing of all traffic starts here
/approotdirectory/public/robots.txt 	instructions for search engine spiders
/approotdirectory/public/css/app.css	compiled .css styling files
/approotdirectory/resources/views		all blades (views)lives here
/approotdirectory/routes/web.php 		for ROUTING traffic to controllers
/approotdirectory/storage 				the default storage folder for Laravel
/approotdirectory/storage/logs/laravel.log    Laravel LOG file      

Commenting Lines in Laravel

I spent a good 20 minutes to learn a tough lesson that commenting lines of code in Laravel’s blade files is different than controller files.

Comments in blades should start with {{– and ends with –}} while it is in all other files such as controllers, models, or routs just a double forward slash // before the line.

This was different than any other programming or scripting language I have used before:

Routes

All the public routs are inside a file called web.php inside the \routes folder. The simplest way to create a route is to write the route as a get function inside that file like the following example:

Route::get('/results', function () {
    return view('results');
});

Getting a list of the current routes

Type the following line to get the whole bunch of the app’s registered routes.

php artisan route:list

Create DB Tables

We should avoid creating tables manually in our database for our app, instead, we should use the following CLI command to create a migration file. Then we edit that file to match our requirements before we execute it to create the actual table in our database.

Notice if you run this command again to create a table with the same name over an already existed table in the database then the whole records will be deleted from that table.

Running the CLI command will run all the migration files at once, the already existing and the new ones.

php artisan migrate

To run only the new table we use a path to that specific file for example:

php artisan migrate --path=/database/migrations/results.php

The Cross-Site Request Forgery problem

When we create a form and if the form submission got a 419 Page Expired Error, then we need to add the directive @csrf somewhere inside the form.

This will be interpreted into a hidden tag inside the HTML like:

<input type="hidden" name="_token" value="koUj2DFFD2mqMJyRAfV4KxMq6amarCdjowzJpH9p">

Cross-site request forgeries are a type of malicious exploit whereby unauthorized commands are performed on behalf of an authenticated user.

Laravel automatically generates a CSRF “token” for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.

Source and to read more about the CSRF: https://laravel.com/docs/7.x/csrf

Using Dump & Die technique

Laravel offers two effective and useful methods for debugging, dd() (stands for dump&die) and dump().

dump() output the results at that point and continues processing, while dd() output the results and stop the processing after that.

Submitting Forms with PUT?

It turns out that modern browsers these days don’t really understand submitting forms by anything, not POST request, so if we try to submit a PUT PATCH or DELETE requests it submitted a GET request instead for some reason.

And to get around that and be able to use PUT PATCH or DELETE we need to submit the form as a POST request because this is what the browser understand, then we will insert the following directive @method(‘ PUT ‘) as a hidden input to tell Laravel what we actually meant to send and in this example, it is a PUT request.

This will be interpreted into a hidden tag inside the HTML like:

<input type="hidden" name="_method" value="PUT">

Sorting the results

We can filter or order the data coming from the database right from the SQL query itself, as we usually do. Here, I am sorting the countries decently depending on their confirmed cases.

$results = Result::orderBy('confirmed_cases', 'desc')->get();

Current Date

I created a small function with plain JavaScript to help users automatically get the current date into form’s Date input field when they try to update an entry.

I added it inside the @section directive of the /edit page so the function will only trigger with that page.

<script>
  document.addEventListener("DOMContentLoaded", function(){
    var date = new Date().toISOString().substring(0, 10);
    var field = document.querySelector('#date');
    field.value = date;
  });
</script>

Trying to edit or delete a result that is dose not exist will cause the app to crash, and that because of how the method find() works.

We can solve it by using the other method findOrFail()

$result = Result::findOrFail($id);

In this example we are telling Laravel; try to find the result with that id otherwise, fail and throw a 404 error “Page Not Found”.

Getting the file path for flag image

I tried to get the full file path for the flag image URL like the following:

src="{{storage_path()}}/app/{{$result->image_path}}"

this didn’t work because I got the slashes mixed up between the web and the local file system, and this is obviously not what we want here:

F:\xampp\Laravel\app2\storage/app/flags/tVqrKJZXqi8Ht6NnaAYYO09Lch9t4dCsAHNTaRiy.png

How I solve it: since I am using AWS, S3 to upload my files; so I hardcoded the beginning of the URL as this is fixed for all image files, then I added the last bit after the forward-slash as dynamic data. I also used the original name as alt property of the image.

And if the result does not contain an image path; then there will be a place-holder alternative, this place-holder is hosted locally within the app.

@if( $result->image_path != null )
  <img src="https://laravelcoronaapp.s3.eu-west-2.amazonaws.com/{{ $result->image_path }}"
    class="img-emb" alt="{{$result->image_origName}}">
@else
	<img src="/img/img-placeholder.png" class="img-emb" alt="Image Placeholder">
@endif

Painful lesson!

Because I added the file upload function later down the line, so, I spent like four hours to debug this error!

Forms will not read file attributes unless they have enctype=”multipart/form-data” property inside the form tag! Very silly and basic and was in RED colour in the lecturer notes.

Transferring Project Files The Easy-Way

The easiest and fastest way to transfer a huge amount of files into your webserver is to zip them up, upload the .ZIP file to the server inside the wanted directory via an FTP connection then extract that file using the File Manager tool that comes with any commercial cPanel. This process may take less than two minutes to complete, but it is for sure better than waiting 30 minutes for our files to be transferred over the slow FTP protocol.