Haluk
Özel Üye
- Katılım
- 7 Temmuz 2004
- Mesajlar
- 12,406
- Excel Vers. ve Dili
-
64 Bit 2010 - İngilizce
+
Google Sheets
+
JScript
- Altın Üyelik Bitiş Tarihi
- ∞
Merhaba,
Lokal bir HTML dosyasında tarayıcının LocalStorage'ına ufak tefek bilgileri yazma, okuma, silme, formu PDF olarak yazdırma vb işleri yapan bir HTML ve JavaScript çalışmasına ait hazırladığım kodlar aşağıdadır.
İlk çalıştırıldığında, LocalStorage'ınız da ilgili verileri bulamadığı için sizden formu doldurup Update - Güncelleme yapmanız istenecektir. Güncelledikten sonra HTML kapattığınızda bu veriler silinmez. Herhangibir zaman dosyayı tekrar açtığınızda, LocalStorage'daki veriler HTML sayfasındaki forma işlenir.
Form verileri istenildiğinde LocalStorage'dan ebediyen silinebilir veya güncellenebilir. Çeşit olsun diye, formun "UserName" bölümünde veri girişinde istenildiğinde aktif edilebilen maskeleme kullanılmış, yazdırma butonuna tıklandığında form üzerindeki butonların, maskeleme elemanlarının gizlenerek yazdırılması sağlanmış, tarayıcının default-varsayılan butonları görsel olarak geliştirilmiş, üzerlerine tıklandığında hafifçe küçülerek, gölgelenme yapılmak suretiyle ActiveX butonları gibi bir görsellik verilmeye çalışılmıştır. Formu PDF olarak yazdırırken, otomatik olarak üretilen header-footer (üst-alt bilgi) engellenmiş, onun yerine formun sonunda yazdırılma tarihinin yazdırılması sağlanmış, sayfa üzerindeki marjinlerde ayarlama yapılmıştır. Kodlar incelendiğinde, herşeyin çok esnek olduğu ve ihtiyaca göre şekillendirilebileceği görülmektedir.
Form dizaynı ve içeriği ihtiyaca göre revize edilerek, kullanılabilir. LocalStorage nesnesine sadece aynı domain üzerinden erişilebildiği için, kişisel ev kullanıcıları için çok fazla risk barındırmaz diye düşünüyorum, ama yine de çok önemli bilgileri yazmamakta fayda var tabii.....
Konu hakkında geliştirmeye yönelik herhangibir soruyu cevaplayamayacağımı, peşinen bildiririm çünkü o tür isteklerin sonu gelmez. HTML, CSS ve JavaScript ile ilgilenenler için faydalı olabileceğini düşündüğüm kodlama teknikleri olduğu için paylaşmak istedim.
İyi akşamlar,
.
Lokal bir HTML dosyasında tarayıcının LocalStorage'ına ufak tefek bilgileri yazma, okuma, silme, formu PDF olarak yazdırma vb işleri yapan bir HTML ve JavaScript çalışmasına ait hazırladığım kodlar aşağıdadır.
İlk çalıştırıldığında, LocalStorage'ınız da ilgili verileri bulamadığı için sizden formu doldurup Update - Güncelleme yapmanız istenecektir. Güncelledikten sonra HTML kapattığınızda bu veriler silinmez. Herhangibir zaman dosyayı tekrar açtığınızda, LocalStorage'daki veriler HTML sayfasındaki forma işlenir.
Form verileri istenildiğinde LocalStorage'dan ebediyen silinebilir veya güncellenebilir. Çeşit olsun diye, formun "UserName" bölümünde veri girişinde istenildiğinde aktif edilebilen maskeleme kullanılmış, yazdırma butonuna tıklandığında form üzerindeki butonların, maskeleme elemanlarının gizlenerek yazdırılması sağlanmış, tarayıcının default-varsayılan butonları görsel olarak geliştirilmiş, üzerlerine tıklandığında hafifçe küçülerek, gölgelenme yapılmak suretiyle ActiveX butonları gibi bir görsellik verilmeye çalışılmıştır. Formu PDF olarak yazdırırken, otomatik olarak üretilen header-footer (üst-alt bilgi) engellenmiş, onun yerine formun sonunda yazdırılma tarihinin yazdırılması sağlanmış, sayfa üzerindeki marjinlerde ayarlama yapılmıştır. Kodlar incelendiğinde, herşeyin çok esnek olduğu ve ihtiyaca göre şekillendirilebileceği görülmektedir.
Form dizaynı ve içeriği ihtiyaca göre revize edilerek, kullanılabilir. LocalStorage nesnesine sadece aynı domain üzerinden erişilebildiği için, kişisel ev kullanıcıları için çok fazla risk barındırmaz diye düşünüyorum, ama yine de çok önemli bilgileri yazmamakta fayda var tabii.....
Konu hakkında geliştirmeye yönelik herhangibir soruyu cevaplayamayacağımı, peşinen bildiririm çünkü o tür isteklerin sonu gelmez. HTML, CSS ve JavaScript ile ilgilenenler için faydalı olabileceğini düşündüğüm kodlama teknikleri olduğu için paylaşmak istedim.
İyi akşamlar,
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<style>
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0; /* Remove header */
margin-bottom: 0; /* Remove footer */
}
body {
margin-left: 0.8cm;
margin-top: 1.5cm;
-webkit-print-color-adjust:exact !important; /* For use in Chrome but the user may need to select to print colors from printing settings */
print-color-adjust:exact !important; /* For use in FireFox but the user may need to select to print colors from printing settings */
}
}
label {
display: inline-block;
width: 90px;
}
.myInfo {
background-color:powderblue;
width:500px;
height:40px;
display: flex;
justify-content: center;
line-height: 40px;
}
.submitB {
background-color: #555;
color:white;
width: 80px;
height: 22px;
font-size: 14px;
border-radius: 8px;
font-weight: bold;
}
.submitB:hover{
cursor: pointer;
}
.submitB:active{
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
transform: scale(0.95);
}
</style>
<title>Membership Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" content="notranslate"/>
<script type="text/javascript">
function deleteData(){
localStorage.removeItem('memberdata');
document.getElementById("membershipForm").reset();
document.getElementById('infoDiv').innerHTML = 'Your membership details not found. Please fill the form below and update.';
}
</script>
</head>
<body>
<br>
<div id="infoDiv" class="myInfo"></div>
<div id="formDiv" class="formDiv" style="width:500px">
<form id="membershipForm" autocomplete="off" style= "text-align: left;">
<fieldset>
<legend>Membership Form</legend>
<br>
<div><label for="Firstname">First Name: </label><input id="Firstname" type="text" name="First_N" autocomplete="off" required style="left: 100px" /></div>
<br>
<div><label for="LastName">Last Name: </label><input id="LastName" type="text" name="Last_N" autocomplete="off" required /></div>
<br>
<div><label for="userN">Username: </label><input type="password" id="userN" name="Username" autocomplete="off" required />
<i class="bi bi-eye-slash" id="toggleUserName" style="margin-left: -25px; color:blue;"></i> <!-- Position of the eye in the input is adjusted by negative margin -->
</div>
<br>
<div><label for="BthDate">Birth Date: </label><input id="BthDate" type="date" name="Bdate" required /></div>
<br>
<div><label for="EML">E-Mail: </label><input id="EML" type="email" name="Email" autocomplete="off" required /></div>
<br>
<input class="submitB" type="submit" value="Update" />
<input class="submitB" type="button" value="Delete" onclick="deleteData()" />
<input class="submitB" type="button" value="Print" onclick="printPage()" />
</fieldset>
</form>
</div>
<br>
<div id="footerID" style="font-size: 10px;"></div>
<script type="text/javascript">
const togglePassword = document.querySelector("#toggleUserName");
const password = document.querySelector("#userN");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
</script>
<script type="text/javascript">
var xData= JSON.parse(localStorage.getItem('memberdata')) || [];
if (xData.length == 0) {document.getElementById('infoDiv').innerHTML = 'Your membership details not found. Please fill the form below and update.';};
if (Object.keys(xData).length > 0) {
document.getElementsByName("First_N")[0].value= xData.FirstName;
document.getElementsByName("Last_N")[0].value= xData.LastName;
document.getElementsByName("Username")[0].value= xData.UserName;
document.getElementsByName("Bdate")[0].value= xData.BirthDate;
document.getElementsByName("Email")[0].value= xData.Email;
document.getElementById('infoDiv').innerHTML= 'Last Updated on: ' + xData.LastUpdate;
}
</script>
<script type="text/javascript">
document.getElementById("membershipForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
// Collect form data
const formData = {
"FirstName": this.elements["First_N"].value,
"LastName": this.elements["Last_N"].value,
"UserName": this.elements["Username"].value,
"BirthDate": this.elements["Bdate"].value,
"Email": this.elements["Email"].value,
"LastUpdate": new Date().toLocaleString() // Last Update timestamp is added for the info division
};
// Convert form data to JSON format
const jsonData = JSON.stringify(formData, null, 2);
console.log(jsonData);
// Write to local storage
localStorage.setItem( 'memberdata', jsonData );
// Inform the user
document.getElementById('infoDiv').innerHTML = 'Last Updated on: ' + formData.LastUpdate;
});
</script>
<script type="text/javascript">
// Print page after customizing the layout....
function printPage(){
// Set buttons and eye style to 'hidden' and write the custom footer
const buttons= document.getElementsByClassName("submitB");
var i;
for (i = 0; i < buttons.length; i++) {
buttons[i].style.visibility = 'hidden';
}
myFooter= document.getElementById('footerID');
myFooter.innerHTML= 'Printed on: ' + new Date().toLocaleString();
const password = document.querySelector("#userN");
if( password.getAttribute("type") === "password"){
password.setAttribute("type", "text")
}
document.getElementById('toggleUserName').style.visibility = 'hidden';
window.print();
// Set buttons and eye style back to 'visible' and clear the custom footer
for (i = 0; i < buttons.length; i++) {
buttons[i].style.visibility = 'visible';
}
document.getElementById('toggleUserName').style.visibility = 'visible';
myFooter.innerHTML= '' ;
}
</script>
</body>
</html>.
ama kesin yararlıdır 
