create-project-from-scratch-with-laravel

Setup laravel 5 on local system and create hello world app

Hello World, Welcome to my website. This is the second part of the series Create project from scratch with laravel 5. In the first part of this series, we have discussed about the project and technologies which we are using in this series. In this part, we will setup laravel 5 on local system and create hello world app.

I have divided this tutorial in following parts.

  • Setup Composer
  • Install Laravel via composer in command line
  • Create hello world app with laravel 5

Setup Composer

Composer is a php tool which help us to install php dependency. It is same as npm in javascript and gems in RubyOnRails.

  • Download composer from this link and install.
  • Verify the installation via following command in command line.
> composer

You will see the following screenshot

composer-verify-screenshot_03


Install Laravel

  • Go to command line and then got to htdocs folder ( i am using xampp, www folder for wamp).
  • Run the following command
> composer create-project laravel/laravel empsystem

This will take few minuts to install. once installed, you will see the something like following.

laravel-verify-screenshot_03

Now laravel 5 has been successfully installed on your local system.


Create hello world app with laravel 5

  • Open project in browser then click on the public folder, you will see the following screen

laravel-welcome-screen_03

  • Now we will modify this screen for our hello world app.
  • Open the resources/views/welcome.blade.php file.
  • Replace the previous code with following code.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello World App</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    </head>
    <body>
        <div class="flex-center position-ref full-height">
        	<h3>Hello World App</h3>
        </div>
    </body>
</html>
  • Reload app in the browser. You will see new screen with Hello World App Message.

Please send your message/query in the comment section :).

Leave a Reply

Your email address will not be published. Required fields are marked *