Web Dev Bootcamp TIL Day-11(Djangogram fin.)

Navigation Bar

 

Bootstrap Nav Bar + Google Material Icons + CSS Flexbox

Models created in content application

class Feed(models.Model):
    content = models.TextField()
    image = models.TextField()
    profile_image = models.TextField()
    user_id = models.TextField()
    like_count = models.IntegerField()

class Recommendations(models.Model):
    profile_image = models.TextField()
    real_name = models.TextField()
    user_id = models.TextField()

database generated when migrating Recommendations model from content application

 

using embed Python in HTML to connect DB to frontend

 

Feed w/ carousel feature and fixed nav & recommendation bar

 

{% for feed in feed_list %}
 <div class="border feed_box">
   <div class="feed_name">
     <div class="profile_box">
       <img class="profile_img" src="{{ feed.profile_image }}">
     </div>
     <span class="feed_name_txt"> {{ feed.user_id }}</span>
   </div>

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img class="d-block w-100" src="{{ feed.image }}" alt="First slide">
     </div>
     <div class="carousel-item">
       <img class="d-block w-100" src="{{ feed.image }}" alt="Second slide">
     </div>
     <div class="carousel-item">
       <img class="d-block w-100" src="{{ feed.image }}" alt="Third slide">
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>

   <div class="feed_icon">
     <div>
       <span class="material-icons-outlined">
         favorite_border
       </span>
       <span class="material-icons-outlined">
         mode_comment
       </span>
       <span class="material-icons-outlined">
         send
       </span>
     </div>
     <div>
       <span class="material-icons-outlined">
         turned_in_not
       </span>
     </div>
   </div>
   <div class="feed_like">
     <p class="feed_txt"> <b>좋아요 {{ feed.like_count }}개</b></p>
   </div>
   <div class="feed_content">
     <p class="feed_txt"> <b> {{ feed.user_id }} </b> {{ feed.content }}</p>
   </div>
   <div class="feed_reply">
     <span class="feed_txt"> <b> Kimmy_Jay </b> Rest in peace brother. </span>
     <span class="feed_txt"> <b> code_kunst </b> You gotta check out my beats! </span>
   </div>
 </div>
{% endfor %}