GAMA

+ INTRODUCTION

GAMA is an initiative taken up by IIITD students to create a blogging platform to help bloggers, readers and critics to interact with each other. The main catch of GAMA is photo blogs which will help budding photographers to show their prowess in photography.

Screenshot_27.png

+ OBJECTIVE

The main goal of doing this project was to understand, learn and gain knowledge about how to create a website.

+ TEAM MEMBERS AND OBJECTIVES

NAME RESPONSIBILITIES
Gargi Gupta Front end coding, Site Layout Design, Content Writing, Wikipage
Aditi Bainss Front end coding, Site Layout Design, Content Writing, Wikipage
Manik Arora Back end coding, Site Layout Design, Handling database, Hosting
Akarsha Sehwag Back end coding, Site Layout Design, Graphic Design, Touch Ups

+AREA AND INITIAL PLANNING OF THE WEBSITE+

After several deliberations in deciding the theme for our website, we finally settled on a blogging website. We started brainstorming to decide what type of blogging website we should create. Different types of blogs differ in not only the content but also the way in which the content is delivered or written. Having a blogging website with different genres seemed like a very elaborate and interesting way to showcase the blogs, so we decided to do it that way.

The four of us sat down and finalized the site layout design. The initial structure for the homepage is shown in the given picture-

Aotm6ft9_Ks_Tr_LGU6_Bal5i_WMt5_PWx_VCR_1l_X2_Loa_Mdi_L.jpg

+TOOLS, LANGUAGES AND PLATFORM USED FOR DEVELOPING AND HOSTING THE WEBSITE+

For developing the website, we used the following languages and platforms:

  • html
  • css
  • Python
  • Django

Tutorials from codecademy, the official Django website and several Youtube videos helped us a lot in learning the languages and the web framework.

For hosting the website: The url of th website it: http://maniaxiom.pythonanywhere.com/

We used localhost to host our website.

+STEP-BY-STEP LEARNING JOURNEY ALONG WITH SNIPPETS AND SCREENSHOTS+

$ The work was divided equally amongst the four of us with two preparing for the front end by learning new concepts and revising the earlier known ones in html and css and the other two starting to learn Django for the back end.

$ We went through several tutorials online to get acquainted with the concepts. It took us a few days to properly understand most of the techniques that have actually been used in our code.

$ We started with writing the code (front end) for the homepage of our website. We kept in mind the original framework that had been decided for the homepage.

$ We had to start working on the links i.e. redirecting to other web pages. That included making html files for the different categories- Home, Contact Us, Books, Travel etc. We decided not to use any templates and write the entire code from scratch. Meanwhile the other two were going through Django concepts. The snippets of the code along with the screenshots of the webpages are given below:

home.png

$ A snippet of the css code:

homecss.png

$ A screenshot of the web page for the " Books " category of blog:

books.png

$ A screenshot of the Home Page:

home.png

$ After the static webpages were up and ready, the other two of us, who were working on Django started implementing it by linking several files and turning the website dynamic. The database for uploading blogs was made.

Several snippets of the Django codes, css codes, python codes etc can be seen below:

class Travel(models.Model):
    author = models.ForeignKey('auth.User')
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default = timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)
    tags = models.CharField(max_length=300,default="#travel")
<div class="plist">

            <h1><a href="{% url "post_details" pk=post.pk %}">{{ post.title }}</a></h1>
            <p font-size=30px>{{ post.published_date }}    </p>
            <p>{{ post.text|linebreaks }}</p>
            <h4 style="color:#0000ff; text-align:center ">{{ post.tags }}</h4>
        </div>
div {
      text-align: center;
      line-height: 40px;
    font:25px;
    font-family: Verdana,sans-serif;
    float: left;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}
#A {
    width:140px; 
    height:45px; 
    background-color:#abcdef;
    margin-top: 15px;
    margin-left:40px;
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License