Laravel Ecommerce Setup Complete Guide

Laravel (v9) Ecommerce Setup with LiveWire and Database Connection

by

Ecommerce Project Using Laravel ( v9 ) : Part 1

Hello Friends, The first step for developing any project is environment setup, Well In this article, I am going to guide you on how to set up your environment for Laravel development. I will cover everything from installing PHP and Composer to configuring a web server and a database. and Also I will show you how to install Live Wire, I hope you all are aware about what we are going to do now, So without any late let’s gets started with laravel ecommerce setup…

Laravel Ecommerce Setup Complete Guide

Laravel Ecommerce Setup :

How to Install XAMPP Server :

Firstly, XAMPP is a software package that allows you to easily set up and run a web server on your computer. It is a collection of several open-source software components, including Apache, MySQL, PHP, and Perl.

So, You don’t need to install each of these components(Apache, MySQL, PHP, and Perl) separately, as they are already bundled together in one package. This makes it easy to set up a web server environment for local development or testing purposes.

Here are the steps for installing XAMPP :

Step 1 : Download latest version of XAMPP using the link : https://www.apachefriends.org/download.html

Step 2 : Open the downloaded file and start installation process,

As shown below screenshot click on Next

Step 3 : Select all Components, Click on Next.

Select Components

Step 4: Choose a folder to install XAMPP, Click on Next.

Step 5: Now everything is ready to install XAMPP, Click on Next.

Step 6: The setup wizard will unpack and install the selected components and save them to the designated directory. This process can take several minutes in total. You can follow the progress of this installation by keeping an eye on the green loading bar in the middle of the screen.

Step 7: Once, XAMPP is installation completed, Open the control panel as shown in the below screenshots…

Step 8 : Start Apache and MySQL Modules, It looks like the following screenshot.

If they were started without any errors then, we succesfully installed XAMPP Server.

Things to Remember :

  • You have to create your project in this path only -> C:\xampp\htdocs
  • You can create any number of projects under htdocs directory.
  • You must start Apache and MySQL Modules for visiting your site locally.
  • You can access all your websites at http://localhost/dashboard/ in your favourite web browser.

How to Install Composer :

Composer is a popular package manager for PHP that is used to manage dependencies for PHP projects. It allows developers to declare the PHP packages and libraries their project needs, and then automatically downloads and installs those dependencies.

Here are the steps for installing Composer :

Step 1 : Download latest version of Composer using the link : https://getcomposer.org/download/

Step 2 : Open the downloaded file and start installation process, It will ask you to install for you or all other users in your laptop,

Better to install it for all users.

Step 3 : Click on Next

Step 4 : It will check whether php is installed or not, Just click on Next

Step 5: It will ask you to enter proxy details, if you are not having any proxy details just click on Next.

Step 6 : Click on Install Button, It will start installation.

Step 7 : Click on Finish Button

We Successfully Installed Composer.

How to Install Gitbash

Git Bash is a command-line interface tool that allows you to interact with the Git version control system on your computer. It provides a terminal window where you can run Git commands and other Unix commands, allowing you to manage your code repositories, make changes, commit them, and push them to remote repositories like GitHub.

Here are the steps for installing Gitbash :

Step 1 : Download latest version of GitBash using the link : https://git-scm.com/downloads

Step 2 : Open the downloaded file and start installation process,

As shown below screenshot click on Next

Step 3 : It will ask you to choose Installation Location, Let it be default, Click On Next.

Step 4 : It will ask you to select components for Installation, So let it be default, Click On Next.

Step 5 : Lets keep all settings as default, as shown below Click On Next.

Step 6 : Click Install Button

Step 7 : GitBash is Installing…

Step 8 : GitBash Successfully Installed

How to Install Visual Studio Code Editor :

Visual Studio Code, commonly known as VS Code, is a code editor that helps developers write, debug, and test their code. It provides a graphical user interface (GUI) with a lot of useful features such as syntax highlighting, code completion, debugging, and version control integration.

Here are the steps for installing Visual Studio Code Editor:

Step 1 : Download latest version of Visual Studio Code using the link https://code.visualstudio.com/download

Step 2 : Open the downloaded file and start installation process,

As shown below screenshot click on Next

Step 3 : Choose Where to install Visual Studio Code and click on Next,

Step 4 : Setup will create shortcut in the following startmenu folder, click on Next,

Step 5 : Click on Next,

Step 6 : Now It is Ready to Install, Click on Install Button.

Vistual Studio Code is Installing ….

Step 7 : Visual Studio Code is successfully installed, check mark the launch and click the finish button to launch Visual Studio Code.

Creating Laravel Project Using Composer

Lets, Create a laravel project using composer, Steps for creating a larvel project using composer is as follows :

Step 1 : All your projects should be present in C:\xampp\htdocs, So you first navigate to that path using cd command

cd /c/xampp/htdocs

Step 2 : You Can Create a new folder name as laravel, In that you can create any number of laravel projects.

mkdir laravel

Step 3 : Run the following command in gitbash for creating laravel project using composer.

composer create-project laravel/laravel ecommerce

Observe the below screenshots carefully,

Composer will download all the required packages and files for our ecommerce project.

Succesfully installed Laravel Project using composer.

Step 4 : Navigate to your project folder and Run the following command, It will start your project at http://127.0.0.1:8000

php artisan serve

Database Connection with Laravel Project

Here are the steps for connecting Database to your laravel project :

Step 1 : Start XAMPP Server

Step 2 : Open phpMyAdmin using http://localhost/phpmyadmin

Step 3 : Create Database as shown below screenshot

Step 4 : Database Successfully Created.

Step 5 : Lets, Connect this Database with our laravel project,

So open .env file from our laravel project

Step 6 : change the APP_NAME and DB_DATABASE Name, That’s it now you laravel project is succesfully connected to Database.

LiveWire Installation Setup :

LiveWire is a package for the Laravel PHP framework that allows you to build dynamic, interactive web applications without having to write any JavaScript code. It works by allowing you to write server-side PHP code that can update the user interface of your application in real-time, without having to reload the page. This means you can create highly responsive, interactive web applications that feel more like desktop applications, without having to worry about the complexities of JavaScript. With LiveWire, you can create complex user interfaces with ease, using the power of PHP and the Laravel framework.

Here are the steps for installing LiveWire :

Step 1 : Install LiveWire using composer require livewire/livewire, as shown below screenshot

Step 2 : So, Whenever you want to use the livewire component, you have to include @livewireStyles and @livewireScripts in the blade.php file

Read More about LiveWire at : https://laravel-livewire.com/docs/2.x/quickstart

I hope his post will helpful to you in setting the environment for larvel ecommerce project, It is a first part of laravel ecommerce project tutorial, In upcoming posts, we will discuss more about ecommerce project step by step development.

Also Read : https://rahulvijayam.com/laravel-ecommerce-project-complete-source-code/

If you have any questions or suggestions, please feel free to leave a comment below.

Related Posts: