add search feature

web_dev/sas_web/datenbank/templates/datenbank/index.html

@@ -14,6 +14,15 @@
                 </p>
             </td>
         </tr>
+        {% if rows|length == 0 %}
+        <tr>
+            <td class="tddatabase", colspan=4>
+                <p id="description">
+                    <b>Keine Einträge für den Suchbegriff "{{ query }}" gefunden.</b>
+                </p>
+            </td>
+        </tr>
+        {% endif %}
         {% for row in rows %}
         <tr class="trdatabase">
             {% for entry in row %}

web_dev/sas_web/datenbank/views.py

@@ -6,9 +6,15 @@ from .models import Entry
 
 # Create your views here.
 def index(request):
-    rows = group(Entry.objects.all(), 3)
-    print("rows", rows)
-    return render(request, "datenbank/index.html", {'rows': rows})
+    query = ""
+    if request.method == 'POST':
+        query = request.POST['query']
+        objects = Entry.objects.filter(title__icontains=query)
+    else:
+        objects = Entry.objects.all()
+    rows = group(objects, 3)
+    return render(request, "datenbank/index.html", {'rows': rows,
+                                                    'query': query})
 
 
 def group(l, n):

web_dev/sas_web/static/public/css/header.css

@@ -23,6 +23,16 @@ html {
     vertical-align: middle;
     padding-left: 0px;
 }
+#submit_search {
+    border: none;
+    background-color: transparent;
+    color: transparent;
+    background-image: url('../images/search_icon.png');
+    background-size: 100%;
+    background-position: center;
+    height: 64px;
+    background-repeat: no-repeat;
+}
 table{
     border-collapse: collapse;
     border: none;

web_dev/sas_web/templates/public/header.html

@@ -3,31 +3,34 @@
 <link rel="stylesheet" type="text/css" href="{% static "public/css/header.css" %}">
 
 <div id=header>
-    <table class="table">
-        <tr>
-        <td id ="logotablerow", width="20%">
-            <img id="logo" src="{% static "public/images/apb_icon.png" %}" alt="logo">
-        </td>
-        <td class="link-container">
-            <a class="top-links", href="https://www.tagesschau.de">tagesschau.de</a>
-        </td>
-        <td class="link-container">
-            <a class="top-links", href="http://www.goethelb.de">goethelb.de</a>
-        </td>
-        <td class="link-container">
-            <a class="top-links", href="http://www.zeit.de">zeit.de</a>
-        </td>
-        <td class="link-container">
-            <a class="top-links", href="https://www.bpb.de">bpb.de</a>
-        </td>
-        <td vertical-align="middle", width="25%" class="allcenter">
-            <input type="text" id="search" maxlength="30" placeholder="Datenbank durchsuchen">
-        </td>
-        <td width="5%" class="allcenter">
-            <a href="http://www.dohiy.com/wp-content/uploads/2014/06/itsatrap.jpg"><img id="search_icon" src="{% static "public/images/search_icon.png" %}" alt="search"></a>
-        </td>
-        </tr>
-    </table>
+    <form action="{% url "datenbank:index" %}" method="post">
+        {% csrf_token %}
+        <table class="table">
+            <tr>
+            <td id ="logotablerow", width="20%">
+                <img id="logo" src="{% static "public/images/apb_icon.png" %}" alt="logo">
+            </td>
+            <td class="link-container">
+                <a class="top-links", href="https://www.tagesschau.de">tagesschau.de</a>
+            </td>
+            <td class="link-container">
+                <a class="top-links", href="http://www.goethelb.de">goethelb.de</a>
+            </td>
+            <td class="link-container">
+                <a class="top-links", href="http://www.zeit.de">zeit.de</a>
+            </td>
+            <td class="link-container">
+                <a class="top-links", href="https://www.bpb.de">bpb.de</a>
+            </td>
+            <td vertical-align="middle", width="25%" class="allcenter">
+                <input type="text" id="search" name="query" maxlength="30" placeholder="Datenbank durchsuchen" value="{{ query }}">
+            </td>
+            <td width="5%" class="allcenter">
+                <input id="submit_search" type="submit" value="Suchen">
+            </td>
+            </tr>
+        </table>
+    </form>
     <div id="navigation">
     <ul class="navbar">
         <li class ="navbar"><a {% if appname == "startpage" %}class="active"{% endif %} href="/">Information</a></li>