Adım-Adım Php İlə Namaz Vaxtı Kodu Yazırıq

Gədəbəy · 24 Noy 2023

Gədəbəydən Salamlar)

Gəlin özmüzü inkişaf etdirək və bu koda kimin əlavə kod əlavə etmək istəsə əlavə xüsusiyyət kodunu yazsın əlavə edək və birlikdə Namaz vaxı scirpti inkişaf etdirək.

Deməli aşağıdakı kodda istifadə etdiglərmiz dillər. Php, javasicrp, html, css.

Api ilə Muslim World League rəsmi saytından məlumatları çəkirik bunu qafqaz müsəlmanlar idarəsindən çəkmək olar lakin məlumatları sql, txt, kimi məlumat bazaları yaradıb toplamalıyaq.

2 şəhər mövcuddur, Gədəbəy, Bakı, öz şəhərnizi əlavə etməklə başlaya bilərsiniz.
Seçilən şəhərə görə arxa fonda o şəhərə aid şəkil göstərilir.
Və javascrpitdən istifadə edərək keçən namaz vaxtlarını boz, indiki namaz vaxtını yaşıl, və gələcək namaz vaxtını mavi rəngdə göstərdik həmçinin namaz vaxtına qalan vaxtıda hesablayıb göstəririk.

Sizdə təkminləşdirmək istədiyiniz kodu yazın.

Kod:

<!DOCTYPE html>

<!--// Madin Gədədbəy)
//Kod əlavəsi et səndə öz rayon və şəhərini yaz. -->
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namaz Vaxtları</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .container {
            max-width: 600px;
            margin: 50px auto;
    background-color: rgba(255, 255, 255, 0.8);

            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        select, input[type="submit"] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input[type="submit"] {
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            border: none;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        
        
       .timings {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.timings th, .timings td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.timings th {
    background-color: #f2f2f2;
    font-weight: bold;
}



 /* Keçmiş vaxtlar üçün rəng */
    .past {
        background-color: #ff8080; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
        color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
    }

    /* Cari vaxtlar üçün rəng */
    .current {
        background-color: #4CAF50; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
        color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
    }

    /* Gələcək vaxtlar üçün rəng */
    .upcoming {
        background-color: #66a3ff; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
        color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
    }


        
        
        
        
    </style>
</head>
<?php
// Seçilən şəhərə görə, şəhərə aid şəkili arxa fonda göstəririk
$selectedCity = isset($_GET["city"]) ? $_GET["city"] : '';
$backgroundStyle = "";
if ($selectedCity) {
    $backgroundStyle = "style=\"background-image: url('$selectedCity.jpeg')\"";
}
?>
<body <?php echo $backgroundStyle; ?>>
<div class="container">
    <h1>Namaz Vaxtları</h1>
    <form action="namaz_vaxti.php" method="get">
        Şəhər və ya Rayon:
        <select name="city">
            <option value="Baku" <?php echo ($selectedCity == 'Baku') ? 'selected' : ''; ?>>Baku</option>
            <option value="Gedebey" <?php echo ($selectedCity == 'Gedebey') ? 'selected' : ''; ?>>Gedebey</option>
        </select>
        <input type="submit" value="Namaz Vaxtlarını Göstər">
    </form>
    <?php
    if ($selectedCity) {
        $country = "Azerbaijan";
        $method = 2; // Hesablama üsulu. 2 - MWL (Muslim World League bunu qafqaz müsəlmanlar idarəsindən çəkmək olar lakin məlumatları sql, txt, kimi məlumat bazaları yaradıb toplamalıyaq)

        $api_url = "http://api.aladhan.com/v1/timingsByCity?city=$selectedCity&country=$country&method=$method";

        $response = file_get_contents($api_url);
        $data = json_decode($response, true);

        $timings = $data['data']['timings'];

       echo "
      
      
      
       <table class='timings'>
    <thead>
        <tr>
            <th>Sübh</th>
            <th>Zöhür</th>
            <th>Əsir</th>
            <th>Məğrib</th>
            <th>İşa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id='fajrTime'>" . $timings['Fajr'] . "</td>
            <td id='dhuhrTime'>" . $timings['Dhuhr'] . "</td>
            <td id='asrTime'>" . $timings['Asr'] . "</td>
            <td id='maghribTime'>" . $timings['Maghrib'] . "</td>
            <td id='ishaTime'>" . $timings['Isha'] . "</td>
        </tr>
    </tbody>
</table>

      
      
      
      
      
      
      
      
      
      

<!-- Yeni bölmə: Namaz vaxtlarına qalan vaxt -->
<div class='timings' id='remainingTimeSection'>
    <h2>Qalan Vaxt</h2>
    <div class='timing' id='untilDhuhr'></div>
    <div class='timing' id='untilAsr'></div>
    <div class='timing' id='untilMaghrib'></div>
    <div class='timing' id='untilIsha'></div>
</div>";
    }
    ?>
</div>

<!-- // Aşağıdakı javasicrpt-də keçən namaz vaxtlarını boz, indiki namaz vaxtını yaşıl, və gələcək namaz vaxtını mavi rəngdə göstərdik həmçinin namaz vaxtına qalan vaxtıda hesablayıb göstəririk.
-->
<script>
    function calculateTimeDifference(start, end) {
        let startTime = new Date("1970-01-01 " + start);
        let endTime = new Date("1970-01-01 " + end);
        let now = new Date();
        let currentTime = new Date("1970-01-01 " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());

        if (currentTime >= startTime && currentTime <= endTime) {
            let difference = endTime - currentTime;
            let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((difference % (1000 * 60)) / 1000);
            return hours + " saat " + minutes + " dəqiqə " + seconds + " saniyə";
        } else {
            return "";
        }
    }

    function displayRemainingTime() {
        const timings = [
            { start: 'fajrTime', end: 'dhuhrTime', display: 'untilDhuhr', name: 'Zöhür' },
            { start: 'dhuhrTime', end: 'asrTime', display: 'untilAsr', name: 'Əsir' },
            { start: 'asrTime', end: 'maghribTime', display: 'untilMaghrib', name: 'Məğrib' },
            { start: 'maghribTime', end: 'ishaTime', display: 'untilIsha', name: 'İşa' }
        ];

        for (let timing of timings) {
            let startTime = document.getElementById(timing.start).innerText;
            let endTime = document.getElementById(timing.end).innerText;
            let remainingTime = calculateTimeDifference(startTime, endTime);
            if (remainingTime) {
                document.getElementById(timing.display).innerText = timing.name + "ə " + remainingTime + " qalıb";
            } else {
                document.getElementById(timing.display).innerText = "";
            }
        }
    }

    setInterval(displayRemainingTime, 1000);  // Hər saniyə yenilənir
    
    
    
    
    
    
    
    
    
    
   function updateRowStyles() {
    const timings = [
        { id: 'fajrTime', next: 'dhuhrTime' },
        { id: 'dhuhrTime', next: 'asrTime' },
        { id: 'asrTime', next: 'maghribTime' },
        { id: 'maghribTime', next: 'ishaTime' },
        { id: 'ishaTime', next: null }
    ];

    let now = new Date();
    let currentTime = new Date("1970-01-01 " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());

    for (let i = 0; i < timings.length; i++) {
        let currentTiming = document.getElementById(timings[i].id).innerText;
        let currentTimingDate = new Date("1970-01-01 " + currentTiming);

        // Əvvəlcə bütün rəng siniflərini silirik
        document.getElementById(timings[i].id).classList.remove('past', 'current', 'upcoming');

        if (timings[i].next) {
            let nextTiming = document.getElementById(timings[i].next).innerText;
            let nextTimingDate = new Date("1970-01-01 " + nextTiming);

            if (currentTime >= currentTimingDate && currentTime < nextTimingDate) {
                document.getElementById(timings[i].id).classList.add('current');
            } else if (currentTime >= nextTimingDate) {
                document.getElementById(timings[i].id).classList.add('past');
            } else {
                document.getElementById(timings[i].id).classList.add('upcoming');
            }
        } else if (currentTime >= currentTimingDate) {
            document.getElementById(timings[i].id).classList.add('past');
        } else {
            document.getElementById(timings[i].id).classList.add('upcoming');
        }
    }
}

updateRowStyles();



</script>



</body>
</html>

Gədəbəy · 24 Noy 2023

Demo: http://wapusta.net/namaz/namaz_vaxti.php
Php versiya 7.1
chomdları serverə uyğun verin

CoDiNG · 24 Noy 2023

Təşəkkürlər. Gözəl izah olub

Məncə çoxsu yararlanar bundan.

Kamil · 24 Noy 2023

Tesekurler

Hamza · 24 Noy 2023

Cox saqol Qardaş

Hikmət · 24 Noy 2023

Vaxtım olsa bunu götürüb işləyərdim...

AslanGeo · 25 Noy 2023

Davami gəlsin İnsallah. Əllərnizə Sagliq

Gədəbəy · 25 Noy 2023

Hamıya təşəkkür edirəm xoş sözlər üçün.

məqsədim kod biliyi olanları təşfik edib həm koda əlavələr etdirməkdi həmdə özümüzü təkminləşdirməkdi, ona görədə xayiş edirəm sizində şorbada duzunuz olsun.

Megastore · 28 Noy 2023

Cox saqol qaqash

rusif · 3 Yan 2024

Gədəbəy said:
Demo: http://wapusta.net/namaz/namaz_vaxti.php
Php versiya 7.1
chomdları serverə uyğun verin

Bu vaxtı düz göstərmir - https://islam.az/namaz-vaxti/

rusif · 3 Yan 2024

rusif said:
Bu vaxtı düz göstərmir - https://islam.az/namaz-vaxti/

burda düz göstərir vaxtı

Forumda sizi görməkdə şadıq 👋,

Forum məzmununa və bütün xidmətlərimizə daxil olmaq üçün qeydiyyatdan keçməli və ya foruma daxil olmalısınız. Foruma üzv olmaq tamamilə ödənişsizdir.

Adım-Adım Php İlə Namaz Vaxtı Kodu Yazırıq

Gədəbəy

Yeni İstifadəçi

Qoşmalar

Gədəbəy

Yeni İstifadəçi

CoDiNG

Aktiv istifadəçi

Kamil

Aktiv istifadəçi

Hamza

www.Add.Az - Peşəkarlar burada görüşür

Hikmət

Yeni İstifadəçi

AslanGeo

Məhşur istifadəçi

Gədəbəy

Yeni İstifadəçi

Megastore

Yeni İstifadəçi

rusif

Yeni İstifadəçi

rusif

Yeni İstifadəçi

Oxşar mövzular