Fakultas Ilmu Komputer UI

katalog_materi.html 10.6 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
{% 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' %}">
42
    <link rel="stylesheet" type="text/css" href="{% static 'css/navbar_katalog_materi.css' %}">
43
44
    <!--===============================================================================================-->

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

</head>

<body style="background-color: #f8f8f8;">
51
52
    

53
54
<!-- Page Content -->
    <div class="container">
Josh Sudung's avatar
Josh Sudung committed
55
      {% include 'app/includes/navbar_katalog_materi.html' %}
56
57
58
59
60
61
        <header class="jumbotron my-4">
            <div class="container">
                <div class="row header">
                    <div class="col">
                        <h2 class="pageTitle">Temukan Materi Yang Kamu Mau!</h2>
                        <p class="description">Cari dengan judul buku, penerbit, atau penulis</p>
62
                        <form class="searchBar" action=''>
63
                            <div class="col-6 form-group">
64
                                <input type="text" name='search' class="form-control" placeholder="Tulis di sini"
Azhar Rais's avatar
Azhar Rais committed
65
                                       value='{{ request.GET.search }}'>
66
                            </div>
67
							<button type="submit" class="btn btn-cari">Cari</button>
68
                        </form>
69
70
                        <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a
                                href="/req-materi">disini</a></p>
Azhar Rais's avatar
Azhar Rais committed
71
72
                        <p class="pageTitle">Ingin diskusi lebih mendalam? Silahkan kunjungi <a
                                href="{% url 'forum_home' %}">forum kami</a></p>
insan ramadhan's avatar
insan ramadhan committed
73
74
                        <p class="pageTitle">Terima kasih sudah berkunjung, mohon isi buku tamu terlebih dahulu <a
                                href="/submit-visitor">disini</a> jika kamu sudah terdaftar!</p>
75
76
                    </div>
                </div>
Azhar Rais's avatar
Azhar Rais committed
77
            </div>
78
        </header>
79
		
80
81
82
        <a href="/download-history/" class="btn-history">Riwayat Unduh</a><br><br>
        
        <a href="?random=1" class="btn-history">Acak Materi</a><br><br>
83
		
84
85
86
87
88
89
90
        <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">
91
92
93
                                    <button class="btn collapsed" type="button" data-toggle="collapse"
                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Filter
94
95
96
                                    </button>
                                </h2>
                            </div>
97
98
99

                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
100
                                <div class="card-body">
101
102
103
104
105
106
107
                                    <ul>
                                        {% for itemKategori in kategori_list %}
                                        <li>
                                            <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
                                        </li>
                                        {% endfor %}
                                    </ul>
108
109
110
111
112
113
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingTwo">
114
115
116
117
118
119
                                <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>
120
                            </div>
121
122
123
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordionExample">
                                <div class="card-body">
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
                                    <ul>
                                        <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>
                                        <li>
                                            <a href="?sort=jumlah_unduh">jumlah unduh</a>
                                        </li>
146
147
148
                                        <li>
                                            <a href="?sort=jumlah_tampilan">jumlah tampilan</a>
                                        </li>
149
                                    </ul>
150
                                </div>
151
152
                            </div>
                        </div>
153
154
                    </div>
                </div>
igor lestin sianipar's avatar
igor lestin sianipar committed
155

156
157
158
                <div class="col-9 books">
                    {% for item in materi_list %}
                    <div class="card book">
159
                        <img src={{item.cover.url}} class="card-img-top" alt="cover"
igor lestin sianipar's avatar
igor lestin sianipar committed
160
                            style="height:200px; widows: 200px;; overflow: hidden;"></img>
161
162
163
                        <div class="card-body">
                            <h5 class="card-title">{{item.title}}</h5>
                            <p class="card-text">{{item.author}}</p>
164
165
166
167
168
                            <p class="card-text">Diunggah oleh
                                <a class="card-link" href="{% url 'katalog-per-kontributor' item.uploader.email %}">
                                    {{item.uploader.name}}
                                </a>
                            </p>
169
170
171
                            <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>
172
                    </div>
173
                    {% endfor %}
174
                </div>
igor lestin sianipar's avatar
igor lestin sianipar committed
175
176
177
178
179
180
181
182
183
                <div class="center">
                    <div class="pagination">
                        <span class="step-links">
                            <span class="current">
                                Page {{ materi_list.number }} of {{ materi_list.paginator.num_pages }}
                            </span>

                            <br>
                            </br>
184

igor lestin sianipar's avatar
igor lestin sianipar committed
185
                            {% if materi_list.has_previous %}
186
                            <a href="?page=1{{url}}">&laquo; first</a>
Mika dabelza abi's avatar
Mika dabelza abi committed
187
                            <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a>
igor lestin sianipar's avatar
igor lestin sianipar committed
188
                            {% endif %}
189
190
191



igor lestin sianipar's avatar
igor lestin sianipar committed
192
                            {% if materi_list.has_next %}
Mika dabelza abi's avatar
Mika dabelza abi committed
193
194
                            <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
195
196
197
198
                            {% endif %}
                        </span>
                    </div>
                </div>
199

200
            </div>
201
202
        </div>
    </div>
203
204

    <!-- /.container -->
205
206
207
208
</body>

</html>

209
{% endblock %}