Online Shopping Mega Menu using Angularjs, PHP, Mysql

Facebook
Reddit
Twitter
Whatsapp
Cover image

We find E-Commerce mega menu in almost all online shopping websites where they display the all their available category of products. We will design the database and use AngularJS to easily present the menu to the user with some interactions.

Today we are going to create a similar megamenu using

  • HTML with Bootstrap 3* (For easy styling and user interactivity)
  • AngularJS (Model View Whatever Javascript framework to write the application logic)
    MySQL (Database)
  • PHP (Our server side programming language for providing data from MySQL database to AngularJS Application)
  • PHPSlim (A PHP framework to easily create ReSTFul web services) [Optional]

The directory structure of our application as follows

angularcode-megamenu

api [ Out ReSTFul API end point ]

libs [ Contains all PHPSlim library files ]

v1 [ Current version of our ReST routes from where data is served ]

.htaccess [ Apache rule to convert generic urls to friendly urls for our API]

dbHelper.php [ A custom database helper function to select data from MySQL Database ]

config.php [ Contains our database configurations ]

index.php [ The main file of our api from where our API runs ]

app [Contains all our custom AngularJS files]

app.js [ The only AngularJS file we require for this project ]

css [ Stylesheets ]

bootstrap.min.css [ Here i used Bootstrap v3.3.2 ]

megamenu.css [ Some custom styling to generate the frontend of our megamenu ]

libs [ All libraries required by our project]

angular.js [ In this project we require only AngularJS ]

index.html [ The main file from where our application starts ]

You can download a copy of the whole project from the above download link.
To run the project

  • Install Apache, PHP, MySQL (I used WAMP on a windows machine)
  • Activate Apache rewrite module
  • Download and unzip the code file provided you as zip archive into your apache root folder.
  • Import the angularcode_megamenu.sql file into MySQL which will automatically create a new database named
  • angularcode_megamenu and a table named megamenu in your MySQL database

If you face any issue while creating the above ReST API, probably you misconfigured the Apache, PHP, MySQL or rewrite module is not working properly

Now lets understand the working principle. How things work together.

First lets design the databse structure for our proejct
Database – categories

We will first create the ReST API required for our project

api/v1/config.php

<?php
/**
* Database configuration
*/
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');
define('DB_NAME', 'angularcode_megamenu');
?>

api/v1/dbHelper.php

<?php
require_once 'config.php'; // Database setting constants [DB_HOST, DB_NAME, DB_USERNAME, DB_PASSWORD]
class dbHelper {
private $db;
private $err;
function __construct() {
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8';
try {
$this->db = new PDO($dsn, DB_USERNAME, DB_PASSWORD, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
} catch (PDOException $e) {
$response["status"] = "error";
$response["message"] = 'Connection failed: ' . $e->getMessage();
$response["data"] = null;
//echoResponse(200, $response);
exit;
}
}
function select($table, $columns, $where, $order){
try{
$a = array();
$w = "";
foreach ($where as $key => $value) {
$w .= " and " .$key. " like :".$key;
$a[":".$key] = $value;
}
$stmt = $this->db->prepare("select ".$columns." from ".$table." where 1=1 ". $w." ".$order);
$stmt->execute($a);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(count($rows)<=0){
$response["status"] = "warning";
$response["message"] = "No data found.";
}else{
$response["status"] = "success";
$response["message"] = "Data selected from database";
}
$response["data"] = $rows;
}catch(PDOException $e){
$response["status"] = "error";
$response["message"] = 'Select Failed: ' .$e->getMessage();
$response["data"] = null;
}
return $response;
}
}
?>

api/v1/index.php

<?php
require '.././libs/Slim/Slim.php';
require_once 'dbHelper.php';
// Get Slim instance
\Slim\Slim::registerAutoloader();
$app = new \Slim\Slim();
$app = \Slim\Slim::getInstance();
// call our own dbHelper class
$db = new dbHelper();
/************ This can be called via http://localhost/angularcode-megamenu/api/v1/categories
List all categories where parent=0 and its sub categories ************/
$app->get('/categories', function() {
global $db;
$rows = $db->select("categories","category cat_id,parent,description",array('parent'=>0),"ORDER BY description");
// parent categories node
$categories = array();
foreach ($rows["data"] as $row) {
$cat_id = $row["cat_id"];
// select (TABLE_NAME,COLUMNS,CONDITION,WHERE_CLAUSE)
$cr = $db->select("categories","category cat_id,parent,description",array('parent'=>$cat_id),"ORDER BY description");
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["description"] = $row["description"];
$category["sub_categories"] = array(); // subcategories again an array
foreach ($cr["data"] as $srow) {
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["description"] = $srow['description'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}
// pushing sinlge category into parent
array_push($categories, $category);
}
echoResponse(200, $categories);
});
function echoResponse($status_code, $response) {
global $app;
$app->status($status_code);
$app->contentType('application/json');
echo json_encode($response,JSON_NUMERIC_CHECK);
}
$app->run();
?>

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<title> Online Shopping Mega Menu using AngularJS, PHP, MySQL </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/megamenu.css" rel="stylesheet">
</head>
<body ng-cloak="">
<div class="navbar navbar-default megamenu">
<div class="container" ng-controller="NavCtrl">
<div class="col-sm-12">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat= "p in categories" class="dropdown megamenu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">{{p.description}}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3" ng-repeat="c in p.sub_categories"><a href="#/category/{{c.cat_id}}/{{c.description}}">{{c.description}}</a></div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<footer class="footer">
<div class="container">
<a href="http://www.angularcode.com/online-shopping-mega-menu-using-angularjs-php-mysql/" class="btn btn-primary">Back to Tutorial </a> <a href="https://app.box.com/s/k22ahssksr87gha3ud5t42i2vee2xqvt" class="btn btn-info">Download Project Code</a>
</div>
</footer>
<script src="libs/angular.js"></script>
<script src="app/app.js"></script>
</body>
</html>

app.js

app = angular.module('app', []);
app.controller("NavCtrl",function($scope,$http){
var serviceBase = 'api/v1/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
});
});

megamenu.css

The stylesheet which presents the megamenu to the user and expands the child nodes when user hovers over the parent menu item.

.megamenu.navbar-default {
background-color: #000;
}
.megamenu .grid-demo {
padding: 10px 30px;
}
.megamenu .dropdown:hover{
background-color: #fff;
}
.megamenu .dropdown:hover .dropdown-menu {
display: block;
}
.megamenu .grid-demo [class*="col-"] {
font-size: 1em;
line-height: 2;
}
.megamenu .grid-demo [class*="col-"] a {
padding: 5px 10px;
}
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
margin-top: 0;
top:auto;
}
.megamenu .megamenu-content {
padding: 20px 30px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}

We are done with creating a megamenu using AngularJS. Feel free to leave any comment bellow.

Subscribe my updates via Email