Programming tutorials
It is a single-page ecommerce website developed in Vue JS. Vue JS is an open-source Javascript framework specifically built to design user interfaces and is widely used for creating single-page applications.
Node JS is a Javascript run-time environment developed for creating the backend of applications. Its framework Express is widely used for creating APIs. It is built to create scalable applications.
Mongo DB is a no-SQL database. It is a non-relational database system. It is easily scalable because the data is loosely coupled.
| Features | Free | Premium $100 |
|---|---|---|
| Product management (admin panel) | Yes | Yes |
| Product listing | Yes | Yes |
| Product detail | Yes | Yes |
| Shopping cart | Yes | Yes |
| Checkout (PayPal & Stripe) | Yes | Yes |
| Order management (admin panel) | Yes | Yes |
| Order detail | Yes | Yes |
| Product specifications | Yes | Yes |
| Stock management | Yes | Yes |
| Search and sort | Yes | Yes |
| New order email | Yes | Yes |
| Product reviews | No | Yes |
| Shipping charges by country | No | Yes |
| Product image compression | No | Yes |
| Realtime chat between users and admin | No | Yes |
Following is the feature list of this project:
Admin will be able to add products. He will enter the name of the product. Add a little description of the product. And set the price of the product. The price will be in dollars. Along with them, the admin can upload one or more images of the product.
Users will see the products added by the admin on their home page. The latest products are displayed first. Along with each product, a button will be displayed to view the detail of the product.
Users can view the detail of the product. If the product contains more than one image, then it will be displayed as a beautiful slider. From this page, users will also be able to add products to the cart. If the product is already added to the cart, then he will be able to remove it from the cart.
Users can add the product to the cart. From the cart’s page, he will be able to adjust the quantity of the product. There will be multiple products in the cart and you can set the quantity of each product separately. You will also see your total bill as soon as you change the quantity of any product added to the cart.
After adding the products to the cart and setting each product’s quantity, the user can go to the checkout page. Here, he can either pay via Stripe or PayPal. Both payment methods accept debit and master cards securely. When the user made the payment, his payment is verified from the server. If verified, then a new order will be created in the database.
Whenever a user made a payment via Stripe or PayPal, an order will be created. All orders will be displayed on the admin panel ordered by latest to oldest. By default, the status of the order is “Processing”. But admin can change the status of the order to “Completed” when the product is delivered to the customer.
Admin will also be able to view the total amount of the order, the payment method customer has used, and the user’s shipping details.
Admin can view all the products that were included in each order. He can manually verify the payment by clicking the payment method. If he clicks “Stripe”, he will be redirected to the Stripe payments page. If he clicks “PayPal”, then he will be redirected to the PayPal business page. Admin can check the name, email, and phone of the user and also his shipping address.
Admin can add the specifications of each product and the user will be able to see it on the product detail page.
Admin can set the number of units in stock for each product. When the user makes an order, then the number of units he has selected will be subtracted.
User can give reviews on a product and it will be displayed to all users who visit that product. Admin will have the ability to remove any review, for example, spamming, etc.
Users can search by product by its name, description, category, or specifications. Users can also sort the products by date or by price.
Admin can set the shipping charges by each country because, in a global eCommerce website, users place orders from all over the world. For example, if your store is located in USA and someone places an order from the UK. Then you charge the shipping fee differently than other countries.
Admin will receive an email whenever a new order has been placed by the user.
Now you can compress the product images from the admin panel. The 3 MB image can be reduced to just 182 KB and the image will still be of great quality.
Users will be able to have a chat with the admin to know more about a product before placing an order. I believe every eCommerce website should have this feature.
In this article, we are going to teach you, how you can share local storage between websites using Javascript. Local storage is not accessible even within subdomains. So if I set the value in one subdomain, it will not be accessible in another subdomain.
To share the local storage value between websites, first, we need to create an iframe tag in the source website.
<iframe src="http://destination-website.com/saveLocalStorage.php" style="display: none;"></iframe>
The value of src attribute will be the path of the destination website. And we will hide the iframe using the CSS property display: none; so it will not be visible on the source website.
Then we will create a script tag and call a function that will be called when the page is loaded. You can also call it on any function you want, for example, when the user is logged in, you want to share the user’s authentication token to another website. In that case, you can write the below code inside your login function, but for the sake of simplicity, we are calling it inside the page load function.
<script>
window.addEventListener("load", function () {
// [code goes here]
})
</script>
The following code will go inside the section. First, we will get the iframe DOM object.
const iframe = document.querySelector("iframe")
Then we will get the iframe content window.
const wind = iframe.contentWindow
Then we will set the data that needs to be sent.
const data = {
name: "adnan-tech.com"
}
After that, we will call the postMessage function from the iframe content window object i.e. wind. The second parameter of the postMessage will be * in double quotes which means there is no preference for target origin.
wind.postMessage(JSON.stringify(data), "*")
You can learn more about it here.
Now we will come to the destination website, the file name will be saveLocalStorage.php. Create a script tag and attach a listener that will be called when the message is received. The second parameter will be a function and it will have an argument event (e).
<script>
window.addEventListener("message", function (e) {
// [destination code goes here]
})
</script>
The following code goes in the [destination code goes here] section. First, we will check if the origin of the message is our source website because otherwise, any other website can also send post messages as well. If the origin of the message is not from our source website, then we will do nothing and stop the function.
if (e.origin !== "http://source-website.com") {
return
}
// [parse data object]
If the message is from our source website, then we will first parse the data from a JSON string to a javascript object. Write the code in the [parse data object] section.
const data = JSON.parse(e.data)
Then we will check if the message has a name field.
if (typeof data.name !== "undefined") {
// [save in local storage]
}
If it has, then we will set it in the destination website's local storage. Also, we will log the message that will be displayed in the source website's console tab. The following code goes in the [save in local storage] section:
localStorage.setItem("name", data.name)
console.log("Name is set: " + data.name)
Save the destination website file and refresh the source website. The name will be set, and you will see that message in your source's browser console. If you open your destination website's browser console and type localStorage.getItem("name"), you will see the name that you can send from the source website. Then you can use that value in the destination website in any way you like.
<!-- source.php -->
<iframe src="http://destination-website.com/saveLocalStorage.php" style="display: none;"></iframe>
<script>
window.addEventListener("load", function () {
const iframe = document.querySelector("iframe")
const wind = iframe.contentWindow
const data = {
name: "adnan-tech.com"
}
wind.postMessage(JSON.stringify(data), "*")
})
</script>
<!-- http://destination-website.com/saveLocalStorage.php -->
<script>
window.addEventListener("message", function (e) {
if (e.origin !== "http://source-website.com") {
return
}
const data = JSON.parse(e.data)
if (typeof data.name !== "undefined") {
localStorage.setItem("name", data.name)
console.log("Name is set: " + data.name)
}
})
</script>
So that's how you can share local storage value from one website to another using Javascript. If you face any problems in following this, kindly do let me know. Check out our more tutorials on Javascript.
[wpdm_package id='1801']
“Constra” is an HTML static template in HTML & CSS. It is an HTML template designed for the construction website. The businesses that allow construction-related services. We have converted to a dynamic website using Vue JS and Laravel.
You can check out the following tutorials. In these tutorials, we have shown you, how to convert a static HTML template into a dynamic construction website.
You will learn in this part:
In this part, you will learn:
You can download the complete source code from Github as well.
You can also check out our chat website developed in Vue JS, Node JS, and Mongo DB.
In this tutorial, we will teach you how to develop a password-less authentication system in Node JS and Mongo DB. We will create a simple form with just one field, email. The user will enter his email address and hit submit. As the form submits, we are going to send him an email with a verification code and also redirect him to a new page to enter that verification code. As soon as he enters the verification code and hit submit, we will check that code against that email address, if verified, then we will show him a success message. Otherwise, we will show him an error message. You can write your own authentication logic in either JWT or in sessions.
First, you need to create an empty folder for your project. Then open the command prompt or terminal in that folder and run the following command:
npm init
It will ask some configuration questions, you can press enter for all to set the default values. Then run the following command to install the required modules:
npm install express http mongodb nodemailer express-formidable ejs
Then create a file named server.js and run the following command to start the server:
nodemon server.js
Write the following code in server.js:
const express = require("express")
const app = express()
const http = require("http").createServer(app)
const expressFormidable = require("express-formidable")
app.use(expressFormidable())
// we will be using EJS for templating
app.set("view engine", "ejs")
const mongodb = require("mongodb")
const mongoClient = mongodb.MongoClient
const nodemailer = require("nodemailer")
const port = process.env.PORT || 3000
http.listen(port, function () {
console.log("Server started at: " + port)
mongoClient.connect("mongodb://localhost:27017", function (error, client) {
if (error) {
console.error(error)
return
}
const db = client.db("password_less_authentication")
console.log("Database connected")
// [login route goes here]
app.get("/", function (request, result) {
result.render("index")
})
})
})
This will first include all the modules and set the templating engine to EJS. We will be using express-formidable middleware to handle input values from HTML form. Starts the HTTP server at port 3000. If you are on a production, then process.env.PORT will get the port as per your hosting server. Open the URL http://localhost:3000/ in your browser. You might see an error that “the index.ejs is not found in views directory”. So go ahead and create a folder named “views” at the root of your project. Inside this folder, create a file named “index.ejs”. Following will be the content of that file:
<form method="POST" action="/login">
<input type="email" name="email" placeholder="Enter email" />
<input type="submit" value="Login" />
</form>
Refresh your page and now you will see a simple email input field and a submit button. User does not have to remember the password, an email will automatically be sent to him with a verification code. This is the beauty of password-less authentication system. When this form submits, it redirects to the “/login” POST route. So we need to create that route in our “server.js” file at the place of [login route goes here] section:
// server.js
app.post("/login", async function (request, result) {
const email = request.fields.email
const hash = Math.floor(100000 + Math.random() * 900000)
const user = await db.collection("users").findOne({
email: email
})
if (user == null) {
await db.collection("users").insertOne({
email: email,
hash: hash
})
} else {
await db.collection("users").findOneAndUpdate({
_id: user._id
}, {
$set: {
hash: hash
}
})
}
const transport = nodemailer.createTransport({
host: "mail.yourdomain.com",
port: 465,
secure: true,
auth: {
user: "your email address",
pass: "your password"
}
})
const info = await transport.sendMail({
from: "Your email address",
to: email,
subject: "Verification",
text: "Your verification code is " + hash,
html: "Your verification code is <b>" + hash + "</b>"
})
console.log(info)
result.render("verification", {
email: email
})
})
// [verify route goes here]
This will first get the email address from the form input field. Then it generates a random number of 6 digits, we will send this number in the email as a verification code. Then it creates a new user in the database if the user with that email address does not exist already. If the user already exists, then it will simply update the hash (verification code) of that user. And finally, it will send an email to the user with a verification code and display him a page to enter the verification code.
Make sure to change your domain name, email account, and password associated with that domain from where you want to send an email. If you refresh the page now, enter your email, and hit submit, you will be given an error that the view “verification” is not found. But you will receive an email with a verification code. Then we need to create a file named “verification.ejs” inside the “views” folder. Following will be the content of this file:
<form method="POST" action="/verify">
<input type="hidden" name="email" value="<%= email %>" />
<input type="text" name="hash" placeholder="Enter verification code" />
<input type="submit" value="Verify" />
</form>
This will create a hidden input field for email. The email variable is sent from the server.js file in the previous step. A text field to enter the verification code from the email and a submit button. Then we need to create a POST route in the server.js that will handle this request. So write the following code in server.js file in [verify route goes here] section:
// server.js
app.post("/verify", async function (request, result) {
const email = request.fields.email
const hash = request.fields.hash
const user = await db.collection("users").findOne({
$and: [{
email: email
}, {
hash: parseInt(hash)
}]
})
if (user == null) {
result.send("Not logged in")
return
}
// do your login logic here
result.send("Logged in")
})
It simply checks if the user with that email address has the same verification code as entered in the text field. If the verification code is correct, then it displays a success message, otherwise, it displays an error message. In the success message place, you can write your own logic to do the authentication. Check out our tutorial to do the authentication via JWT token.
That’s how you can create a password-less authentication system in Node JS and Mongo DB. If you face any problems in following this, kindly do let me know. After downloading the following files, kindly run the command “npm update” at the root.
In this article, we are going to teach you how you can deploy the Node JS app on a VPS (Virtual Private Server) or a dedicated server. Make sure you have Node JS, NPM (Node Package Manager), and PM2 (Process Manager) installed, you can run the following commands to see if they are installed.
node -v
npm -v
pm2
If any of them is not installed on your server, you can simply chat with your hosting provider’s customer support center or open a ticket and ask them to install these for you. The main thing you are going to need for deployment is pm2.
To install specific version of Node JS, first you need to install NVM (Node Version Manager).
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
Then you need to reload your shell configurations.
source ~/.bashrc
You can verify your installation of NVM by running the following command.
nvm -v
It will show you your NVM version (0.39.5 at the time of writing this). Then run the following command to list all available Node JS versions.
nvm ls-remote
You can install the specific version of Node JS by running:
nvm install 22.11.0
Here, 22.11.0 is the latest LTS version at the time of writing this post. You can set it accordingly. In order to make your NVM to use the installed version by default, you can run the following 2 commands.
nvm default 22.11.0
nvm alias default 22.11.0
If everything goes well, you can run the following command to verify that the Node JS has been successfully installed in your VPS or dedicated server.
node -v
If pm2 is not installed in your server, you can install is by running the following command:
npm install -g pm2
First, create a sub-domain for example “node.adnan-tech.com”. It will also create a directory for this sub-domain. Then create a simple Node JS app in it by running the following command in your cPanel terminal:
npm init
Press Enter key for all questions to set the default values. Then install the following modules:
npm install express http cors express-formidable socket.io
Inside the directory created for the sub-domain, create a file named “server.js” and write the following code in it:
const express = require("express")
const app = express()
const cors = require("cors")
app.use(cors())
const expressFormidable = require("express-formidable")
app.use(expressFormidable())
const http = require("http").createServer(app)
const socketIO = require("socket.io")(http, {
cors: {
origin: "*"
}
})
const port = process.env.PORT || 3000
http.listen(port, function () {
console.log("Server started at port: " + port)
socketIO.on("connection", function (socket) {
console.log("User connected: " + socket.id)
// [listen events here]
})
app.get("/", function (request, result) {
result.send("Hello world !")
})
// [create API here]
})
Then you need to tell your Node JS app that you will be using server.js as the main file. So open your package.json file and set the main key’s value to “server.js” as follows:
"main": "server.js",
Now to start the server, first, open your “Terminal” from cPanel, and go to your subdomain by running the command:
cd yoursubdomain.com
Or whatever your subdomain path is. Then run the following command to start the server:
pm2 start server.js --name "Name of your app" --watch
–name is used to set a specific name for your app.
–watch is used to automatically restart the server if there is any change in the server.js file.
You can view the list of all processed from the command:
pm2 list
If the write the URL https://yoursubdomain:3000/ in the browser, you will see the text “Hello world”. It means your Node JS server is successfully deployed on your VPS or dedicated server.
Now write the following code to create an API in the [create API here] section:
app.post("/myAPI", function (request, result) {
const name = request.fields.name
result.json({
status: "success",
message: "API has been called.",
data: "Your name is " + name
})
})
Then create an index.html file anywhere in your domain and write the following code to it to call an AJAX to this Node JS server.
<script>
const ajax = new XMLHttpRequest()
ajax.open("POST", "https://yoursubdomain:3000/myAPI", true)
ajax.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
console.log(this.responseText)
}
}
}
const formData = new FormData()
formData.append("name", "Adnan")
ajax.send(formData)
</script>
Open your browser console tab and you will see the message “Adnan”. Try changing the value in the “name” field in the formData object and refresh the page, you will now see your updated value.
You can also connect sockets to this Node JS server. In your index.html file, first, include the socket IO JS library using CDN:
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
Then write the following Javascript code to connect the client with the server:
<script>
const socketIO = io("https://yoursubdomain:3000")
</script>
After that, emit a simple event to the server:
// index.html
socketIO.emit("newEvent", { name: "Adnan" })
Then in your server.js, write the following code in place of the [listen events here] section:
// server.js
socket.on("newEvent", function (data) {
socket.emit("newEvent", data)
})
And finally, on your client side, you need to listen to this event and display a message in the browser console:
// index.html
socketIO.on("newEvent", function (data) {
console.log(data)
})
Refresh your page now and open your browser console. You will now see an object in the console. It means that your Node JS server’s sockets are running fine.
By default, the pm2 process will keep on running forever. If you want to stop the process, you can simply enter the following command in your cPanel terminal:
pm2 stop "Name of your app"
Run pm2 list and you will now see the status of your process as stopped.
Similarly, you can remove the pm2 process by running the following command:
pm2 delete "Name of your app"
Run pm2 list and you will no longer see your process in the list.
So that’s how you can deploy a Node JS app on your VPS or dedicated server. Check our tutorial to deploy Node JS app on the Heroku server. If you face any problems in following this, kindly do let me know.
In this tutorial, we will teach you how to show WordPress posts in your PHP website. Make sure you run this code from inside your server where the WordPress blog is hosted. This means that if your WordPress blog is hosted on the main domain like “adnan-tech.com”, then this code should be on any of the sub-domain like “web.adnan-tech.com”.
And vice versa, if your WordPress blog is hosted on a sub-domain like “blog.adnan-tech.com”, then this code should be on the main domain like “adnan-tech.com”. This script will not work on localhost because many of the WordPress blogs have some security plugins installed, that prevent any external host to fetch data from it.
To show all the blog posts from your WordPress website, we will be using WordPress posts API. Just write the following code in the file where you want to show the blog listing. Make sure to change your blog URL in $blog_api_url variable:
<?php
$blog_api_url = "https://yourblogdomain/wp-json/wp/v2";
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => $blog_api_url . "/posts",
CURLOPT_RETURNTRANSFER => 1
]);
$response = curl_exec($curl);
curl_close($curl);
$posts = json_decode($response);
foreach ($posts as $post)
{
$id = $post->id;
$date = date("d M, Y", strtotime($post->date));
$slug = $post->slug;
$status = $post->status; // "publish"
if ($status != "publish")
{
continue;
}
$link = $post->link;
$title = $post->title->rendered;
$excerpt = $post->excerpt->rendered;
$curlMedia = curl_init();
curl_setopt_array($curlMedia, [
CURLOPT_URL => $blog_api_url . "/media/" . $post->featured_media,
CURLOPT_RETURNTRANSFER => 1
]);
$responseMedia = curl_exec($curlMedia);
$responseMedia = json_decode($responseMedia);
$mediaTitle = $responseMedia->title->rendered;
$altText = $responseMedia->alt_text;
$mediaSourceUrl = $responseMedia->source_url;
?>
<div style="border: 1px solid black; margin: 10px; padding: 10px;">
<?php if (!empty($mediaSourceUrl)) { ?>
<img src="<?php echo $mediaSourceUrl; ?>" alt="<?php echo $altText; ?>" title="<?php echo $mediaTitle; ?>" style="width: 100%;" />
<?php } ?>
<div>
<p><?php echo $date; ?></p>
<h2>
<a href="./show-post.php?slug=<?php echo $slug; ?>">
<?php echo $title; ?>
</a>
</h2>
<p><?php echo $excerpt; ?></p>
</div>
</div>
<?php
}
?>
This will fetch the latest posts from your WordPress blog. We are looping through all the posts and saving the necessary variables from the $post object. You can write print_r($post) inside the foreach loop to view an entire $post object. We are only displaying the published posts here. If you want to show the unpublished posts as well, simply comment out the continue; statement. Inside the foreach loop, we are calling another CURL request to get the featured image of the post.
Then, we are creating a <div> inside the foreach loop with a 1-pixel black border and a 10 pixels margin from all sides. We are also giving it a 10 pixels padding so it will margin from inside too. Inside this div, we display the post’s published date, title, and excerpt. An excerpt is a short text from the blog post, you can set it up from the WordPress admin panel for each post separately. If not specified, then it will be the first paragraph of the post.
We are making the title a hyperlink, so when clicked, it will redirect the user to a new page where we can show that post in detail. We are using “./” in the hyperlink because our post detail page is in the same directory. You can also redirect the user to the original post on the WordPress blog using the variable $link. We didn’t put the hyperlink on the image, because if the post does not have a featured image, then the link will not be created. And the user will have no option to redirect to the post detail page.
To show the post detail inside your website, simply create a file named show-post.php and write the following code in it:
<?php
$slug = $_GET["slug"];
$blog_api_url = "https://yourblogdomain/wp-json/wp/v2";
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => $blog_api_url . "/posts?slug=" . $slug,
CURLOPT_RETURNTRANSFER => 1
]);
$response = curl_exec($curl);
curl_close($curl);
$posts = json_decode($response);
if (count($posts) == 0)
{
die("Post not found.");
}
$date = date("d M, Y H:i:s", strtotime($posts[0]->date));
$status = $posts[0]->status; // "publish"
if ($status != "publish")
{
die("Post not published.");
}
$title = $posts[0]->title->rendered;
$content = $posts[0]->content->rendered;
$curlMedia = curl_init();
curl_setopt_array($curlMedia, [
CURLOPT_URL => $blog_api_url . "/media/" . $posts[0]->featured_media,
CURLOPT_RETURNTRANSFER => 1
]);
$responseMedia = curl_exec($curlMedia);
$responseMedia = json_decode($responseMedia);
$mediaTitle = $responseMedia->title->rendered;
$altText = $responseMedia->alt_text;
$mediaSourceUrl = $responseMedia->source_url;
?>
<!-- Post title -->
<h1><?php echo $title; ?></h1>
<!-- Post meta content -->
<p>Posted on <?php echo $date; ?></p>
<!-- Preview featured image -->
<?php if (!empty($mediaSourceUrl)) { ?>
<img src="<?php echo $mediaSourceUrl; ?>" alt="<?php echo $altText; ?>" title="<?php echo $mediaTitle; ?>" style="width: 100%;" />
<?php } ?>
<!-- Post content-->
<section>
<?php echo $content; ?>
</section>
This will show the post title in the heading. Date the post was published. Featured image if available, the featured image will also have an alt text that will be displayed in case the image is not found. It will also have a title attribute that will be visible when the user moves the mouse over the image (hover effect). Finally, we are displaying the complete content of the post.
To show the comments of the post, first, we need to fetch all the comments of the post. We are again going to use the CURL request on WordPress comments API. Write the following code below post content:
<?php
$curlComments = curl_init();
curl_setopt_array($curlComments, [
CURLOPT_URL => $blog_api_url . "/comments/?post=" . $posts[0]->id,
CURLOPT_RETURNTRANSFER => 1
]);
$responseComments = curl_exec($curlComments);
$responseComments = json_decode($responseComments);
foreach ($responseComments as $comment) {
if ($comment->status != "approved") {
continue;
}
?>
<div style="border: 1px solid black; margin: 10px; padding: 10px;">
<?php foreach (((array) $comment->author_avatar_urls) as $avatar_url) { ?>
<img src="<?php echo $avatar_url; ?>" style="width: 100px;" />
<?php break; } ?>
<p><?php echo $comment->author_name; ?></p>
<p><?php echo $comment->content->rendered; ?></p>
</div>
<?php } ?>
This will first fetch all the comments of that post. Then it will loop through each comment and will skip the loop iteration if the comment is not approved yet. Then, it will create a <div> tag with styles the same as we did for the blog listing. The author_avatar_urls object in each $comment is an object. So we need to convert that to an array using (array) typecasting. Then we will loop through it, and display the profile image of the user who posted that comment. After that, we are using a break statement so it will not show multiple images, it will stop the loop after displaying one image. User profile images are in different dimensions, but we need to show only one. And finally, we display the name of the person who posted the comment and the comment itself.
Check out our more tutorials on WordPress.
[wpdm_package id=’1747′]
Or you can also download it from Github.