PHC - Naethan
Forum Expert
- Joined
- Dec 27, 2016
- Posts
- 3,374
- Reaction
- 18,121
- Points
- 2,599
- 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!!
Thanks in Adv tlaga mga TOL
PHC - Naethan
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">×</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