-
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 %}
'TIL' 카테고리의 다른 글
Web Dev Bootcamp TIL Day-13 (JWT & ERD) (0) 2022.05.05 Web Dev Bootcamp TIL Day-12 (Flaskgram Clone Start) (0) 2022.05.04 Web Dev Bootcamp TIL Day-9(Djangogram Start) (2) 2022.04.28 Web Dev Bootcamp TIL Day-8(Python Basics/ Flask Review/ Git Crash Course) (0) 2022.04.27 Web Dev Bootcamp TIL Day-7(Game Project Cont.) (1) 2022.04.26