Building a Product Search App with Laravel and AJAXNdubuisi OnyemenamBlockedUnblockFollowFollowingJan 22I just finished a PHP and AJAX tutorial so I wanted to Practice.
Since Laravel is my preferred web development framework I decided to make a google search on working with Laravel and AJAX.
All the examples from my search made AJAX calls to Laravel using Jquery.
Well, I promise to learn Jquery sometime in the future, but for now all I want is a Laravel + AJAX example with Vanilla Javascript.
I decided to replicate the JQuery script from this example with vanilla Javascript with little modification to the Laravel code and I got the result I wanted.
Here is how you can build the App too.
If you want to clone the Github repository here is the link.
You can also follow along to see a break down of the steps.
Screen Capture of final AppFirst we need to create a Laravel project, you can see the documentation to get that done.
Next we create a frontend for the app.
Open your Laravel project in a code editor and navigate to your “views” directory, create a file “products.
blade.
php”Create frontend file in views directoryEdit the file with the code belowLets add a route for our product page, navigate to “routes” directoryedit “web.
php” with the code belowNotice that I also added a route for product search, next We need to add controllers to help us process the routes we just defined, this can be done from the terminal by running the commandphp artisan make:controller ProductControllerThis command creates a new file “ProductController.
php” in your “app/Http/Controllers” folderProductController.
php createdAdd the code below to the “ProductController.
php” fileOne thing is missing, we don’t have a Product Model, but we imported one into our “ProductController” class.
use AppProduct as Product;Models(data containers) in Laravel Map to tables(migrations) within an applications database and can be used to manipulate the table as well as specify relationship between tables.
We can create a model and a migration in one shot by running the command.
php artisan make:model –migration ProductWe now have a new model class and a migration within our codebase.
You can navigate to the “app” directory to see our “Product.
php” model file, our migration file lies in the “database/migration” directory.
Lets determine the fields and datatype for our products table.
We can achieve this by modifying our products migration file to the code belowWe need to specify our database credentials so our App can be able to create the fields we just specified above.
Edit the “.
env” file in the root directory of your application as required.
DB_CONNECTION=mysql//specify your databaseDB_HOST=127.
0.
0.
1DB_PORT=3306DB_DATABASE=productsDB_USERNAME=root//specify your usernameDB_PASSWORD=secret//specify your passwordRemember to create a database with name “products” in your database server if you are using a mysql database.
Next lets run our database migrations in the terminalphp artisan migrateYou can check your database table to see the migrationsNB: If you created a new Laravel project there is a chance that you might run into the specified key too long error when migrating, see the solution here.
Run this after you fix the errorphp artisan migrate:freshFor our product search to return results, we need to populate the database, this can be done manually, but in the Spirit of Laravel we can achieve this from the terminal by editing two files.
First navigate to the “database/factories” directory then edit the “UserFactory.
php” file like belowNext still within the “database” Directory navigate to the “seeds/DatabaseSeeder.
php” file and edit as followsIn the “UserFactory.
php” file we used the Faker package to specify how we wanted to create fake data for our products table, The “DatabaseSeeder.
php” creates 10 products using our factory specifications.
Now, the final step lets migrate and seed (populate)our tables with ten products buy runningphp artisan migrate:fresh –seedTo test the app in your browser run in the terminalphp artisan serveNavigate to your browser to see the app work.
Incase you port 8080 is already occupied like mine is try specifying a free portphp artisan serve –port=8999Am looking forward to your comments D:.