first commit

base/admin.py

@@ -0,0 +1,11 @@
+from django.contrib import admin
+
+# Register your models here.
+
+from .models import tb_bacaan
+
+class Filter_Bacaan(admin.ModelAdmin):
+  list_display = ('judul_bacaan', 'kategori', 'image_url', 'audio_url')
+  list_per_page = 10
+
+admin.site.register(tb_bacaan, Filter_Bacaan)

base/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BaseConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'base'

base/migrations/0001_initial.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.3 on 2022-03-14 12:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='tb_bacaan',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('judul_bacaan', models.CharField(max_length=100)),
+                ('kategori', models.CharField(max_length=1)),
+                ('image_url', models.TextField(blank=True, null=True)),
+                ('audio_url', models.TextField(blank=True, null=True)),
+            ],
+        ),
+    ]

base/models.py

@@ -0,0 +1,12 @@
+from django.db import models
+
+# Create your models here.
+class tb_bacaan(models.Model):
+    # id_bacaan = models.AutoField(primary_key=True)
+    judul_bacaan = models.CharField(max_length=100)
+    kategori = models.CharField(max_length=1)
+    image_url = models.TextField(null=True, blank=True)
+    audio_url = models.TextField(null=True, blank=True)
+    list_per_page = 10
+    def __str__(self):
+        return self.judul_bacaan

base/templates/base/activity.html

@@ -0,0 +1,83 @@
+{% load static %}
+<div class="activities">
+  <div class="activities__header">
+    <h2>Audio Bacaan</h2>
+  </div>
+
+  {% for bacaan in bacaans  %}
+  <div class="activities__box">
+    <!-- <div class="activities__boxHeader roomListRoom__header"> -->
+      <!-- <a href="profile.html" class="roomListRoom__author"> -->
+        <!-- <div class="avatar avatar--small"> -->
+          <!-- <img src="https://randomuser.me/api/portraits/women/11.jpg" /> -->
+        <!-- </div> -->
+        <!-- <p> -->
+          <!-- @sulamita_ivy -->
+          <!-- <span>5 days ago</span> -->
+        <!-- </p> -->
+      <!-- </a> -->
+      <!-- <div class="roomListRoom__actions"> -->
+        <!-- <a href="#"> -->
+          <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+            <!-- <title>remove</title> -->
+            <!-- <path -->
+              <!-- d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z" -->
+            <!-- ></path> -->
+          <!-- </svg> -->
+        <!-- </a> -->
+      <!-- </div> -->
+    <!-- </div> -->
+    <div class="">
+      <!-- <p>replied to post “<a href="room.html">100 Days of code challenge!</a>”</p> -->
+      <!-- <div class="activities__boxRoomContent"> -->
+        <!-- I’ll have to try this sometime. Really like this idea. Wanna talk about it? I ‘m.... -->
+      <!-- </div> -->
+      <img src="{% static 'images/'  %}{{bacaan.image_url}}" style="height: 70px;" >
+      <center><p class="btn rounded-0" onclick="playAudioActivity('{{bacaan.judul_bacaan}}')">Dengarkan <i id="i_activity_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center>
+    </div>
+  </div>
+  {% endfor %}
+  <script>
+    var name_audio = null;
+    function playAudioActivity(id) {
+      if (name_audio == null) {
+        let audio = document.getElementById("myAudio_"+id);
+        audio.play();
+        name_audio = id;
+        document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
+      }else{
+        let audio_playing = document.getElementById("myAudio_"+name_audio);
+        document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
+        document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
+        if(audio_playing.ended == false){
+          audio_playing.pause();
+          audio_playing.currentTime = 0;
+          let audio = document.getElementById("myAudio_"+id);
+          audio.play();
+         
+        }else{
+          let audio = document.getElementById("myAudio_"+id);
+          audio.play();
+        }
+        name_audio = id;
+        
+      }
+
+      //sleep 3 second
+       setTimeout(function(){
+        document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
+       }, 5000);
+      // if audio is playing in other audio tag, stop it else play it
+      
+
+      
+
+      
+
+    }
+  </script>
+
+  
+
+  
+</div>

base/templates/base/bacaan.html

@@ -0,0 +1,232 @@
+{% extends 'main.html' %}
+{% block content %}
+{% load static %}
+    <main class="update-account layout">
+      <div class="container">
+        <div class="layout__box">
+          <div class="layout__boxHeader">
+            <div class="layout__boxTitle">
+              <a href="profile.html" style="text-align: left;">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
+                      viewBox="0 0 32 32">
+                      <title>arrow-left</title>
+                      <path
+                          d="M13.723 2.286l-13.723 13.714 13.719 13.714 1.616-1.611-10.96-10.96h27.625v-2.286h-27.625l10.965-10.965-1.616-1.607z">
+                      </path>
+                  </svg>
+              </a>
+              <h3>Nilai Bacaan Anda</h3>
+            </div>
+          </div>
+          <div class="layout__body">
+            
+            <center><img src="{% static 'images/' %}{{bacaan.image_url}}" style="{{style}}"  alt=""></center>
+
+            <center><p class="btn btn--main">Dengar <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center>
+            <br>
+            <center><button class="btn" id="recordButton" style="background-color: green;">Rekam <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></button> &nbsp <button id="pauseButton" style="cursor: not-allowed; background-color: grey;" class="btn btn--default" disabled>Pause <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-pause-circle"></i></button> &nbsp <button id="stopButton" style="cursor: not-allowed; background-color: grey;" class="btn btn--default" disabled>Stop <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-stop-circle"></i></button></center>
+            <!-- <br> -->
+            <!-- <center><p class="btn btn--primary" onclick="dengar_rekaman()">Dengar Rekaman <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center> -->
+            <br>
+            <div id="formats" style="display: none;">Format: start recording to see sample rate</div>
+            <center><div id="recordingsList"></div></center>
+            <!-- <div id="disini"></div> -->
+          </div>
+        </div>
+      </div>
+    </main>
+    <script src="{% static 'js/recorder.js' %}"></script>
+    <script>
+      URL = window.URL || window.webkitURL;
+
+      var gumStream; 						//stream from getUserMedia()
+      var rec; 							//Recorder.js object
+      var input;  //MediaStreamAudioSourceNode we'll be recording
+
+      // shim for AudioContext when it's not avb. 
+      var AudioContext = window.AudioContext || window.webkitAudioContext;
+      var audioContext //audio context to help us record
+
+      var recordButton = document.getElementById("recordButton");
+      var stopButton = document.getElementById("stopButton");
+      var pauseButton = document.getElementById("pauseButton");
+
+      //add events to those 2 buttons
+      recordButton.addEventListener("click", startRecording);
+      stopButton.addEventListener("click", stopRecording);
+      pauseButton.addEventListener("click", pauseRecording);
+
+      function startRecording() {
+        recordingsList.innerHTML = '';
+        console.log("recordButton clicked");
+
+        setAttributes(recordButton, {
+          "style": "background-color: grey; cursor: not-allowed;",
+          
+        });
+
+        setAttributes(stopButton, {
+          "style": "background-color: red;cursor: pointer;",         
+        });
+
+        setAttributes(pauseButton, {
+          "style": "background-color: yellow;cursor: pointer;color: black;",         
+        });
+      
+        /*
+          Simple constraints object, for more advanced audio features see
+          https://addpipe.com/blog/audio-constraints-getusermedia/
+        */
+          
+          var constraints = { audio: true, video:false }
+      
+         /*
+            Disable the record button until we get a success or fail from getUserMedia() 
+        */
+      
+        recordButton.disabled = true;
+        stopButton.disabled = false;
+        pauseButton.disabled = false
+      
+        /*
+            We're using the standard promise based getUserMedia() 
+            https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+        */
+      
+        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+          console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
+      
+          /*
+            create an audio context after getUserMedia is called
+            sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
+            the sampleRate defaults to the one set in your OS for your playback device
+          */
+          audioContext = new AudioContext();
+      
+          //update the format 
+          document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
+      
+          /*  assign to gumStream for later use  */
+          gumStream = stream;
+          
+          /* use the stream */
+          input = audioContext.createMediaStreamSource(stream);
+      
+          /* 
+            Create the Recorder object and configure to record mono sound (1 channel)
+            Recording 2 channels  will double the file size
+          */
+          rec = new Recorder(input,{numChannels:1})
+      
+          //start the recording process
+          rec.record()
+      
+          console.log("Recording started");
+      
+        }).catch(function(err) {
+            //enable the record button if getUserMedia() fails
+            recordButton.disabled = false;
+            stopButton.disabled = true;
+            pauseButton.disabled = true
+        });
+      }
+      
+      function pauseRecording(){
+        console.log("pauseButton clicked rec.recording=",rec.recording );
+        if (rec.recording){
+          //pause
+          rec.stop();
+          pauseButton.innerHTML="Resume";
+        }else{
+          //resume
+          rec.record()
+          pauseButton.innerHTML="Pause";
+      
+        }
+      }
+      
+      function stopRecording() {
+        console.log("stopButton clicked");
+        
+      
+        //disable the stop button, enable the record too allow for new recordings
+        stopButton.disabled = true;
+        recordButton.disabled = false;
+        pauseButton.disabled = true;
+      
+        //reset button just in case the recording is stopped while paused
+        pauseButton.innerHTML="Pause";
+        
+        //tell the recorder to stop the recording
+        rec.stop();
+      
+        //stop microphone access
+        gumStream.getAudioTracks()[0].stop();
+      
+        //create the wav blob and pass it on to createDownloadLink
+        rec.exportWAV(createDownloadLink);
+      }
+      
+      function createDownloadLink(blob) {
+        
+        var url = URL.createObjectURL(blob);
+        var au = document.createElement('audio');
+        var li = document.createElement('li');
+        var link = document.createElement('a');
+      
+        //name of .wav file to use during upload and download (without extendion)
+        var filename = new Date().toISOString();
+      
+        //add controls to the <audio> element
+        au.controls = true;
+        au.src = url;
+        au.id = 'rekamannya'
+
+        /* let disini = document.getElementById('disini')
+        disini.append(au) */
+
+      
+        //save to disk link
+        link.href = url;
+        link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
+        link.innerHTML = "Save to disk";
+      
+        //add the new audio element to li
+        // li.appendChild(au);
+        
+        //add the filename to the li
+        // li.appendChild(document.createTextNode(filename+".wav "))
+      
+        //add the save to disk link to li
+        // li.appendChild(link);
+        
+        //upload link
+        /* var upload = document.createElement('a');
+        upload.href="#";
+        upload.innerHTML = "Upload";
+        upload.addEventListener("click", function(event){
+            var xhr=new XMLHttpRequest();
+            xhr.onload=function(e) {
+                if(this.readyState === 4) {
+                    console.log("Server returned: ",e.target.responseText);
+                }
+            };
+            var fd=new FormData();
+            fd.append("audio_data",blob, filename);
+            xhr.open("POST","upload.php",true);
+            xhr.send(fd);
+        }) */
+        // li.appendChild(document.createTextNode (" "))//add a space in between
+        // li.appendChild(upload)//add the upload link to li 
+      
+        //add the li element to the ol
+        // recordingsList.appendChild("");
+        recordingsList.appendChild(au);
+      }
+
+      function setAttributes(el, attrs) {
+          Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
+      }
+     
+    </script>
+{% endblock %}

base/templates/base/home.html

@@ -0,0 +1,145 @@
+{% extends 'main.html' %}
+{% block content %}
+{% load static %}
+<main class="layout layout--3">
+  <div class="container">
+    <!-- Topics Start -->
+    {% include 'base/topic.html' %}
+    <!-- Topics End -->
+
+    <!-- Room List Start -->
+    <div class="roomList">
+      <!-- <div class="mobile-menu"> -->
+        <!-- <form class="header__search"> -->
+        <!-- <label> -->
+        <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+        <!-- <title>search</title> -->
+        <!-- <path -->
+        <!-- d="M32 30.586l-10.845-10.845c1.771-2.092 2.845-4.791 2.845-7.741 0-6.617-5.383-12-12-12s-12 5.383-12 12c0 6.617 5.383 12 12 12 2.949 0 5.649-1.074 7.741-2.845l10.845 10.845 1.414-1.414zM12 22c-5.514 0-10-4.486-10-10s4.486-10 10-10c5.514 0 10 4.486 10 10s-4.486 10-10 10z" -->
+        <!-- ></path> -->
+        <!-- </svg> -->
+        <!-- <input placeholder="Search for posts" /> -->
+        <!-- </label> -->
+        <!-- </form> -->
+        <!-- <div class="mobile-menuItems"> -->
+          <!-- <a class="btn btn--main btn--pill" href="#">Browse Topics</a> -->
+          <!-- <a class="btn btn--main btn--pill" href="#">Recent Activities</a> -->
+        <!-- </div> -->
+      <!-- </div> -->
+      <div class="roomList__header">
+        <div>
+          <h2>Bacaan</h2>
+          <p>{{bacaans.count}} Audio Tersedia</p>
+        </div>
+        <!-- <a class="btn btn--main" href="create-room.html"> -->
+        <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+        <!-- <title>add</title> -->
+        <!-- <path -->
+        <!-- d="M16.943 0.943h-1.885v14.115h-14.115v1.885h14.115v14.115h1.885v-14.115h14.115v-1.885h-14.115v-14.115z" -->
+        <!-- ></path> -->
+        <!-- </svg> -->
+        <!-- Create Room -->
+        <!-- </a> -->
+      </div>
+
+      {% for bacaan in bacaans %}
+      <div class="roomListRoom">
+        <!-- <div class="roomListRoom__header"> -->
+        <!-- <a href="profile.html" class="roomListRoom__author"> -->
+        <!-- <div class="avatar avatar--small"> -->
+        <!-- <img src="https://randomuser.me/api/portraits/women/11.jpg" /> -->
+        <!-- </div> -->
+        <!-- <span>@sulamita_ivy</span> -->
+        <!-- </a> -->
+        <!-- <div class="roomListRoom__actions"> -->
+        <!-- <span>5 days ago</span> -->
+        <!-- </div> -->
+        <!-- </div> -->
+        <div class="roomListRoom__content">
+          <center><a href="#"><img src="{% static 'images/' %}{{bacaan.image_url}}" alt=""></a></center>
+          <!-- <p> -->
+          <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ducimus harum dolorem, obcaecati -->
+          <!-- mollitia omnis quasi aut consequuntur enim itaque labore. -->
+          <!-- </p> -->
+        </div>
+        <div class="roomListRoom__meta">
+          <div class="roomListRoom__joined">
+            <audio id="myAudio_{{bacaan.judul_bacaan}}">
+              <source src="{% static 'audio/' %}{{bacaan.audio_url}}" type="audio/wav">
+            </audio>
+            <p class="roomListRoom__topic" onclick="playAudio('{{bacaan.judul_bacaan}}')" style="cursor: pointer;">
+              Dengarkan &nbsp <i id="i_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p>
+            <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+            <!-- <title>user-group</title> -->
+            <!-- <path -->
+            <!-- d="M30.539 20.766c-2.69-1.547-5.75-2.427-8.92-2.662 0.649 0.291 1.303 0.575 1.918 0.928 0.715 0.412 1.288 1.005 1.71 1.694 1.507 0.419 2.956 1.003 4.298 1.774 0.281 0.162 0.456 0.487 0.456 0.85v4.65h-4v2h5c0.553 0 1-0.447 1-1v-5.65c0-1.077-0.56-2.067-1.461-2.584z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M22.539 20.766c-6.295-3.619-14.783-3.619-21.078 0-0.901 0.519-1.461 1.508-1.461 2.584v5.65c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-5.651c0-1.075-0.56-2.064-1.461-2.583zM22 28h-20v-4.65c0-0.362 0.175-0.688 0.457-0.85 5.691-3.271 13.394-3.271 19.086 0 0.282 0.162 0.457 0.487 0.457 0.849v4.651z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M19.502 4.047c0.166-0.017 0.33-0.047 0.498-0.047 2.757 0 5 2.243 5 5s-2.243 5-5 5c-0.168 0-0.332-0.030-0.498-0.047-0.424 0.641-0.944 1.204-1.513 1.716 0.651 0.201 1.323 0.331 2.011 0.331 3.859 0 7-3.141 7-7s-3.141-7-7-7c-0.688 0-1.36 0.131-2.011 0.331 0.57 0.512 1.089 1.075 1.513 1.716z" -->
+            <!-- ></path> -->
+            <!-- <path -->
+            <!-- d="M12 16c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.859 0-7 3.141-7 7s3.141 7 7 7zM12 4c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5c0-2.757 2.243-5 5-5z" -->
+            <!-- ></path> -->
+            <!-- </svg> -->
+          </div>
+          <p class="roomListRoom__topic" style="cursor: pointer;" onclick="to_bacaan('{{bacaan.id}}')">Rekam & Nilai</p>
+        </div>
+      </div>
+      {% endfor %}
+
+      <script>
+        var name_audio = null;
+        function playAudio(id) {
+          if (name_audio == null) {
+            let audio = document.getElementById("myAudio_"+id);
+            audio.play();
+            name_audio = id;
+            document.getElementById("i_"+id).setAttribute("class", "fa fa-pause-circle");
+          }else{
+            let audio_playing = document.getElementById("myAudio_"+name_audio);
+            document.getElementById("i_"+name_audio).setAttribute("class", "fa fa-play-circle");
+            document.getElementById("i_"+id).setAttribute("class", "fa fa-pause-circle");
+            if(audio_playing.ended == false){
+              audio_playing.pause();
+              audio_playing.currentTime = 0;
+              let audio = document.getElementById("myAudio_"+id);
+              audio.play();
+             
+            }else{
+              let audio = document.getElementById("myAudio_"+id);
+              audio.play();
+            }
+            name_audio = id;
+            
+          }
+
+          //sleep 3 second
+           setTimeout(function(){
+            document.getElementById("i_"+name_audio).setAttribute("class", "fa fa-play-circle");
+           }, 5000);
+          // if audio is playing in other audio tag, stop it else play it
+          
+
+          
+
+          
+
+        }
+      
+        function to_bacaan(id){
+          window.location.href = "/bacaan/"+id;
+        }
+      </script>
+
+    </div>
+    <!-- Room List End -->
+
+    <!-- Activities Start -->
+    {% include 'base/activity.html' %}
+    <!-- Activities End -->
+  </div>
+</main>
+{% endblock content %}

base/templates/base/topic.html

@@ -0,0 +1,42 @@
+{% load static %}
+<div class="topics">
+  <div class="topics__header">
+    <h2>Telusuri Bacaan</h2>
+  </div>
+  <ul class="topics__list">
+    <li>
+      <a href="{% url 'home' %}" class="active">Semua <span>22</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=b"><img src="{% static 'images/b/b.png' %}" alt="" style="width:160px; height: 35px;"> <span>1</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=t"><img src="{% static 'images/t/t.png' %}" alt="" style="width:160px; height: 35px;"> <span>1</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=1"><img src="{% static 'images/1/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>6</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=2"><img src="{% static 'images/2/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>2</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=3"><img src="{% static 'images/3/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=4"><img src="{% static 'images/4/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=5"><img src="{% static 'images/5/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+    <li>
+      <a href="{% url 'home' %}?q=6"><img src="{% static 'images/6/1.png' %}" alt="" style="width: 45px; height: 35px;"> <span>3</span></a>
+    </li>
+  </ul>
+  <!-- <a class="btn btn--link" href="topics.html"> -->
+    <!-- More -->
+    <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
+      <!-- <title>chevron-down</title> -->
+      <!-- <path d="M16 21l-13-13h-3l16 16 16-16h-3l-13 13z"></path> -->
+    <!-- </svg> -->
+  <!-- </a> -->
+</div>

base/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

base/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.home, name='home'),
+    path('bacaan/<str:pk>', views.bacaan, name='bacaan'),
+]

base/views.py

@@ -0,0 +1,29 @@
+from django.shortcuts import render ,redirect
+from django.http import HttpResponse
+from django.db.models import Q
+from .models import tb_bacaan
+
+# Create your views here.
+
+def home(request):
+    q = request.GET.get('q') if request.GET.get('q') else ''
+    bacaans = tb_bacaan.objects.filter(Q(kategori__icontains=q))
+    context = {'bacaans':bacaans}
+    return render(request,'base/home.html',context)
+
+def bacaan(request,pk):
+    check = tb_bacaan.objects.filter(id=pk).exists()
+    if check == False:
+        return redirect('home')
+    
+    bacaannya = tb_bacaan.objects.get(id=pk)
+    print(bacaannya.id)
+    if(bacaannya.id != 1 and bacaannya.id != 2):
+        style = "width:30%; height: 30%;"
+    else:
+        style = ''
+        
+
+        
+    context = {'bacaan':bacaannya, 'style': str(style)}
+    return render(request,'base/bacaan.html',context)