Online Interview Questions

Prepare interviews on Anything, AnyWhere

PHPSCOTS,Blogger, Developer Views: 1434

Creating Link sharing app using Laravel 5.5 and Angular 5

Laravel is one ruling frameworks in the PHP world along with Angular 5. There have been numerous advantages to creating, read, update and delete CRUD applications.

Today we will discuss the various steps involved to use Laravel Angular 5 combo with all the functions of a CRUD application.

With the step by step tutorial guide, I will help you understand how this combination works so well together.

Prerequisites

The configuration for the server needed to perform this task is:

  • MySQL
  • PHP >=7.0
  • OpenSSL, XML PHP extensions
  • Composer

With these prerequisites, you could start with the process of preparing the Laravel.

Setting up Laravel 5.5 app on windows

  • Installing Laravel 5.5
  • Creating Tables and Models
  • Creating Routes and controller
  • Creating views and partials

Installing Laravel 5.5

With Laravel having the ability to bootstrap all the necessary things, you need not have to worry about the hectic parts of the preparation.

Run the composer create-project command with any folder name. Here I will keep the folder name as laravel-angularjs.

composer create-project --prefer-dist laravel/laravel laravel-angularjs

Above command will take few mins to install fresh Laravel Application.

Configuring file permissions

In order to run Laravel project, your storage and bootstrap/cache directory must be writable by Laravel App.So please change the file permissions by running below commands.

cd laravel-angularjs

sudo chmod -R 777 storage

sudo chmod -R 777 bootstrap/cache

Configuring database and our tables

For the sake of simplicity and demonstrating the angular integration of Laravel, we will keep the database construct to minimal.

After you create a list table in MySQL, we need to create a database model for the application too. As a default option, Laravel will use the ORM model for the database.

Configuring database connection

Fast and easy way to configure the database connection in Laravel is by editing the .env  file. In Laravel  .env holds information about Application nameerror reporting, database setting, mail configuration and more thing, you can find it in the root directory of your Laravel application.Here we are going to set our Database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306 // your db port
DB_DATABASE=crud_app // your database name
DB_USERNAME=root // your database user name
DB_PASSWORD= //your database password

Creating Our tables and Models for our link sharing app.

It’s time to create our tables and Models.

Creating our tables through migrations: Laravel comes with a command line interface called artisan this helps us to manage our Laravel application through the command line. Here we are going to use artisan for creating our table migrations and model. To create migration run below command on your terminal.

php artisan make:migration create_links_table

Once above command is executed you will see a new file is created in your database\migrations directory named something like 2018_02_03_063306_create_links_table. Open that file add following code in it.

<?php

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

class CreateLinksTable extends Migration{
 /**
 * Run the migrations.
 *
 * @return void
 */
 public function up()
 {
 Schema::create('links', function (Blueprint $table) {
 $table->increments('id');
 $table->string('title');
 $table->string('url');
 $table->string('email');
 $table->text('description');
 $table->timestamps();
 });
 }

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

Once done save the file and come back to the terminal and run below command to create your table.

php artisan migrate

This command will create a new table called links in your database.

Now after database work is done, next step is to create our links model to communicate with our database tables. Laravel models allow us to do queries with our tables using Eloquent in Laravel.

Create your model by running below command

php artisan make:model Link

Above command will create our Link model.Open your link model and add following code in it.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Link extends Model
{
    protected $fillable = ['title','description','url','email'];
}

Creating Controller and Register it to Laravel routes for our Angular js API

Creating Controller in  Laravel:-

Controllers are the place where actual logic is written. In this step, we are going to create our LinksController in order to create API’s for creating, read, update and delete Links.

Generate your LinksController via artisan command

php artisan make:controller LinksController

Once the controller is created add following code and save it. You can find your controller in app\Http\Controllers directory.

<?php

titlespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Link;

class LinksController extends Controller
{
 
 /**
 * Display our Vue js landing Page.
 *
 * @return \Illuminate\Http\Response
 */
 public function home()
 {
 return view('angularApp');
 }
 
 
 /**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
 public function index()
 {
 return Link::orderBy('id','DESC')->get();
 }
 
 

 /**
 * Store a newly created resource in storage.
 *
 * @param \Illuminate\Http\Request $request
 * @return \Illuminate\Http\Response
 */
 public function store(Request $request)
 {
 
 $this->validate($request, [
 'title' => 'required',
 'url' => 'required',
 'email' => 'required',
 'description' => 'required',
 ]);

 $create = Link::create($request->all());

 return response()->json(['status'=>'success','msg'=>'Link created successfully']);
 
 }
 
 /**
 * Display the specified resource.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function show($id)
 {
 //
 return Link::find($id);
 }
 
 /**
 * Show the form for editing the specified resource.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function edit($id)
 {
 //
 return Link::find($id);
 }

 /**
 * Update the specified resource in storage.
 *
 * @param \Illuminate\Http\Request $request
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function update(Request $request, $id)
 {
 $this->validate($request, [
 'title' => 'required',
 'url' => 'required',
 'email' => 'required',
 'description' => 'required',
 ]);

 $link = Link::find($id);
 if($link->count()){
 $link->update($request->all());
 return response()->json(['status'=>'success','msg'=>'Link updated successfully.']);
 }else{
 return response()->json(['status'=>'error','msg'=>'Error in updating Link']);
 }
 
 }

 /**
 * Remove the specified resource from storage.
 *
 * @param int $id
 * @return \Illuminate\Http\Response
 */
 public function destroy($id)
 {
 $link= Link::find($id);
 if($link->count()){
 $link->delete();
 return response()->json(['status'=>'success','msg'=>'Link deleted successfully']);
 }else{
 return response()->json(['status'=>'error','msg'=>'Error in deleting Link']);
 }
 }
}


To be continued…

Leave a Reply

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