add new section for exercise 4

README.md

@@ -54,4 +54,87 @@ Dan karena sekarang digunakan Django test runner untuk menjalankan functional te
 ```python
 if __name__ == '__main__':
     unittest.main(warnings='ignore')
+```
+
+## Exercise 4
+
+### Functional Test-Friendly CSS 
+
+Dalam melakukan styling, hal yang perlu diperhatikan adalah konsistensi. Saat diberi functional test dibawah
+```python
+    [...]
+    ​inputbox.send_keys('testing')
+    ​inputbox.send_keys(Keys.ENTER)
+    ​self.wait_for_row_in_list_table('1: testing')
+    ​inputbox = self.browser.find_element_by_id('id_new_item')
+    ​self.assertAlmostEqual(
+        ​inputbox.location['x'] + inputbox.size['width'] / 2,
+        ​512,
+        ​delta=10
+)
+```
+
+Test ingin mengetahui apakah benar input kita di tengah web page. Bentuk `home.html` kita seperti dibawah tidak cukup karena tidak menghandle styling di page `/lists/{id}`.
+```html
+    [...]
+    <form method="POST" action="/lists/new">
+    <p style="text-align: center;">
+        <input name="item_text" id="id_new_item" placeholder="Enter a to-do item" />
+    </p>
+    {% csrf_token %}
+    </form>
+```
+
+Sehingga kita dapat menggunakan Django Template Inheritance dan CSS Framework seperti Bootstrap.
+Contohnya dengan kodingan dibawah adalah penggunaan Bootstrap dalam `base.html` hasil template inheritance.
+```html
+    [...]
+    ​<div class="row">
+       ​<div class="col-md-6 col-md-offset-3">
+         ​<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"
+                    ​placeholder="Enter a to-do item" />
+             ​{% csrf_token %}
+           ​</form>
+         ​</div>
+       ​</div>
+     ​</div>
+```
+
+### Keterhubungan Perubahan Kode
+
+Dalam exercise kali ini, kita telah menambahkan banyak file static yang diperlukan untuk styling aplikasi. Command `runserver` dapat mencari file-file static tersebut secara otomatis. Namun `LiveServerTestCase` tidak dapat menemukannya, oleh karena itu perlu diubah dengan `StaticLiveServerTestCase`.
+
+Sebelumnya:
+```python
+from django.test import LiveServerTestCase
+from selenium import webdriver
+from selenium.common.exceptions import WebDriverException
+from selenium.webdriver.common.keys import Keys
+import time
+
+MAX_WAIT = 10
+
+
+class NewVisitorTest(LiveServerTestCase):
+    def setUp(self):
+    [...]
+```
+
+Menjadi:
+```python
+from django.contrib.staticfiles.testing import StaticLiveServerTestCase
+from selenium import webdriver
+from selenium.common.exceptions import WebDriverException
+from selenium.webdriver.common.keys import Keys
+import time
+
+MAX_WAIT = 10
+
+
+class NewVisitorTest(StaticLiveServerTestCase):
+    def setUp(self):
+    [...]
 ```
\ No newline at end of file