Connect with us

django

How to use bootstrap with django [2020]

Published

on

bootstrap with django

In this article i will be teaching you how to use bootstrap with django to make our website responsive give our user a better feel while navigating to our website.

So i will be using my exiting website that we have created inside a previous article. you can check that by clicking here as we will be adding bootstrap template into that. So go ahead and do that.

Once you have that website then you need to have a bootstrap template for using inside our website. So i will be using clean blog bootstrap template for this and you can download it by clicking here.

Once you downloaded the theme and you have created your website by reading the article then you are good to go.

Start Adding bootstrap with django:

Unzip the template folder that you’ve just downloaded and copy the css, img, js, scss and vendor folder inside blog/static/blog folder of your website project. Also copy the index.html and post.html files from bootstrap template folder to the project template folder that can be found inside blog application.

Note: Your template and static folder must be inside you blog application folder.

Edit views.py file of you blog application:

just use index.html inside homeView, post.html inside detailView and about.html inside aboutView and rest of the things will be fine. The reason why we are changing the template names is because we are going to use new templates inside our project to make it more cool.

Adding bootstrap to our front page:

Now open up index.html file that you’ve just copied and replace all the code inside that file with the following code.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Your website</title>
  <!-- Bootstrap core CSS -->
  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
  <!-- Custom fonts for this template -->
  <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <!-- Custom styles for this template -->
  <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">Your websiteName</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/home-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="site-heading">
            <h1>Your name</h1>
            <span class="subheading">A blog to talk about things I care.</span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-preview">
          {% for article in articles %}
          <a href="{{article.pk}}">
            <h2 class="post-title">
              <a href="{{article.pk}}">{{article.title}}</a>
            </h2>
          </a>
          <p class="post-meta">Posted by
            <a href="#">{{article.author}}</a>
            on {{article.date}}</p>
            {% endfor %}
        </div>
        <hr>
        <!-- Pager -->
        <div class="clearfix">
          <a class="btn btn-primary float-right" href="#">Older Posts →</a>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright © Your Website 2019</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
  <!-- Custom scripts for this template -->
  <script src="{% static 'js/clean-blog.min.js' %}"></script>
</body>
</html>

Adding bootstrap to our post detail page:

Open up post.html file and add these lines of code to it.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>{{article.title}}</title>
  <!-- Bootstrap core CSS -->
  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
  <!-- Custom fonts for this template -->
  <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <!-- Custom styles for this template -->
  <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">YourWebsiteName</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/post-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="post-heading">
            <h1>{{article.title}}</h1>
            <span class="meta">Posted by
              <a href="#">{{article.author}}</a>
              on {{article.date}}</span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          {{article.content}}
        </div>
      </div>
    </div>
  </article>
  <hr>
  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright © Your Website 2019</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- Custom scripts for this template -->
  <script src="js/clean-blog.min.js"></script>
</body>
</html>

Adding bootstrap to our About page:

Now open up about.html file and add these lines of code to it.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>About yourName</title>
  <!-- Bootstrap core CSS -->
  <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
  <!-- Custom fonts for this template -->
  <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <!-- Custom styles for this template -->
  <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="{% url 'home' %}">YourWebsiteName</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'home' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/about-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="page-heading">
            <h1>About Me</h1>
            <span class="subheading">This is what I do.</span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <p>I am a Programmer</p>
      </div>
    </div>
  </div>
  <hr>
  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle fa-stack-2x"></i>
                  <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright © Your Website 2019</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
  <!-- Custom scripts for this template -->
  <script src="{% static 'js/clean-blog.min.js' %}"></script>
</body>
</html>

Detail about terms used inside above templates

Now as you see that we are using some tags like {% load static %} and {% static ‘some_files’ %} let me explain these to you so that you understand everything.

{% load static %} is basically a syntax to tell django templating engine to load the static files. This became handy whenever we need to use the static files inside our templates.

And {% static ‘url to some files’ %} is used. Because in django we cannot directly give static file urls in html file to load the static asset. instead we need to use static to access static files inside our templates.

Now if you apply the above steps to the exact same website that we have built inside previous article then you should see something like this.

Running our project to see the output:

Run the project by typing. 127.0.0.1:8000 and you will see something like this.

and once you click on some article then you will see a page like this.

Now our website is ready and you can place it on your resume or you are free to use it as your personal website. Upload it on any live server and start writing some articles on this website or place your work on this website. Just do whatever you want to do. And if you got any error then feel free to ask it in the comment section and i will definitely answer.

Continue Reading
1 Comment

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

django

How to Connect django to mysql in ubuntu[2020]

Published

on

By

Connect Django to MySQL is required because the database that comes with Django by negligence is sqlite3. Sqlite3 is a database that can be used inside small apps and outlines. But when it comes to exhibiting some high-quality apps/web apps in Django, it became wanted to connect it with a good database that can handle a large amount of data. In this post, we are working to do that.

To rise connecting our Django project to the database, you should oblige Python, Django, and XMPP server installed on your system.

To install xampp on your system, you must download the app and next install it inside your system. Here is an expeditious guide to installing xampp on your ubuntu running system.

You can likewise install the virtual environment and Django by following this example.

If you have Django and app installed on your system, suddenly, you can start to connect Django to MySQL.

Create a new project in Django:

To build a new project in Django, type the following commands in your terminal.

Django-admin start project MySQL connection

Open up xampp and run everything the services.

Once you do that, go to localhost/PHPMyAdmin and generate a new database.

I will name it a MySQL connection, and you can call it whatever you need.

Once you function to create, then you are good to go. You don’t need to change anything there.

Startup settings.py file inside your Django project and move to the following part.

By default, our Django project is pointing to the sqlite3 database, and we require to improve this to manage a MySQL database. So let us go ahead and replace all of this text with the following code.

Once you change these settings, then you are good to go.

Now Save all the settings and open up the terminal and type the following command.

python manage.py migrate

Everything is running fine, and if you go to PHPMyAdmin, you would reasonably see something like this.

You see that all the tables are favourably created. Thanks for reading this comprehensive post. If you have any questions, you can ask me in the comment section. Thanks.

Continue Reading

django

5 amazing books to read as a django developer [2020]

Published

on

By

In this chapter, I will talk about five superb books to learn as a Django developer in 2020. So let us perceive started.

As you all might know that books play a significant role in learning anything weather, it is about the stock market or any other field like programming. So as readers have a significant role in learning to program quickly and efficiently, we will be discussing five amazi////////ng books to read as a Django developer in 2020 because Django is a high-level framework. If you want to master it, then you should probably go with the books written by Django experts to learn the crucial topics of Django.

My no. 1 advice for Django beginners:

Before diving into the books list first, let us discuss what a beginner should do when starting Django development.

When You are starting in Django, then you should go with its Documentation.

Because Django has very comprehensive and clear Documentation and you could see a lot of Documentation. But that Documentation is written professionally, and as a beginner, you might be stuck. So here is the list of books you might concern when you are starting in Django development.

Learn through building projects in Django:

While you are learning to program, you might not follow some professional practices that will lead you to be good. To understand the important stuff that you will need to use in some professional projects, you should start to learn to code by building projects.

I have some cool projects that I write about so that beginners in Django and intermediate-level programmers benefit. Here is the list of some cool projects that I recommend you start building with.

i – Create your website with Django: you can get the tutorial by clicking here.

Ii – Create a resume builder website with Django: Here is the complete tutorial you can follow.

Iii – How to use bootstrap with Django: This post will teach you the best way to use bootstrap with your Django projects to make them responsive. Could you get it here?

Also, I have prepared a list of projects that you can build right now. You can check that complete article here.

Now you can begin with the list of notable books for you to be good at Django.

A list of 5 Amazing books you should read as a Django developer.

Book # 1:

Django for Beginners (best book on this list):

The best book on Django is Django for beginners by William S. Vincent. I kept this book on top of the list because it is hugely summarized and very comprehensively explained all the topics for beginners. This book starts with a beginner teaching the basics of Django. It then moves you around some high-level programming in the Django framework whenever you feel comfortable in Django development. In short, it will teach everything you need to become a master in the Django framework.

Book # 2:

Django 2 web development Cook Book:

The next great book on this list is also a very great book for beginners. Jake Kronika writes it, and it also covers a lot of beginner stuff. This book talks about Django 2, but the logic builds through this book can be used inside Django 3.

Book # 3:

Django 2 by Example:

Antonio Mele writes this book, and it is one of my favorite books because it starts with build the projects, and then by the end of building many projects taught in this, you will eventually become a master in Django.

Book # 4:

Two Scoops of Django:

Another favorite book of mine is Two scoops of Django, and it is a bit older. It only talks about Django 1.8, but the logic you will learn in this book can be implied in the latest versions.

Book # 5:

The definitive guide to Django:

This book is also very informative if you want to learn about Django web development from start to end. Once you finish reading and practicing the lessons inside this book, you will have a thorough understanding of how Django works.

I hope you have enjoyed reading this tutorial now; if you have any questions, please ask them in the comment section, and I will answer. You can also check out the post about Django books by data-flair here. Thanks.

Continue Reading

django

Amazing Project ideas for beginners in django [2020]

Published

on

By

django

Hi, in this article, I will introduce you to some of my Amazing project ideas for beginners in Django, So lets get started.

Remember one thing in mind you cannot proceed further without doing projects and practicing much in the language or framework you are working on. Once you do some tasks, eventually, your knowledge will become apparent, and you will start doing what you want to do in programming.

Now you might know the importance of doing projects in Django. Let us Discuss some Amazing project ideas for beginners in Django.

No 1: Build a TodoList App

While building this project, you will learn quite a lot in Django because it will give you in-depth knowledge of how everything fits in Django. After all, you will be using HTML, CSS, and javascript with Django to make your to-do list app cool, and you will learn a lot.

No 2: Build Your Blog Using Django:

Importance of building your blog for being programming is even more. Because by having a blog, you can share your thoughts with others, and you will learn a lot. If you want to do a project using Django, then you should go with making your blog.

No 3: Build a Personal website using Django:

This is quite similar to the application above because you can embed your blog inside a static home page website. So here is my advice for creating your website.

Try to create a website with a static homepage and create contact and about us pages. Then create a blog application and embed it inside your website. In this, your website will look more professional, and you will learn many fundamentals of Django by building this project. So go ahead and do that. I have a pretty great tutorial on this project, and you can reference that tutorial by going to the below link.

My website tutorial link: click here.

No 4: Build your portfolio Website:

Let me introduce you to what a portfolio website is:

A portfolio website is simply a website where you can showcase your work. Try to make a website where you will tell other people what you can do and post some of your projects there.

I have a comprehensive tutorial on this project as well, and you can check that as well.

No 5: Build an Ecommerce Website:

Building an eCommerce website in Django can be challenging, and it will also help you make a strong logic about building an eCommerce website using Django. Try to make a simple online shop and add cart options to it, and then you can use this application to sell your projects online.

You can also read 12 project ideas by pythonistaplanet by clicking here.

I hope you have quite a good knowledge of how to think for a project and start building it. If you have any questions or queries, then feel free to ask in the comment section, and I will answer. Thanks.

Continue Reading

Trending