DEV Community: Rupesh Chandra Mohanty

Creating simple CRUD REST APIs using Spring Boot and MongoDB

Rupesh Chandra Mohanty — Wed, 10 May 2023 15:03:41 +0000

Hi everyone. In this new post, we will be creating simple CRUD REST APIs using Spring boot and MongoDB. Before we go into the code let's look at the topics we will be covering:

Importing the dependencies needed for this project
Connecting to our Mongo database using application.properties file
Creating an entity which will contain all the column names
Creating a repository and extending the MongoRepository class which contains the methods for CRUD operation
Creating a Data transfer object which will hold the response after a certain event
Creating a service class which will contain the logic for the apis
Creating a controller which will handle our POST/GET/PUT/DELETE requests.
Testing the apis we have created

Importing the dependencies needed for this project

Let's add the dependency needed for MongoDB:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>

And to automatically generate the getter and setter methods for our entity we will be using the lombok dependency:

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.26</version>
    <scope>provided</scope>
</dependency>

Connecting to our Mongo database using application.properties file

spring.data.mongodb.uri=<mongo cluster uri>
spring.data.mongodb.database=<database to be connected to>

Creating an entity which will contain all the column names

Now we have to create an entity class which will contain all the columns that we need in our collection. Here is the code for the entity class:

package com.example.bookstore.entity;

import lombok.Data;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

import java.time.LocalDateTime;

@Data
@Document("post")
public class Post {
    @Id
    private String id;

    private String title;

    private String body;

    private String author;

    private LocalDateTime createdAt;

    private LocalDateTime updatedAt;
}

Let's understand the annotations used here:

@Data - generates all the boilerplate that is normally associated with simple POJOs (Plain Old Java Objects) and beans.
@Document - used to identify a domain object, which is persisted to MongoDB.
@Id - defines the primary key

Creating a repository and extending the MongoRepository class which contains the methods for CRUD operation

Now we have to create a repository which will be extending the MongoRepository class. A repository is a mechanism for encapsulating storage, retrieval, and search behaviour of objects.

The MongoRepository extends PagingAndSortingRepository and QueryByExampleExecutor interfaces that further extend the CrudRepository interface. The code for the repository is like this:

package com.example.bookstore.repository;

import com.example.bookstore.entity.Post;
import org.springframework.data.mongodb.repository.MongoRepository;
import org.springframework.data.mongodb.repository.Query;
import org.springframework.stereotype.Repository;

@Repository
public interface PostRepository extends MongoRepository<Post, String> {
}

Let's understand the annotation used here:

@Repository - signifies that the class is a DAO class. DAO class is where we write methods to perform operations over db.

Creating a Data transfer object which will hold the response after a certain event

Now we create a Data transfer object(DTO) which will hold the response. Here is the code for the DTO:

package com.example.bookstore.dto;

import com.example.bookstore.entity.Post;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;

import java.util.List;

@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class Response {
    @JsonProperty("response")
    private ResponseDetailsDto response;
}

We will be adding some more attributes to this DTO object.
The ResponseDetailsDto class looks something like this:

package com.example.bookstore.dto;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;

@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class ResponseDetailsDto {
    @JsonProperty("responseCode")
    private String responseCode;

    @JsonProperty("responseStatus")
    private String responseStatus;

    @JsonProperty("responseMessage")
    private String responseMessage;
}

Let's understand the annotations used here:

@JsonInclude(JsonInclude.Include.NON_NULL) - ignores null fields in an object.
@JsonProperty - tells Jackson ObjectMapper to map the JSON property name to the annotated java field's name.

Creating a service class which will contain the logic for the apis

Now we will have to create a service class which will contain the logic for the application. First we need to create an interface which will have the return types (which in our case here is the Response DTO) and the method names. This is the code for the interface:

package com.example.bookstore.service;

import com.example.bookstore.dto.Response;
import com.example.bookstore.entity.Post;

public interface PostService {
    Response addPost(Post post);

    Response editPost(String postId, Post post);

    Response deletePost(String postId);

    Response getAllPosts();

    Response getPostById(String postId);
}

And here is the code for the service class which implements the methods defined in the interface:

package com.example.bookstore.service;

import com.example.bookstore.dto.Response;
import com.example.bookstore.dto.ResponseDetailsDto;
import com.example.bookstore.entity.Post;
import com.example.bookstore.repository.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;

import java.time.LocalDateTime;
import java.util.List;

@Service
public class PostServiceImpl implements PostService {

    @Autowired
    PostRepository postRepository;

    /**
     * Method to add post
     * @param post contents of the post
     * @return Response
     */
    @Override
    public Response addPost(Post post) {
        Response dto = new Response();
        ResponseDetailsDto res = new ResponseDetailsDto();
        Post newPost = new Post();

        newPost.setTitle(post.getTitle());
        newPost.setBody(post.getBody());
        newPost.setAuthor(post.getAuthor());
        newPost.setCreatedAt(LocalDateTime.now());

        newPost = postRepository.save(newPost);

        if(!ObjectUtils.isEmpty(newPost)) {
            res.setResponseCode("200");
            res.setResponseStatus("Success");
            res.setResponseMessage("New post added");
            dto.setResponse(res);
        } else {
            res.setResponseCode("400");
            res.setResponseStatus("Failed");
            res.setResponseMessage("Unable to add new post");
            dto.setResponse(res);
        }

        return dto;
    }

    /**
     * Method to edit post
     * @param postId id of the post
     * @param post update contents of the post
     * @return Response
     */
    @Override
    public Response editPost(String postId, Post post) {
        Response dto = new Response();
        ResponseDetailsDto res = new ResponseDetailsDto();
        Post postDetails = postRepository.findByPostId(postId);

        if(!ObjectUtils.isEmpty(postDetails)) {
            postDetails.setTitle(post.getTitle());
            postDetails.setBody(post.getBody());
            postDetails.setAuthor(post.getAuthor());
            postDetails.setUpdatedAt(LocalDateTime.now());

            postDetails = postRepository.save(postDetails);

            res.setResponseCode("200");
            res.setResponseStatus("Success");
            res.setResponseMessage("Post updated");
            dto.setResponse(res);
        } else {
            res.setResponseCode("400");
            res.setResponseStatus("Failed");
            res.setResponseMessage("No such post exists");
            dto.setResponse(res);
        }

        return dto;
    }

    /**
     * Method to delete a post
     * @param postId id of the post
     * @return Response
     */
    @Override
    public Response deletePost(String postId) {
        Response dto = new Response();
        ResponseDetailsDto res = new ResponseDetailsDto();
        Post postDetails = postRepository.findByPostId(postId);

        if(!ObjectUtils.isEmpty(postDetails)) {
            // deleting post from collection
            postRepository.deleteById(postId);

            res.setResponseCode("200");
            res.setResponseStatus("Success");
            res.setResponseMessage("Post deleted");
            dto.setResponse(res);
        } else {
            res.setResponseCode("400");
            res.setResponseStatus("Failed");
            res.setResponseMessage("Unable to fetch post details");
            dto.setResponse(res);
        }

        return dto;
    }

    /**
     * Method to get all the posts
     * @return Response
     */
    @Override
    public Response getAllPosts() {
        Response dto = new Response();
        ResponseDetailsDto res = new ResponseDetailsDto();
        List<Post> allPosts = postRepository.findAll();

        if(allPosts.size() > 0) {
            res.setResponseCode("200");
            res.setResponseStatus("Success");
            res.setResponseMessage("All posts fetched");
            dto.setResponse(res);
            dto.setPostList(allPosts);
        } else {
            res.setResponseCode("400");
            res.setResponseStatus("Failed");
            res.setResponseMessage("No posts added yet!");
            dto.setResponse(res);
        }
        return dto;
    }

    /**
     * Method to get post by id
     * @param postId - id of the post
     * @return Response
     */
    @Override
    public Response getPostById(String postId) {
        Response dto = new Response();
        ResponseDetailsDto res = new ResponseDetailsDto();
        Post postDetails = postRepository.findByPostId(postId);

        if(!ObjectUtils.isEmpty(postDetails)) {
            res.setResponseCode("200");
            res.setResponseStatus("Success");
            res.setResponseMessage("Post fetched!");
            dto.setResponse(res);
            dto.setPost(postDetails);
        } else {
            res.setResponseCode("400");
            res.setResponseStatus("Failed");
            res.setResponseMessage("No such post with the id provided");
            dto.setResponse(res);
        }

        return dto;
    }
}

We have five methods defined here:

addPost() - does an insert operation in the post collection
editPost() - does an update operation for the post id that has been passed to the method
deletePost() - deletes the post
getAllPosts() - fetches all the posts
getPostById() - fetches post by the id

We also need to define a method to find post by id in our PostRepository class. This is the code change that is made in PostRepository:

@Repository
public interface PostRepository extends MongoRepository<Post, String> {
    @Query("{_id: '?0'}")
    Post findByPostId(String id);
}

And we need to add some attributes in the Response DTO. The code change for the Response DTO looks something like this:

@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class Response {
    @JsonProperty("response")
    private ResponseDetailsDto response;

    @JsonProperty("postList")
    private List<Post> postList;

    @JsonProperty("postDetails")
    private Post post;
}

Let's understand the annotations used in the service class:

@Service - used to indicate that the class is a service class which contains the business logic.
@Autowired - used to auto-wire particular property in a bean.
@Override - means that the child class method overrides the base class method.

Creating a controller which will handle our POST/GET/PUT/DELETE requests.

Now we have to create the controller which will handle our POST/GET/PUT/DELETE requests. This is the code for the controller class:

package com.example.bookstore.controller;

import com.example.bookstore.dto.Response;
import com.example.bookstore.entity.Post;
import com.example.bookstore.service.PostService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping(value = "/post", produces = "application/json")
public class PostController {

    @Autowired
    PostService postService;

    @PostMapping("/add-post")
    Response addPost(@RequestBody Post post) {
        Response res = postService.addPost(post);
        return res;
    }

    @PostMapping("/edit-post/{postId}")
    Response editPost(@PathVariable("postId") String postId, @RequestBody Post post) {
        Response res = postService.editPost(postId, post);
        return res;
    }

    @DeleteMapping("/delete-post/{postId}")
    Response deletePost(@PathVariable("postId") String postId) {
        Response res = postService.deletePost(postId);
        return res;
    }

    @GetMapping("/get-all-posts")
    Response getAllPosts() {
        Response res = postService.getAllPosts();
        return res;
    }

    @GetMapping("/get-post-by-id/{postId}")
    Response getPostById(@PathVariable("postId") String postId) {
        Response res = postService.getPostById(postId);
        return res;
    }

}

Let's understand the annotations we have used in our controller class:

@RestController - mainly used for building restful web services using Spring MVC. The class annotated with this annotation returns JSON response in all the methods.
@RequestMapping - used to map web requests onto specific handler class and/or handler methods.
@PostMapping - maps HTTP POST requests onto specific handler methods
@GetMapping - maps HTTP GET requests onto specific handler methods
@DeleteMapping - maps HTTP DELETE requests onto specific handler methods

Testing the apis we have created

The last step is to test the apis we have created, I will be using insomnia to test the apis. Here are the output of the apis we created:

Add post

Edit post

Here we are passing the ObjectId of the record that got added into the collection as an argument to the url.

Get all posts

Get post by id

Delete post

So that is how we can create RESTful apis using Springboot and MongoDB. I hope you liked this post and it was helpful for you. Please let me know if you have any questions. Cheers!

Create a Github Repository using Web Automation

Rupesh Chandra Mohanty — Fri, 20 Nov 2020 15:47:00 +0000

How exciting will it be if you can create a repository in Github using your console/command prompt without actually going to Github?

After working for a while on websites, I was looking forward to make the lengthy process of filling up forms in websites automated and that's when I tumbled upon Selenium. You can make your entire Web Browser Automated using Selenium.

In this blog, I am gonna show how I made a simple application to make the process of creating a new repository in Github automated. I am new to this thing and I intend to explore more about it and make some more exciting projects and share with you guys.

How to start building your application?

First you need to install Selenium in your local system. Here's how you can do that:

Once you have completed the above task then you need to install the webdriver from this link. So now let's get into some coding. Open your favorite IDE and create a file and name it confidential.py and in this file you have to declare two variables username and password and assign your github account username and password to the variables respectively, never share this file with anyone, it has some serious consequences. Your file must look something like this:

username = "<Your Github Username>"
password = "<Your Github Password>"

Now you need to create another python file where we are going to declare a class which will have the logic for the functioning of the application. In this file you begin by importing the libraries you need for this application and they are:

from selenium import webdriver
from confidential import username,password

After importing the required libraries you need to create a class, lets name it Bot. In this class we now declare the init function, in which you declare the driver variable. Now the code looks something like this :

from selenium import webdriver
from confidential import username,password

class Bot():
    def __init__(self):
        self.driver = webdriver.Chrome()

You need a function to automatically login into your Github account using the username and password you declared in the file confidential.py. The code for this function looks something like this :

def login(self):
        self.driver.get('https://github.com/')

        # clicks on the login button
        login = self.driver.find_element_by_xpath('/html/body/div[1]/header/div/div[2]/div[2]/a[1]')
        login.click()

        # clicks and inputs in the username field
        uname = self.driver.find_element_by_xpath('//*[@id="login_field"]')
        uname.click()
        uname.send_keys(username)

        # clicks and inputs in the password field
        pwd = self.driver.find_element_by_xpath('//*[@id="password"]')
        pwd.click()
        pwd.send_keys(password)

        # click the login button
        button = self.driver.find_element_by_xpath('//*[@id="login"]/form/div[4]/input[12]')
        button.click()

Here you have to fetch the fields of the form in the Github sign in page using xpath. To get the xpath, inspect the page and click on the element for which you want the xpath and then right click on the tag and copy the xpath.

Now you need to create another function to create a new repository after sign in. The code for this function looks something like this :

def newRepo(self):
        self.driver.get('https://github.com/new')
        repo = input("Enter your repository name: ")
        description = input("Enter your repository description: ")

        # Input repo name
        repoName = self.driver.find_element_by_xpath('//*[@id="repository_name"]')
        repoName.click()
        repoName.send_keys(repo)

        # Input repo description
        repoDes = self.driver.find_element_by_xpath('//*[@id="repository_description"]')
        repoDes.click()
        repoDes.send_keys(description)

        # Create a public repo 
        public = self.driver.find_element_by_xpath('//*[@id="repository_visibility_public"]')
        public.click()

        # select to add a readme file
        checkBox = self.driver.find_element_by_xpath('//*[@id="repository_auto_init"]')
        checkBox.click()

        # create repo
        create = self.driver.find_element_by_xpath('//*[@id="new_repository"]/div[4]/button')
        create.submit()

This function will help you create a repository automatically.What you have to do is just input the name and description of the repository from the console/command prompt and there, you just created a new repository and that too in a more fast and efficient method.
The final code looks something like this :

from selenium import webdriver
from confidential import username,password

class Bot():
    def __init__(self):
        self.driver = webdriver.Chrome()

    def login(self):
        self.driver.get('https://github.com/')

        # clicks on the login button
        login = self.driver.find_element_by_xpath('/html/body/div[1]/header/div/div[2]/div[2]/a[1]')
        login.click()

        # clicks and inputs in the username field
        uname = self.driver.find_element_by_xpath('//*[@id="login_field"]')
        uname.click()
        uname.send_keys(username)

        # clicks and inputs in the password field
        pwd = self.driver.find_element_by_xpath('//*[@id="password"]')
        pwd.click()
        pwd.send_keys(password)

        # click the login button
        button = self.driver.find_element_by_xpath('//*[@id="login"]/form/div[4]/input[12]')
        button.click()

    def newRepo(self):
        self.driver.get('https://github.com/new')
        repo = input("Enter your repository name: ")
        description = input("Enter your repository description: ")

        # Input repo name
        repoName = self.driver.find_element_by_xpath('//*[@id="repository_name"]')
        repoName.click()
        repoName.send_keys(repo)

        # Input repo description
        repoDes = self.driver.find_element_by_xpath('//*[@id="repository_description"]')
        repoDes.click()
        repoDes.send_keys(description)

        # Create a public repo 
        public = self.driver.find_element_by_xpath('//*[@id="repository_visibility_public"]')
        public.click()

        # select to add a readme file
        checkBox = self.driver.find_element_by_xpath('//*[@id="repository_auto_init"]')
        checkBox.click()

        # create repo
        create = self.driver.find_element_by_xpath('//*[@id="new_repository"]/div[4]/button')
        create.submit()

if __name__ == "__main__":
    github = Bot()
    github.login()
    github.newRepo()

So that's my small application which I made using Selenium. Hope you guys liked it, if you did then do comment and also suggestions for future project ideas are welcome. Here is the link to the Video

Chat Application using PHP

Rupesh Chandra Mohanty — Sun, 20 Sep 2020 09:51:38 +0000

Every programmer wants to make a chat application once in his life, be any technology stack he/she might be using. Making a simple chat application is not difficult but is a bit tricky for beginners. Now many would ask why use PHP? Well if you are a beginner then you should always choose scripting language like PHP to make tricky applications like this one.

Setting up the Server in your local system

So before we get started on how to make such an application, you need to have a server like Xampp or Wampserver. This helps to create a local environment for you to work when you are coding in PHP. Once you have setup the xampp server, go to the htdocs folder and create a folder for your application, I am going to name my application "Wassup", cause I am not that creative :( .I am using xampp and it looks something like this :

Let's Code!

Let's first think what are the pages our API is gonna have. For now we are gonna make a login page, a registration page, a dashboard page, a search results page and a message page.

Here is the sql dump for this project :



-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 20, 2020 at 11:58 PM
-- Server version: 10.4.11-MariaDB
-- PHP Version: 7.3.18

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `wassup`
--

-- --------------------------------------------------------

--
-- Table structure for table `messages`
--

CREATE TABLE `messages` (
  `id` int(100) NOT NULL,
  `sent_by` varchar(255) CHARACTER SET latin1 NOT NULL,
  `received_by` varchar(255) CHARACTER SET latin1 NOT NULL,
  `message` varchar(255) CHARACTER SET latin1 NOT NULL,
  `createdAt` varchar(255) CHARACTER SET latin1 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(100) NOT NULL,
  `name` varchar(255) CHARACTER SET latin1 NOT NULL,
  `email` varchar(255) CHARACTER SET latin1 NOT NULL,
  `password` varchar(255) CHARACTER SET latin1 NOT NULL,
  `dp` varchar(255) CHARACTER SET latin1 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `messages`
--
ALTER TABLE `messages`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `messages`
--
ALTER TABLE `messages`
  MODIFY `id` int(100) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(100) NOT NULL AUTO_INCREMENT;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

The file structure for this project is :

We have to also setup the database for this project and this is the code for db connection :



<?php
    // connection to DB
    $conn = mysqli_connect("localhost","root","","wassup") or die(mysqli_error($conn));
?>

In the registration page we are gonna register the new user, and if he/she already exists in the database we are gonna pass them a message that the account exists. Here is the back-end code for the registration page :



<?php

    // session start
    session_start();

    // include DB connection
    include('./db.php');

    // declaring variables
    $name = "";
    $email = "";
    $password = "";
    $cpassword = "";

    // get form data
    if(isset($_POST['name'])) {
        $name = $_POST['name'];
    }
    if(isset($_POST['email'])) {
        $email = $_POST['email'];
    }
    if(isset($_POST['password'])) {
        $password = $_POST['password'];
    }
    if(isset($_POST['password'])) {
        $cpassword = $_POST['password'];
    }

    // setting up the target directory where you want to upload your images!
    $target_dir = "../dp/";
    $target_file = $target_dir . basename($_FILES["dp"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

    // Check if image file is a actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["dp"]["tmp_name"]);
        if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
        } else {
        echo "File is not an image.";
        $uploadOk = 0;
        }
    }

    // Check if file already exists
    if (file_exists($target_file)) {
        echo "Sorry, file already exists.";
        $uploadOk = 0;
    }

    // Check file size
    if ($_FILES["dp"]["size"] > 500000) {
        echo "Sorry, your file is too large.";
        $uploadOk = 0;
    }

    // Allow certain file formats
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
    && $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
    }


    // Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
        echo "Sorry, your file was not uploaded.";
    // if everything is ok, try to upload file
    } else {
        if (move_uploaded_file($_FILES["dp"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["dp"]["name"]). " has been uploaded.";
        } else {
        echo "Sorry, there was an error uploading your file.";
        }
    }

    if($name != "" && $email != "" && $password != "" && $cpassword != "") { // if the form fields are not empty!

        $checkUser = "SELECT * FROM users WHERE email = '$email'";
        $checkUserStatus = mysqli_query($conn,$checkUser) or die(mysqli_error($conn));

        if(mysqli_num_rows($checkUserStatus) > 0) { // if user exists!

            header('Location: ../index.php?message=You have already registered!');

        } else {

            if($password == $cpassword) { // if the password fields match!

                $image = basename($_FILES["dp"]["name"]);
                $insertUser = "INSERT INTO users(name,email,password,dp) VALUES('$name','$email','$password','$image')";
                $insertUserStatus = mysqli_query($conn,$insertUser) or die(mysqli_error($conn));

                if($insertUserStatus) { // if the user is successfully registered!

                    header('Location: ../index.php?message=You have registered successfully!');

                }  else { // if user is not registered successfully!

                    header('Location: ../register.php?message=Unable to register!');

                }

            } else { // if password fields dont match!

                header('Location: ../register.php?message=Password fields do not match!');

            }

        }


    } else { // if any of the fields are empty!

        header('Location: ../register.php?message=Please fill the fields properly!');  

    }
?>

Now for the login page the code looks something like this :



<?php

    // session start
    session_start();

    // include DB connection
    include('./db.php');

    // declaring variables
    $email = "";
    $password = "";

    // getting form data!
    if(isset($_POST['email'])) {
        $email = mysqli_real_escape_string($conn,strip_tags($_POST['email']));
    }

    if(isset($_POST['password'])) {
        $password = mysqli_real_escape_string($conn,strip_tags($_POST['password']));
    }

    if($email != "" && $password != "") { // if the fields are not empty!

        $checkUser = "SELECT * FROM `users` WHERE BINARY `email` = '$email' AND BINARY `password` = '$password'";
        $checkUserStatus = mysqli_query($conn,$checkUser) or die(mysqli_error($conn));

        if(mysqli_num_rows($checkUserStatus) > 0) { // if user exists!

            header('Location: ../chats.php?message=You have logged in!');

        } else {

            header('Location: ../index.php?message=Unable to login into your account!');

        }

    } else { // if the fields are empty!

        header('Location: ../index.php?message=Please fill all the fields!');

    }

    $_SESSION['email'] = $email;
?>

Once the user logs into his/her account, the user will be redirected to the dashboard page where an user can see all the previous conversations and this page will also have a search bar to search for any particular user via their email or name.The code for the dashboard page :



<?php

    // session start
    session_start();

    // include DB connection
    include('scripts/db.php');

    if(!isset($_SESSION['email'])) { // if user not logged in!

        header('Location: ./index.php');

    } else {

        $email = $_SESSION['email'];

    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wassup</title>
    <!-- external stylesheets -->
    <link rel="stylesheet" href="assets/css/chats.css">
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Wassup</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="./chats.php">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./logout.php">Logout</a>
      </li>
      <?php
        $getUser = "SELECT * FROM users WHERE email = '$email'";
        $getUserStatus = mysqli_query($conn,$getUser) or die(mysqli_error($conn));
        $getUserRow = mysqli_fetch_assoc($getUserStatus);
      ?>
      <li class = "nav-item">
        <img src="./dp/<?=$getUserRow['dp']?>" alt="Profile image" width = "40" class = "dropdown"/>
      </li>
  </div>
</nav>

    <!-- chats section -->
    <div class="container mt-4">
      <div class="card">
        <div class="card-title text-center">
          <form class="form-inline mt-4" style = "display : inline-block" method = "POST" action = "scripts/search-users.php">
            <input class="form-control mr-sm-2" type="search" name = "search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
        <div class="card-body mb-4">
          <?php
            $lastMessage = "SELECT DISTINCT sent_by FROM messages WHERE received_by = '$email'";
            $lastMessageStatus = mysqli_query($conn,$lastMessage) or die(mysqli_error($conn));
            if(mysqli_num_rows($lastMessageStatus) > 0) {
              while($lastMessageRow = mysqli_fetch_assoc($lastMessageStatus)) {
                $sent_by = $lastMessageRow['sent_by'];
                $getSender = "SELECT * FROM users WHERE email = '$sent_by'";
                $getSenderStatus = mysqli_query($conn,$getSender) or die(mysqli_error($conn));
                $getSenderRow = mysqli_fetch_assoc($getSenderStatus);
          ?>
          <div class="card">
            <div class="card-body">
              <h6><strong><img src = "./dp/<?=$getSenderRow['dp']?>" alt = "dp" width = "40"/> <?=$lastMessageRow['sent_by'];?></strong><a href="./message.php?receiver=<?=$sent_by?>" class="btn btn-outline-primary" style = "float:right">Send message</a></h6>
            </div>
          </div><br/>
          <?php
            }
          } else {
          ?>
            <div class="card-body text-center">
              <h6><strong>No conversations yet!</strong></h6>
            </div>
          <?php
          }
          ?>
        </div>
      </div>
    </div>

    <!-- Bootstrap scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Now when the user clicks on the send message option placed to the right side of receiver, then the user is redirected to a message box where he/she can send message to the concerned user. When the user clicks on the send message option, the email id of the receiver is sent as a request to the url and can be used to get the details of the receiver so that the data can be stored in the database along-with the message. The code for chat box between sender and receiver looks something like this :



<?php

    // session start
    session_start();

    // include DB connection
    include('scripts/db.php');

    error_reporting(0);
    if(!isset($_SESSION['email'])) { // if user not logged in!

        header('Location: ./index.php');

    } else {

        $email = $_SESSION['email'];

    }
    $receiver = $_GET['receiver'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wassup</title>
    <!-- external stylesheets -->
    <link rel="stylesheet" href="assets/css/chats.css">
    <link rel="stylesheet" href="assets/css/message.css">
    <!-- Fontawesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Wassup</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="./chats.php">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./logout.php">Logout</a>
      </li>
      <?php
        $getUser = "SELECT * FROM users WHERE email = '$email'";
        $getUserStatus = mysqli_query($conn,$getUser) or die(mysqli_error($conn));
        $getUserRow = mysqli_fetch_assoc($getUserStatus);
      ?>
      <li class = "nav-item">
        <img src="./dp/<?=$getUserRow['dp']?>" alt="Profile image" width = "40" class = "dropdown"/>
      </li>
  </div>
</nav>
    <div class="container">
        <?php
            $getReceiver = "SELECT * FROM users WHERE email = '$receiver'";
            $getReceiverStatus = mysqli_query($conn,$getReceiver) or die(mysqli_error($conn));
            $getReceiverRow = mysqli_fetch_assoc($getReceiverStatus);
            $received_by = $getReceiverRow['email'];
        ?>
        <div class="card mt-4">
            <div class="card-header">
                <h6><img src="./dp/<?=$getReceiverRow['dp']?>" alt="Profile image" width = "40"/><strong> <?=$receiver?></strong></h6>
            </div>
            <?php
                $getMessage = "SELECT * FROM messages WHERE sent_by = '$receiver' AND received_by = '$email' OR sent_by = '$email' AND received_by = '$receiver' ORDER BY createdAt asc";
                $getMessageStatus = mysqli_query($conn,$getMessage) or die(mysqli_error($conn));
                if(mysqli_num_rows($getMessageStatus) > 0) {
                    while($getMessageRow = mysqli_fetch_assoc($getMessageStatus)) {
                        $message_id = $getMessageRow['id'];
            ?>
            <div class="card-body">
            <h6 style = "color: #007bff"><?=$getMessageRow['sent_by']?></h6>
                <div class="message-box ml-4">    
                    <p class="text-center"><?=$getMessageRow['message']?></p>
                </div>
            </div>
            <?php
                    } 
                } else {
            ?>
            <div class="card-body">
                    <p class = "text-muted">No messages yet! Say 'Hi'</p>
            </div>
            <?php
                }
            ?>
            <div class="card-footer text-center">
            <form action="scripts/send.php" method = "POST" style = "display: inline-block">
            <input type="hidden" name = "sent_by" value = "<?=$email?>"/>
            <input type="hidden" name = "received_by" value = "<?=$receiver?>"/>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="form-group">
                                <input type="text" name = "message" id = "message" class="form-control" placeholder = "Type your message here" required/>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type = "submit" class="btn btn-primary">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

 <!-- Bootstrap scripts -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Now when the sender sends some message, then in the back-end there is a process going on which fetches the details of the sender and the receiver and it also fetches the message and the date and time the message was sent and enters this data into the database. The reason we are using date and time here is to arrange the messages in an ascending order, otherwise the messages will look jumbled up. The code for sending messages from the chat box is :



<?php

    // session start
    session_start();

    // include db connection
    include('./db.php');

    // declaring variables
    $sent_by = "";
    $received_by = "";
    $message = "";
    $createdAt = date("Y-m-d h:i:sa");

    // get data from form
    if(isset($_POST['sent_by'])) {

        $sent_by = $_POST['sent_by'];

    }

    if(isset($_POST['received_by'])) {

        $received_by = $_POST['received_by'];

    }

    if(isset($_POST['message'])) {

        $message = $_POST['message'];

    }

    if($message != "") { // if message box is not empty!

        // send message
        $sendMessage = "INSERT INTO messages(sent_by,received_by,message,createdAt) VALUES('$sent_by','$received_by','$message','$createdAt')";
        $sendMessageStatus = mysqli_query($conn,$sendMessage) or die(mysqli_error($conn));

        if($sendMessageStatus) {

            header("Location: ../message.php?receiver=$received_by");

        } else {

            header("Location: ../message.php?receiver=$received_by");

        }
    }
?>

Here is a demo video for the Chat API I created :

Uff! That was too much code for today. Here is the github repo for this project :

rupeshmohanty / chat-api

This is a chat application using Core PHP

chat-api

This is a chat application using Core PHP

View on GitHub

Hope you guys liked it! If you did, do tell me in the comment section.

Where to start as a developer?

Rupesh Chandra Mohanty — Mon, 27 Jul 2020 18:02:18 +0000

Hi Devs, this is my first technical blog. This is my first attempt at this and i would love to hear your opinions on this topic!

I don’t know if it’s true for all or I am the only one feeling this but when a student gets into an engineering college he/she starts to find ways to get recognized in the college. We try out all the clubs in our college and then after being rejected from some of them we realize that it’s not gonna be an easy 4 years journey.

But once you enter into an engineering college, you see students learning different type of technical skills and being recognized for their work and you are just confused about what are you gonna do. Some of your friends will be arguing about which programming language is efficient and has fast execution (Yeah i am talking about C++) and you will be standing there knowing nothing about programming or why are they arguing so much on such a topic.

I have been in such a situation, feels really bad seeing your friends talking about tech stuff and you are the odd one out. That’s the moment you decide to start learning about what are the technical domains available, but wait a minute, where are you going to start from and which language should you choose and ain’t you a little behind your friends, will you be able to get to their level ever? These are some of the questions which clouds your decision on which domain you should choose, but what if we try all the fields/domains available and then make a choice, yeah I know what you are thinking, this might take a lot of time but believe me it is worth it.

Where to start from?

Source : Wordpress

What people do before starting some domain is learn some programming language and try to understand it’s concepts by heart. You might start with something like Python or Java or C++ , but which one is better ? Well if you want to know the difference then just Google it and try to learn the difference between them or else ask your friends to describe you why they think that the programming language they code is better than the rest. One thing which everyone should do is never give up solving programming problems. Some of the best sites to practice your skills are Hackerank, Codeforces and Hackerearth. You should also try making some projects using the programming language you like. YouTube is the best place in my opinion if you want to start with some mini projects.

Source : Hackernoon

Now you have completed a programming language and want to start pursuing a domain, there are a lot of domains to choose from nowadays and what i would recommend is for you to try each and every one till you get the one which you like the most. Now the question arises can we explore all the domains in such short period of time and the answer is no, you can't cover all of them but what you can do is take advice from people from different domains or attend introductory sessions which will give you an entire overview about each of the available domains.

I, personally, liked Mathematics and statistics a lot and so i thought maybe I should pursue Data Science and ML and also watched an introductory session on that and almost gave up on web development. One thing which you should remember is never give up on a domain which you like, learning a new domain can be frustrating sometimes but if you hold onto that then it is totally worth it. Spoiler alert! I didn't pursue data science cause then i would have never been able to do what i liked the most.

Problems i faced in my domain

These are some of my opinions on problems Indian Web Developers face in their day to day lives.You are most welcome to share if there are any other problems you faced.

Responsiveness

What frustrates me more about web development is this factor called responsiveness, but without this a developer's site is like tea without sugar. (I hope you are not diabetic)

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.

Why should we make our sites responsive if it's so frustrating? Well Web Development is about making websites which can be accessed by everyone and on all types of devices.That's the whole point of web development in the first place!

There is so much to learn!

Web development is a field which keeps on growing and thus the amount of learning increases with it. You have to be updated with all the latest frameworks and languages if you want to become a professional web developer and this makes the task more difficult for us!

Source : Github

Internship opportunities in Indian IT companies is not that great!

Web Development internships are really hard to get in India. Indian IT companies give difficult tasks for the selection process and also they make you work more with less pay. Being a web developer in India is tough :(

Source : Pinterest

The whole point about this blog is that none of the fields are easy, but if you enjoy what you do as a developer then you should never give up on developing. Programming has opened up so much possibilities that we can't even think of. Every field/domain is directly affecting how people live their lives!

An advice for all beginners out there, development is all about how much you can discover about the domain which you are pursuing!

Keep learning and never give up on your dreams cause we are the one's who can come up with great solutions.