Learn more
This tutorial will show you step by step on how to create basic data manipulation operations CRUD(Create, Read, Update and Delete) using Laravel as backend programming, MySQL as Database, Vue 3 as frontend. Software architectural style is REST(Representational State Transfer) APIs. Before going to the main tutorial steps, we need to know the following basic terms to better understand.
In the end of CRUD application, we will get a daily note management system by which one can manage daily note or dairy. So our target entity name is notes and basic fields for that entity are note number, title, datetime, note detail, involved person, location etc.
RESTful API:
A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.
If entity name is notes, then RESTful API basic four methods and all url structures for CRUD operation are as like:
api_base
http://localhost:4000
entity
notes
API endpoints:
REST API
URL
Detail
GET
Request method is GET and this endpoint will get all records with json format
notes/show/id
Request method is GET and this endpoint will get single record for specific ID with json format
POST
notes/store
Request method is POST and this endpoint is used to create a new record.
PUT
notes/update/id
Request method is POST and this endpoint is used to update an existing record for a specific ID.
DELETE
notes/delete/id
Request method is DELETE and this endpoint is used to delete an existing record for a specific ID.
Vue Js 3:
Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. Latest stable version of Vue JS is 3.
Vue CLI is a full system for rapid Vue.js development which aims to be the standard tooling baseline for the Vue ecosystem.
Laravel: Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller architectural pattern and based on Symfony.
MySQL:
MySQL is an open-source relational database management system. Its name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language.
CRUD Operation:
CRUD stands for Create, Read, Update and Delete which are basic operations of persistent storage. CRUD operations are basic data manipulation for databases which is very important in database based applications. To understand this CRUD clearly is a very basic task for any application developer.
Prerequisites
Before getting started with this tutorial, you must be aware of the fundamentals of
HTML and CSS
Mordan JavaScript, or ES6.
Vue JS
PHP
MySQL and
API request
Software Installation
Node.js: https://nodejs.org
Apache Friends - XAMPP: https://www.apachefriends.org/index.html
Postman: a tool for API testing https://www.postman.com/downloads/
This tutorial is mainly divided into two parts:
Part 1: Build backend or API using Laravel and MySQL Database
Part 2: Build frontend or UI using Node, Vue JS, Bootstrap
Before starting steps, Go to PHP server root directory www or htdocs and create a folder named crud_app and open terminal
Let's start now.
Open terminal further run below command to manifest a new laravel project.
composer create-project laravel/laravel backend --prefer-dist
If you want to know, how create first project in laravel, please visit https://laravel.com/docs/4.2/quick
cd backend
php artisan serve
Once you have started the Artisan development server, you may access your application at http://localhost:8000.
This step explains how to make database connection by adding database name, username and password in .env config file of your project:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud_db DB_USERNAME=root DB_PASSWORD=
Add following code in database/migrations/create_notes_table.php:
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateNotesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('notes', function (Blueprint $table) { $table->id(); $table->string('note_number'); $table->string('title'); $table->dateTime('date_time'); $table->text('description'); $table->string('involved_person'); $table->string('location'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('notes'); } }
Run following command to run migrate:
php artisan make:migration create_notes_table
Run the below process to respectively create the Model (database table) and migration file:
php artisan make:model note -m
Update model with below code:
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Note extends Model { const UID = "123213"; //'note_number', 'title', 'date_time', 'description', 'involved_person', 'location' use HasFactory; protected $fillable = [ 'uid', 'note_number', 'title', 'date_time', 'description', 'involved_person', 'location' ]; public $timestamps = false; }
You need to create the notes controller and define the CRUD operations methods:
php artisan make:controller NotesController
Open and update the below code in app\Http\Controllers\NotesController.php:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Note; class NotesController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $notes = Note::all()->toArray(); return array_reverse($notes); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { $note = new Note([ 'note_number' => $request->input('note_number'), 'uid' => uniqid(), 'title' => $request->input('title'), 'date_time' => $request->input('date_time'), 'description' => $request->input('description'), 'involved_person' => $request->input('involved_person'), 'location' => $request->input('location') ]); $note->save(); $response = []; $response["code"] = 200; $response["message"] = 'A Daily Note has been created!'; return response()->json($response); } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { $note = Note::where('id', $id)->first(); return $note; } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update($id, Request $request) { $note = Note::find($id); $note->update($request->all()); $response["code"] = 200; $response["message"] = 'A Daily Note has been updated!'; return response()->json($response); } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { $note = Note::find($id); $note->delete(); $response["code"] = 200; $response["message"] = 'A Daily Note has been deleted!'; return response()->json($response); } }