How To Build a Contact Form Application with VueJS in Laravel

0
161
Contact Form Application

VueJS is an open-source JavaScript library that is used to build progressive and dynamic user interfaces. It has been designed to highly adaptable making it perfect for working with any other JavaScript libraries and also in any frameworks. VueJS provides APIs for building applications by using components with CSS, that will make requests from the frontend. Vue has popularly used for building applications in Laravel.

In this article, we will learn how to create a contact form by using Vue JS in laravel. Before we start building the application, we will first have to install a few applications.

In order to install XAMPP, you need to go to go to the Apache website and start Apache & MySql services. https://www.apachefriends.org/index.html

2) After you finish the previous steps, you will also need to download a few other software including GetComposer, Cmder, Atom and also NodeJS.

Create Application: –

Now we can get started building the application. To create a Laravel project, open cmder and go to xampp C:\xampp\htdocs location and run the given command to create project. Your Laravel project with a name contactstore will be created.
composer create-project laravel/laravel contactstore
Go to the C:\xampp\apache\conf\extra location and open file httpd-vhosts.conf and add the code that is given below:

Also, open notepad as administratoraddministrator and open the C:\Windows\System32\drivers\etc location, in the etc folder and add the given code and save it.

Go to the browser and type http://contactstore.dev to run the Laravel project. You will see that the laravel project is running on localhost as given below:
Laravel Project
Open the project in “Atom” editor. Run “npm install” to install all dependancies. We are using the node module in the project because NPM contains some tools for working in various front-end applications. So, it’s very useful to grab some packages from it.
Create “database.sqlite” inside the database folder. In this project, we are working with the SQLite database. Now, in your “env” file add below code.

Go to the “C:\xampp\htdocs\contactstore\config” location, you will see the database.php file.

In the database.php file, laravel will check if db_connection exists in the .env file. If its exists, Laravel will use the values from .env file and if it doesn’t laravel will use value in the database.php file. Go to the .env file and change the DB_CONNECTION and the DB_DATABASE values to the ones given below.

Create Contact model:

Create a contact model by using the command give below

In your “C:\xampp\htdocs\contactstore\database\migrations”
file you will see the contact table created after the run above command. Open the contact table and add the below code and save your file.

Run the “php artisan migrate” command to create a table, this will help you create tables in your local machines and is supported in the Laravel framework. You can see the databse.sqlite file is created, which is holding the data so we can access it.

Please check the screenshot to help you to understand the migration process.
Cmder

Create Backend routes:

Lets add backend routes in your “C:\xampp\htdocs\contactstore\routes” folder. Open api.php file and add the below code:

Creating a Vue.js Component

Run “npm run watch” command which will continue running in the terminal and will watch files for any changes. They automatically recompile your assets when it sees changes in your “C:\xampp\htdocs\contactstore\resources\assets\js\components” location. You will also see the example.vue file create contacts.vue file in same location.

In the atom editor, go to the settings and install language-vue
atom editor
You have created the “contacts.vue “file in the location “C:\xampp\htdocs\contactstore\resources\assets\js\components”. Open the “contacts.vue”file and add code below to create a form.

Open the app.js file from the following location
“C:\xampp\htdocs\contactstore\resources\assets\js and add the below code:

Open the “welcome.blade.php” file from location “C:\xampp\htdocs\contactstore\resources\views” and add the following code:

You will see that you’ve created the contact form.
contact

Fetch, update delete Contact:

Now, let’s add a few functions. Open a new Cmder console and go to “C:\xampp\htdocs\contactstore” location. Install the Axios library within your application by using command below:

Open the app.js file from location “C:\xampp\htdocs\contactstore\resources\assets\js” and add axios to your app.js file:

To fetch, update, delete contact make changes in your “Contacts.vue file”. Add the code given below:

We will now define the fillable property and created an array with Name, Email, Phone by adding the following code in the Contact.php file. which is located at “C:\xampp\htdocs\contactstore\app”

Congratulations! You’ve finished create your very own Contact Form Page by using VueJS in Laravel.
Add Contact

LEAVE A REPLY

Please enter your comment!
Please enter your name here