Skip to content Skip to sidebar Skip to footer

CRUD Laravel 8 Website Tutorial + Free Code

CRUD Laravel 8 Website Tutorial + Free Code

Laravel CRUD Website Laravel - Laravel is a web application framework based on the PHP programming language. Now Laravel is becoming the most popular because of the many advantages it offers. If you are a beginner and you wants to learn laravel, go to the documentation page available on the official website, then you will f ind lots of ways and commands used, some of you may be feel confused.

CRUD laravel meaning Create, Read, Update and Delete in database using laravel. On the internet many examples of laravel crud, hopefully this can help you. In this article I provide a practical guide on how to create a simple CRUD website application using Laravel 8.

In this tutorial, I using Linux OS (Ubuntu) and the Microsoft Visual Studio Code for code editor.

 

 

 

Install Laravel

a. Install XAMPP

To make local web server, I use XAMPP. If  you need install Xampp for linux, I have made that article. You can read it here.

 

b. Install Composer

To be able to install Laravel, you can use composer. To install Composer, open terminal and use this  command:

sudo apt install composer

If composer has been installed, we can check with the command "composer" in the terminal. If it has been properly installed, it will look like this:

neon@neon-X450CC:~/Documents/Learn Laravel$ composer
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer 2.0.9 2021-01-27 16:09:27

Usage:
  command [options] [arguments]

Options:
  -h, --help                     Display help for the given command. When no command is given display help for the list command
  -q, --quiet                    Do not output any message
  -V, --version                  Display this application version
      --ansi                     Force ANSI output
      --no-ansi                  Disable ANSI output
  -n, --no-interaction           Do not ask any interactive question
      --profile                  Display timing and memory usage information
      --no-plugins               Whether to disable plugins.
  -d, --working-dir=WORKING-DIR  If specified, use the given directory as working directory.
      --no-cache                 Prevent use of the cache
  -v|vv|vvv, --verbose           Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Available commands:
  about                Shows the short information about Composer.
  archive              Creates an archive of this composer package.
  browse               [home] Opens the package's repository URL or homepage in your browser.
  check-platform-reqs  Check that platform requirements are satisfied.
  clear-cache          [clearcache|cc] Clears composer's internal package cache.
  config               Sets config options.
  create-project       Creates new project from a package into given directory.
  depends              [why] Shows which packages cause the given package to be installed.
  diagnose             Diagnoses the system to identify common errors.
  dump-autoload        [dumpautoload] Dumps the autoloader.
  exec                 Executes a vendored binary/script.
  fund                 Discover how to help fund the maintenance of your dependencies.
  global               Allows running commands in the global composer dir ($COMPOSER_HOME).
  help                 Display help for a command
  init                 Creates a basic composer.json file in current directory.
  install              [i] Installs the project dependencies from the composer.lock file if present, or falls back on the composer.json.
  licenses             Shows information about licenses of dependencies.
  list                 List commands
  outdated             Shows a list of installed packages that have updates available, including their latest version.
  prohibits            [why-not] Shows which packages prevent the given package from being installed.
  remove               Removes a package from the require or require-dev.
  require              Adds required packages to your composer.json and installs them.
  run-script           [run] Runs the scripts defined in composer.json.
  search               Searches for packages.
  show                 [info] Shows information about packages.
  status               Shows a list of locally modified packages.
  suggests             Shows package suggestions.
  update               [u|upgrade] Upgrades your dependencies to the latest version according to composer.json, and updates the composer.lock file.
  validate             Validates a composer.json and composer.lock.
neon@neon-X450CC:~/Documents/Learn Laravel$ 

 

c. Install Laravel

Before installing laravel on computer and make a crud laravel, created a folder in Document and give name "Learn Laravel", where Laravel will be installed in this folder.

After that, open The Terminal.

If you are using VSCode, you can also open a terminal directly from Visual Studio Code.

In the terminal navigate to the "Learn Laravel" folder. 

Now it's time to install laravel by downloading the laravel package first through the terminal. Make sure you have connected to the internet. The downloaded laravel package is around 30MB.

use the following command:

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

Wait until the download process is complete.

neon@neon-X450CC:~/Documents/Learn Laravel$ composer create-project --prefer-dist laravel/laravel crud
Creating a "laravel/laravel" project at "./crud"
Installing laravel/laravel (v8.6.5)
  - Installing laravel/laravel (v8.6.5): Extracting archive
Created project in /home/neon/Documents/Learn Laravel/crud
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 111 installs, 0 updates, 0 removals
  - Locking asm89/stack-cors (v2.0.3)
  - Locking brick/math (0.9.3)
  - Locking dflydev/dot-access-data (v3.0.1)
  - Locking doctrine/inflector (2.0.4)
  - Locking doctrine/instantiator (1.4.0)
  - Locking doctrine/lexer (1.2.1)
  - Locking dragonmantank/cron-expression (v3.1.0)
  - Locking egulias/email-validator (2.1.25)
  - Locking facade/flare-client-php (1.9.1)
  - Locking facade/ignition (2.14.1)
  - Locking facade/ignition-contracts (1.0.2)
  - Locking fakerphp/faker (v1.16.0)
  - Locking filp/whoops (2.14.4)
  - Locking fruitcake/laravel-cors (v2.0.4)
  - Locking graham-campbell/result-type (v1.0.3)
  - Locking guzzlehttp/guzzle (7.4.0)
  - Locking guzzlehttp/promises (1.5.1)
  - Locking guzzlehttp/psr7 (2.1.0)
  - Locking hamcrest/hamcrest-php (v2.0.1)
  - Locking laravel/framework (v8.69.0)
  - Locking laravel/sail (v1.12.3)
  - Locking laravel/sanctum (v2.12.1)
  - Locking laravel/serializable-closure (v1.0.3)
  - Locking laravel/tinker (v2.6.2)
  - Locking league/commonmark (2.0.2)
  - Locking league/config (v1.1.1)
  - Locking league/flysystem (1.1.5)
  - Locking league/mime-type-detection (1.8.0)
  - Locking mockery/mockery (1.4.4)
  - Locking monolog/monolog (2.3.5)
  - Locking myclabs/deep-copy (1.10.2)
  - Locking nesbot/carbon (2.54.0)
  - Locking nette/schema (v1.2.2)
  - Locking nette/utils (v3.2.5)
  - Locking nikic/php-parser (v4.13.1)
  - Locking nunomaduro/collision (v5.10.0)
  - Locking opis/closure (3.6.2)
  - Locking phar-io/manifest (2.0.3)
  - Locking phar-io/version (3.1.0)
  - Locking phpdocumentor/reflection-common (2.2.0)
  - Locking phpdocumentor/reflection-docblock (5.3.0)
  - Locking phpdocumentor/type-resolver (1.5.1)
  - Locking phpoption/phpoption (1.8.0)
  - Locking phpspec/prophecy (1.14.0)
  - Locking phpunit/php-code-coverage (9.2.8)
  - Locking phpunit/php-file-iterator (3.0.5)
  - Locking phpunit/php-invoker (3.1.1)
  - Locking phpunit/php-text-template (2.0.4)
  - Locking phpunit/php-timer (5.0.3)
  - Locking phpunit/phpunit (9.5.10)
  - Locking psr/container (1.1.2)
  - Locking psr/event-dispatcher (1.0.0)
  - Locking psr/http-client (1.0.1)
  - Locking psr/http-factory (1.0.1)
  - Locking psr/http-message (1.0.1)
  - Locking psr/log (2.0.0)
  - Locking psr/simple-cache (1.0.1)
  - Locking psy/psysh (v0.10.9)
  - Locking ralouphie/getall
  - Locking ramsey/collection (1.2.2)
  - Locking ramsey/uuid (4.2.3)
  - Locking sebastian/cli-parser (1.0.1)
  - Locking sebastian/code-unit (1.0.8)
  - Locking sebastian/code-unit-reverse-lookup (2.0.3)
  - Locking sebastian/comparator (4.0.6)
  - Locking sebastian/complexity (2.0.2)
  - Locking sebastian/diff (4.0.4)
  - Locking sebastian/environment (5.1.3)
  - Locking sebastian/exporter (4.0.3)
  - Locking sebastian/global-state (5.0.3)
  - Locking sebastian/lines-of-code (1.0.3)
  - Locking sebastian/object-enumerator (4.0.4)
  - Locking sebastian/object-reflector (2.0.4)
  - Locking sebastian/recursion-context (4.0.4)
  - Locking sebastian/resource-operations (3.0.3)
  - Locking sebastian/type (2.3.4)
  - Locking sebastian/version (3.0.2)
  - Locking swiftmailer/swiftmailer (v6.3.0)
  - Locking symfony/console (v5.3.10)
  - Locking symfony/css-selector (v5.3.4)
  - Locking symfony/deprecation-contracts (v2.4.0)
  - Locking symfony/error-handler (v5.3.7)
  - Locking symfony/event-dispatcher (v5.3.7)
  - Locking symfony/event-dispatcher-contracts (v2.4.0)
  - Locking symfony/finder (v5.3.7)
  - Locking symfony/http-client-contracts (v2.4.0)
  - Locking symfony/http-foundation (v5.3.10)
  - Locking symfony/http-kernel (v5.3.10)
  - Locking symfony/mime (v5.3.8)
  - Locking symfony/polyfill-ctype (v1.23.0)
  - Locking symfony/polyfill-iconv (v1.23.0)
  - Locking symfony/polyfill-intl-grapheme (v1.23.1)
  - Locking symfony/polyfill-intl-idn (v1.23.0)
  - Locking symfony/polyfill-intl-normalizer (v1.23.0)
  - Locking symfony/polyfill-mbstring (v1.23.1)
  - Locking symfony/polyfill-php72 (v1.23.0)
  - Locking symfony/polyfill-php73 (v1.23.0)
  - Locking symfony/polyfill-php80 (v1.23.1)
  - Locking symfony/polyfill-php81 (v1.23.0)
  - Locking symfony/process (v5.3.7)
  - Locking symfony/routing (v5.3.7)
  - Locking symfony/service-contracts (v2.4.0)
  - Locking symfony/string (v5.3.10)
  - Locking symfony/translation (v5.3.10)
  - Locking symfony/translation-contracts (v2.4.0)
  - Locking symfony/var-dumper (v5.3.10)
  - Locking theseer/tokenizer (1.2.1)
  - Locking tijsverkoyen/css-to-inline-styles (2.2.3)
  - Locking vlucas/phpdotenv (v5.3.1)
  - Locking voku/portable-ascii (1.5.6)
  - Locking webmozart/assert (1.10.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 111 installs, 0 updates, 0 removals
  - Downloading psr/container (1.1.2)
  - Downloading nesbot/carbon (2.54.0)
  - Downloading laravel/sail (v1.12.3)
  - Downloading nikic/php-parser (v4.13.1)
  - Installing doctrine/inflector (2.0.4): Extracting archive
  - Installing doctrine/lexer (1.2.1): Extracting archive
  - Installing symfony/polyfill-ctype (v1.23.0): Extracting archive
  - Installing webmozart/assert (1.10.0): Extracting archive
  - Installing dragonmantank/cron-expression (v3.1.0): Extracting archive
  - Installing symfony/polyfill-php80 (v1.23.1): Extracting archive
  - Installing symfony/polyfill-mbstring (v1.23.1): Extracting archive
  - Installing symfony/var-dumper (v5.3.10): Extracting archive
  - Installing symfony/polyfill-intl-normalizer (v1.23.0): Extracting archive
  - Installing symfony/polyfill-intl-grapheme (v1.23.1): Extracting archive
  - Installing symfony/string (v5.3.10): Extracting archive
  - Installing psr/container (1.1.2): Extracting archive
  - Installing symfony/service-contracts (v2.4.0): Extracting archive
  - Installing symfony/polyfill-php73 (v1.23.0): Extracting archive
  - Installing symfony/deprecation-contracts (v2.4.0): Extracting archive
  - Installing symfony/console (v5.3.10): Extracting archive
  - Installing psr/log (2.0.0): Extracting archive
  - Installing monolog/monolog (2.3.5): Extracting archive
  - Installing voku/portable-ascii (1.5.6): Extracting archive
  - Installing phpoption/phpoption (1.8.0): Extracting archive
  - Installing graham-campbell/result-type (v1.0.3): Extracting archive
  - Installing vlucas/phpdotenv (v5.3.1): Extracting archive
  - Installing symfony/css-selector (v5.3.4): Extracting archive
  - Installing tijsverkoyen/css-to-inline-styles (2.2.3): Extracting archive
  - Installing symfony/routing (v5.3.7): Extracting archive
  - Installing symfony/process (v5.3.7): Extracting archive
  - Installing symfony/polyfill-php72 (v1.23.0): Extracting archive
  - Installing symfony/polyfill-intl-idn (v1.23.0): Extracting archive
  - Installing symfony/mime (v5.3.8): Extracting archive
  - Installing symfony/http-foundation (v5.3.10): Extracting archive
  - Installing symfony/http-client-contracts (v2.4.0): Extracting archive
  - Installing psr/event-dispatcher (1.0.0): Extracting archive
  - Installing symfony/event-dispatcher-contracts (v2.4.0): Extracting archive
  - Installing symfony/event-dispatcher (v5.3.7): Extracting archive
  - Installing symfony/error-handler (v5.3.7): Extracting archive
  - Installing symfony/http-kernel (v5.3.10): Extracting archive
  - Installing symfony/finder (v5.3.7): Extracting archive
  - Installing symfony/polyfill-iconv (v1.23.0): Extracting archive
  - Installing egulias/email-validator (2.1.25): Extracting archive
  - Installing swiftmailer/swiftmailer (v6.3.0): Extracting archive
  - Installing symfony/polyfill-php81 (v1.23.0): Extracting archive
  - Installing ramsey/collection (1.2.2): Extracting archive
  - Installing brick/math (0.9.3): Extracting archive
  - Installing ramsey/uuid (4.2.3): Extracting archive
  - Installing psr/simple-cache (1.0.1): Extracting archive
  - Installing opis/closure (3.6.2): Extracting archive
  - Installing symfony/translation-contracts (v2.4.0): Extracting archive
  - Installing symfony/translation (v5.3.10): Extracting archive
  - Installing nesbot/carbon (2.54.0): Extracting archive
  - Installing league/mime-type-detection (1.8.0): Extracting archive
  - Installing league/flysystem (1.1.5): Extracting archive
  - Installing nette/utils (v3.2.5): Extracting archive
  - Installing nette/schema (v1.2.2): Extracting archive
  - Installing dflydev/dot-access-data (v3.0.1): Extracting archive
  - Installing league/config (v1.1.1): Extracting archive
  - Installing league/commonmark (2.0.2): Extracting archive
  - Installing laravel/serializable-closure (v1.0.3): Extracting archive
  - Installing laravel/framework (v8.69.0): Extracting archive
  - Installing facade/ignition-contracts (1.0.2): Extracting archive
  - Installing facade/flare-client-php (1.9.1): Extracting archive
  - Installing facade/ignition (2.14.1): Extracting archive
  - Installing fakerphp/faker (v1.16.0): Extracting archive
  - Installing asm89/stack-cors (v2.0.3): Extracting archive
  - Installing fruitcake/laravel-cors (v2.0.4): Extracting archive
  - Installing psr/http-message (1.0.1): Extracting archive
  - Installing psr/http-client (1.0.1): Extracting archive
  - Installing ralouphie/getallheaders (3.0.3): Extracting archive
  - Installing psr/http-factory (1.0.1): Extracting archive
  - Installing guzzlehttp/psr7 (2.1.0): Extracting archive
  - Installing guzzlehttp/promises (1.5.1): Extracting archive
  - Installing guzzlehttp/guzzle (7.4.0): Extracting archive
  - Installing laravel/sail (v1.12.3): Extracting archive
  - Installing laravel/sanctum (v2.12.1): Extracting archive
  - Installing nikic/php-parser (v4.13.1): Extracting archive
  - Installing psy/psysh (v0.10.9): Extracting archive
  - Installing laravel/tinker (v2.6.2): Extracting archive
  - Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
  - Installing mockery/mockery (1.4.4): Extracting archive
  - Installing filp/whoops (2.14.4): Extracting archive
  - Installing nunomaduro/collision (v5.10.0): Extracting archive
  - Installing phpdocumentor/reflection-common (2.2.0): Extracting archive
  - Installing phpdocumentor/type-resolver (1.5.1): Extracting archive
  - Installing phpdocumentor/reflection-docblock (5.3.0): Extracting archive
  - Installing sebastian/version (3.0.2): Extracting archive
  - Installing sebastian/type (2.3.4): Extracting archive
  - Installing sebastian/resource-operations (3.0.3): Extracting archive
  - Installing sebastian/recursion-context (4.0.4): Extracting archive
  - Installing sebastian/object-reflector (2.0.4): Extracting archive
  - Installing sebastian/object-enumerator (4.0.4): Extracting archive
  - Installing sebastian/global-state (5.0.3): Extracting archive
  - Installing sebastian/exporter (4.0.3): Extracting archive
  - Installing sebastian/environment (5.1.3): Extracting archive
  - Installing sebastian/diff (4.0.4): Extracting archive
  - Installing sebastian/comparator (4.0.6): Extracting archive
  - Installing sebastian/code-unit (1.0.8): Extracting archive
  - Installing sebastian/cli-parser (1.0.1): Extracting archive
  - Installing phpunit/php-timer (5.0.3): Extracting archive
  - Installing phpunit/php-text-template (2.0.4): Extracting archive
  - Installing phpunit/php-invoker (3.1.1): Extracting archive
  - Installing phpunit/php-file-iterator (3.0.5): Extracting archive
  - Installing theseer/tokenizer (1.2.1): Extracting archive
  - Installing sebastian/lines-of-code (1.0.3): Extracting archive
  - Installing sebastian/complexity (2.0.2): Extracting archive
  - Installing sebastian/code-unit-reverse-lookup (2.0.3): Extracting archive
  - Installing phpunit/php-code-coverage (9.2.8): Extracting archive
  - Installing doctrine/instantiator (1.4.0): Extracting archive
  - Installing phpspec/prophecy (1.14.0): Extracting archive
  - Installing phar-io/version (3.1.0): Extracting archive
  - Installing phar-io/manifest (2.0.3): Extracting archive
  - Installing myclabs/deep-copy (1.10.2): Extracting archive
  - Installing phpunit/phpunit (9.5.10): Extracting archive
72 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
78 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi
No publishable resources for tag [laravel-assets].
Publishing complete.
> @php artisan key:generate --ansi
Application key set successfully.

Now laravel has been installed on the computer and next we will learn How to Create a Database using Artisan in Laravel.

If the download is successful then you will see a folder with the name "crud" in the "Learn Laravel" folder.

 

Database Proses

a. Make Database

Open Visual Studio Code and oepn the "crud" folder.

Open the .env file, look for the line DB_DATABASE where by default it is "laravel". Please replace with the desired database name.

For example in this crud laravel tutorial I created the database name with "crud". So I wrote DB_DATABASE = crud.

Now, open phpmyadmin on localhost. Make sure the web server is activated . Create a Database in phpmyadmin with the name "crud" to match the DB_DATABASE in the .env file.

Laravel CRUD Buat Database, Tabel & Routes

After clicking "Create", we already have a database named "crud", but we haven't written a table in it. We will create a table through Laravel's artisan migration feature later.

Laravel CRUD Buat Database, Tabel & Routes

 

b. Make Table

We have created a database with the name crud, now we want to create a table in the crud database to store data.

To create a table, we use "artisan migration" one of Laravel's features. Open terminal, go to "Learn Laravel -> crud" project.

We will create a migration file name with the name "create_testingname_table" using the following command:

php artisan make:migration create_testingname_table

If true, then the display from the terminal will be as follows:

neon@neon-X450CC:~/Documents/Learn Laravel/crud$ php artisan make:migration create_testingname_table
Created Migration: 2021_11_06_002454_create_testingname_table

After the migration has been created, we can see the migration file with the name testingname in the database/migrations folder.

Laravel CRUD Buat Database, Tabel & Routes

Now in the file add the fields that you want to create precisely in the up() function. The up() function is used to create a table, while the down() function below it is used to delete or drop the table.

We will add some fields, such as name, gender and address. The format is as follows:

$table->string('full_name');
$table->string('gender');
$table->string('address');

To create a separate field name, we use the underscore "_", for example the file name is "full name" so it becomes "full_name".

Laravel CRUD Buat Database, Tabel & Routes

After the fields are created in the migration file, go back to the terminal and use the command:

php artisan migrate

This command will make the artisan feature create a table in the database based on the fields we have created in the migration. Wait for it to finish, as shown as follows:

neon@neon-X450CC:~/Documents/Learn Laravel/crud$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (681.32ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (536.14ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (579.57ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (825.64ms)
Migrating: 2021_11_06_002454_create_testingname_table
Migrated:  2021_11_06_002454_create_testingname_table (233.05ms)

After that we check in phpmyadmin, precisely in the crud database, whether the table has been created. If the process is successful, it will look as follows:

Laravel CRUD Buat Database, Tabel & Routes

Why are the tables made up a lot? While we only make testingname only? This happens by default created by Laravel. It has no effect on our future program. We will focus on testingname only.

 

c. Make Route

In this crud laravel section we will create a Route. This route is used to direct links in the web browser to certain files in Laravel.

But before that we have to do artisan serve to get access to the IP address of our laravel project. Open a terminal, do a serve so that we can access localhost from the website we are developing using the command:

php artisan serve
If successful, then there will be an IP address that appears as follows:
neon@neon-X450CC:~/Documents/Learn Laravel/crud$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
[Sat Nov  6 08:53:57 2021] PHP 8.0.8 Development Server (http://127.0.0.1:8000) started

The IP address for crud laravel project given is 127.0.0.1:8000 . Now copy the IP address and paste it in a web browser as shown in the following image:

Laravel CRUD Buat Database, Tabel & Routes

Now open the webp.php file to create a Route. By default, the available Route is "/", it means the Home page like the program line in the image below. Home page as in the image above of this article which contains the Laravel logo and writings.

Laravel CRUD Buat Database, Tabel & Routes

We don't use route "/" as index file for our home.

But in this crud laravel tutorial we will make the home page appear when given the address "/crudTest". If accessed through a web browser, the complete address will be like this: http://127.0.0.0/tescrud.

Therefore we create the root and controller first with the following format:

Route::get('/crudTest', [CrudtestController::class, 'index']);

So that the appearance of the web.php file will be like this:

Laravel CRUD Buat Database, Tabel & Routes

After we create a Route with the destination controller being CrudtestController, then we must create the controller file. 

Because by default, the CrudtestController controller file is not already in Laravel. The way to make it is to go back to the terminal and use the following command:

php artisan make:controller CrudtestController

After success, we can find the controller file in the app folder -> Http -> Controllers as shown in the following image:

Laravel CRUD Buat Database, Tabel & Routes

Then add the following line of code inside the Crudites Controller class extends Controller:

public function index()
    {
        return view('crudpage');
    }

So the CrudtestController controller file looks like this:

Laravel CRUD Buat Database, Tabel & Routes

Now the controller with the name CrudtestController has been created. In order for this controller to be used on the Route we have to add the location of this controller in the web.php file.

The trick, add the following line right at the top of the web.php file:

use App\Http\Controllers\CrudtestController;

As shown in the following picture:

Laravel CRUD Buat Database, Tabel & Routes

We first create our home page with the file name "crudpage". Go to resources folder -> views -> create a file inside here with the name "crudpage.blade.php" and enter the following line of program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD</title>
</head>
<body>
    <h1>CRUD Testing</h1>
</body>
</html>

Let's test, whether what we have made is successful or not. because we have created Route /crudTest, so for testing please use crud http 127.0.0.1:8000/crudTest. If true, it will appear as follows:

Laravel CRUD Buat Database, Tabel & Routes

Up here, we have succeeded in creating a Database crud laravel, Table and Route. To be able to use this database (read, write, edit and delete data), we will create additional programs for it.

In the next tutorial we will learn how to read data from database.

 

Laravel CRUD Tutorial

a. CRUD Read

In the previous article, we have created databases, tables and routes. Now we will try to display the data in the database.

If we learn CRUD, the first thing that is created under the name "CRUD" should be Create or how to create data in the database. However, to make it easier for us as beginners, we will learn directly how to read data (Read) from the database, later we will learn how to create/enter data in the database.

For that, we first enter some data in the database manually. Reopen phpmyadmin -> crud database -> testingname -> Insert -> enter some data into the database, it will look like in the following image:

Laravel CRUD Read Data dari Database

Because the website we created is connected to the web crud mysql database in the testingname table, we create the model first. We will name the model "Crud". Later the model file will be named "Crud.php".

Open terminal then still in "Learn Laravel -> crud" folder, run the following command:

php artisan make:model Crud

* The first letter of the name for the model is Capital letters, so the name is "Crud" not "crud".

After the Crud model is created, open the Crud model, its location is in app -> Models -> Crud.php, then in the Crud model we declare a property called $table with the table name "testingname":

protected $table = 'testingname';

It is used to tell Laravel that we are going to use the testingname table that is in the "crud" database we created earlier. Then save the model file it will look like in the following image:

Laravel CRUD Read Data dari Database

The model is okay. Now we will call this Crud model in controller, reopen CrudtestController in app folder -> Http -> Controlles. Then add the following program line:

$data_crud = \App\Models\Crud::all();

$data_crud will hold all the data in the database. The data stored in $data must be thrown into the View to be seen.

Since our index page is named "crudpage", we will pass the $data_crud data to the crudpage. How to use the following program line:

return view('crudpage',['data_crud' => $data_crud]);
Laravel CRUD Read Data dari Database

Open the crudpage file in the resources folder -> views -> crudpage.blade.php. then we check first, whether the data sheet from the controller file has been received by the crudpage file or not by adding a function called dd:

 {{dd($data_crud)}}

We put the code inside the <body>. For example I put it under <h1> as shown in the following image:

Laravel CRUD Read Data dari Database

If the steps we did above are correct, then you will see the results as follows:

Laravel CRUD Read Data dari Database

When the web browser appears as above, it means that the data thrown from the controller can be captured and yet it is still in the form of an array, while for what is displayed we must display the data regularly.

For that we need to retrieve data one by one with the foreach method. Replace the program code {{dd($data_crud)}} with the following program:

@foreach($data_crud as $crud)
   {{$crud->full_name}}
   {{$crud->gender}}
   {{$crud->address}}
@endforeach

then the code is inserted into the table structure:

<table>
        <tr>
            <th>Name</th>
            <th>Gender</th>
            <th>Address</th>
        </tr>
   
        
        <tr>
            <td>{{$crud->full_name}}</td>
            <td>{{$crud->gender}}</td>
            <td>{{$crud->address}}</td>
        </tr>
          
   </table>

, so that in the crudpage file it will be like this:

Laravel CRUD Read Data dari Database

Reload the page in the web browser and it appears like this:

Laravel CRUD Read Data dari Database

If it appears like that, it means that the crud laravel program that we made has been successful. But the display is still not good, In the next tutorial we will improve it by adding styles.

We're going to use a little style. Please copy the following css line and place it after </head> in the file crudpage.blade.php:

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

As a whole the crudpage program will look like this:

Laravel CRUD Read Data dari Database

Then the result is as follows:

Laravel CRUD Read Data dari DatabaseUp to here we have created one of the programming crud laravel methods, namely Read database. Next we will learn How to Create or enter new data into the database.

 

b. CRUD Create

Previously we have learned how to display data from the database to a web page. Now we will make our web capable of entering data into the database. The easiest way to understand how Insert data works is to create a form with a submit button. When the button is pressed, the contents that have been entered into the form will be saved to the database.

We will create a page to input form-specific data. Open crudpage.blade.php and add this line after <h1>:

<div style="text-align:right">
    <button onclick="window.location.href='/add'">Insert Data</button>
</div>

open the web.php file and add the following line of code:

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

when we access '/add', it will lead to the input form page.

The main requirements for making this form are:

  1. Must have a "POST" method
  2. Must have Action URL.
  3. URL Action is used when the submit button is pressed, it will automatically point to the URL that has been provided.
  4. Must have Token
  5. Every form submitted in Laravel is required to have a "Token". So we have to include a Field token in it. The trick is under the opening form tag, write {{csrf_field}}.
  6. Must have Name attribute
  7. Inside the form there is an Input tag. Each input must have a "name" attribute with a writing format with an example:
  8. <input name = "what is name" ...
  9. The name attribute is used to hold data that will be submitted and will be captured by the controller.

 

Create a file add.blade.php in resources -> views and use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <h1>Add Data</h1>
<form action="/create" method="post">
    {{csrf_field()}}
    <input type="text" id="full_name" name="full_name" placeholder="Full name">
    <br>
    <br>
    <input type="text" id="gender" name="gender" placeholder="Gender">
    <br>
    <br>
    <input type="text" id="address" name="address" placeholder="Address">
    <br>
    <br>
    <input type="submit" value="Save">
</form> 
<br>
<br>
<a href="/crudTest">Back to home</a>
</body>
</html> 

To be able to save data to the database when the submint (save) button is clicked, we must create a function that gives commands to laravel so that it can save the data in the database.

Let's say the function you want to create is named "create". And when we click the "save" button, it leads to the "/create" page and continues to the create function. These names can be changed as you like.

Now, go back to web.php file and make new Route:

Route::post('/create', [CrudtestController::class, 'create']);

So the overall program of web.php is as follows:

Now open the CrudtestController controller (app -> Http -> Controllers -> CrudtestController.php) and create a "create" function. here is the program:

public function create(Request $request)
    {
        \App\Models\Crud::create($request->all());
        return redirect ('/crudTest')->with('success','Insert data successfully');
    }

So the overall contents of the controller are as follows:

Now open Crud Model (app -> Models -> Crud.php) and create a fillable in the crud class with the program line:

protected $fillable = ['full_name', 'gender', 'address'];

So the contents of the Crud Model are as follows:

Save it.

Open web browser Then a form will appear as shown in the following image:

 

Now we create an alert to tell us whether the data was input successfully or not.

The trick is to open the view file add.blade.php, then put the following code inside the <body>:

@if (session('success'))
     {{session('success')}}
     <br>
     <br>
@endif

So, the full program from the add.blade.php file is as follows:

Now. You can check the program that has been created now.

Please enter the data and then click the Save button.

Next we will learn how to update or edit existing data in the database.

 

d. CRUD Update

To be able to update data on existing data in the database, we must create an action button to update data on the Crudpage page. Reopen the file crudpage.blade.php. Add an action button. We name the action button with the name "Edit"

When the Edit action button is pressed, it will lead to the /crudTest/id/edit link. then the format of the button will be repeated in the table, then the format is like this: 

<td><a href = "/crudTest/{{$crud->id}}/edit">Edit<a/></td>

So the full line of code from the crudpage.blade.php file is as follows:

Belajar Laravel CRUD Sesi 5 Update Database

Open the web.php file (routes) and create a Route for "/edit" and use the get method, as in the following line:

Route::get('/crudTest/{id}/edit', [CrudtestController::class, 'edit']);

Open the CrudtestController file (app ->Http -> Controllers) and create an edit function, as in the following code:

public function edit($id)
    {
        $crud = \App\Models\Crud::find($id);
        return view ('/edit',['crud'=>$crud]);
    }

Create a file in the View folder, create it with the name "edit.blade.php". Because this edit file is useful for displaying data from the database to be edited, from that first create a form in this edit file.

The form must have a "post" method. Then on the form, you must also have an action:

 <form action="/crudTest/{{$crud->id}}/update" method="post">
    {{csrf_field()}}
    <input type="text" id="full_name" name="full_name" value="{{$crud->full_name}}">
    <br>
    <br>
    <input type="text" id="gender" name="gender" value="{{$crud->gender}}">
    <br>
    <br>
    <input type="text" id="address" name="address" value="{{$crud->address}}">
    <br>
    <br>
    <input type="submit" value="Save">
</form> 

So overall the edit file is as follows:

Belajar Laravel CRUD Sesi 5 Update Database

Make another Route Update, reopen the web.php file :

Route::post('/crudTest/{id}/update', [CrudtestController::class, 'update']);
Belajar Laravel CRUD Sesi 5 Update Database

Open the CrudtestController, create an update function:

 public function update(Request $request, $id)
    {
        $crud = \App\Models\Crud::find($id);
        $crud->update($request->all());
        return redirect ('/crudTest')->with('success', 'Data updated');
    }
Belajar Laravel CRUD Sesi 5 Update Database

Open the file crudpage.blade.php, then under <h1>:

@if (session('success'))
    {{session('success')}}
    <br>
    <br>
@endif

Now you can test.

 

e. CRUD Delete

Now we will create a delete in crud laravel program. Now open the file crudpage.blade.php, then add a delete button in the Actions table. Usually the update button has a confirmation, so in the delete button code, an onclick confirmation must be added. As:

<a href="/crudTest/{{$crud->id}}/delete" onclick = "return confirm('Are you sure?')">Delete</a>

For visual studio code, it looks like this::

Belajar Laravel CRUD Sesi 6 Delete Database

Create Route from delete link. Open the web.php file then add the following Route:

Route::get('/crudTest/{id}/delete', [CrudtestController::class, 'delete']);

Open CrudtestController, then create a delete function, as follows:

    public function delete($id)
    {
        $crud = \App\Models\Crud::find($id);
        $crud -> delete();
        return redirect ('/crudTest')->with('success', 'Data deleted');
    }

Now, you can test. If you need the source code of laravel crud sql in this tutorial, please download it using the following button:

Hope this laravel crud helps you. If this article was useful, you can share it using the share button below.

 

Similar searches: 

Post a Comment for "CRUD Laravel 8 Website Tutorial + Free Code"