diff --git a/README.md b/README.md
index 8c84bb2023be6ccefaf4e913fefe4ca39f7e48cc..30d373ec9386205b1c394dd3556a309bda037dfb 100644
--- a/README.md
+++ b/README.md
@@ -40,13 +40,16 @@ Pada latihan kali ini menggunakan konsep `try-catch` dimana ketika tiap `time.sl
## Tutorial 4 (DONE)
+[Bab 7]
Pada tutorial 4 kali ini, mempelajari bagaimana seharusnya sebuah program
dibuat secara bertahap. TDD membantu kita untuk bekerja secara bertahap
dengan cara memastikan setiap fitur yang kita buat sebelumnya tidak
-menjadi rusak dengan penambahan fitur yang kita tambahkan. [Bab 7]
+menjadi rusak dengan penambahan fitur yang kita tambahkan.
+[Bab 8]
Selain itu, tutorial ini saya juga mengimplementasikan styling dengan <b>SCSS</b>
-dan juga mengimplementasikannya pada tahap Deployment.
+dan juga mengimplementasikannya pada tahap Deployment. Saya juga menggunakan `base.html`
+sebagai cara untuk tidak mengulangi suatu kode yang sama.
Kemudian, saya juga belajar untuk melakukan testing pada bentuk
layout. Sehingga bisa memastikan apakah style yang saya gunakan (dengan <b>SCSS</b>)
diff --git a/lists/static/base.css b/lists/static/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..cc7eb16202b12f281ee16aba0454e4c7fe4e9ddd
--- /dev/null
+++ b/lists/static/base.css
@@ -0,0 +1,3 @@
+#id_new_item {
+ margin-top: 2ex;
+}
\ No newline at end of file
diff --git a/lists/static/home1.scss b/lists/static/home1.scss
index 3f5e4bc7cfa9337807aeeefe03e481c7d131fa83..a10d1b89c686e84296013b0593948209369ac7c2 100644
--- a/lists/static/home1.scss
+++ b/lists/static/home1.scss
@@ -8,13 +8,6 @@ body {
}
}
-table {
- border-collapse: collapse;
- width: 50%;
- margin-left: auto;
- margin-right: auto;
-}
-
th, td {
text-align: left;
padding: 8px;
diff --git a/lists/templates/base.html b/lists/templates/base.html
new file mode 100644
index 0000000000000000000000000000000000000000..b0ad09f15fbd1b181ea8d28a6b77af0a9d92acf9
--- /dev/null
+++ b/lists/templates/base.html
@@ -0,0 +1,65 @@
+<html>
+<head>
+ <title>Homepage</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/static/base.css" rel="stylesheet">
+ {% load sass_tags %}
+ <link href="{% sass_src 'home1.scss' %}" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+
+<div class="card">
+ <img src="https://assets.gitlab-static.net/uploads/-/system/user/avatar/1572360/avatar.png?width=90" alt="Luthfi"
+ style="width:100%">
+ <h1>Luthfi Dzaky Saifuddin</h1>
+ <p class="title">28 November 1998</p>
+ <p id="university">Universitas Indonesia</p>
+ <div style="margin: 24px 0;">
+ <a href="#"><i class="fa fa-dribbble"></i></a>
+ <a href="#"><i class="fa fa-twitter"></i></a>
+ <a href="#"><i class="fa fa-linkedin"></i></a>
+ <a href="#"><i class="fa fa-facebook"></i></a>
+ </div>
+ <p>
+ <button>Contact</button>
+ </p>
+</div>
+<div class="container">
+ <h3 id="comment-todo" class="text-center">
+ {% if list.item_set.count >= 5 %}
+ oh tidak
+ {% elif list.item_set.count < 5 %}
+ sibuk tapi santai
+ {% else %}
+ yey, waktunya berlibur
+ {% endif %}
+ </h3>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3 jumbotron">
+ <div class="text-center">
+ <h1>{% block header_text %}{% endblock %}</h1>
+ <form method="POST" action="{% block form_action %}{% endblock %}">
+ <input name="item_text" id="id_new_item"
+ class="form-control input-lg"
+ placeholder="Enter a to-do item" />
+ {% csrf_token %}
+ </form>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3">
+ {% block table %}
+ {% endblock %}
+ </div>
+ </div>
+
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/lists/templates/homepage.html b/lists/templates/homepage.html
index fa6420330497bd528a7609bd7f33849650a26ae5..34ad36d849aa47d4569c027ad235747d24b89f33 100644
--- a/lists/templates/homepage.html
+++ b/lists/templates/homepage.html
@@ -1,40 +1,5 @@
-<html>
-<head>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <title>Homepage</title>
- {% load sass_tags %}
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
- integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
- <link href="{% sass_src 'home1.scss' %}" rel="stylesheet" type="text/css"/>
-</head>
-<body>
+{% extends 'base.html' %}
-<div class="card">
- <img src="https://assets.gitlab-static.net/uploads/-/system/user/avatar/1572360/avatar.png?width=90" alt="Luthfi"
- style="width:100%">
- <h1>Luthfi Dzaky Saifuddin</h1>
- <p class="title">28 November 1998</p>
- <p id="university">Universitas Indonesia</p>
- <div style="margin: 24px 0;">
- <a href="#"><i class="fa fa-dribbble"></i></a>
- <a href="#"><i class="fa fa-twitter"></i></a>
- <a href="#"><i class="fa fa-linkedin"></i></a>
- <a href="#"><i class="fa fa-facebook"></i></a>
- </div>
- <p>
- <button>Contact</button>
- </p>
-</div>
-<div class="container-fluid">
- <h1>Your To-Do List</h1>
- <h3 id="comment-todo">
- yey, waktunya berlibur
- </h3>
- <form method="POST" action="/lists/new">
- <input name="item_text" id="id_new_item" placeholder="Enter a to-do item"/>
- {% csrf_token %}
- </form>
-</div>
+{% block header_text %}Start a new To-Do list{% endblock %}
-</body>
-</html>
\ No newline at end of file
+{% block form_action %}/lists/new{% endblock %}
\ No newline at end of file
diff --git a/lists/templates/list.html b/lists/templates/list.html
index cead1890fbc513fd2e68b494ccd574aeb704f7cd..64f1a0f3eccc39dce648e59b54038c58f480dd3c 100644
--- a/lists/templates/list.html
+++ b/lists/templates/list.html
@@ -1,41 +1,14 @@
-<html>
-<head>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <title>Homepage</title>
- {% load sass_tags %}
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
- integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
- <link href="{% sass_src 'home1.scss' %}" rel="stylesheet" type="text/css"/>
-</head>
-<body>
+{% extends 'base.html' %}
-<div class="container-fluid">
- <h1>Your To-Do List</h1>
- <h3 id="comment-todo">
- {% if list.item_set.count == 0 %}
- yey, waktunya berlibur
- {% elif list.item_set.count < 5 %}
- sibuk tapi santai
- {% else %}
- oh tidak
- {% endif %}
- </h3>
-
- <form method="POST" action="/lists/{{ list.id }}/add_item">
- <input name="item_text" id="id_new_item" placeholder="Enter a to-do item"/>
- {% csrf_token %}
- </form>
- <table id="id_list_table">
- <tr>
- <th>My To-Do</th>
- </tr>
- {% for item in list.item_set.all %}
- <tr>
- <td>{{ forloop.counter }}: {{ item.text }}</td>
- </tr>
- {% endfor %}
- </table>
-</div>
+{% block header_text %}Your To-Do list{% endblock %}
+
+{% block form_action %}/lists/{{ list.id }}/add_item{% endblock %}
-</body>
-</html>
\ No newline at end of file
+{% block table %}
+ <table id="id_list_table" class="table">
+ <tr><th>My To Do List</th></tr>
+ {% for item in list.item_set.all %}
+ <tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
+ {% endfor %}
+ </table>
+{% endblock %}
\ No newline at end of file
diff --git a/superlists/settings.py b/superlists/settings.py
index d0ffac2ac1a469f3030cb33f32cf1883fc78d285..0e721931b4f93d6ae71abd81333515f0820f42c1 100644
--- a/superlists/settings.py
+++ b/superlists/settings.py
@@ -131,7 +131,7 @@ USE_TZ = True
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
-STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.AppDirectoriesFinder',