November 15, 2021

You’ve got questions, we’ve got answers.

Build Your Own Chat App – Website or App

chat now app

chat now app

Real time web based text and image sharing system is basically a chatroom where multiple users can be connect at the same time share and share their valuable information via text or image sharing system with Emoj support  .

it can be achieve by various ways using new technologies that came in to tech field to make lots of apps and websites as much as in easy way using these technologies.

In which some of them technology name called is java, php , rubi , python , javascript , .Net and many more . And each language  has their own framework which make a very favorable environment fro developers to develop any type of apps or websites in easy way .

But here we will use most favorable technology on which approx 60%+ websites runs on this technology now days . and used in large scale by developers to make such type of websites or apps or any types of application that you use in day to day life .

Basics of making a web project

Basically for making web project we must know about front end and backend . And the technology is used behind backend development . Front End: It basically defines your visual structure of your web project It includes , page designs , layouts , designing , styling , effect etc.  this functionality can be achieve by
  • Html
  • Css
  • Bootstarp
  • Normalize
  • Jquery
  • Ajax

Back End

Back ends development basically determines the working functionality of your web project. And to to do you’ll need to choose a specific backend technology that will satisfy your requirement according your project . Normally here are some common backend languages that every programmer used to implement functionality of their web project .
  • Php
  • Python
  • Java
  • Javascript
And to make your project as dynamic you will need database to store information entered by user . and to achieve this functionality you have lots of choices which database you want to actually use .Here are some list of databases engines that you can use in your project make it dynamic .
  • PostGree SQl
  • My Sql
  • Maria DB
  • Oracle Database
  • Microsoft SQL server
  • Mongo DB

Technologies used in this project

Front End development:
  1. Html
  2. Css
  3. Jquery
  4. Bootstrap
  5. Normalize
Backend development:
  1. PHP
  2. Javascript
  3. Ajax
  4. Sql commands
Databse used :
  1. PHP mysql databse
server used
  1. Apache xamp server

Modules

1.Creating Project folder structure

2.Creating login and sign up page

3.Creating Database structure

4.Writing algorithm for login and signup page

5.Creating dashboard page

6.Creating main chatroom page

7.Writing algorithm for sending and storing the data sent by a valid user

8.Displaying the data in every interval of 1 sec

1. Creating folder structure

Creating a folder structure simply gives you the accessibility of  all the files and folder in structures and well secured manner ie. Can’t be edited by any third person without knowing it whole way of hierarchal functioning .

way to achieve this all things you can frameworks which has their own way of url dispatchers methods , public and private file management system etc… Here I have used only normal sublime text editor everything is manually edited .Every files with their functionality mentioned above as you can see that

chat now app

2.Creating login and signup page

Ct3 folder or root folder is login page in itself . And in the bottom as you can see here index.php is file of login page . by opening is you’ll see something this type of login page . completely made up of html, css, bootstrap , javascript , jquery. By applying some predefined class of bootstrap and in very artistic way of using CSS(Cascade style sheet ).
chat now app

3. Creating databse structure

Basically as all of you know that database is used to store the data and make you project dynamic . Means users can interact with your website and can give their feedback due to which there is continuous changes occure in databse of your site which make your site much easier to use and very usufull .

Now days everyone is using dynamic website instead of static website where there is no need of any type of data storage management system . due to which people loose interest in surfing these types of sites or apps .

Here I have created database called “cahtapp

It have two tables named as (figure)

  • Msg_table
  • userdata

Dabase Information

Where “msg_table” table is used for storing all the msg sent of any active user on that instance . it contains

  • active user’s id
  • Msg
  • Ip
  • Time
  • current profile pic

 And “userdata” table holds all the information about registered users such as

  • Username
  • Email
  • Password
  • Profile dp

4.Writing algorithm for login and signup page

As you can see in the folder structure . a file situated at the location “./login_varification/user_login_varification.php” contains all logical algorithm about filtering and sigin in algorithm for new registered user . and also databse connectivity included in this file already .

5.Creating dashboard page

}Dashboard.php page is created in the same directory for ease .  it include that home page when user enter in chatroom after logged in. and I include all the backend and front ends codes which systematically allow users to interact with all the other live users with it’s simple user friendly dashboard Dashboard here something looks like this , but don’t worry about the path shown here after login to the main page cause all the codes has been copied to the “user_login_varification.php” file .

“Dashboard.php” file preview

6. Algorithm for sending and storing data sent by user in the table “msg_table” of databse “chatapp”

for asynchronously storing data In data base without destroying the session we have used Ajax here . Here you can see in the ajax post request function . where the actually message where has to be stored defined in to “msg.php” file and all the variables we have sent using this file can be used in msg.php file also .

as we have done that here to store all the information of the user with his message , like  username , current timspan, message, profile pic,etc.

Funtionality of sending the msg in to msg_tabele asynchronously using (AJAX)

Here we will achieve this functionality by using ajax Post function . the reason of using Ajax here is we want to store the data sent by the user asynchronously . it means that during storing the data in to databse in the table “msg_table” of database “chatapp” page shouldn’t be refreshed and session of the user should not be interrupted .

And here in the bottom of dashboard.php file we have included ‘./../filter_msg/fltrmsg.php’ file . and the ajax post function is written in this fltrmsg.php.

Format of ajax post function :

[ $(“#submit_msg”).click(function(){

const mymsg=$(“#user_msg”).val();

var today = new Date();

var time = today.getHours() + “:” + today.getMinutes() + “:” + today.getSeconds();

$.post(‘./../msg/msg.php’,{ text : mymsg ,ip: ‘‘ , active_user: ‘‘ , current_time: time  } , function(data,status) {

document.getElementsByClassName(‘anyclass’)[1].innerHTML=data;

});

$(“#user_msg”).val(“”);

return false;

});  ]

“Msg.php”(filter and store the msg in to “msg_table” table )

7. Displaying the data in every interval of 1 sec to everyone in the network

To achieve this functionality we have javascript and ajax .where “setInterval” function is called here which is going to fetch the data from the database in every 1000ms interval of time . and will send it to class of “anyclass” . And the job is done now .

The front end and backend algo. For showing it to every user is written in “ rtfd.php “ file whose relative path is “./../filter_msg/fetched_data/rtfd.php” in which database connectivity is included from the root folder i.e. from “connection.php”.

After that simply we have fetched the data here and showed it to the user . 

The main data sent by user which is redirected to this page for filtration and set it to class of “anyclass” where it has to be shown

make chat app
  • tech movies
  • tech knowledge
  • wordpress
  • tech facts
  • blogging
top 10 animated movies

Top 10 Animated Movies

Techymaxx Jun 09, 2020
top 10 horror movies

top 10 horror movies

Techymaxx Jun 04, 2020