What's new

PHP Pa HELP Guys, PHP Pop-Up MODAL!

PHC - Naethan

Forum Expert
Joined
Dec 27, 2016
Posts
3,373
Reaction
18,116
Points
2,653
Age
22
Good Evening Mga ka PHC

Ask ko lng sana kung pwede makahinge ng unting tulong about sa modal, ganito kase nangyari

Scenario:
Gumawa yung Kaibigan ko ng ᴹᴼᴰᴬᴸ ᴾᴼᴾ⁻ᵁᴾ para sa upload form ng system namin, so sa modal mag i-input si user kung anuman i-input niya duon..
At Duon nga naman sa Function ako papasok, more in Back-End ang ginagamay ko kase ngayon..

Gumawa narin ako ng Tᴀʙʟᴇ sa main page or main ᴅɪᴠ ᴄᴏɴᴛᴀɪɴᴇʀ para sa body at nandun ung Tᴀʙʟᴇ, at sa table mag didisplay yung Dᴀᴛᴀʙᴀsᴇ.. oks naman lahat ng function na di-display ng walang problema, at yung upload function ayos na ayos naman..

Ngayon ang Gusto ko gumawa ng Eᴅɪᴛ && Dᴇʟᴇᴛᴇ function button para sa Dᴀᴛᴀʙᴀsᴇ..

###### Na Katulad sa Upload Function Pᴏᴘ-ᴜᴘ Mᴏᴅᴀʟ Container na ginawa niya, madali nalang kase yun para sa akin.. lalagay lng yung Tᴀʙʟᴇ sa loob at duon magaganap yung Eᴅɪᴛɪɴɢ ᴀɴᴅ Sᴀᴠɪɴɢ, at isa pa sanang Pop-Up Modal para sa Dᴇʟᴇᴛᴇ button naman, at ako na ulit ang bahal sa Back-End keneme nun..

Kaso sa kasamaang palad nalimutan ng kaibigan ko pano niya ginawa yung Pᴏᴘ-ᴜᴘ Mᴏᴅᴀʟ nayon, kase Cinopy-Paste niya lng daw yun hahaha.. ngayon ako tuloy nahirapan kase di ko kabisado kung anong mga "classname" mga pinag-gagagawa niya duon.. Tinry ko namang mag aral non at nakakuha naman ng Sᴀᴜᴄᴇ kaso ang hirap naman i-merged due to duplicatation Tae..

Need ko ng Tulong sa mga CSS Gods diyan, ng matapos nato hahaha.. salamat mga Uᴛᴏʟ ng marami..

Eto buong File ng Code ko, pati narin yung .CSS niya, makikita niyo naman agad kung ano ang kailangan ko.. at napakalaking tulong non!!

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script type="text/javascript" src="sweetalert2.all.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="home_style.css">
    
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    
</head>


<body>

<!--<title>Dashboard Sidebar Menu</title>-->
    <nav class="sidebar close">
        <header>
            <div class="image-text">
                <span class="image">               
                    <img src="logo_png.png" alt="Need Internet Connection">
                </span>

                <div class="text logo-text">
                    <span class="name">DIGITAL LIBRARY</span>
                </div>
            </div>

            <i class='bx bx-chevron-right toggle'></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <li class="search-box">
                    <i class='bx bx-search icon'></i>
                    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
                </li>

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-home-alt icon' ></i>
                            <span onclick="homeFunction()" class="text nav-text">Home</span>
                        </a>
                    </li>

                    <li class="nav-link1" id="btnupload">
                        <a href="#">
                            <i class='bx bx-wallet icon'></i>
                            <span class="text nav-text">Upload</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="bottom-content">
                <li class="btn-logout1">
                    <a href="#">
                        <i class='bx bx-log-out icon' ></i>
                        <span class="text nav-text">Logout</span>
                    </a>
                </li>

                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon'></i>
                        <i class='bx bx-sun icon sun'></i>
                    </div>
                    <span class="mode-text text">Dark mode</span>

                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
                
            </div>
        </div>
        
    </nav>
    <section class="home">


        <div class="container">

            <div class="box">
                <div class="content">
                    <table method="PUT" id="allTable">
                        <caption><h2>- Main'Board -</h2><br/></caption>
                        <br/>
                      <tr>
                        <th>Title</th>
                        <th>Date</th>
                        <th>Course</th>
                      </tr>                     
                        <?php
                            $conn = mysqli_connect("localhost", "root", "", "upload");
                            // Check connection
                            if ($conn->connect_error) {
                            die("Connection failed: " . $conn->connect_error);
                            }
                            $sql = "SELECT id, title, date, course FROM register";
                            $result = $conn->query($sql);
                            if ($result->num_rows > 0) {
                            // output data of each row
                            while($row = $result->fetch_assoc()) {
                            echo "<tr><td>" . $row["title"]. "</td><td>" . $row["date"] . "</td><td>"
                            . $row["course"]. "</td></tr>";
                            }
                            echo "</table>";
                            } else { echo "0 results"; }
                            $conn->close();
                        ?>
                      <br/>
                      <br/>
                    </table>                                                                       
                    
                </div>               
            </div>

        </div>
</section>


    
    
<!----======== Pop Up ======== -->
    <div class="center">
        <div class="popup">
            <div class="close-btn">&times;</div>
              <div class="form">
                <div class="form-element">
                    <center><span><h2>Upload File</h2></span>
                    <br/>
<!----======== Add input ======== -->
    <form method="POST" action="connect.php">             
        <input type="text" id="new_Title" name="title" placeholder="Iɴᴘᴜᴛ Tɪᴛʟᴇ" required>
        <br/>
        <input type="text" id="new_Date" name="date" placeholder="Iɴᴘᴜᴛ Dᴀᴛᴇ separated with -" required>
        <br/>
        <input type="text" id="new_Course" name="course" placeholder="Iɴᴘᴜᴛ Cᴏᴜʀsᴇ"required></center>
        <br/>
        <input type="file" id="myFile" multiple size="50" onchange="myfFunction()">
                  </div>
                </div>
                <div>
                <br/>
                    <center><button type="submit" onclick="add_Function()" class="form-element-button" value=" ">Submit</button>
                    <button type="button" onclick="resetFunction()" class="form-element-button" value=" ">Reset</button></center>           
                </div>
            </div>
        </div>
    </form>


<!--Logout Function-->
    <div class="center1">
        <div class="popup1">
            <div>
                <p>Are you sure you want to log out?</p><br>
                <!--<a href="logout.php">--><button class="form-element-button1">Yes</button></a>
                <button class="form-element-button2">No</button>
            </div>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
<!----===== Inline-Script ===== -->   

<script>
// Upload Function
function add_Function() {
  var new_Title = document.getElementById("new_Title").value;
  var new_Date = document.getElementById("new_Date").value;
  var new_Course = document.getElementById("new_Course").value;

  var table = document.getElementById("allTable");
  var table_len = (table.rows.length);
  var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='Title_row"+table_len+"'>"+new_Title+"</td><td id='Date_row"+table_len+"'>"+new_Date+"</td><td id='Course_row"+table_len+"'>"+new_Course+"</td></tr>";
 
  /* Input reset to " " value, after adding.. Optional just incase Wala akong tiwala hahaha
    document.getElementById("new_Title").value="";
    document.getElementById("new_Date").value="";
    document.getElementById("new_Course").value="";*/
    
    Swal.fire({
      title: '🇬🇴🇴🇩 🇯🇴🇧!',
      text: 'New Record Added Successfully!',
      imageUrl: 'Homelander.gif',
      imageWidth: 400,
      imageHeight: 200,
      imageAlt: 'Custom image',
    })
        
    //alert("Successfully added!");*/
    
}

function myfFunction(){
  var x = document.getElementById("myFile");
  var txt = "";
  if ('files' in x) {
    if (x.files.length == 0) {
      txt = "Select one or more files.";
    } else {
      for (var i = 0; i < x.files.length; i++) {
        txt += "<br><strong>" + (i+1) + ". file</strong><br>";
        var file = x.files[i];
        if ('name' in file) {
          txt += "name: " + file.name + "<br>";
        }
        if ('size' in file) {
          txt += "size: " + file.size + " bytes <br>";
        }
      }
    }
  }
  else {
    if (x.value == "") {
      txt += "Select one or more files.";
    } else {
      txt += "The files property is not supported by your browser!";
      txt  += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
    }
  }
  document.getElementById("demo").innerHTML = txt;
}

function resetFunction() {

    document.getElementById("new_Title").value="";
    document.getElementById("new_Date").value="";
    document.getElementById("new_Course").value="";
    
}

function homeFunction() {
    window.location.href = "home.php";
}   

// Dark & Light mode Function       
        document.querySelector(".nav-link1").addEventListener("click", function(){
            document.querySelector(".popup").classList.add("active");
        });

        document.querySelector(".popup .close-btn").addEventListener("click", function(){
            document.querySelector(".popup").classList.remove("active");
        });
        

        document.querySelector(".btn-logout1").addEventListener("click", function(){
            document.querySelector(".popup1").classList.add("active");
        });
        
        // Try lng hahaha
        document.querySelector(".form-element-button1").addEventListener("click", function(){
            document.querySelector(".popup1").classList.remove("active");
            
            let timerInterval
            Swal.fire({
              title: 'Preparing for Logout, Closing Recent Activities!',
              html: 'Auto close in <b></b> milliseconds.',
              timer: 3000,
              timerProgressBar: true,
              didOpen: () => {
                Swal.showLoading()
                const b = Swal.getHtmlContainer().querySelector('b')
                timerInterval = setInterval(() => {
                  b.textContent = Swal.getTimerLeft()
                }, 100)
              },
              willClose: () => {
                clearInterval(timerInterval)
              }
            }).then((result) => {
              /* Read more about handling dismissals below */
              if (result.dismiss === Swal.DismissReason.timer) {
                console.log('I was closed by the timer')
              }
            })
            
            setTimeout("location.href = 'index.php';",3500);
        });

        document.querySelector(".form-element-button2").addEventListener("click", function(){
            document.querySelector(".popup1").classList.remove("active");
        });

//create ako var, para di mag flactuate
      var body = document.querySelector('body');
      var sidebar = body.querySelector('nav');
      var toggle = body.querySelector(".toggle");
      var searchBtn = body.querySelector(".search-box");
      var modeSwitch = body.querySelector(".toggle-switch");
      var modeText = body.querySelector(".mode-text");


toggle.addEventListener("click" , () =>{
    sidebar.classList.toggle("close");
})

searchBtn.addEventListener("click" , () =>{
    sidebar.classList.remove("close");
})

modeSwitch.addEventListener("click" , () =>{
    body.classList.toggle("dark");
    
    if(body.classList.contains("dark")){
        modeText.innerText = "Light mode";
    }else{
        modeText.innerText = "Dark mode";
        
    }
});

//HighLight Function for search
myFunction = function() {
  // Declare some variables, mate
  var input, filter, table, tr, td, i, txtValue, index;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("allTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query para di magka-aberya
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;

      // first clear any previously marked text
      // this strips out the <mark> tags leaving text (Lahat na ng tags)
      td.innerHTML = txtValue;

      index = txtValue.toUpperCase().indexOf(filter);
      if (index > -1) {

        // using substring with index and filter.length
        // nest the matched string inside a <mark> tag
        td.innerHTML = txtValue.substring(0, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length);

        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
</body>
</html>

CSS:
/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    /* ===== Colors ===== */
    --body-color: #763435;
    --sidebar-color: rgb(231, 190, 76);
    --primary-color: #e3e2eb;
    --primary-color-light: #763435;
    --toggle-color: white;
    --text-color: black;

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

body{
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
}

::selection{
    background-color: var(--primary-color);
    color: #fff;
}

body.dark{
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
}

/* ===== Sidebar ===== */
 .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100; 
}
.sidebar.close{
    width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li{
    height: 50px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon{
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
    color: var(--text-color);
    transition: var(--tran-03);
}

.sidebar .text{
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
}
.sidebar.close .text{
    opacity: 0;
}
/* =========================== */

.sidebar header{
    position: relative;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}
.sidebar header .logo-text{
    display: flex;
    flex-direction: column;
}
header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}


.sidebar header .image{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img{
    width: 60px;
    border-radius: 6px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: var(--tran-05);
}

body.dark .sidebar header .toggle{
    color: var(--text-color);
}

.sidebar.close .toggle{
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu{
    margin-top: 40px;
}

.sidebar li.search-box{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: white;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}
.sidebar li a{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.sidebar li a:hover{

    background-color: #763435;
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);

}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
    color: var(--text-color);
 
}

.sidebar .menu-bar{
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
    display: none;
}
.sidebar .menu-bar .mode{
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
    height: 50px;
    width: 60px;
}

.mode .sun-moon i{
    position: absolute;
}
.mode .sun-moon i.sun{
    opacity: 0;
}
body.dark .mode .sun-moon i.sun{
    opacity: 1;
}
body.dark .mode .sun-moon i.moon{
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

body.dark .switch::before{
    left: 20px;
}

.home{
  position: absolute;
  top: 0;
  top: 0;
  left: 250px;
  height: 100vh;
  width: calc(100% - 250px);
  background-color: var(--body-color);
  transition: var(--tran-05);
}

.sidebar.close ~ .home{
  left: 78px;
  height: 100vh;
  width: calc(100% - 78px);
}
body.dark .home .box{
  background-color: #e3e2eb;
}

/* ===== Box ===== */

.container
{
    position: relative;
    max-width: 100%;
    justify-content:center;
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(20%, auto-fill);
    padding: 20px;
}

.box{
    justify-content: center;
    display: flex;
    background-color: rgb(231, 190, 76);
    margin-bottom: 10px;
    margin-left: 8px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    height: 200vh;
    }

/* ===== DataBase table ===== */
    
table tr, td, th {
justify-content: center;
text-align:center;
border-radius: 10px;
outline: none;
border-collapse: collapse;
border: 2px solid black;
padding: 5px 10px;
}

table {
    width: 100%;
    height: 70%;
    justify-content: center;
    text-align: center;
}

.content{
    margin: 0px;
    padding: 0px;
}

/* ===== Upload ===== */

.popup{
    position: absolute;
    top: -150%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
    width: 400px;
    padding: 20px 30px;
    background: white;
    border-radius: 10px;
    transition: top 0ms ease-in-out 200ms,
                opacity 200ms ease-in-out 0ms,
                transform 20ms ease-in-out 0ms;
}

.popup.active{
    top: 40%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: top 0ms ease-in-out 0ms,
    opacity 200ms ease-in-out 0ms,
    transform 20ms ease-in-out 0ms;
}

.popup .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background: #888;
    color: #eee;
    text-align: center;
    line-height: 15px;
    border-radius: 15px;
    cursor: pointer;
}

.popup .form .form-element{
    margin: 15px 0px;
}

.popup .form .form-element label{
    font-size: 14px;
    color: #222;
}

.popup .form .form-element input[type="text"]{
    margin-top:  5px;
    display: block;
    width: 100%;
    padding: 10px;
    outline: none;
    border: 5px solid #aaa;
    border-radius: 5px;
}

.form-element-button{
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    font-size: 15px;
    background:  rgb(231, 190, 76);
    color: #763435;
    border-radius: 10px;
    cursor: pointer;
}

.popup1{
    position: absolute;
    top: -150%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
    width: 330px;
    padding: 20px 30px;
    background: white;
    border-radius: 10px;
    transition: top 0ms ease-in-out 200ms,
                opacity 200ms ease-in-out 0ms,
                transform 20ms ease-in-out 0ms;
}

.popup1.active{
    top: 40%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: top 0ms ease-in-out 0ms,
    opacity 200ms ease-in-out 0ms,
    transform 20ms ease-in-out 0ms;
    text-align: center;
}

.popup1 .close-btn1{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background: #888;
    color: #eee;
    text-align: center;
    line-height: 15px;
    border-radius: 15px;
    cursor: pointer;
}

.form-element-button1{
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    font-size: 15px;
    background:  rgb(231, 190, 76);
    color: #763435;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 50px;
}

.form-element-button2{
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    font-size: 15px;
    background:  rgb(231, 190, 76);
    color: #763435;
    border-radius: 10px;
    cursor: pointer;
}

/*New commits*/
.form-element-button3{
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    font-size: 15px;
    background:  rgb(231, 190, 76);
    color: #763435;
    border-radius: 10px;
    cursor: pointer;
}

Thanks in Adv tlaga mga TOL
PHC - Naethan
 
gawa ka lang isang modal container
then update mo dynamically ang content

or pwede rin magdagdag ka dalawang modal.
isa para sa update at isa para sa delete
then gamitin mo parameters nung function para sa content ng modal.
 
eto lods ayusin mu na lng kung panu mu gusto implement yung edit delete

1671055877859.gif


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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script type="text/javascript" src="sweetalert2.all.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>



  <!----======== CSS ======== -->
  <link rel="stylesheet" href="home_style.css">

  <!----===== Boxicons CSS ===== -->
  <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

</head>


<body>

  <!--<title>Dashboard Sidebar Menu</title>-->
  <nav class="sidebar close">
    <header>
      <div class="image-text">
        <span class="image">
          <img src="logo_png.png" alt="Need Internet Connection">
        </span>

        <div class="text logo-text">
          <span class="name">DIGITAL LIBRARY</span>
        </div>
      </div>

      <i class='bx bx-chevron-right toggle'></i>
    </header>

    <div class="menu-bar">
      <div class="menu">

        <li class="search-box">
          <i class='bx bx-search icon'></i>
          <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
        </li>

        <ul class="menu-links">
          <li class="nav-link">
            <a href="#">
              <i class='bx bx-home-alt icon'></i>
              <span onclick="homeFunction()" class="text nav-text">Home</span>
            </a>
          </li>

          <li class="nav-link btn-upload" id="btnupload">
            <a href="#">
              <i class='bx bx-wallet icon'></i>
              <span class="text nav-text">Upload</span>
            </a>
          </li>

          <!-- START of added buttons for edit/delete -->
          <li class="nav-link btn-edit">
            <a href="#">
              <i class='bx bx-folder-minus icon'></i>
              <span class="text nav-text">Edit</span>
            </a>
          </li>
          <li class="nav-link btn-delete">
            <a href="#">
              <i class='bx bx-trash icon'></i>
              <span class="text nav-text">Delete</span>
            </a>
          </li>
          <!-- END of added buttons for edit/delete -->

        </ul>
      </div>

      <div class="bottom-content">
        <li class="btn-logout">
          <a href="#">
            <i class='bx bx-log-out icon'></i>
            <span class="text nav-text">Logout</span>
          </a>
        </li>

        <li class="mode">
          <div class="sun-moon">
            <i class='bx bx-moon icon moon'></i>
            <i class='bx bx-sun icon sun'></i>
          </div>
          <span class="mode-text text">Dark mode</span>

          <div class="toggle-switch">
            <span class="switch"></span>
          </div>
        </li>

      </div>
    </div>

  </nav>
  <section class="home">


    <div class="container">

      <div class="box">
        <div class="content">
          <table method="PUT" id="allTable">
            <caption>
              <h2>- Main'Board -</h2><br />
            </caption>
            <br />
            <tr>
              <th>Title</th>
              <th>Date</th>
              <th>Course</th>
            </tr>
            <?php
                $conn = mysqli_connect("localhost", "root", "", "upload");
                // Check connection
                if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
                }
                $sql = "SELECT id, title, date, course FROM register";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                echo "<tr><td>" . $row["title"]. "</td><td>" . $row["date"] . "</td><td>"
                . $row["course"]. "</td></tr>";
                }
                echo "</table>";
                } else { echo "0 results"; }
                $conn->close();
            ?>
            <br />
            <br />
          </table>
        </div>
      </div>

    </div>
  </section>




  <!----======== Pop Up ======== -->
  <div class="center">
    <div class="popup modal-upload">
      <div class="close-btn close-btn-upload">&times;</div>
      <div class="form">
        <div class="form-element">
          <span>
            <h2>Upload File</h2>
          </span>
          <br />
          <!----======== Add input ======== -->
          <form method="POST" action="connect.php">
            <input type="text" id="new_Title" name="title" placeholder="Iɴᴘᴜᴛ Tɪᴛʟᴇ" required>
            <br />
            <input type="text" id="new_Date" name="date" placeholder="Iɴᴘᴜᴛ Dᴀᴛᴇ separated with -" required>
            <br />
            <input type="text" id="new_Course" name="course" placeholder="Iɴᴘᴜᴛ Cᴏᴜʀsᴇ" required>
            <br />
            <input type="file" id="myFile" multiple size="50" onchange="myfFunction()">
        </div>
      </div>
      <div>
        <br />
        <button type="submit" onclick="add_Function()" class="form-element-button" id="submit-upload" value=" ">Submit</button>
        <button type="button" onclick="resetFunction()" class="form-element-button" value=" ">Reset</button>
      </div>
    </div>
  </div>
  </form>


  <!-- Logout Function
  // refactored from form-element-button1 to form-element-button logout-yes
  // refactored from form-element-button2 to form-element-button logout-no -->
  <div class="center">
    <div class="popup modal-logout">
      <div>
        <p>Are you sure you want to log out?</p><br>
        <!--<a href="logout.php">--><button class="form-element-button logout-yes">Yes</button></a>
        <button class="form-element-button logout-no">No</button>
      </div>
    </div>
  </div>







  <!-- // new modal edit -->
  <div class="center">
    <div class="popup modal-edit">

      <div class="close-btn close-btn-edit">&times;</div>
      <h3>EDIT</h3>
      <br><br>
      <table>
        <tbody>
          <tr>
            <td>Title</td>
            <td>Date</td>
            <td>Course</td>
          </tr>
        </tbody>
      </table>
      <br><br>
      <form action="" method="post">
        <button type="submit" class="form-element-button edit-yes" value=" ">Save</button>
        <button type="button" class="form-element-button edit-reset" value=" ">Reset</button>
      </form>

    </div>
  </div>
  <!-- // end of modal edit -->

  <!-- // new modal delete -->
  <div class="center">
    <div class="popup modal-delete">

      <div class="close-btn close-btn-delete">&times;</div>
      <h3>DELETE</h3>
      <br><br>
      <table><tbody><tr>
            <td>Title</td>
            <td>Date</td>
            <td>Course</td></tr>
        </tbody>
      </table>
      <br><br>
      <form action="" method="post">
        <button type="submit" class="form-element-button delete-yes" value=" ">Delete</button>
        <button type="button" class="form-element-button  delete-reset" value=" ">Reset</button>
      </form>

    </div>
  </div>
  <!-- // end of modal delete -->

  <script>
    // <!-- // script to show modal-edit -->
    document.querySelector(".btn-edit").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-edit").classList.add("active");
    });

    // < !-- // script to hide modal-edit -->
    document.querySelector(".close-btn-edit").addEventListener("click", function () {
      document.querySelector(".modal-edit").classList.remove("active");
    });

    // < !-- // script to show modal-delete -->
    document.querySelector(".btn-delete").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-delete").classList.add("active");
    });

    // < !-- // script to hide modal-delete -->
    document.querySelector(".close-btn-delete").addEventListener("click", function () {
      document.querySelector(".modal-delete").classList.remove("active");
    });

    // hide all modals first before showing the clicked modal
    const hideModals = () => {
        const popupModals = document.querySelectorAll('.popup');
        popupModals.forEach(eachModal => {
            eachModal.classList.remove('active')
        });
    };
  </script>








  <!----===== Inline-Script ===== -->

  <script>
    // Upload Function
    function add_Function() {
      var new_Title = document.getElementById("new_Title").value;
      var new_Date = document.getElementById("new_Date").value;
      var new_Course = document.getElementById("new_Course").value;

      // this BLOCK of code checks if form is empty
      if (!new_Title || !new_Date || !new_Course) {
        return;
      }
      // END OF BLOCK - form not submitted if empty

      var table = document.getElementById("allTable");
      var table_len = (table.rows.length);
      var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='Title_row" + table_len + "'>" + new_Title + "</td><td id='Date_row" + table_len + "'>" + new_Date + "</td><td id='Course_row" + table_len + "'>" + new_Course + "</td></tr>";

      /* Input reset to " " value, after adding.. Optional just incase Wala akong tiwala hahaha
        document.getElementById("new_Title").value="";
        document.getElementById("new_Date").value="";
        document.getElementById("new_Course").value="";*/

      Swal.fire({
        title: '🇬🇴🇴🇩 🇯🇴🇧!',
        text: 'New Record Added Successfully!',
        imageUrl: 'Homelander.gif',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
      })

      //alert("Successfully added!");*/

    }

    function myfFunction() {
      var x = document.getElementById("myFile");
      var txt = "";
      if ('files' in x) {
        if (x.files.length == 0) {
          txt = "Select one or more files.";
        } else {
          for (var i = 0; i < x.files.length; i++) {
            txt += "<br><strong>" + (i + 1) + ". file</strong><br>";
            var file = x.files[i];
            if ('name' in file) {
              txt += "name: " + file.name + "<br>";
            }
            if ('size' in file) {
              txt += "size: " + file.size + " bytes <br>";
            }
          }
        }
      }
      else {
        if (x.value == "") {
          txt += "Select one or more files.";
        } else {
          txt += "The files property is not supported by your browser!";
          txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
        }
      }
      document.getElementById("demo").innerHTML = txt;
    }

    function resetFunction() {

      document.getElementById("new_Title").value = "";
      document.getElementById("new_Date").value = "";
      document.getElementById("new_Course").value = "";

    }

    function homeFunction() {
      window.location.href = "home.php";
    }

    // Dark & Light mode Function       
    document.querySelector(".btn-upload").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-upload").classList.add("active");
    });

    document.querySelector(".close-btn-upload").addEventListener("click", function () {
      document.querySelector(".modal-upload").classList.remove("active");
    });

    // refactored from .btn-logout1 to .btn-logout && from .popup to modal-logout
    document.querySelector(".btn-logout").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-logout").classList.add("active");
    });

    // Try lng hahaha
    // refactored from .form-element-button1 to .logout-yes && from .popup to modal-logout
    document.querySelector(".logout-yes").addEventListener("click", function () {
      document.querySelector(".modal-logout").classList.remove("active");

      let timerInterval
      Swal.fire({
        title: 'Preparing for Logout, Closing Recent Activities!',
        html: 'Auto close in <b></b> milliseconds.',
        timer: 3000,
        timerProgressBar: true,
        didOpen: () => {
          Swal.showLoading()
          const b = Swal.getHtmlContainer().querySelector('b')
          timerInterval = setInterval(() => {
            b.textContent = Swal.getTimerLeft()
          }, 100)
        },
        willClose: () => {
          clearInterval(timerInterval)
        }
      }).then((result) => {
        /* Read more about handling dismissals below */
        if (result.dismiss === Swal.DismissReason.timer) {
          console.log('I was closed by the timer')
        }
      })

      setTimeout("location.href = 'index.php';", 3500);
    });

    // refactored from .form-element-button2 to .logout-no && from .popup to logout
    document.querySelector(".logout-no").addEventListener("click", function () {
      document.querySelector(".modal-logout").classList.remove("active");
    });

    //create ako var, para di mag flactuate
    var body = document.querySelector('body');
    var sidebar = body.querySelector('nav');
    var toggle = body.querySelector(".toggle");
    var searchBtn = body.querySelector(".search-box");
    var modeSwitch = body.querySelector(".toggle-switch");
    var modeText = body.querySelector(".mode-text");


    toggle.addEventListener("click", () => {
      sidebar.classList.toggle("close");
    })

    searchBtn.addEventListener("click", () => {
      sidebar.classList.remove("close");
    })

    modeSwitch.addEventListener("click", () => {
      body.classList.toggle("dark");

      if (body.classList.contains("dark")) {
        modeText.innerText = "Light mode";
      } else {
        modeText.innerText = "Dark mode";

      }
    });

    //HighLight Function for search
    myFunction = function () {
      // Declare some variables, mate
      var input, filter, table, tr, td, i, txtValue, index;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("allTable");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query para di magka-aberya
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;

          // first clear any previously marked text
          // this strips out the <mark> tags leaving text (Lahat na ng tags)
          td.innerHTML = txtValue;

          index = txtValue.toUpperCase().indexOf(filter);
          if (index > -1) {

            // using substring with index and filter.length
            // nest the matched string inside a <mark> tag
            td.innerHTML = txtValue.substring(0, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length);

            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  </script>
</body>

</html>

CSS:
/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  /* ===== Colors ===== */
  --body-color: #763435;
  --sidebar-color: rgb(231, 190, 76);
  --primary-color: #e3e2eb;
  --primary-color-light: #763435;
  --toggle-color: white;
  --text-color: black;

  /* ====== Transition ====== */
  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;
}

body {
  min-height: 100vh;
  background-color: var(--body-color);
  transition: var(--tran-05);
}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --text-color: #ccc;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  padding: 10px 14px;
  background: var(--sidebar-color);
  transition: var(--tran-05);
  z-index: 100;
}

.sidebar.close {
  width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
  height: 50px;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon {
  min-width: 60px;
  border-radius: 6px;
}

.sidebar .icon {
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sidebar .text,
.sidebar .icon {
  color: var(--text-color);
  transition: var(--tran-03);
}

.sidebar .text {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
}

.sidebar.close .text {
  opacity: 0;
}

/* =========================== */

.sidebar header {
  position: relative;
}

.sidebar header .image-text {
  display: flex;
  align-items: center;
}

.sidebar header .logo-text {
  display: flex;
  flex-direction: column;
}

header .image-text .name {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
}


.sidebar header .image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar header .image img {
  width: 60px;
  border-radius: 6px;
}

.sidebar header .toggle {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) rotate(180deg);
  height: 25px;
  width: 25px;
  background-color: var(--primary-color);
  color: var(--sidebar-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: var(--tran-05);
}

body.dark .sidebar header .toggle {
  color: var(--text-color);
}

.sidebar.close .toggle {
  transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
  margin-top: 40px;
}

.sidebar li.search-box {
  border-radius: 6px;
  background-color: var(--primary-color-light);
  cursor: pointer;
  transition: var(--tran-05);
}

.sidebar li.search-box input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--primary-color-light);
  color: white;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 500;
  transition: var(--tran-05);
}

.sidebar li a {
  list-style: none;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  text-decoration: none;
  transition: var(--tran-03);
}

.sidebar li a:hover {

  background-color: #763435;
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text {
  color: var(--sidebar-color);

}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
  color: var(--text-color);

}

.sidebar .menu-bar {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
}

.menu-bar::-webkit-scrollbar {
  display: none;
}

.sidebar .menu-bar .mode {
  border-radius: 6px;
  background-color: var(--primary-color-light);
  position: relative;
  transition: var(--tran-05);
}

.menu-bar .mode .sun-moon {
  height: 50px;
  width: 60px;
}

.mode .sun-moon i {
  position: absolute;
}

.mode .sun-moon i.sun {
  opacity: 0;
}

body.dark .mode .sun-moon i.sun {
  opacity: 1;
}

body.dark .mode .sun-moon i.moon {
  opacity: 0;
}

.menu-bar .bottom-content .toggle-switch {
  position: absolute;
  right: 0;
  height: 100%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

.toggle-switch .switch {
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--toggle-color);
  transition: var(--tran-05);
}

.switch::before {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: var(--sidebar-color);
  transition: var(--tran-04);
}

body.dark .switch::before {
  left: 20px;
}

.home {
  position: absolute;
  top: 0;
  top: 0;
  left: 250px;
  height: 100vh;
  width: calc(100% - 250px);
  background-color: var(--body-color);
  transition: var(--tran-05);
}

.sidebar.close~.home {
  left: 78px;
  height: 100vh;
  width: calc(100% - 78px);
}

body.dark .home .box {
  background-color: #e3e2eb;
}

/* ===== Box ===== */

.container {
  position: relative;
  max-width: 100%;
  justify-content: center;
  display: flex;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: minmax(20%, auto-fill);
  padding: 20px;
}

.box {
  justify-content: center;
  display: flex;
  background-color: rgb(231, 190, 76);
  margin-bottom: 10px;
  margin-left: 8px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  width: 100%;
  height: 200vh;
}

/* ===== DataBase table ===== */

table tr,
td,
th {
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  outline: none;
  border-collapse: collapse;
  border: 2px solid black;
  padding: 5px 10px;
}

table {
  width: 100%;
  height: 70%;
  justify-content: center;
  text-align: center;
}

.content {
  margin: 0px;
  padding: 0px;
}

/* ===== Upload ===== */

.popup {
  position: absolute;
  top: -150%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.15);
  width: 400px;
  padding: 20px 30px;
  background: white;
  border-radius: 10px;
  transition: top 0ms ease-in-out 200ms,
    opacity 200ms ease-in-out 0ms,
    transform 70ms ease-in-out 0ms;
}

.popup.active {
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}

.popup .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: #888;
  color: #eee;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  cursor: pointer;
}

.popup .form .form-element {
  margin: 15px 0px;
}

.popup .form .form-element label {
  font-size: 14px;
  color: #222;
}

.popup .form .form-element input[type="text"] {
  margin-top: 5px;
  display: block;
  width: 100%;
  padding: 10px;
  outline: none;
  border: 5px solid #aaa;
  border-radius: 5px;
}

.form-element-button {
  width: 100px;
  height: 30px;
  border: none;
  outline: none;
  font-size: 15px;
  background: rgb(231, 190, 76);
  color: #763435;
  border-radius: 10px;
  cursor: pointer;
}

/* refactored code here */
/* deleted redundant styles copied from main popup to the logout popup */
.form-element-button.logout-yes {
  margin-right: 50px;
}

.popup.modal-logout {
  width: 330px;
}

.center {
  text-align: center;
  margin: auto;
}
 

Attachments

eto lods ayusin mu na lng kung panu mu gusto implement yung edit delete

View attachment 2402519

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script type="text/javascript" src="sweetalert2.all.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>



  <!----======== CSS ======== -->
  <link rel="stylesheet" href="home_style.css">

  <!----===== Boxicons CSS ===== -->
  <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

</head>


<body>

  <!--<title>Dashboard Sidebar Menu</title>-->
  <nav class="sidebar close">
    <header>
      <div class="image-text">
        <span class="image">
          <img src="logo_png.png" alt="Need Internet Connection">
        </span>

        <div class="text logo-text">
          <span class="name">DIGITAL LIBRARY</span>
        </div>
      </div>

      <i class='bx bx-chevron-right toggle'></i>
    </header>

    <div class="menu-bar">
      <div class="menu">

        <li class="search-box">
          <i class='bx bx-search icon'></i>
          <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
        </li>

        <ul class="menu-links">
          <li class="nav-link">
            <a href="#">
              <i class='bx bx-home-alt icon'></i>
              <span onclick="homeFunction()" class="text nav-text">Home</span>
            </a>
          </li>

          <li class="nav-link btn-upload" id="btnupload">
            <a href="#">
              <i class='bx bx-wallet icon'></i>
              <span class="text nav-text">Upload</span>
            </a>
          </li>

          <!-- START of added buttons for edit/delete -->
          <li class="nav-link btn-edit">
            <a href="#">
              <i class='bx bx-folder-minus icon'></i>
              <span class="text nav-text">Edit</span>
            </a>
          </li>
          <li class="nav-link btn-delete">
            <a href="#">
              <i class='bx bx-trash icon'></i>
              <span class="text nav-text">Delete</span>
            </a>
          </li>
          <!-- END of added buttons for edit/delete -->

        </ul>
      </div>

      <div class="bottom-content">
        <li class="btn-logout">
          <a href="#">
            <i class='bx bx-log-out icon'></i>
            <span class="text nav-text">Logout</span>
          </a>
        </li>

        <li class="mode">
          <div class="sun-moon">
            <i class='bx bx-moon icon moon'></i>
            <i class='bx bx-sun icon sun'></i>
          </div>
          <span class="mode-text text">Dark mode</span>

          <div class="toggle-switch">
            <span class="switch"></span>
          </div>
        </li>

      </div>
    </div>

  </nav>
  <section class="home">


    <div class="container">

      <div class="box">
        <div class="content">
          <table method="PUT" id="allTable">
            <caption>
              <h2>- Main'Board -</h2><br />
            </caption>
            <br />
            <tr>
              <th>Title</th>
              <th>Date</th>
              <th>Course</th>
            </tr>
            <?php
                $conn = mysqli_connect("localhost", "root", "", "upload");
                // Check connection
                if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
                }
                $sql = "SELECT id, title, date, course FROM register";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) {
                // output data of each row
                while($row = $result->fetch_assoc()) {
                echo "<tr><td>" . $row["title"]. "</td><td>" . $row["date"] . "</td><td>"
                . $row["course"]. "</td></tr>";
                }
                echo "</table>";
                } else { echo "0 results"; }
                $conn->close();
            ?>
            <br />
            <br />
          </table>
        </div>
      </div>

    </div>
  </section>




  <!----======== Pop Up ======== -->
  <div class="center">
    <div class="popup modal-upload">
      <div class="close-btn close-btn-upload">&times;</div>
      <div class="form">
        <div class="form-element">
          <span>
            <h2>Upload File</h2>
          </span>
          <br />
          <!----======== Add input ======== -->
          <form method="POST" action="connect.php">
            <input type="text" id="new_Title" name="title" placeholder="Iɴᴘᴜᴛ Tɪᴛʟᴇ" required>
            <br />
            <input type="text" id="new_Date" name="date" placeholder="Iɴᴘᴜᴛ Dᴀᴛᴇ separated with -" required>
            <br />
            <input type="text" id="new_Course" name="course" placeholder="Iɴᴘᴜᴛ Cᴏᴜʀsᴇ" required>
            <br />
            <input type="file" id="myFile" multiple size="50" onchange="myfFunction()">
        </div>
      </div>
      <div>
        <br />
        <button type="submit" onclick="add_Function()" class="form-element-button" id="submit-upload" value=" ">Submit</button>
        <button type="button" onclick="resetFunction()" class="form-element-button" value=" ">Reset</button>
      </div>
    </div>
  </div>
  </form>


  <!-- Logout Function
  // refactored from form-element-button1 to form-element-button logout-yes
  // refactored from form-element-button2 to form-element-button logout-no -->
  <div class="center">
    <div class="popup modal-logout">
      <div>
        <p>Are you sure you want to log out?</p><br>
        <!--<a href="logout.php">--><button class="form-element-button logout-yes">Yes</button></a>
        <button class="form-element-button logout-no">No</button>
      </div>
    </div>
  </div>







  <!-- // new modal edit -->
  <div class="center">
    <div class="popup modal-edit">

      <div class="close-btn close-btn-edit">&times;</div>
      <h3>EDIT</h3>
      <br><br>
      <table>
        <tbody>
          <tr>
            <td>Title</td>
            <td>Date</td>
            <td>Course</td>
          </tr>
        </tbody>
      </table>
      <br><br>
      <form action="" method="post">
        <button type="submit" class="form-element-button edit-yes" value=" ">Save</button>
        <button type="button" class="form-element-button edit-reset" value=" ">Reset</button>
      </form>

    </div>
  </div>
  <!-- // end of modal edit -->

  <!-- // new modal delete -->
  <div class="center">
    <div class="popup modal-delete">

      <div class="close-btn close-btn-delete">&times;</div>
      <h3>DELETE</h3>
      <br><br>
      <table><tbody><tr>
            <td>Title</td>
            <td>Date</td>
            <td>Course</td></tr>
        </tbody>
      </table>
      <br><br>
      <form action="" method="post">
        <button type="submit" class="form-element-button delete-yes" value=" ">Delete</button>
        <button type="button" class="form-element-button  delete-reset" value=" ">Reset</button>
      </form>

    </div>
  </div>
  <!-- // end of modal delete -->

  <script>
    // <!-- // script to show modal-edit -->
    document.querySelector(".btn-edit").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-edit").classList.add("active");
    });

    // < !-- // script to hide modal-edit -->
    document.querySelector(".close-btn-edit").addEventListener("click", function () {
      document.querySelector(".modal-edit").classList.remove("active");
    });

    // < !-- // script to show modal-delete -->
    document.querySelector(".btn-delete").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-delete").classList.add("active");
    });

    // < !-- // script to hide modal-delete -->
    document.querySelector(".close-btn-delete").addEventListener("click", function () {
      document.querySelector(".modal-delete").classList.remove("active");
    });

    // hide all modals first before showing the clicked modal
    const hideModals = () => {
        const popupModals = document.querySelectorAll('.popup');
        popupModals.forEach(eachModal => {
            eachModal.classList.remove('active')
        });
    };
  </script>








  <!----===== Inline-Script ===== -->

  <script>
    // Upload Function
    function add_Function() {
      var new_Title = document.getElementById("new_Title").value;
      var new_Date = document.getElementById("new_Date").value;
      var new_Course = document.getElementById("new_Course").value;

      // this BLOCK of code checks if form is empty
      if (!new_Title || !new_Date || !new_Course) {
        return;
      }
      // END OF BLOCK - form not submitted if empty

      var table = document.getElementById("allTable");
      var table_len = (table.rows.length);
      var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='Title_row" + table_len + "'>" + new_Title + "</td><td id='Date_row" + table_len + "'>" + new_Date + "</td><td id='Course_row" + table_len + "'>" + new_Course + "</td></tr>";

      /* Input reset to " " value, after adding.. Optional just incase Wala akong tiwala hahaha
        document.getElementById("new_Title").value="";
        document.getElementById("new_Date").value="";
        document.getElementById("new_Course").value="";*/

      Swal.fire({
        title: '🇬🇴🇴🇩 🇯🇴🇧!',
        text: 'New Record Added Successfully!',
        imageUrl: 'Homelander.gif',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
      })

      //alert("Successfully added!");*/

    }

    function myfFunction() {
      var x = document.getElementById("myFile");
      var txt = "";
      if ('files' in x) {
        if (x.files.length == 0) {
          txt = "Select one or more files.";
        } else {
          for (var i = 0; i < x.files.length; i++) {
            txt += "<br><strong>" + (i + 1) + ". file</strong><br>";
            var file = x.files[i];
            if ('name' in file) {
              txt += "name: " + file.name + "<br>";
            }
            if ('size' in file) {
              txt += "size: " + file.size + " bytes <br>";
            }
          }
        }
      }
      else {
        if (x.value == "") {
          txt += "Select one or more files.";
        } else {
          txt += "The files property is not supported by your browser!";
          txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
        }
      }
      document.getElementById("demo").innerHTML = txt;
    }

    function resetFunction() {

      document.getElementById("new_Title").value = "";
      document.getElementById("new_Date").value = "";
      document.getElementById("new_Course").value = "";

    }

    function homeFunction() {
      window.location.href = "home.php";
    }

    // Dark & Light mode Function    
    document.querySelector(".btn-upload").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-upload").classList.add("active");
    });

    document.querySelector(".close-btn-upload").addEventListener("click", function () {
      document.querySelector(".modal-upload").classList.remove("active");
    });

    // refactored from .btn-logout1 to .btn-logout && from .popup to modal-logout
    document.querySelector(".btn-logout").addEventListener("click", function () {
      hideModals();
      document.querySelector(".modal-logout").classList.add("active");
    });

    // Try lng hahaha
    // refactored from .form-element-button1 to .logout-yes && from .popup to modal-logout
    document.querySelector(".logout-yes").addEventListener("click", function () {
      document.querySelector(".modal-logout").classList.remove("active");

      let timerInterval
      Swal.fire({
        title: 'Preparing for Logout, Closing Recent Activities!',
        html: 'Auto close in <b></b> milliseconds.',
        timer: 3000,
        timerProgressBar: true,
        didOpen: () => {
          Swal.showLoading()
          const b = Swal.getHtmlContainer().querySelector('b')
          timerInterval = setInterval(() => {
            b.textContent = Swal.getTimerLeft()
          }, 100)
        },
        willClose: () => {
          clearInterval(timerInterval)
        }
      }).then((result) => {
        /* Read more about handling dismissals below */
        if (result.dismiss === Swal.DismissReason.timer) {
          console.log('I was closed by the timer')
        }
      })

      setTimeout("location.href = 'index.php';", 3500);
    });

    // refactored from .form-element-button2 to .logout-no && from .popup to logout
    document.querySelector(".logout-no").addEventListener("click", function () {
      document.querySelector(".modal-logout").classList.remove("active");
    });

    //create ako var, para di mag flactuate
    var body = document.querySelector('body');
    var sidebar = body.querySelector('nav');
    var toggle = body.querySelector(".toggle");
    var searchBtn = body.querySelector(".search-box");
    var modeSwitch = body.querySelector(".toggle-switch");
    var modeText = body.querySelector(".mode-text");


    toggle.addEventListener("click", () => {
      sidebar.classList.toggle("close");
    })

    searchBtn.addEventListener("click", () => {
      sidebar.classList.remove("close");
    })

    modeSwitch.addEventListener("click", () => {
      body.classList.toggle("dark");

      if (body.classList.contains("dark")) {
        modeText.innerText = "Light mode";
      } else {
        modeText.innerText = "Dark mode";

      }
    });

    //HighLight Function for search
    myFunction = function () {
      // Declare some variables, mate
      var input, filter, table, tr, td, i, txtValue, index;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("allTable");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query para di magka-aberya
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;

          // first clear any previously marked text
          // this strips out the <mark> tags leaving text (Lahat na ng tags)
          td.innerHTML = txtValue;

          index = txtValue.toUpperCase().indexOf(filter);
          if (index > -1) {

            // using substring with index and filter.length
            // nest the matched string inside a <mark> tag
            td.innerHTML = txtValue.substring(0, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length);

            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  </script>
</body>

</html>

CSS:
/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  /* ===== Colors ===== */
  --body-color: #763435;
  --sidebar-color: rgb(231, 190, 76);
  --primary-color: #e3e2eb;
  --primary-color-light: #763435;
  --toggle-color: white;
  --text-color: black;

  /* ====== Transition ====== */
  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;
}

body {
  min-height: 100vh;
  background-color: var(--body-color);
  transition: var(--tran-05);
}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --text-color: #ccc;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  padding: 10px 14px;
  background: var(--sidebar-color);
  transition: var(--tran-05);
  z-index: 100;
}

.sidebar.close {
  width: 88px;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
  height: 50px;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon {
  min-width: 60px;
  border-radius: 6px;
}

.sidebar .icon {
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sidebar .text,
.sidebar .icon {
  color: var(--text-color);
  transition: var(--tran-03);
}

.sidebar .text {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
}

.sidebar.close .text {
  opacity: 0;
}

/* =========================== */

.sidebar header {
  position: relative;
}

.sidebar header .image-text {
  display: flex;
  align-items: center;
}

.sidebar header .logo-text {
  display: flex;
  flex-direction: column;
}

header .image-text .name {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
}


.sidebar header .image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar header .image img {
  width: 60px;
  border-radius: 6px;
}

.sidebar header .toggle {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) rotate(180deg);
  height: 25px;
  width: 25px;
  background-color: var(--primary-color);
  color: var(--sidebar-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: var(--tran-05);
}

body.dark .sidebar header .toggle {
  color: var(--text-color);
}

.sidebar.close .toggle {
  transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
  margin-top: 40px;
}

.sidebar li.search-box {
  border-radius: 6px;
  background-color: var(--primary-color-light);
  cursor: pointer;
  transition: var(--tran-05);
}

.sidebar li.search-box input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--primary-color-light);
  color: white;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 500;
  transition: var(--tran-05);
}

.sidebar li a {
  list-style: none;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  text-decoration: none;
  transition: var(--tran-03);
}

.sidebar li a:hover {

  background-color: #763435;
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text {
  color: var(--sidebar-color);

}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
  color: var(--text-color);

}

.sidebar .menu-bar {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
}

.menu-bar::-webkit-scrollbar {
  display: none;
}

.sidebar .menu-bar .mode {
  border-radius: 6px;
  background-color: var(--primary-color-light);
  position: relative;
  transition: var(--tran-05);
}

.menu-bar .mode .sun-moon {
  height: 50px;
  width: 60px;
}

.mode .sun-moon i {
  position: absolute;
}

.mode .sun-moon i.sun {
  opacity: 0;
}

body.dark .mode .sun-moon i.sun {
  opacity: 1;
}

body.dark .mode .sun-moon i.moon {
  opacity: 0;
}

.menu-bar .bottom-content .toggle-switch {
  position: absolute;
  right: 0;
  height: 100%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

.toggle-switch .switch {
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--toggle-color);
  transition: var(--tran-05);
}

.switch::before {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: var(--sidebar-color);
  transition: var(--tran-04);
}

body.dark .switch::before {
  left: 20px;
}

.home {
  position: absolute;
  top: 0;
  top: 0;
  left: 250px;
  height: 100vh;
  width: calc(100% - 250px);
  background-color: var(--body-color);
  transition: var(--tran-05);
}

.sidebar.close~.home {
  left: 78px;
  height: 100vh;
  width: calc(100% - 78px);
}

body.dark .home .box {
  background-color: #e3e2eb;
}

/* ===== Box ===== */

.container {
  position: relative;
  max-width: 100%;
  justify-content: center;
  display: flex;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: minmax(20%, auto-fill);
  padding: 20px;
}

.box {
  justify-content: center;
  display: flex;
  background-color: rgb(231, 190, 76);
  margin-bottom: 10px;
  margin-left: 8px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  width: 100%;
  height: 200vh;
}

/* ===== DataBase table ===== */

table tr,
td,
th {
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  outline: none;
  border-collapse: collapse;
  border: 2px solid black;
  padding: 5px 10px;
}

table {
  width: 100%;
  height: 70%;
  justify-content: center;
  text-align: center;
}

.content {
  margin: 0px;
  padding: 0px;
}

/* ===== Upload ===== */

.popup {
  position: absolute;
  top: -150%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.15);
  width: 400px;
  padding: 20px 30px;
  background: white;
  border-radius: 10px;
  transition: top 0ms ease-in-out 200ms,
    opacity 200ms ease-in-out 0ms,
    transform 70ms ease-in-out 0ms;
}

.popup.active {
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}

.popup .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: #888;
  color: #eee;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  cursor: pointer;
}

.popup .form .form-element {
  margin: 15px 0px;
}

.popup .form .form-element label {
  font-size: 14px;
  color: #222;
}

.popup .form .form-element input[type="text"] {
  margin-top: 5px;
  display: block;
  width: 100%;
  padding: 10px;
  outline: none;
  border: 5px solid #aaa;
  border-radius: 5px;
}

.form-element-button {
  width: 100px;
  height: 30px;
  border: none;
  outline: none;
  font-size: 15px;
  background: rgb(231, 190, 76);
  color: #763435;
  border-radius: 10px;
  cursor: pointer;
}

/* refactored code here */
/* deleted redundant styles copied from main popup to the logout popup */
.form-element-button.logout-yes {
  margin-right: 50px;
}

.popup.modal-logout {
  width: 330px;
}

.center {
  text-align: center;
  margin: auto;
}
Abat in-adjust pa nga.. Salamat TOL!! Gusto mo kiss ?
Sana merry ang christmass mo

$You = "Merry_Christmast";

if($You == True)
{

echo "Dapat Lang!!";
}

else
{

echo "Hinde pwede, dapat Merry christmass padin!!";
}

sana sakin din may Back-End pa akong gagawin hayup nayan hahaha, ka grupo hayahay lng hahaha
 
Last edited:

Similar threads

Back
Top