Coders Packet

A Webform created using Python, HTML, CSS, jQuery, Bootstrap, and JavaScript

By Ashish Kumar

  • YourIssue/
  • A webform using Python, HTML, CSS, JQuery, Bootstrap, and JavaScript to solve your issue.

    We face small or big problems working in an organization and sometimes we don't know who is the appropriate person to approach. The cool idea to solve this problem is to design a form where we can submit our problem and we will get the appropriate solution or suggestion at the earliest.

    So, I have designed a form using Python, HTML, CSS, Jquery, Bootstrap, and JavaSript. It contains input fields as username, name, email, and issue. Once the form is filled it will be submitted using the submit button. Once the form is submitted the data entered will be stored in the MongoDB database. The proper solution or suggestion will be provided at the earliest by the required person.

    Programming Languages used?

    Python

    HTML

    CSS

    Javascript

    Jquery

    Bootstrap

    Structure of the folders and the files?

    All the files and the folders are stored inside the YourIssue folder. "YourIssue" folder contains the Controller.py file (The main python file to start the server and have all the routing information), Views directory (which contains Templates directory), static folder (which contains Bootstrap and javascript file), and Models folder (which contains __init__.py and RegisterModel.py file). "Templates" folder contains MainLayout.html file (which is a dynamic HTML file and all the other pages are loaded inside it), Register.html file(which contains the structure of the form), and Success.html file (which contains the structure of success file). Scripty.js and swag.css files inside the static folder contain the required javascript and CSS codes. RegisterModel.py file is used to store information in the database.

    How to run the project?

    To run the project we should have MongoDB installed in our system. It should be in the running stage. We should download and unzip the attached zip file. We should run the command "python Controller.py" to start the server at 8080 port. We can use the Anaconda PowerShell prompt to run the file with the name "Controller.py". Once the server is started we should open Google Chrome and type the URL "localhost:8080" to render the form. Once the form is rendered we should fill it nicely and submit it. After submission, we can open Robo 3T to see the required output/submitted data.

    Controller.py file contains the following code: -

    import web
    from Models import RegisterModel
    
    urls = (
        '/','Home',
        '/postregistration','PostRegistration',
        '/success','Success'
    )
    
    render=web.template.render("Views/Templates", base="MainLayout")
    app=web.application(urls,globals())
    
    class Home:
        def GET(self):
            return render.Register()
    
    class Success:
        def GET(self):
            return render.Success();
    
    class PostRegistration:
        def POST(self):
            data=web.input()
            reg_model=RegisterModel.RegisterModel()
            reg_model.insert_user(data)
            return data.username
    
    if __name__=="__main__":
        app.run()

    The above-mentioned Python code is used to start the server. It is also used to do routing mechanisms.

     Scripty.js file contains the following code: -

    $(document).ready(function(){
        console.log("loaded");
        $.material.init();
    
        $(document).on("submit", "#register-form", function(e){
            e.preventDefault();
            alert("success");
            var form = $('#register-form').serialize();
            $.ajax({
                url : '/postregistration',
                type: 'POST',
                data: form,
                success: function(response){
                    console.log(response);
                }
            });
            window.location.replace("/success");
        });
    });

    The above-mentioned JavaScript code is mainly used to perform backend asynchronous processes and to route to '/success' once the form submission is successful.

    RegisterModel.py file contains the following code: -

    import pymongo
    from pymongo import MongoClient
    import bcrypt
    
    
    # Create a class for our model
    class RegisterModel:
        def __init__(self):
            # mongodb initializations 1.You need to start mongo client, 2.create a collection 3.add entry to the collection
            self.client = MongoClient()
            self.db = self.client.yourIssue
            self.Users = self.db.users
    
        # Grab and store the information entered by user into database
        def insert_user(self, data):
            id = self.Users.insert({"username": data.username, "name": data.name, "email": data.email, "issue": data.issue})
            print('uid is ', id)

    The above-mentioned RegisterModel.py code is used to initialize and connect to the Mongo database. It is also used in storing the data entered by the users to the database. 

    Success.html file is used to show the success message on successful submission of the form and it contains the following code: -

     
     
     

    Success

    Successfully Received Your Submission, Thank You!

     

     

    __init__.py file is an empty file. Other HTML and CSS files are included in a zip folder and are self-explanatory.

    Thank you!

    Download Complete Code

    Comments

    Comments for the packet "A Webform created using Python, HTML, CSS, jQuery, Bootstrap, and JavaScript ";
    No comments yet