Installing Laravel and defining routes

Klim Semenov — Fri, 03 Jul 2020 11:34:45 +0000

So now, in this second post of building the Laravel website, we will get into actual coding.

We have 2 main tasks:

Installing Laravel on Homestead
Creating 3 view routes for our pages

You can use various local environments while doing Laravel coding. But I prefer Homestead.

Laravel Homestead is an official, pre-packaged Vagrant box that provides you a wonderful development environment without requiring you to install PHP, a web server, and any other server software on your local machine.

In this series, we will not cover the Homestead installation process but only use it.

Installing Laravel

If you didn't start Homestead, run in terminal homestead up and your pre-configured virtual machine will start.

For our website, you should configure the Homestead.yaml file. We are adding a new sync folder, site, and database.

folders:
    - map: ~/vagrant/laravel-catalog
      to: /home/vagrant/laravel-catalog

sites:
    - map: laravel-catalog.test
      to: /home/vagrant/laravel-catalog/public

databases:
    - laravel-catalog

After that, for our changes to be applied, you need to run:
homestead reload --provision

One more step is needed for the correct work of our local website is adding an entry in your hosts file.

I do it in terminal on my mac machine by editing it with nano. Just type sudo nano /etc/hosts and add one line:

192.168.10.10 laravel-catalog.test

And finally, you are ready to install the Laravel framework!

All you need is just go to your project folder and run:
laravel new

Now, if you go to http://laravel-catalog.test in your browser you should see the Laravel welcome page. Congratulations!

Let's enter some configuration to our .env file.

APP_URL=laravel-catalog.test

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=33060
DB_DATABASE=laravel-lidings
DB_USERNAME=homestead
DB_PASSWORD=secret

I must mention, that it is more correct to enter APP_URL without http or https. Only the domain. Some Laravel admin panels need such form of configuration.

Defining Routes

Routes in Laravel are defined in route/web.php file.

Route::view('/', 'index');
Route::view('/catalog', 'catalog');
Route::view('/product/{code}', 'item');

For now, we only use View Routes. Because we don't need any logic except displaying our 3 pages. In future posts, we will change this, of course.

The third route for the item detail page is more complex than others. We capture {code} segment in it. When adding logic to this one, we will use this code variable to get a specific product and display information about it.

Views for our Pages

Also, we need 3 views for these routes.

Views are stored in resources/views directory. We can delete the default welcome.blade.php (we don't need it).

And create 3 views:

index.blade.php
catalog.blade.php
item.blade.php

Just put some default text into them.

Views in Laravel use blade templating engine. We will cover it while moving to our final website.

That's it for the second post in our series. All project code is available on github.

Starting to build a Laravel simple website

Klim Semenov — Thu, 02 Jul 2020 11:38:21 +0000

This is the first post of the series, where I will build a Laravel simple website. It will be an items catalog with the admin panel.

I use Miro online whiteboard to design, what will be on the future website.

Here is the final diagram.

Now let's explore it more detailed.

Our website will consist of 3 pages:

Index
Items List
Items Detail

The backend framework, that I chose, is Laravel. It is a very popular PHP framework nowadays with strong documentation.

The frontend part of the website will be working on MVP.css. It is a simple stylesheet for HTML elements with no classes at all. For my purposes, it fits very well. Because my attention will be concentrated on the Laravel framework in this project.

Also, I want to build a simple administration panel with no additional frameworks or CMS. Of course, we need to protect it with the authorization module. It will be written in pure Laravel. No registration will be supported or social authorization with Facebook or others for the project simplicity.

Our admin panel will use Taiwind CSS framework, which is extremely popular in the dev community.

Using utility classes to build custom designs without writing CSS

This is a very useful technique in case of building an admin panel from scratch.

So, let's see our final tech stack:

Laravel (the backend of our website)
MVP.css (the frontend)
Tailwind CSS (the admin panel frontend)

Forem: Klim Semenov

Installing Laravel and defining routes

Installing Laravel

Defining Routes

Views for our Pages

Starting to build a Laravel simple website