ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Web Dev Bootcamp TIL Day-11(Djangogram fin.)
    TIL 2022. 5. 2. 14:26

    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 %}

     

Designed by Tistory.