To create a UX design and develop a web application for event registration.
Requirement collection.
Creating the layout using HTML and CSS.
Updating the sample content.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Create a database model and migrate the database.
Retrieve data from database and display it in a webpage.
Publish the website in the given URL.
create a UX design for the web application.
Choosing the suitable color scheme
Creating artboards for individual pages
Designing layout for individual pages
Creating links and linking it with artboards
Preview the prototype.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="cotainer">
<h1 class="display-4">Working on IOT</h1>
<p class="lead">It fulfills the need of people in storing important data. </p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1>One day workshop on internet of thing</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="/register/" class="btn btn-primary btn-lg" role="button">Register</a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Event Register</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid" style="background-color:orange;">
<div class="container text-center">
<img class="card-img" src="/static/img/sec.jpg" style="width: 100px; height: 100px;" alt="Card image cap">
<h1>Saveetha Engineering college</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Application</h1>
</div>
</div>
<form action="/register/" method="POST">
{% csrf_token %}
<div class="container display-4 text-center" style=color:green >
<div class="form-group">
<label for="username">NAME</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="phone">MOBILE</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your Phone.no">
</div>
<div class="form-group">
<label for="email">EMAIL</label>
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="institution">institution</label>
<input type="text" class="form-control" id="institution" name="institution" placeholder="Institution name">
</div>
<div class="col-12 text-center">
<input type="submit" class="btn btn-primary btn-lg" aria-pressed="true"></a>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Event Register</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid" style="background-color:orange;">
<div class="container text-center">
<img class="card-img" src="/static/img/sec.jpg" style="width: 100px; height: 100px;" alt="Card image cap">
<h1>Saveetha Engineering college</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Application</h1>
</div>
</div>
<form action="/register/" method="POST">
{% csrf_token %}
<div class="container display-4 text-center" style=color:green >
<div class="form-group">
<label for="username">NAME</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="phone">MOBILE</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Enter your Phone.no">
</div>
<div class="form-group">
<label for="email">EMAIL</label>
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="institution">institution</label>
<input type="text" class="form-control" id="institution" name="institution" placeholder="Institution name">
</div>
<div class="col-12 text-center">
<input type="submit" class="btn btn-primary btn-lg" aria-pressed="true"></a>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
from django.shortcuts import render
from .models import participant
# Create your views here.
def home(request):
context = {}
return render(request, 'events/home.html', context)
def register(request):
context = {}
if request.method == 'POST':
p1 = participant()
p1.username = request.POST.get('username', '-')
p1.email = request.POST.get('email', '-')
p1.phone = request.POST.get('phone', '000')
p1.institution = request.POST.get('institution', '-')
if len(participant.objects.all()) >= 5:
return render(request,'events/failed.html', context)
else:
p1.save()
return render(request,'events/success.html', context)
if request.method == 'GET':
context['username'] = ''
context['email'] = ''
context['phone'] = ''
context['institution'] = ''
return render(request, 'events/register.html', context)
def listofparticipants(request):
context = {}
context['participant'] = participant.objects.all()
return render(request, 'events/listofparticipants.html', context)
![output](./static/img/list of participants.png)
Thus, a UX design and web application for event registration has been developed and is hoisted in the URL http://adityajv.student.saveetha.in:8000/home/ and http://adityajv.student.saveetha.in:8000/listofparticipants/ . GitHub Repo URL is https://github.com/adityajv2310/eventregistration .