Giter Site home page Giter Site logo

devancakra / wb-register Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 24.91 MB

Web Programming Class | UPN Veteran Jatim | Website-Bot Register for Robotics community | Final Project

License: MIT License

PHP 85.48% CSS 2.27% JavaScript 2.95% Less 9.30%
website js ngrok crud register search count-data validation webhook botman

wb-register's Introduction

Open Source Love License: MIT Doi GitHub Star GitHub Contributor GitHub Forks GitHub last commit HTML CSS JS MySQL Bootstrap PHP

WB-Register

Web Programming Final Project
Creating multiplatform applications: Website-Bot Register for new member registration of UPN Veteran Jatim Robotics community.



Project Requirements

Part Description
Features Create, Read, Update, Delete, Search, Count Data, Validation, Refresh Page, Error Handling
Code PHP, HTML, CSS, JS, SQL
Framework Bootstrap 4, Botman
Tools XAMPP (PHP Version 7.4), Composer, Git, Ngrok



Download & Install

  1. XAMPP with PHP version 7.4

    https://bit.ly/XAMPP_PHP7_Installer
    

  2. Ngrok

    https://bit.ly/NGROK_Installer
    

  3. Composer

    https://bit.ly/Composer_Installer
    

  4. Git

    https://bit.ly/GIT_Installer
    



Database

  1. Open XAMPP, then start the Apache & MySQL section. This aims to be able to support the website optimally.

  2. Access the browser first in order to open the database admin panel, please copy the following link: localhost/phpmyadmin/.

  3. Create a database called wb_register on local.

  4. Open the wb_register database and Import the WB_Register_db.sql in the WB-Register/assets/sql directory.



Get Started

  1. Download this repository and extract it.

  2. Move the WB-Register directory into the htdocs directory, whose details you can find out as follows: C:\xampp\htdocs.

  3. Create an Ngrok account first on the following page: https://dashboard.ngrok.com/login.

  4. Connect the ngrok account in the following way:

    ngrok config add-authtoken [YOUR NGROK AUTHTOKEN]

  5. Open the ngrok.yml file in the C:\Users\[User Name]\AppData\Local\ngrok directory, then set the tunnels to be used for multiple ports in one go by writing this command in it:

    version: "2"
    authtoken: [YOUR NGROK AUTHTOKEN]
    tunnels:
      tunnel-1:
        proto: http
        addr: 80
        schemes: ["https"]
      tunnel-2:
        proto: http
        addr: 80
        schemes: ["http", "https"]

  6. Type the following command into NGROK.exe and press enter:

    ngrok start --all

  7. Copy the https URL in NGROK, and paste the URL into the following folder (directory): WB-Register -> url_ngrok -> generate_url (Note: url is only valid for one way).

  8. Copy your Telegram Bot API from @BotFather and paste it into the following folder (directory): WB-Register -> multiplatform -> tgbot -> private -> token.txt.

  9. Open your browser, then type a command with the following rules to run the web: [URL Https NGROK]/WB-Register/.

    • Writing example:

    https://e6e5-2001-448a-5021-617-ecb0-7d4d-1d9e-27f2.ngrok-free.app/WB-Register/

  10. Click -> Visit Site.

  11. Open CMD (Command Prompt) and type the command with the following rules to run the bot:
    curl -d url=[URL Https NGROK]/[Folders If Any]/bot.php -X POST https://api.telegram.org/bot[TOKEN]/setWebhook.

    • Writing example:

    curl -d url=https://e6e5-2001-448a-5021-617-ecb0-7d4d-1d9e-27f2.ngrok-free.app/Cryptodax-Bot/bot.php -X POST https://api.telegram.org/bot1496456979:AAE7MCBAeRznBN3G-E4J65GgVYzHo0oZmog/setWebhook 

    • The result will appear (Bot sign is already working / active): {"ok":true,"result":true,"description":"Webhook was set"}.

  12. If you want to complete the running webhook session, then please open the browser by typing the following command:

    https://api.telegram.org/bot[TOKEN]/setWebhook



Issues that frequently arise

  1. Forgot to run apache and sql in XAMPP or there could be a problem in your Ngrok settings. You can see an example of the problem as shown below:

    image

  2. The problem that usually occurs with Botman-based telegram bots is when the user has left the bot for a long period of time, this can cause the API Token to expire. This problem is usually characterized by an abnormal state of the telegram bot, for example when the user gives the command /start or other commands, this bot still does not respond. The solution to this problem is that you only need to create a new telegram bot again (automatically get a new API Token), then for the program code, please set it based on your own needs.

  3. If the problem in point 2 is not resolved, then you should :

    • Delete 3 files in the C:\xampp\htdocs\WB-Register\multiplatform\tgbot directory, namely composer.json, composer.lock, and vendor.

    • Install the Botman depedency via GitBash by giving the following command:

    composer require "botman/driver-telegram"



Website Programming Group

NUMBER FULL NAME NPM
1 Devan Cakra Mudra Wijaya 18081010013
2 Tasya Ardhian Nisaa' 18081010049
3 Susy Rahmawati 18081010048



Highlight

Create Read Update
create read update
Delete Search
delete search
Telegram Bot
TGbot-1 TGbot-2 TGbot-3 TGbot-4 TGbot-5 TGbot-6



Demonstration of Application

Via Telegram: @roboticsupnjt_bot



Appreciation

If this work is useful to you, then support this work as a form of appreciation to the author by clicking the ⭐Star button at the top of the repository.



Disclaimer

This application has been created by including third-party sources. Third parties here are service providers, whose services are in the form of libraries, frameworks, and others. I thank you very much for the service. It has proven to be very helpful and implementable.



LICENSE

MIT License - Copyright © 2021 - Devan Cakra Mudra Wijaya

Permission is hereby granted without charge to any person obtaining a copy of this software and the software-related documentation files to deal in them without restriction, including without limitation the right to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons receiving the Software to be furnished therewith on the following terms:

The above copyright notice and this permission notice must accompany all copies or substantial portions of the Software.

IN ANY EVENT, THE AUTHOR OR COPYRIGHT HOLDER HEREIN RETAINS FULL OWNERSHIP RIGHTS. THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, THEREFORE IF ANY DAMAGE, LOSS, OR OTHERWISE ARISES FROM THE USE OR OTHER DEALINGS IN THE SOFTWARE, THE AUTHOR OR COPYRIGHT HOLDER SHALL NOT BE LIABLE, AS THE USE OF THE SOFTWARE IS NOT COMPELLED AT ALL, SO THE RISK IS YOUR OWN.

wb-register's People

Contributors

devancakra avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.