Built Template,View,and URLS, as well as CSS for the website.

README.txt

+Tan, Andre Dalwin C.
+215736
+CSCI 41 C
+Lab 3 - My Favorite Books and Authors
+Submitted March 28, 2023
+
+This project is done completely by me by using prior knowledge and the modules. Let this document serve as my signature as well.
\ No newline at end of file

bookshelf/models.py

 from django.db import models
 
+from django.urls import reverse
+
+
+
 # Create your models here.
 
 class Author(models.Model):
@@ -10,6 +14,10 @@ class Author(models.Model):
     bio = models.CharField(max_length=700)
     def __str__(self):
         return (self.first_name+" "+self.last_name)
+    
+    def get_absolute_url(self):
+        return(reverse('author_detail', kwargs={'pk' : self.pk}))
+
 
 
 class Books(models.Model):
@@ -20,4 +28,7 @@ class Books(models.Model):
     ISBN = models.IntegerField()
     blurb = models.CharField(max_length=700)
     def __str__(self):
-        return (self.title)
\ No newline at end of file
+        return (self.title)
+    
+    def get_absolute_url(self):
+        return(reverse('book_detail', kwargs={'pk' : self.pk}))

bookshelf/templates/bookshelf/authors.html

+{% extends 'base.html' %} 
+
+{% block title %} My Favorite Authors {% endblock %} 
+{% block content %}
+
+<h1>DrizzyDre's Favorite Authors</h1>
+<ul>
+    {% for object in object_list %}
+    <a class="name" href="{{object.get_absolute_url}}">
+        <li>{{object.first_name}} {{object.last_name}}</li>
+    </a>
+    {% endfor %}
+</ul>
+
+<section class="footer">
+  <a href="/home">Home</a>
+  <a href="/books">Books</a>
+</section>
+{% endblock %}

bookshelf/templates/bookshelf/authors_details.html

+{% extends 'base.html' %} 
+
+{% block title %} {{ object.first_name }} {{ object.last_name }} {% endblock %} 
+{% block content %}
+<section class="info">
+    <div class="author">
+        <h1>{{ object }}</h1>
+        <ul class="details">
+            <li>{{ object.age }}</li>
+            <li>{{ object.nationality }}</li>
+            <li>{{ object.bio }}</li>
+        </ul>
+    </div>
+</section>
+
+
+<div class="author-book">
+  <h1>Books by {{ object }} I love:</h1>
+  <ul>
+  {% for book in object.books_set.all %}
+  <a href="{{book.get_absolute_url}}"><li>{{book.title}}</li></a>
+  {% endfor %}
+  </ul>
+</div>
+
+<ul class="footer">
+  <a href="/home">Home</a>
+  <a href="/books">Books</a>
+  <a href="/authors">Authors</a>
+</ul>
+
+{% endblock %}

bookshelf/templates/bookshelf/book_details.html

+{% extends 'base.html' %}
+
+{% block title %} {{ object.title }} {% endblock %}
+{% block content %}
+<section class="info">
+    <div class="book">
+        <h1>{{ object.title }}</h1>
+        <ul class="details">
+            <a href="{{object.author.get_absolute_url}}">
+                <li>{{ object.author }}</li>
+            </a>
+            <li>{{ object.publisher }}</li>
+            <li>{{ object.year_published }}</li>
+            <li>{{ object.ISBN }}</li>
+            <li>{{ object.blurb }}</li>
+        </ul>
+        </div>
+</section>
+
+
+<section class="footer">
+    <a href="/home">Home</a>
+    <a href="/books">Books</a>
+    <a href="/authors">Authors</a>
+</section>
+{% endblock %}
\ No newline at end of file

bookshelf/templates/bookshelf/books.html

+{% extends 'base.html' %} 
+
+{% block title %} My Favorite Books {% endblock %} 
+{% block content %}
+
+<h1>DrizzyDre's Favorite Books</h1>
+<ul>
+    {% for object in object_list %}
+        <a class="name" href="{{object.get_absolute_url}}">
+            <li>{{object.title}}</li>
+        </a>
+    {% endfor %}
+</ul>
+
+<section class="footer">
+    <a href="/home">Home</a>
+    <a href="/authors">Authors</a>
+</section>
+{% endblock %}

bookshelf/templates/bookshelf/home.html

+{% extends 'base.html' %} 
+
+{% block content %}
+<section class="info">
+    <h1>Welcome to DrizzyDre's Database of Favorite Books and Authors!</h1>
+    <p>
+        I do not read books as much as I would like to. 
+        This is why the books listed down are full of b*#ls*@$!. 
+        I hope it is able to give you quite a little laugh though.
+        I would also just want to add that this is fun. I enjoyed doing Django.
+    </p>
+</section>
+
+
+<section class="footer">
+    <a href="/books">Books</a>
+    <a href="/authors">Authors</a>
+</section>
+{% endblock %}

bookshelf/urls.py

 from django.urls import path
-from .views import index
+from .views import index, BookListView, BookDetailView, AuthorListView, AuthorDetailView
+
 
 urlpatterns = [
-    path('', index, name='index'),
+    path('home/', index, name='home'),
+    path('books/', BookListView.as_view(), name="book_list"),
+    path('books/<int:pk>/details', BookDetailView.as_view(), name="book_detail"),
+    path('authors/', AuthorListView.as_view(), name="author_list"),
+    path('authors/<int:pk>/details', AuthorDetailView.as_view(), name="author_detail"),
+
 ]

bookshelf/views.py

 from django.http import HttpResponse
+from django.shortcuts import render
+from .models import Author, Books
 
+from django.views.generic.list import ListView
+from django.views.generic.detail import DetailView
 
 def index(request):
-    return HttpResponse('PLACEHOLDER Welcome to Bookshelf')
+    return render(request, "bookshelf/home.html",)
+
+
+class AuthorListView(ListView):
+    template_name = 'bookshelf/authors.html'
+    model = Author
+
+class AuthorDetailView(DetailView):
+    template_name = 'bookshelf/authors_details.html'
+    model = Author
+
+class BookListView(ListView):
+    template_name = 'bookshelf/books.html'
+    model = Books
+
+class BookDetailView(DetailView):
+    template_name = 'bookshelf/book_details.html'
+    model = Books
+
+

drizzydretan_reading/settings.py

@@ -11,6 +11,8 @@ https://docs.djangoproject.com/en/3.2/ref/settings/
 """
 
 from pathlib import Path
+import os
+
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -55,7 +57,7 @@ ROOT_URLCONF = 'drizzydretan_reading.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -119,6 +121,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
 STATIC_URL = '/static/'
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

drizzydretan_reading/urls.py

@@ -18,5 +18,5 @@ from django.urls import path, include
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('bookshelf/', include(('bookshelf.urls','bookshelf'), namespace="bookshelf")),
+    path("", include("bookshelf.urls")),
 ]

static/style.css

+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap');
+
+
+body {
+    background-color: #355C7D ;
+    color: #fcfaf4;
+    font-family: 'Raleway', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+}
+.info{
+    width: 50vw;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 100px;
+}
+
+.footer {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    background-color: #6C5B7B;
+    justify-content: space-between;
+    border-radius: 20px;
+    padding: 20px;
+}
+.footer a{
+    color: #fcfaf4;
+    border-radius: 20px;
+    padding: 15px 40px;
+    background: #F67280;
+    font-size: large;
+    text-decoration: none;
+    transition: scale 0.5s ease;
+}
+.footer a:hover{
+    scale: 1.2;
+}
+ul > a{
+    color: #F8B195;
+    text-decoration: none;
+    transition: font-size 0.3s ease;
+}
+ul > a:hover{
+    font-size: 1.2rem;
+}
+li{
+    list-style-type: none;
+}
\ No newline at end of file

templates/base.html

+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href=" {% static '/style.css' %}"/>
+    <title>{% block title %} My Favorite Books and Authors {% endblock %}</title>
+    {% block styles %}{% endblock %}
+    
+</head>
+<body>
+    <div id="content">{% block content %}{% endblock %}</div>
+    {% block scripts %}{% endblock %}
+</body>
+</html>
\ No newline at end of file