Membuat Aplikasi Chatting Real Time menggunakan NodeJS & Mysql

Create Chat Applications using NodeJS, Socket.io & Mysql - Web-based chat applications that can run in real time, can send messages in the form of text or images. This application is a private chat or one to one.
I named this chat application Inponow Web Message. This application has several features, namely :
login and resigister system
contact storage
change photo and profile information
sending text and images in real time
delete messages & contacts
The dependencies used in helping the creation of this chat application include :
socket.io
express
ejs
bootstrap
Here is a demo of a chat application called Inponow Web Chat.
Folder structure of Inponow Realtime Chatting Application
app folder structure
Login.ejs, script to set the login/register display and check the username in the Inponow Web Chat application.
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Inponow Web Message</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/jsjq/jquery.min.js" charset="utf-8"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/socket.io/socket.io.js" charset="utf-8"></script>
  <style media="screen">
    @font-face {
      font-family: 'sans-bold';
      src: url('/font/OpenSans-Bold.ttf');
    }

    @font-face {
      font-family: 'sans';
      src: url('/font/OpenSans-Regular.ttf');
    }

    body {
      color: #000;
      overflow-x: hidden;
      font-family: 'sans';
      height: 100%;
      background-color: #fff;
      background-repeat: no-repeat
    }

    .card2 {
      margin: 0px 40px
    }

    .logo {
      width: 250px;
      margin-top: 20px;
      margin-left: 35px;
      /* padding: 30px 0 */
    }

    .image {
      width: 360px;
      height: 280px
    }

    .border-line {
      border-right: 1px solid #EEEEEE
    }

    .text-sm {
      font-size: 14px !important
    }

    .shadow {
      /* box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px !important; */
      box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px !important;
      border-radius: 7.2px;
    }

    ::placeholder {
      color: #BDBDBD;
      opacity: 1;
      font-weight: 300
    }

    :-ms-input-placeholder {
      color: #BDBDBD;
      font-weight: 300
    }

    ::-ms-input-placeholder {
      color: #BDBDBD;
      font-weight: 300
    }

    input,
    textarea {
      padding: 10px 12px 10px 12px;
      border: 1px solid transparent;
      box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
      border-radius: 7px;
      margin-bottom: 5px;
      margin-top: 2px;
      width: 100%;
      color: #2C3E50;
      font-size: 14px;
      letter-spacing: 1px;
    }

    input:focus,
    textarea:focus {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border: 1px solid #304FFE;
      outline-width: 0
    }

    button:focus {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      outline-width: 0
    }

    a {
      color: inherit;
      cursor: pointer
    }

    .btn-blue {
      width: 150px;
      border-radius: 2px;
      background: #00CF68 !important;
      color: white;
      border-color: #00CF68;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20) !important;
      border-radius: 7.2px;
    }

    .btn-blue:hover {
      background-color: #000;
      color: white;
      cursor: pointer
    }

    .bg-blue {
      color: #fff;
      background-color: #00A3FF
    }

    @media screen and (max-width: 991px) {
      .logo {
        margin-left: 0px
      }

      .image {
        width: 300px;
        height: 220px
      }

      .border-line {
        border-right: none
      }

    }
  </style>
</head>

<body>
  <div class="row login__">
    <div class="col-md"></div>
    <div class="col-md-6" style="top:7em">
      <div class="px-1 px-md-5 mx-auto">
        <div class="card border-0">
          <div class="row d-flex">
            <!-- <div class="col-lg-6">
                    <div class="card1 pb-5">
                        <div class="row"> <img src="" class="logo px-5 py-4"> </div>
                        <div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img src="/custom/chat.svg" class="image"> </div>
                    </div>
                </div> -->
            <div class="col-lg-12">
              <div class="border-0 card px-4 py-5">
                <h3 class="pb-3">Inponow <span style="color:#00CF68;font-family:'sans-bold'">Web Chat</span></h3>
                <% if(flash_login != '' && type == 'signin'){ %>
                <div class="alert alert-danger alert-dismissible fade shadow show alert__" role="alert">
                  <strong style="font-size:13px"><%= flash_login %></strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <% }else if(flash_login != '' && type == 'signup') { %>
                <div class="alert alert-info alert-dismissible fade shadow show alert__" role="alert">
                  <strong style="font-size:13px"><%= flash_login %></strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <% } %>
                <form action="/signin" method="post">
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Username</h6>
                    </label> <input class="mb-4" type="text" name="username" placeholder="Enter a valid username" autocomplete="off"> </div>
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Password</h6>
                    </label> <input type="password" name="password" class="passw1" placeholder="Enter password"> </div>
                  <div class="row px-3 mb-4">
                    <div class="custom-control custom-checkbox custom-control-inline"> <input id="chk1" type="checkbox" name="chk" class="custom-control-input"> <label for="chk1" class="custom-control-label text-sm">Show Password</label> </div> <a
                      href="#" class="ml-auto mb-0 text-sm">Forgot Password?</a>
                  </div>
                  <div class="row mb-3 px-3 "> <button type="submit" class="btn btn-blue text-center">Login</button> </div>
                  <div class="row px-3"> <small>Haven't an account? <a class="register font-weight-bold" style="font-family:'sans-bold'">Register</a></small> </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md"></div>
  </div>

  <div class="row register__" style="display:none">
    <div class="col-md"></div>
    <div class="col-md-8" style="top:7em">
      <div class="px-1 px-md-5 mx-auto">
        <div class="card border-0">
          <div class="row d-flex">
            <div class="col-lg-12">
              <div class="border-0 card px-4 py-5">
                <h3 class="pb-3">Inponow <span style="color:#00CF68;font-family:'sans-bold'">Web Chat</span></h3>
                <form action="/signup" method="post">
                  <div class="row">
                    <div class="col-md-12 username_check_area">

                    </div>
                    <div class="col-md">
                      <label class="mb-1">
                        <h6 class="mb-0 text-sm">Username</h6>
                      </label>
                      <input class="mb-4 ccus" type="text" name="username" required placeholder="Enter a valid username" autocomplete="off">
                    </div>
                    <div class="col-md">
                      <div class=""> <label class="mb-1">
                          <h6 class="mb-0 text-sm">Your Fullname</h6>
                        </label> <input class="mb-4" type="text" name="name" required autocomplete="off" placeholder="Your username"> </div>
                    </div>
                  </div>
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Password</h6>
                    </label> <input type="password" class="mb-4" name="password" required placeholder="Enter password"> </div>
                  <div class="row mb-3 px-3 "> <button type="submit" class="btn btn-blue text-center">Register</button> </div>
                  <div class="row px-3"> <small>Have an account? <a class="login font-weight-bold" style="font-family:'sans-bold'">Login</a></small> </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md"></div>
  </div>
  </div>

  <script type="text/javascript">
    $('.login').on('click', function() {
      $('.login__').show();
      $('.register__').hide();
    })
    $('.register').on('click', function() {
      $('.register__').show();
      $('.login__').hide();
    })

    $('.ccus').on('change', function () {
      $.ajax({
        url: "/check_username",
        type: 'POST',
        cache: false,
        dataType: 'JSON',
        data: {
          username: $(this).val(),
        },
        success: function(result) {
          console.log(result);
          if (result == 1) {
            // console.log('berhasil horeloca');
            $('.username_check_area').html(`<div class="alert alert-danger alert-dismissible fade show shadow" role="alert">
              Username <b style="text-transform:capitalize">${$('.ccus').val()}</b> has been used, type another username.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>`);
            $('.ccus').val('');
          }else {
            $('.username_check_area').html('');
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.error();
        }
      })
    })

    $(document).ready(function() {
      setTimeout(function() {
        $('.alert__').fadeOut();
      }, 3000);
    })

    $('#chk1').on('change', function() {
      if(this.checked) {
        $('.passw1').attr('type', 'input');
      }else {
        $('.passw1').attr('type', 'password');
      }
    })
  </script>
</body>

</html>
Inponow Web Chat Part 2
Creating Chat Apps using NodeJS, Socket.io & Mysql

Comments
