Create Flutter Blog/Recipe App using Laravel API

Table of Contents

Create Flutter Blog/Recipe App using Laravel API | Part 1

Hello Everyone! In this article, we are going to create an amazing flutter blog/recipe app using Laravel API as a back-end server. Our Final App will look like this.

This app will be complete in 5 Parts.

1st part will be cover installing Laravel, creating the first project, creating models, controllers and making routes and PHP blade files.
How to add bootstrap admin panel with our project and make CRUD of data in Laravel.
In this part, We will create Rest-Api, Api Auth, and Host the project on a live server.
We will create a new fresh flutter project and create all necessary folders and files.
We will parse JSON in this part.

Let’s Get Started With Part 1 for Create Flutter Blog/Recipe App using Laravel API | Part 1

For Laravel, you must set up a local server and for this, you can choose wamp or xampp server, both are open source.
After download any one of the above server, download composer. composer is an application-level package manager that provides the format for managing dependencies.
After downloading composer, install the application and create a Laravel project using the command line by running
composer create-project laravel/laravel blog
This will take few minutes to create the project and after successful creation, you will get your project folder in your selected directory.

Now Open this folder inside any text editor.

we will use Visual Studio Code because I have installed VS code previously.

But you can use Php Storm, Atom, or any other editor.

Now We will open this using Visual Studio Code.

After opening the folder in vs code click on the terminal in the menu bar to open the terminal and run the application by
php artisan serve

This will run the Laravel development server as, http://localhost:8000/ after opening this link in the web browser you will get the home page of your application as-

Now we have completed creating the Laravel project. but we have not created models and controllers yet, so let’s start.

We have needed Category and Article, so we will create 2 models for now.

php artisan make:model Category -mcr
this command will create a model with resourceful controller and migration for Category. and

php artisan make:model Article -mcr
this command will create a model with a resourceful controller and migration for Article.

You can see these files in app/Http/Controllers folder for Controllers and
app/Models folder for Models.

Now open phpMyAdmin by, http://localhost/phpmyadmin/ and create a database. now open the .env file and provide the db_name and username and password.

.env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=article_db
DB_USERNAME=root
DB_PASSWORD=

Now add the following lines in app/database/migrations/xx_xx_create_articles_table.php

public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('title');  //new
            $table->string('details');  //new
            $table->string('image');  //new
            $table->string('category_id');  //new
            $table->timestamps();
        });
    }

And Also in app/database/migrations/xx_xx_create_categories_table.php

public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');  //new
            $table->string('icon');   //new
            $table->timestamps();
        });
    }

After adding the following lines in both the files, run in terminal command line –
php artisan migrate
This command will create articles and categories tables with columns in MySQL Database.

Now create two folders in resources/views directory of the main project directory, one for the article and the other for the category.

Category Folder

inside the category, we will create a PHP file “post.blade.php” and create the layout for testing purposes.
Inside post.blade.php

<!DOCTYPE html>
<html>
<body>
<h1>Category</h1>
</body>
</html>

Now go to the web.php (inside routes/web.php) file and create a route for accessing the category post page.

Web.php

Route::get('make-category', [CategoryController::class, 'create']);
Route::post('post-category-data', [CategoryController::class, 'store']); 
Route::get('all-categories', [CategoryController::class, 'index']);

Import the Namespace by importing, use App\Http\Controllers\CategoryController;

Now We have to go in CategoryController file and get the views by returning

public function create()
    {
        return view('category.post');  // new line
    }

Save all the files and start the Laravel server.
php artisan serve and in web browser open http://localhost:8000/make-category.

We will get our category post page.

Great! It means our application is working well. Now we will make a form in the post.blade.php file.

Here We have almost created our first part Create Flutter Blog/Recipe App using Laravel API | Part 1

Pramod

I am passionate about learning and teaching new technology. Here You will get all information about Flutter, Laravel and New Technologies.

Spread the love

Create Flutter Blog/Recipe App using Laravel API | Part 1

This app will be complete in 5 Parts.

Let’s Get Started With Part 1 for Create Flutter Blog/Recipe App using Laravel API | Part 1

Leave a Comment Cancel reply