Laravel Framework - Build Microblog Application from Scratch

We start working with PHP 8. Start PHP built in server and create first file and script in PHP 8

In PHP 8 instead of switch statement we can use much simpler match statement

Thanks to named arguments of function we don’t have to remember about order of argument and we can omit optional argument

Instead of declaring class variables in standard way, we can declare them as arguments of class constructor

Another if statement as the question mark just after variable or function call

We can declare several data types at once for one argument or return value by function

Several new functions that operate on string data type

Added to string by concatenation mathematical expression is treated as mathematical expression not as string like in prior PHP 8

In PHP 8 we can use negative numbers as indexes of an array

Installation of Laravel on Linux and Windows using Docker

Installation of Laravel on Linux and Windows using XAMPP

Installation of package – Laravel Breeze. Thanks to this package we don’t have to create from scratch login & register system as well as admin panel

Create several route paths and handle them – for now in routing we return only simple strings for pages

Create several view files and return them in a controller instead of in the routing directly. Use console to create controllers

Start building HTML template styled with TailwindCSS. Secure routes (middleware)

Design Hamburger Icon and handle it using JavaScript so that we can open and close menu on mobile devices

Two more elements for TailwindCSS template: notification about new post and footer

Next elements for the template: search input for posts. Two example search results in order to see how our application will finally look with search results

Add colors, hover over effects, letter spacing – all using TailwindCSS

Create another section for the template – the list of blog posts on the main page

Next template element – SVG icons for editing and deleting blog post

Create a template file that has common parts for all pages (like header, footer etc.). Create a subpage for details of the post

In our application it will be possible to follow blog post author and show information who we follow

SVG icons for like/dislike functionality in a couple of versions (clickable to perform like/dislike actions and non clickable to inform whether a user likes or not)

Webpage for editing blog post with TailwindCSS style classes

Webpage for adding a new blog post with TailwindCSS style classes

New sections: follow user and liked posts in the admin panel

New section in the admin panel for editing user avatar (image)

We use Alpine JS framework in Laravel for simple effects on website. First – to control visibility of notification at the top of the page

When we save some data in the database e.g. new image path, then we will show “Saved” message that disappears after about 2 seconds – an effect using Alpine JS

Sections: liked posts and followed users in the admin dashboard. Use Alpine JS for switching visible content without reloading the page

Use named slots for dynamic name for browser tabs depending on particular website (title html tag)

Thanks to Laravel Blade components we prevent code duplication and also our code is more readable. We will move to components duplicated html logout form and SVG icons

Move like/dislike icons to components. Use component attributes to differentiate icons

Thanks to include function in view files we can load other Blade files (so called partials) so we have cleaner and more maintainable code

Improve links for the main page

Use App facade to set language for the website depending on url parameter

Link for logout is visible only for logged in users. Secure html forms using anti CSRF tokens

Validate form for creating new post. Dynamically show red border around form field in case error

Redirect to the list of all posts if validation is successful

Image sent should be type of image like jpg, gif and has no more than 2Mb weight

We will use sessions mechanism to control the message about saved image path in the database

Create posts table using migrations and perform basic database operations using Post model and Tinker tool

Find all posts, one post by id, create post, edit and delete post

A user may have many blog posts and one post belongs to one user. Define relations in User model and Post model

We will automatically generate example posts for website – each user will have 5 posts

Links for editing and deleting post we display only to the author of the post

In Laravel we can create database result pagination using only two lines of code!

Eager Loading – load additional data from the database to decrease the number of queries during foreach loop in view file (list of posts)

Use Route Model Binding to find post by id automatically by Laravel

Change view for editing post and the function for saving edited post in the database

Use Route Model Binding to find post to delete

We can show not only all posts but also posts from specific user by id

A user may have one image (avatar), and avatar belongs to one user

After we saved the image path in the database (previous lecture) it is time to save image on the server

A user may follow many other users and the same user may be followed by others

Logged in user may follow other user (author of a post) – use attach() and detach() functions for many to many relationship

Complete view file to allow a user to be unfollowed

Another many to many database relationship but this time polimorphic one – a user can like many kind of objects (but in our case only blog posts). Create migrations

We use morphToMany and morphedByMany methods to define relation for likes/dislikes

LiveWire Components allow interaction with application without reloading a page – e.g. after clicking like button there will be no reloading. Installation of the component

LiveWire component is linked to a class which parameters and functions are available in a component

In order for the component to work correctly if it has many the same elements e.g. links – we have to differentiate them by using wire:key attributes

After we type letters in the search bar, search results will show in real time thanks to LiveWire component – create class and view for the component

Use wire:model LiveWire attribute to search in real time

Like/dislike icons are in different versions: clickable, non clickable as the information about like/dislike state etc.

Use count function for database relation to count likes/dislikes

Use attach and detach functions to save many to many database relationship

In the admin panel we have the section with list of all posts liked by the logged in user

We will sort blog posts from the most liked to the smallest liked

Pivot table is an intermediate table in many to many database relationship. Get data from pivot table

Fulltext searching by title and content columns of posts table

Only the author can edit his posts