DEV Community: Sanajit Jana

Form Example in Laravel 8

Sanajit Jana — Sun, 12 Sep 2021 14:18:54 +0000

Laravel 8 form example tutorial. In this post, i will teach from starting on how to send form data on controller and how to insert form data in database using laravel 8.

If you are trying to create form and want to insert form data into database using laravel 8 latest version. So this post will help you to do this.

Because in this post example, i will create contact-list form and submit to database using laravel 8 version.

Visit my Github Profile and do checkout this repository

Connect with me
Portfolio LinkedIn GitHub

How to Submit Form Data into Database?

Step 1 – Install Laravel 8 Application
Step 2 – Configuring Database using Env File
Step 3 – Create Model & Migration File For Add Blog Post Form
Step 4 – Create Routes
Step 5 – Creating Controller
Step 6 – Create Blade File For Add Blog Post Form
Step 7 – Start Development Server
Step 8 – Run Laravel 8 Form App On Browser

Step 1 – Install Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:



//for windows user
cd xampp/htdocs



//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:



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

Step 2 – Configuring Database using Env File

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Create Model & Migration File For Add Blog Post Form

In step 3, open command prompt and navigate to your project by using the following command:



cd / LaravelForm

Then create model and migration file by using the following command:



php artisan make:model Post -m

The above command will create two files into your laravel 8 form application, which is located inside the following locations:

LaravelForm/app/Models/Post.php
LaravelForm/database/migrations/2020_09_09_025857_create_posts_table.php

So, find create_posts_table.php file inside LaravelForm/database/migrations/ directory. Then open this file and add the following code into function up() on this file:



public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

Now, open again your terminal and type the following command on cmd to create tables into your selected database:



php artisan migrate

Step 4 – Create Routes

In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:



<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('welcome');
});
Route::get('add-blog-post-form', [PostController::class, 'index']);
Route::post('store-form', [PostController::class, 'store']);

Step 5 – Creating Controller

In step 5, create form controller by using the following command:



php artisan make:controller PostController

The above command will create PostController.php file, which is located inside LaravelForm/app/Http/Controllers/ directory.

So open PostController.php file and add the following code into it:



<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
    public function index()
    {
        return view('add-blog-post-form');
    }
    public function store(Request $request)
    {
        $post = new Post;
        $post->title = $request->title;
        $post->description = $request->description;
        $post->save();
        return redirect('add-blog-post-form')->with('status', 'Blog Post Form Data Has Been inserted');
    }
}

Step 6 – Create Blade File For Form

In step 6, create new blade view file that named add-blog-post-form.blade.php inside resources/views directory for add blog post form.

Then add the following html form code into add-blog-post-form.blade.php:



<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Form Example Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-4">
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
  <div class="card">
    <div class="card-header text-center font-weight-bold">
      Laravel 8 - Add Blog Post Form Example
    </div>
    <div class="card-body">
      <form name="add-blog-post-form" id="add-blog-post-form" method="post" action="{{url('store-form')}}">
       @csrf
        <div class="form-group">
          <label for="exampleInputEmail1">Title</label>
          <input type="text" id="title" name="title" class="form-control" required="">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Description</label>
          <textarea name="description" class="form-control" required=""></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>  
</body>
</html>

Step 7 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your laravel 8 form application:



php artisan serve

Step 8 – Run Laravel 8 Form App On Browser

In step 8, open your browser and fire the following url into your browser:



http://127.0.0.1:8000/add-blog-post-form

When you fire the above given url on browser, you will look like in the following image:

The importance of UI/UX | Software Engineering

Sanajit Jana — Mon, 30 Aug 2021 14:49:23 +0000

The user interface is the front-end application view to which the user interacts in order to use the software. The software becomes more popular if its user interface is:

Attractive
Simple to use
Responsive in short time
Clear to understand
Consistent on all interface screens

There are two types of User Interface:

Command Line Interface:

Command Line Interface provides a command prompt, where the user types the command and feeds it to the system. The user needs to remember the syntax of the command and its use.

Graphical User Interface: Graphical User Interface provides a simple interactive interface to interact with the system. GUI can be a combination of both hardware and software. Using GUI, the user interprets the software.

User Interface Design Process:

The analysis and design process of a user interface is iterative and can be represented by a spiral model. The analysis and design process of the user interface consists of four framework activities.

User, task, environmental analysis, and modelling: Initially, the focus is based on the profile of users who will interact with the system, i.e. understanding, skill and knowledge, type of user, etc, based on the user’s profile users are made into categories. From each category, requirements are gathered. Based on the requirements developer understand how to develop the interface. Once all the requirements are gathered a detailed analysis is conducted. In the analysis part, the tasks that the user performs to establish the goals of the system are identified, described and elaborated. The analysis of the user environment focuses on the physical work environment. Among the questions to be asked are:

Where will the interface be located physically?
Will the user be sitting, standing, or performing other tasks unrelated to the interface?
Does the interface hardware accommodate space, light, or noise constraints?
Are there special human factors considerations driven by environmental factors?

Interface Design: The goal of this phase is to define the set of interface objects and actions i.e. Control mechanisms that enable the user to perform desired tasks. Indicate how these control mechanisms affect the system. Specify the action sequence of tasks and subtasks, also called a user scenario. Indicate the state of the system when the user performs a particular task. Always follow the three golden rules stated by Theo Mandel. Design issues such as response time, command and action structure, error handling, and help facilities are considered as the design model is refined. This phase serves as the foundation for the implementation phase.
Interface construction and implementation: The implementation activity begins with the creation of a prototype (model) that enables usage scenarios to be evaluated. As the iterative design process continues a User Interface toolkit that allows the creation of windows, menus, device interaction, error messages, commands, and many other elements of an interactive environment can be used for completing the construction of an interface.
Interface Validation: This phase focuses on testing the interface. The interface should be in such a way that it should be able to perform tasks correctly and it should be able to handle a variety of tasks. It should achieve all the user’s requirements. It should be easy to use and easy to learn. Users should accept the interface as a useful one in their work.

Golden Rules:

The following are the golden rules stated by Theo Mandel that must be followed during the design of the interface.

Place the user in control:

Define the interaction modes in such a way that does not force the user into unnecessary or undesired actions: The user should be able to easily enter and exit the mode with little or no effort.
Provide for flexible interaction: Different people will use different interaction mechanisms, some might use keyboard commands, some might use a mouse, some might use the touch screen, etc. Hence all interaction mechanisms should be provided.
Allow user interaction to be interruptible and undoable: When a user is doing a sequence of actions the user must be able to interrupt the sequence to do some other work without losing the work that had been done. The user should also be able to do undo operations.
Streamline interaction as skill level advances and allow the interaction to be customized: Advanced or highly skilled users should be provided with a chance to customize the interface as the user wants which allows different interaction mechanisms so that the user doesn’t feel bored while using the same interaction mechanism.
Hide technical internals from casual users: The user should not be aware of the internal technical details of the system. He should interact with the interface just to do his work.
Design for direct interaction with objects that appear on the screen: The user should be able to use the objects and manipulate the objects that are present on the screen to perform a necessary task. By this, the user feels easy to control over the screen.

What is hooks in React JS?

Sanajit Jana — Sun, 22 Aug 2021 13:14:46 +0000

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function that is used in react programming language.

Connect with me
Portfolio LinkedIn GitHub

When were hooks introduce?

React hooks are introduced in version 16.8 which is the recent Update in the react programming language. The concept of hooks has made the programming so easier for the react developers that everyone is now adapting the Hooks concept in their programming.

React hooks are always utilized in a useState and other react features without writing a class. React hooks are the functions that hook into the react state life-cycle features from the function components.

Like other features in react hooks does not work inside the classes it needs to be separated from the classes and used in the code. The hooks function must be utilized at the top of the react functions as it makes a clear vision of the program we want to execute in the project. You can use hooks without classes in the react programming and you can create your own hook to reuse the state full behaviour of different components in reactive programming.

If we want to try any code related to hooks, we need to write it in the functional component itself. If we write out of the functional component it will show us an error (invalid hooks call on the web page) so to avoid that error make sure that you write the hooks in the functional component.

What are the requirements to use react hooks?

As we have mentioned that the react hooks are introduced in the version of 16.8. To make sure that the react hooks works properly. The developer should make sure that he or she is using the NODE version of 6 or above and the NPM version 5.2 or above. If the versions are below this criterion the react hooks will not work exactly the way you wish to see it. It is very important to know when to use react hooks.

Let’s write a small program of Hooks function using a useState. We will be making a program of increasing numbers on the button click.

When you add useState you will see that an extension will be added at the top of react. Let’s see react hooks example:

import React, { useState } from “react”;

Syntax:-

const [count, setCount] = useState(0);
const ButtonClick = () => {
setCount(count + 1);
};

Now in the HTML code, you have to write:

<h1>{count}</h1>
<button onClick= {ButtonClick}> Click Me </button>

So this is all about what are hooks in React JS? and react hooks example. If you have any questions you can ask in the comment Info At One always try our best to help you with it…

Connect with me
Portfolio LinkedIn GitHub