Website Design For IIITD robotics Club

Major Components

What we have made is a dynamic website to fulfill the requirements of robotics club. Dynamic websites have two important components:
Front-End: How the website looks
Back-end: how should website work behind the scenes when a user access it

Languages and Platform used

To design the website we have used HTML, CSS, and Javascript to make it look the way we want, and for back-end we have used the platform Django.

  • Photoshop: To design the logo for robotics club
  • HTML: Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. A web browser can read HTML files and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language rather than a programming language.
  • Cascading Style Sheets: CSS gives the HTML coding colors, format and design.HTML and CSS tutorials are available at “W3SCHOOLS.
  • JS: Javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers. JS is solely responsible for the animation in the website.
  • DJANGO: Django is a high level python web framework that encourages rapid development and clean, pragmatic design. The official documentation teaches django very well and is available to public at “DJANGO PROJECT”. We installed Django platform on our machine and started working on it.

There are no hardwares used apart from our laptops, but among the softwares we have used the most important tool notepad to write code for the website and xampp to host local server for the website.
<br>
<br>

Back-end Details

Django is a high level opensource Web Framework written in Python. It strictly follows the MVC paradigm. It makes the process of creation of database driven web applications very easy. There are three main components:

  • Models

Django comes with an inbuilt object-relational mapper which enables you to describw your sql tables in python. Being an object oriented language, django allows you to define models as classes, and then declare objects of the class. So each of your object is actually a tuple in the table.
lKh55Wy.jpg

  • Views

They are functions which define how the request will be handled, how it will be redirected and how the data will be presented. It involves fetching the data from the database, manipulation on the data and then presentation of the data.
yR883FX.jpg

  • URLS's

They decide which view has to be called when a request is sent to a particular URL.
ghWeiZu.jpg

  • Templates

They are the static files which are visible to a user. Only this part of the code is availible to the user.

We used Jinja to represent the data sent by the views. Jinja is a template engine for the Python programming language. It is similar to the Django template engine but provides Python-like expressions while ensuring that the templates are evaluated in a sandbox.
uQnlWWr.jpg

Further the following libraries are necessary to run the program

  • Django-Social-Oauth

It is a library which allows us to use other social networking web applications such as facebook or google to keep track of the users.

  • Django-bootstrap-form

It is a library which allows us to integrate twitter bootsstrap with inbuilt Django forms.

Front-End

Features of website:
For General Public

  • This how Main page of the website looks like:
8z3w7h4.png
  • There are many slider pages for description, they are on slide-show mode by default. We can switch by clicking tabs on the right and left of the slider
NO2Bz9v.png
  • Page about the purpose of the Robotics Club
Vfxa3jK.png
  • Can read all the announcements started by admins of the website
S9a0za0.png

For Admins:

  • On the right side of the page, all the details of the user is mentioned. Name, Institute, role(Admin/Member), Roll number, Course, and email-ID. In the home page, we can see three forms, each for Skills, Interests, and projects.
Ijg6H77.png
Here admins can make their semi-CV for themselves
  • When we click on view skills, thereby opens a text box, where we can add our skills.
gmQb5Ds.png
  • Once a skill is added is added it will appear in the list of “Your Skills”.
bRNK4vk.png
  • In the similar fashion we can add projects on our profile. In project section, we can add the title of the project, it’s description and the status of the project.
n31ZIgM.png
  • If the project is complete then completes else, undergoing.
DsCL5nU.png
  • Once added, it will be visible in the projects list of the admin.
VtlKjTz.png
  • To start a discussion, go to “forum” tab in the nav bar. Here we can add Title of the discussion with it’s description.
KAdb5H8.png
  • Here we can see all the discussions.
4gC5Fgn.png
  • By clicking on any discussion we are redirected to the page of that discussion have it’s full details and comments by different members.
aEYhlvQ.png
  • Admin can also comment on the discussion.
lX6EZQB.png
  • All the announcements are visible in the announcement tab, Admin can give announcements which will be visible to everyone.
HVow4Q1.png
  • Admins have right to add users and delete existing members.
J4hZ0tx.png
  • From all users section, admins can view everyone’s profile, their skills, interests, and projects.
rbzCUow.png
  • Admins can create a event, such as workshops or meetings
Fc7m0sQ.png
  • Admins can add a member or another admin by email id and selecting the role.

For Members:

  • Members can be made by the admins only, but they can edit their own profile.
gugsRTL.png
  • Just like admins members can also make a small CV here of their skills, interest and their projects.
MC8ZW1Q.png
  • They can read all the discussions, comment on any discussion and can even start a new one.
UHrkSqg.png
  • Members can view profiles of other members and admins present but can neither add or delete anyone.
bueXSLd.png
  • Members can see all the announcements, but cannot raise one
xU8lr79.png
  • Members can see all the events but can not organize any event
8yd21v5.png
  • There is no limit to the number of members of the club.

Credits

  • Kushagra Singh: Handled the back-end part of the website using Django. Ability of the website is be dynamic could not be done without him. The admin system required for the website.
  • Varun Bansal: Made the webpages, designed the look of the website, written code in HTML, CSS and JS. Made the logo for robotics club. Finally made the WIKI Page.

Github Repo

[https://github.com/er-varunbansal/RoboticsClubOnWeb.git]

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License