Fakultas Ilmu Komputer UI

katalog_materi.html 9.38 KB
Newer Older
1
2
3
{% extends "base.html" %}
{% load static %}
{% block title %}Digipus Home{% endblock %}
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% block header %}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Digipus Home</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_materi.css' %}">

    <!-- Bootstrap core CSS -->
    <link href="../../static/app/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../../static/app/css/heroic-features.css" rel="stylesheet">

    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
    <!--===============================================================================================-->
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <!--===============================================================================================-->
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    <!--===============================================================================================-->

44
45
    {% endblock header %}
    {% block content %}
46
47
48
49

</head>

<body style="background-color: #f8f8f8;">
50
    <!-- Page Content -->
51
52
53
54
55
56
    <div class="container">

        <header class="jumbotron my-4">
            <div class="container">
                <div class="row header">
                    <div class="col">
oki priyadi's avatar
oki priyadi committed
57
						<a href= "/subscribeform"><img src="{% static 'images/sub-btn.png' %}" style="height:100px"></a>
58
59
                        <h2 class="pageTitle">Temukan Materi Yang Kamu Mau!</h2>
                        <p class="description">Cari dengan judul buku, penerbit, atau penulis</p>
60
                        <form class="searchBar" action=''>
61
                            <div class="col-6 form-group">
62
63
                                <input type="text" name='search' class="form-control" placeholder="Tulis di sini"
                                    value='{{request.GET.search}}'>
64
65
66
                            </div>
                            <button type="submit" class="btn btn-cari">Cari</button>
                        </form>
67
68
                        <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a
                                href="/req-materi">disini</a></p>
69
70
                    </div>
                </div>
71
            </div>
72
        </header>
73

74
75
76
77
78
79
80
        <div class="container">
            <div class="row content">
                <div class="col-3 sidebar">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
81
82
83
                                    <button class="btn collapsed" type="button" data-toggle="collapse"
                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Filter
84
85
86
                                    </button>
                                </h2>
                            </div>
87
88
89

                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
90
91
                                <div class="card-body">
                                    {% for itemKategori in kategori_list %}
92
93
94
                                    <li>
                                        <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
                                    </li>
95
96
97
98
99
100
101
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingTwo">
102
103
104
105
106
107
                                <h2 class="mb-0">
                                    <button class="btn collapsed" type="button" data-toggle="collapse"
                                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Sort
                                    </button>
                                </h2>
108
                            </div>
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <li>
                                        <a href="?sort=terbaru">terbaru</a>
                                    </li>
                                    <li>
                                        <a href="?sort=terlama">terlama</a>
                                    </li>
                                    <li>
                                        <a href="?sort=terpopuler">terpopuler</a>
                                    </li>
                                    <li>
                                        <a href="?sort=judul">judul</a>
                                    </li>
                                    <li>
                                        <a href="?sort=penulis">penulis</a>
                                    </li>
                                    <li>
                                        <a href="?sort=pengunggah">pengunggah</a>
                                    </li>
                                </div>
131
132
                            </div>
                        </div>
133
134
                    </div>
                </div>
igor lestin sianipar's avatar
igor lestin sianipar committed
135

136
137
138
                <div class="col-9 books">
                    {% for item in materi_list %}
                    <div class="card book">
139
                        <img src={{item.cover.url}} class="card-img-top" alt="cover"
igor lestin sianipar's avatar
igor lestin sianipar committed
140
                            style="height:200px; widows: 200px;; overflow: hidden;"></img>
141
142
143
                        <div class="card-body">
                            <h5 class="card-title">{{item.title}}</h5>
                            <p class="card-text">{{item.author}}</p>
144
145
146
147
148
                            <p class="card-text">Diunggah oleh
                                <a class="card-link" href="{% url 'katalog-per-kontributor' item.uploader.email %}">
                                    {{item.uploader.name}}
                                </a>
                            </p>
149
150
151
                            <a href="{% url 'view-materi' item.id %}" class="btn btn-book">Baca</a>
                            <a href="{% url 'detail-materi' item.id %}" class="btn btn-book">Detail</a>
                        </div>
152
                    </div>
153
                    {% endfor %}
154
                </div>
igor lestin sianipar's avatar
igor lestin sianipar committed
155
156
157
                <div class="center">
                    <div class="pagination">
                        <span class="step-links">
igor lestin sianipar's avatar
igor lestin sianipar committed
158

igor lestin sianipar's avatar
igor lestin sianipar committed
159
160
161
162
163
164
                            <span class="current">
                                Page {{ materi_list.number }} of {{ materi_list.paginator.num_pages }}
                            </span>

                            <br>
                            </br>
165

igor lestin sianipar's avatar
igor lestin sianipar committed
166
                            {% if materi_list.has_previous %}
167
                            <a href="?page=1{{url}}">&laquo; first</a>
Mika dabelza abi's avatar
Mika dabelza abi committed
168
                            <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a>
igor lestin sianipar's avatar
igor lestin sianipar committed
169
                            {% endif %}
170
171
172



igor lestin sianipar's avatar
igor lestin sianipar committed
173
                            {% if materi_list.has_next %}
Mika dabelza abi's avatar
Mika dabelza abi committed
174
175
                            <a href="?page={{ materi_list.next_page_number }}{{url}}">next</a>
                            <a href="?page={{ materi_list.paginator.num_pages }}{{url}}">last &raquo;</a>
igor lestin sianipar's avatar
igor lestin sianipar committed
176
177
178
179
                            {% endif %}
                        </span>
                    </div>
                </div>
180

181
            </div>
182
183
        </div>
    </div>
184
185

    <!-- /.container -->
186
187
188
189
</body>

</html>

190
{% endblock %}