IIITD's Robotics Club Website

Website for IIITD's Robotics Club

As a part of our mini-project, we made a website for IIIT Delhi's Robotics Club.

Our Motivation

Robotics Club of IIIT Delhi has been recently formed by a group of students who are passionate about robotics and inspired by our enthusiastic instructor Ms. Jyoti Sinha. The primary goal of any club formed is to promote more participation in it and to get the work of the club members acknowledged by people inside as well as outside campus. And in today’s world, the fastest way to achieve these goals is through the internet. So, we decided to make a website-cum-blog for the Robotics Club which will showcase the projects developed and activities hosted by the club with latest updates about the club being posted by its members.

Note: The website was created not with the intention of creating a webapp for interaction between the members but a showcase website for the Robotics Club, where users can showcase their projects, upcoming events can be published, and members can post tutorials and blog posts to help young enthusiasts (like us) learn in the field of robotics.


Tools and languages used

Any responsive website has 2 components namely Frontend and Backend. In layman’s terms Frontend is what you see and the backend defines how it works. Because of the difference in their functionality, different tools and languages are used for both. Following are the tools that we have used-

Frontend

Bootstrap

We used Bootstrap for designing frontend. Bootstrap is a framework that gives us the power to make complex web designs easily.

Backend

PHP & MySQL

We used PHP for backend. PHP is a server side scripting language is used to create dynamic contents that interact with databases. So, basically in a web app, we take input from the user/client using PHP which is then stored in a database connected to the PHP file and can be used later. We used MySQL as our database system as it can used with PHP. When the user enters the data in a form on the website, the data gets stored in the MySQL database. This data can then be accessed from the database by writing an SQL query or request.


How it works

A bootstrap template contains the basic UI design components and basic page structure, which is then recoded to design a website beautifully. To design the website in a specific way we have to change a few attributes and properties of the elements in the CSS sheets to create new components and successfully render these components on the web browser.

The website has a blog in which the members can post stuff related to their research or the projects which can be a benefit to other people in or outside the group. Blog can also be used to post announcements about the working and the functioning of the club. To add a blog post members will have to login into another website specifically made for this purpose and can post posts freely and easily. Club admins can also from the same backend site post about the upcoming events. The backend website is written completely in PHP.

All the posts, events and project details are stored in different tables in a MySQL database. Through php it is requested through SQL commands and is displayed. To edit, or create a new post a minimalistic theme is used, which sends and receives different SQL queries and gets or changes the data.


Navigating through the Website…

What you see in the following Pictures is how the website appears to be! (Click on the Pictures to see the full size) or see the website's minimalist live demo @ [http://roboclub.netai.net/roboclub/]

The Home page displays the name of the Robotics Club, slide show of 3 pictures, the latest blog post and the upcoming event. It also has links to other pages like About, Blog, Events, Projects, Members and How to Join in the navigation bar present at the top.

h1.png

The About Page consists of the brief description of the club along with Names and Pictures of the club Admins and the details of the procedure to join the club. It also has link to the page having the names of all the members of the club.

a1.png

The Events page displays a list of the upcoming events and past events with a brief description about them. Clicking on the Read More button shall provide you to a page giving detailed description of the event.

e1.png

The Projects page displays a list of completed projects and the projects which are still under development with a brief description them. Clicking on the Read More button shall provide you to a page giving detailed description of the project. There is a link provided for the project's own website (if there is any).

p1.png

The Members page displays a list of members of the club. It also consists of a link to an attendace sheet (an excel sheet - Not attached till now)

m1.png

The Blog page (Key feature of website) displays the list of blogs posted by the club members. The Read more option shows the entire post.

b1.png

NOTE: This the basic layout of the website. It can be browsed but only the members can post onto the blog. Also this site will be functioning fully after the robotics club is up and running.
A Sample site is currently hosted at [http://roboclub.netai.net/roboclub/]


Project By

The website is developed by

Palash Ranjan Bansal (2014072)

Sahar Siddiqui (2014091)

Rishi Mohan (2014087)


Special Thanks

The Bootstrap theme being used in the website is based on the theme by [http://startbootstrap.com/]
The images used in the sample website and posts are taken from [http://bostondynamics.com/]

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