May-01-2021, 03:25 PM
I am trying to create a simple webpage following an online instructor.
He is using bootstrap, jQuery, Ajax, MongoDB.
The instructor has no forms/GitHub account nor available for any kind of real-time support.
I got the course for free and decided to follow through as I don't travel to the office due to the Covid pandemic, giving me some spare time.
Posting the code below.
Using Ajax to perform actions
He is using bootstrap, jQuery, Ajax, MongoDB.
The instructor has no forms/GitHub account nor available for any kind of real-time support.
I got the course for free and decided to follow through as I don't travel to the office due to the Covid pandemic, giving me some spare time.
Posting the code below.
Using Ajax to perform actions
$(document).ready(function(){
console.log("loaded");
// $.material.init();
$(document).on("submit", "#register-form", function(e){
e.preventDefault();
var form = $('#register-form').serialize();
$.ajax({
url: '/postregistration',
type: 'POST',
data: form,
success: function(response){
console.log(response);
}
})
});
});Main file controlling the flowimport web
from models import RegisterModel
urls = (
'/', 'home',
'/register', 'register',
'/postregistration', 'PostRegistration'
)
render = web.template.render("views/templates", base="MainLayout")
app = web.application(urls, globals())
# Classes/Routes
class home:
def GET(self):
return render.Home()
class register:
def GET(self):
return render.Register()
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()To store the details submitted in the form to the MongoDBimport pymongo
from pymongo import MongoClient
class RegisterModel:
def __init__(self):
self.client = MongoClient()
self.db = self.client.codewizard
self.Users = self.db.users
def insert_user(self, data):
id = self.Users.insert({"username": data.username, "name": data.name, "password": data.password, "email": data.email})
print("UID is ", id)HTML file <html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Wizard</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/css/bootstrap-material-design.scss" />
<link rel="stylesheet" href="static/css/_ripples.scss" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="static/js/script-ajax.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script type= src="static/js/bootstrapMaterialDesign.js"></script>
<!--<script src="static/js/ripples.min.js"></script>
$if self.css:
$for style in self.css.split():
<link rel="stylesheet" href="$style" />
$if self.js:
$for script in self.js:
<script src="$script"></script>
-->
</head>
<body>
<div id="app">
<div class="navbar navbar-info navbar-fixed-top bg-warning">
<div class="navbar-header">
<a class="navbar-brand">CodeWizard</a>
</div>
<!--
<ul class="nav navbar-nav">
<li><a class="waves-effect" href="/">Home feed<div class="ripple-container"></div></a></li>
<li><a href="/discover">Discover<div class="ripple-container"></div></a></li>
<li><a href="/profile">Profile<div class="ripple-container"></div></a></li>
<li><a href="/settings">Settings<div class="ripple-container"></div></a></li>
</ul>
-->
<ul class="nav nav-tabs">
<li class="nav-item ">
<a class="nav-link" href="/">Home feed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/discover">Discover</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings">Settings</a>
</li>
</ul>
<div class="pull-right bg-warning">
<a href="/register" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Register</a>
</div>
</div>
<br /> <br />
$:page
</div>
</body>
</html>HTML file<div class="container">
<h2>Register Account</h2><br />
<form id="register-form">
<div class="form-group label-static is-empty">
<label for="username" class="control-label">Username</label>
<input id="username" class="form-control" type="text" placeholder="Choose a username" />
</div>
<div class="form-group label-static is-empty">
<label for="display_name" class="control-label">Name</label>
<input id="display_name" class="form-control" type="text" placeholder="Enter your full name" />
</div>
<div class="form-group label-static is-empty">
<label for="email" class="control-label">E-mail</label>
<input id="email" class="form-control" type="email" placeholder="Enter your E-mail" />
</div>
<div class="form-group label-static is-empty">
<label for="password" class="control-label">Password</label>
<input id="password" class="form-control" type="password" placeholder="Create a password" />
</div><br />
<button type = "submit" class="btn btn-info">Submit</button>
</form>
</div>HTML file<div class="container">
<h1> Hello Code Wizard </h1>
</div>I'm getting the 500 (Internal Server Error) error as below after I run the main program and try to submit the form from localhost:8080Error:POST http://localhost:8080/postregistration 500 (Internal Server Error)
