It is helpful for the new Laravel users to know the way of converting any static HTML template into a Laravel project and convert it into a dynamic web project. I have shown in my previous tutorials that how to convert any html template into angular project and codeigniter project. But the process of converting html template into Laravel project is different from other MVC framework based project. In this tutorial, I will show you how to convert a free responsive HTML template into a Laravel static project first and after that I will convert it into a dynamic project based on a MySQL database.

Steps:

1. You can download any free template from any site. I have download a free responsive HTML template from the following link.

https://demo.themewagon.com/preview/free-bootstrap-4-html5-real-estate-agency-website-template-stayhome

2. Download a fresh copy of Laravel 7 project named laravelproject and store it into htdocs folder. I have already shown this steps in my previous laravel tutorial.

3. Copy only the files from your template folder into the views folder of laravel project folder.

4. Rename all files with .html extension by .blade.php extension.

5. Copy all folders of the template into the public folder of laravel projects.

6. Open index.blade.php file in any editor and add the following line before each local (css and js) file links to set the base URL of laravel project.

<?php echo url('/'); ?>/css/
<?php echo url('/'); ?>/js/

7. If you are using any local image file then change the location same way.

8. Open web.php file under route folder and change the view file name from welcome to index.

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

10. Run the project for the first it. It will show the static content of the template from laravel project.

http://localhost/laravelProject/public

11. Modify .env file to set the proper MySQL database. I have used a database named laravel here.

12. Run the following command to create a migration file for creating the table named properties in the database laravel.

php artisan make:migration create_properties_table --create=properties

13.  Open the migration file modify the file with the following content.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePropertiesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('properties', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('lotarea');
$table->string('floorarea');
$table->string('location');
$table->string('bedroom');
$table->string('bathroom');
$table->string('garage');
$table->text('others');
$table->integer('price');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('properties');
}
}

14. Run the following command to migrate database.

php artisan migrate

15. Add some records to the table named properties.

16. Run the following command to create a controller named PropertyController.

php artisan make:controller PropertyController

17. Run the following command to create Property model.

php artisan make:model Property

18. Modify the PropertyController with the following code.

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Property;

class PropertyController extends Controller
{
	public function index()
	{
	$pro = Property::all();
	return view('index')->with('pros', $pro);
	}
}

19. Open index.blade.php file and go to the property section. Replace the content of the div that contains carousel-properties with the following content.

@foreach ($pros as $pro)

<div class="item">
<div class="properties ftco-animate">
<div class="img">
<img src="images/{{ $pro->id }}.jpg" class="img-fluid" alt="Colorlib Template">
</div>
<div class="desc">
<div class="text bg-primary d-flex text-center align-items-center justify-content-center">
<span>Sale</span>
</div>
<div class="d-flex pt-5">
<div>
<h3><a href="properties-single/{{ $pro->id }}" >{{ $pro->name }}</a></h3>
</div>
<div class="pl-md-4">
<h4 class="price">{{ $pro->price }}</h4>
</div>
</div>
<p class="h-info"><span class="location">{{ $pro->location }} - </span> <span class="details">{{ $pro->bedroom }} beds & {{ $pro->bathroom }} baths></p>
</div>
</div>
</div>
@endforeach

20. Replace the web.php file with the following code.

Route::get('/','PropertyController@index');

21. Now, run the project and check the property section. The data of properties table will be shown there. To get the image properly rename the property image name with the id of the property record.

In the next part of this tutorial, I will show you how you can make other pages of this template dynamic using Laravel.

You can check the following video tutorial to show the steps.

Click here for the next part of this tutorial.